/* Короткие нарды VK Mini App. Светлая по умолчанию, тёмная — [data-scheme="dark"]. */
:root {
    --brand: #b5622a;
    --brand-2: #d1813f;
    --accent: #2f7d6b;
    --bg: #efe6da;
    --surface: #fffaf3;
    --text: #241a12;
    --text-dim: #7a6a58;
    --border: #e3d6c4;
    --radius: 16px;
    --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --shadow: 0 6px 24px rgba(60,36,12,.14);

    --board-bg: #7a4a28;         /* рама доски */
    --board-felt: #c9a66b;       /* поле */
    --pt-a: #e7cfa6;             /* светлый пункт */
    --pt-b: #a8703f;             /* тёмный пункт */
    --bar-bg: #603821;
    --chk-w: #f4ede0;
    --chk-w-edge: #cdbfa6;
    --chk-b: #2b2118;
    --chk-b-edge: #0f0b07;
    --sel: rgba(47,125,107,.9);
    --hint: rgba(47,125,107,.65);
    --can: rgba(181,98,42,.85);
}
[data-scheme="dark"] {
    --bg: #17110c; --surface: #221a12; --text: #f0e7db; --text-dim: #a8967f; --border: #352a1e;
    --board-bg: #4a2c18; --board-felt: #8a6c3f;
    --pt-a: #b9986a; --pt-b: #7a5230;
    --bar-bg: #3a2213;
    --chk-w: #ece2d0; --chk-w-edge: #b8a888;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button, .point, .board-bar, .off-zone { touch-action: manipulation; }
#board { touch-action: none; user-select: none; -webkit-user-select: none; }
html, body { height: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 15px; line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}
.booting #app { pointer-events: none; opacity: .72; }
.hidden { display: none !important; }
#app { min-height: 100%; display: flex; flex-direction: column; }
.screen {
    flex: 1; display: flex; flex-direction: column;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

/* --- Меню --- */
#screen-menu { align-items: center; justify-content: center; gap: 6px; }
.menu-logo-img { width: 88px; height: 88px; border-radius: 22px; box-shadow: var(--shadow); }
.menu-title { font-size: 28px; font-weight: 800; margin: 6px 0 2px; text-align: center; }
.menu-tagline { color: var(--text-dim); font-size: 14px; margin-bottom: 14px; text-align: center; }
.menu-actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.rules-link { margin-top: 18px; background: none; border: none; color: var(--text-dim); font-family: var(--font); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }

.btn {
    font-family: var(--font); font-size: 16px; font-weight: 700;
    border: none; border-radius: var(--radius); padding: 15px 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .06s ease, opacity .15s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.badge { font-size: 11px; font-weight: 700; background: var(--border); color: var(--text-dim); padding: 2px 8px; border-radius: 999px; }

.picker { margin-top: 18px; text-align: center; }
.picker-label { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.seg { display: inline-flex; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; }
.seg-btn { border: none; background: transparent; color: var(--text-dim); font-family: var(--font); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 9px; cursor: pointer; }
.seg-btn.active { background: var(--brand); color: #fff; }

/* --- Шапка игры --- */
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.game-header .status { min-width: 0; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.status { font-weight: 700; font-size: 15px; text-align: center; flex: 1; }

/* --- Доска --- */
.board-wrap { display: flex; justify-content: center; }
.board {
    /* Ширину ограничиваем И по горизонтали, И по доступной высоте (иначе на десктопном/
       ландшафтном фрейме доска высокая и нижние кнопки уезжают за экран — замечание модерации).
       ~215px резервируем под шапку + трей с кнопками. */
    width: min(94vw, 460px, calc((100dvh - 215px) * 0.86));
    aspect-ratio: 0.86;
    display: grid;
    grid-template-columns: 1fr 26px 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    background: var(--board-bg);
    border: 8px solid var(--board-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.board-half { display: flex; background: var(--board-felt); }
.board-top { align-items: flex-start; }
.board-bot { align-items: flex-end; }
.board-bar { background: var(--bar-bg); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; position: relative; }
#bar-top { justify-content: flex-start; }
#bar-bot { justify-content: flex-end; }
.board-bar.can { box-shadow: inset 0 0 0 3px var(--can); }
.board-bar.sel { box-shadow: inset 0 0 0 3px var(--sel); }

.point { flex: 1; height: 100%; position: relative; display: flex; cursor: pointer; min-width: 0; }
.point-top { flex-direction: column; align-items: center; }
.point-bot { flex-direction: column-reverse; align-items: center; }
.tri { position: absolute; left: 50%; transform: translateX(-50%); width: 86%; height: 46%; }
.point-top .tri { top: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.point-bot .tri { bottom: 0; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.point.pc-a .tri { background: var(--pt-a); }
.point.pc-b .tri { background: var(--pt-b); }
.point.can::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 60%; height: 6px; background: var(--can); border-radius: 3px; }
.point-top.can::after { top: 2px; } .point-bot.can::after { bottom: 2px; }
.point.sel .tri { filter: brightness(1.25); box-shadow: 0 0 0 3px var(--sel) inset; }
.point.hint::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--hint); z-index: 3; }

.stack { position: relative; z-index: 2; display: flex; flex-direction: inherit; align-items: center; width: 100%; }
.point-top .stack { flex-direction: column; }
.point-bot .stack { flex-direction: column-reverse; }
.checker {
    position: relative;
    width: 84%; max-width: 34px; aspect-ratio: 1; border-radius: 50%;
    margin: -1px 0; flex: none;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.35),
        inset 0 -3px 5px rgba(0,0,0,.35),
        0 2px 3px rgba(0,0,0,.32);
}
/* Концентрическое кольцо-грань (внутренний диск), как у настоящих шашек для нард. */
.checker::after {
    content: ''; position: absolute; inset: 25%; border-radius: 50%;
}
.checker.w {
    background: radial-gradient(circle at 38% 32%, #fffdf8 0%, var(--chk-w) 55%, var(--chk-w-edge) 100%);
    border: 1px solid var(--chk-w-edge);
}
.checker.w::after {
    border: 1.5px solid rgba(105,80,44,.42);
    box-shadow: inset 0 1px 2px rgba(120,96,60,.30), 0 1px 0 rgba(255,255,255,.6);
}
.checker.b {
    background: radial-gradient(circle at 38% 32%, #5b4f44 0%, var(--chk-b) 55%, var(--chk-b-edge) 100%);
    border: 1px solid #050403;
}
.checker.b::after {
    border: 1.5px solid rgba(214,198,170,.30);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.15);
}
.stack-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; font-weight: 800; color: var(--text); background: var(--surface); border-radius: 999px; padding: 1px 6px; z-index: 4; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.board-bar .checker { width: 20px; }
.bar-n { font-size: 11px; font-weight: 800; color: #fff; }

/* Летящая фишка (анимация хода). */
.checker.fly {
    position: fixed; z-index: 80; margin: 0; pointer-events: none;
    transition: transform .21s cubic-bezier(.22, 1, .36, 1);
    box-shadow: inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.35);
}
/* Подъём верхней фишки выбранного пункта. */
.point.sel .stack .checker:last-child { transform: translateY(-6px); box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.35), 0 5px 9px rgba(0,0,0,.4); }
.point-bot.sel .stack .checker:last-child { transform: translateY(6px); }
.checker { transition: transform .12s ease; }

/* --- Трей: вынос, кости, действия --- */
.tray { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tray-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.off-zone { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); cursor: default; }
.off-zone.can, .off-zone.hint { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,125,107,.3); cursor: pointer; }
.off-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.off-checker { width: 18px; height: 18px; border-radius: 50%; }
.off-checker.w { background: radial-gradient(circle at 35% 30%, #fff, var(--chk-w) 60%, var(--chk-w-edge)); }
.off-checker.b { background: radial-gradient(circle at 35% 30%, #4a4038, var(--chk-b) 60%, var(--chk-b-edge)); }
.off-n { font-size: 16px; font-weight: 800; }

.dice { display: flex; gap: 8px; justify-content: center; align-items: center; min-height: 44px; }
.die {
    width: 44px; height: 44px; background: #fbf7ef; border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25); position: relative;
    display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
    padding: 6px;
}
.die-used { opacity: .28; transition: opacity .2s ease; }
.die.roll { animation: dieRoll .42s cubic-bezier(.34,1.56,.64,1); }
.die.roll:nth-child(2) { animation-delay: .06s; }
@keyframes dieRoll {
    0% { transform: translateY(-10px) rotate(-40deg) scale(.6); opacity: 0; }
    60% { transform: translateY(0) rotate(8deg) scale(1.08); opacity: 1; }
    100% { transform: none; opacity: 1; }
}
.die .pip { width: 8px; height: 8px; border-radius: 50%; background: #241a12; align-self: center; justify-self: center; display: none; }
/* Раскладка точек по значению кости */
.die[data-v="1"] .p0 { display: block; grid-area: 2/2; }
.die[data-v="2"] .p1 { display: block; grid-area: 1/1; } .die[data-v="2"] .p2 { display: block; grid-area: 3/3; }
.die[data-v="3"] .p1 { display: block; grid-area: 1/1; } .die[data-v="3"] .p0 { display: block; grid-area: 2/2; } .die[data-v="3"] .p2 { display: block; grid-area: 3/3; }
.die[data-v="4"] .p1 { display: block; grid-area: 1/1; } .die[data-v="4"] .p2 { display: block; grid-area: 1/3; } .die[data-v="4"] .p3 { display: block; grid-area: 3/1; } .die[data-v="4"] .p4 { display: block; grid-area: 3/3; }
.die[data-v="5"] .p1 { display: block; grid-area: 1/1; } .die[data-v="5"] .p2 { display: block; grid-area: 1/3; } .die[data-v="5"] .p0 { display: block; grid-area: 2/2; } .die[data-v="5"] .p3 { display: block; grid-area: 3/1; } .die[data-v="5"] .p4 { display: block; grid-area: 3/3; }
.die[data-v="6"] .p1 { display: block; grid-area: 1/1; } .die[data-v="6"] .p2 { display: block; grid-area: 1/3; } .die[data-v="6"] .p3 { display: block; grid-area: 2/1; } .die[data-v="6"] .p4 { display: block; grid-area: 2/3; } .die[data-v="6"] .p5 { display: block; grid-area: 3/1; } .die[data-v="6"] .p6 { display: block; grid-area: 3/3; }

.tray-actions { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pip-box { font-size: 13px; color: var(--text-dim); font-weight: 700; display: inline-flex; align-items: baseline; gap: 5px; }
.pip-label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.pip-box #pip-me { color: var(--text); font-size: 15px; font-weight: 800; }
.pip-sep { color: var(--text-dim); opacity: .6; }
.btn-mini { font-family: var(--font); font-weight: 700; font-size: 15px; border: none; border-radius: 12px; padding: 12px 22px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(181,98,42,.32); }
.btn-mini:active { transform: scale(.97); }
.btn-mini-ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
/* Кнопка броска мягко «дышит», привлекая внимание, когда ход за игроком. */
#btn-roll:not(.hidden) { animation: rollPulse 1.8s ease-in-out infinite; }
@keyframes rollPulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(181,98,42,.32); }
    50% { box-shadow: 0 3px 18px rgba(181,98,42,.55); }
}

/* --- Оверлеи --- */
.overlay { position: fixed; inset: 0; background: rgba(30,18,8,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.overlay-card { background: var(--surface); border-radius: 22px; padding: 28px 24px; width: 100%; max-width: 330px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.overlay-emoji { font-size: 56px; }
.overlay-title { font-size: 24px; font-weight: 800; }
.overlay-text { color: var(--text-dim); font-size: 14px; margin-top: -6px; margin-bottom: 4px; min-height: 18px; }
.rules-card { text-align: left; max-width: 380px; }
.rules-card .overlay-title { text-align: center; }
.rules-list { margin: 4px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--text-dim); font-size: 14px; line-height: 1.4; }

.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; z-index: 60; box-shadow: 0 4px 16px rgba(0,0,0,.2); }

/* --- Экран комнаты (игра с другом) --- */
.icon-btn-spacer { width: 40px; height: 40px; flex: none; }
.room-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0 8px; }
.room-emoji { font-size: 56px; }
.room-hint { color: var(--text-dim); font-size: 14px; max-width: 300px; }
.room-code { font-size: 40px; font-weight: 800; letter-spacing: .14em; color: var(--brand); background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; padding: 10px 24px; box-shadow: var(--shadow); }
.room-status { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.room-actions { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* --- Реакции (эмодзи) --- */
.react-row { display: flex; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.react-btn { font-size: 22px; line-height: 1; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; width: 46px; height: 44px; cursor: pointer; transition: transform .06s ease; }
.react-btn:active { transform: scale(.9); }
.react-float { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); font-size: 64px; z-index: 55; pointer-events: none; }
.react-float.pop { animation: reactPop 1.6s ease forwards; }
.react-float.opp { left: 30%; }
.react-float.mine { left: 70%; }
@keyframes reactPop {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(.5); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    75% { opacity: 1; transform: translate(-50%, -40px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -80px) scale(.9); }
}

/* ================= Матчмейкинг / рейтинг / турниры ================= */
.menu-row { display: flex; gap: 10px; }
.btn-half { flex: 1; padding: 12px 10px; font-size: 15px; }
.muted { color: var(--text-dim); font-size: 14px; padding: 14px 4px; }
.muted.center { text-align: center; }

/* Таблица лидеров */
#screen-leaders { gap: 0; }
.me-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.me-card:empty { display: none; }
.me-rank { font-size: 22px; font-weight: 800; min-width: 44px; }
.me-name { font-weight: 800; font-size: 16px; }
.me-meta { font-size: 13px; opacity: .92; }
.leaders-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.leader-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 12px; }
.leader-row.me { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(181,98,42,.25); }
.leader-rank { min-width: 26px; text-align: center; font-weight: 800; color: var(--text-dim); font-size: 15px; }
.leader-rank.r1 { color: #e0a91b; } .leader-rank.r2 { color: #9aa3ab; } .leader-rank.r3 { color: #c17a3f; }
.leader-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--border); }
.leader-ava.ph { background: var(--border); }
.leader-body { flex: 1; min-width: 0; }
.leader-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-meta { color: var(--text-dim); font-size: 12px; }
.leader-rating { font-weight: 800; font-size: 17px; color: var(--brand); }

/* Турниры */
#screen-tourneys { gap: 0; }
.tourney-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tourney-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; font-family: var(--font); color: var(--text); }
.tourney-row:active { transform: scale(.99); }
.tourney-info { flex: 1; min-width: 0; }
.tourney-name { font-weight: 800; font-size: 16px; }
.tourney-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.tourney-row .go { color: var(--brand); font-weight: 800; font-size: 20px; }
.tourney-create { margin-top: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.tourney-head { text-align: center; margin-bottom: 14px; }
.tourney-status-big { font-size: 18px; font-weight: 800; }
.tourney-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* Сетка */
.bracket { overflow-x: auto; }
.bracket-players { display: flex; flex-direction: column; gap: 6px; }
.bp { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 12px; font-weight: 600; display: flex; justify-content: space-between; }
.bracket-rounds { display: flex; gap: 12px; min-width: min-content; }
.bracket-round { display: flex; flex-direction: column; gap: 10px; justify-content: space-around; min-width: 140px; }
.round-title { font-size: 12px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.bmatch { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.bmatch.mine { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(181,98,42,.25); }
.bteam { padding: 8px 10px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); }
.bteam:last-child { border-bottom: none; }
.bteam.win { color: var(--brand); font-weight: 800; background: rgba(181,98,42,.08); }

/* Низкий web/VK-фрейм: доска и управление стоят рядом, поэтому все кнопки
   остаются видимыми даже при высоте 320–500 px. */
@media (orientation: landscape) and (max-height: 600px) {
    #screen-menu { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 58px auto 1fr 1fr auto; column-gap: 12px; row-gap: 5px; justify-content: initial; overflow-y: auto; touch-action: pan-y; }
    #screen-menu .menu-logo-img { grid-column: 1; grid-row: 1; width: 54px; height: 54px; border-radius: 14px; justify-self: center; }
    #screen-menu .menu-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 21px; }
    #screen-menu .menu-tagline { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 11px; }
    #screen-menu .menu-actions { grid-column: 1; grid-row: 3 / 6; align-self: start; gap: 6px; }
    #screen-menu .btn { padding: 9px 7px; min-height: 38px; font-size: 12px; }
    #screen-menu .menu-row { gap: 5px; }
    #screen-menu .menu-actions + .picker { grid-column: 2; grid-row: 3; }
    #screen-menu .picker + .picker { grid-column: 2; grid-row: 4; }
    #screen-menu .picker { margin: 0; align-self: center; }
    #screen-menu .picker-label { margin-bottom: 4px; font-size: 11px; }
    #screen-menu .seg { width: 100%; gap: 2px; padding: 3px; }
    #screen-menu .seg-btn { flex: 1; min-width: 0; padding: 6px 2px; font-size: 11px; }
    #screen-menu .rules-link { grid-column: 2; grid-row: 5; margin: 0; align-self: center; font-size: 12px; }
    #screen-game { height: 100dvh; min-height: 0; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, .58fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
    #screen-game .game-header { grid-column: 1 / -1; margin-bottom: 4px; }
    #screen-game .board-wrap { grid-column: 1; grid-row: 2; min-height: 0; align-items: center; }
    #screen-game .board { width: min(62vw, calc((100dvh - 62px) * .86), 460px); }
    #screen-game .tray { grid-column: 2; grid-row: 2; margin: 0; justify-content: center; min-width: 0; }
    #screen-game .tray-top { gap: 4px; flex-wrap: wrap; justify-content: center; }
    #screen-game .off-zone { min-width: 52px; padding: 3px 5px; }
    #screen-game .die { width: 34px; height: 34px; padding: 4px; }
    #screen-game .die .pip { width: 6px; height: 6px; }
    #screen-game .tray-actions { flex-wrap: wrap; gap: 6px; }
    #screen-game .btn-mini { width: 100%; padding: 8px 7px; font-size: 12px; }
    #screen-game .react-row { position: fixed; right: max(5px, env(safe-area-inset-right)); bottom: max(5px, env(safe-area-inset-bottom)); width: 144px; margin: 0; gap: 3px; }
    #screen-game .react-btn { width: 40px; height: 34px; font-size: 18px; }
}

@media (max-height: 560px) and (orientation: portrait) {
    .board { width: min(86vw, calc((100dvh - 210px) * .86)); }
    .tray { margin-top: 6px; gap: 5px; }
    .tray-actions { gap: 5px; flex-wrap: wrap; }
    .btn-mini { padding: 9px 13px; font-size: 13px; }
}

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

/* ===== «Ореховый клуб»: токены определены в ART_DIRECTION.md до компонентов ===== */
:root {
    --canvas: #e9dfd0; --surface: #f6eddf; --walnut-900: #3b2115;
    --walnut-700: #4b2918; --walnut-500: #7b4829; --walnut-300: #a56c3e;
    --felt-700: #143b30; --felt-500: #1f5a46; --brass: #b89555;
    --ivory: #f5ebd8; --ink: #211a15; --muted: #71665b; --danger: #b85145;
    --legal: #84c6a7; --focus: #e2bd6d; --tap-min: 44px;
    --shadow-board: 0 18px 42px rgba(43,24,15,.28); --shadow-panel: 0 8px 24px rgba(43,24,15,.13);
    --bg: var(--canvas); --brand: var(--walnut-500); --brand-2: var(--walnut-300);
    --accent: var(--felt-500); --text: var(--ink); --text-dim: var(--muted);
    --border: #d8c8b3; --board-bg: var(--walnut-700); --board-felt: var(--felt-500);
    --pt-a: #d5b97d; --pt-b: #8b4b35; --bar-bg: var(--walnut-900);
    --sel: rgba(226,189,109,.95); --hint: rgba(132,198,167,.78); --can: rgba(226,189,109,.88);
}
[data-scheme="dark"] {
    --bg: #171512; --surface: #25211c; --text: #f5ebd8; --text-dim: #b9ab99; --border: #4a4035;
    --board-bg: #3b2115; --board-felt: #143b30; --pt-a: #b89555; --pt-b: #784235;
}
body { background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.5), transparent 35%), var(--bg); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { min-height: var(--tap-min); }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.menu-title, .overlay-title { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.btn-primary { background: linear-gradient(145deg, var(--walnut-500), var(--walnut-700)); box-shadow: 0 5px 14px rgba(59,33,21,.2); }
.seg-btn.active { background: var(--felt-500); }
.daily-card {
    width: 100%; max-width: 440px; display: flex; align-items: center; gap: 12px; text-align: left;
    color: var(--ivory); background: linear-gradient(135deg, var(--felt-500), var(--felt-700));
    border: 1px solid rgba(184,149,85,.65); border-radius: 16px; padding: 11px 14px;
    box-shadow: var(--shadow-panel); cursor: pointer;
}
.daily-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.daily-copy b { font-size: 14px; }
.daily-copy span { color: rgba(245,235,216,.78); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-streak { display: inline-flex; align-items: center; gap: 4px; color: var(--focus); }
.tutorial-entry { margin: 2px 0 -8px; }
.game-header { background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-panel); }
.icon-btn { min-width: 44px; width: 44px; height: 44px; color: var(--walnut-700); }
.status-block { display: flex; flex-direction: column; flex: 1; min-width: 0; text-align: left; padding: 0 6px; }
.status-kicker { color: var(--text-dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.status-block .status { text-align: left; font-size: 17px; }
.board { border-width: 10px; border-color: var(--walnut-700); background: var(--walnut-700); box-shadow: inset 0 0 0 2px rgba(184,149,85,.5), var(--shadow-board); }
.board-half { background: radial-gradient(circle at 50% 40%, #286b55 0, var(--board-felt) 70%, var(--felt-700) 100%); }
.board-bar { box-shadow: inset 1px 0 rgba(255,255,255,.09), inset -1px 0 rgba(0,0,0,.3); }
.checker { box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -4px 6px rgba(0,0,0,.32), 0 3px 4px rgba(16,10,6,.38); }
.tray { background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid var(--border); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-panel); }
.btn-mini { min-height: 44px; background: linear-gradient(145deg, var(--felt-500), var(--felt-700)); box-shadow: 0 4px 12px rgba(20,59,48,.25); }
.tutorial-coach { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--walnut-900); color: var(--ivory); box-shadow: var(--shadow-panel); }
.tutorial-coach span { flex: 1; font-size: 13px; }
.coach-close { color: var(--focus); background: none; border: none; font: 700 13px var(--font); cursor: pointer; }
.room-icon { width: 64px; height: 64px; color: var(--brass); }
.result-mark { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; color: var(--walnut-700); background: #ead7aa; border: 1px solid var(--brass); }
.result-mark .ui-icon { width: 34px; height: 34px; }
.result-mark.loss { color: var(--danger); background: #f0d8d2; border-color: #d6988e; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.result-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 5px; }
.result-stat b, .result-stat span { display: block; }
.result-stat b { font-size: 17px; }
.result-stat span { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.next-goal { text-align: left; background: rgba(31,90,70,.09); border-left: 3px solid var(--felt-500); padding: 8px 10px; border-radius: 5px 10px 10px 5px; }
.next-goal span, .next-goal b { display: block; }
.next-goal span { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.next-goal b { font-size: 13px; }
.overlay-card { max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))); overflow-y: auto; overscroll-behavior: contain; }

/* Доска доминирует, игровой статус и управление используют вторую колонку. */
@media (min-width: 900px), (orientation: landscape) and (max-height: 600px) {
    #screen-game { height: 100dvh; min-height: 0; display: grid; grid-template-columns: minmax(300px, 520px) minmax(280px, 390px); grid-template-rows: auto auto 1fr; gap: 12px 20px; justify-content: center; align-content: center; overflow: hidden; }
    #screen-game .board-wrap { grid-column: 1; grid-row: 1 / 4; min-height: 0; align-items: center; }
    #screen-game .board { width: min(43vw, 520px, calc((100dvh - 28px) * .86)); }
    #screen-game .game-header { grid-column: 2; grid-row: 1; margin: 0; }
    #screen-game .tray { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
    #screen-game .tutorial-coach { grid-column: 2; grid-row: 3; align-self: start; }
    #screen-game .react-row { grid-column: 2; grid-row: 3; align-self: start; position: static; width: auto; }
    #screen-menu { display: grid; grid-template-columns: minmax(270px,400px) minmax(300px,440px); grid-template-rows: repeat(6,auto); column-gap: 42px; row-gap: 8px; align-content: center; justify-content: center; overflow-y: auto; }
    #screen-menu .menu-logo-img { grid-column: 1; grid-row: 1; justify-self: center; }
    #screen-menu .menu-title { grid-column: 1; grid-row: 2; justify-self: center; }
    #screen-menu .menu-tagline { grid-column: 1; grid-row: 3; justify-self: center; }
    #screen-menu .daily-card { grid-column: 1; grid-row: 4; justify-self: center; }
    #screen-menu .menu-actions { grid-column: 2; grid-row: 1 / span 3; }
    #screen-menu .tutorial-entry { grid-column: 2; grid-row: 4; }
    #screen-menu .tutorial-entry + .picker { grid-column: 2; grid-row: 5; margin-top: 4px; }
    #screen-menu .picker + .picker { grid-column: 2; grid-row: 6; margin-top: 4px; }
    #screen-menu .rules-link { grid-column: 1; grid-row: 5; margin-top: 4px; }
}
@media (max-width: 899px) and (orientation: portrait) {
    #screen-menu { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
    .menu-logo-img { width: 68px; height: 68px; }
    .menu-title { font-size: 25px; margin-top: 2px; }
    .menu-tagline { margin-bottom: 8px; }
    .daily-card { margin: 2px 0 6px; }
    .menu-actions { gap: 8px; }
    .btn { min-height: 44px; padding: 11px 14px; }
    .picker { margin-top: 10px; }
    .rules-link { margin-top: 8px; min-height: 44px; }
}
@media (max-height: 680px) and (orientation: portrait) {
    .screen { padding-top: max(7px, env(safe-area-inset-top)); padding-bottom: max(7px, env(safe-area-inset-bottom)); }
    #screen-game .game-header { margin-bottom: 6px; }
    #screen-game .board { width: min(84vw, calc((100dvh - 204px) * .86)); }
    #screen-game .tray { margin-top: 5px; padding: 7px; gap: 5px; }
    #screen-game .off-zone { padding: 3px 5px; }
    #screen-game .btn-mini { padding: 7px 10px; }
}