/* styles/main.css — «Тихий город». Дизайн-токены §9.2/§9.3/§0.12 + защиты платформы (yandex.md §2). */

/* ============ Сброс + защиты Яндекс Игр (yandex.md §2) ============ */
* {
  margin: 0; padding: 0; box-sizing: border-box;
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  width: 100%; height: 100%; height: 100dvh; height: var(--app-height, 100%);
  overflow: hidden;
  touch-action: manipulation;
  overscroll-behavior: none; -webkit-overflow-scrolling: none;
  font-family: var(--font-ui);
  color: var(--c-text);
  background: var(--c-bg);
}
#ui-root, .screen, #scene { height: 100%; height: var(--app-height, 100%); }
#scene { position: fixed; inset: 0; width: 100%; z-index: 0; touch-action: none; }
#ui-root { position: relative; z-index: 1; }

/* интерактив: свайп по элементам не должен скроллить страницу (yandex.md §2) */
button, .btn, .btn-icon, .chip, .player-card, input, .tab, .swatch { touch-action: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ============ Токены (§0.12 шрифты; §9.2 палитра; §9.3 шкала; §9.4 motion) ============ */
:root {
  --font-display: "Fredoka", system-ui, "Segoe UI", sans-serif;
  --font-ui: "Nunito", system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* бренд/нейтральные (вне тем) */
  --c-brand: #6C5CE7; --c-brand-hi: #8577F0; --c-brand-lo: #4A3CB8;
  --c-coins: #F5A623; --c-gems: #00C2CB;
  --c-premium-a: #FFD86B; --c-premium-b: #FF9E7A;
  /* семантика (Okabe–Ito, colorblind-safe) */
  --c-ok: #009E73; --c-danger: #D55E00; --c-warn: #E69F00; --c-info: #56B4E9;
  /* роли (только своя/раскрытие) */
  --c-role-mafia: #D55E00; --c-role-commish: #0072B2; --c-role-doctor: #009E73; --c-role-civ: #8A8296;

  /* шкала §9.3 */
  --fs-cap: 12px; --fs-body: 15px; --fs-lg: 18px; --fs-h3: 22px; --fs-h2: 28px; --fs-h1: 36px;
  --fs-num: 20px; --fs-timer: 34px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --shadow: 0 4px 12px rgba(43,36,56,.12);
  --t-fast: 120ms; --t-mid: 220ms; --t-slow: 400ms;
  --ease: cubic-bezier(.34,1.56,.64,1);
  --kb: 0px;
}

/* тема day (по умолчанию вне сессии) */
:root, .theme-day {
  --c-bg: #F4EEE2; --c-bg-scene-top: #BFE3F5; --c-bg-scene-bot: #EAF6FC;
  --c-surface: #FFFFFF; --c-surface-2: #FBF6EC; --c-border: #E7E0D3;
  --c-text: #2B2438; --c-text-2: #6B6480; --c-moon: #56B4E9;
}
.theme-night {
  --c-bg: #1E1B3A; --c-bg-scene-top: #151233; --c-bg-scene-bot: #2A2550;
  --c-surface: #2E2A52; --c-surface-2: #3A356B; --c-border: #4A4578;
  --c-text: #F3F1FF; --c-text-2: #B8B2D8; --c-moon: #8AD1FF;
}
body { transition: background var(--t-slow) ease; }

/* высокий контраст (§9.12) */
.high-contrast { --c-border: #000; --shadow: 0 4px 12px rgba(0,0,0,.35); }
.high-contrast.theme-night { --c-border: #fff; }

@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
.reduce-motion *, .reduce-motion ::before, .reduce-motion ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

/* цифры — tabular (§9.3) */
.tnum, .num, .timer, .wallet-chip, .vote-count, .rank-chip { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============ Экраны (yandex.md §15.1/15.2: класс-селекторы, opacity+visibility) ============ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-mid) ease, visibility var(--t-mid);
  padding: var(--sp-4);
  /* аудит-фикс: без прокрутки высокий контент (магазин/премиум/настройки) обрезался и кнопка «Назад» была
     недостижима на низких экранах. Прокручиваем сам экран; safe-area — под чёлку/home-indicator (viewport-fit=cover). */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: max(var(--sp-4), env(safe-area-inset-top));
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }
/* геймплейный оверлей пропускает клики к canvas, дети — кликабельны (§15.3); сессия НЕ прокручивается (свой layout) */
.screen--session { pointer-events: none; padding: 0; overflow: hidden; }
.screen--session > * { pointer-events: auto; }

/* ============ Типографика ============ */
h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); }
h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.body { font-size: var(--fs-body); }
.cap { font-size: var(--fs-cap); color: var(--c-text-2); }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-4); flex: 1; }

