/* Profile dialog (js/ui/profile.js). Same slate panels and block edges as style.css; reached
   achievements read as solid blocks with the block edge, open ones as flat outlines, so the
   collection is readable at a glance without a progress bar. */

/* Fixed height, so the tab bar does not jump when a tab with less content is chosen. */
.pf { height: min(720px, calc(100vh - 32px)); height: min(720px, calc(100dvh - 32px)); }
@media (max-width: 900px) { .pf { height: min(720px, calc(100dvh - 16px - var(--safe-t) - var(--safe-b))); } }
.pf .modal-body { gap: var(--s3); flex: 1; align-content: start; }
.pf-tabs { padding: 0; margin-top: 0; }
.pf-tabs button { flex: 0 1 auto; }
/* No explicit min-height: in the fixed-height body it would let the row shrink below its content,
   which then spills past the box and lands on the footer edge when scrolled down. The bottom
   padding keeps the last line of a scrolled tab clear of that edge. */
.pf-content { display: grid; gap: var(--s4); align-content: start; padding-bottom: var(--s4); }
.pf-overview, .pf-badges, .pf-history { display: grid; gap: var(--s3); }
.pf-note { padding: var(--s3); background: var(--slate-2); border-top: 4px solid var(--bad); font-size: 14px; }

/* Lead row: games and wins are what the overview is opened for, so they alone get the big sign
   font in a solid block; records and duels below sit in flat outlines, one step quieter. */
.pf-lead {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s4) var(--s4); background: var(--slate-2); border-top: 4px solid var(--line);
}
.pf-stat { min-width: 0; }
.pf-stat .k, .pf-places .k { color: var(--text-3); font-size: 13px; }
.pf-stat .v { font: 700 38px/1.05 var(--font-sign); color: var(--text); font-variant-numeric: tabular-nums; }
.pf-stat .d { color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
/* Places as one bar: each segment is as wide as its share of the games, labelled with the place;
   the exact counts are in the tooltip and in the bar's accessible name. 2 px gaps keep steps apart. */
.pf-places { grid-column: 1 / -1; display: grid; gap: 4px; }
.pf-places-bar { display: flex; gap: 2px; height: 22px; }
.pf-place-seg {
  flex: 1 1 0; min-width: 24px; display: flex; align-items: center; padding-left: 6px; overflow: hidden;
  font: 700 13px var(--font-sign); color: var(--slate);
}
.pf-place-seg:first-child { border-radius: var(--r) 0 0 var(--r); }
.pf-place-seg:last-child { border-radius: 0 var(--r) var(--r) 0; }

/* Records as a label/value list and duels as three counters: two different shapes on purpose,
   side by side where there is room. */
.pf-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.pf-records, .pf-duels { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); }
.pf-pair h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); margin-bottom: var(--s2); font-size: 17px; }
.pf-h-note { font: 400 13px var(--font-body); color: var(--text-3); }
.pf-records dl { margin: 0; display: grid; gap: 6px; }
.pf-records dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.pf-records dt { font-size: 14px; color: var(--text-2); }
.pf-records dd { margin: 0; font: 700 17px var(--font-sign); white-space: nowrap; }
.pf-duels ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.pf-duels li { display: grid; gap: 2px; align-content: start; min-width: 0; }
.pf-duels .v { font: 700 24px/1 var(--font-sign); }
.pf-duels .k { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; hyphens: auto; }

