/* Chess vs bot — "real board on a table" stage. Scoped to #gameWrap so checkers keeps its own look. */
#gameWrap {
  --wood-hi: #8a5a2b; --wood-mid: #5a3719; --wood-lo: #2c1809;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255,214,150,.13) 0%, rgba(255,190,110,.04) 38%, transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, #120d09 0%, #07060a 70%),
    #07060a;
}

/* ── side panels: quiet glass ── */
#gameWrap .bot-left, #gameWrap .bot-right { background: linear-gradient(180deg, rgba(18,14,12,.78), rgba(8,8,12,.9)); border-color: rgba(212,175,55,.14);
  box-shadow: 0 0 60px -20px rgba(0,0,0,.9); }
#gameWrap .rpanel-title { font-family: 'Bodoni Moda', Georgia, serif; font-size: 16px; }

/* ── player strips: nameplates ── */
#gameWrap .ps2 { border-radius: 16px; border: 1px solid rgba(212,175,55,.22); background: linear-gradient(135deg, rgba(34,24,16,.92), rgba(12,10,12,.96));
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 14px 28px -18px rgba(0,0,0,.95); }
#gameWrap .ps2-timer { font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .02em; border-radius: 10px; background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 1px 3px rgba(0,0,0,.7) inset; }

/* ── the board: wooden frame, inlay line, felt-lit squares ── */
#gameWrap .eval-wrap { width: auto; gap: 14px; justify-content: center; }
#gameWrap #board-container { flex: 0 0 auto; aspect-ratio: 1 / 1; height: 100%; padding: clamp(10px, 2.2vw, 22px); border-radius: 14px; border: 0; overflow: hidden;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.10) 0 3px, rgba(255,255,255,.035) 3px 7px, rgba(0,0,0,.06) 7px 12px),
    linear-gradient(145deg, var(--wood-hi), var(--wood-mid) 52%, var(--wood-lo));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -8px 14px rgba(0,0,0,.45) inset,
    0 50px 80px -30px rgba(0,0,0,.98),
    0 18px 30px -12px rgba(0,0,0,.7); }
#gameWrap #board-container::before { content: ''; position: absolute; inset: clamp(6px, 1.5vw, 15px); border-radius: 8px; pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 1px rgba(232,200,120,.55), 0 0 0 2px rgba(0,0,0,.55); }
#gameWrap #board { border-radius: 4px; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 6px 18px rgba(0,0,0,.7) inset; }
#gameWrap #board::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse 85% 85% at 50% 38%, rgba(255,240,205,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%, rgba(0,0,0,.14)); }

#gameWrap .sq.light { background-color: var(--sq-light);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,0) 48%, rgba(0,0,0,.08)),
    repeating-linear-gradient(94deg, rgba(120,80,30,.045) 0 2px, rgba(255,255,255,.04) 2px 6px, rgba(120,80,30,.03) 6px 10px); }
#gameWrap .sq.dark { background-color: var(--sq-dark);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%, rgba(0,0,0,.2)),
    repeating-linear-gradient(86deg, rgba(0,0,0,.07) 0 2px, rgba(255,255,255,.03) 2px 5px, rgba(0,0,0,.05) 5px 11px); }
#gameWrap .sq { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }

/* pieces: heavier, with a contact shadow so they sit on the wood */
#gameWrap .piece-img { width: 92%; height: 92%; filter: drop-shadow(0 7px 4px rgba(0,0,0,.55)) drop-shadow(0 1px 0 rgba(255,255,255,.18)); }
#gameWrap .sq:hover .piece-img { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 14px 10px rgba(0,0,0,.6)); }
#gameWrap .sq.move::after { background: radial-gradient(circle, rgba(250,230,150,.95) 0%, rgba(212,175,55,.6) 100%); box-shadow: 0 0 14px rgba(250,230,150,.65); }
#gameWrap .sq.sel { box-shadow: inset 0 0 0 3px #fbe98a, 0 0 22px rgba(250,230,150,.55) !important; }

/* evaluation bar: slimmer, brass */
#gameWrap .eval-bar { width: 10px; border-radius: 99px; border: 1px solid rgba(232,200,120,.35); box-shadow: 0 1px 2px rgba(0,0,0,.8) inset; }

