/* Дизайн-токены. Стиль: старые советские мультфильмы про пиратов — бумага, чернила, море. */
:root {
  --c-paper: #f4e7c8;
  --c-paper-dark: #e8d5a8;
  --c-card: #fff8e6;
  --c-ink: #3b2a1a;
  --c-ink-soft: #6e5640;
  --c-sea: #2e7d9a;
  --c-sea-deep: #1d5670;
  --c-sea-light: #8fc9d9;
  --c-red: #c0392b;
  --c-red-dark: #962d22;
  --c-gold: #d4a017;
  --c-silver: #a7a9ac;
  --c-bronze: #b0703c;

  --c-online: #3a9d4a;
  --c-afk: #e0a526;
  --c-gone: #c0392b;

  --font-title: "Georgia", "Times New Roman", serif;
  --font-body: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --stroke: 3px solid var(--c-ink);
  --shadow: 4px 4px 0 var(--c-ink);
  --shadow-sm: 2px 2px 0 var(--c-ink);

  --gap: 16px;

  /* дерево лодки и подложки портретов (cards.css) */
  --c-wood-light: #d9a46a;
  --c-wood: #b97a43;
  --c-wood-dark: #8a5a32;
  --c-tint-lady: #f6d3cf;
  --c-tint-snob: #ddd6ea;
  --c-tint-captain: #cfe3ec;
  --c-tint-boatswain: #f1dcb0;
  --c-tint-bailer: #d3e8d6;
  --c-tint-kid: #f7e7a6;

  /* карта роли: всё внутри в em, ширина = 12.5em, пропорция 5:7 */
  --card-ratio: 5 / 7;
  /* размеры зависят от высоты окна, чтобы поле игры влезало без прокрутки при высоте ≥ 800px:
     900px → 12.5px / 7.1px, 800px → 11px / 6.5px, ≥1140px → 16px / 9px */
  --card-fs: clamp(10px, calc(1.5vh - 1px), 16px);        /* крупная карта (панель «мои карты»), ширина 12.5em */
  --card-fs-small: clamp(6.5px, calc(.9vh - 1px), 9px);   /* .role-card--small в шапке */

  /* лодка boat-top.svg (viewBox 0 0 1000 300); центры банок в % ширины, 0 = нос (справа) */
  --boat-ratio: 1000 / 300;
  /* высота поля .sea ≈ 100vh − 102px; минус полоса неба / шапка ролей (≈ 17.5 × --card-fs-small,
     в партии --sky-band-h 120px + рамка), плашка (~40), отступы ячейки лодки (~44), подвал (hud.css):
     полоса описания, рамки и отступы ≈ 144px + два ряда припасов 2 × (7.5 + .45) ≈ 16 × --hand-fs;
     остаток — высота лодки, ширина = высота × 10/3 (с запасом ~5px) */
  --boat-max-w: clamp(560px, calc((100vh - 345px - 16 * var(--hand-fs) - 17.5 * var(--card-fs-small)) * 10 / 3), 1100px);
  --bench-w: 11;          /* ширина карты на банке, % ширины лодки (число) */
  --bench-y: 50%;
  --bench-0-x: 82%;
  --bench-1-x: 68.4%;
  --bench-2-x: 54.8%;
  --bench-3-x: 41.2%;
  --bench-4-x: 27.6%;
  --bench-5-x: 14%;

  --t-fast: 120ms;
  --t-base: 220ms;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* анимации карт (js/anim.js): перелёт шапка ↔ банка, выпрыгивание крупной карты */
  --t-card-flight: 440ms;   /* перелёт карты по дуге с приземлением */
  --t-card-slide: 280ms;    /* сдвиг карты раскладкой (соседка ушла из шапки) */
  --t-card-nudge: 360ms;    /* карта на банке сменила хозяина (бот уступил) — подскок */
  --t-card-stagger: 60ms;  /* задержка между картами одной пачки */
  --t-card-pop: 380ms;      /* крупная карта выпрыгивает в «мои карты» */
  --t-card-unpop: 280ms;    /* крупная карта уходит при отказе от роли */
  --t-card-fade: 150ms;     /* prefers-reduced-motion: только проявление/затухание */
  --ease-card-lift: cubic-bezier(.2, .7, .4, 1);  /* взлёт: резво вверх, замедление в верхней точке */
  --ease-card-drop: cubic-bezier(.5, 0, .9, .5);  /* падение: разгон вниз к приземлению */

  /* сцена утра (js/morning.js): заставка дня, ящик, раздача припасов, подъём солнца */
  --t-intro-in: 560ms;      /* «День N.» выпрыгивает на тёмном экране */
  --t-intro-hold: 1300ms;   /* заставка держится (клик — пропустить) */
  --t-intro-fade: 700ms;    /* экран светлеет, надпись уходит */
  --t-crate-sail: 1800ms;   /* ящик выплывает из-за правого края и тормозит */
  --t-crate-rock: 2800ms;   /* период покачивания ящика на волнах */
  --t-supply-deal: 520ms;   /* карта вылетает из ящика в ряд над лодкой */
  --t-supply-stagger: 110ms;/* задержка между картами раздачи */
  --t-supply-flip: 340ms;   /* переворот карты */
  --t-supply-take: 560ms;   /* чужая карта улетает к банке */
  --t-sun-rise: 1300ms;     /* солнце поднимается из моря в шапку */
  --ease-sail: cubic-bezier(.12, .6, .3, 1);      /* плывёт и плавно тормозит */
  --ease-flip: cubic-bezier(.45, 0, .3, 1.25);    /* переворот с лёгким перехлёстом */

  /* --- сцена моря (scene.css): утро, волны, солнце, ящик, карты припасов, заставка дня --- */
  --c-sky-top: #cfe6ea;          /* небо до начала партии (без data-phase берутся утренние токены ниже) */
  --c-sky-dawn: #f9d9a8;         /* у горизонта — тёплый рассвет */
  --c-horizon: #1d5670;          /* линия горизонта */
  --c-sea-far: #6fb3c8;          /* вода у горизонта (светлее) */
  --c-sun-glow: rgba(255, 214, 120, .55);  /* подсветка востока (правый край) */
  --c-sun-glow-soft: rgba(255, 236, 190, .25);
  --c-turn: #f7c234;             /* «сейчас выбирает» — солнечно-жёлтый (+ значок ▼) */
  --c-turn-glow: rgba(247, 194, 52, .55);
  --c-night: rgba(16, 26, 40, .94);  /* заставка дня */
  --c-night-text: #f4e7c8;       /* на --c-night контраст ≈ 14:1 */
  --c-night-accent: #f7c234;     /* «УТРО» на --c-night ≈ 10:1 */
  --c-tint-weapon: #f3d6cc;      /* подложки картинок припасов по смыслу */
  --c-tint-use: #d6e9ef;         /* одноразовые / расходники */
  --c-tint-treasure: #f5e3a8;    /* очки */
  --c-tint-gear: #dfe8cf;        /* снаряжение (открытое действует) */

  --sea-horizon: 14%;            /* высота линии горизонта от верха .sea (только %, его читает morning.js) */
  /* волны — сплошные полосы с широкими горбами (тайл = 2 горба, повтор по X; ниже тайла полосу
     продолжает заливка --c-wave-*-body). Аниматор сдвигает background-position-x на ширину тайла */
  --wave-far-w: 960px;  --wave-far-h: 100px;    /* горб 480px, высота ~12px */
  --wave-mid-w: 1440px; --wave-mid-h: 160px;    /* горб 720px, высота ~32px */
  --wave-midnear-w: 1680px; --wave-midnear-h: 200px;  /* горб 840px, высота ~46px */
  --wave-near-w: 1920px; --wave-near-h: 240px;  /* горб 960px, высота ~64px */
  /* верх полос (горизонт 14%): far 14% → mid 20% → midnear 32% → near 52% (шаг растёт к зрителю) */
  --wave-midnear-top: calc(var(--sea-horizon) + 18%);
  --wave-near-top: 52%;          /* гребень ближней полосы: чуть выше низа лодки */
  --c-wave-far-body: rgba(95, 168, 190, .85);   /* = заливка тела в waves-far.svg */
  --c-wave-mid-body: rgba(74, 159, 184, .92);   /* = waves-mid.svg */
  --c-wave-midnear-body: rgba(52, 123, 148, .93); /* = waves-midnear.svg */
  --c-wave-near-body: rgba(29, 86, 112, .94);   /* = waves-near.svg */
  --t-wave-far: 228s;   /* период дрейфа слоя на 1 тайл: ~4 → 11 → 16 → 23 px/с, дальние медленнее */
  --t-wave-mid: 132s;
  --t-wave-midnear: 105s;
  --t-wave-near: 84s;

  /* --- время суток (scene.css: .sea[data-phase] = morning | day | evening | finished) ---
     небо: верх → середина → у горизонта; вода: у горизонта → 55% → низ; подсветка неба (--glow-x — где) */
  --t-daytime: 2.4s;             /* плавная смена времени суток (цвета, солнце, луна, звёзды) */
  --c-sky-morning-top: #b8d4e3;  /* утро: прохладный верх, розово-персиковый горизонт */
  --c-sky-morning-mid: #f0c3c6;
  --c-sky-morning-low: #fbd4a4;
  --c-sea-morning-far: #86bcc6;
  --c-sea-morning: #3d88a2;
  --c-sea-morning-deep: #1f5870;
  --c-horizon-morning: #1d5670;
  --c-glow-morning: rgba(255, 186, 140, .6);
  --c-glow-morning-soft: rgba(255, 220, 190, .28);
  --glow-x-morning: 100%;        /* восток — справа, там солнце */
  --wave-filter-morning: sepia(.22) saturate(1.05) hue-rotate(0deg) brightness(1.03);

  --c-sky-day-top: #3aa6e0;      /* полдень: насыщенная лазурь */
  --c-sky-day-mid: #7cc9f0;
  --c-sky-day-low: #cdeefa;
  --c-sea-day-far: #46bad8;
  --c-sea-day: #1a8cbc;
  --c-sea-day-deep: #0d5a88;
  --c-horizon-day: #0f5a80;
  --c-glow-day: rgba(255, 255, 235, .35);
  --c-glow-day-soft: rgba(255, 255, 240, .12);
  --glow-x-day: 60%;
  --wave-filter-day: sepia(0) saturate(1.3) hue-rotate(0deg) brightness(1.06);

  --c-sky-evening-top: #161c45;  /* вечер и итог: сумерки, сине-фиолетовое небо, звёзды и луна */
  --c-sky-evening-mid: #3b3470;
  --c-sky-evening-low: #9a6a92;  /* последний сиреневый свет у горизонта */
  --c-sea-evening-far: #4f5d8f;
  --c-sea-evening: #27396a;
  --c-sea-evening-deep: #121b3a;
  --c-horizon-evening: #0e1430;
  --c-glow-evening: rgba(214, 120, 160, .4);
  --c-glow-evening-soft: rgba(150, 110, 190, .18);
  --glow-x-evening: 0%;          /* закат — слева */
  --wave-filter-evening: sepia(0) saturate(.7) hue-rotate(22deg) brightness(.6);
  /* кровавая вода (hud.css) — во всех фазах; вечером темнее. Порядок функций filter везде один —
     иначе переход между фазами не интерполируется */
  --wave-filter-blood: sepia(1) saturate(2.6) hue-rotate(-38deg) brightness(.82);
  --wave-filter-blood-evening: sepia(1) saturate(2.2) hue-rotate(-40deg) brightness(.52);
  --c-blood-evening-far: #7a3a4f;
  --c-blood-evening: #571c26;
  --c-blood-evening-deep: #280b12;
  --moon-size: clamp(36px, 7vh, 68px);

  --sun-size: clamp(44px, 8vh, 80px);
  --sky-band-h: 120px;                    /* полоса неба над плашкой в партии (высота шапки ролей с картами) */
  /* счётчик чаек в небе (R-1.3, 4 — суша): .sky-gulls в .sea-bg; .sky-gull — пустое место, .is-on — птица */
  --gull-w: clamp(22px, 3.6vh, 28px);   /* ширина птицы (высота = 2/3) */
  --gull-gap: 5px;
  --gull-empty-opacity: .7;             /* пустое место днём / утром */
  --gull-empty-opacity-evening: .9;     /* на тёмном небе пунктир бледнеет — делаем плотнее */
  --gull-halo: drop-shadow(0 0 1.5px rgba(255, 250, 235, .85));         /* светлый ореол: контур не тонет */
  --gull-halo-evening: drop-shadow(0 0 2.5px rgba(255, 240, 205, .75));  /* в сумерках ореол шире */
  --t-gull-on: 500ms;          /* чайка прилетела: проявление + рост из .45 */
  --t-gull-flap: 1.4s;         /* взмах крыльев (scaleY) */
  --t-gull-bob: 3.2s;          /* покачивание вверх-вниз */
  --crate-w: clamp(52px, 9vh, 92px);
  /* карта припаса: всё в em, ширина 12.5em, пропорция --card-ratio; чуть крупнее .role-card--small */
  --supply-fs: clamp(8px, calc(1.1vh - 1px), 11px);

  /* --- партия (hud.css): подвал «мои карты», банки, драка, вода, акулы, подсказка --- */
  --hand-fs: calc(var(--card-fs) * .8);   /* карты в подвале: чуть меньше крупной карты */
  /* припас в подвале: только картинка (название и эффект скрыты, текст — в #hand-info), квадрат.
     Размер подобран так, чтобы подвал (2 ряда + полоса описания) не был выше прежнего */
  --hand-card-w: calc(var(--hand-fs) * 7.5);
  --hand-card-h: calc(var(--hand-fs) * 7.5);
  --hand-row-gap: 4px;                    /* между двумя рядами стопок в зоне */
  /* полоса описания #hand-info — постоянная высота: строка названия (1rem × 1.2) + кратко
     (.85rem × 1.2) + 3 строки подробно (.76rem × 1.28) + отступы и рамка */
  --hand-info-h: 6rem;
  /* карты ролей в подвале: высота зоны ролей ≈ высоте зоны припасов (2 ряда) */
  --hand-role-fs: calc(var(--hand-fs) * .86);
  /* мини-кнопка на карте подвала (.card-act), круг; кнопки — рядом вдоль нижней кромки, внутри карты.
     Полоса — внутри обводки карты (3px): 4 × размер ≤ ширина карты − 6px (6.4 × fs ≤ 7.5 × fs − 6
     при fs ≥ 5.5px): --hand-fs 8 → 12.8px (ряд 51 из 54), 8.8 → 14px (56 из 60, 1280×800),
     10 → 16px (64 из 69), с 11.25 — 18px (72 из ≥ 78) */
  --card-act-size: clamp(12px, calc(var(--hand-fs) * 1.6), 18px);
  --c-card-act-main: #f7c234;             /* .card-act--main — применить (значок --c-ink ≈ 9:1) */
  --c-fatigue: #2b5f8a;                   /* жетон усталости «грёб» / «дрался» (синий, значок светлый) */
  --stack-shift: .45em;                   /* сдвиг подложенной карты стопки (em карты подвала) */
  --c-friend: #2f7a3d;           /* ярлык «друг»: текст --c-card ≈ 5:1 */
  --c-friend-bg: #dcefd2;        /* подложка карты друга */
  --c-enemy: #a8322a;            /* ярлык «враг»: текст --c-card ≈ 6.2:1 */
  --c-enemy-bg: #f6d4cc;
  --c-attack: #c0392b;           /* нападающий (+ скрещённые сабли, карта выше) */
  --c-attack-bg: #f8d9d3;
  --c-defend: #2b6a92;           /* защищающийся (+ щит, карта ниже) */
  --c-defend-bg: #d3e6f1;
  --c-target: #1d5670;           /* «можно выбрать целью» — пунктирное кольцо */
  --c-target-glow: rgba(255, 248, 230, .8);
  --c-hp-warn: #e0a526;          /* до потери сознания 1 рана (текст --c-ink ≈ 8:1) */
  --c-hp-low: #c0392b;           /* 0 — следующая рана валит (белый текст ≈ 5.4:1) + треснувшее сердце */
  --c-dead-card: #6f6357;        /* подложка карты погибшего */
  --c-blood-far: #b05a4e;        /* кровавая вода: у горизонта → вглубь */
  --c-blood: #8e2a24;
  --c-blood-deep: #4f1512;
  --c-ch-swap: #1d5670;          /* стрелка вызова: обмен местами (точки) */
  --c-ch-steal-open: #c0392b;    /* грабёж открытой (штрих) */
  --c-ch-steal-closed: #962d22;  /* грабёж закрытой (штрих-точка) */
  --c-ch-kid: #8a5d00;           /* кража Шкета (мелкий штрих) */
  --shark-fin-w: clamp(30px, 5.5vh, 56px);
  --water-scale: .72;            /* карта за бортом: доля обычной ширины */
  --water-drop: 50%;             /* и насколько ниже центра банки (в % высоты лодки) */

  /* --- карты навигации (navcard.css): всё внутри карты в em, 1em = ширина / 10, пропорция --card-ratio --- */
  --nav-card-w: clamp(96px, 15vh, 150px);        /* в оверлее выбора (гребец / рулевой) */
  --nav-card-table-w: clamp(64px, 9vh, 88px);    /* вскрытая карта у кормы (#nav-card) */
  --nav-card-flare-w: clamp(84px, 13vh, 128px);  /* три карты выстрела в небо */
  --nav-table-x: 10px;                           /* место #nav-card в .sea: слева, у кормы */
  --nav-table-y: calc(var(--sky-band-h) + 40px); /* под полосой неба, на высоте лодки */
  --c-nav-sky: #dceef4;          /* полоса чаек */
  --c-nav-sea: #9fd0e0;          /* зона «за борт» */
  --c-nav-thirst: #f6e0ad;       /* зона «жажда» */
  --c-nav-back: #1d5670;         /* рубашка (подложка под nav-back.svg) */
  --c-gull-minus: #c0392b;       /* «−» у минус-чайки (+ перечёркнутая птица) */
  --c-scrim: rgba(16, 26, 40, .62);  /* затемнение поля под оверлеем выбора */
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-width: 1024px;             /* только десктопный браузер; от ноутбука и шире */
  background: var(--c-paper) radial-gradient(circle at 20% 10%, #fbf1d9 0, transparent 60%);
  color: var(--c-ink);
  font: 16px/1.45 var(--font-body);
}

h1, h2, h3 { font-family: var(--font-title); margin: 0 0 .5em; line-height: 1.15; }
h1 { font-size: 2.4rem; letter-spacing: .02em; }
h2 { font-size: 1.4rem; }

a { color: var(--c-sea-deep); }

.hidden { display: none !important; }

/* --- элементы --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  border: var(--stroke); border-radius: var(--radius-sm);
  background: var(--c-red); color: #fff;
  font: 700 1rem var(--font-body);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-bounce), box-shadow var(--t-fast);
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--c-ink); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--c-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .input:focus-visible, .check input:focus-visible { outline: 3px dashed var(--c-sea); outline-offset: 2px; }
.btn-sea { background: var(--c-sea); }
.btn-plain { background: var(--c-card); color: var(--c-ink); }
.btn-small { padding: 5px 12px; font-size: .9rem; }

.input {
  width: 100%;
  padding: 10px 12px;
  border: var(--stroke); border-radius: var(--radius-sm);
  background: var(--c-card); color: var(--c-ink);
  font: 1rem var(--font-body);
}

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { width: 20px; height: 20px; accent-color: var(--c-red); }
.check-small { font-size: .9rem; gap: 6px; }
.check-small input { width: 16px; height: 16px; }

.panel {
  background: var(--c-card);
  border: var(--stroke); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.error { color: var(--c-red-dark); font-weight: 700; min-height: 1.4em; margin: 8px 0 0; }
.muted { color: var(--c-ink-soft); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 12px 20px;
  border-bottom: var(--stroke);
  background: var(--c-paper-dark);
}
.topbar .logo { font: 700 1.5rem var(--font-title); text-decoration: none; color: var(--c-ink); }
.topbar .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* --- экран входа --- */

.login {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 16px;
  background: linear-gradient(to bottom, transparent 62%, var(--c-sea-light) 62%, var(--c-sea) 100%);
}
.login .panel { width: min(420px, 100%); text-align: center; }
.login .subtitle { margin: -4px 0 20px; }
.login form { display: grid; gap: 12px; text-align: left; }
.login label { font-weight: 700; }

.boat-icon { width: 120px; height: auto; margin: 0 auto 8px; display: block; }

/* --- лобби --- */

.lobby {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--gap);
  padding: var(--gap);
  max-width: 1200px; margin: 0 auto;
}
.lobby-side { display: grid; gap: var(--gap); align-content: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; }
table.games { width: 100%; border-collapse: collapse; }
table.games th, table.games td { padding: 8px 10px; text-align: left; border-bottom: 2px dashed var(--c-paper-dark); }
table.games th { font-family: var(--font-title); border-bottom: var(--stroke); }
table.games td.num { font-variant-numeric: tabular-nums; }
.empty { padding: 24px 0; text-align: center; }

