/* ---------- Мета-екрани: титульний, профіль, досягнення, виклик, налаштування ---------- */

/* Дрібні деталі, спільні для всіх мета-екранів. */

.kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 0.88em;
}
.lnk { color: var(--brass-lit); cursor: pointer; }
.lnk.danger-lnk { color: #e8b3a8; }
.ok { color: var(--moss); }
.dim { color: var(--ink-dim); }
.lit { color: var(--brass-lit); }
.grow-panel { flex: 1; min-height: 0; }

/* Дрібна кнопка в панелі: не головна дія екрана, тож не пігулка на всю ширину. */
.mini {
  padding: 5px 11px; border-radius: 8px; font-size: 0.84em;
  align-self: flex-start;
}
.mini.danger { border-color: #6d2a20; color: #e8b3a8; }

/* Рядок-гачок: іконка, текст, іноді кнопка. Стоїть у пунктирній панелі — і саме пунктир
   каже, що це не стан, а запрошення щось зробити. */
.hook-row { display: flex; align-items: center; gap: 11px; font-size: 0.86em; line-height: 1.4; }
.hook-row .hook-icon { font-size: 1.5em; flex: none; }
.hook-row b { color: var(--ink); }

/* Поле введення. Рамка світлішає у фокусі — єдина підказка, куди зараз пишуть. */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.8em; color: var(--ink-muted); }
.field i { font-style: normal; }
.field input {
  font: inherit; font-size: 1.15em;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--edge);
  background: rgba(0, 0, 0, 0.45);
  -webkit-user-select: text; user-select: text;
}
.field input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(201, 151, 63, 0.12);
}
.field input::placeholder { color: var(--ink-dim); }

/* ---------- Титульний екран ---------- */

/* Логотип ліворуч, кубики праворуч, фон — ніша. Градієнт затемнює саме ліву половину: текст
   мусить лежати на темному, а малюнок — лишитися видним там, де тексту немає. */
.title-shell .stage { overflow: hidden; }
.title-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 62% 40%, rgba(255, 190, 90, 0.18), transparent 70%),
    linear-gradient(90deg, rgba(6, 4, 3, 0.94) 0%, rgba(6, 4, 3, 0.8) 40%, rgba(6, 4, 3, 0.25) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 30%, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.title-top {
  position: absolute; top: var(--pad); right: var(--pad);
  display: flex; align-items: center; gap: 8px;
  z-index: 3;
}
.title-left {
  position: absolute;
  left: clamp(16px, 5vw, 72px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: clamp(10px, 3dvh, 26px);
  width: min(420px, 52%);
  z-index: 2;
}
.title-kicker {
  font-size: 0.74em; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass);
}
.title-logo {
  font-size: clamp(30px, 12dvh, 62px);
  line-height: 1.02;
  color: var(--brass-lit);
  text-shadow: 0 4px 30px rgba(255, 154, 60, 0.35);
}
.title-logo.small { font-size: clamp(20px, 6dvh, 28px); }
.title-tag { font-size: 0.86em; max-width: 22em; line-height: 1.45; }
.title-brand { display: flex; flex-direction: column; gap: 5px; }

.title-actions { display: flex; flex-direction: column; gap: 9px; width: min(340px, 100%); }
.title-btn {
  justify-content: flex-start;
  gap: 11px;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 1em; font-weight: 600;
}
.title-btn.half { flex: 1; justify-content: center; font-size: 0.9em; padding: 9px 12px; }
/* «Продовжити» несе стан рану, тож вона вища за решту й латунна: це не одна з дій, а та,
   через яку гравець сюди й прийшов. */
.title-btn.continue { padding: 12px 16px; box-shadow: 0 14px 34px -14px rgba(242, 203, 132, 0.5); }
.continue .cont-face { --art-size: clamp(28px, 7dvh, 42px); flex: none; }
.continue .cont-face img, .continue .cont-face .art-fb { transform: scaleX(-1); }
.cont-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; text-align: left; }
.cont-text b { font-size: 1.1em; }
.cont-sub { font-size: 0.76em; opacity: 0.78; font-weight: 500; }
.cont-arrow { font-size: 1.2em; }
.title-note { font-size: 0.72em; color: var(--ink-dim); max-width: 26em; line-height: 1.4; }