/* "Daten" closes the overview: recording, export/import/delete and what is stored, folded away. */
.pf-data { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.pf-data h3 { font-size: 17px; }
.pf-data-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* Funken: the account's one currency gets its own block above "Du" instead of a tile among the
   totals. Big number in the sign font next to the spark; the top edge takes the spark's ember
   (not brass, which stays the main action's colour). */
.pf-coins {
  --ember: #e8692a;
  display: grid; grid-template-columns: 52px auto minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: center;
  padding: var(--s3) var(--s4); background: var(--slate-2); border-top: 4px solid var(--ember);
}
.pf-coins-mark { width: 52px; height: 52px; animation: pf-ember-float 3.2s ease-in-out infinite alternate; }
/* The one looping motion in the menus, asked for by the owner (26.10.2026): the spark drifts a few
   pixels up and down like an ember in warm air. Still under reduced motion. */
@keyframes pf-ember-float { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
:root[data-motion="reduce"] .pf-coins-mark { animation: none; }
.pf-coins-k { font: 600 15px var(--font-sign); color: var(--text-2); }
.pf-coins-v { font: 700 38px/1 var(--font-sign); color: var(--text); font-variant-numeric: tabular-nums; }
.pf-coins-note { justify-self: end; max-width: 32ch; text-align: right; font-size: 13px; color: var(--text-3); }

/* Total play time: the last line of the overview, as wide as the grid above it. */
.pf-time {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3);
  padding: var(--s3); background: var(--slate-2); border-top: 4px solid var(--line);
}
.pf-time .k { flex-basis: 100%; color: var(--text-3); font-size: 13px; }
.pf-time .v { font: 700 22px var(--font-sign); }

/* ------------------------------------------------------------ achievements */

/* Achievement icons (js/badgeicons.js): own fills on a dark plaque; locked ones lose their colour
   and step back, so the earned ones carry the list. */
.bi { display: block; flex: none; }
.bi svg { display: block; width: 100%; height: 100%; }
/* the mark goes grey, the plaque keeps a dimmed rarity colour */
.bi.locked .bi-glyph { filter: grayscale(1) brightness(.85); opacity: .55; }
.bi.locked .bi-plate { opacity: .7; }
.tier-1 { --tier: var(--tier-1); } .tier-2 { --tier: var(--tier-2); } .tier-3 { --tier: var(--tier-3); }
.tier-4 { --tier: var(--tier-4); } .tier-5 { --tier: var(--tier-5); }
.pf-badges h3 { margin-top: var(--s2); font-size: 19px; }
.pf-badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2); }
.pf-badge {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); align-items: stretch;
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); color: var(--text-3);
}
.pf-badge.done {
  background: var(--slate-2); background: color-mix(in srgb, var(--tier) 8%, var(--slate-2)); color: var(--text-2);
  box-shadow: 0 3px 0 var(--edge); border-color: color-mix(in srgb, var(--tier) 35%, var(--line)); border-left: 4px solid var(--tier); padding-left: calc(var(--s3) - 3px);
}
.pf-badge .bi { width: 40px; height: 40px; align-self: start; }
.pf-badge-body { display: flex; flex-direction: column; min-width: 0; }
.pf-badge-end { margin-top: auto; padding-top: var(--s1); }
.pf-badge-name { font: 700 18px/1.15 var(--font-sign); color: var(--text-2); }
.pf-badge.done .pf-badge-name { color: var(--text); }
.pf-badge-text { font-size: 14px; margin-top: 2px; }
.pf-badge-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3); }
.pf-badge-when { font: 600 13px var(--font-sign); color: var(--text-3); }
.pf-badge.done .pf-badge-when { color: var(--text-2); }
/* rarity: name in its colour plus 1 to 5 filled squares */
.pf-tier { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--font-sign); color: var(--tier); text-transform: uppercase; letter-spacing: .5px; }
.pf-tier-pips { display: inline-flex; gap: 2px; }
.pf-tier-pips i { width: 6px; height: 6px; background: var(--slate-3); }
.pf-tier-pips i.on { background: var(--tier); }
.pf-badges h3 .pf-tier { font-size: 17px; }
.pf-badges h3 .pf-tier-pips i { width: 8px; height: 8px; }
.pf-badge-bar { height: 4px; margin-bottom: 6px; background: var(--slate-3); }
.pf-badge-bar > i { display: block; height: 100%; background: var(--tier); }
.pf-badge-list { display: grid; gap: var(--s3); }
.pf-badge-list > h3 { margin-top: var(--s2); }
.pf-badge-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2) var(--s4); }
.pf-tool { display: grid; gap: 2px; font: 600 13px var(--font-sign); color: var(--text-3); }
.pf-tool select { min-height: 40px; width: auto; min-width: 150px; }
.pf-badge-tools .check { min-height: 40px; }
@media (max-width: 560px) {
  .pf-badge-tools { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .pf-tool select { min-width: 0; width: 100%; min-height: 44px; }
  .pf-badge-tools .check { grid-column: 1 / -1; min-height: 44px; }
}

/* ------------------------------------------------------------ history */

.pf-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-game {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: 8px 12px; background: var(--slate-2); border: 1px solid var(--line); border-radius: var(--r);
}
.pf-place { font-size: 24px; text-align: center; }
.pf-game.won .pf-place { color: var(--brass); }
.pf-welcome .pf-place, .pf-buy .pf-place { color: var(--brass); }
.pf-welcome .pf-place .icon, .pf-buy .pf-place .icon { width: 22px; height: 22px; }
.pf-game-title { font: 600 17px var(--font-sign); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }
.pf-game-map { font-weight: 500; color: var(--text-2); }
.pf-tag { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--font-sign); color: var(--text-2); border: 1px solid var(--line); padding: 1px 6px; }
.pf-tag .icon { width: 14px; height: 14px; }
.pf-side { display: grid; justify-items: end; gap: 2px; }
.pf-worth { font-size: 17px; white-space: nowrap; }
.pf-coin-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 15px var(--font-sign); color: var(--text-2); white-space: nowrap; }
.pf-coin-chip .icon { width: 16px; height: 16px; }
/* A game with a stored end screen: the whole row is a button with an arrow at the end. */
.pf-game.has-sum { display: block; padding: 0; }
.pf-game-btn {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; gap: var(--s3); align-items: center;
  width: 100%; padding: 8px 12px; text-align: left; font: inherit; color: inherit;
  background: transparent; border: 0; box-shadow: none; border-radius: var(--r);
}
.pf-game-btn:hover:not(:disabled) { background: var(--slate-3); }
.pf-game-btn:active:not(:disabled) { transform: none; }
.pf-game-btn .pf-game-title { font: 600 17px var(--font-sign); }
.pf-game-go { width: 18px; height: 18px; color: var(--brass); transform: rotate(-90deg); }