.my-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.my-games li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.badge {
  display: inline-block; padding: 1px 8px;
  border: 2px solid var(--c-ink); border-radius: 999px;
  font-size: .8rem; font-weight: 700; background: var(--c-paper);
}
.badge-playing { background: var(--c-sea-light); }
/* тестовая игра: пометка пунктиром, чтобы не путать со статусом */
.badge-test { border-style: dashed; border-color: var(--c-ink-soft); color: var(--c-ink-soft); background: var(--c-card); }

/* --- экран игры --- */

.game {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: var(--gap);
  padding: var(--gap);
  height: calc(100vh - 66px);
}

.sea {
  position: relative;
  border: var(--stroke); border-radius: var(--radius);
  box-shadow: var(--shadow);
  background:
    repeating-linear-gradient(170deg, transparent 0 38px, rgba(255, 255, 255, .18) 38px 41px),
    linear-gradient(to bottom, var(--c-sea-light), var(--c-sea) 45%, var(--c-sea-deep));
  /* раскладка поля: шапка свободных ролей / плашка / лодка / мои карты.
     вид шапки, лодки, банок, карт и панели — только в cards.css */
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden auto;
  min-height: 280px;
}
.sea-note {
  justify-self: center; margin: 8px 12px 0;
  background: var(--c-card); border: 2px solid var(--c-ink); border-radius: 999px;
  padding: 4px 14px; text-align: center; box-shadow: var(--shadow-sm);
  font-size: .9rem; max-width: calc(100% - 24px);
}
/* строки сетки поля заданы явно: пустая шапка ролей (все роли разобраны) скрыта,
   и без этого лодка уезжала бы в первую строку, а панель «мои карты» растягивалась в 1fr */