/* Кубики праворуч — не картинка, а справжні стартові кубики класів (showcaseDice). */
.title-dice {
  position: absolute;
  right: clamp(12px, 7vw, 110px); bottom: 16%;
  display: flex; align-items: flex-end; gap: clamp(10px, 2.4vw, 30px);
  z-index: 1;
}
/* display: flex обов'язковий: .die-fig — інлайновий span, а ширину йому задає --fig.
   В інлайновому потоці width не діє зовсім, і фігура розповзається за свої межі. */
.td-slot, .auth-die { display: flex; align-items: flex-end; }

/* ---------- Акаунт і вхід ---------- */

.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.auth-card {
  flex-direction: row;
  gap: 0;
  padding: 0;
  overflow: hidden;
  width: min(836px, 100%);
  max-height: 100%;
}
.auth-side {
  width: min(296px, 38%); flex: none;
  display: flex; flex-direction: column; gap: 12px;
  padding: calc(var(--pad) * 1.6);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 154, 60, 0.12), transparent 60%),
    linear-gradient(180deg, #241811, #140d08);
  border-right: 1px solid var(--edge);
}
.auth-why { font-size: 0.82em; line-height: 1.5; }
.auth-facts { display: flex; flex-direction: column; gap: 7px; font-size: 0.8em; }
.auth-facts span { display: flex; gap: 8px; align-items: flex-start; }
.auth-die { margin-top: auto; align-self: center; }
.auth-form {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: calc(var(--pad) * 1.6);
  overflow-y: auto;
}
.auth-save { width: 100%; }
.auth-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 8px; border-top: 1px solid var(--edge-dim);
  font-size: 0.84em;
}
.auth-note { font-size: 0.76em; line-height: 1.4; }

/* ---------- Профіль ---------- */

.prof-card { align-items: center; text-align: center; gap: 6px; }
.prof-face { position: relative; display: flex; align-items: center; justify-content: center; }
.prof-face .sprite {
  --art-size: clamp(48px, 16dvh, 92px);
  border-radius: 50%;
}
.prof-face .sprite img, .prof-face .sprite .art-fb { transform: scaleX(-1); }
.prof-lvl {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font-size: 0.66em; font-weight: 800; color: #1a1108;
  background: var(--brass-lit); border-radius: 999px; padding: 1px 9px;
  white-space: nowrap;
}
.prof-rank { width: 100%; display: flex; flex-direction: column; gap: 4px; }

.prof-tiles { flex-wrap: nowrap; }
.prof-tiles .stat-tile { flex: 1; }

.prof-classes { display: flex; flex-direction: column; gap: 7px; }
.prof-class {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.84em; cursor: pointer;
}
@media (hover: hover) { .prof-class:hover .pc-name { color: var(--brass-lit); } }
.pc-face { --art-size: clamp(22px, 5dvh, 34px); flex: none; }
.pc-face img, .pc-face .art-fb { transform: scaleX(-1); }
.pc-name { width: 6.5em; flex: none; }
.pc-lvl { width: 4em; flex: none; color: var(--brass-lit); font-size: 0.92em; }
.pc-bar { flex: 1; min-width: 40px; }
.pc-runs { width: 8em; flex: none; text-align: right; font-size: 0.9em; }

.ach-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; }
.ach-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px; border-radius: 11px;
  border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.35);
  text-align: center;
}
.ach-chip.got { border-color: var(--brass); }
.ach-chip .ac-ico { font-size: 1.4em; line-height: 1; }
.ach-chip .ac-name { font-size: 0.74em; line-height: 1.2; }

/* ---------- Досягнення ---------- */