/* ============ Кнопки (§9.6) ============ */
.btn {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-lg);
  min-height: 48px; padding: 0 var(--sp-5); border: none; border-radius: var(--r-pill);
  cursor: pointer; color: #fff; background: var(--c-brand);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), filter var(--t-fast);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.btn:hover { background: var(--c-brand-hi); }
.btn:active { background: var(--c-brand-lo); transform: scale(.96); }
.btn[disabled] { opacity: .5; cursor: default; filter: grayscale(.4); }
.btn--big { min-height: 64px; font-size: var(--fs-h3); padding: 0 var(--sp-6); }
.btn--ghost { background: transparent; color: var(--c-text); border: 2px solid var(--c-border); }
.btn--ghost:hover { background: var(--c-surface-2); }
.btn--danger { background: var(--c-danger); }
.btn-icon { width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--c-surface); border: 2px solid var(--c-border); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-text); }

/* ============ Чипы: кошелёк, ранг ============ */
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-border); font-weight: 700; }
.chip .dot { width: 14px; height: 14px; border-radius: 50%; }
.chip--coins .dot { background: var(--c-coins); }
.chip--gems .dot { background: var(--c-gems); }
.premium-marker { background: linear-gradient(135deg, var(--c-premium-a), var(--c-premium-b)); color: #3a2b12; border: none; box-shadow: 0 0 10px rgba(255,158,122,.6); }

/* ============ Верхний бар меню ============ */
.topbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.topbar .spacer { flex: 1; }

/* ============ Сессия: раскладка (§9.9) ============ */
.session { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.session__header { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--c-surface) 88%, transparent); backdrop-filter: blur(6px); padding: var(--sp-3) var(--sp-4); padding-top: max(var(--sp-3), env(safe-area-inset-top)); display: flex; align-items: center; gap: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.phase-banner { flex: 1; min-width: 0; } /* min-width:0 → title-ellipsis работает во flex (аудит) */
.phase-banner .title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* аудит-фикс: чип роли/бота ('Вами управляет бот') не ломает шапку на узких экранах — ограничиваем ширину */
.session__header .chip { flex-shrink: 0; max-width: 38vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session__header .btn-icon { flex-shrink: 0; }
.phase-banner .hint { font-size: var(--fs-cap); color: var(--c-text-2); }
.timer { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-timer); min-width: 3ch; text-align: center; }
.timer.urgent { color: var(--c-warn); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes popin { from { opacity: 0; transform: scale(.8) translateY(8px); } to { opacity: 1; transform: none; } }

.stage { overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 600px) { .grid-cards { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); } }

/* ============ PlayerCard (§9.10) ============ */
.player-card { position: relative; background: var(--c-surface); border: 2px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-height: 44px; cursor: pointer; animation: popin var(--t-mid) var(--ease) both; }
.player-card.selectable:hover { border-color: var(--c-brand); }
.player-card.selected { border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 40%, transparent); }
.player-card.dead { opacity: .55; filter: grayscale(.5); }
.player-card .num { position: absolute; top: -6px; left: -6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-brand); color: #fff; font-weight: 900; font-size: var(--fs-num); display: flex; align-items: center; justify-content: center; z-index: 2; }
.player-card .avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--c-surface-2); border: 2px solid var(--c-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-text-2); }
.player-card .name { font-size: var(--fs-cap); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card .pmark { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: var(--r-pill); z-index: 2; }
.player-card .votes { position: absolute; bottom: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--c-warn); color: #3a2b12; font-weight: 900; font-size: var(--fs-cap); display: flex; align-items: center; justify-content: center; }
/* --- Косметика в карточке (§6.1.2/6.1.4): рамка-кольцо на аватаре, бейдж в углу, шиммер ника --- */
.player-card.has-frame .avatar { border-color: transparent; box-shadow: 0 0 0 3px var(--frame-color, var(--c-brand)); }
.player-card .badge-cos { position: absolute; bottom: -6px; left: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-brand); border: 2px solid var(--c-surface); z-index: 2; }
.player-card .mute-chip { font-size: 10px; font-weight: 800; line-height: 1; padding: 2px 6px; border-radius: var(--r-pill); background: var(--c-text-2, #6b7280); color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.name.nk-shimmer { background-image: linear-gradient(100deg, currentColor 30%, #fff 50%, currentColor 70%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nk-shimmer 2.4s linear infinite; }
@keyframes nk-shimmer { to { background-position: -200% center; } }
@media (prefers-reduced-motion: reduce) { .name.nk-shimmer { animation: none; background-image: none; -webkit-text-fill-color: currentColor; } }
.reduce-motion .name.nk-shimmer { animation: none; background-image: none; -webkit-text-fill-color: currentColor; } /* внутриигровой тумблер §6.1.5 */
.player-card .status { font-size: 11px; color: var(--c-text-2); display: flex; align-items: center; gap: 2px; }
@media (max-width: 600px) { .player-card .avatar { width: 44px; height: 44px; } }

/* ============ Chat (§9.6) ============ */
/* аудит-фикс: flex:1 мёртв в grid-треке .session → чат рос неограниченно и выталкивал поле ввода за экран.
   Ограничиваем высоту чат-блока; .chat__log прокручивается внутри, ввод всегда виден. */
.chat { display: flex; flex-direction: column; min-height: 0; max-height: 42vh; }
.chat__log { flex: 1; overflow-y: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.chat__msg { background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); max-width: 88%; word-break: break-word; }
.chat__msg .from { font-weight: 800; color: var(--c-brand); margin-right: var(--sp-1); }
.chat__msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--c-brand) 18%, var(--c-surface)); }
.chat__msg.system { align-self: center; background: transparent; color: var(--c-text-2); font-size: var(--fs-cap); }
.chat__input { position: sticky; bottom: var(--kb); display: flex; gap: var(--sp-2); padding: var(--sp-3); padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom)); background: var(--c-surface); border-top: 1px solid var(--c-border); }
.chat__input input { flex: 1; min-height: 44px; border-radius: var(--r-pill); border: 2px solid var(--c-border); padding: 0 var(--sp-4); font-size: var(--fs-body); background: var(--c-bg); color: var(--c-text); }
.chat__input input:disabled { opacity: .6; }
.chat__notice { padding: var(--sp-3); text-align: center; color: var(--c-text-2); font-size: var(--fs-cap); background: var(--c-surface); border-top: 1px solid var(--c-border); }