.pf-ask { flex: 1 1 100%; font-size: 14px; color: var(--text); }

/* phone held sideways: the profile dialog fills the height */
@media (max-height: 520px) and (orientation: landscape) {
  .pf { height: calc(100dvh - 12px - var(--safe-t) - var(--safe-b)); }
}

/* ------------------------------------------------------------ achievement toasts */

/* Cards in the shared notification stack (#toasts, style.css); at the game end the stack rests
   above the result sheet's buttons. */
.badge-toast {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); align-items: center;
  width: min(300px, 100%); padding: 10px 14px 10px 12px;
  background: var(--slate); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 var(--edge-h) 0 var(--edge);
  border-left: 0; border-top: 4px solid var(--tier, var(--good));
  animation: toast-in .18s ease-out; transition: opacity .18s ease-in, transform .18s ease-in;
}
.badge-toast .bi { width: 36px; height: 36px; }
.badge-toast-kicker { font: 600 13px var(--font-sign); color: var(--text-3); }
.badge-toast-tier { color: var(--tier); font-weight: 700; }
.badge-toast-name { font: 700 19px/1.15 var(--font-sign); color: var(--text); }
.badge-toast-more { display: block; font: 600 15px var(--font-sign); color: var(--text-2); }
:root[data-motion="reduce"] .badge-toast { animation: none; transition: opacity .18s; }
/* slimmer on phones, as wide as the stack */
@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
  .badge-toast { padding: 6px 12px 6px 8px; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s2); }
  .badge-toast .bi { width: 30px; height: 30px; }
  .badge-toast-name { font-size: 17px; }
}
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .badge-toast { width: auto; }
}