.ach-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: var(--pad);
}
.ach-card {
  display: flex; gap: 11px; align-items: center;
  padding: calc(var(--pad) * 1.1);
  border-radius: 13px;
  border: 1px solid var(--edge);
  background: var(--grad-panel);
}
.ach-card.got { border-color: var(--brass); background: linear-gradient(180deg, rgba(58, 40, 25, 0.8), rgba(20, 13, 8, 0.92)); }
.ach-ico {
  width: clamp(34px, 8dvh, 52px); height: clamp(34px, 8dvh, 52px);
  flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(17px, 4dvh, 26px);
  background: radial-gradient(circle at 50% 30%, #3a2819, #140d08);
  border: 1px solid var(--edge-lit);
}
.ach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ach-name { font-size: 0.95em; font-weight: 700; }
.ach-name .ok { font-style: normal; }
.ach-desc { font-size: 0.8em; line-height: 1.3; }
.ach-prog { display: flex; align-items: center; gap: 8px; }
.ach-pct { font-size: 0.74em; color: var(--brass-lit); white-space: nowrap; flex: none; }

/* ---------- Щоденний виклик ---------- */

.daily-card { gap: 9px; }
.daily-kicker { font-size: 0.7em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.daily-twist { font-size: 0.84em; line-height: 1.45; }
.daily-cap { font-size: 0.76em; line-height: 1.4; }
.daily-card .act { width: 100%; margin-top: 4px; }
.daily-score { font-size: 2.2em; color: var(--brass-lit); line-height: 1; }

.daily-list { display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 0; }
.daily-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; border-radius: 11px;
  border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.28);
  font-size: 0.84em;
}
/* Найсвіжіша спроба підсвічена: у списку однакових рядків саме її й шукають. */
.daily-row.mine { border-color: var(--brass); background: rgba(201, 151, 63, 0.12); box-shadow: 0 0 18px -8px var(--brass); }
.dr-rank { width: 1.8em; text-align: center; color: var(--brass-lit); font-size: 1.15em; flex: none; }
.dr-face { --art-size: clamp(20px, 4.6dvh, 32px); flex: none; }
.dr-face img, .dr-face .art-fb { transform: scaleX(-1); }
.dr-date { flex: 1; min-width: 0; }
.dr-mid { width: 8em; text-align: right; flex: none; font-size: 0.92em; }
.dr-score { width: 4.5em; text-align: right; flex: none; font-size: 1.1em; }
.daily-empty, .daily-note { font-size: 0.8em; line-height: 1.45; }
.daily-note { margin-top: auto; color: var(--ink-dim); }

/* ---------- Налаштування ---------- */

.view-card {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 9px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.84em; text-align: center;
  cursor: pointer;
}
.view-card.on { border-color: var(--brass-lit); background: rgba(242, 203, 132, 0.1); }
.view-card.off { opacity: 0.5; }
.view-card .vc-ico { font-size: 1.5em; line-height: 1; }
.acc-face.big { width: 2.4em; height: 2.4em; font-size: 1em; }
.set-note { font-size: 0.76em; line-height: 1.4; }

/* ---------- Вузькі екрани ---------- */

/* На телефоні в ландшафті двоколонкові мета-екрани не влазять по ширині — колонки стають
   одна під одною, а сам блок скролиться. Скрол тут дозволений: це не бій, і втратити з
   поля зору кубики нема як. */
@media (max-width: 720px) {
  .meta-body { flex-direction: column; overflow-y: auto; }
  .meta-body > .meta-col { width: auto !important; }
  .auth-card { flex-direction: column; }
  .auth-side { width: auto; border-right: none; border-bottom: 1px solid var(--edge); }
  .title-left { width: min(420px, 72%); }
  .title-dice { display: none; }
}

/* ---------- Лідерборди ---------- */

/* Рядок дошки — той самий каркас, що й у щоденних спробах: одна колонкова сітка на
   обидва списки, бо читаються вони однаково, і розʼїхатися їм нема причини. */
.lb-list { display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 0; }
.lb-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; border-radius: 11px;
  border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.28);
  font-size: 0.84em;
}
.lb-row.mine { border-color: var(--brass); background: rgba(201, 151, 63, 0.12); box-shadow: 0 0 18px -8px var(--brass); }

/* Власний рядок поза топом «прилипає» під списком: у дошці на 50 місць його інакше не видно,
   а це єдине, заради чого лідерборд і відкривають. */
.lb-mine { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--edge); }

.lb-side { gap: 9px; }
.lb-pick {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid transparent; background: none;
  color: var(--ink-dim); font: inherit; font-size: 0.86em; cursor: pointer;
}
.lb-pick:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.lb-pick.on { color: var(--brass-lit); border-color: var(--brass); background: rgba(201, 151, 63, 0.1); }
.lb-empty { padding: var(--pad); font-size: 0.85em; line-height: 1.5; }

/* ---------- Вибір профілю при злитті акаунтів ---------- */

.conflict-card { flex-direction: column; padding: calc(var(--pad) * 1.6); gap: 12px; width: min(700px, 100%); }
.conflict-row { gap: 12px; align-items: stretch; }
.conflict-opt { flex: 1; gap: 7px; }
.conflict-opt .act { margin-top: auto; }

/* ---------- Заставка запуску ---------- */

/* Перший кадр неминуче чекає на анонімний вхід у Firebase. Показати логотип чесніше, ніж
   білий екран: гра не зависла, вона заходить. */
.shell.boot {
  align-items: center; justify-content: center; gap: 14px; text-align: center;
}