/* ==========================================================================
   Účty, statistiky a souhlas s ukládáním

   Sekce: odznak v liště → výběr profilu v dialogu → stránka Profil
          → lišta souhlasu

   Stejná smlouva jako u ostatních komponent: barvy, tvary a písma se berou
   výhradně z proměnných v tokens.css, aby to sedlo do všech motivů.
   ========================================================================== */

/* -------------------------------------------------------- odznak v liště */
.account-slot {
  display: flex;
  align-items: center;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(7px * var(--ui));
  /* tentýž tvar jako sekundární tlačítko v liště (.chip_layout),
     jen s kolečkem iniciál vlevo, proto stejné odsazení i stupeň */
  padding: 3px 0.875rem 3px 3px;
  /* Linka drží --border-strong, tentýž stupeň jako dráha vypínače režimu
     (.theme-track) a spouštěč jazyka (.theme-trigger) vedle: prvky lišty
     musí mít stejně silný obrys, jinak jeden z nich vystoupí. */
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

.account-chip:hover {
  background-color: var(--surface-2);
  border-color: var(--text);
}

/* --text-faint je v motivu Ivory jílový, takže by šipka odznaku svítila
   akcentem. Tlumené drobnosti proto berou --text-muted. */
.account-chip .icon {
  width: calc(14px * var(--ui));
  height: calc(14px * var(--ui));
  color: var(--text-muted);
}

/* Iniciály v kolečku. Stejný prvek slouží i v dialogu a v seznamu profilů,
   proto má vlastní třídu a ne jen selektor uvnitř odznaku. */
.account-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(24px * var(--ui));
  height: calc(24px * var(--ui));
  border-radius: var(--r-pill);
  background-color: var(--accent-soft);
  color: var(--accent);
  font-family: var(--label-font);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* Host = zatím žádný profil. Odznak nesmí vypadat aktivně, jinak by se
   pletl s přihlášeným účtem. */
.account-chip.is-anon {
  color: var(--text-muted);
}

.account-chip.is-anon .account-avatar {
  background-color: var(--surface-2);
  color: var(--text-muted);
}

/* Dlouhá přezdívka nesmí roztlačit lištu, v panelu nabídky se smí rozvinout,
   tam je na ni celá šířka okna (viz responsive.css). */
.account-name {
  max-width: calc(96px * var(--ui));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------- výběr profilu v dialogu */
.picker-list {
  display: grid;
  gap: calc(6px * var(--ui));
  margin-bottom: var(--sp-4);
}

.picker-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: calc(9px * var(--ui)) calc(11px * var(--ui));
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.picker-row:hover {
  border-color: var(--accent);
}

.picker-row[aria-current="true"] {
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

.picker-row .icon {
  margin-left: auto;
  color: var(--accent);
}

.picker-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.picker-name {
  font-weight: 700;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ zadání přezdívky */
.name-form {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.name-form .btn {
  flex: none;
}

/* Dialog s přezdívkou (promptName v js/account.js): tiché tlačítko pod
   formulářem drží od Pokračovat stejnou mezeru, jakou má pole od tlačítka
   (--sp-2). Výchozích --sp-4 z .dialog-body tu dělalo zbytečnou díru,
   nejvíc na mobilu, kde tlačítka stojí pod sebou. */
.dialog--name .dialog-body:not(:empty):not(:last-child) {
  margin-bottom: var(--sp-2);
}

.field-text {
  flex: 1;
  min-width: 0;
  padding: calc(9px * var(--ui)) calc(11px * var(--ui));
  background-color: var(--surface-inset);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--text);
}

.field-text::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Safari na iOS přiblíží celou stránku, jakmile se zaostří pole s písmem
   menším než 16 px, dialog by se hned po klepnutí odsunul mimo obraz.
   Na dotykových zařízeních proto pole drží přesně 16 px. */
@media (pointer: coarse) {
  .field-text {
    font-size: 1rem;
  }
}

/* Na úzkém displeji se tlačítko vedle pole nevejde tak, aby v poli zbylo
   místo na přezdívku, řádek se rozdělí na dva. */
@media (max-width: 420px) {
  .name-form {
    flex-wrap: wrap;
  }

  .name-form .field-text {
    flex: 1 1 100%;
  }

  .name-form .btn {
    flex: 1 1 auto;
  }
}

/* ======================================================== stránka Profil */
/* Sekce stránky drží stejnou šířku sloupce jako .hero a .menu, aby všechno
   lícovalo na jedné ose. */
.block {
  width: 100%;
  max-width: var(--stack-w);
}

.block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Pod textem sázeným na osu (404) drží tlačítka tutéž osu. */
.block-actions--center {
  justify-content: center;
}

.list-empty {
  padding: var(--sp-4);
  background-color: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ statistiky */
/* Šest sloupců schválně: dělí se beze zbytku na tři i na dvě, takže řady
   pod hlavní kartou vycházejí po dvou i po třech. Automatická mřížka
   (auto-fit) by karty rozházela nestejně. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(10px * var(--ui));
}

/* Přepínač „moje / všech hráčů“ nad kartami. Vzhled si bere od tabů žebříčku
   (leaderboard.css), jen se neroztahuje přes celý blok, dvě položky přes
   šest sloupců vypadají jako pruh, ne jako přepínač. */
.stats-scope {
  width: fit-content;
  max-width: 100%;
}

.stats-scope .tab {
  flex: 0 0 auto;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--ui));
  padding: calc(14px * var(--ui)) calc(16px * var(--ui)) calc(15px * var(--ui));
  background-color: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* První karta je nejvyšší skóre a nese hlavní číslo stránky: dostane celou
   řadu a větší cifru, ostatní karty se dělí o řady pod ní. Pět karet
   vychází hero + 2 × 2, šest hero + 3 + 2, sedm hero + 3 + 3; třídy
   --six/--seven přepíná renderStats() v js/profile.js. */
.stat-card:first-child {
  grid-column: 1 / -1;
}

.stat-card:first-child .stat-card-value {
  font-size: clamp(2.6rem, 9vw, 3.4rem);
}

.stat-card:nth-child(n+2) {
  grid-column: span 3;
}

.stats-grid--six .stat-card:nth-child(n+2),
.stats-grid--seven .stat-card:nth-child(n+2) {
  grid-column: span 2;
}

.stats-grid--six .stat-card:nth-child(n+5) {
  grid-column: span 3;
}

.stat-card-head {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui));
  font-family: var(--label-font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-card-head .icon {
  width: calc(14px * var(--ui));
  height: calc(14px * var(--ui));
  color: var(--accent);
}

/* velká čísla statistik v serifu, stejně jako skóre v dialogu */
.stat-card-value {
  font-family: var(--font-display);
  font-weight: var(--num-weight);
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-card-meta {
  font-family: var(--font-display);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Nula není výsledek, jen prázdno, nesmí přebít kartu, kde už něco je. */
.stat-card.is-empty .stat-card-value {
  color: var(--text-muted);
  opacity: 0.45;
}

.stat-card.is-empty .stat-card-head .icon {
  color: var(--text-muted);
  opacity: 0.6;
}

/* --------------------------------------------------------- seznam profilů */
/* Mřížka s mezerou 1 px místo rámečků kolem každého řádku, stejný postup
   jako u rozcestníku .menu, aby seznam nedělal mřížku v mřížce. */
.profile-list,
.data-list {
  display: grid;
  gap: 1px;
  /* dělicí linky v --border-strong, bez stínu musí být vidět,
     stejný postup jako u rozcestníku .menu */
  background-color: var(--border-strong);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.profile-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(11px * var(--ui)) calc(14px * var(--ui));
  background-color: var(--surface);
}

.profile-row.is-active {
  background-color: var(--accent-soft);
}

.profile-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 0.9375rem;
  min-width: 0;
}

.profile-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui));
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Tlačítko jen s ikonou, mazání a přejmenování se do řádku textem nevejdou. */
.btn--icon {
  padding: calc(7px * var(--ui));
  background-color: transparent;
  border-color: var(--border-heavy);
  color: var(--text-muted);
}

.btn--icon .icon {
  width: calc(16px * var(--ui));
  height: calc(16px * var(--ui));
}

.btn--icon:hover:not(:disabled) {
  background-color: var(--surface-2);
  border-color: var(--accent);
  color: var(--text);
}

.btn--icon.btn--danger {
  color: var(--bad);
}

.btn--icon.btn--danger:hover:not(:disabled) {
  background-color: var(--bad);
  border-color: var(--bad);
  color: var(--inverse-ink);
  filter: none;
}

/* --------------------------------------------------------------- štítek */
.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ui));
  padding: 1px calc(9px * var(--ui));
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--label-font);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.pill--on {
  color: var(--good);
  border-color: var(--good);
}