@media (max-width: 560px) {
  .pf .modal-body { padding: var(--s4); }
  .pf-lead { gap: var(--s2) var(--s3); padding: var(--s3); }
  .pf-stat .v { font-size: 32px; }
  .pf-records, .pf-duels { padding: var(--s3); }
  .pf .modal-foot { padding: var(--s2) var(--s4); }
  .pf-tabs button { padding-left: 10px; padding-right: 10px; font-size: 16px; }
  .pf-game { grid-template-columns: 30px minmax(0, 1fr); }
  .pf-side { grid-column: 2; display: flex; align-items: center; gap: var(--s3); }
  .pf-worth { font-size: 15px; }
  .pf-coins { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s1) var(--s3); padding: var(--s3); }
  .pf-coins-mark { width: 40px; height: 40px; }
  .pf-coins-v { font-size: 32px; }
  .pf-coins-note { grid-column: 1 / -1; justify-self: start; max-width: none; text-align: left; }
}

/* ------------------------------------------------------------ account (ui/account.js) */

/* A block in the language of the consent card: a slate strip with a thick top edge. Brass while
   signed out (the one offer in the dialog), green once signed in (a state, like a reached
   achievement). A line with its buttons at the end, a short note under it. */
.acct { display: grid; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s3); background: var(--slate-2); border-top: 4px solid var(--brass); }
.acct.signed-in { border-top-color: var(--good); }
/* 150 px keeps "Angemeldet als …" and its buttons on one line where they fit; on a phone the buttons
   move below instead of squeezing the text into a column. */