/* ============ Прокручиваемые контейнеры (yandex.md §2) ============ */
.chat__log, .stage, .scroll { -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.chat__log::-webkit-scrollbar, .stage::-webkit-scrollbar, .scroll::-webkit-scrollbar { display: none; }

/* ============ Role reveal / morning / вью-баннеры ============ */
.role-reveal { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); }
.role-badge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow); }
.role-badge .glyph { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: var(--fs-h2); }
.role-mafia { background: var(--c-role-mafia); } .role-commissioner { background: var(--c-role-commish); }
.role-doctor { background: var(--c-role-doctor); } .role-civilian { background: var(--c-role-civ); }

/* ============ Модалы/оверлеи ============ */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); animation: popin var(--t-fast) ease; }
.btn.sel, .btn--ghost.sel { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

/* ============ Toast ============ */
/* z-index 300 > модалки (200): валидационные тосты из модалки не прячутся под затемнением (аудит-фикс) */
.toast-wrap { position: fixed; left: 50%; bottom: calc(var(--sp-6) + var(--kb)); transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; max-width: calc(100vw - 32px); }
/* max-width + перенос: длинные тосты («Связь потеряна…») не обрезаются по краям экрана (аудит-фикс) */
.toast { background: var(--c-text); color: var(--c-bg); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-lg); box-shadow: var(--shadow); font-weight: 700; animation: popin var(--t-mid) var(--ease); max-width: 100%; word-break: break-word; text-align: center; }

/* ============ Панель/карточка ============ */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow); }
.list { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.reward-row { display: flex; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px dashed var(--c-border); }

/* ============ Адаптив: сайдбар платформы в ландшафте (yandex.md §10) ============ */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar, .session__header { padding-left: max(68px, env(safe-area-inset-left)); }
  /* :not(.screen--session) — иначе сессия получала И padding-left экрана, И padding шапки = двойной сдвиг (аудит) */
  .screen:not(.screen--session) { padding-left: max(var(--sp-4), 68px); }
}
@media (min-width: 900px) {
  .grid-cards { max-width: 620px; margin: 0 auto; }
  .session { grid-template-columns: 1fr; }
}