/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   Games140 · board pages (Go, Chess, Risto) — Brian 10/27: "why is the go board so small? there are
   too many other things on this page."

   The board is the hero: the largest board that fits the viewport after the topbar and ONE slim task
   line. Phone/portrait: board full width, a fixed-height panel under it. Landscape/desktop: board takes
   the full available height, the panel sits beside it. Every region has a fixed size computed once
   from the viewport (board-page.js), so nothing that appears during play (a result, coach text, the
   level sheet) can move the board or the page. Content that does not fit scrolls INSIDE the panel.

   Art direction: the thinking-journal tokens from profile.css — warm Paper ground, Leaf panels, ruled
   hairlines rather than boxes, Iris as the one accent, Moss for right and Ember for wrong (never alarm
   red). Contrast measured 10/27 on Leaf: Ink 16.2:1, Ink-2 7.5:1, Iris 6.4:1, Moss 5.2:1, Ember 5.6:1 (all AA).
   ───────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --bp-ink: #1F1C36; --bp-ink-2: #545169; --bp-paper: #F6F3EA; --bp-leaf: #FFFDF8; --bp-rule: #E2DCCD; --bp-rule-2: #CFC7B4;
  --bp-iris: #5546D6; --bp-iris-fill: #6B5CE7; --bp-iris-soft: #ECE9FF; --bp-on-iris: #FFFFFF;
  --bp-moss: #2D7A43; --bp-moss-soft: #E3F1E5; --bp-ember: #A84A22; --bp-ember-soft: #F8E6DC;
  --bp-gap: 12px; --bp-task: 44px;
  --bp-w: min(94vw, 60svh); --bp-h: var(--bp-w); --bp-side-w: 340px; --bp-side-h: 300px;   /* fallbacks until board-page.js runs */
}
body.bp-page { background: var(--bp-paper); }
body.bp-page main.bp { max-width: none; margin: 0; padding: var(--bp-gap) var(--bp-pad, 8px) 0; box-sizing: border-box; }
.bp { display: grid; gap: var(--bp-gap); justify-content: center; align-content: start;
  grid-template-columns: var(--bp-w); grid-template-rows: var(--bp-task) var(--bp-h) var(--bp-side-h);
  grid-template-areas: "task" "board" "side"; }
.bp.bp-land { grid-template-columns: var(--bp-w) var(--bp-side-w); grid-template-rows: var(--bp-task) var(--bp-h);
  grid-template-areas: "task side" "board side"; }
.bp.bp-land .bp-side { height: calc(var(--bp-task) + var(--bp-gap) + var(--bp-h)); }

/* ── the one slim task line ── */
.bp:not(.bp-land) .bp-task { width: var(--bp-task-w, auto); justify-self: center; }
.bp-task { grid-area: task; display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--bp-task); }
.bp-line { flex: 1; min-width: 0; margin: 0; font: 800 14px/1.25 "Nunito", sans-serif; color: var(--bp-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-line .muted { color: var(--bp-ink-2); font-weight: 700; }
.bp-chip { flex: none; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--bp-iris-soft); color: var(--bp-iris); font: 800 13.5px "Nunito", sans-serif; white-space: nowrap; }
.bp-chip:hover { background: #E1DCFF; }
.bp-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-content: center;
  background: transparent; color: var(--bp-ink-2); box-shadow: inset 0 0 0 1.5px var(--bp-rule-2); }
.bp-icon:hover { color: var(--bp-iris); box-shadow: inset 0 0 0 1.5px var(--bp-iris); }
.bp-icon svg { width: 20px; height: 20px; }
.bp-chip:focus-visible, .bp-icon:focus-visible, .bp-seg button:focus-visible, .bp-side .btn:focus-visible, .bp-quiet:focus-visible { outline: 3px solid var(--bp-iris); outline-offset: 2px; }

/* ── the board ── */
.bp-board { grid-area: board; width: var(--bp-w); height: var(--bp-h); position: relative; display: grid; place-items: center; }

/* ── the panel: segmented control · result line · coach/body (scrolls inside) · actions ── */
.bp-side { grid-area: side; min-width: 0; height: var(--bp-side-h); display: flex; flex-direction: column; gap: 8px;
  background: var(--bp-leaf); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--bp-rule); padding: 10px 12px; box-sizing: border-box; overflow: hidden; }