.acct-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.acct-line { flex: 1 1 150px; display: flex; align-items: center; gap: var(--s2); font-size: 14px; color: var(--text-2); margin: 0; }
.acct-line b { color: var(--text); }
.acct-line .acct-dot { background: var(--good); border-color: var(--good); }
.acct-note { margin: 0; font-size: 13px; color: var(--text-3); }
.acct-coins { display: flex; align-items: flex-start; gap: var(--s2); }
.acct-coins .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.acct-line.acct-coins { align-items: center; }
.acct-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.acct-actions button, .acct-actions a.btn { min-height: 44px; }
.acct-actions a.btn { text-decoration: none; }
.acct-actions a.btn .icon { width: 16px; height: 16px; }
/* Key-only accounts: the one-time hint about taking the key to fynn.land, set off by a hairline. */
.acct-hint { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 14px; }
.acct-hint p { margin: 0; }
.acct-key { font: 600 18px/1.2 var(--font-sign); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
/* "Konto: FynnX" under a player-name field (menu, profile, lobby). */
.acct-name-line { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
.pf-me-ctl .acct-name-line { flex-basis: 100%; margin: 0; }

.acct-dot { flex: none; width: 12px; height: 12px; border: 2px solid var(--text-3); }

/* "Du" as a header row: the colour wish as a square with the block edge (like a seat's plate
   colour), the name in the sign font, figure and dice under it, "Ändern" at the end. The editor
   opens right below as a slate block; its label column sits on the left like the settings dialog. */
.pf-me { display: grid; gap: var(--s2); }
.pf-me-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.pf-me-chip { width: 28px; height: 28px; border-radius: var(--r); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .28); }
.pf-me-chip.is-empty { box-shadow: none; border: 2px dashed var(--text-3); }
.pf-me-id { display: grid; min-width: 0; }
.pf-me-name { font: 700 22px/1.15 var(--font-sign); color: var(--text); overflow-wrap: anywhere; }
.pf-me-name.is-empty { font-weight: 600; color: var(--text-3); }
.pf-me-look { font-size: 13px; color: var(--text-2); }
.pf-me-toggle { display: inline-flex; align-items: center; gap: 6px; }
.pf-me-caret { width: 16px; height: 16px; transition: transform .15s ease-out; }
.pf-me-toggle[aria-expanded="true"] .pf-me-caret { transform: rotate(180deg); }
:root[data-motion="reduce"] .pf-me-caret { transition: none; }
.pf-me-edit { display: grid; gap: var(--s2); padding: var(--s3); background: var(--slate-2); }
.pf-me-edit[hidden] { display: none; }
.pf-me-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.pf-me-row > :first-child { font: 600 15px var(--font-sign); color: var(--text-2); }
.pf-me-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.pf-me-ctl input { flex: 1 1 200px; max-width: 360px; }
.pf-me-value { font: 600 16px var(--font-sign); color: var(--text); }
.pf-swatches { gap: 6px; }
.pf-swatches .swatch { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
@media (max-width: 560px) {
  .pf-me-head { gap: var(--s2) var(--s3); }
  .pf-me-name { font-size: 20px; }
  .pf-me-edit { padding: var(--s2); }
  .pf-me-row { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s2); }
  .pf-me-row > :first-child { font-size: 14px; }
  .pf-swatches { display: grid; grid-template-columns: repeat(4, 44px); }
  .pf-swatches .swatch { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}

/* ------------------------------------------------------------ friends (ui/friends.js) */

.pf-friends { display: grid; gap: var(--s4); }
.fr-top { display: grid; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--slate-2); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--edge); }
.fr-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.fr-label { font: 600 15px var(--font-sign); color: var(--text-2); }
.fr-code-val { font: 700 26px/1 var(--font-sign); letter-spacing: 1.5px; color: var(--text); }
.fr-code button { margin-left: auto; }
.fr-add { display: grid; gap: 4px; }
.fr-add label { font: 600 15px var(--font-sign); color: var(--text-2); }
.fr-add-row { display: flex; gap: var(--s2); }
.fr-add-row input { flex: 1 1 auto; min-width: 0; font: 600 18px var(--font-sign); letter-spacing: 1px; text-transform: uppercase; }
.fr-add-row input::placeholder { text-transform: none; letter-spacing: 1px; }
.fr-add-row button { flex: none; }
.fr-note { margin: 0; min-height: 1.3em; font-size: 14px; color: var(--text-2); }
.fr-note:empty { display: none; }
.fr-note.is-bad { color: var(--bad); }
/* "Online-Status zeigen": the line under it lines up with the label text */
.fr-visible { display: grid; border-top: 1px solid var(--line); padding-top: var(--s2); }
.fr-visible .muted { margin: -8px 0 0 28px; }
.fr-lists { display: grid; gap: var(--s4); }
.fr-sec { display: grid; gap: var(--s2); }
.fr-sec h3 { font-size: 18px; }
.fr-count { color: var(--text-3); }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.fr-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r);
}
.fr-row.is-playing { border-left: 4px solid var(--good); padding-left: calc(var(--s3) - 3px); background: var(--slate-2); }
.fr-who { display: grid; gap: 1px; min-width: 0; }
.fr-who b { font: 700 18px/1.15 var(--font-sign); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-who-code { font: 600 13px var(--font-sign); color: var(--text-3); letter-spacing: .5px; }
.fr-acts { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
.fr-acts button { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.fr-ask { align-items: center; }
.fr-ask > span { font: 600 15px var(--font-sign); color: var(--text); }
.fr-play { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font: 600 15px var(--font-sign); color: var(--text); }
.fr-play-dot { width: 10px; height: 10px; background: var(--good); flex: none; }
.fr-play.is-off { font: 400 14px var(--font-body); color: var(--text-2); }
.fr-play .btn-primary { margin-left: auto; min-height: 40px; padding: 6px 16px; }
@media (max-width: 560px) {
  .fr-top { padding: var(--s3); }
  .fr-row { grid-template-columns: minmax(0, 1fr); }
  .fr-acts { grid-column: auto; grid-row: auto; justify-content: flex-start; }
  .fr-play { grid-row: auto; }
  .fr-play .btn-primary { margin-left: 0; }
}