/* status + toolbar */
#gameWrap .sbar { border-radius: 99px; font-weight: 700; letter-spacing: .01em; }
#gameWrap .b3d-tool-btn { border-radius: 12px; }

/* ── perspective mode: board lies on the table, pieces stand up ── */
#gameWrap.persp .bot-center { perspective: 2600px; perspective-origin: 50% 24%; }
#gameWrap.persp .eval-wrap { transform-style: preserve-3d; }
#gameWrap.persp #board-container { overflow: visible; transform-style: preserve-3d; transform-origin: 50% 70%; transform: rotateX(18deg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
#gameWrap.persp #board { overflow: visible; transform-style: preserve-3d; }
#gameWrap.persp #board::after { display: none; }
#gameWrap.persp .sq { transform-style: flat; }
#gameWrap.persp .piece-img { transform-origin: 50% 88%; transform: rotateX(-18deg) translateY(-6%); position: relative; z-index: 2; overflow: visible;
  filter: drop-shadow(0 10px 5px rgba(0,0,0,.5)); }
#gameWrap.persp .sq:hover .piece-img { transform: rotateX(-18deg) translateY(-12%) scale(1.04); }
#gameWrap.persp .sq.move::after, #gameWrap.persp .sq.capture::after { transform: translateZ(1px); }
#gameWrap.persp .bot-center { padding-top: 22px; }

#perspBtn.active { color: #1c1405; background: linear-gradient(180deg, #f5e070, #c99a1d); border-color: transparent; }

@media (max-width: 900px) {
  #gameWrap #board-container { padding: 8px; border-radius: 10px; }
  #gameWrap #board-container::before { inset: 5px; }
  #gameWrap.persp #board-container { transform: rotateX(18deg); }
  #gameWrap.persp .piece-img { transform: rotateX(-18deg) translateY(-5%); }
}
@media (prefers-reduced-motion: reduce) { #gameWrap.persp #board-container { transition: none; } }

/* keep the whole stage (strips + framed board) inside the screen on desktop */
@media (min-width: 901px) {
  #gameWrap { --gc-board-size: min(calc(100vh - 345px), calc(100vw - 560px), 700px); }
}

/* Perspective: the flat wrapper boxes must not catch clicks meant for the tilted board behind them. */
#gameWrap.persp .eval-wrap, #gameWrap.persp #game-fs-root { pointer-events: none; }
#gameWrap.persp #board-container, #gameWrap.persp #board, #gameWrap.persp .sq, #gameWrap.persp .eval-bar { pointer-events: auto; }

/* the frame padding must live inside the computed board size, not on top of it */
#gameWrap #board-container { box-sizing: border-box; }
@media (max-width: 900px) { #gameWrap .eval-wrap { max-width: 100%; } #gameWrap #board-container { max-width: 100%; } }

/* phones: a touch smaller so the player strip is never clipped by the move panel below */
@media (max-width: 900px) { #gameWrap { --gc-board-size: min(calc((100vw - 28px) / var(--gc-zoom, 1)), calc(100dvh - 318px)); } }

@media (max-width: 900px) {
  #gameWrap .board-top-row, #gameWrap .sbar, #gameWrap .ps2 { width: min(calc((100vw - 28px) / var(--gc-zoom, 1)), calc(100dvh - 318px)) !important; }
  #gameWrap .eval-wrap { width: min(calc((100vw - 28px) / var(--gc-zoom, 1)), calc(100dvh - 318px)) !important; height: min(calc((100vw - 28px) / var(--gc-zoom, 1)), calc(100dvh - 318px)) !important; }
}

/* the bot's speech bubble floats over the stage instead of pushing the board around */
#gameWrap .bot-speech-wrap { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: auto; max-width: 92%; margin: 0; z-index: 30; pointer-events: none; }

/* ═════════ Setup screen: choose your opponent ═════════ */
#setup { background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255,214,150,.10), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, #120d09 0%, #07060a 72%), #07060a; }
#setup .setup-inner h1, #setup .setup-inner h2 { font-family: 'Bodoni Moda', Georgia, serif; letter-spacing: -.01em; }
#setup .setup-mode-bar { border-radius: 20px; border: 1px solid rgba(212,175,55,.22); background: linear-gradient(135deg, rgba(34,24,16,.9), rgba(12,10,12,.96));
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 34px -22px rgba(0,0,0,.95); }
#setup .bot-grid { gap: 14px; }
#setup .bot-card { border-radius: 22px; border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(30,22,16,.86), rgba(10,9,12,.96));
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 20px 34px -24px rgba(0,0,0,.95);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease; }
#setup .bot-card:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.5); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 28px 44px -22px rgba(0,0,0,1), 0 0 36px -14px rgba(212,175,55,.5); }
#setup .bot-card.sel, #setup .bot-card.active, #setup .bot-card.selected { border-color: rgba(245,224,112,.85);
  box-shadow: 0 0 0 1px rgba(245,224,112,.45), 0 26px 44px -20px rgba(212,175,55,.55), 0 1px 0 rgba(255,255,255,.12) inset; }
