/* ============================================================
   Backgammon — single-player UI
   Modern wooden board, animated checkers, 3D-ish dice
   Pure CSS — no new dependencies
   ============================================================ */

:root {
    --wood-dark: #3b2416;
    --wood-mid: #6b4226;
    --wood-light: #8b5a2b;
    --wood-frame: #2a1810;
    --felt: #1a3a2a;
    --point-dark: #5c2e1a;
    --point-light: #c4a574;
    --point-dark-tip: #3d1c0f;
    --point-light-tip: #e8d4a8;
    --black-checker: #1a1a1e;
    --black-rim: #0a0a0c;
    --black-highlight: #3a3a42;
    --red-checker: #c0392b;
    --red-rim: #7b1e14;
    --red-highlight: #e74c3c;
    --gold: #f0c14b;
    --emerald: #2ecc71;
    --surface: #12141a;
    --panel: #1c1f28;
    --panel-border: #2a2f3a;
    --text: #e8e6e3;
    --text-muted: #9a9590;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --radius: 16px;
    --checker-size: 40px;
    --point-w: 66px;
    --point-h: 120px;
    --board-pad: 6px;
    /* Vertical step between stacked checkers (fits ~5 in a point) */
    --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------- Page shell (index.html body extras live inline too) ---------- */

html {
    -webkit-text-size-adjust: 100%;
}

body.bg-app {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Ubuntu, sans-serif;
    color: var(--text);
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, #2a3344 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 100%, #1a2a22 0%, transparent 45%),
        var(--surface);
    /* Disable double-tap zoom; prefer tap targets over hover */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Never allow horizontal rubber-band / scroll on phones */
    overflow-x: hidden;
    max-width: 100vw;
}

/* Telegram theme chrome (when themeParams applied) */
body.tg-webapp {
    background-color: var(--tg-bg, var(--surface));
    color: var(--tg-text, var(--text));
}

/* ---------- Game layout ---------- */

DIV.game-container {
    font-family: inherit;
    max-width: 720px;
    margin: 0 auto;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
}

DIV.game-container::after {
    content: none;
}

/* Match header: You vs Computer */
DIV.match-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #252a36 0%, var(--panel) 100%);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

DIV.player-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

DIV.player-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

SPAN.player-label {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

SPAN.player-color-name {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

SPAN.player-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.12);
}

SPAN.player-swatch.black {
    background: radial-gradient(circle at 35% 30%, var(--black-highlight), var(--black-checker) 55%, var(--black-rim));
}

SPAN.player-swatch.red {
    background: radial-gradient(circle at 35% 30%, var(--red-highlight), var(--red-checker) 55%, var(--red-rim));
}

DIV.match-vs {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
    opacity: 0.9;
}

DIV.board-wrap {
    flex: 0 1 auto;
    max-width: 100%;
    /* Board uses absolute columns sized by --point-w; never reflow into
       multiple rows. Prefer fitting the viewport (fluid --point-w on
       narrow screens) over sideways scroll. */
    overflow-x: hidden;
    overflow-y: visible;
    width: max-content;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

P.play-hint {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 4px 8px 8px;
}

/* ---------- Board ----------
 *
 * ONE positioning model for both rows (no float, no flex-wrap):
 *   .board { position: relative; content-box width/height for the felt }
 *   every .checker-container is position:absolute with explicit left
 *   TOP row:  top: var(--board-pad)
 *   BOTTOM:   bottom: var(--board-pad) + rotate(180°) so stacks grow
 *             from the outer edge and triangles tip toward the center
 *             (same idea as quasoft/backgammonjs bottom-pip).
 *
 * Column order = BoardUI.ts append order (left → right), 14 slots:
 *   TOP: 13,14,15,16,17,18 | red bar | 19,20,21,22,23,24 | black home
 *   BOT: 12,11,10, 9, 8, 7 | black bar |  6, 5, 4, 3, 2, 1 | red home
 * ----------------------------------------------------------- */

DIV.board {
    /* content-box so width/height describe the felt only; border sits outside.
       Avoids the old border-box bug where 2×point-h + pad was smaller than
       two absolute rows and points overlapped / clipped. */
    box-sizing: content-box;
    width: calc(var(--point-w) * 14);
    height: calc(var(--point-h) * 2);
    /* min tracks --point-w so fluid mobile vars can shrink the board cleanly */
    min-width: calc(var(--point-w) * 14);
    max-width: 100%;
    padding: var(--board-pad);
    border: 10px solid var(--wood-frame);
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 40%, var(--wood-dark) 100%);
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(255, 220, 160, 0.12),
        inset 0 0 40px rgba(0, 0, 0, 0.35);
    background-clip: padding-box;
}

DIV.board::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(26, 58, 42, 0.92), rgba(14, 36, 28, 0.96));
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 0;
}

/* Do NOT force position:relative on all children — that fought absolute
   columns and overlay layers. z-index only; each child sets its own position. */
DIV.board > * {
    z-index: 1;
}

/* ---------- Points / checker containers ---------- */

DIV.checker-container {
    /* Absolute column slots — never float, never flex-wrap */
    position: absolute;
    float: none;
    display: block;
    width: var(--point-w);
    height: var(--point-h);
    margin: 0;
    padding: 0;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    border-radius: 4px 4px 0 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: visible;
    z-index: 2;
}

/* TOP row — pin to board top edge; stacks grow downward via data-stack tops */
DIV.checker-container-top {
    top: var(--board-pad);
    bottom: auto;
}

/* BOTTOM row — pin to board bottom; rotate so triangles tip up / stacks grow
   from the outer edge (quasoft bottom-pip model). Keep rotate: labels/badges
   already counter-rotate. */
DIV.checker-container-bottom {
    top: auto;
    bottom: var(--board-pad);
    transform: rotate(180deg);
    border-radius: 0 0 4px 4px;
}

/*
 * Shared 14-column left map (col 0..13).
 * Matches BoardUI append order for BOTH rows.
 */
DIV.checker-container-top[data-point="13"],
DIV.checker-container-bottom[data-point="12"] { left: calc(var(--board-pad) + var(--point-w) * 0); }

DIV.checker-container-top[data-point="14"],
DIV.checker-container-bottom[data-point="11"] { left: calc(var(--board-pad) + var(--point-w) * 1); }

DIV.checker-container-top[data-point="15"],
DIV.checker-container-bottom[data-point="10"] { left: calc(var(--board-pad) + var(--point-w) * 2); }

DIV.checker-container-top[data-point="16"],
DIV.checker-container-bottom[data-point="9"]  { left: calc(var(--board-pad) + var(--point-w) * 3); }

DIV.checker-container-top[data-point="17"],
DIV.checker-container-bottom[data-point="8"]  { left: calc(var(--board-pad) + var(--point-w) * 4); }

DIV.checker-container-top[data-point="18"],
DIV.checker-container-bottom[data-point="7"]  { left: calc(var(--board-pad) + var(--point-w) * 5); }

DIV.checker-container-top.bar,
DIV.checker-container-bottom.bar              { left: calc(var(--board-pad) + var(--point-w) * 6); }

DIV.checker-container-top[data-point="19"],
DIV.checker-container-bottom[data-point="6"]  { left: calc(var(--board-pad) + var(--point-w) * 7); }

DIV.checker-container-top[data-point="20"],
DIV.checker-container-bottom[data-point="5"]  { left: calc(var(--board-pad) + var(--point-w) * 8); }

DIV.checker-container-top[data-point="21"],
DIV.checker-container-bottom[data-point="4"]  { left: calc(var(--board-pad) + var(--point-w) * 9); }

DIV.checker-container-top[data-point="22"],
DIV.checker-container-bottom[data-point="3"]  { left: calc(var(--board-pad) + var(--point-w) * 10); }

DIV.checker-container-top[data-point="23"],
DIV.checker-container-bottom[data-point="2"]  { left: calc(var(--board-pad) + var(--point-w) * 11); }

DIV.checker-container-top[data-point="24"],
DIV.checker-container-bottom[data-point="1"]  { left: calc(var(--board-pad) + var(--point-w) * 12); }

DIV.checker-container-top.home,
DIV.checker-container-bottom.home             { left: calc(var(--board-pad) + var(--point-w) * 13); }

/* Triangular point as ::before so checkers are not clipped */
DIV.point-red,
DIV.point-black {
    --base: var(--point-dark);
    --tip: var(--point-dark-tip);
    background: transparent;
}

DIV.point-red {
    --base: var(--point-light);
    --tip: var(--point-light-tip);
}

DIV.point-black {
    --base: var(--point-dark);
    --tip: var(--point-dark-tip);
}

DIV.point-red::before,
DIV.point-black::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--base) 0%, var(--tip) 100%);
    /* Top row: triangle points DOWN toward center */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    opacity: 0.92;
}

DIV.checker-container-bottom.point-red::before,
DIV.checker-container-bottom.point-black::before {
    /* container is rotated 180°, so same clip-path yields tip toward center */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(to bottom, var(--base) 0%, var(--tip) 100%);
}

DIV.checker-container-bottom.point-red,
DIV.checker-container-bottom.point-black {
    border-radius: 0 0 4px 4px;
    padding: 0 3px 3px;
}

DIV.point-red > *,
DIV.point-black > * {
    position: relative;
    z-index: 1;
}

DIV.checker-container.valid-source {
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(46, 204, 113, 0.55), 0 0 12px rgba(46, 204, 113, 0.25);
    filter: brightness(1.12);
    /* Instant tap affordance — no delay from hover media queries */
    transition: box-shadow 0.08s ease, filter 0.08s ease, outline 0.08s ease;
}

DIV.checker-container.valid-source:hover,
DIV.checker-container.valid-source:focus-visible {
    box-shadow: inset 0 0 0 2px var(--emerald), 0 0 18px rgba(46, 204, 113, 0.45);
    filter: brightness(1.2);
}

DIV.checker-container.valid-source:active,
DIV.checker-container.valid-source.selected {
    /* Highlights only — no transform/scale so layout and bottom-row
       rotate(180deg) never shift column geometry. */
    box-shadow:
        inset 0 0 0 3px #27ae60,
        0 0 0 2px rgba(39, 174, 96, 0.45),
        0 0 22px rgba(39, 174, 96, 0.55);
    filter: brightness(1.25);
    outline: 2px solid rgba(46, 204, 113, 0.7);
    outline-offset: -2px;
}

/* Bottom row keeps rotate(180deg) only — no scale */
DIV.checker-container-bottom.valid-source:active,
DIV.checker-container-bottom.valid-source.selected {
    transform: rotate(180deg);
}

/* Green destinations — unmistakable tap targets for two-tap moves (no hover required) */
DIV.checker-container.valid-destination {
    cursor: pointer;
    box-shadow:
        inset 0 0 0 3px rgba(46, 204, 113, 0.98),
        0 0 0 3px rgba(39, 174, 96, 0.72),
        0 0 32px rgba(46, 204, 113, 0.72);
    filter: brightness(1.28) saturate(1.35);
    animation: dest-pulse 1.05s ease-in-out infinite;
    background-color: rgba(46, 204, 113, 0.28) !important;
    z-index: 2;
}

/* Home tray as bear-off target — large green target when legal */
DIV.home.valid-destination {
    box-shadow:
        inset 0 0 0 3px rgba(46, 204, 113, 1),
        0 0 0 3px rgba(39, 174, 96, 0.8),
        0 0 36px rgba(46, 204, 113, 0.75) !important;
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.35), rgba(39, 174, 96, 0.18)) !important;
    animation: dest-pulse 1.05s ease-in-out infinite;
    z-index: 3;
}

/* Explicit OFF label so bear-off is obvious without hover.
   Must beat DIV.home.checker-container-top::after (⌂ tray icon). */
DIV.home.checker-container-top.valid-destination::after,
DIV.home.checker-container-bottom.valid-destination::after,
DIV.home.valid-destination::after {
    content: "OFF";
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    font-size: clamp(0.65rem, calc(var(--point-w) * 0.28), 0.9rem);
    font-weight: 900;
    letter-spacing: 0.16em;
    color: #e8ffe8;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 12px rgba(46, 204, 113, 0.7);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(46, 204, 113, 0.75);
    border-radius: 6px;
    padding: 4px 8px;
}

DIV.home.checker-container-bottom.valid-destination::after {
    /* Bottom tray is rotate(180deg) — keep OFF upright relative to the player */
    transform: translate(-50%, -50%) rotate(180deg);
}

DIV.checker-container.valid-destination::before {
    box-shadow: inset 0 0 18px rgba(46, 204, 113, 0.35);
}

DIV.checker-container.valid-destination:hover,
DIV.checker-container.valid-destination:active,
DIV.checker-container.valid-destination:focus-visible {
    box-shadow:
        inset 0 0 0 3px #2ecc71,
        0 0 0 3px rgba(39, 174, 96, 0.7),
        0 0 28px rgba(46, 204, 113, 0.7);
    filter: brightness(1.3) saturate(1.35);
}

@keyframes dest-pulse {
    0%, 100% {
        filter: brightness(1.15) saturate(1.2);
        box-shadow:
            inset 0 0 0 3px rgba(46, 204, 113, 0.9),
            0 0 0 2px rgba(39, 174, 96, 0.5),
            0 0 16px rgba(46, 204, 113, 0.45);
    }
    50% {
        filter: brightness(1.32) saturate(1.35);
        box-shadow:
            inset 0 0 0 3px #27ae60,
            0 0 0 3px rgba(39, 174, 96, 0.65),
            0 0 28px rgba(46, 204, 113, 0.7);
    }
}

/* Bar */
DIV.bar {
    background:
        linear-gradient(90deg, #2a1810 0%, #5a3820 40%, #4a2e18 60%, #2a1810 100%);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    clip-path: none !important;
    background-image: none !important;
}

/* Home trays */
DIV.home {
    border: none;
    padding-left: 2px;
    padding-right: 2px;
    clip-path: none !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)) !important;
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}

DIV.home.checker-container-top {
    border-left: 4px solid var(--wood-frame);
}

DIV.home.checker-container-bottom {
    border-right: 4px solid var(--wood-frame);
}

/* clear breaks were for the old float layout — hide them */
BR.clear {
    display: none;
}

/* ---------- Checkers ---------- */

/*
 * Horizontally center each checker in its point (left 50% + negative half margin).
 * Vertically STACK via data-stack top offsets — do NOT place all at top:50%
 * (that made every checker overlap at one coordinate).
 * Do NOT use transform for centering — checker-land / hover use transform.
 * Inspired by quasoft/backgammonjs compactElement (vertical margin stack).
 */
DIV.checker {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-top: 0;
    margin-left: calc(var(--checker-size) / -2);
    width: var(--checker-size);
    height: var(--checker-size);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: var(--checker-size);
    text-align: center;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.45),
        inset 0 2px 3px rgba(255, 255, 255, 0.22),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.32s cubic-bezier(0.22, 0.9, 0.26, 1),
        opacity 0.22s ease,
        box-shadow 0.2s ease;
    will-change: transform, opacity;
    /* GPU compositing for buttery-smooth flight/settle on mobile */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 1;
}

/* Vertical stack: each additional checker steps down the point */
DIV.checker.checker-stack[data-stack="1"] {
    top: 2px;
    z-index: 1;
}
DIV.checker.checker-stack[data-stack="2"] {
    top: calc(2px + var(--stack-step) * 1);
    z-index: 2;
}
DIV.checker.checker-stack[data-stack="3"] {
    top: calc(2px + var(--stack-step) * 2);
    z-index: 3;
}
DIV.checker.checker-stack[data-stack="4"] {
    top: calc(2px + var(--stack-step) * 3);
    z-index: 4;
}
DIV.checker.checker-stack[data-stack="5"] {
    top: calc(2px + var(--stack-step) * 4);
    z-index: 5;
}

/* Keep total badge text upright on rotated bottom row */
DIV.checker-container-bottom DIV.checker.checker-total {
    transform: rotate(180deg);
}