.sea > .role-strip { grid-row: 1; }
.sea > .sea-note { grid-row: 2; }
.sea > .sea__boat { grid-row: 3; }
.sea > .hand-panel { grid-row: 4; }
/* ячейка сетки под лодку (сама лодка — cards.css); снизу место под подписи владельцев */
.sea__boat { display: grid; align-content: center; min-width: 0; padding: 12px 12px 32px; }
/* обёртка карт в панели прозрачна для раскладки .hand-panel */
.hand-panel__cards { display: contents; }
/* шапка и панель — scroll-контейнеры (overflow-x в cards.css): без этого строка сетки сжимается и режет карты */
.sea > .role-strip, .sea > .hand-panel { min-height: min-content; }

.player-role { flex: none; font-size: .8rem; font-weight: 700; }
.player-role--none { font-weight: 400; font-style: italic; color: var(--c-ink-soft); }

/* сайдбар целиком влезает в высоту окна: список игроков и чат сжимаются, их содержимое прокручивается */
.game-side {
  display: grid; grid-template-rows: auto minmax(0, auto) minmax(200px, 1fr);
  gap: var(--gap); min-height: 0; overflow: hidden;
}
.game-side > .panel { min-height: 0; }
.game-side > .panel:nth-child(2) { overflow-y: auto; }
/* панель «Игра» во время партии растёт (запасная панель действий) — прокручивается сама, а не наезжает на «Игроков» */
.game-side > .panel:first-child { overflow-y: auto; }
.game-side > .panel:first-child:has(.play-panel:not([hidden])) { min-height: min(45vh, 420px); }
.spectator { margin: 8px 0 0; font-style: italic; }