#setup .bc-name { font-family: 'Bodoni Moda', Georgia, serif; font-size: 18px; letter-spacing: 0; }
#setup .bc-elo { font-variant-numeric: tabular-nums; }
#setup .btn-go { min-height: 54px; border-radius: 99px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #fbe98a, #c99a1d); color: #1c1405; border: 0;
  box-shadow: 0 18px 36px -14px rgba(212,175,55,.85), 0 1px 0 rgba(255,255,255,.6) inset; transition: transform .2s ease, filter .2s ease; }
#setup .btn-go:hover { transform: translateY(-2px); filter: brightness(1.07); }
#setup .btn-go.checkers { background: linear-gradient(180deg, #8df0c3, #10a56b); color: #04150e; box-shadow: 0 18px 36px -14px rgba(52,211,153,.8), 0 1px 0 rgba(255,255,255,.5) inset; }
#setup .tcp-btn.active, #setup .dep-btn.active, #setup .mode-chip.active { background: linear-gradient(180deg, #f5e070, #c99a1d); color: #1c1405; border-color: transparent; }

/* ═════════ Desktop: biggest board that still fits. The bottom nav is not needed mid-game, so it steps aside. ═════════ */
@media (min-width: 901px) {
  body:has(#gameWrap:not(.hidden)) .bnav { display: none !important; }
  #gameWrap { --gc-board-size: min(calc(100vh - 224px), calc(100vw - 500px), 900px); }
  #gameWrap .ps2 { padding: 5px 12px; min-height: 0; }
  #gameWrap .bot-center { gap: 3px; }
  #gameWrap #board-container { padding: clamp(8px, 1.3vw, 16px); }
  #gameWrap.persp #board-container { transform-origin: 50% 45%; }
}

@media (min-width: 901px) {
  #gameWrap.persp { --gc-board-size: min(calc(100vh - 246px), calc(100vw - 500px), 900px); }
  #gameWrap.persp #plStrip { position: relative; z-index: 6; margin-top: 8px; }
}

/* ── Redesign D ── history panel title on one line; the language string already carries its own icon, so the extra one goes */
#gameWrap .rpanel-title { white-space: nowrap; gap: 0; }
#gameWrap .rpanel-title > span:first-child { display: none; }
#gameWrap .rpanel-moves, #gameWrap .ps2-timer, #gameWrap .rpanel-badge { font-variant-numeric: tabular-nums; }
/* Resign is the one red button of the panel, undo is quiet */
#gameWrap .rpanel-foot .btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(226,200,132,.22); color: #e8e2d2; }

/* ── Phone: the history panel was capped at 200px, which pushed "undo" and "resign" out of the clipped area (unreachable).
   Now the panel grows with its content, the move list scrolls inside a fixed height, and the two actions stick to the bottom edge where the thumb is. */
@media (max-width: 768px) {
  #gameWrap .bot-center { flex: 0 0 auto; height: auto; }
  #gameWrap .bot-right { max-height: none; min-height: 0; flex: 0 0 auto; overflow: visible; }
  #gameWrap .rpanel-moves { flex: none; max-height: 120px; min-height: 64px; }
  #gameWrap .rpanel-foot { position: sticky; bottom: 0; z-index: 6; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(7,9,16,.97); border-top: 1px solid rgba(226,200,132,.2); }
  #gameWrap .rpanel-foot .btn { min-height: 46px; font-size: 14px; border-radius: 14px; }
}