DIV.checker.red {
    background:
        radial-gradient(circle at 32% 28%, #f07167 0%, var(--red-checker) 42%, var(--red-rim) 100%);
    color: #1a0a08;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

DIV.checker.black {
    background:
        radial-gradient(circle at 32% 28%, #5a5a66 0%, var(--black-checker) 45%, var(--black-rim) 100%);
    color: #e8a090;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Enter animation when checkers are redrawn after a move.
 * Ends at transform:none so fill-mode:both does not leave a residual
 * transform that could fight hover/selection transforms. Centering is
 * via top/left/margin only, so the land animation never shifts the
 * resting center. */
DIV.checker.checker-enter {
    animation: checker-land 0.32s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@keyframes checker-land {
    0% {
        opacity: 0;
        transform: scale(0.35) translateY(-8px);
    }
    60% {
        opacity: 1;
        transform: scale(1.08) translateY(0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Bottom side is rotated — reverse float stacking already handled by transform */

/* ---------- Side panel: dice + log ---------- */

DIV.side-container {
    background: linear-gradient(180deg, #252a36 0%, var(--panel) 100%);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 12px;
    min-width: 132px;
    max-width: 180px;
    flex: 1 1 132px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

DIV.dice-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

DIV.dice-block-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- Dice (3D-ish) ---------- */

DIV.dice-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 48px;
    align-items: center;
    justify-content: flex-start;
    padding: 6px;
    border-radius: 10px;
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

DIV.dice-container.active {
    background: rgba(240, 193, 75, 0.08);
    box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.35), 0 0 20px rgba(240, 193, 75, 0.15);
}

DIV.dice-container DIV.die {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    position: relative;
    padding: 0;
    margin: 0;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    transform-style: preserve-3d;
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.25),
        0 8px 16px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

DIV.dice-container.dice-container-black DIV.die {
    background: linear-gradient(145deg, #3a3a42 0%, #121216 55%, #0a0a0c 100%);
    border: 1px solid #0a0a0c;
}

DIV.dice-container.dice-container-red DIV.die {
    background: linear-gradient(145deg, #e74c3c 0%, #a93226 55%, #7b1e14 100%);
    border: 1px solid #5c150e;
}

DIV.dice-container DIV.die.die-uses-0,
DIV.dice-container DIV.die.die-used {
    opacity: 0.32;
    filter: grayscale(0.72) brightness(0.72);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: scale(0.9);
    /* Used dice read clearly vs remaining */
    outline: 1px dashed rgba(255, 255, 255, 0.14);
    outline-offset: 1px;
}

DIV.dice-container DIV.die.die-uses-1,
DIV.dice-container DIV.die.die-uses-2,
DIV.dice-container DIV.die.die-available {
    opacity: 1;
    outline: 2px solid rgba(240, 193, 75, 0.6);
    outline-offset: 1px;
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.35),
        0 0 14px rgba(240, 193, 75, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Remaining-uses chip on each die face */
DIV.dice-container DIV.die SPAN.die-uses-chip {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f0c14b 0%, #c9a227 100%);
    color: #1a1408;
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 3;
    pointer-events: none;
}

DIV.dice-container DIV.die SPAN.die-used-stamp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 3;
    pointer-events: none;
}

DIV.dice-container DIV.die.die-used .die-face {
    opacity: 0.45;
}

DIV.dice-container DIV.die {
    position: relative;
}

/* Roll animation */
DIV.dice-container DIV.die.die-roll {
    animation: die-toss 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes die-toss {
    0% {
        transform: translateY(-18px) rotate(-25deg) scale(0.7);
        opacity: 0;
    }
    55% {
        transform: translateY(2px) rotate(8deg) scale(1.08);
        opacity: 1;
    }
    100% {
        transform: translateY(0) rotate(0) scale(1);
        opacity: 1;
    }
}

DIV.die-face {
    width: 100%;
    height: 100%;
    display: grid;
    padding: 6px;
    gap: 2px;
    place-items: center;
}

/* Pip grid by face value */
DIV.die[data-value="1"] .die-face {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

DIV.die[data-value="2"] .die-face {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

DIV.die[data-value="2"] .die-pip:nth-child(1) { grid-column: 1; grid-row: 1; }
DIV.die[data-value="2"] .die-pip:nth-child(2) { grid-column: 2; grid-row: 2; }

DIV.die[data-value="3"] .die-face {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

DIV.die[data-value="3"] .die-pip:nth-child(1) { grid-column: 1; grid-row: 1; }
DIV.die[data-value="3"] .die-pip:nth-child(2) { grid-column: 2; grid-row: 2; }
DIV.die[data-value="3"] .die-pip:nth-child(3) { grid-column: 3; grid-row: 3; }

DIV.die[data-value="4"] .die-face {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

DIV.die[data-value="5"] .die-face {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

DIV.die[data-value="5"] .die-pip:nth-child(1) { grid-column: 1; grid-row: 1; }
DIV.die[data-value="5"] .die-pip:nth-child(2) { grid-column: 3; grid-row: 1; }
DIV.die[data-value="5"] .die-pip:nth-child(3) { grid-column: 2; grid-row: 2; }
DIV.die[data-value="5"] .die-pip:nth-child(4) { grid-column: 1; grid-row: 3; }
DIV.die[data-value="5"] .die-pip:nth-child(5) { grid-column: 3; grid-row: 3; }

DIV.die[data-value="6"] .die-face {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

SPAN.die-pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #e8e8e8 40%, #bbb 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

DIV.dice-container-black SPAN.die-pip {
    background: radial-gradient(circle at 35% 30%, #ff8a7a 0%, #e74c3c 55%, #a93226 100%);
}

DIV.dice-container-red SPAN.die-pip {
    background: radial-gradient(circle at 35% 30%, #fff 0%, #f0f0f0 50%, #ccc 100%);
}

SPAN.die-double-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gold);
    color: #1a1208;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.02em;
}

/* Legacy ::after double marker no longer used (badge element instead) */
DIV.dice-container DIV.die.die-uses-2::after {
    content: none;
}

/* ---------- Status log ---------- */

DIV.status-container {
    height: 160px;
    overflow-y: auto;
    margin: 0;
    width: 100%;
    float: none;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    line-height: 1.35;
    scroll-behavior: smooth;
}

DIV.status-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

DIV.status-container p {
    margin: 0 0 6px;
    color: var(--text);
    word-break: break-word;
}

DIV.status-container p.status-win {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
}

DIV.status-container::-webkit-scrollbar {
    width: 6px;
}

DIV.status-container::-webkit-scrollbar-track {
    background: transparent;
}

DIV.status-container::-webkit-scrollbar-thumb {
    background-color: #3a4050;
    border-radius: 4px;
}

.highlight {
    text-shadow: 0 0 12px rgba(240, 193, 75, 0.85);
    color: var(--gold);
}

.highlight.highlight-end {
    transition: all 1.2s ease-in-out;
    text-shadow: inherit;
    color: inherit;
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
    /*
     * Fluid board columns so the full 14-slot geometry fits the viewport
     * with no horizontal scroll and no clipped points.
     * Chrome budget ≈ shell pad + game pad + wrap pad + 2×border + 2×board-pad.
     */
    :root {
        --board-pad: 3px;
        --point-w: clamp(20px, calc((100vw - 44px) / 14), 48px);
        --point-h: clamp(90px, calc(var(--point-w) * 2.25), 112px);
        --checker-size: clamp(16px, calc(var(--point-w) * 0.68), 32px);
        --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
    }

    body.bg-app {
        touch-action: manipulation;
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
    }

    /* Tighten shell/chrome so 14 columns fit on ~390px phones */
    body.bg-app .app-shell {
        padding-left: 4px;
        padding-right: 4px;
        padding-bottom: max(72px, env(safe-area-inset-bottom));
        max-width: 100vw;
        overflow-x: hidden;
    }

    DIV.game-container {
        padding: 4px;
        max-width: 100%;
        width: 100%;
        gap: 8px;
        overflow-x: hidden;
    }

    DIV.board-wrap {
        width: 100%;
        max-width: 100%;
        padding: 2px !important;
        overflow-x: hidden;
        display: flex;
        justify-content: center;
    }

    DIV.board {
        border-width: 6px;
        width: calc(var(--point-w) * 14);
        min-width: 0;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Point numbers stay large enough to tap-reference on phone */
    DIV.point-red[data-point]::after,
    DIV.point-black[data-point]::after {
        font-size: clamp(0.72rem, calc(var(--point-w) * 0.36), 0.95rem);
        padding: 2px 4px;
        min-width: 1.3em;
    }

    DIV.board.show-point-labels DIV.point-red[data-point]::after,
    DIV.board.show-point-labels DIV.point-black[data-point]::after,
    DIV.game-container.show-point-labels DIV.point-red[data-point]::after,
    DIV.game-container.show-point-labels DIV.point-black[data-point]::after {
        font-size: clamp(0.78rem, calc(var(--point-w) * 0.38), 1rem);
        padding: 3px 5px;
    }

    /* Large tap targets — no hover dependency */
    DIV.checker-container.valid-source,
    DIV.checker-container.valid-destination {
        min-height: 44px;
    }

    DIV.turn-banner.turn-you,
    DIV.turn-banner.turn-cpu {
        font-size: 0.95rem;
        letter-spacing: 0.08em;
        min-height: 48px;
    }

    DIV.side-container {
        max-width: 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    DIV.dice-block {
        flex: 1 1 40%;
    }

    DIV.status-container {
        flex: 1 1 100%;
        height: 110px;
    }

    DIV.dice-container DIV.die {
        width: 38px;
        height: 38px;
    }

    SPAN.die-pip {
        width: 6px;
        height: 6px;
    }

    DIV.match-header {
        gap: 10px;
        padding: 8px 10px;
    }

    SPAN.player-label {
        font-size: 0.85rem;
    }
}

@media (max-width: 380px) {
    :root {
        /* Tighter chrome on very small phones; keep clamp floor playable */
        --board-pad: 2px;
        --point-w: clamp(20px, calc((100vw - 36px) / 14), 32px);
        --point-h: clamp(88px, calc(var(--point-w) * 2.3), 100px);
        --checker-size: clamp(15px, calc(var(--point-w) * 0.7), 26px);
        --stack-step: calc((var(--point-h) - var(--checker-size) - 4px) / 4);
    }

    DIV.board {
        border-width: 5px;
    }

    DIV.dice-container DIV.die {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    P.play-hint {
        font-size: 0.7rem;
    }
}

/* Mid widths (tablets / small laptops): fluid columns so 14 slots never force h-scroll */
@media (min-width: 561px) and (max-width: 899px) {
    :root {
        --board-pad: 3px;
        /* Fit felt + border + shell pad inside the viewport */
        --point-w: clamp(28px, calc((100vw - 48px) / 14), 52px);
        --point-h: clamp(100px, calc(var(--point-w) * 2.2), 120px);
        --checker-size: clamp(18px, calc(var(--point-w) * 0.68), 34px);
        --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
    }

    DIV.game-container {
        max-width: 100%;
        padding: 6px;
    }

    DIV.board-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    DIV.board {
        width: calc(var(--point-w) * 14);
        min-width: 0;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-width: 8px;
    }
}

@media (min-width: 900px) {
    :root {
        --checker-size: 36px;
        --point-w: 56px;
        --point-h: 124px;
        --board-pad: 4px;
        --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
    }

    /* Wide enough for board (~812) + side panel (~180) + gaps without squeeze */
    DIV.game-container {
        max-width: 1040px;
    }

    DIV.board-wrap {
        overflow-x: visible;
        width: max-content;
        max-width: none;
    }

    DIV.board {
        max-width: none;
    }

    DIV.dice-container DIV.die {
        width: 46px;
        height: 46px;
    }

    SPAN.die-pip {
        width: 8px;
        height: 8px;
    }
}

/* ---------- Toolbar ---------- */

DIV.game-toolbar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
}

BUTTON.tool-btn {
    appearance: none;
    border: 1px solid var(--panel-border);
    background: linear-gradient(180deg, #2a3040 0%, var(--panel) 100%);
    color: var(--text);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 40px;
    touch-action: manipulation;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

BUTTON.tool-btn:hover,
BUTTON.tool-btn:focus-visible {
    border-color: rgba(240, 193, 75, 0.55);
    color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(240, 193, 75, 0.2);
}

BUTTON.tool-btn:active {
    transform: translateY(1px);
}

BUTTON.tool-btn.is-active {
    background: linear-gradient(180deg, #3a4558 0%, #252a36 100%);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 14px rgba(240, 193, 75, 0.25);
}

/* ---------- Turn banner ---------- */

DIV.turn-banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    min-height: 44px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

DIV.turn-banner.turn-starting {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--panel-border);
    color: var(--text-muted);
}

DIV.turn-banner.turn-you {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.38), rgba(240, 193, 75, 0.2));
    border-color: rgba(46, 204, 113, 0.95);
    border-width: 2px;
    color: #d4ffe4;
    box-shadow: 0 0 32px rgba(46, 204, 113, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: turn-pulse-you 1.8s ease-in-out infinite;
    font-size: 1.18rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    min-height: 50px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

DIV.turn-banner.turn-cpu {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.34), rgba(240, 193, 75, 0.14));
    border-color: rgba(231, 76, 60, 0.9);
    border-width: 2px;
    color: #ffd4ce;
    font-size: 1.18rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 0 28px rgba(231, 76, 60, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    min-height: 50px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

DIV.turn-banner.turn-thinking {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.24), rgba(155, 89, 182, 0.16));
    border-color: rgba(231, 76, 60, 0.65);
    color: #ffe0b0;
    box-shadow: 0 0 26px rgba(231, 76, 60, 0.28);
    font-size: 1.02rem;
    letter-spacing: 0.06em;
}

DIV.turn-banner.turn-won {
    background: linear-gradient(90deg, rgba(240, 193, 75, 0.2), rgba(46, 204, 113, 0.15));
    border-color: rgba(240, 193, 75, 0.65);
    color: var(--gold);
    box-shadow: 0 0 28px rgba(240, 193, 75, 0.3);
}

@keyframes turn-pulse-you {
    0%, 100% { box-shadow: 0 0 12px rgba(46, 204, 113, 0.12); }
    50% { box-shadow: 0 0 26px rgba(46, 204, 113, 0.32); }
}

SPAN.turn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 214, 160, 0.25);
    border-top-color: #ffd6a0;
    flex-shrink: 0;
}

DIV.turn-banner.turn-thinking SPAN.turn-spinner {
    display: inline-block;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Active player pulse on header badges */
DIV.player-badge.is-active-player {
    position: relative;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.35), 0 0 16px rgba(240, 193, 75, 0.15);
    animation: badge-pulse 1.6s ease-in-out infinite;
}

DIV.player-badge-you.is-active-player {
    box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.5), 0 0 16px rgba(46, 204, 113, 0.2);
}

DIV.player-badge-cpu.is-active-player {
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.5), 0 0 16px rgba(231, 76, 60, 0.2);
}

@keyframes badge-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

/* Board accent by turn */
DIV.game-container.board-turn-you DIV.board {
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(255, 220, 160, 0.12),
        inset 0 0 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(46, 204, 113, 0.25),
        0 0 30px rgba(46, 204, 113, 0.12);
    filter: brightness(1) saturate(1);
    transition: filter 0.35s ease, box-shadow 0.35s ease;
}

DIV.game-container.board-turn-cpu DIV.board {
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(255, 220, 160, 0.12),
        inset 0 0 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(231, 76, 60, 0.35),
        0 0 28px rgba(231, 76, 60, 0.18);
    /* Dim board so "computer's turn" is unmistakable */
    filter: brightness(0.78) saturate(0.88);
    transition: filter 0.35s ease, box-shadow 0.35s ease;
}

DIV.game-container.focus-cpu DIV.board {
    filter: brightness(0.74) saturate(0.85);
}

/* Soften unused chrome during AI; board taps already pointer-events:none */
DIV.game-container.focus-cpu DIV.side-container DIV.dice-block:first-child,
DIV.game-container.focus-cpu BUTTON.roll-dice-btn {
    opacity: 0.55;
    pointer-events: none;
}

/* ---------- Computer move highlight ---------- */

DIV.checker-container.cpu-move {
    box-shadow: inset 0 0 0 2px rgba(155, 89, 182, 0.85), 0 0 18px rgba(155, 89, 182, 0.45) !important;
    filter: brightness(1.18) saturate(1.2);
    animation: cpu-glow 0.9s ease-in-out infinite;
    z-index: 2;
}

DIV.checker-container.cpu-move::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: inset 0 0 12px rgba(187, 134, 252, 0.35);
    z-index: 0;
}

@keyframes cpu-glow {
    0%, 100% { filter: brightness(1.12) saturate(1.15); }
    50% { filter: brightness(1.32) saturate(1.3); }
}

/* ---------- Transient notice (auto-pass) ---------- */

DIV.game-notice {
    width: 100%;
    text-align: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    background: linear-gradient(90deg, rgba(240, 193, 75, 0.18), rgba(230, 126, 34, 0.14));
    border: 1px solid rgba(240, 193, 75, 0.55);
    color: #ffe6a0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

DIV.game-notice.game-notice-in {
    animation: notice-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

DIV.game-notice.game-notice-out {
    animation: notice-out 0.35s ease both;
}

@keyframes notice-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes notice-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}

/* ---------- Modals (how-to + win) ---------- */

DIV.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 10, 14, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

DIV.modal-overlay[hidden] {
    display: none !important;
}

DIV.modal-card {
    position: relative;
    width: min(420px, 100%);
    max-height: min(86vh, 640px);
    overflow: auto;
    background: linear-gradient(165deg, #2a3040 0%, #1a1e28 55%, #141820 100%);
    border: 1px solid rgba(240, 193, 75, 0.35);
    border-radius: 18px;
    padding: 22px 20px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(240, 193, 75, 0.08);
    color: var(--text);
}

H2.modal-title {
    margin: 0 0 12px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #f0c14b, #e8d4a8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
}

DIV.modal-body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

DIV.modal-body p {
    margin: 0 0 10px;
}

DIV.modal-body strong {
    color: var(--gold);
}

BUTTON.modal-btn {
    appearance: none;
    display: block;
    width: 100%;
    margin-top: 14px;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    min-height: 48px;
    touch-action: manipulation;
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

BUTTON.modal-btn.primary {
    background: linear-gradient(180deg, #f0c14b 0%, #c9a227 100%);
    color: #1a1208;
    box-shadow: 0 4px 0 #8a7018, 0 8px 20px rgba(0, 0, 0, 0.35);
}

BUTTON.modal-btn.primary:hover,
BUTTON.modal-btn.primary:focus-visible {
    filter: brightness(1.06);
    outline: none;
}

BUTTON.modal-btn.primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8a7018, 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Win card extras */
DIV.win-card {
    text-align: center;
    overflow: hidden;
}

DIV.win-glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 120%;
    background: radial-gradient(ellipse at 50% 0%, rgba(240, 193, 75, 0.28), transparent 60%);
    pointer-events: none;
}

DIV.win-overlay.win-cpu DIV.win-glow {
    background: radial-gradient(ellipse at 50% 0%, rgba(231, 76, 60, 0.28), transparent 60%);
}

P.win-sub {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* ---------- Confetti ---------- */

DIV.confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1100;
    overflow: hidden;
}

SPAN.confetti-piece {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.95;
    animation-name: confetti-fall;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: both;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

SPAN.confetti-piece.confetti-rect {
    width: 7px;
    height: 12px;
    border-radius: 2px;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) rotate(720deg);
        opacity: 0.85;
    }
}

/* ---------- Checker hover lift (desktop) ---------- */

@media (hover: hover) and (pointer: fine) {
    DIV.checker-container.valid-source DIV.checker:hover {
        transform: translateY(-3px) scale(1.06);
        box-shadow:
            0 6px 10px rgba(0, 0, 0, 0.45),
            inset 0 2px 3px rgba(255, 255, 255, 0.28),
            inset 0 -2px 3px rgba(0, 0, 0, 0.35);
    }
}

/* Selected source checkers lift */
DIV.checker-container.selected DIV.checker {
    box-shadow:
        0 0 0 2px rgba(46, 204, 113, 0.65),
        0 4px 10px rgba(0, 0, 0, 0.4),
        inset 0 2px 3px rgba(255, 255, 255, 0.25);
}

/* ---------- High contrast mode ---------- */

BODY.high-contrast {
    --surface: #000;
    --panel: #0a0a0a;
    --panel-border: #fff;
    --text: #fff;
    --text-muted: #ddd;
    --gold: #ffe566;
    --emerald: #3dff8a;
    --felt: #003318;
    --point-dark: #6b0000;
    --point-light: #ffe0a0;
    --point-dark-tip: #400000;
    --point-light-tip: #fff3cc;
    --wood-frame: #111;
    --wood-dark: #1a1a1a;
    --wood-mid: #2a2a2a;
    --wood-light: #3a3a3a;
}

BODY.high-contrast DIV.board {
    border-color: #fff;
    box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
}

BODY.high-contrast DIV.checker.black {
    border: 2px solid #fff;
}

BODY.high-contrast DIV.checker.red {
    border: 2px solid #fff;
    background: radial-gradient(circle at 32% 28%, #ff6666 0%, #ff0000 50%, #990000 100%);
}

BODY.high-contrast DIV.checker-container.valid-source {
    box-shadow: inset 0 0 0 3px #3dff8a, 0 0 0 2px #000;
    filter: none;
}

BODY.high-contrast DIV.checker-container.valid-destination {
    box-shadow: inset 0 0 0 3px #00ff66, 0 0 0 2px #000, 0 0 18px rgba(0, 255, 100, 0.5);
    background-color: rgba(0, 255, 100, 0.2) !important;
    filter: none;
    animation: none;
}

BODY.high-contrast DIV.turn-banner.turn-you {
    background: #003318;
    border-color: #3dff8a;
    color: #3dff8a;
    animation: none;
}

BODY.high-contrast DIV.turn-banner.turn-thinking,
BODY.high-contrast DIV.turn-banner.turn-cpu {
    background: #330000;
    border-color: #ff6666;
    color: #ffcccc;
}

BODY.high-contrast BUTTON.tool-btn {
    border-color: #fff;
    background: #111;
    color: #fff;
}

BODY.high-contrast DIV.modal-card {
    background: #000;
    border-color: #ffe566;
}

/* RTL fine-tuning for FA */
DIV.game-container.lang-fa {
    font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
}

DIV.game-container.lang-fa DIV.status-container {
    text-align: right;
}

/* Neon accent ring on dice when active */
DIV.dice-container.active {
    animation: dice-neon 1.8s ease-in-out infinite;
}

@keyframes dice-neon {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.35), 0 0 16px rgba(240, 193, 75, 0.12);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.65), 0 0 28px rgba(240, 193, 75, 0.28);
    }
}

/* Smooth board scale on resize */
DIV.board-wrap {
    transition: transform 0.2s ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    DIV.checker.checker-enter,
    DIV.dice-container DIV.die.die-roll,
    DIV.checker-container.valid-destination,
    DIV.turn-banner.turn-you,
    DIV.player-badge.is-active-player,
    DIV.checker-container.cpu-move,
    DIV.dice-container.active,
    SPAN.turn-spinner,
    SPAN.confetti-piece,
    DIV.game-notice.game-notice-in,
    DIV.game-notice.game-notice-out {
        animation: none !important;
    }

    DIV.checker,
    DIV.checker-container,
    DIV.board-wrap {
        transition: none;
    }
}

/* Extra mobile polish for new chrome */
@media (max-width: 560px) {
    DIV.turn-banner {
        font-size: 0.88rem;
        padding: 9px 10px;
    }

    BUTTON.tool-btn {
        font-size: 0.68rem;
        padding: 8px 10px;
        min-height: 42px;
    }

    DIV.modal-card {
        padding: 18px 14px 14px;
    }

    DIV.borne-progress {
        min-width: 72px;
    }
}

/* ---------- Borne-off progress under player badges ---------- */

DIV.borne-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    min-width: 88px;
}

DIV.borne-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

SPAN.borne-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}

SPAN.borne-fill-you {
    background: linear-gradient(90deg, #3a3a42, #9aa0b0 60%, #e8e8f0);
    box-shadow: 0 0 8px rgba(200, 200, 220, 0.35);
}

SPAN.borne-fill-cpu {
    background: linear-gradient(90deg, #7b1e14, #e74c3c 60%, #f5a89e);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.35);
}

SPAN.borne-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 3.6em;
}

DIV.borne-progress.borne-complete SPAN.borne-label {
    color: var(--gold);
}

DIV.borne-progress.borne-complete DIV.borne-bar {
    box-shadow: 0 0 10px rgba(240, 193, 75, 0.45);
}

/* ---------- Dice tray shake on roll ---------- */

DIV.dice-container.dice-shake {
    animation: dice-tray-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes dice-tray-shake {
    0% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-5px) rotate(-1.5deg); }
    30% { transform: translateX(5px) rotate(1.5deg); }
    45% { transform: translateX(-4px) rotate(-1deg); }
    60% { transform: translateX(3px) rotate(0.8deg); }
    75% { transform: translateX(-2px) rotate(-0.4deg); }
    100% { transform: translateX(0) rotate(0); }
}

/* Stronger die toss with spin */
DIV.dice-container DIV.die.die-roll {
    animation: die-toss-spin 0.62s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@keyframes die-toss-spin {
    0% {
        transform: translateY(-22px) rotateX(70deg) rotateZ(-40deg) scale(0.55);
        opacity: 0;
        filter: blur(1px);
    }
    50% {
        transform: translateY(3px) rotateX(-8deg) rotateZ(12deg) scale(1.1);
        opacity: 1;
        filter: blur(0);
    }
    75% {
        transform: translateY(-2px) rotateX(4deg) rotateZ(-4deg) scale(0.98);
    }
    100% {
        transform: translateY(0) rotateX(0) rotateZ(0) scale(1);
        opacity: 1;
    }
}

/* Point number labels (1–24) removed per user request — cleaner board.
   (The data-label attribute is still set for layout/inspection, but no
   longer rendered.) */

DIV.checker-container-top.point-red[data-point]::after,
DIV.checker-container-top.point-black[data-point]::after {
    bottom: 2px;
}

DIV.checker-container-bottom.point-red[data-point]::after,
DIV.checker-container-bottom.point-black[data-point]::after {
    /* container is rotated 180° — keep label readable near outer edge */
    bottom: 2px;
    transform: translateX(-50%) rotate(180deg);
}

/* ---------- Themes: Wood (default) / Marble / Neon ---------- */

BODY.theme-wood {
    /* uses :root defaults */
}

BODY.theme-marble {
    --wood-dark: #3a3f4a;
    --wood-mid: #5a6270;
    --wood-light: #8a92a0;
    --wood-frame: #2a2e38;
    --felt: #1e2a3a;
    --point-dark: #4a5568;
    --point-light: #d8dee8;
    --point-dark-tip: #2d3748;
    --point-light-tip: #f0f4f8;
    --surface: #0e1218;
    --panel: #181e28;
    --panel-border: #3a4558;
    --gold: #b8d4f0;
    --emerald: #5eead4;
    background:
        radial-gradient(ellipse 100% 70% at 50% -10%, #3a4a60 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 0% 100%, #1a2838 0%, transparent 45%),
        var(--surface);
}

BODY.theme-marble DIV.board {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
        linear-gradient(180deg, #9aa3b2 0%, #6a7384 45%, #3a4250 100%);
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(220, 230, 245, 0.2),
        inset 0 0 40px rgba(0, 0, 0, 0.4);
}

BODY.theme-marble DIV.board::before {
    background:
        linear-gradient(180deg, rgba(30, 42, 58, 0.94), rgba(14, 20, 32, 0.97));
}

BODY.theme-marble DIV.bar {
    background: linear-gradient(90deg, #1a1e28 0%, #4a5568 40%, #3a4558 60%, #1a1e28 100%);
}

BODY.theme-neon {
    --wood-dark: #0a0a12;
    --wood-mid: #141428;
    --wood-light: #1e1e3a;
    --wood-frame: #0a0a18;
    --felt: #0a1420;
    --point-dark: #6b1f8a;
    --point-light: #1a8cff;
    --point-dark-tip: #3d0f52;
    --point-light-tip: #0d4a8a;
    --surface: #05050c;
    --panel: #0c0c18;
    --panel-border: #2a2060;
    --gold: #00f0ff;
    --emerald: #39ff14;
    --text: #e8f0ff;
    --text-muted: #8890b0;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, #1a0a40 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 80%, #0a2040 0%, transparent 45%),
        radial-gradient(ellipse 40% 30% at 0% 100%, #200a30 0%, transparent 40%),
        var(--surface);
}

BODY.theme-neon DIV.board {
    border-color: #1a1040;
    background:
        linear-gradient(145deg, rgba(0, 240, 255, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #1a1a35 0%, #0e0e22 50%, #080814 100%);
    box-shadow:
        0 0 0 1px rgba(0, 240, 255, 0.25),
        0 0 40px rgba(120, 40, 255, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 0, 180, 0.12);
}

BODY.theme-neon DIV.board::before {
    background:
        linear-gradient(180deg, rgba(8, 16, 32, 0.96), rgba(4, 8, 18, 0.98));
    box-shadow:
        inset 0 0 40px rgba(0, 240, 255, 0.06),
        inset 0 0 60px rgba(180, 40, 255, 0.05);
}

BODY.theme-neon DIV.point-red::before,
BODY.theme-neon DIV.point-black::before {
    opacity: 0.85;
    filter: saturate(1.4);
}

BODY.theme-neon DIV.bar {
    background: linear-gradient(90deg, #0a0a18 0%, #2a1060 40%, #104060 60%, #0a0a18 100%);
    box-shadow: inset 0 0 16px rgba(0, 240, 255, 0.15);
}

BODY.theme-neon DIV.checker.black {
    box-shadow:
        0 0 10px rgba(0, 240, 255, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.45),
        inset 0 2px 3px rgba(255, 255, 255, 0.18);
}

BODY.theme-neon DIV.checker.red {
    box-shadow:
        0 0 12px rgba(255, 40, 120, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.45),
        inset 0 2px 3px rgba(255, 255, 255, 0.22);
    background:
        radial-gradient(circle at 32% 28%, #ff6eb4 0%, #e91e8c 42%, #7b0d4a 100%);
}

BODY.theme-neon DIV.checker-container.valid-source {
    box-shadow: inset 0 0 0 2px rgba(57, 255, 20, 0.7), 0 0 16px rgba(57, 255, 20, 0.35);
}

BODY.theme-neon DIV.checker-container.valid-destination {
    box-shadow:
        inset 0 0 0 3px rgba(0, 255, 140, 0.95),
        0 0 0 2px rgba(0, 240, 120, 0.55),
        0 0 22px rgba(0, 255, 140, 0.55);
    background-color: rgba(0, 255, 140, 0.16) !important;
}

BODY.theme-neon DIV.match-header,
BODY.theme-neon DIV.side-container {
    border-color: rgba(0, 240, 255, 0.22);
    box-shadow: 0 0 24px rgba(120, 40, 255, 0.12);
}

BODY.theme-neon DIV.turn-banner.turn-you {
    border-color: rgba(57, 255, 20, 0.55);
    color: #9dff8a;
    box-shadow: 0 0 22px rgba(57, 255, 20, 0.2);
}

BODY.theme-neon DIV.turn-banner.turn-thinking,
BODY.theme-neon DIV.turn-banner.turn-cpu {
    border-color: rgba(255, 40, 120, 0.5);
    color: #ffb0d0;
}

BODY.theme-neon BUTTON.tool-btn:hover,
BODY.theme-neon BUTTON.tool-btn:focus-visible,
BODY.theme-neon BUTTON.tool-btn.is-active {
    border-color: rgba(0, 240, 255, 0.65);
    color: #00f0ff;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

BODY.theme-neon .app-title {
    background: linear-gradient(135deg, #00f0ff 0%, #c44dff 50%, #ff2d8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* High-contrast overrides still win over themes for a11y */
BODY.high-contrast.theme-neon,
BODY.high-contrast.theme-marble {
    --gold: #ffe566;
    --emerald: #3dff8a;
    --text: #fff;
    --text-muted: #ddd;
}

/* Reduced motion: dice shake */
@media (prefers-reduced-motion: reduce) {
    DIV.dice-container.dice-shake,
    DIV.dice-container DIV.die.die-roll {
        animation: none !important;
    }

    SPAN.borne-fill {
        transition: none;
    }

    DIV.checker.checker-fly,
    DIV.checker-container.move-trail-source,
    DIV.checker-container.move-trail-dest,
    DIV.checker-container.hit-flash,
    SPAN.die-hint-badge {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Flight layer — checkers arc across the board on every move
   ============================================================ */

DIV.board-fly-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 25;
    overflow: visible;
}

DIV.checker.checker-fly {
    position: absolute;
    margin: 0 !important;
    float: none !important;
    display: block;
    pointer-events: none;
    z-index: 30;
    opacity: 0.98;
    will-change: transform, opacity;
    transition:
        transform 0.36s cubic-bezier(0.22, 0.85, 0.28, 1),
        opacity 0.28s ease,
        filter 0.2s ease;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(240, 193, 75, 0.25),
        inset 0 2px 3px rgba(255, 255, 255, 0.28),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
    filter: brightness(1.08);
}

DIV.checker.checker-fly-mid {
    filter: brightness(1.18) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}

DIV.checker.checker-fly-land {
    filter: brightness(1.02);
}

DIV.checker.checker-fly-hit {
    opacity: 0.9;
    box-shadow:
        0 6px 14px rgba(231, 76, 60, 0.45),
        0 0 10px rgba(231, 76, 60, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.22);
    animation: hit-wobble 0.35s ease-in-out;
}

@keyframes hit-wobble {
    0% { filter: brightness(1.3); }
    40% { filter: brightness(1.5) saturate(1.3); }
    100% { filter: brightness(1); }
}

/* Source / destination trail while a piece flies */
DIV.checker-container.move-trail-source {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 14px rgba(255, 255, 255, 0.12) !important;
    animation: trail-fade 0.55s ease both;
}

DIV.checker-container.move-trail-dest {
    box-shadow: inset 0 0 0 2px rgba(240, 193, 75, 0.7), 0 0 18px rgba(240, 193, 75, 0.35) !important;
    animation: trail-dest 0.55s ease both;
}

/* Landing glow — destination lights green as the ghost settles */
DIV.checker-container.move-land-glow {
    box-shadow:
        inset 0 0 0 3px rgba(46, 204, 113, 1),
        0 0 0 3px rgba(39, 174, 96, 0.7),
        0 0 34px rgba(46, 204, 113, 0.7) !important;
    animation: land-glow-pulse 0.7s ease both;
    filter: brightness(1.28) saturate(1.35);
    z-index: 3;
}

@keyframes trail-fade {
    0% { filter: brightness(1.2); }
    100% { filter: brightness(1); }
}

@keyframes trail-dest {
    0% { filter: brightness(1.25) saturate(1.2); }
    100% { filter: brightness(1); }
}

@keyframes land-glow-pulse {
    0% {
        filter: brightness(1.35) saturate(1.4);
        box-shadow:
            inset 0 0 0 3px #2ecc71,
            0 0 0 3px rgba(46, 204, 113, 0.7),
            0 0 32px rgba(46, 204, 113, 0.7);
    }
    100% {
        filter: brightness(1);
        box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
    }
}

/* Hit flash — capture point and bar when a blot is sent home */
DIV.checker-container.hit-flash {
    animation: hit-flash-pulse 0.8s ease;
    z-index: 4;
}

DIV.checker-container.hit-shake {
    animation: hit-shake 0.55s ease;
    z-index: 4;
}

@keyframes hit-flash-pulse {
    0% {
        box-shadow: inset 0 0 0 2px rgba(231, 76, 60, 0.2), 0 0 0 rgba(231, 76, 60, 0);
        filter: brightness(1);
        background-color: transparent;
    }
    25% {
        box-shadow: inset 0 0 0 4px rgba(255, 80, 60, 1), 0 0 32px rgba(231, 76, 60, 0.9);
        filter: brightness(1.5);
        background-color: rgba(231, 76, 60, 0.32) !important;
    }
    55% {
        box-shadow: inset 0 0 0 3px rgba(231, 76, 60, 0.85), 0 0 20px rgba(231, 76, 60, 0.55);
        filter: brightness(1.25);
        background-color: rgba(231, 76, 60, 0.16) !important;
    }
    100% {
        box-shadow: inset 0 0 0 0 transparent, 0 0 0 transparent;
        filter: brightness(1);
        background-color: transparent;
    }
}

@keyframes hit-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-4px) rotate(-0.8deg); }
    35% { transform: translateX(4px) rotate(0.8deg); }
    55% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Bottom-row points are rotated 180° — keep shake readable */
DIV.checker-container-bottom.hit-shake {
    animation-name: hit-shake-bottom;
}

@keyframes hit-shake-bottom {
    0%, 100% { transform: rotate(180deg) translateX(0); }
    20% { transform: rotate(180deg) translateX(-3px); }
    40% { transform: rotate(180deg) translateX(3px); }
    60% { transform: rotate(180deg) translateX(-2px); }
    80% { transform: rotate(180deg) translateX(2px); }
}

/* Die-value badges on legal destinations */
SPAN.die-hint-badge {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 6;
    min-width: 1.35em;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 55%, #c9a227 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(240, 193, 75, 0.35);
    pointer-events: none;
    animation: hint-pop 0.28s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}

DIV.checker-container-bottom SPAN.die-hint-badge {
    /* container is rotated 180° — keep badge upright relative to the board */
    transform: translate(-50%, -50%) rotate(180deg);
}

DIV.home SPAN.die-hint-badge {
    top: 50%;
}

@keyframes hint-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

DIV.checker-container-bottom SPAN.die-hint-badge {
    animation-name: hint-pop-bottom;
}

@keyframes hint-pop-bottom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(180deg) scale(0.4);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }
}

DIV.checker-container.has-die-hint.valid-destination {
    /* stronger green when a die badge is present */
    box-shadow:
        inset 0 0 0 3px rgba(46, 204, 113, 0.98),
        0 0 0 2px rgba(39, 174, 96, 0.65),
        0 0 24px rgba(46, 204, 113, 0.6);
}

/* Undo toolbar button */
BUTTON.tool-btn.tool-btn-undo {
    border-color: rgba(93, 173, 226, 0.35);
    min-width: 4.5em;
}

BUTTON.tool-btn.tool-btn-undo.is-enabled {
    border-color: rgba(93, 173, 226, 0.75);
    color: #9fd4ff;
    box-shadow: 0 0 14px rgba(93, 173, 226, 0.22);
    background: linear-gradient(180deg, #2a3850 0%, #1c2434 100%);
}

BUTTON.tool-btn.tool-btn-undo:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

BUTTON.tool-btn.tool-btn-undo.is-enabled:hover,
BUTTON.tool-btn.tool-btn-undo.is-enabled:focus-visible {
    border-color: #5dade2;
    color: #c8e8ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.3);
}

BODY.theme-neon BUTTON.tool-btn.tool-btn-undo.is-enabled {
    border-color: rgba(0, 240, 255, 0.55);
    color: #00f0ff;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.22);
}

BODY.high-contrast BUTTON.tool-btn.tool-btn-undo.is-enabled {
    border-color: #5dade2;
    color: #9fd4ff;
    background: #001428;
}

/* Neon theme flight glow */
BODY.theme-neon DIV.checker.checker-fly.black {
    box-shadow:
        0 0 16px rgba(0, 240, 255, 0.55),
        0 8px 16px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

BODY.theme-neon DIV.checker.checker-fly.red {
    box-shadow:
        0 0 16px rgba(255, 40, 120, 0.55),
        0 8px 16px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.22);
}

BODY.theme-neon SPAN.die-hint-badge {
    background: linear-gradient(180deg, #7af8ff 0%, #00f0ff 55%, #0090a0 100%);
    color: #041018;
}

/* Slightly richer board wood grain (default / wood theme only) */
BODY.theme-wood DIV.board,
BODY.bg-app:not(.theme-marble):not(.theme-neon) DIV.board {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 11px,
            rgba(0, 0, 0, 0.03) 11px,
            rgba(0, 0, 0, 0.03) 12px
        ),
        linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 40%, var(--wood-dark) 100%);
}

/* ============================================================
   Race / pip meter
   ============================================================ */

DIV.race-panel {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, #2a3140 0%, var(--panel) 100%);
    border: 1px solid rgba(240, 193, 75, 0.32);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

DIV.race-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

SPAN.race-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

SPAN.race-delta {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

DIV.race-panel.race-you-ahead SPAN.race-delta {
    color: #7dffa8;
    border-color: rgba(46, 204, 113, 0.4);
    background: rgba(46, 204, 113, 0.1);
}

DIV.race-panel.race-cpu-ahead SPAN.race-delta {
    color: #ffb0a6;
    border-color: rgba(231, 76, 60, 0.4);
    background: rgba(231, 76, 60, 0.1);
}

DIV.race-panel.race-tied SPAN.race-delta {
    color: var(--gold);
    border-color: rgba(240, 193, 75, 0.35);
}

DIV.race-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

DIV.race-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

SPAN.race-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

SPAN.race-swatch.black {
    background: radial-gradient(circle at 35% 30%, #5a5a66, #1a1a1e 60%, #0a0a0c);
}

SPAN.race-swatch.red {
    background: radial-gradient(circle at 35% 30%, #e74c3c, #c0392b 60%, #7b1e14);
}

SPAN.race-pips {
    font-size: 1.12rem;
    font-weight: 800;
    color: #fffaf0;
    min-width: 5.8em;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

SPAN.race-pips-you {
    color: #e8f0ff;
}

SPAN.race-pips-cpu {
    color: #ffd8d0;
}

DIV.race-track {
    flex: 1 1 auto;
    height: 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

SPAN.race-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.34, 1.15, 0.64, 1);
}

SPAN.race-fill-you {
    background: linear-gradient(90deg, #2a2a32, #8a90a0 55%, #e0e2ea);
    box-shadow: 0 0 8px rgba(200, 200, 220, 0.3);
}

SPAN.race-fill-cpu {
    background: linear-gradient(90deg, #5c150e, #e74c3c 55%, #f5a89e);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
}

/* ============================================================
   Coach suggest button + highlights
   ============================================================ */

BUTTON.tool-btn.tool-btn-suggest {
    border-color: rgba(64, 224, 208, 0.35);
    min-width: 5em;
}

BUTTON.tool-btn.tool-btn-suggest.is-enabled {
    border-color: rgba(64, 224, 208, 0.75);
    color: #7af0e0;
    box-shadow: 0 0 14px rgba(64, 224, 208, 0.2);
    background: linear-gradient(180deg, #1e3a3a 0%, #162428 100%);
}

BUTTON.tool-btn.tool-btn-suggest:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
}

BUTTON.tool-btn.tool-btn-suggest.is-enabled:hover,
BUTTON.tool-btn.tool-btn-suggest.is-enabled:focus-visible,
BUTTON.tool-btn.tool-btn-suggest.is-active {
    border-color: #40e0d0;
    color: #c8fff6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.3), 0 0 18px rgba(64, 224, 208, 0.25);
}

DIV.checker-container.suggest-move {
    box-shadow: inset 0 0 0 2px rgba(64, 224, 208, 0.75), 0 0 16px rgba(64, 224, 208, 0.4) !important;
    filter: brightness(1.16) saturate(1.15);
    animation: suggest-glow 1s ease-in-out infinite;
    z-index: 2;
}

DIV.checker-container.suggest-move-primary {
    box-shadow: inset 0 0 0 3px rgba(64, 224, 208, 1), 0 0 0 2px rgba(64, 224, 208, 0.45), 0 0 28px rgba(64, 224, 208, 0.65) !important;
    filter: brightness(1.28) saturate(1.3);
    outline: 2px solid rgba(64, 224, 208, 0.55);
    outline-offset: -2px;
}

DIV.checker-container.suggest-move::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: inset 0 0 12px rgba(64, 224, 208, 0.3);
    z-index: 0;
}

@keyframes suggest-glow {
    0%, 100% { filter: brightness(1.12) saturate(1.1); }
    50% { filter: brightness(1.3) saturate(1.25); }
}

/* One-shot flash when coach Suggest is tapped */
DIV.game-container.suggest-flash DIV.board-wrap {
    animation: suggest-board-flash 0.65s ease;
}

@keyframes suggest-board-flash {
    0%, 100% { filter: brightness(1); }
    40% { filter: brightness(1.06) saturate(1.08); box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.35); }
}

/* ============================================================
   SVG flight path arcs
   ============================================================ */

SVG.board-path-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 24;
    overflow: visible;
}

G.flight-path-group {
    opacity: 1;
    transition: opacity 0.3s ease;
}

G.flight-path-group.flight-path-fade {
    opacity: 0;
}

G.flight-path-group PATH.flight-path-glow {
    fill: none;
    stroke: rgba(240, 193, 75, 0.35);
    stroke-width: 7;
    stroke-linecap: round;
    filter: blur(1.5px);
}

G.flight-path-group PATH.flight-path-core {
    fill: none;
    stroke: rgba(255, 230, 160, 0.9);
    stroke-width: 2.2;
    stroke-linecap: round;
}

G.flight-path-group.flight-path-black PATH.flight-path-glow {
    stroke: rgba(180, 190, 220, 0.4);
}

G.flight-path-group.flight-path-black PATH.flight-path-core {
    stroke: rgba(220, 225, 240, 0.95);
}

G.flight-path-group.flight-path-red PATH.flight-path-glow {
    stroke: rgba(231, 76, 60, 0.4);
}

G.flight-path-group.flight-path-red PATH.flight-path-core {
    stroke: rgba(255, 170, 150, 0.95);
}

G.flight-path-group.flight-path-hit PATH.flight-path-glow {
    stroke: rgba(255, 80, 60, 0.55);
}

G.flight-path-group.flight-path-hit PATH.flight-path-core {
    stroke: rgba(255, 200, 120, 1);
}

G.flight-path-group CIRCLE.flight-path-spark {
    fill: rgba(255, 240, 200, 0.95);
    opacity: 0;
    animation: path-spark 0.45s ease-out 0.15s both;
}

G.flight-path-group.flight-path-red CIRCLE.flight-path-spark {
    fill: rgba(255, 160, 140, 0.95);
}

@keyframes path-spark {
    0% {
        opacity: 0;
        r: 2;
    }
    40% {
        opacity: 1;
        r: 6;
    }
    100% {
        opacity: 0;
        r: 3;
    }
}

/* ============================================================
   Ambient table polish — felt pad + lamp glow under board
   ============================================================ */

DIV.board-wrap {
    position: relative;
    padding: 14px 12px 18px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(240, 193, 75, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 90% 80% at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 70%),
        linear-gradient(165deg, #1a2e24 0%, #122018 45%, #0e1814 100%);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(80, 120, 90, 0.18);
}

DIV.board-wrap::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 14px;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(0, 0, 0, 0.03) 3px,
            rgba(0, 0, 0, 0.03) 4px
        );
    opacity: 0.55;
    z-index: 0;
}

DIV.board-wrap > * {
    position: relative;
    z-index: 1;
}

/* Home tray labels */
DIV.home.checker-container-top::after {
    content: "⌂";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(240, 193, 75, 0.35);
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

DIV.home.checker-container-bottom::after {
    content: "⌂";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%) rotate(180deg);
    font-size: 0.65rem;
    color: rgba(240, 193, 75, 0.35);
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Point numbers stay readable (do not dim below the base rule) */
DIV.point-red[data-point]::after,
DIV.point-black[data-point]::after {
    font-variant-numeric: tabular-nums;
}

/* Theme variants for race + suggest + felt pad */
BODY.theme-marble DIV.board-wrap {
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(160, 180, 220, 0.1) 0%, transparent 65%),
        linear-gradient(165deg, #1a2230 0%, #121820 55%, #0e1218 100%);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(140, 160, 190, 0.2);
}

BODY.theme-neon DIV.board-wrap {
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(0, 240, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 20%, rgba(196, 77, 255, 0.08) 0%, transparent 50%),
        linear-gradient(165deg, #0a0e18 0%, #080a12 55%, #05060c 100%);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 240, 255, 0.08),
        inset 0 0 0 1px rgba(0, 240, 255, 0.18);
}

BODY.theme-neon DIV.race-panel {
    border-color: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 18px rgba(120, 40, 255, 0.1);
}

BODY.theme-neon BUTTON.tool-btn.tool-btn-suggest.is-enabled {
    border-color: rgba(0, 240, 255, 0.65);
    color: #00f0ff;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.22);
}

BODY.theme-neon DIV.checker-container.suggest-move {
    box-shadow: inset 0 0 0 2px rgba(0, 240, 255, 0.85), 0 0 18px rgba(0, 240, 255, 0.45) !important;
}

BODY.theme-neon G.flight-path-group.flight-path-black PATH.flight-path-core {
    stroke: rgba(0, 240, 255, 0.95);
}

BODY.theme-neon G.flight-path-group.flight-path-red PATH.flight-path-core {
    stroke: rgba(255, 40, 120, 0.95);
}

BODY.high-contrast DIV.race-panel {
    border-color: #fff;
    background: #000;
}

BODY.high-contrast DIV.checker-container.suggest-move {
    box-shadow: inset 0 0 0 3px #40e0d0, 0 0 0 2px #000 !important;
    animation: none;
    filter: none;
}

BODY.high-contrast BUTTON.tool-btn.tool-btn-suggest.is-enabled {
    border-color: #40e0d0;
    color: #40e0d0;
    background: #001818;
}

BODY.high-contrast DIV.board-wrap {
    background: #000;
    box-shadow: 0 0 0 2px #fff;
}

@media (max-width: 560px) {
    DIV.race-panel {
        padding: 8px 10px;
    }

    SPAN.race-pips {
        font-size: 0.66rem;
        min-width: 4.2em;
    }

    DIV.board-wrap {
        padding: 10px 8px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    DIV.checker-container.suggest-move,
    G.flight-path-group CIRCLE.flight-path-spark {
        animation: none !important;
    }

    SPAN.race-fill,
    G.flight-path-group PATH.flight-path-core,
    G.flight-path-group PATH.flight-path-glow {
        transition: none !important;
    }
}

/* ============================================================
   Combat & celebration VFX — landing sparks, HIT callouts,
   doubles fanfare, turn-rim glow, richer status log
   ============================================================ */

/* --- Landing impact ring --- */
DIV.fx-impact-ring {
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 28;
    border: 2px solid rgba(255, 230, 160, 0.9);
    box-shadow: 0 0 12px rgba(240, 193, 75, 0.55);
    animation: fx-ring-expand 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

DIV.fx-impact-ring.fx-black {
    border-color: rgba(210, 220, 255, 0.95);
    box-shadow: 0 0 14px rgba(180, 200, 255, 0.55);
}

DIV.fx-impact-ring.fx-red {
    border-color: rgba(255, 160, 140, 0.95);
    box-shadow: 0 0 14px rgba(231, 76, 60, 0.55);
}

DIV.fx-impact-ring.fx-hit {
    border-color: rgba(255, 90, 60, 1);
    box-shadow: 0 0 20px rgba(255, 80, 40, 0.75);
    animation-duration: 0.55s;
}

@keyframes fx-ring-expand {
    0% {
        transform: scale(0.4);
        opacity: 1;
    }
    100% {
        transform: scale(3.2);
        opacity: 0;
    }
}

/* --- Landing spark particles --- */
SPAN.fx-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    margin-top: -2.5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 29;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #f0c14b 55%, #c9a227 100%);
    box-shadow: 0 0 6px rgba(240, 193, 75, 0.8);
    animation: fx-spark-burst 0.48s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

SPAN.fx-spark.fx-black {
    background: radial-gradient(circle at 35% 30%, #fff 0%, #c8d0e8 55%, #7a8498 100%);
    box-shadow: 0 0 6px rgba(180, 200, 255, 0.75);
}

SPAN.fx-spark.fx-red {
    background: radial-gradient(circle at 35% 30%, #fff 0%, #ff8a7a 50%, #c0392b 100%);
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.8);
}

SPAN.fx-spark.fx-hit {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #ff6a40 45%, #ff2200 100%);
    box-shadow: 0 0 8px rgba(255, 60, 20, 0.9);
}

@keyframes fx-spark-burst {
    0% {
        transform: translate(0, 0) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--sx, 12px), var(--sy, -12px)) scale(0.15);
        opacity: 0;
    }
}

/* --- Floating HIT! callout --- */
DIV.fx-hit-callout {
    position: absolute;
    z-index: 32;
    pointer-events: none;
    margin-left: 0;
    margin-top: 0;
    transform: translate(-50%, -120%);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #fff5e8;
    text-shadow:
        0 0 8px rgba(255, 60, 20, 0.95),
        0 0 18px rgba(255, 100, 40, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.65);
    background: linear-gradient(180deg, rgba(255, 90, 40, 0.95) 0%, rgba(180, 30, 10, 0.92) 100%);
    border: 1px solid rgba(255, 220, 180, 0.55);
    border-radius: 8px;
    padding: 3px 10px;
    animation: fx-hit-pop 0.85s cubic-bezier(0.2, 1.2, 0.35, 1) both;
    white-space: nowrap;
}

@keyframes fx-hit-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%) scale(0.5);
    }
    25% {
        opacity: 1;
        transform: translate(-50%, -130%) scale(1.15);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -150%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -190%) scale(0.9);
    }
}

/* --- Doubles fanfare on dice tray --- */
DIV.dice-container {
    position: relative;
}

DIV.dice-container.dice-doubles {
    animation: doubles-tray-glow 1.4s ease both;
    box-shadow:
        0 0 0 2px rgba(240, 193, 75, 0.55),
        0 0 28px rgba(240, 193, 75, 0.45),
        inset 0 0 18px rgba(240, 193, 75, 0.12);
    border-radius: 12px;
}

@keyframes doubles-tray-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 193, 75, 0), 0 0 0 rgba(240, 193, 75, 0);
    }
    30% {
        box-shadow:
            0 0 0 3px rgba(240, 193, 75, 0.75),
            0 0 32px rgba(240, 193, 75, 0.55),
            inset 0 0 20px rgba(240, 193, 75, 0.18);
    }
    100% {
        box-shadow:
            0 0 0 1px rgba(240, 193, 75, 0.25),
            0 0 12px rgba(240, 193, 75, 0.2),
            inset 0 0 8px rgba(240, 193, 75, 0.06);
    }
}

DIV.doubles-banner {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    z-index: 8;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 50%, #c9a227 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(240, 193, 75, 0.45);
    pointer-events: none;
    white-space: nowrap;
    animation: doubles-banner-pop 1.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes doubles-banner-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.5);
    }
    18% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.12);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px) scale(0.95);
    }
}

DIV.die.die-is-double {
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.25),
        0 0 18px rgba(240, 193, 75, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

DIV.die.die-is-double.die-roll {
    animation: die-toss 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both,
        doubles-die-shimmer 1.2s ease 0.4s both;
}

@keyframes doubles-die-shimmer {
    0%, 100% { filter: brightness(1); }
    40% { filter: brightness(1.25) saturate(1.15); }
}

/* Die glossy rim highlight */
DIV.die-rim {
    position: absolute;
    inset: 2px;
    border-radius: 8px;
    pointer-events: none;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%, transparent 60%, rgba(0, 0, 0, 0.18) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 1;
}

DIV.die-face {
    position: relative;
    z-index: 2;
}

/* --- Turn-based board rim glow --- */
DIV.game-container.board-turn-you DIV.board-wrap {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(120, 200, 150, 0.25),
        0 0 28px rgba(46, 204, 113, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.45s ease;
}

DIV.game-container.board-turn-cpu DIV.board-wrap {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(231, 76, 60, 0.28),
        0 0 28px rgba(231, 76, 60, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.45s ease;
}

DIV.game-container.board-turn-starting DIV.board-wrap {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(240, 193, 75, 0.3),
        0 0 26px rgba(240, 193, 75, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: starting-board-pulse 1.4s ease-in-out infinite;
}

DIV.game-container.board-turn-won.victory-you DIV.board-wrap {
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(240, 193, 75, 0.55),
        0 0 40px rgba(46, 204, 113, 0.35);
}

DIV.game-container.board-turn-won.victory-cpu DIV.board-wrap {
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(231, 76, 60, 0.55),
        0 0 40px rgba(231, 76, 60, 0.35);
}

@keyframes starting-board-pulse {
    0%, 100% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(240, 193, 75, 0.25),
            0 0 18px rgba(240, 193, 75, 0.12);
    }
    50% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 0 0 2px rgba(240, 193, 75, 0.45),
            0 0 32px rgba(240, 193, 75, 0.28);
    }
}

BODY.theme-neon DIV.game-container.board-turn-you DIV.board-wrap {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 240, 255, 0.35),
        0 0 32px rgba(0, 240, 255, 0.22);
}

BODY.theme-neon DIV.game-container.board-turn-cpu DIV.board-wrap {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 45, 138, 0.4),
        0 0 32px rgba(255, 45, 138, 0.22);
}

/* --- Richer status log --- */
DIV.status-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

DIV.status-container p {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 3px 4px;
    border-radius: 6px;
    color: var(--text);
    word-break: break-word;
    transition: background 0.35s ease;
}

DIV.status-container p.status-black {
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(180, 190, 210, 0.55);
    padding-left: 6px;
}

DIV.status-container p.status-red {
    background: rgba(231, 76, 60, 0.06);
    border-left: 2px solid rgba(231, 76, 60, 0.55);
    padding-left: 6px;
}

DIV.status-container p.status-win {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
    background: rgba(240, 193, 75, 0.1);
    border-left: 2px solid var(--gold);
    padding-left: 6px;
}

DIV.status-container p.status-alert {
    color: #ffc48a;
    background: rgba(255, 160, 60, 0.08);
    border-left: 2px solid rgba(255, 160, 60, 0.55);
    padding-left: 6px;
}

DIV.status-container p.status-undo {
    color: #9fd4ff;
    border-left: 2px solid rgba(93, 173, 226, 0.55);
    padding-left: 6px;
    font-style: italic;
}

DIV.status-container p.status-info {
    color: var(--text-muted);
}

SPAN.status-chip {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.35em;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

SPAN.status-chip.chip-black {
    background: radial-gradient(circle at 35% 30%, #5a5a66, #1a1a1e 60%, #0a0a0c);
}

SPAN.status-chip.chip-red {
    background: radial-gradient(circle at 35% 30%, #e74c3c, #c0392b 60%, #7b1e14);
}

SPAN.status-chip.chip-gold {
    background: radial-gradient(circle at 35% 30%, #ffe08a, var(--gold) 55%, #a8861e);
    box-shadow: 0 0 6px rgba(240, 193, 75, 0.55);
}

/* Highlight flash for new log lines */
DIV.status-container p.highlight {
    background: rgba(240, 193, 75, 0.12);
}

DIV.status-container p.highlight.highlight-end {
    background: transparent;
    transition: background 1.1s ease;
}

DIV.status-container p.status-black.highlight {
    background: rgba(200, 210, 240, 0.12);
}

DIV.status-container p.status-red.highlight {
    background: rgba(231, 76, 60, 0.16);
}

/* Neon theme VFX tints */
BODY.theme-neon DIV.fx-impact-ring.fx-black {
    border-color: rgba(0, 240, 255, 0.95);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.7);
}

BODY.theme-neon DIV.fx-impact-ring.fx-red {
    border-color: rgba(255, 45, 138, 0.95);
    box-shadow: 0 0 16px rgba(255, 45, 138, 0.7);
}

BODY.theme-neon DIV.doubles-banner {
    background: linear-gradient(180deg, #7af8ff 0%, #00f0ff 50%, #0090a0 100%);
    color: #041018;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.5);
}

BODY.theme-neon DIV.dice-container.dice-doubles {
    box-shadow:
        0 0 0 2px rgba(0, 240, 255, 0.55),
        0 0 28px rgba(0, 240, 255, 0.4);
}

/* High-contrast: keep callouts readable, tone down continuous glows */
BODY.high-contrast DIV.fx-hit-callout {
    background: #ff2200;
    color: #fff;
    border-color: #fff;
    text-shadow: none;
}

BODY.high-contrast DIV.game-container.board-turn-you DIV.board-wrap,
BODY.high-contrast DIV.game-container.board-turn-cpu DIV.board-wrap,
BODY.high-contrast DIV.game-container.board-turn-starting DIV.board-wrap {
    animation: none;
    box-shadow: 0 0 0 3px #fff;
}

@media (prefers-reduced-motion: reduce) {
    DIV.fx-impact-ring,
    SPAN.fx-spark,
    DIV.fx-hit-callout,
    DIV.doubles-banner,
    DIV.dice-container.dice-doubles,
    DIV.die.die-is-double.die-roll,
    DIV.game-container.board-turn-starting DIV.board-wrap {
        animation: none !important;
    }
}

/* ============================================================
   Move history strip · dice meter · starting ceremony · win stats
   ============================================================ */

/* --- Live move history --- */
DIV.move-history {
    width: 100%;
    padding: 8px 10px 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, #222833 0%, var(--panel) 100%);
    border: 1px solid var(--panel-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

DIV.move-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

SPAN.move-history-title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

SPAN.match-clock {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--gold);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(240, 193, 75, 0.1);
    border: 1px solid rgba(240, 193, 75, 0.28);
    min-width: 3.2em;
    text-align: center;
}

DIV.move-history-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

DIV.move-history-list::-webkit-scrollbar {
    height: 5px;
}

DIV.move-history-list::-webkit-scrollbar-thumb {
    background: #3a4050;
    border-radius: 4px;
}

DIV.move-history-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.75;
    padding: 4px 2px;
    font-style: italic;
}

DIV.history-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 4.5em;
    max-width: 11em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

DIV.history-chip.history-you {
    border-color: rgba(180, 190, 210, 0.35);
    background: linear-gradient(160deg, rgba(200, 210, 230, 0.1), rgba(255, 255, 255, 0.03));
}

DIV.history-chip.history-cpu {
    border-color: rgba(231, 76, 60, 0.4);
    background: linear-gradient(160deg, rgba(231, 76, 60, 0.12), rgba(255, 255, 255, 0.03));
}

DIV.history-chip.history-hit {
    box-shadow: 0 0 10px rgba(255, 100, 40, 0.2);
}

DIV.history-chip.history-latest {
    transform: scale(1.04);
    box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.45), 0 0 14px rgba(240, 193, 75, 0.18);
    animation: history-pop 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes history-pop {
    0% { opacity: 0; transform: scale(0.85) translateY(4px); }
    100% { opacity: 1; transform: scale(1.04) translateY(0); }
}

SPAN.history-who {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

DIV.history-chip.history-you SPAN.history-who {
    color: #c8d0e0;
}

DIV.history-chip.history-cpu SPAN.history-who {
    color: #ffb0a6;
}

SPAN.history-notation {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

DIV.history-chip.history-hit SPAN.history-notation {
    color: #ffc48a;
}

/* --- Dice remaining meter on turn banner --- */
DIV.dice-meter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    flex-shrink: 0;
}

DIV.dice-meter[hidden] {
    display: none !important;
}

SPAN.dice-meter-pill {
    min-width: 1.45em;
    height: 1.45em;
    padding: 0 5px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 55%, #c9a227 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 8px rgba(240, 193, 75, 0.25);
    animation: meter-pill-in 0.28s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@keyframes meter-pill-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

DIV.turn-banner.turn-cpu SPAN.dice-meter-pill,
DIV.turn-banner.turn-thinking SPAN.dice-meter-pill {
    background: linear-gradient(180deg, #ffb0a6 0%, #e74c3c 55%, #a93226 100%);
    color: #fff8f6;
}

/* --- Opening roll ceremony --- */
DIV.start-ceremony {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 10, 14, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

DIV.start-ceremony[hidden] {
    display: none !important;
}

DIV.start-ceremony.start-visible {
    opacity: 1;
    pointer-events: auto;
}

DIV.start-card {
    width: min(340px, 100%);
    padding: 20px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(165deg, #2a3040 0%, #1a1e28 55%, #141820 100%);
    border: 1px solid rgba(240, 193, 75, 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(240, 193, 75, 0.12);
    text-align: center;
    transform: scale(0.92) translateY(8px);
    transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}

DIV.start-ceremony.start-visible DIV.start-card {
    transform: scale(1) translateY(0);
}

DIV.start-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

DIV.start-dice-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
}

DIV.start-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

SPAN.start-side-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

SPAN.start-die-face {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 900;
    color: #fff;
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.25),
        0 10px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: start-die-toss 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

DIV.start-you SPAN.start-die-face {
    background: linear-gradient(145deg, #3a3a42 0%, #121216 55%, #0a0a0c 100%);
    border: 1px solid #0a0a0c;
    color: #ff8a7a;
}

DIV.start-cpu SPAN.start-die-face {
    background: linear-gradient(145deg, #e74c3c 0%, #a93226 55%, #7b1e14 100%);
    border: 1px solid #5c150e;
    color: #fff;
}

@keyframes start-die-toss {
    0% { transform: translateY(-16px) rotate(-18deg) scale(0.6); opacity: 0; }
    55% { transform: translateY(3px) rotate(6deg) scale(1.08); opacity: 1; }
    100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}

SPAN.start-die-face.start-winner {
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.25),
        0 0 24px rgba(240, 193, 75, 0.65),
        0 0 0 2px rgba(240, 193, 75, 0.7);
    transform: scale(1.08);
}

SPAN.start-die-face.start-loser {
    opacity: 0.55;
    filter: grayscale(0.35);
}

DIV.start-vs {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--gold);
}

DIV.start-result {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    min-height: 1.4em;
    color: var(--gold);
}

DIV.start-ceremony.start-draw DIV.start-result {
    color: #ffc48a;
}

DIV.start-ceremony.start-you-won DIV.start-result {
    color: #7dffa8;
}

DIV.start-ceremony.start-cpu-won DIV.start-result {
    color: #ffb0a6;
}

/* --- Win card stats grid --- */
DIV.win-stats {
    margin: 12px 0 4px;
    text-align: left;
}

DIV.win-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

DIV.win-stats-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 6px;
    align-items: center;
    font-size: 0.82rem;
}

DIV.win-stats-head {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 2px;
}

SPAN.win-stat-label {
    color: var(--text-muted);
    font-weight: 600;
}

SPAN.win-col-you {
    text-align: center;
    font-weight: 800;
    color: #d0d6e4;
}

SPAN.win-col-cpu {
    text-align: center;
    font-weight: 800;
    color: #ffb0a6;
}

DIV.win-stats-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

DIV.win-stats-meta strong {
    color: var(--gold);
    font-weight: 800;
    margin-right: 4px;
}

DIV.win-stats.win-stats-human DIV.win-stats-grid {
    border-color: rgba(46, 204, 113, 0.25);
    box-shadow: 0 0 16px rgba(46, 204, 113, 0.08);
}

DIV.win-stats.win-stats-cpu DIV.win-stats-grid {
    border-color: rgba(231, 76, 60, 0.25);
    box-shadow: 0 0 16px rgba(231, 76, 60, 0.08);
}

/* Theme tints */
BODY.theme-neon DIV.move-history {
    border-color: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 18px rgba(120, 40, 255, 0.1);
}

BODY.theme-neon SPAN.match-clock {
    color: #00f0ff;
    border-color: rgba(0, 240, 255, 0.35);
    background: rgba(0, 240, 255, 0.08);
}

BODY.theme-neon DIV.history-chip.history-latest {
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.5), 0 0 14px rgba(0, 240, 255, 0.2);
}

BODY.theme-neon DIV.start-card {
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 240, 255, 0.15);
}

BODY.theme-neon SPAN.dice-meter-pill {
    background: linear-gradient(180deg, #7af8ff 0%, #00f0ff 55%, #0090a0 100%);
    color: #041018;
}

BODY.high-contrast DIV.move-history,
BODY.high-contrast DIV.start-card {
    border-color: #fff;
    background: #000;
}

BODY.high-contrast SPAN.dice-meter-pill {
    border: 2px solid #000;
    outline: 1px solid #fff;
}

/* Mobile */
@media (max-width: 560px) {
    DIV.move-history {
        padding: 7px 8px 8px;
    }

    SPAN.history-notation {
        font-size: 0.72rem;
    }

    SPAN.start-die-face {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
        border-radius: 12px;
    }

    DIV.turn-banner {
        flex-wrap: wrap;
        gap: 6px;
    }

    DIV.dice-meter {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    DIV.history-chip.history-latest,
    SPAN.dice-meter-pill,
    SPAN.start-die-face,
    DIV.start-card {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Premium atmosphere — ambient dust, bear-off fireworks,
   floating move notation, stack depth, home tray fill
   ============================================================ */

/* --- Soft dust motes drifting over the felt --- */
DIV.board-mote-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    border-radius: 6px;
}

SPAN.board-mote {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(255, 245, 220, 0.55), rgba(240, 193, 75, 0.15) 60%, transparent 100%);
    box-shadow: 0 0 4px rgba(255, 230, 180, 0.25);
    opacity: 0;
    transform: scale(var(--mote-scale, 1));
    animation-name: mote-drift;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes mote-drift {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(var(--mote-scale, 1));
    }
    15% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.35;
        transform: translate(8px, -14px) scale(calc(var(--mote-scale, 1) * 1.1));
    }
    85% {
        opacity: 0.45;
    }
    100% {
        opacity: 0;
        transform: translate(-6px, -28px) scale(var(--mote-scale, 1));
    }
}

BODY.theme-neon SPAN.board-mote {
    background: radial-gradient(circle at 40% 35%, rgba(0, 240, 255, 0.5), rgba(180, 80, 255, 0.15) 60%, transparent 100%);
    box-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

BODY.theme-marble SPAN.board-mote {
    background: radial-gradient(circle at 40% 35%, rgba(220, 230, 245, 0.5), rgba(160, 180, 210, 0.12) 60%, transparent 100%);
}

/* --- Floating algebraic notation after each move --- */
DIV.fx-move-notation {
    position: absolute;
    z-index: 34;
    pointer-events: none;
    transform: translate(-50%, -50%);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe8a8 0%, var(--gold) 55%, #c9a227 100%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(240, 193, 75, 0.35);
    white-space: nowrap;
    animation: fx-notation-float 1.05s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

DIV.fx-move-notation.fx-black {
    background: linear-gradient(180deg, #e8ecf4 0%, #b0b8c8 55%, #7a8498 100%);
    color: #12141a;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(180, 200, 230, 0.35);
}

DIV.fx-move-notation.fx-red {
    background: linear-gradient(180deg, #ffb0a6 0%, #e74c3c 55%, #a93226 100%);
    color: #fff8f6;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(231, 76, 60, 0.4);
}

DIV.fx-move-notation.fx-hit {
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(255, 80, 40, 0.55);
}

DIV.fx-move-notation.fx-bearoff {
    background: linear-gradient(180deg, #fff3c0 0%, #f0c14b 45%, #e8a020 100%);
    color: #1a1208;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(240, 193, 75, 0.55);
}

@keyframes fx-notation-float {
    0% {
        opacity: 0;
        transform: translate(-50%, -20%) scale(0.6);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -90%) scale(1.08);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -130%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -170%) scale(0.92);
    }
}

/* --- Bear-off fireworks --- */
DIV.fx-bearoff-callout {
    position: absolute;
    z-index: 35;
    pointer-events: none;
    transform: translate(-50%, -50%);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: #1a1208;
    background: linear-gradient(180deg, #fff6c8 0%, #f0c14b 50%, #d4a017 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    padding: 4px 12px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.4),
        0 0 22px rgba(240, 193, 75, 0.55);
    animation: fx-bearoff-pop 0.95s cubic-bezier(0.2, 1.2, 0.35, 1) both;
    white-space: nowrap;
}

DIV.fx-bearoff-callout.fx-red {
    background: linear-gradient(180deg, #ffd0c8 0%, #ff8a7a 45%, #e74c3c 100%);
    color: #2a0a08;
}

@keyframes fx-bearoff-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -30%) scale(0.4) rotate(-6deg);
    }
    22% {
        opacity: 1;
        transform: translate(-50%, -110%) scale(1.18) rotate(2deg);
    }
    55% {
        opacity: 1;
        transform: translate(-50%, -140%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -190%) scale(0.9) rotate(0deg);
    }
}

SPAN.fx-bearoff-star {
    position: absolute;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    pointer-events: none;
    z-index: 33;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #f0c14b 50%, #c9a227 100%);
    box-shadow: 0 0 8px rgba(240, 193, 75, 0.85);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: fx-bearoff-star 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

SPAN.fx-bearoff-star.fx-red {
    background: radial-gradient(circle at 35% 30%, #fff 0%, #ff8a7a 50%, #c0392b 100%);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.85);
}

@keyframes fx-bearoff-star {
    0% {
        transform: translate(0, 0) scale(0.4) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--sx, 16px), var(--sy, -16px)) scale(0.15) rotate(120deg);
        opacity: 0;
    }
}

DIV.fx-impact-ring.fx-bearoff {
    border-color: rgba(240, 193, 75, 1);
    box-shadow: 0 0 22px rgba(240, 193, 75, 0.75);
    animation-duration: 0.55s;
}

SPAN.fx-spark.fx-bearoff {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #f0c14b 45%, #d4a017 100%);
    box-shadow: 0 0 8px rgba(240, 193, 75, 0.9);
}

DIV.checker.checker-fly-bearoff {
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(240, 193, 75, 0.55),
        inset 0 2px 3px rgba(255, 255, 255, 0.3);
    filter: brightness(1.15) saturate(1.1);
}

/* Home tray gold pulse when bearing off */
DIV.home.home-bear-pulse {
    animation: home-bear-pulse 0.7s ease;
    z-index: 5;
}

@keyframes home-bear-pulse {
    0% {
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
        filter: brightness(1);
    }
    40% {
        box-shadow:
            inset 0 0 0 2px rgba(240, 193, 75, 0.9),
            0 0 22px rgba(240, 193, 75, 0.55),
            inset 0 0 16px rgba(240, 193, 75, 0.2);
        filter: brightness(1.25);
    }
    100% {
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
        filter: brightness(1);
    }
}

/* Progressive home-tray fill based on data-count (0–15) */
DIV.home[data-count]:not([data-count="0"]) {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.35) calc(100% - min(100%, calc(var(--home-fill, 0) * 1%))),
            rgba(240, 193, 75, 0.12) calc(100% - min(100%, calc(var(--home-fill, 0) * 1%))),
            rgba(240, 193, 75, 0.22) 100%
        ) !important;
}

DIV.home[data-count="1"]  { --home-fill: 7; }
DIV.home[data-count="2"]  { --home-fill: 13; }
DIV.home[data-count="3"]  { --home-fill: 20; }
DIV.home[data-count="4"]  { --home-fill: 27; }
DIV.home[data-count="5"]  { --home-fill: 33; }
DIV.home[data-count="6"]  { --home-fill: 40; }
DIV.home[data-count="7"]  { --home-fill: 47; }
DIV.home[data-count="8"]  { --home-fill: 53; }
DIV.home[data-count="9"]  { --home-fill: 60; }
DIV.home[data-count="10"] { --home-fill: 67; }
DIV.home[data-count="11"] { --home-fill: 73; }
DIV.home[data-count="12"] { --home-fill: 80; }
DIV.home[data-count="13"] { --home-fill: 87; }
DIV.home[data-count="14"] { --home-fill: 93; }
DIV.home[data-count="15"] {
    --home-fill: 100;
    box-shadow:
        inset 0 0 12px rgba(240, 193, 75, 0.25),
        0 0 14px rgba(240, 193, 75, 0.2);
}

DIV.home[data-player="red"][data-count]:not([data-count="0"]) {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.35) calc(100% - min(100%, calc(var(--home-fill, 0) * 1%))),
            rgba(231, 76, 60, 0.14) calc(100% - min(100%, calc(var(--home-fill, 0) * 1%))),
            rgba(231, 76, 60, 0.28) 100%
        ) !important;
}

DIV.home[data-player="red"][data-count="15"] {
    box-shadow:
        inset 0 0 12px rgba(231, 76, 60, 0.3),
        0 0 14px rgba(231, 76, 60, 0.22);
}

/* Flight path gold tint on bear-off */
G.flight-path-group.flight-path-bearoff PATH.flight-path-glow {
    stroke: rgba(240, 193, 75, 0.5);
}

G.flight-path-group.flight-path-bearoff PATH.flight-path-core {
    stroke: rgba(255, 230, 140, 1);
}

/* --- Checker stack depth (layered shadows) --- */
DIV.checker.checker-stack[data-stack="1"] {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.22),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

DIV.checker.checker-stack[data-stack="2"] {
    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.4),
        inset 0 2px 3px rgba(255, 255, 255, 0.22),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

DIV.checker.checker-stack[data-stack="3"] {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(0, 0, 0, 0.08),
        inset 0 2px 3px rgba(255, 255, 255, 0.24),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

DIV.checker.checker-stack[data-stack="4"],
DIV.checker.checker-stack[data-stack="5"] {
    box-shadow:
        0 3px 5px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(0, 0, 0, 0.1),
        inset 0 2px 3px rgba(255, 255, 255, 0.26),
        inset 0 -2px 3px rgba(0, 0, 0, 0.38);
}

DIV.checker.checker-total {
    font-size: 0.72rem;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* --- Race delta pop when the gap changes --- */
SPAN.race-delta.race-delta-pop {
    animation: race-delta-pop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

SPAN.race-delta.race-delta-up {
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.45);
}

SPAN.race-delta.race-delta-down {
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.4);
}

@keyframes race-delta-pop {
    0% {
        transform: scale(0.85);
        filter: brightness(1);
    }
    40% {
        transform: scale(1.18);
        filter: brightness(1.25);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* Neon / marble notation tints */
BODY.theme-neon DIV.fx-move-notation {
    background: linear-gradient(180deg, #7af8ff 0%, #00f0ff 55%, #0090a0 100%);
    color: #041018;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}

BODY.theme-neon DIV.fx-bearoff-callout {
    background: linear-gradient(180deg, #c8fff6 0%, #00f0ff 50%, #0090a0 100%);
    color: #041018;
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.55);
}

BODY.theme-neon SPAN.fx-bearoff-star {
    background: radial-gradient(circle at 35% 30%, #fff 0%, #00f0ff 50%, #0090a0 100%);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.85);
}

BODY.theme-marble DIV.fx-move-notation.fx-black {
    background: linear-gradient(180deg, #f0f4f8 0%, #a0b0c8 55%, #6a7a90 100%);
}

/* High contrast: keep chips readable */
BODY.high-contrast DIV.fx-move-notation,
BODY.high-contrast DIV.fx-bearoff-callout {
    border: 2px solid #fff;
    text-shadow: none;
}

BODY.high-contrast SPAN.board-mote {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    SPAN.board-mote,
    DIV.fx-move-notation,
    DIV.fx-bearoff-callout,
    SPAN.fx-bearoff-star,
    DIV.home.home-bear-pulse,
    SPAN.race-delta.race-delta-pop {
        animation: none !important;
    }

    SPAN.board-mote {
        display: none;
    }
}

/* Slightly richer table lamp — warm vignette under the board pad */
DIV.board-wrap::after {
    content: "";
    position: absolute;
    inset: -4%;
    border-radius: 22px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 40% at 50% 0%, rgba(255, 220, 160, 0.07) 0%, transparent 70%);
    opacity: 0.9;
}

BODY.theme-neon DIV.board-wrap::after {
    background:
        radial-gradient(ellipse 55% 40% at 50% 0%, rgba(0, 240, 255, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 90% 20%, rgba(196, 77, 255, 0.06) 0%, transparent 60%);
}

/* ============================================================
   THIS RUN — Move reactions · Hit combo · Coach steps · Casino
   · Keyboard shortcuts · Point-label toggle
   ============================================================ */

/* --- Reaction chips (HIT / OFF / ENTER / pips) --- */
DIV.reaction-layer {
    position: fixed;
    left: 50%;
    top: 18%;
    transform: translateX(-50%);
    z-index: 90;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(92vw, 360px);
}

DIV.reaction-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1208;
    background: linear-gradient(180deg, #ffe9a8 0%, #f0c14b 55%, #c9a227 100%);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(240, 193, 75, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: reaction-pop 1.55s cubic-bezier(0.22, 1.2, 0.36, 1) both;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

DIV.reaction-chip.reaction-hit {
    background: linear-gradient(180deg, #ff8a7a 0%, #e74c3c 50%, #a93226 100%);
    color: #fff8f6;
    box-shadow:
        0 6px 22px rgba(192, 57, 43, 0.45),
        0 0 22px rgba(231, 76, 60, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

DIV.reaction-chip.reaction-combo {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    padding: 10px 20px;
    box-shadow:
        0 8px 28px rgba(192, 57, 43, 0.55),
        0 0 32px rgba(240, 193, 75, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

DIV.reaction-chip.reaction-off {
    background: linear-gradient(180deg, #fff6c8 0%, #f0c14b 45%, #d4a017 100%);
    color: #2a1a08;
}

DIV.reaction-chip.reaction-enter {
    background: linear-gradient(180deg, #a8f0ff 0%, #40e0d0 50%, #1aa6a0 100%);
    color: #06201e;
    box-shadow:
        0 6px 20px rgba(26, 160, 150, 0.4),
        0 0 18px rgba(64, 224, 208, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

DIV.reaction-chip.reaction-pips {
    background: linear-gradient(180deg, #b8f5c8 0%, #2ecc71 55%, #1e8e4a 100%);
    color: #062016;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

DIV.reaction-chip.reaction-notation {
    background: linear-gradient(180deg, #2a3140 0%, #1c222e 100%);
    color: #f0c14b;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: none;
    border: 1px solid rgba(240, 193, 75, 0.35);
    text-shadow: none;
}

DIV.reaction-chip.reaction-cpu {
    opacity: 0.92;
    filter: saturate(0.95);
}

@keyframes reaction-pop {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.55);
    }
    18% {
        opacity: 1;
        transform: translateY(0) scale(1.12);
    }
    32% {
        transform: translateY(0) scale(1);
    }
    75% {
        opacity: 1;
        transform: translateY(-6px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-28px) scale(0.92);
    }
}

/* Board edge flash on hit / bear-off */
DIV.game-container.board-hit-flash DIV.board-wrap {
    animation: board-hit-rim 0.48s ease;
}

DIV.game-container.board-bearoff-flash DIV.board-wrap {
    animation: board-bearoff-rim 0.52s ease;
}

@keyframes board-hit-rim {
    0%, 100% { filter: brightness(1); }
    35% {
        filter: brightness(1.12);
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.55), 0 0 28px rgba(231, 76, 60, 0.35);
    }
}

@keyframes board-bearoff-rim {
    0%, 100% { filter: brightness(1); }
    40% {
        filter: brightness(1.1);
        box-shadow: 0 0 0 3px rgba(240, 193, 75, 0.6), 0 0 28px rgba(240, 193, 75, 0.35);
    }
}

/* --- Hit combo badge under player meta --- */
SPAN.hit-combo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    min-width: 2.1em;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff8f6;
    background: linear-gradient(180deg, #ff7a6a 0%, #c0392b 100%);
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 200, 180, 0.35);
}

SPAN.hit-combo.combo-pop {
    animation: combo-pop 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}

@keyframes combo-pop {
    0% { transform: scale(0.7); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* --- Coach step number badges --- */
SPAN.suggest-step-badge {
    position: absolute;
    z-index: 12;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    color: #042018;
    background: linear-gradient(180deg, #a8fff0 0%, #40e0d0 55%, #1aa6a0 100%);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(64, 224, 208, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: suggest-step-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

SPAN.suggest-step-badge.suggest-step-src {
    top: 3px;
    left: 3px;
}

SPAN.suggest-step-badge.suggest-step-dst {
    top: 3px;
    right: 3px;
    left: auto;
    background: linear-gradient(180deg, #fff6c8 0%, #f0c14b 55%, #c9a227 100%);
    color: #2a1a08;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(240, 193, 75, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

SPAN.suggest-step-badge.suggest-step-first {
    outline: 2px solid rgba(255, 255, 255, 0.55);
}

DIV.checker-container-bottom SPAN.suggest-step-badge.suggest-step-src,
DIV.checker-container-bottom SPAN.suggest-step-badge.suggest-step-dst {
    /* bottom row is rotated 180° — flip badges so numbers stay upright */
    transform: rotate(180deg);
}

DIV.home SPAN.suggest-step-badge.suggest-step-dst {
    top: auto;
    bottom: 4px;
    right: 50%;
    transform: translateX(50%);
}

@keyframes suggest-step-in {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

DIV.checker-container-bottom SPAN.suggest-step-badge.suggest-step-src {
    animation-name: suggest-step-in-rot;
}

DIV.checker-container-bottom SPAN.suggest-step-badge.suggest-step-dst {
    animation-name: suggest-step-in-rot;
}

@keyframes suggest-step-in-rot {
    0% {
        opacity: 0;
        transform: rotate(180deg) scale(0.4);
    }
    100% {
        opacity: 1;
        transform: rotate(180deg) scale(1);
    }
}

/* --- Point labels: even brighter / larger when Labels toggle is on --- */
DIV.board.show-point-labels DIV.point-red[data-point]::after,
DIV.board.show-point-labels DIV.point-black[data-point]::after,
DIV.game-container.show-point-labels DIV.point-red[data-point]::after,
DIV.game-container.show-point-labels DIV.point-black[data-point]::after {
    color: #fffef5;
    font-size: clamp(0.88rem, calc(var(--point-w) * 0.34), 1.12rem);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.98), 0 0 14px rgba(240, 193, 75, 0.55);
    font-weight: 800;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(240, 193, 75, 0.6);
    border-radius: 6px;
    padding: 3px 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(240, 193, 75, 0.15);
}

BUTTON.tool-btn.tool-btn-labels.is-active {
    background: linear-gradient(180deg, rgba(240, 193, 75, 0.28), rgba(240, 193, 75, 0.12));
    border-color: rgba(240, 193, 75, 0.55);
    color: var(--gold);
}

/* --- Keyboard shortcuts modal --- */
DIV.keys-card .keys-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

DIV.keys-card .keys-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.35;
}

DIV.keys-card kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 3px 7px;
    border-radius: 6px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1208;
    background: linear-gradient(180deg, #f5e6c8 0%, #d4b87a 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    text-align: center;
}

DIV.keys-card .keys-tip {
    margin: 14px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* --- Casino theme (brass + classic green felt) --- */
BODY.theme-casino {
    --wood-dark: #1a3d28;
    --wood-mid: #2a5a3c;
    --wood-light: #3d7a52;
    --wood-frame: #3a2a12;
    --felt: #0d3d24;
    --point-dark: #0a2e1a;
    --point-light: #e8d5a3;
    --point-dark-tip: #061a10;
    --point-light-tip: #f5e8c0;
    --surface: #0a1210;
    --panel: #142018;
    --panel-border: #2a4030;
    --gold: #e8c56a;
    --black-checker: #141418;
    --red-checker: #b83228;
    --red-highlight: #e05548;
    --red-rim: #6a1812;
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, #1a3a28 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 100%, #1a2818 0%, transparent 45%),
        var(--surface);
}

BODY.theme-casino DIV.board {
    border-color: #4a3518;
    background:
        linear-gradient(145deg, rgba(255, 220, 140, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #5a4020 0%, #3a2a12 45%, #2a1e0c 100%);
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(232, 197, 106, 0.28),
        inset 0 0 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(232, 197, 106, 0.12);
}

BODY.theme-casino DIV.board::before {
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 80, 48, 0.35) 0%, transparent 70%),
        linear-gradient(180deg, rgba(10, 55, 32, 0.95), rgba(6, 36, 20, 0.98));
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(232, 197, 106, 0.08);
}

BODY.theme-casino DIV.bar {
    background:
        linear-gradient(90deg, #2a1e0c 0%, #6a4e22 40%, #5a4018 60%, #2a1e0c 100%);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55), 0 0 8px rgba(232, 197, 106, 0.12);
}

BODY.theme-casino DIV.point-red::before {
    opacity: 0.95;
}

BODY.theme-casino DIV.checker.black {
    background:
        radial-gradient(circle at 32% 28%, #4a4a55 0%, #141418 48%, #050508 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.18),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(232, 197, 106, 0.15);
}

BODY.theme-casino DIV.checker.red {
    background:
        radial-gradient(circle at 32% 28%, #f08070 0%, #b83228 45%, #6a1812 100%);
}

BODY.theme-casino DIV.match-header,
BODY.theme-casino DIV.side-container,
BODY.theme-casino DIV.race-panel,
BODY.theme-casino DIV.move-history {
    background: linear-gradient(180deg, #1a2e22 0%, #122018 100%);
    border-color: #2a4030;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(232, 197, 106, 0.08);
}

BODY.theme-casino DIV.turn-banner.turn-you {
    background: linear-gradient(90deg, rgba(232, 197, 106, 0.18), rgba(46, 204, 113, 0.12));
    border-color: rgba(232, 197, 106, 0.4);
}

BODY.theme-casino DIV.turn-banner.turn-thinking,
BODY.theme-casino DIV.turn-banner.turn-cpu {
    background: linear-gradient(90deg, rgba(184, 50, 40, 0.2), rgba(232, 197, 106, 0.08));
    border-color: rgba(184, 50, 40, 0.4);
}

BODY.theme-casino DIV.board-wrap {
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(13, 61, 36, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, #0c1a12 0%, #0a1410 100%);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(232, 197, 106, 0.1);
}

BODY.theme-casino DIV.checker-container.valid-source {
    box-shadow: inset 0 0 0 2px rgba(46, 204, 113, 0.65), 0 0 14px rgba(46, 204, 113, 0.3);
}

BODY.theme-casino DIV.checker-container.valid-destination {
    box-shadow:
        inset 0 0 0 3px rgba(80, 220, 120, 0.95),
        0 0 0 2px rgba(40, 160, 80, 0.55),
        0 0 20px rgba(80, 220, 120, 0.5);
    background-color: rgba(60, 180, 90, 0.18) !important;
}

BODY.theme-casino BUTTON.tool-btn:hover,
BODY.theme-casino BUTTON.tool-btn:focus-visible,
BODY.theme-casino BUTTON.tool-btn.is-active {
    border-color: rgba(232, 197, 106, 0.55);
    color: var(--gold);
}

BODY.theme-casino DIV.dice-container.active {
    background: rgba(232, 197, 106, 0.1);
    box-shadow: 0 0 0 1px rgba(232, 197, 106, 0.4), 0 0 20px rgba(232, 197, 106, 0.15);
}

BODY.theme-casino SPAN.dice-meter-pill {
    background: linear-gradient(180deg, #f0d78a 0%, #c9a227 100%);
    color: #1a1208;
}

BODY.theme-casino DIV.history-chip.history-latest {
    box-shadow: 0 0 0 1px rgba(232, 197, 106, 0.45);
}

BODY.theme-casino DIV.start-card {
    border-color: rgba(232, 197, 106, 0.35);
    background: linear-gradient(180deg, #1a2e22 0%, #0e1a14 100%);
}

BODY.theme-casino SPAN.board-mote {
    background: rgba(232, 197, 106, 0.35);
}

BODY.high-contrast.theme-casino {
    --text: #fff;
    --text-muted: #ddd;
    --gold: #ffe566;
}

/* Toolbar wraps more buttons on narrow screens */
DIV.game-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 560px) {
    DIV.reaction-layer {
        top: 12%;
    }

    DIV.reaction-chip {
        font-size: 0.82rem;
        padding: 6px 12px;
    }

    SPAN.suggest-step-badge {
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    DIV.reaction-chip,
    SPAN.hit-combo.combo-pop,
    SPAN.suggest-step-badge,
    DIV.game-container.board-hit-flash DIV.board-wrap,
    DIV.game-container.board-bearoff-flash DIV.board-wrap {
        animation: none !important;
    }

    DIV.reaction-chip {
        opacity: 1;
    }
}

/* ============================================================
   THIS RUN — Destination preview arcs · Hit reticles · Threat
   radar · Bar prison · Checker lift · Focus mode (CPU thinking)
   ============================================================ */

/* --- Dashed preview paths (inspect / select source) --- */
G.preview-path-group {
    pointer-events: none;
    opacity: 0.92;
    animation: preview-path-in 0.28s ease both;
}

G.preview-path-group PATH.preview-path-glow {
    fill: none;
    stroke: rgba(240, 193, 75, 0.28);
    stroke-width: 7;
    stroke-linecap: round;
    filter: blur(1.5px);
}

G.preview-path-group PATH.preview-path-core {
    fill: none;
    stroke: rgba(255, 220, 120, 0.85);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 5 6;
    animation: preview-dash 0.9s linear infinite;
}

G.preview-path-group CIRCLE.preview-path-end {
    fill: rgba(240, 193, 75, 0.95);
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1;
    filter: drop-shadow(0 0 4px rgba(240, 193, 75, 0.7));
}

G.preview-path-group.preview-path-hit PATH.preview-path-glow {
    stroke: rgba(231, 76, 60, 0.4);
}

G.preview-path-group.preview-path-hit PATH.preview-path-core {
    stroke: rgba(255, 120, 100, 0.95);
}

G.preview-path-group.preview-path-hit CIRCLE.preview-path-end {
    fill: rgba(231, 76, 60, 0.95);
    filter: drop-shadow(0 0 6px rgba(231, 76, 60, 0.85));
}

G.preview-path-group.preview-path-bearoff PATH.preview-path-glow {
    stroke: rgba(240, 193, 75, 0.4);
}

G.preview-path-group.preview-path-bearoff PATH.preview-path-core {
    stroke: rgba(255, 236, 160, 1);
    stroke-dasharray: 3 5;
}

@keyframes preview-dash {
    to { stroke-dashoffset: -22; }
}

@keyframes preview-path-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.92;
    }
}

BODY.theme-neon G.preview-path-group PATH.preview-path-glow {
    stroke: rgba(0, 240, 255, 0.3);
}

BODY.theme-neon G.preview-path-group PATH.preview-path-core {
    stroke: rgba(120, 255, 255, 0.9);
}

BODY.theme-neon G.preview-path-group CIRCLE.preview-path-end {
    fill: rgba(0, 240, 255, 0.95);
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.8));
}

BODY.theme-neon G.preview-path-group.preview-path-hit PATH.preview-path-core {
    stroke: rgba(255, 80, 180, 0.95);
}

BODY.theme-casino G.preview-path-group PATH.preview-path-core {
    stroke: rgba(232, 197, 106, 0.95);
}

/* --- Hit-target reticle on destinations that capture --- */
DIV.checker-container.hit-target {
    box-shadow:
        inset 0 0 0 2px rgba(231, 76, 60, 0.75),
        0 0 18px rgba(231, 76, 60, 0.4) !important;
    animation: hit-target-pulse 1s ease-in-out infinite;
}

SPAN.hit-reticle {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    z-index: 14;
    pointer-events: none;
    animation: hit-reticle-spin 2.4s linear infinite;
}

SPAN.hit-reticle-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 100, 80, 0.9);
    box-shadow:
        0 0 10px rgba(231, 76, 60, 0.65),
        inset 0 0 6px rgba(231, 76, 60, 0.25);
}

SPAN.hit-reticle-cross {
    position: absolute;
    inset: 0;
}

SPAN.hit-reticle-cross::before,
SPAN.hit-reticle-cross::after {
    content: "";
    position: absolute;
    background: rgba(255, 140, 120, 0.95);
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.7);
}

SPAN.hit-reticle-cross::before {
    left: 50%;
    top: 3px;
    bottom: 3px;
    width: 1.5px;
    margin-left: -0.75px;
}

SPAN.hit-reticle-cross::after {
    top: 50%;
    left: 3px;
    right: 3px;
    height: 1.5px;
    margin-top: -0.75px;
}

DIV.checker-container-bottom SPAN.hit-reticle {
    /* keep upright on rotated bottom row */
    transform: rotate(180deg);
    animation-name: hit-reticle-spin-bot;
}

@keyframes hit-reticle-spin {
    to { transform: rotate(360deg); }
}

@keyframes hit-reticle-spin-bot {
    to { transform: rotate(540deg); }
}

@keyframes hit-target-pulse {
    0%, 100% { filter: brightness(1.12) saturate(1.15); }
    50% { filter: brightness(1.28) saturate(1.35); }
}

SPAN.die-hint-badge.die-hint-hit {
    background: linear-gradient(180deg, #ff8a7a 0%, #e74c3c 55%, #a93226 100%);
    color: #fff8f6;
    box-shadow:
        0 2px 8px rgba(192, 57, 43, 0.5),
        0 0 10px rgba(231, 76, 60, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* --- Threat radar: blots hittable with remaining dice --- */
DIV.checker-container.threat-blot {
    box-shadow:
        inset 0 0 0 1.5px rgba(231, 76, 60, 0.45),
        0 0 10px rgba(231, 76, 60, 0.22);
}

SPAN.threat-badge {
    position: absolute;
    top: 4px;
    right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 11;
    pointer-events: none;
    background: radial-gradient(circle at 35% 30%, #ffb0a0 0%, #e74c3c 55%, #8b1a12 100%);
    box-shadow:
        0 0 0 1.5px rgba(255, 220, 200, 0.55),
        0 0 10px rgba(231, 76, 60, 0.75);
    animation: threat-badge-pulse 1.2s ease-in-out infinite;
}

DIV.checker-container-bottom SPAN.threat-badge {
    top: auto;
    bottom: 4px;
    /* bottom row rotated — keep badge readable */
    transform: rotate(180deg);
}

@keyframes threat-badge-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

DIV.checker-container-bottom SPAN.threat-badge {
    animation-name: threat-badge-pulse-bot;
}

@keyframes threat-badge-pulse-bot {
    0%, 100% {
        transform: rotate(180deg) scale(1);
        opacity: 0.95;
    }
    50% {
        transform: rotate(180deg) scale(1.25);
        opacity: 1;
    }
}

/* Brief scan line across the felt when threats refresh */
DIV.board.threat-radar-sweep::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: 28%;
    z-index: 2;
    pointer-events: none;
    border-radius: 4px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(231, 76, 60, 0.08) 40%,
        rgba(231, 76, 60, 0.16) 50%,
        rgba(231, 76, 60, 0.08) 60%,
        transparent 100%
    );
    animation: threat-scan 0.85s ease-out both;
}

@keyframes threat-scan {
    0% {
        top: 8%;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        top: 62%;
        opacity: 0;
    }
}

BODY.theme-neon DIV.checker-container.threat-blot {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 45, 138, 0.55),
        0 0 12px rgba(255, 45, 138, 0.3);
}

BODY.theme-neon SPAN.threat-badge {
    background: radial-gradient(circle at 35% 30%, #ffb0e0 0%, #ff2d8a 55%, #a01050 100%);
    box-shadow:
        0 0 0 1.5px rgba(255, 200, 230, 0.5),
        0 0 12px rgba(255, 45, 138, 0.8);
}

/* --- Bar prison: iron bars when checkers are held --- */
DIV.bar[data-count]:not([data-count="0"]) {
    position: relative;
    box-shadow:
        inset 0 0 14px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(240, 193, 75, 0.12);
}

DIV.bar[data-count]:not([data-count="0"])::after {
    content: "";
    position: absolute;
    inset: 4px 3px;
    z-index: 2;
    pointer-events: none;
    border-radius: 2px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 5px,
            rgba(180, 160, 120, 0.22) 5px,
            rgba(180, 160, 120, 0.32) 7px
        );
    box-shadow:
        inset 0 0 0 1px rgba(200, 180, 140, 0.18),
        inset 0 8px 12px rgba(0, 0, 0, 0.25);
    mix-blend-mode: soft-light;
}

DIV.bar[data-count]:not([data-count="0"]) > * {
    position: relative;
    z-index: 3;
}

DIV.bar.hit-flash {
    animation: bar-prison-flash 0.85s ease;
}

@keyframes bar-prison-flash {
    0%, 100% {
        filter: brightness(1);
        box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
    }
    25% {
        filter: brightness(1.5);
        box-shadow:
            inset 0 0 20px rgba(231, 76, 60, 0.65),
            0 0 28px rgba(231, 76, 60, 0.65),
            inset 0 0 0 3px rgba(255, 90, 70, 0.9);
    }
    55% {
        filter: brightness(1.25);
        box-shadow:
            inset 0 0 14px rgba(231, 76, 60, 0.4),
            0 0 16px rgba(231, 76, 60, 0.35);
    }
}

/* Must re-enter from bar: only the bar is a legal source — make it scream */
DIV.bar.must-enter,
DIV.bar.valid-source.must-enter {
    box-shadow:
        inset 0 0 0 3px rgba(240, 193, 75, 0.95),
        0 0 0 3px rgba(46, 204, 113, 0.7),
        0 0 28px rgba(240, 193, 75, 0.55),
        0 0 18px rgba(46, 204, 113, 0.45) !important;
    filter: brightness(1.28) saturate(1.3);
    animation: must-enter-pulse 1s ease-in-out infinite;
    z-index: 4;
}

DIV.board.must-enter-bar {
    /* Soft vignette so attention stays on the bar */
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(240, 193, 75, 0.35),
        inset 0 0 50px rgba(0, 0, 0, 0.35);
}

DIV.game-container.must-enter-cue DIV.board-wrap {
    animation: must-enter-board-flash 0.85s ease;
}

@keyframes must-enter-pulse {
    0%, 100% {
        filter: brightness(1.2) saturate(1.25);
        box-shadow:
            inset 0 0 0 3px rgba(240, 193, 75, 0.85),
            0 0 0 2px rgba(46, 204, 113, 0.55),
            0 0 18px rgba(240, 193, 75, 0.4);
    }
    50% {
        filter: brightness(1.38) saturate(1.4);
        box-shadow:
            inset 0 0 0 3px #f0c14b,
            0 0 0 3px rgba(46, 204, 113, 0.85),
            0 0 32px rgba(240, 193, 75, 0.65);
    }
}

@keyframes must-enter-board-flash {
    0%, 100% { filter: brightness(1); }
    35% { filter: brightness(1.08) saturate(1.1); }
}

BODY.theme-neon DIV.bar[data-count]:not([data-count="0"])::after {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 5px,
            rgba(0, 240, 255, 0.18) 5px,
            rgba(0, 240, 255, 0.28) 7px
        );
}

BODY.theme-casino DIV.bar[data-count]:not([data-count="0"])::after {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 5px,
            rgba(232, 197, 106, 0.2) 5px,
            rgba(232, 197, 106, 0.32) 7px
        );
}

/* --- Lift top checker on valid sources (tactile affordance) --- */
DIV.checker-container.valid-source > DIV.checker:last-child,
DIV.checker-container.valid-source > DIV.checker.checker-total {
    transform: translateY(-3px) scale(1.06);
    box-shadow:
        0 6px 10px rgba(0, 0, 0, 0.45),
        0 0 10px rgba(46, 204, 113, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.28),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
    z-index: 4;
}

DIV.checker-container.valid-source:hover > DIV.checker:last-child,
DIV.checker-container.valid-source:hover > DIV.checker.checker-total,
DIV.checker-container.valid-source.selected > DIV.checker:last-child,
DIV.checker-container.valid-source.selected > DIV.checker.checker-total {
    transform: translateY(-5px) scale(1.1);
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.5),
        0 0 14px rgba(46, 204, 113, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

/* Bottom row is rotated 180° — flip lift direction so pieces rise off the point tip */
DIV.checker-container-bottom.valid-source > DIV.checker:last-child,
DIV.checker-container-bottom.valid-source > DIV.checker.checker-total {
    transform: translateY(-3px) scale(1.06);
}

DIV.checker-container-bottom.valid-source:hover > DIV.checker:last-child,
DIV.checker-container-bottom.valid-source:hover > DIV.checker.checker-total,
DIV.checker-container-bottom.valid-source.selected > DIV.checker:last-child,
DIV.checker-container-bottom.valid-source.selected > DIV.checker.checker-total {
    transform: translateY(-5px) scale(1.1);
}

/* --- Focus mode: dim chrome while computer thinks AND while AI flights play --- */
DIV.game-container.focus-cpu DIV.match-header,
DIV.game-container.focus-cpu DIV.race-panel,
DIV.game-container.focus-cpu DIV.power-panel,
DIV.game-container.focus-cpu DIV.move-history,
DIV.game-container.focus-cpu DIV.game-toolbar,
DIV.game-container.focus-cpu P.play-hint {
    opacity: 0.42;
    filter: saturate(0.7);
    transition: opacity 0.35s ease, filter 0.35s ease;
    pointer-events: none;
}

/* Soft block of point taps while AI owns the board (belt-and-suspenders with computerBusy) */
DIV.game-container.focus-cpu DIV.board > DIV.checker-container {
    pointer-events: none;
}
DIV.game-container.focus-cpu DIV.board > DIV.checker-container.cpu-move {
    pointer-events: none;
}

DIV.game-container.focus-cpu DIV.board-wrap {
    filter: brightness(1.04);
    transition: filter 0.35s ease;
}

DIV.game-container.focus-cpu DIV.side-container {
    box-shadow:
        0 0 0 1px rgba(231, 76, 60, 0.35),
        0 0 24px rgba(231, 76, 60, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

DIV.game-container.focus-cpu DIV.turn-banner.turn-thinking {
    box-shadow:
        0 0 0 1px rgba(231, 76, 60, 0.45),
        0 0 22px rgba(231, 76, 60, 0.25);
}

DIV.game-container:not(.focus-cpu) DIV.match-header,
DIV.game-container:not(.focus-cpu) DIV.race-panel,
DIV.game-container:not(.focus-cpu) DIV.move-history,
DIV.game-container:not(.focus-cpu) DIV.game-toolbar,
DIV.game-container:not(.focus-cpu) P.play-hint {
    transition: opacity 0.35s ease, filter 0.35s ease;
}

/* High contrast: stronger threat / reticle */
BODY.high-contrast DIV.checker-container.threat-blot {
    box-shadow: inset 0 0 0 3px #ff4444, 0 0 0 1px #fff;
}

BODY.high-contrast SPAN.threat-badge {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
}

BODY.high-contrast SPAN.hit-reticle-ring {
    border-width: 3px;
    border-color: #ff3333;
}

BODY.high-contrast G.preview-path-group PATH.preview-path-core {
    stroke: #ffe566;
    stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
    G.preview-path-group PATH.preview-path-core,
    SPAN.hit-reticle,
    SPAN.threat-badge,
    DIV.checker-container.hit-target,
    DIV.board.threat-radar-sweep::after {
        animation: none !important;
    }

    DIV.checker-container.valid-source > DIV.checker:last-child,
    DIV.checker-container.valid-source > DIV.checker.checker-total {
        transform: none;
    }
}

@media (max-width: 560px) {
    SPAN.hit-reticle {
        width: 18px;
        height: 18px;
        margin-left: -9px;
        margin-top: -9px;
    }

    SPAN.threat-badge {
        width: 9px;
        height: 9px;
    }

    G.preview-path-group PATH.preview-path-glow {
        stroke-width: 5;
    }
}

/* ============================================================
   Tactical vision v2 — landing ghosts, primes, exposed blots,
   illegal-click shake, bearing-ready home glow
   ============================================================ */

/* --- Landing ghost checkers on legal destinations --- */
DIV.landing-ghost {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: calc(var(--checker-size) * 0.92);
    height: calc(var(--checker-size) * 0.92);
    margin-left: calc(var(--checker-size) * -0.46);
    border-radius: 50%;
    z-index: 9;
    pointer-events: none;
    opacity: 0.42;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 1.5px rgba(240, 193, 75, 0.55),
        0 0 14px rgba(240, 193, 75, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.35);
    animation: landing-ghost-bob 1.1s ease-in-out infinite;
    filter: saturate(1.1);
}

DIV.landing-ghost.landing-ghost-black {
    background:
        radial-gradient(circle at 32% 28%, #5a5a66 0%, var(--black-checker) 45%, var(--black-rim) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

DIV.landing-ghost.landing-ghost-red {
    background:
        radial-gradient(circle at 32% 28%, #f07167 0%, var(--red-checker) 42%, var(--red-rim) 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

DIV.checker-container-bottom DIV.landing-ghost {
    bottom: auto;
    top: 6px;
    /* counter-rotate so pip text stays upright */
    transform: rotate(180deg);
    animation-name: landing-ghost-bob-bot;
}

DIV.landing-ghost.landing-ghost-hit {
    opacity: 0.55;
    box-shadow:
        0 0 0 2px rgba(231, 76, 60, 0.7),
        0 0 16px rgba(231, 76, 60, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.4);
    animation-duration: 0.75s;
}

DIV.landing-ghost.landing-ghost-off {
    opacity: 0.5;
    box-shadow:
        0 0 0 2px rgba(46, 204, 113, 0.65),
        0 0 16px rgba(46, 204, 113, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.35);
}

SPAN.landing-ghost-pip {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

DIV.landing-ghost.landing-ghost-black SPAN.landing-ghost-pip {
    color: #f0c14b;
}

DIV.landing-ghost.landing-ghost-red SPAN.landing-ghost-pip {
    color: #fff0e8;
}

DIV.landing-ghost.landing-ghost-off SPAN.landing-ghost-pip {
    font-size: 0.48rem;
    color: #b8f5c8;
}

@keyframes landing-ghost-bob {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.38; }
    50% { transform: translateY(-3px) scale(1.06); opacity: 0.55; }
}

@keyframes landing-ghost-bob-bot {
    0%, 100% { transform: rotate(180deg) translateY(0) scale(1); opacity: 0.38; }
    50% { transform: rotate(180deg) translateY(-3px) scale(1.06); opacity: 0.55; }
}

DIV.checker-container.has-landing-ghost {
    box-shadow:
        inset 0 0 0 1.5px rgba(240, 193, 75, 0.35),
        0 0 12px rgba(240, 193, 75, 0.15);
}

DIV.home.has-landing-ghost {
    box-shadow:
        inset 0 0 0 2px rgba(46, 204, 113, 0.4),
        0 0 14px rgba(46, 204, 113, 0.2);
}

/* Home tray ghosts sit centered */
DIV.home DIV.landing-ghost {
    left: 50%;
    bottom: 50%;
    margin-bottom: calc(var(--checker-size) * -0.46);
    animation-name: landing-ghost-pulse-home;
}

@keyframes landing-ghost-pulse-home {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.12); opacity: 0.62; }
}

/* --- Prime / blockade point styling --- */
DIV.checker-container.prime-point {
    position: relative;
}

DIV.checker-container.prime-point::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 4px;
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.75;
}

DIV.checker-container-bottom.prime-point::after {
    bottom: auto;
    top: 2px;
}

DIV.checker-container.prime-black::after {
    background: linear-gradient(90deg, transparent, rgba(240, 193, 75, 0.55), transparent);
    box-shadow: 0 0 8px rgba(240, 193, 75, 0.35);
}

DIV.checker-container.prime-red::after {
    background: linear-gradient(90deg, transparent, rgba(231, 76, 60, 0.55), transparent);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.35);
}

DIV.checker-container.prime-strong::after {
    height: 5px;
    opacity: 0.9;
}

DIV.checker-container.prime-full {
    box-shadow:
        inset 0 0 12px rgba(240, 193, 75, 0.12),
        0 0 10px rgba(240, 193, 75, 0.12);
}

DIV.checker-container.prime-full.prime-red {
    box-shadow:
        inset 0 0 12px rgba(231, 76, 60, 0.14),
        0 0 10px rgba(231, 76, 60, 0.14);
}

DIV.checker-container.prime-full::after {
    height: 6px;
    opacity: 1;
    animation: prime-full-glow 1.6s ease-in-out infinite;
}

@keyframes prime-full-glow {
    0%, 100% { filter: brightness(1); opacity: 0.85; }
    50% { filter: brightness(1.35); opacity: 1; }
}

SPAN.prime-chip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    pointer-events: none;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    animation: prime-chip-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

DIV.checker-container-bottom SPAN.prime-chip {
    transform: translate(-50%, -50%) rotate(180deg);
}

SPAN.prime-chip-black {
    background: linear-gradient(180deg, #3a3a42 0%, #1a1a1e 100%);
    color: #f0c14b;
    border: 1px solid rgba(240, 193, 75, 0.55);
}

SPAN.prime-chip-red {
    background: linear-gradient(180deg, #e74c3c 0%, #8b1a12 100%);
    color: #fff5f0;
    border: 1px solid rgba(255, 200, 180, 0.4);
}

SPAN.prime-chip-full {
    font-size: 0.48rem;
    letter-spacing: 0.1em;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(240, 193, 75, 0.45);
}

@keyframes prime-chip-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

DIV.checker-container-bottom SPAN.prime-chip {
    animation-name: prime-chip-pop-bot;
}

@keyframes prime-chip-pop-bot {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(180deg) scale(1); }
}

/* --- Exposed blot (human defensive warning) --- */
DIV.checker-container.exposed-blot {
    box-shadow:
        inset 0 0 0 1.5px rgba(243, 156, 18, 0.45),
        0 0 10px rgba(243, 156, 18, 0.18);
}

SPAN.exposed-badge {
    position: absolute;
    top: 4px;
    left: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    z-index: 11;
    pointer-events: none;
    background: radial-gradient(circle at 35% 30%, #ffe08a 0%, #f39c12 55%, #a65c00 100%);
    box-shadow:
        0 0 0 1.5px rgba(255, 240, 200, 0.55),
        0 0 10px rgba(243, 156, 18, 0.7);
    animation: exposed-badge-pulse 1.4s ease-in-out infinite;
}

DIV.checker-container-bottom SPAN.exposed-badge {
    top: auto;
    bottom: 4px;
    transform: rotate(180deg);
    animation-name: exposed-badge-pulse-bot;
}

@keyframes exposed-badge-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.3); opacity: 1; }
}

@keyframes exposed-badge-pulse-bot {
    0%, 100% { transform: rotate(180deg) scale(1); opacity: 0.9; }
    50% { transform: rotate(180deg) scale(1.3); opacity: 1; }
}

/* Don't double-pulse if also a threat target for the other side */
DIV.checker-container.exposed-blot.threat-blot {
    box-shadow:
        inset 0 0 0 1.5px rgba(231, 76, 60, 0.4),
        inset 0 0 0 3px rgba(243, 156, 18, 0.35),
        0 0 12px rgba(243, 156, 18, 0.2);
}

/* --- Bearing-ready home tray --- */
DIV.home.bearing-ready {
    box-shadow:
        inset 0 0 0 2px rgba(46, 204, 113, 0.55),
        0 0 20px rgba(46, 204, 113, 0.35),
        inset 0 0 18px rgba(46, 204, 113, 0.12);
    animation: bearing-ready-pulse 1.8s ease-in-out infinite;
}

DIV.home.bearing-ready::before {
    content: "READY";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(184, 245, 200, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    opacity: 0.9;
}

@keyframes bearing-ready-pulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 2px rgba(46, 204, 113, 0.45),
            0 0 14px rgba(46, 204, 113, 0.25),
            inset 0 0 14px rgba(46, 204, 113, 0.08);
    }
    50% {
        box-shadow:
            inset 0 0 0 2px rgba(46, 204, 113, 0.75),
            0 0 26px rgba(46, 204, 113, 0.45),
            inset 0 0 22px rgba(46, 204, 113, 0.16);
    }
}

DIV.board.bearing-ready-board {
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(255, 220, 160, 0.12),
        inset 0 0 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(46, 204, 113, 0.2);
}

DIV.game-container.bearing-ready DIV.turn-banner.turn-you {
    box-shadow:
        0 0 0 1px rgba(46, 204, 113, 0.4),
        0 0 18px rgba(46, 204, 113, 0.2);
}

/* --- Illegal click shake + flash --- */
DIV.board.board-illegal-shake {
    animation: board-illegal-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes board-illegal-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-5px) rotate(-0.3deg); }
    30% { transform: translateX(5px) rotate(0.3deg); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

DIV.game-container.illegal-flash DIV.board-wrap {
    filter: brightness(1.08) saturate(1.1);
    box-shadow:
        0 0 0 2px rgba(231, 76, 60, 0.55),
        0 0 28px rgba(231, 76, 60, 0.3);
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}

DIV.game-container:not(.illegal-flash) DIV.board-wrap {
    transition: box-shadow 0.35s ease, filter 0.35s ease;
}

/* Theme tints */
BODY.theme-neon DIV.landing-ghost {
    box-shadow:
        0 0 0 1.5px rgba(0, 240, 255, 0.55),
        0 0 16px rgba(0, 240, 255, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.4);
}

BODY.theme-neon DIV.landing-ghost.landing-ghost-hit {
    box-shadow:
        0 0 0 2px rgba(255, 45, 138, 0.75),
        0 0 18px rgba(255, 45, 138, 0.55);
}

BODY.theme-neon DIV.checker-container.prime-black::after {
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.55), transparent);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

BODY.theme-neon DIV.checker-container.prime-red::after {
    background: linear-gradient(90deg, transparent, rgba(255, 45, 138, 0.55), transparent);
    box-shadow: 0 0 10px rgba(255, 45, 138, 0.4);
}

BODY.theme-neon SPAN.exposed-badge {
    background: radial-gradient(circle at 35% 30%, #ffe0a0 0%, #ffaa00 55%, #c06000 100%);
    box-shadow:
        0 0 0 1.5px rgba(255, 230, 160, 0.55),
        0 0 12px rgba(255, 170, 0, 0.75);
}

BODY.theme-casino DIV.landing-ghost {
    box-shadow:
        0 0 0 1.5px rgba(232, 197, 106, 0.6),
        0 0 14px rgba(232, 197, 106, 0.35);
}

BODY.theme-marble DIV.checker-container.prime-black::after {
    background: linear-gradient(90deg, transparent, rgba(120, 150, 190, 0.55), transparent);
}

/* High contrast */
BODY.high-contrast DIV.landing-ghost {
    opacity: 0.75;
    box-shadow: 0 0 0 2px #ffe566, 0 0 0 4px #000;
}

BODY.high-contrast SPAN.exposed-badge {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    background: #ffaa00;
}

BODY.high-contrast DIV.checker-container.exposed-blot {
    box-shadow: inset 0 0 0 3px #ffaa00, 0 0 0 1px #fff;
}

BODY.high-contrast DIV.home.bearing-ready {
    box-shadow: inset 0 0 0 3px #2ecc71, 0 0 0 1px #fff;
    animation: none;
}

BODY.high-contrast SPAN.prime-chip {
    border-width: 2px;
    font-size: 0.58rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    DIV.landing-ghost,
    SPAN.exposed-badge,
    DIV.home.bearing-ready,
    DIV.checker-container.prime-full::after,
    DIV.board.board-illegal-shake,
    SPAN.prime-chip {
        animation: none !important;
    }

    DIV.landing-ghost {
        opacity: 0.5;
    }
}

/* Mobile sizing */
@media (max-width: 560px) {
    DIV.landing-ghost {
        width: calc(var(--checker-size) * 0.88);
        height: calc(var(--checker-size) * 0.88);
        margin-left: calc(var(--checker-size) * -0.44);
    }

    SPAN.landing-ghost-pip {
        font-size: 0.48rem;
    }

    SPAN.prime-chip {
        font-size: 0.45rem;
        padding: 1px 4px;
    }

    SPAN.exposed-badge {
        width: 8px;
        height: 8px;
    }

    DIV.home.bearing-ready::before {
        font-size: 0.4rem;
        letter-spacing: 0.1em;
    }
}

/* ============================================================
   Run upgrade — victory grades, milestone toasts, brass rivets
   ============================================================ */

/* --- Brass corner rivets on the wooden frame --- */
SPAN.board-rivet {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    z-index: 6;
    pointer-events: none;
    background:
        radial-gradient(circle at 32% 28%, #ffe9a8 0%, #d4a84b 42%, #8a6020 78%, #4a3010 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(40, 24, 8, 0.4);
}

SPAN.board-rivet::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.35), transparent 60%);
    box-shadow: inset 0 0 0 1px rgba(60, 36, 10, 0.25);
}

SPAN.board-rivet-tl { top: 4px; left: 4px; }
SPAN.board-rivet-tr { top: 4px; right: 4px; }
SPAN.board-rivet-bl { bottom: 4px; left: 4px; }
SPAN.board-rivet-br { bottom: 4px; right: 4px; }

/* Soft wood-grain sheen on the outer frame */
DIV.board {
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, transparent 38%),
        repeating-linear-gradient(
            92deg,
            transparent 0,
            transparent 3px,
            rgba(0, 0, 0, 0.04) 3px,
            rgba(0, 0, 0, 0.04) 4px
        ),
        linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 40%, var(--wood-dark) 100%);
}

BODY.theme-neon SPAN.board-rivet {
    background: radial-gradient(circle at 32% 28%, #a0ffff 0%, #00c8e0 45%, #006080 100%);
    box-shadow:
        0 0 8px rgba(0, 240, 255, 0.55),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

BODY.theme-marble SPAN.board-rivet {
    background: radial-gradient(circle at 32% 28%, #f0f4f8 0%, #a8b8c8 50%, #607080 100%);
}

BODY.theme-casino SPAN.board-rivet {
    background: radial-gradient(circle at 32% 28%, #ffe8a0 0%, #e0b040 45%, #806018 100%);
    box-shadow:
        0 0 6px rgba(232, 197, 106, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* --- Victory grade badge + stars --- */
DIV.win-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    padding: 6px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1a1208;
    background: linear-gradient(180deg, #f0c14b 0%, #c9a227 100%);
    box-shadow:
        0 3px 0 #8a7018,
        0 6px 16px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: win-grade-pop 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

DIV.win-overlay.win-grade-gammon DIV.win-grade-badge {
    background: linear-gradient(180deg, #ffe566 0%, #f0a020 55%, #c06010 100%);
    color: #1a0c00;
    letter-spacing: 0.2em;
    box-shadow:
        0 3px 0 #8a5010,
        0 0 24px rgba(240, 160, 32, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.35);
}

DIV.win-overlay.win-grade-backgammon DIV.win-grade-badge {
    background: linear-gradient(135deg, #fff6c0 0%, #f0c14b 30%, #e74c3c 70%, #9b59b6 100%);
    color: #140808;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    padding: 8px 22px;
    box-shadow:
        0 3px 0 #6a2018,
        0 0 32px rgba(231, 76, 60, 0.5),
        0 0 48px rgba(155, 89, 182, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.4);
    animation: win-grade-pop 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) both,
               win-grade-shimmer 2.2s ease-in-out infinite;
}

DIV.win-overlay.win-cpu DIV.win-grade-badge {
    background: linear-gradient(180deg, #e88a7a 0%, #c0392b 100%);
    color: #fff8f6;
    box-shadow:
        0 3px 0 #7b1e14,
        0 6px 16px rgba(0, 0, 0, 0.35);
}

DIV.win-overlay.win-cpu.win-grade-backgammon DIV.win-grade-badge {
    background: linear-gradient(135deg, #ffb0a0 0%, #e74c3c 40%, #7b1e14 100%);
}

@keyframes win-grade-pop {
    0% { transform: scale(0.6) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes win-grade-shimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

DIV.win-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 2px 0 10px;
    min-height: 1.4em;
}

SPAN.win-star {
    font-size: 1.35rem;
    line-height: 1;
    display: inline-block;
    animation: win-star-pop 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}

SPAN.win-star-on {
    color: #f0c14b;
    text-shadow:
        0 0 10px rgba(240, 193, 75, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

SPAN.win-star-off {
    color: rgba(255, 255, 255, 0.18);
    text-shadow: none;
}

DIV.win-overlay.win-cpu SPAN.win-star-on {
    color: #ff8a75;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.55);
}

@keyframes win-star-pop {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

P.win-grade-hint {
    margin: 0 0 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 28em;
    margin-left: auto;
    margin-right: auto;
}

/* Stronger victory rim for gammons */
DIV.game-container.victory-gammon DIV.board-wrap {
    box-shadow:
        0 0 0 2px rgba(240, 193, 75, 0.55),
        0 0 40px rgba(240, 160, 32, 0.35),
        0 16px 40px rgba(0, 0, 0, 0.4);
}

DIV.game-container.victory-backgammon DIV.board-wrap {
    box-shadow:
        0 0 0 2px rgba(231, 76, 60, 0.55),
        0 0 0 5px rgba(240, 193, 75, 0.35),
        0 0 50px rgba(155, 89, 182, 0.3),
        0 16px 40px rgba(0, 0, 0, 0.45);
    animation: victory-backgammon-pulse 1.6s ease-in-out infinite;
}

@keyframes victory-backgammon-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.06); }
}

SPAN.confetti-piece.confetti-star {
    width: auto;
    height: auto;
    font-size: 14px;
    line-height: 1;
    border-radius: 0;
    box-shadow: none;
    background: transparent !important;
}

/* --- Milestone toast chips --- */
DIV.milestone-layer {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: min(92vw, 360px);
}

DIV.milestone-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(36, 42, 54, 0.96) 0%, rgba(22, 26, 34, 0.98) 100%);
    border: 1px solid rgba(240, 193, 75, 0.45);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(240, 193, 75, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: milestone-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

DIV.milestone-chip.milestone-out {
    animation: milestone-out 0.32s ease both;
}

SPAN.milestone-who {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(240, 193, 75, 0.12);
    border: 1px solid rgba(240, 193, 75, 0.28);
}

DIV.milestone-chip.milestone-cpu SPAN.milestone-who {
    color: #ff8a75;
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.3);
}

SPAN.milestone-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
}

DIV.milestone-chip.milestone-hit {
    border-color: rgba(231, 76, 60, 0.55);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 18px rgba(231, 76, 60, 0.2);
}

DIV.milestone-chip.milestone-bear {
    border-color: rgba(46, 204, 113, 0.55);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 18px rgba(46, 204, 113, 0.2);
}

DIV.milestone-chip.milestone-race {
    border-color: rgba(93, 173, 226, 0.55);
}

DIV.milestone-chip.milestone-prime {
    border-color: rgba(155, 89, 182, 0.55);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(155, 89, 182, 0.25);
}

DIV.milestone-chip.milestone-streak {
    border-color: rgba(240, 193, 75, 0.7);
}

DIV.milestone-chip.milestone-comeback {
    border-color: rgba(46, 204, 113, 0.7);
    background: linear-gradient(180deg, rgba(28, 48, 36, 0.96) 0%, rgba(18, 32, 24, 0.98) 100%);
}

@keyframes milestone-in {
    0% { transform: translateY(-16px) scale(0.88); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes milestone-out {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-10px) scale(0.94); opacity: 0; }
}

DIV.game-container.milestone-flash DIV.board-wrap {
    filter: brightness(1.06) saturate(1.12);
    transition: filter 0.15s ease;
}

BODY.theme-neon DIV.milestone-chip {
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(0, 240, 255, 0.18);
}

BODY.theme-neon SPAN.milestone-who {
    color: #00f0ff;
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.3);
}

BODY.high-contrast DIV.milestone-chip {
    background: #000;
    border: 2px solid #ffe566;
    color: #fff;
}

BODY.high-contrast SPAN.milestone-who {
    background: #ffe566;
    color: #000;
    border-color: #fff;
}

BODY.high-contrast DIV.win-grade-badge {
    border: 2px solid #fff;
}

BODY.high-contrast SPAN.win-star-on {
    color: #ffe566;
    text-shadow: none;
}

BODY.high-contrast SPAN.board-rivet {
    background: #ffe566;
    box-shadow: 0 0 0 2px #000;
}

@media (prefers-reduced-motion: reduce) {
    DIV.win-grade-badge,
    SPAN.win-star,
    DIV.milestone-chip,
    DIV.game-container.victory-backgammon DIV.board-wrap {
        animation: none !important;
    }
}

@media (max-width: 560px) {
    DIV.milestone-chip {
        padding: 8px 12px;
        gap: 8px;
    }

    SPAN.milestone-text {
        font-size: 0.84rem;
    }

    SPAN.board-rivet {
        width: 9px;
        height: 9px;
    }

    DIV.win-grade-badge {
        font-size: 0.7rem;
        padding: 5px 14px;
    }

    SPAN.win-star {
        font-size: 1.15rem;
    }
}

/* ============================================================
   Run upgrade — Position Power, Coach Quality, Royal, Cinema
   ============================================================ */

/* --- Position power tug-of-war --- */
DIV.power-panel {
    width: 100%;
    padding: 10px 14px 12px;
    background: linear-gradient(180deg, #252a36 0%, var(--panel) 100%);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

DIV.power-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

SPAN.power-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

SPAN.power-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    transition: color 0.25s ease;
}

DIV.power-panel.power-you SPAN.power-label {
    color: #7dffa8;
}

DIV.power-panel.power-cpu SPAN.power-label {
    color: #ffb0a6;
}

DIV.power-panel.power-even SPAN.power-label {
    color: var(--gold);
}

DIV.power-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background:
        linear-gradient(90deg,
            rgba(46, 204, 113, 0.18) 0%,
            rgba(40, 44, 56, 0.9) 50%,
            rgba(231, 76, 60, 0.18) 100%);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

SPAN.power-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
}

SPAN.power-fill-you {
    left: 0;
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.55), rgba(46, 204, 113, 0.15));
    border-radius: 999px 0 0 999px;
}

SPAN.power-fill-cpu {
    right: 0;
    background: linear-gradient(270deg, rgba(231, 76, 60, 0.55), rgba(231, 76, 60, 0.15));
    border-radius: 0 999px 999px 0;
}

SPAN.power-center {
    position: absolute;
    left: 50%;
    top: 2px;
    bottom: 2px;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 1px;
    z-index: 1;
}

SPAN.power-needle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff8e0 0%, var(--gold) 45%, #8a7018 100%);
    box-shadow:
        0 0 0 2px rgba(20, 16, 8, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(240, 193, 75, 0.45);
    z-index: 2;
    transition: left 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
    left: 50%;
}

DIV.power-panel.power-swing SPAN.power-needle {
    animation: power-needle-pop 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}

@keyframes power-needle-pop {
    0% { transform: scale(0.75); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

DIV.power-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

SPAN.power-end-you { color: #7dffa8; opacity: 0.85; }
SPAN.power-end-cpu { color: #ffb0a6; opacity: 0.85; }

/* --- Coach move quality toast --- */
DIV.quality-layer {
    position: fixed;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 960;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(92vw, 340px);
}

DIV.quality-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(36, 42, 54, 0.97) 0%, rgba(18, 22, 30, 0.98) 100%);
    border: 1px solid rgba(240, 193, 75, 0.5);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(240, 193, 75, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: quality-in 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

DIV.quality-chip.quality-out {
    animation: quality-out 0.3s ease both;
}

SPAN.quality-stars {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(240, 193, 75, 0.55);
}

SPAN.quality-text {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
}

SPAN.quality-delta {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

DIV.quality-chip.quality-perfect {
    border-color: rgba(46, 204, 113, 0.7);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(46, 204, 113, 0.3);
}
DIV.quality-chip.quality-perfect SPAN.quality-stars,
DIV.quality-chip.quality-perfect SPAN.quality-text {
    color: #7dffa8;
    text-shadow: 0 0 12px rgba(46, 204, 113, 0.45);
}

DIV.quality-chip.quality-great {
    border-color: rgba(93, 173, 226, 0.65);
}
DIV.quality-chip.quality-great SPAN.quality-text {
    color: #8ecfff;
}

DIV.quality-chip.quality-good {
    border-color: rgba(240, 193, 75, 0.55);
}

DIV.quality-chip.quality-ok {
    border-color: rgba(160, 160, 170, 0.45);
}
DIV.quality-chip.quality-ok SPAN.quality-stars {
    color: #b0b0b8;
    text-shadow: none;
}

DIV.quality-chip.quality-miss {
    border-color: rgba(231, 76, 60, 0.65);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.5),
        0 0 22px rgba(231, 76, 60, 0.25);
}
DIV.quality-chip.quality-miss SPAN.quality-text {
    color: #ffb0a6;
}

@keyframes quality-in {
    0% { transform: translateY(18px) scale(0.88); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes quality-out {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(10px) scale(0.94); opacity: 0; }
}

DIV.game-container.quality-flash-perfect DIV.board-wrap {
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.55), 0 0 36px rgba(46, 204, 113, 0.3);
}
DIV.game-container.quality-flash-great DIV.board-wrap {
    box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.5), 0 0 30px rgba(93, 173, 226, 0.25);
}
DIV.game-container.quality-flash-good DIV.board-wrap {
    box-shadow: 0 0 0 2px rgba(240, 193, 75, 0.45), 0 0 24px rgba(240, 193, 75, 0.2);
}
DIV.game-container.quality-flash-miss DIV.board-wrap {
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.5), 0 0 28px rgba(231, 76, 60, 0.22);
}

/* --- Cinema / focus mode --- */
DIV.game-container.cinema-mode DIV.game-toolbar,
DIV.game-container.cinema-mode DIV.race-panel,
DIV.game-container.cinema-mode DIV.power-panel,
DIV.game-container.cinema-mode DIV.move-history,
DIV.game-container.cinema-mode P.play-hint,
DIV.game-container.cinema-mode DIV.side-container DIV.status-container {
    opacity: 0.22;
    filter: saturate(0.6);
    transition: opacity 0.35s ease, filter 0.35s ease;
    pointer-events: none;
}

DIV.game-container.cinema-mode DIV.board-wrap {
    transform: scale(1.04);
    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    filter: brightness(1.04) saturate(1.08);
    box-shadow:
        0 0 0 1px rgba(240, 193, 75, 0.2),
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 0, 0, 0.35);
}

DIV.game-container.cinema-mode DIV.match-header {
    opacity: 0.55;
}

DIV.game-container.cinema-mode DIV.turn-banner {
    box-shadow: 0 0 24px rgba(240, 193, 75, 0.18);
}

BODY.cinema-on {
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, #1a1e28 0%, #0a0c10 70%, #050608 100%) !important;
}

BODY.cinema-on .app-title,
BODY.cinema-on .app-subtitle,
BODY.cinema-on .app-footer {
    opacity: 0.35;
    transition: opacity 0.35s ease;
}

BUTTON.tool-btn-cinema.is-active {
    border-color: rgba(155, 89, 182, 0.65);
    color: #d4a0ff;
    box-shadow: 0 0 14px rgba(155, 89, 182, 0.3);
}

/* --- Mobile sticky dock --- */
DIV.mobile-dock {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, rgba(12, 14, 20, 0.92) 28%, rgba(12, 14, 20, 0.98) 100%);
    gap: 8px;
    justify-content: center;
    pointer-events: none;
}

DIV.mobile-dock .dock-btn {
    pointer-events: auto;
    appearance: none;
    border: 1px solid var(--panel-border);
    background: linear-gradient(180deg, #2e3548 0%, #1c2030 100%);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 16px;
    min-height: 48px;
    min-width: 88px;
    border-radius: 14px;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

DIV.mobile-dock .dock-btn:disabled {
    opacity: 0.38;
    cursor: default;
}

DIV.mobile-dock .dock-btn.is-enabled:not(:disabled) {
    border-color: rgba(240, 193, 75, 0.45);
    color: var(--gold);
}

DIV.mobile-dock .dock-btn.is-active {
    border-color: rgba(155, 89, 182, 0.65);
    color: #d4a0ff;
}

DIV.mobile-dock .dock-suggest.is-enabled:not(:disabled) {
    border-color: rgba(0, 220, 220, 0.5);
    color: #7ef0f0;
}

@media (max-width: 640px) {
    DIV.mobile-dock {
        display: flex;
    }

    DIV.game-container {
        padding-bottom: 72px;
    }

    DIV.quality-layer {
        bottom: max(88px, calc(env(safe-area-inset-bottom) + 80px));
    }
}

/* --- Royal theme --- */
BODY.theme-royal {
    --wood-dark: #1a0e28;
    --wood-mid: #2d1848;
    --wood-light: #3d2460;
    --wood-frame: #140a20;
    --felt: #1a1030;
    --point-dark: #4a2060;
    --point-light: #d4b878;
    --point-dark-tip: #2a1040;
    --point-light-tip: #f0e0b0;
    --gold: #f0d48a;
    --surface: #0c0814;
    --panel: #181028;
    --panel-border: #3a2858;
}

BODY.theme-royal.bg-app {
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, #3a2060 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 100%, #2a1040 0%, transparent 45%),
        var(--surface);
}

BODY.theme-royal DIV.board {
    border-color: #1a0e30;
    box-shadow:
        var(--shadow),
        inset 0 0 0 2px rgba(240, 212, 138, 0.18),
        inset 0 0 40px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(100, 40, 160, 0.15);
}

BODY.theme-royal DIV.board::before {
    background:
        linear-gradient(180deg, rgba(28, 16, 48, 0.94), rgba(14, 8, 28, 0.97));
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(120, 60, 180, 0.08);
}

BODY.theme-royal SPAN.board-rivet {
    background: radial-gradient(circle at 32% 28%, #fff0c0 0%, #e0b050 42%, #806018 100%);
    box-shadow:
        0 0 10px rgba(240, 212, 138, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.55);
}

BODY.theme-royal DIV.match-header,
BODY.theme-royal DIV.side-container,
BODY.theme-royal DIV.race-panel,
BODY.theme-royal DIV.power-panel,
BODY.theme-royal DIV.move-history {
    background: linear-gradient(180deg, #241838 0%, #181028 100%);
    border-color: #3a2858;
}

BODY.theme-royal DIV.turn-banner.turn-you {
    background: linear-gradient(90deg, rgba(180, 100, 255, 0.15), rgba(240, 212, 138, 0.12));
    border-color: rgba(200, 140, 255, 0.45);
    color: #e0c0ff;
}

BODY.theme-royal DIV.power-track {
    background:
        linear-gradient(90deg,
            rgba(180, 100, 255, 0.22) 0%,
            rgba(30, 20, 48, 0.9) 50%,
            rgba(231, 76, 60, 0.2) 100%);
}

BODY.theme-royal SPAN.power-fill-you {
    background: linear-gradient(90deg, rgba(180, 100, 255, 0.55), rgba(180, 100, 255, 0.12));
}

BODY.theme-royal DIV.checker.black {
    background:
        radial-gradient(circle at 32% 28%, #4a3a6a 0%, #1a1028 45%, #0a0614 100%);
    color: #e0c0ff;
}

/* --- Enhanced stack depth / metallic sheen ---
 * Vertical top offsets for data-stack live in the main Checkers block.
 * Here we only enrich shadows / sheen for deeper stack positions. */
DIV.checker.checker-stack[data-stack="1"] {
    box-shadow:
        0 3px 5px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.28),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4);
}

DIV.checker.checker-stack[data-stack="2"] {
    box-shadow:
        0 3px 5px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.28),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4);
}

DIV.checker.checker-stack[data-stack="3"] {
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(0, 0, 0, 0.08),
        inset 0 2px 3px rgba(255, 255, 255, 0.28),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4);
}

DIV.checker.checker-stack[data-stack="4"],
DIV.checker.checker-stack[data-stack="5"] {
    box-shadow:
        0 4px 7px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.1),
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.42);
}

DIV.checker.checker-total {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.55),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

DIV.checker-container[data-count="6"] DIV.checker.checker-total,
DIV.checker-container[data-count="7"] DIV.checker.checker-total,
DIV.checker-container[data-count="8"] DIV.checker.checker-total,
DIV.checker-container[data-count="9"] DIV.checker.checker-total,
DIV.checker-container[data-count="10"] DIV.checker.checker-total,
DIV.checker-container[data-count="11"] DIV.checker.checker-total,
DIV.checker-container[data-count="12"] DIV.checker.checker-total,
DIV.checker-container[data-count="13"] DIV.checker.checker-total,
DIV.checker-container[data-count="14"] DIV.checker.checker-total,
DIV.checker-container[data-count="15"] DIV.checker.checker-total {
    animation: stack-glow 2.4s ease-in-out infinite;
}

@keyframes stack-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

/* Premium felt vignette under board wrap */
DIV.board-wrap {
    position: relative;
    border-radius: 14px;
    padding: 4px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.25) 100%);
}

BODY.theme-royal DIV.board-wrap {
    background:
        radial-gradient(ellipse 80% 70% at 50% 50%, rgba(80, 40, 140, 0.12) 0%, transparent 55%, rgba(0, 0, 0, 0.3) 100%);
}

/* High-contrast affordances for new UI */
BODY.high-contrast DIV.power-panel {
    border: 2px solid #ffe566;
    background: #000;
}

BODY.high-contrast SPAN.power-needle {
    background: #ffe566;
    box-shadow: 0 0 0 2px #000;
}

BODY.high-contrast DIV.quality-chip {
    background: #000;
    border: 2px solid #ffe566;
}

BODY.high-contrast DIV.mobile-dock .dock-btn {
    border: 2px solid #ffe566;
    background: #111;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    SPAN.power-needle,
    SPAN.power-fill,
    DIV.quality-chip,
    DIV.game-container.cinema-mode DIV.board-wrap,
    DIV.checker.checker-total {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 560px) {
    DIV.power-panel {
        padding: 8px 10px 10px;
    }

    SPAN.power-label {
        font-size: 0.7rem;
    }

    DIV.power-track {
        height: 12px;
    }

    SPAN.power-needle {
        width: 14px;
        height: 14px;
        margin-left: -7px;
        margin-top: -7px;
    }

    DIV.quality-chip {
        padding: 10px 14px;
        gap: 8px;
    }

    SPAN.quality-text {
        font-size: 0.88rem;
    }
}

/* ============================================================
   Lobby (difficulty + Start) — game does not auto-start
   ============================================================ */

DIV.lobby-overlay {
    position: fixed;
    inset: 0;
    z-index: 980;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: rgba(8, 10, 14, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

DIV.lobby-overlay[hidden] {
    display: none !important;
}

DIV.lobby-card {
    width: min(380px, 100%);
    padding: 24px 20px 20px;
    border-radius: 20px;
    background: linear-gradient(165deg, #2a3040 0%, #1a1e28 55%, #141820 100%);
    border: 1px solid rgba(240, 193, 75, 0.45);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(240, 193, 75, 0.12);
    text-align: center;
}

H2.lobby-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--gold);
}

P.lobby-sub {
    margin: 0 0 18px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

DIV.lobby-diff-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

DIV.lobby-diff-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

BUTTON.lobby-diff-btn {
    appearance: none;
    flex: 1 1 0;
    min-height: 52px;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

BUTTON.lobby-diff-btn:active {
    transform: scale(0.97);
}

BUTTON.lobby-diff-btn.is-selected {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(240, 193, 75, 0.28) 0%, rgba(201, 162, 39, 0.18) 100%);
    box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #ffe9a8;
}

BUTTON.lobby-play-btn {
    margin-top: 4px;
    min-height: 54px;
    font-size: 1.05rem;
}

DIV.game-container.lobby-open {
    pointer-events: none;
}

DIV.game-container.lobby-open DIV.lobby-overlay {
    pointer-events: auto;
}

/* ============================================================
   Roll Dice button — human must tap (never auto-roll)
   ============================================================ */

BUTTON.roll-dice-btn {
    appearance: none;
    display: block;
    width: 100%;
    margin-top: 10px;
    min-height: 52px;
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    color: #102818;
    background: linear-gradient(180deg, #5dffa0 0%, #2ecc71 55%, #1e9e52 100%);
    box-shadow:
        0 4px 0 #157a3c,
        0 10px 22px rgba(46, 204, 113, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: roll-btn-pulse 1.4s ease-in-out infinite;
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

BUTTON.roll-dice-btn[hidden] {
    display: none !important;
}

BUTTON.roll-dice-btn:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #157a3c,
        0 4px 12px rgba(46, 204, 113, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: none;
}

BUTTON.roll-dice-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@keyframes roll-btn-pulse {
    0%, 100% { filter: brightness(1); box-shadow: 0 4px 0 #157a3c, 0 10px 22px rgba(46, 204, 113, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
    50% { filter: brightness(1.08); box-shadow: 0 4px 0 #157a3c, 0 12px 28px rgba(46, 204, 113, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

DIV.turn-banner.turn-roll {
    border-color: rgba(46, 204, 113, 0.55);
    box-shadow: 0 0 18px rgba(46, 204, 113, 0.25);
}

DIV.mobile-dock .dock-btn.dock-roll {
    background: linear-gradient(180deg, #5dffa0 0%, #2ecc71 55%, #1e9e52 100%);
    color: #102818;
    font-weight: 900;
    border: none;
    box-shadow: 0 3px 0 #157a3c, 0 6px 14px rgba(46, 204, 113, 0.35);
    min-width: 7.5rem;
}

DIV.mobile-dock .dock-btn.dock-roll[hidden] {
    display: none !important;
}

DIV.mobile-dock .dock-btn.dock-roll:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #157a3c, 0 3px 8px rgba(46, 204, 113, 0.3);
}

DIV.game-container.awaiting-roll DIV.board {
    opacity: 0.92;
}

BODY.high-contrast BUTTON.roll-dice-btn,
BODY.high-contrast DIV.mobile-dock .dock-btn.dock-roll {
    background: #00ff66;
    color: #000;
    border: 2px solid #fff;
    box-shadow: none;
    animation: none;
}

BODY.high-contrast BUTTON.lobby-diff-btn.is-selected {
    border-color: #ffe566;
    background: #222;
    color: #ffe566;
}

@media (prefers-reduced-motion: reduce) {
    BUTTON.roll-dice-btn {
        animation: none !important;
    }
}

/* ============================================================
   FINAL BOARD GEOMETRY POLISH (cascade winner)
   Pixel-correct two-row + bar + home; fluid mobile fit; no layout shift
   ============================================================ */

/* Desktop/default geometry remains variable-driven; lock container model */
DIV.board {
    box-sizing: content-box;
    width: calc(var(--point-w) * 14);
    height: calc(var(--point-h) * 2);
    min-width: calc(var(--point-w) * 14);
    padding: var(--board-pad);
    overflow: hidden;
    position: relative;
}

/* Never force a horizontal scrollbar: let fluid --point-w shrink the felt */
@media (max-width: 899px) {
    DIV.board {
        min-width: 0;
        max-width: 100%;
    }
    DIV.board-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    body.bg-app .app-shell {
        overflow-x: hidden;
        max-width: 100vw;
    }
}

/* Absolute columns only — never float / flex-wrap */
DIV.board > DIV.checker-container {
    position: absolute;
    float: none !important;
    display: block;
    width: var(--point-w);
    height: var(--point-h);
    margin: 0;
    box-sizing: border-box;
}

DIV.board > DIV.checker-container-top {
    top: var(--board-pad);
    bottom: auto;
}

DIV.board > DIV.checker-container-bottom {
    top: auto;
    bottom: var(--board-pad);
    transform: rotate(180deg);
}

/* 14-column left map (shared by both rows) — flush to content pad */
DIV.board > DIV.checker-container-top[data-point="13"],
DIV.board > DIV.checker-container-bottom[data-point="12"] { left: calc(var(--board-pad) + var(--point-w) * 0); }

DIV.board > DIV.checker-container-top[data-point="14"],
DIV.board > DIV.checker-container-bottom[data-point="11"] { left: calc(var(--board-pad) + var(--point-w) * 1); }

DIV.board > DIV.checker-container-top[data-point="15"],
DIV.board > DIV.checker-container-bottom[data-point="10"] { left: calc(var(--board-pad) + var(--point-w) * 2); }

DIV.board > DIV.checker-container-top[data-point="16"],
DIV.board > DIV.checker-container-bottom[data-point="9"]  { left: calc(var(--board-pad) + var(--point-w) * 3); }

DIV.board > DIV.checker-container-top[data-point="17"],
DIV.board > DIV.checker-container-bottom[data-point="8"]  { left: calc(var(--board-pad) + var(--point-w) * 4); }

DIV.board > DIV.checker-container-top[data-point="18"],
DIV.board > DIV.checker-container-bottom[data-point="7"]  { left: calc(var(--board-pad) + var(--point-w) * 5); }

DIV.board > DIV.checker-container-top.bar,
DIV.board > DIV.checker-container-bottom.bar              { left: calc(var(--board-pad) + var(--point-w) * 6); }

DIV.board > DIV.checker-container-top[data-point="19"],
DIV.board > DIV.checker-container-bottom[data-point="6"]  { left: calc(var(--board-pad) + var(--point-w) * 7); }

DIV.board > DIV.checker-container-top[data-point="20"],
DIV.board > DIV.checker-container-bottom[data-point="5"]  { left: calc(var(--board-pad) + var(--point-w) * 8); }

DIV.board > DIV.checker-container-top[data-point="21"],
DIV.board > DIV.checker-container-bottom[data-point="4"]  { left: calc(var(--board-pad) + var(--point-w) * 9); }

DIV.board > DIV.checker-container-top[data-point="22"],
DIV.board > DIV.checker-container-bottom[data-point="3"]  { left: calc(var(--board-pad) + var(--point-w) * 10); }

DIV.board > DIV.checker-container-top[data-point="23"],
DIV.board > DIV.checker-container-bottom[data-point="2"]  { left: calc(var(--board-pad) + var(--point-w) * 11); }

DIV.board > DIV.checker-container-top[data-point="24"],
DIV.board > DIV.checker-container-bottom[data-point="1"]  { left: calc(var(--board-pad) + var(--point-w) * 12); }

DIV.board > DIV.checker-container-top.home,
DIV.board > DIV.checker-container-bottom.home             { left: calc(var(--board-pad) + var(--point-w) * 13); }

/* Triangles: tip toward center (top tips down; bottom row rotated so tip up) */
DIV.board > DIV.point-red::before,
DIV.board > DIV.point-black::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(to bottom, var(--base) 0%, var(--tip) 100%);
    opacity: 0.92;
}

/* Checkers: centered X, stacked Y from outer edge toward center */
DIV.board DIV.checker {
    position: absolute;
    left: 50%;
    margin-left: calc(var(--checker-size) / -2);
    width: var(--checker-size);
    height: var(--checker-size);
    top: 2px;
}

DIV.board DIV.checker.checker-stack[data-stack="1"] { top: 2px; z-index: 1; }
DIV.board DIV.checker.checker-stack[data-stack="2"] { top: calc(2px + var(--stack-step) * 1); z-index: 2; }
DIV.board DIV.checker.checker-stack[data-stack="3"] { top: calc(2px + var(--stack-step) * 2); z-index: 3; }
DIV.board DIV.checker.checker-stack[data-stack="4"] { top: calc(2px + var(--stack-step) * 3); z-index: 4; }
DIV.board DIV.checker.checker-stack[data-stack="5"] { top: calc(2px + var(--stack-step) * 4); z-index: 5; }

/* Overflow total on 5th checker stays inside the point */
DIV.board DIV.checker.checker-total {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

/* Selection / destination: glow only, never scale (preserves geometry) */
DIV.board > DIV.checker-container.valid-source.selected,
DIV.board > DIV.checker-container.valid-source:active {
    transform: none;
    outline: 2px solid rgba(46, 204, 113, 0.85);
    outline-offset: -2px;
}

DIV.board > DIV.checker-container-bottom.valid-source.selected,
DIV.board > DIV.checker-container-bottom.valid-source:active,
DIV.board > DIV.checker-container-bottom.valid-source,
DIV.board > DIV.checker-container-bottom.valid-destination,
DIV.board > DIV.checker-container-bottom {
    transform: rotate(180deg);
}

DIV.board > DIV.checker-container-bottom.valid-source.selected,
DIV.board > DIV.checker-container-bottom.valid-source:active {
    outline: 2px solid rgba(46, 204, 113, 0.85);
    outline-offset: -2px;
}

/* Hide legacy float clear breaks */
DIV.board > BR.clear {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile: full board fits viewport, no horizontal scroll, no clipped points */
@media (max-width: 560px) {
    :root {
        --board-pad: 3px;
        --point-w: clamp(20px, calc((100vw - 44px) / 14), 48px);
        --point-h: clamp(90px, calc(var(--point-w) * 2.25), 112px);
        --checker-size: clamp(16px, calc(var(--point-w) * 0.68), 32px);
        --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
    }

    body.bg-app {
        overflow-x: hidden;
    }

    body.bg-app .app-shell {
        padding-left: 6px !important;
        padding-right: 6px !important;
        max-width: 100vw;
        overflow-x: hidden;
    }

    DIV.game-container {
        max-width: 100%;
        width: 100%;
        padding: 4px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    DIV.board-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2px !important;
        overflow-x: hidden !important;
        overflow-y: visible;
        box-sizing: border-box;
    }

    DIV.board {
        border-width: 6px;
        width: calc(var(--point-w) * 14);
        min-width: 0;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: content-box;
    }
}

@media (max-width: 380px) {
    :root {
        --board-pad: 2px;
        --point-w: clamp(20px, calc((100vw - 36px) / 14), 32px);
        --point-h: clamp(88px, calc(var(--point-w) * 2.3), 100px);
        --checker-size: clamp(15px, calc(var(--point-w) * 0.7), 26px);
        --stack-step: calc((var(--point-h) - var(--checker-size) - 4px) / 4);
    }

    DIV.board {
        border-width: 5px;
    }
}

/* Desktop: room for board + side panel; no wrap squeeze.
   Keep ≥900 so mid-width fluid columns (561–899) still fit without h-scroll. */
@media (min-width: 900px) {
    :root {
        --checker-size: 36px;
        --point-w: 56px;
        --point-h: 124px;
        --board-pad: 4px;
        --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
    }

    DIV.game-container {
        max-width: 1040px;
    }

    DIV.board-wrap {
        width: max-content;
        max-width: none;
        overflow-x: visible;
    }

    DIV.board {
        max-width: none;
        min-width: calc(var(--point-w) * 14);
    }
}

/* ============================================================
   Smoothness pass — handoff, undo flash, used dice, tap targets
   (does not alter board geometry / point layout)
   ============================================================ */

DIV.game-container.undo-flash DIV.board-wrap {
    animation: undo-board-flash 0.28s ease;
}

@keyframes undo-board-flash {
    0% { filter: brightness(1); }
    40% { filter: brightness(1.12) saturate(1.05); }
    100% { filter: brightness(1); }
}

/* Destination ring: no layout shift (outline only) */
DIV.checker-container.valid-destination {
    /* ensure outline does not affect flex/absolute geometry */
    outline-offset: -2px;
}

/* Selected source — instant, layout-stable */
DIV.checker-container.selected {
    transition: box-shadow 0.08s ease, filter 0.08s ease;
}

/* Mobile dock / toolbar: ≥44px tap targets */
DIV.mobile-dock .dock-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 10px 14px;
    font-size: 0.92rem;
    touch-action: manipulation;
}

BUTTON.tool-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    touch-action: manipulation;
}

BUTTON.roll-dice-btn {
    min-height: 52px;
}

/* Telegram theme hooks (set by Utils.applyTelegramTheme / index bootstrap) */
BODY.tg-webapp {
    /* Prefer Telegram bg when provided */
    background-color: var(--tg-bg, var(--surface));
}

BODY.tg-webapp.tg-light {
    /* Light Mini App: keep board readable with slightly lifted panels */
    --panel: #f2f0eb;
    --panel-border: #d0cbc3;
    --text: #1a1a1e;
    --text-muted: #5a5650;
}

/* Crisper flight default transition (JS still sets per-move duration) */
DIV.checker.checker-fly {
    transition:
        transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1),
        opacity 0.2s ease,
        filter 0.15s ease;
}

/* Die double remaining ×1 badge */
DIV.dice-container DIV.die SPAN.die-double-badge-one {
    opacity: 0.85;
    background: rgba(240, 193, 75, 0.85);
}

/* While human flight settles into AI handoff, dim interaction chrome slightly */
DIV.game-container.board-turn-you.focus-cpu DIV.turn-banner,
DIV.game-container.board-turn-cpu DIV.turn-banner.turn-thinking {
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================================
   /improve polish — instant tap feel, dice clarity, lobby CTA
   ============================================================ */

/* Instant press feedback on legal sources/dests (mobile Mini App) */
DIV.checker-container.valid-source:active,
DIV.checker-container.valid-destination:active {
    filter: brightness(1.12);
    transition: filter 0.08s ease, transform 0.08s ease, box-shadow 0.12s ease;
}

DIV.checker-container-top.valid-source:active,
DIV.checker-container-top.valid-destination:active {
    transform: scale(0.98);
}

DIV.checker-container-bottom.valid-source:active,
DIV.checker-container-bottom.valid-destination:active {
    /* bottom row is rotated 180° — keep scale only */
    transform: rotate(180deg) scale(0.98);
}

DIV.checker-container.selected {
    z-index: 4;
}

/* Available die: soft gold pulse so unused uses stay obvious */
DIV.dice-container.active DIV.die.die-available:not(.die-used) {
    animation: die-available-glow 1.6s ease-in-out infinite;
}

@keyframes die-available-glow {
    0%, 100% { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 10px rgba(240, 193, 75, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(240, 193, 75, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    DIV.dice-container.active DIV.die.die-available:not(.die-used) {
        animation: none !important;
    }
}

/* Lobby: make Start unmistakable */
BUTTON.lobby-play-btn {
    width: 100%;
    min-height: 56px;
    font-size: 1.12rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #5dffa0 0%, #2ecc71 55%, #1e9e52 100%);
    color: #102818;
    border: none;
    box-shadow:
        0 4px 0 #157a3c,
        0 12px 28px rgba(46, 204, 113, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

BUTTON.lobby-play-btn:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #157a3c,
        0 6px 14px rgba(46, 204, 113, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

P.lobby-tip {
    margin: 12px 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
}

/* Turn banner: keep roll prompt crisp on small screens */
DIV.turn-banner.turn-roll .turn-text {
    letter-spacing: 0.04em;
}

/* ≥44px touch targets for dock + tools on phones */
@media (max-width: 560px) {
    DIV.mobile-dock .dock-btn {
        min-height: 48px;
        min-width: 48px;
        padding: 10px 14px;
        font-size: 0.88rem;
    }

    BUTTON.tool-btn {
        min-height: 44px;
        padding: 8px 12px;
    }

    /* Extra bottom inset so dock never covers home tray taps */
    body.bg-app .app-shell {
        padding-bottom: max(88px, calc(env(safe-area-inset-bottom) + 72px));
    }
}

/* Prevent residual hover dest paint during CPU focus */
DIV.game-container.focus-cpu DIV.board .valid-destination,
DIV.game-container.focus-cpu DIV.board .valid-source,
DIV.game-container.focus-cpu DIV.board .has-die-hint .die-hint-badge,
DIV.game-container.focus-cpu DIV.board .landing-ghost {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   Rotation disabled — game works in any orientation without prompts
   ============================================================ */

DIV.rotate-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* Disable all rotation-related media queries */
@media (max-width: 920px) and (orientation: portrait) {
    DIV.rotate-overlay {
        display: none !important;
    }
    body.bg-app {
        overflow: visible;
    }
}

/* Disable landscape board-only mode - keep full UI in all orientations */
@media (max-height: 560px) and (orientation: landscape) {
    html, body.bg-app {
        height: auto;
        overflow: visible;
    }
    body.bg-app .app-shell {
        height: auto;
        display: block;
        padding: 8px;
        gap: 12px;
        overflow: visible;
    }
    body.bg-app .app-title,
    body.bg-app .app-subtitle,
    body.bg-app .app-footer {
        display: block;
    }
    /* Show all chrome elements */
    DIV.game-toolbar,
    DIV.match-header,
    DIV.race-panel,
    DIV.power-panel,
    DIV.move-history,
    DIV.turn-banner,
    DIV.notice,
    P.play-hint,
    DIV.side-container,
    DIV.dice-block,
    DIV.mobile-dock {
        display: inherit !important;
    }
    DIV.rotate-overlay {
        display: none !important;
    }
    /* Reset board sizing to normal */
    :root {
        --point-w: 66px;
        --point-h: 120px;
        --checker-size: 40px;
        --board-pad: 6px;
        --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
    }
    DIV.game-container {
        flex: 1 1 auto;
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
        padding: 8px;
        gap: 12px;
        align-items: flex-start;
        justify-content: center;
        overflow: visible;
    }
    DIV.board {
        height: calc(var(--point-h) * 2 + 2 * var(--board-pad));
        max-height: none;
        width: auto;
        margin: 0 auto;
    }
}

/* Ensure rotate overlay is never shown in any orientation */
DIV.rotate-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* Ensure all chrome elements are visible in all orientations */
DIV.game-toolbar,
DIV.match-header,
DIV.race-panel,
DIV.power-panel,
DIV.move-history,
DIV.turn-banner,
DIV.notice,
P.play-hint,
DIV.side-container,
DIV.dice-block,
DIV.mobile-dock {
    display: inherit;
}

/* Ensure rotate overlay is never shown by default (portrait overrides below) */
DIV.rotate-overlay {
    display: none !important;
}

/* ---- Two-player / mode lobby ---- */
DIV.lobby-mode-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9590;
  margin: 10px 0 6px;
  text-align: center;
}
DIV.lobby-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
BUTTON.lobby-mode-btn {
  flex: 1 1 30%;
  min-width: 5.5rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #e8d4a8;
  border-radius: 12px;
  padding: 10px 8px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
BUTTON.lobby-mode-btn:active {
  transform: scale(0.97);
}
BUTTON.lobby-mode-btn.is-selected {
  background: linear-gradient(135deg, rgba(240, 193, 75, 0.25), rgba(196, 165, 116, 0.2));
  border-color: #f0c14b;
  color: #fff8e7;
  box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.35);
}
DIV.lobby-diff-section[hidden] {
  display: none !important;
}

/* ============================================================
   Landscape-only fullscreen game (2026-10-02)
   - portrait: rotate overlay blocks the whole game
   - landscape: no title/footer/scroll; game fills the viewport
   ============================================================ */

@media (orientation: portrait) {
    DIV#rotate-overlay.rotate-overlay {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 2147483000 !important;
        background: var(--surface, #12141a);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 14px;
        padding: 24px;
        color: var(--gold, #f0c14b);
    }

    DIV#rotate-overlay.rotate-overlay .rotate-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        max-width: 320px;
    }

    DIV#rotate-overlay.rotate-overlay .rotate-icon {
        color: var(--gold, #f0c14b);
        animation: rotate-phone 1.8s ease-in-out infinite;
    }

    @keyframes rotate-phone {
        0%, 20% { transform: rotate(0deg); }
        60%, 100% { transform: rotate(90deg); }
    }

    DIV#rotate-overlay.rotate-overlay .rotate-text {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.6;
        color: var(--text, #e8e6e3);
    }

    DIV#rotate-overlay.rotate-overlay .rotate-text-en {
        margin: 0;
        font-size: 0.8rem;
        color: var(--text-muted, #9a9590);
    }

    /* Game behind the overlay must not be scrollable/interactable */
    body.bg-app {
        overflow: hidden !important;
    }

    body.bg-app .app-shell {
        visibility: hidden;
    }
}


/* ---------- Landscape: the screen IS the game (compact) ---------- */
@media (orientation: landscape) {
    html,
    body.bg-app {
        height: 100%;
        overflow: hidden !important;
    }

    body.bg-app .app-shell {
        display: flex !important;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding: 4px 8px !important;
        justify-content: center;
        overflow: hidden !important;
    }

    /* No chrome — only the game */
    body.bg-app .app-title,
    body.bg-app .app-subtitle,
    body.bg-app .app-footer {
        display: none !important;
    }

    /* Info panels off; dock (Roll/Undo/Suggest) on */
    DIV.match-header,
    DIV.race-panel,
    DIV.power-panel,
    DIV.move-history,
    P.play-hint,
    DIV.game-toolbar {
        display: none !important;
    }

    DIV.mobile-dock {
        display: flex !important;
    }

    /* Width budget: shell(16) + gc(16) + gap(12) + side(180) + board borders/pad(32) */
    :root {
        --point-w: clamp(34px, calc((100vw - 256px) / 14), 66px);
        --point-h: clamp(84px, calc((100dvh - 210px) / 2), 130px);
        --checker-size: clamp(22px, calc(var(--point-w) * 0.62), 40px);
        --stack-step: calc((var(--point-h) - var(--checker-size) - 6px) / 4);
    }

    DIV.game-container {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        max-width: 1040px;
        width: 100%;
        min-height: 0;
        margin: 0 auto;
        padding: 4px 8px 76px !important;
        gap: 10px;
        overflow: hidden;
    }

    DIV.turn-banner {
        flex: 0 0 100%;
        width: 100%;
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    DIV.board-wrap {
        flex: 0 1 auto;
        overflow: visible;
        width: max-content;
        max-width: none;
        margin: 0 auto;
    }

    DIV.board {
        width: calc(var(--point-w) * 14);
        min-width: 0;
        max-width: none;
        height: calc(var(--point-h) * 2);
        margin: 0 auto;
    }

    /* Compact side panel: dice + status + roll fit the board height */
    DIV.side-container {
        flex: 0 0 auto;
        align-self: center;
        min-width: 132px;
        max-width: 170px;
        /* never taller than the board line — scrolls if content grows */
        max-height: calc(var(--point-h) * 2 + 24px);
        padding: 8px;
        gap: 6px;
        overflow-y: auto;
    }

    DIV.side-container DIV.dice-block {
        gap: 4px;
    }

    DIV.side-container DIV.dice-container {
        min-height: 0;
    }

    DIV.side-container BUTTON.roll-dice-btn {
        min-height: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ============================================================
   PWA install banner — shown above everything (even the rotate
   overlay) so the user can install before starting a game.
   ============================================================ */
.install-banner {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(560px, calc(100vw - 24px));
    padding: 12px 14px;
    background: linear-gradient(135deg, #2a3040 0%, #171b24 100%);
    border: 1px solid rgba(240, 193, 75, 0.5);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 24px rgba(240, 193, 75, 0.15);
    color: var(--text, #e8e6e3);
    font-family: inherit;
    animation: install-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    direction: rtl;
}

.install-banner[hidden] {
    display: none !important;
}

@keyframes install-pop {
    from { transform: translateX(-50%) translateY(24px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.install-icon {
    font-size: 1.8rem;
    flex: 0 0 auto;
}

.install-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.install-text strong {
    font-size: 0.95rem;
    color: var(--gold, #f0c14b);
}

.install-text span {
    font-size: 0.75rem;
    color: var(--text-muted, #9a9590);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.install-btn {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    border-radius: 12px;
    padding: 12px 22px;
    min-height: 44px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    color: #1a1200;
    background: linear-gradient(135deg, #f0c14b 0%, #e8c56a 100%);
    box-shadow: 0 4px 14px rgba(240, 193, 75, 0.35);
}

.install-btn:active {
    transform: scale(0.96);
}

.install-dismiss {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted, #9a9590);
    font-size: 1.4rem;
    line-height: 1;
    padding: 8px;
    cursor: pointer;
}

@media (orientation: landscape) and (max-height: 430px) {
    .install-banner {
        bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
        padding: 8px 12px;
    }
    .install-icon { font-size: 1.4rem; }
}