.pill--off {
  color: var(--text-muted);
}

/* --------------------------------------------------------- data a soukromí */
.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: calc(13px * var(--ui)) calc(14px * var(--ui));
  background-color: var(--surface);
}

.data-copy {
  flex: 1 1 calc(240px * var(--ui));
  min-width: 0;
}

.data-title {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

.data-desc {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.data-row .btn {
  flex: none;
}

/* Řádek se zálohou přijímá i přetažený soubor. Podbarvení místo rámečku:
   řádky v .data-list dělí linky mřížky a vlastní rámeček by je rozhodil. */
#importRow.is-drop {
  background-color: var(--accent-soft);
  outline: calc(2px * var(--ui)) dashed var(--accent);
  outline-offset: calc(-4px * var(--ui));
}

/* ------------------------------------------------------- lišta souhlasu */

/* Kolik místa si lišta dole vezme. Drží se v CSS, ne v naměřené hodnotě
   z js/consent.js: skript je odložený a doběhne až po prvním vykreslení,
   takže by se stránka po jeho dostavení přeskládala (vystředěný obsah
   poskočí vzhůru o polovinu toho, co mu zespodu ubude). Atribut nasazuje
   js/boot.js ještě před prvním pixelem, takže rezerva platí od začátku
   a lišta dosedne do místa, které na ni čeká.

   Míra je s rezervou nad skutečnou výšku karty ve všech třech jazycích
   (nejvyšší vyšla 233 px při --ui 1). Přebytek není vidět: `.consent` je
   průhledná a neklikatelná, karta v ní sedí u spodní hrany. Užší displeje
   mají vlastní míru v responsive.css, tam se karta láme do sloupce. */
:root[data-consent="ask"] {
  --consent-space: calc(245px * var(--ui));
}

/* Leží nad stránkou, ale POD modálním dialogem (z-index 50) a hláškami (60):
   dialog je vždycky odpověď na akci hráče a musí být navrchu. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: var(--consent-space, 0px);
  padding: var(--gutter);
  pointer-events: none;
}

.consent-card {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3) var(--sp-4);
  width: 100%;
  max-width: calc(660px * var(--ui));
  padding: clamp(16px, 3vw, calc(22px * var(--ui)));
  background-color: var(--surface);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: consentIn var(--t-med) both;
}

@keyframes consentIn {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

.consent-icon {
  display: grid;
  place-items: center;
  width: calc(38px * var(--ui));
  height: calc(38px * var(--ui));
  border-radius: var(--r-sm);
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border);
  color: var(--accent);
}

.consent-icon .icon {
  width: calc(20px * var(--ui));
  height: calc(20px * var(--ui));
}

.consent-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight-sm);
  font-size: clamp(1.05rem, 3.4vw, 1.25rem);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  margin-bottom: calc(5px * var(--ui));
}

.consent-text {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.consent-text strong {
  color: var(--text);
  font-weight: 700;
}

.consent-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.consent-actions .btn {
  flex: 1 1 calc(160px * var(--ui));
}

/* ------------------------------------------------------------ drobnosti */
/* Varovná varianta poznámky, používá ji dialog účtu, když je ukládání
   vypnuté, a stránka se zásadami. */
.note--warn {
  border-color: var(--warn);
}

.note--warn .icon {
  color: var(--warn);
}

.note--warn a {
  text-decoration: underline;
}

/* Patička rozcestníku, jediná věta a odkaz na zásady. Drží osu sloupce
   stejně jako .hero a .menu nad ní. */
.foot-note {
  width: 100%;
  max-width: var(--stack-w);
  margin-top: calc(4px * var(--ui));
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  text-wrap: pretty;
}

.foot-note a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.foot-note a:hover {
  color: var(--accent);
}

/* Název cookie nebo klíče v úložišti se čte jako kód, ne jako věta. */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text);
}

/* Řádek s technickými údaji pod nadpisem právní stránky. */
.legal-meta {
  font-family: var(--label-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  margin-bottom: var(--sp-5);
}