.bp-seg { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bp-paper); box-shadow: inset 0 0 0 1px var(--bp-rule); }
.bp-seg button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font: 800 13px "Nunito", sans-serif; color: var(--bp-ink-2); padding: 0 6px; white-space: nowrap; }
.bp-seg button[aria-pressed="true"] { background: var(--bp-leaf); color: var(--bp-ink); box-shadow: 0 1px 3px rgba(31,28,54,.16), inset 0 0 0 1px var(--bp-rule); }
.bp-msg { flex: none; height: 42px; overflow: hidden; display: flex; align-items: center; gap: 6px;
  font: 800 14.5px/1.3 "Nunito", sans-serif; color: var(--bp-ink); }
.bp-msg.ok { color: var(--bp-moss); } .bp-msg.no { color: var(--bp-ember); }
.bp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 13.5px; line-height: 1.45; color: var(--bp-ink); }
.bp-body p { margin: 0 0 6px; }
.bp-body .k { font: 800 11.5px "Nunito", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--bp-ink-2); margin: 0 0 2px; }
.bp-body .learned { padding: 8px 10px; border-radius: 12px; background: var(--bp-paper); margin: 0 0 8px; }
.bp-body .rate { padding: 6px 0; border-top: 1px solid var(--bp-rule); }
.bp-body .up { color: var(--bp-moss); font-weight: 800; } .bp-body .down { color: var(--bp-ember); font-weight: 800; }
.bp-sharerow { margin: 0 0 8px; } .bp-sharerow .fin-share { min-height: 44px; }
.bp-acts { flex: none; display: flex; flex-direction: column; gap: 6px; }
.bp-primary { min-height: 48px; height: 48px;   /* both action rows keep their space even when empty, so the panel never reflows */ display: flex; flex-direction: column; justify-content: center; }
.bp-primary .btn { width: 100%; min-height: 48px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
.bp-primary .g140-next-note { display: none; }   /* the panel has no room for it; "Levels"/secondary links cover choosing another game */
.bp-secondary { display: flex; flex-wrap: nowrap; gap: 4px 14px; justify-content: center; height: 44px; overflow: hidden; }
.bp-quiet { background: none; border: 0; padding: 0 4px; min-height: 44px; white-space: nowrap; cursor: pointer; color: var(--bp-iris); font: 800 13.5px "Nunito", sans-serif; text-decoration: none; display: inline-flex; align-items: center; }
.bp-quiet:hover { text-decoration: underline; }
.bp-quiet[disabled] { color: var(--bp-ink-2); cursor: default; text-decoration: none; opacity: .7; }

/* ── the level sheet (a modal dialog: opening it never moves the page) ── */
dialog.bp-sheet { border: 0; padding: 0; border-radius: 20px; max-width: min(520px, calc(100vw - 24px)); width: 100%; background: var(--bp-leaf); color: var(--bp-ink);
  box-shadow: 0 24px 60px -12px rgba(31,28,54,.45); }
dialog.bp-sheet::backdrop { background: rgba(31,28,54,.38); }
.bp-sheet-in { padding: 16px 16px 18px; max-height: min(80svh, 640px); overflow-y: auto; }
.bp-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.bp-sheet-h h2 { margin: 0; font: 900 18px "Nunito", sans-serif; }
.bp-sheet .card { box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; background: none; }
@media (max-width: 699px) {
  dialog.bp-sheet { margin: auto 0 0; max-width: 100vw; border-radius: 20px 20px 0 0; }
}

/* focus mode: the board and its panel only */
body.bp-focus header.topbar, body.bp-focus .rocket-fab, body.bp-focus #g140-foot { display: none !important; }
body.bp-page #g140-foot { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .bp * { transition: none !important; animation: none !important; } }