.game-id { display: flex; gap: 8px; align-items: center; }
.game-id code { font-size: .8rem; word-break: break-all; }

.players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.players li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); }
.players li.me { background: var(--c-paper); }
.players .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.light {
  width: 14px; height: 14px; flex: none;
  border: 2px solid var(--c-ink); border-radius: 50%;
  background: var(--c-gone);
}
.light.online { background: var(--c-online); }
.light.afk { background: var(--c-afk); }
.light.gone { background: var(--c-gone); }

.bot-icon { width: 18px; flex: none; font-size: 1rem; line-height: 1; text-align: center; }
.bot-tag {
  padding: 0 6px; flex: none;
  border: 2px solid var(--c-ink-soft); border-radius: 999px;
  color: var(--c-ink-soft); font-size: .75rem; font-weight: 700;
}
.players .bot-remove { padding: 2px 8px; flex: none; }

.controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* запасная панель действий партии (js/playui.js): кнопки из view.legal, журнал, итог */
.play-panel { margin-top: 12px; padding-top: 10px; border-top: 2px dashed var(--c-ink-soft); }
.play-panel__prompt { margin: 0; font-weight: 700; }
.play-panel .controls { margin-top: 8px; gap: 6px; }
.play-panel .btn-small { text-align: left; }
.play-panel details { margin-top: 10px; }
.play-panel summary { cursor: pointer; font-weight: 700; color: var(--c-ink-soft); }
.play-panel summary:focus-visible { outline: 3px dashed var(--c-sea); outline-offset: 2px; }
.play-panel__result { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.play-panel__result li { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--c-paper); }
.play-log { margin: 6px 0 0; padding-left: 1.4em; max-height: 12em; overflow-y: auto; font-size: .85rem; color: var(--c-ink-soft); }

.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-log { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; min-height: 0; }
.chat-msg { max-width: 92%; padding: 6px 10px; border: 2px solid var(--c-ink); border-radius: 10px 10px 10px 2px; background: var(--c-paper); word-wrap: break-word; }
.chat-msg.mine { align-self: flex-end; border-radius: 10px 10px 2px 10px; background: var(--c-sea-light); }
.chat-msg .from { font-weight: 700; font-size: .85rem; }
.chat-msg .at { font-size: .75rem; color: var(--c-ink-soft); margin-left: 6px; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }

.conn { font-size: .85rem; }
.conn.bad { color: var(--c-red-dark); font-weight: 700; }


@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}