/* The shell's older token names, kept while game pages still use (and theme) them: each points at
   a Table Kit token (kit/tokens.css; docs/UI_GUIDE.md, Tokens). New code uses the --gc-* names. */
:root {
  --bg: var(--gc-bg);
  --bg2: var(--gc-surface);
  --panel: var(--gc-panel);
  --panel2: var(--gc-raised);
  --line: var(--gc-rule);
  --ink: var(--gc-text);
  --muted: var(--gc-text-2);
  --accent: var(--gc-signal);
  --danger: var(--gc-bad);
  --ok: var(--gc-good);
  --radius: 12px;
  --shadow: var(--gc-shadow);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--gc-font-ui);
}
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
kbd { font: 11px var(--gc-font-mono); background: var(--panel2); border: 1px solid var(--line);
      border-radius: 4px; padding: 0 4px; }

/* ---------- buttons: one family, four roles, two sizes (docs/UI_GUIDE.md, Buttons) ----------
   .btn (secondary) · .btn.primary (the one amber button of a decision) · .btn.ghost (quiet) ·
   .btn.danger (loses something) · .btn.mini (small). Labels: a verb and its object. */
.btn {
  min-height: 36px; padding: 6px 14px; border-radius: var(--gc-r-m); border: 1px solid var(--gc-rule-strong);
  background: var(--panel2); color: var(--ink); font-weight: 600; line-height: 1.3; cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { border-color: var(--gc-text-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover { background: var(--panel2); }
.btn.primary { background: var(--accent); color: var(--gc-signal-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.block { width: 100%; }
.btn.mini { min-height: 28px; padding: 3px 10px; font-size: 12.5px; border-radius: 6px; }
.btn .sub { display: block; font-size: 11px; opacity: .75; font-weight: 400; }
/* Keyboard focus shows on every control, in the signal colour (the mouse doesn't trigger it). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.panel h3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600;
            display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* ---------- map ---------- */

.hex-hit { fill: transparent; cursor: default; }
.hex-hit.clickable { cursor: pointer; }
.hex-hit.clickable:hover { fill: rgba(255, 255, 255, .18); }
.legal-ring { fill: none; stroke-width: 3; stroke-dasharray: 5 4; animation: march 1s linear infinite; pointer-events: none; }
.legal-fill { pointer-events: none; opacity: .22; }
@keyframes march { to { stroke-dashoffset: -18; } }
.selected-ring { fill: none; stroke: #fff; stroke-width: 3.5; pointer-events: none; filter: drop-shadow(0 0 4px rgba(255,255,255,.7)); }
.changed-ring { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; stroke-dasharray: 2 3; pointer-events: none; }
/* ---------- turn panel ---------- */
.turn-panel { border-width: 1px; position: relative; overflow: hidden; }
.turn-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--pc, var(--accent)); }
.turn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.turn-head .who { font-size: 18px; font-weight: 700; }
.turn-head .tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.turn-panel .what { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.turn-panel .what b { color: var(--ink); font-weight: 600; }
.flash { animation: flash .6s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--pc, var(--accent)); } to { box-shadow: 0 0 0 0 transparent; } }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hint { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.hint::before { content: "›"; color: var(--accent); font-weight: 700; }
.pending { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--bg2); border: 1px dashed var(--line);
           border-radius: 9px; padding: 8px 10px; font-size: 12px; margin-bottom: 10px; }
.pending .chip { background: var(--panel2); padding: 2px 8px; border-radius: 6px; }
.pending .arrow { color: var(--muted); }
html[data-corners] .pending { background: none; border: 0; padding: 0; margin-bottom: 6px; gap: 4px; color: var(--muted); }
html[data-corners] .pending .chip { background: none; padding: 0; }
/* The decision card's Undo line (your turn): the button on the right, why it is off on its left. */
.undo-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -2px 0 8px; min-height: 26px; }
.undo-row .why { flex: 1; min-width: 0; font-size: 11px; color: var(--muted); line-height: 1.3; }
.undo-row .btn { flex: none; }
.error { background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .35); color: #ffc2c2; border-radius: 9px;
         padding: 8px 10px; font-size: 12px; margin-bottom: 10px; }
.stat-line { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 12px; flex-wrap: wrap; }
.stat-line b { color: var(--ink); font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* A choice in the decision card: a short label (and an optional .sub line); amber edge on hover. */
.chip-btn { border: 1px solid var(--gc-rule-strong); background: var(--panel2); color: var(--ink); border-radius: var(--gc-r-m);
            padding: 7px 11px; cursor: pointer; min-width: 44px; min-height: 36px; text-align: center; font-weight: 500;
            transition: border-color .12s; }
.chip-btn:hover { border-color: var(--accent); }
.chip-btn:disabled { opacity: .4; cursor: default; }
.chip-btn.on { background: var(--accent); color: var(--gc-signal-ink); border-color: var(--accent); font-weight: 600; }
.chip-btn .sub { display: block; font-size: 10px; opacity: .7; }

.stepper { display: flex; align-items: center; gap: 10px; }
.stepper .val { font-size: 28px; font-weight: 700; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.stepper .btn { width: 38px; height: 38px; padding: 0; font-size: 18px; }
input[type=range] { width: 100%; accent-color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.card { border: 1px solid var(--line); background: var(--panel2); border-radius: 10px; padding: 10px; text-align: left; cursor: pointer;
        display: flex; flex-direction: column; gap: 3px; position: relative; transition: border-color .15s, transform .1s; }
.card:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.card:disabled { cursor: default; opacity: .5; }
.card .t { font-weight: 600; }
.card .d { font-size: 11px; color: var(--muted); }
.card .owner { position: absolute; top: 8px; right: 8px; font-size: 10px; padding: 1px 6px; border-radius: 999px; color: #111; font-weight: 700; }
.card.taken { opacity: .55; }


/* ---------- players ---------- */
.order-strip { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.order-strip .o { display: inline-flex; align-items: center; gap: 5px; }
.order-strip .sep { color: var(--muted); }
.pdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.players { display: flex; flex-direction: column; gap: 8px; }
.pcard { border: 1px solid var(--line); background: var(--panel2); border-radius: 10px; padding: 10px 12px; position: relative; overflow: hidden; }
.pcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc); }
.pcard.active { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 0 18px -6px var(--pc); }
.pcard.out { opacity: .5; }
.pcard .top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pcard .name { font-weight: 700; }
.pcard .badge { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--bg2); color: var(--muted); border: 1px solid var(--line); }
.pcard .badge.act { background: rgba(242,181,68,.14); color: var(--accent); border-color: rgba(242,181,68,.35); }
.pcard .badge.warn { background: rgba(255,107,107,.12); color: #ffb3b3; border-color: rgba(255,107,107,.35); }
.pcard .pos { margin-left: auto; font: 700 12px var(--gc-font-mono); color: var(--muted); }
.pflags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

/* ---------- log ---------- */
.log-panel { display: flex; flex-direction: column; max-height: 420px; }
.log-panel[hidden] { display: none; } /* its display would otherwise show it under every other menu tab */
.log { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.log-batch { border-left: 2px solid var(--line); padding-left: 10px; }
.log-batch .ev { font-size: 12px; display: flex; gap: 6px; align-items: baseline; }
.log-batch .ev .t { color: var(--muted); font: 10px var(--gc-font-mono); min-width: 22px; }
.log-batch .chance { color: var(--muted); }
.log-batch .diff { font-size: 11px; color: var(--muted); margin-top: 2px; }
.log-batch .diff .up { color: var(--ok); }
.log-batch .diff .down { color: var(--danger); }

/* ---------- misc ---------- */
.tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--panel2); border: 1px solid var(--gc-rule-strong);
           border-radius: 9px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); max-width: 260px; }
.tooltip .tt { font-weight: 700; margin-bottom: 2px; }
.tooltip .tl { color: var(--muted); }
.toast { position: fixed; left: 50%; top: calc(var(--bar-h, 44px) + env(safe-area-inset-top, 0px) + 44px); transform: translateX(-50%); background: #2b1f22; border: 1px solid rgba(255,107,107,.5);
         color: #ffd0d0; padding: 10px 16px; border-radius: 10px; z-index: 60; box-shadow: var(--shadow); max-width: 90vw; }
dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: min(520px, 92vw); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
dialog h2 { margin: 0 0 4px; }
.seat-rows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.seat-count { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.seat-count[hidden] { display: none; }
.seat-count .stepper { gap: 6px; }
.seat-count .stepper .val { font-size: 18px; min-width: 26px; }
.seat-count .stepper .btn { width: 32px; height: 32px; }
.seat-row { display: flex; gap: 8px; align-items: center; }
.seat-row input[type=text] { flex: 1; }
.seat-row.level-row { flex-wrap: wrap; }
.seat-row .level-select { flex: none; padding: 5px 6px; }
.seat-row .level-about { flex-basis: 100%; padding-left: 22px; min-height: 1em; }
.lobby-seat .level-about { flex-basis: 100%; padding-left: 60px; }
/* Either/or: a segmented control (never a button that changes its own label). */
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--gc-r-m); background: var(--bg); }
.seg button { border: 0; background: transparent; padding: 5px 10px; cursor: pointer; color: var(--muted); border-radius: 6px; font-weight: 600; }
.seg button.on { background: var(--panel2); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
input[type=text], input[type=number], input[type=search], select { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--gc-r-m); padding: 7px 9px; font: inherit; min-height: 36px; }
input[type=search] { -webkit-appearance: none; appearance: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.form-grid label.check { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.seat-toggle { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: transparent; color: var(--muted);
               border: 1px solid var(--line); cursor: pointer; }
.seat-toggle:hover { border-color: var(--accent); color: var(--ink); }
.seat-toggle.on { background: rgba(116, 143, 252, .15); color: #bac8ff; border-color: rgba(116, 143, 252, .45); }

.log-batch .ev.auto { opacity: .75; }
.auto-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 0 5px; border-radius: 4px;
            border: 1px solid var(--line); color: var(--muted); margin-left: 4px; }

.seat-select { font-size: 11px; padding: 1px 4px; border-radius: 999px; background: var(--bg2); color: var(--muted);
               border: 1px solid var(--line); cursor: pointer; }
.seat-select.on { background: rgba(116, 143, 252, .15); color: #bac8ff; border-color: rgba(116, 143, 252, .45); }
.log-batch .note { font-size: 11px; color: #bac8ff; margin-top: 2px; opacity: .85; }
/* (Not amber: a spinner says someone else is busy, never that you can act; principle 2.) */
.spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--gc-text-2);
           display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seg button { padding: 6px 8px; font-size: 12px; }

.notice { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px;
          background: rgba(250, 176, 5, .12); border: 1px solid rgba(250, 176, 5, .45); color: #ffe8a3; font-size: 13px; }
.notice[hidden] { display: none; }
.notice .msg { flex: 1; }
.notice .btn { padding: 2px 10px; }

.seg button { white-space: nowrap; }
#seat-rows .seg button { padding: 6px 7px; }

dialog { width: min(600px, 94vw); }
.seat-row input[type=text] { min-width: 0; }
.seat-row .seg { flex: none; }

/* ---------- online rooms ---------- */
.room-chip { font-family: var(--gc-font-mono); color: var(--accent); }
.room-code { font-family: var(--gc-font-mono); color: var(--accent); letter-spacing: .08em; }
.lobby-seats { display: flex; flex-direction: column; gap: 6px; }
.lobby-seat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel2); border: 1px solid var(--line);
              border-left: 3px solid var(--pc, var(--line)); border-radius: 9px; padding: 8px 10px; }
.online { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.online.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.room-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.room-choices h3, #room-dialog h3 { margin: 0; font-size: 14px; }
@media (max-width: 560px) { .room-choices { grid-template-columns: 1fr; } }
.mono { font-family: var(--gc-font-mono); }

/* ================================================================ full-screen shell
   The map fills the window; a thin bar, the decision card (sheet), the stats overlay and the
   drawer float over it. The page itself never scrolls: only the map pans and zooms. */
:root {
  --bar-h: 70px; /* the bar's two rows: controls (44 px) and the players strip (26 px) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --card-w: 380px;
}
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* No page zoom: panels can scroll but not pinch (a pinch that starts on a panel would zoom the whole
   page); the map handles its own pinch. */
html, body, body * { touch-action: pan-x pan-y; }
#map, .sheet-handle, .info-btn { touch-action: none; }
body { -webkit-tap-highlight-color: transparent; }
.app { position: fixed; inset: 0; }

.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid transparent;
            background: transparent; color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1; padding: 0; flex: none; }
.icon-btn:hover { background: rgba(255, 255, 255, .06); }
.icon-btn:active { background: rgba(255, 255, 255, .12); }
.icon-btn.on { background: rgba(242, 181, 68, .16); color: var(--accent); }

/* ---------- bar ---------- */
.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column;
       height: calc(var(--bar-h) + var(--safe-t)); padding: var(--safe-t) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l));
       background: var(--bg2); border-bottom: 1px solid var(--line); }
.bar-row { display: flex; align-items: center; gap: 8px; height: 44px; flex: none; }
.bar-turn { font: 600 12px/1 var(--gc-font-ui); white-space: nowrap; display: flex; align-items: center; gap: 6px;
            min-width: 0; flex: 0 1 auto; overflow: hidden; }
.bar-turn .t { background: var(--accent); color: #1a1a1a; border-radius: 6px; padding: 3px 6px; font-weight: 700; flex: none; }
.bar-turn .ph { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Library and Undo: an icon and a word (just the icon on phones); docs/UI_GUIDE.md, The bar. */
.bar-tool { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 8px; border-radius: 10px;
            border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; flex: none;
            font: 600 13px/1 var(--gc-font-ui); white-space: nowrap; }
.bar-tool:hover { background: rgba(255, 255, 255, .06); }
.bar-tool:active { background: rgba(255, 255, 255, .12); }
.bar-tool:disabled { opacity: .38; cursor: default; background: transparent; }
.bar-tool[hidden] { display: none; }
.bar-tool svg { flex: none; }
/* More is always the last thing in the bar (some games order their own parts with `order`). */
#btn-more { order: 20; }
/* The bots' Pause, inside the bot's pill in the bar (and in the sheet's title on phones). */
.pause-btn { flex: none; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); border-radius: 999px;
             padding: 3px 10px; font: 600 12px/1 var(--gc-font-ui); cursor: pointer; }
.pause-btn:hover { border-color: var(--muted); }
.sheet-title .pause-btn { display: none; margin-left: 8px; }
.bar-actor { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.bar-actor .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.bar-actor .st { color: var(--muted); overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.bar-actor .money { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; padding-left: 6px; }
.bar .room-chip { padding: 4px 8px; font-size: 12px; }
/* The game's name, top left (hidden on narrow screens, where the bar is full). */
.bar-title { font: 800 19px/1 var(--gc-font-display); letter-spacing: .01em; white-space: nowrap; flex: none; padding-right: 4px; }
@media (max-width: 699px) {
  .bar-title { display: none; }
  /* Phones: icons only, tighter, and the players panel moves into More (the bar stays one row). */
  .bar-row { gap: 4px; }
  .bar-tool { width: 36px; padding: 0; justify-content: center; }
  .bar-tool .lbl { display: none; }
  #btn-menu { display: none; }
  .bar-actor .pause-btn { display: none; }
  .sheet-title .pause-btn { display: inline-block; }
}
/* The game's views (GAME.views), when it has more than one. */
.view-switch { flex: none; }
.view-switch[hidden] { display: none; }
.view-switch button { padding: 5px 10px; font-size: 12px; }

#net-notice { position: absolute; z-index: 29; top: calc(var(--bar-h) + var(--safe-t) + 6px); left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); }

/* The players strip: one compact cell per player in turn order; its content follows the phase. */
.strip { display: flex; align-items: center; gap: 4px; height: 26px; flex: none; overflow: hidden; font-size: 11.5px;
         font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip .lbl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; flex: none; }
.strip .cell { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; min-width: 0; flex: 0 1 auto;
               overflow: hidden; border: 1px solid transparent; }
.strip .cell.now { border-color: var(--pc); background: rgba(255, 255, 255, .05); }
.strip .cell.out { opacity: .45; }
.strip .cell .nm { color: var(--muted); max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.strip .cell b { font-weight: 700; }
.strip .cell .k { color: var(--muted); font-size: 10px; margin-left: 1px; }
.strip .cell .neg { color: var(--danger); }
.strip .cell .lead { color: var(--accent); font-weight: 700; }
.strip .sep { color: var(--line); }
@media (max-width: 699px) { .strip .cell .nm { display: none; } .strip .cell { padding: 2px 4px; gap: 3px; } }

/* The last-move line: the step being shown (bots and other players, present.js), then for a few
   seconds; a bar in the mover's colour, and Skip while steps are shown. */
.ticker { position: absolute; z-index: 25; top: calc(var(--bar-h) + var(--safe-t) + 6px); left: 50%; transform: translate(-50%, -6px);
          max-width: min(92vw, 560px); padding: 5px 12px 5px 15px; border-radius: 999px; font-size: 12px; pointer-events: none;
          background: rgba(23, 27, 33, .92); border: 1px solid var(--line); box-shadow: var(--shadow);
          display: flex; align-items: center; gap: 6px;
          white-space: nowrap; overflow: hidden; opacity: 0;
          transition: opacity var(--gc-dur-base) var(--gc-ease-out), transform var(--gc-dur-base) var(--gc-ease-out); }
.ticker::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc, transparent); }
.ticker.show { opacity: 1; transform: translate(-50%, 0); }
.ticker .pdot { vertical-align: 0; flex: none; }
.ticker .what { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ticker .what b { margin-right: 4px; }
.ticker .skip { pointer-events: auto; flex: none; margin-left: 4px; font: 600 11px/1 var(--gc-font-ui); letter-spacing: .04em;
                text-transform: uppercase; color: var(--gc-text-2); background: transparent; border: 1px solid var(--gc-rule-strong);
                border-radius: var(--gc-r-m); padding: 6px 9px; cursor: pointer; }
.ticker .skip:hover { color: var(--gc-text); }
@media (pointer: coarse) { .ticker .skip { min-height: 32px; } }

/* Effects over everything (motion.js): a "+3" for a number that changed, a piece in flight. */
.fx-delta { position: fixed; z-index: 60; padding: 2px 8px; border-radius: 999px; pointer-events: none;
            font: 700 13px/1.3 var(--gc-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .45); will-change: transform, opacity; }
.fx-delta--gain { background: var(--gc-good); color: var(--gc-bg); }
.fx-delta--loss { background: var(--gc-bad); color: var(--gc-bg); }
.fx-ghost { pointer-events: none; }
/* A pill in a seat's colour (floatDelta's `colour`; its text colour is set to read on it). */
.fx-delta--seat { box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .45); }

/* Following the game (follow.js). A big play shown large: over the dimmed board, under the bar. */
.gate { position: fixed; inset: 0; z-index: 27; display: grid; place-items: center; cursor: pointer;
        padding: calc(var(--bar-h) + var(--safe-t) + 12px) calc(16px + var(--safe-r)) calc(16px + var(--safe-b, 0px)) calc(16px + var(--safe-l));
        background: color-mix(in srgb, var(--gc-bg) 76%, transparent); -webkit-tap-highlight-color: transparent; }
.gate-card { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(92vw, 460px); min-width: 0; }
.gate-img { display: block; max-width: min(72vw, 340px); max-height: 52vh; width: auto; height: auto; object-fit: contain;
            border-radius: var(--gc-r-m); filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6)); }
.gate-art { display: grid; place-items: center; max-width: min(72vw, 340px); max-height: 52vh; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6)); }
.gate-art > svg { width: min(72vw, 340px); height: auto; max-height: 52vh; overflow: visible; }
.gate-title { font: 800 34px/1.1 var(--gc-font-display); color: var(--gc-text); text-align: center; }
.gate-foot { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.gate-banner { min-width: 0; padding: 8px 16px; border-radius: 999px; background: var(--gc-raised); color: var(--gc-text);
               font: 600 14px/1.3 var(--gc-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); }
.gate-banner .pdot { margin-right: 7px; }
.gate-banner[style*="background"] .pdot { display: none; } /* (the banner is the seat's colour) */
.gate-skip { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gc-rule-strong);
             background: var(--gc-surface); color: var(--gc-text); font: 600 12.5px var(--gc-font-ui); cursor: pointer; }
@media (pointer: coarse) { .gate-skip { min-height: 44px; } }
/* A card bought (follow.js acquire): large in the middle over a lighter veil, then flown (and turned
   over, into a hidden pile) to its owner. */
.acq-veil { position: fixed; inset: 0; z-index: 27; cursor: pointer; background: color-mix(in srgb, var(--gc-bg) 62%, transparent);
            -webkit-tap-highlight-color: transparent; }
.acq { position: fixed; z-index: 28; pointer-events: none; perspective: 900px; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6));
       will-change: transform; }
.acq-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.acq-face { position: absolute; inset: 0; overflow: hidden; border-radius: var(--gc-r-m); backface-visibility: hidden;
            -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.acq-face > img, .acq-face > svg, .acq-face > * { display: block; width: 100%; height: 100%; object-fit: contain; }
.acq-back { transform: rotateY(180deg); }
.acq-plain { background: var(--gc-raised); border: 2px solid var(--gc-rule-strong); border-radius: inherit;
             background-image: repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in srgb, var(--gc-text) 7%, transparent) 8px 16px); }
.acq-banner { position: fixed; z-index: 28; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); pointer-events: none; }

/* Who is busy: the bot to act breathes in its colour (never amber); the mover of the step shown is
   tinted with its colour. Reduced motion and Performance mode keep the plain ring. */
@keyframes gc-think { 0%, 100% { box-shadow: 0 0 0 1px var(--pc), 0 0 0 0 transparent; }
                      50% { box-shadow: 0 0 0 1px var(--pc), 0 0 14px 3px color-mix(in srgb, var(--pc) 60%, transparent); } }
@keyframes gc-think-cell { 0%, 100% { background: color-mix(in srgb, var(--pc) 6%, transparent); }
                           50% { background: color-mix(in srgb, var(--pc) 30%, transparent); } }
.pt.thinking { animation: gc-think calc(var(--gc-dur-slow) * 4.3) ease-in-out infinite; animation-delay: var(--think-at, 0ms); }
.strip .cell.thinking { animation: gc-think-cell calc(var(--gc-dur-slow) * 4.3) ease-in-out infinite; animation-delay: var(--think-at, 0ms); }
html[data-motion="reduced"] .thinking, html.lowpower .thinking { animation: none; }
/* The corner screen: the bot deciding shows three bars rising and falling by its name (transform
   only), in place of the cell's breathing tint; still bars under reduced motion and Performance mode. */
.strip .cell .think { display: none; }
html[data-corners] .strip .cell.thinking { animation: none; }
html[data-corners] .strip .cell.thinking .think { display: inline-flex; align-items: flex-end; gap: 2px; height: .8em; margin-left: .4em; vertical-align: baseline; }
html[data-corners] .strip .cell.thinking .think i { width: 3px; height: 100%; background: currentColor; transform-origin: 50% 100%;
  animation: gc-think-bar .9s ease-in-out infinite; }
html[data-corners] .strip .cell.thinking .think i:nth-child(2) { animation-delay: .15s; }
html[data-corners] .strip .cell.thinking .think i:nth-child(3) { animation-delay: .3s; }
@keyframes gc-think-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
html[data-motion="reduced"] .strip .cell.thinking .think i, html.lowpower .strip .cell.thinking .think i { animation: none; }
.pt.stepping { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 22%, var(--gc-surface)); }
.strip .cell.stepping { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 26%, transparent); }

/* The log: Replay on each entry, the entry being shown (a step presented, or replayed) marked. */
.log-replay { float: right; position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 0 0 2px 8px;
              min-height: 24px; padding: 2px 8px; border-radius: var(--gc-r-m); border: 1px solid var(--gc-rule);
              background: transparent; color: var(--gc-text-2); font: 600 11px/1 var(--gc-font-ui); cursor: pointer; }
.log-replay:hover, .log-replay:focus-visible { color: var(--gc-text); border-color: var(--gc-rule-strong); background: var(--gc-raised); }
@media (pointer: coarse) { .log-replay { min-height: 32px; } .log-replay::before { content: ""; position: absolute; inset: -6px -4px; } }
.log-batch[aria-current="step"] { border-left-color: var(--pc, var(--gc-text-2)); background: color-mix(in srgb, var(--gc-raised) 75%, transparent);
                                  border-radius: 0 6px 6px 0; padding-top: 3px; padding-bottom: 3px; }
.log-batch .ev.cur { font-weight: 600; }
.log-batch .ev.cur .t { color: var(--pc, var(--gc-text-2)); }

/* The replay bar, under the last-move line. */
.replay-bar { position: absolute; z-index: 29; left: 50%; transform: translateX(-50%); top: calc(var(--bar-h) + var(--safe-t) + 44px);
              display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 4px 4px 4px 12px; border-radius: 999px;
              background: var(--gc-glass); border: 1px solid var(--gc-rule-strong); box-shadow: var(--shadow);
              font: 600 12.5px/1.2 var(--gc-font-ui); color: var(--gc-text); white-space: nowrap; }
.replay-bar[hidden] { display: none; }
.replay-bar .rp-icon { display: inline-flex; color: var(--gc-text-2); }
.replay-bar .rp-count { color: var(--gc-text-2); font-variant-numeric: tabular-nums; }
.replay-bar .rp-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--gc-text-3); font-weight: 500; }
.replay-bar .rp-back { flex: none; }
@media (pointer: coarse) { .replay-bar .rp-back { min-height: 44px; } }

/* ---------- map stage ---------- */
.stage { position: absolute; inset: 0; overflow: hidden; background: var(--gc-stage-bg, radial-gradient(1200px 700px at 40% 30%, var(--gc-surface) 0%, var(--gc-sunken) 70%)); }
/* The camera's layer (site.js): during a drag, pinch or zoom only its transform changes, on a layer of
   its own (.moving); the board draws past its edges (overflow) so a drag doesn't uncover empty space. */
/* A game's own end of the game (GAME.endScene): over the table and its corners, under the bar (Library,
   rules and More stay one tap away), until "See the table"; the dock's results button brings it back.
   It fits the screen; if a short window can't hold it, it scrolls without a bar. */
.end-scene { position: absolute; inset: 0; z-index: 29; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.end-scene::-webkit-scrollbar { display: none; }
.end-scene[hidden] { display: none; }
html[data-end] .strip, html[data-end] #bar-turn, html[data-end] .dock, html[data-end] .tray, html[data-end] .sheet,
html[data-end] .ticker, html[data-end] .frontdrop, html[data-end] .overdrop { visibility: hidden; }
/* (the bar keeps Library, without its own background, the title or its other buttons: the scene is the screen) */
html[data-end][data-corners] .bar { background: transparent; border-bottom-color: transparent; }
html[data-end] .bar-title, html[data-end] #btn-menu, html[data-end] #btn-more { visibility: hidden; }
/* The game's ground behind the board (GAME.backdrop): over the stage's background, under the board. */
.backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* (The layer over the board has no z-index, so it isn't a group of its own: it lies over the board by
   its place in the page, and a game's light in it can blend with the board, mix-blend-mode.) */
.overdrop { z-index: 32; }
.camera { position: absolute; inset: 0; transform-origin: 50% 50%; }
.camera.moving { will-change: transform; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none;
       touch-action: none; cursor: grab; overflow: visible; }
#map-static { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; overflow: visible; }
#map-static:empty { display: none; }
#map.panning { cursor: grabbing; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-tools { position: absolute; z-index: 20; display: flex; flex-direction: column; gap: 6px;
             left: calc(10px + var(--safe-l)); top: calc(var(--bar-h) + var(--safe-t) + 44px); }
.map-tools .icon-btn { background: var(--gc-sheet, rgba(23, 27, 33, .88)); border-color: var(--line); backdrop-filter: blur(6px); font-size: 18px; }
.hex-hit.armed { fill: rgba(255, 255, 255, .28); stroke: #fff; stroke-width: 2.5; }
/* ---------- decision card: bottom sheet on phones, a floating card on wide screens ---------- */
.sheet { position: absolute; z-index: 26; display: flex; flex-direction: column; background: var(--gc-sheet, rgba(28, 33, 40, .97));
         border: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(10px);
         left: var(--safe-l); right: var(--safe-r); bottom: 0; max-height: min(62%, 560px);
         border-radius: 16px 16px 0 0; padding-bottom: var(--safe-b); transition: transform .22s ease, opacity .15s; }
.sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 16px 16px 0 0; background: var(--pc, var(--accent)); }
.sheet-handle { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 14px 6px; cursor: pointer; touch-action: none; user-select: none; flex: none; min-height: 40px; }
.sheet-handle .grip { position: absolute; left: 50%; top: 6px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: #4a5462; }
.sheet-title { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; padding-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-title .muted { font-weight: 400; }
.sheet .chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-top: 2px; transition: transform .2s; }
.sheet[data-open="false"] .chev { transform: rotate(-135deg); margin-top: 10px; }
.sheet-body { overflow: auto; padding: 2px 14px 12px; overscroll-behavior: contain; }
.sheet[data-open="false"] .sheet-body { display: none; }
.sheet.peek { opacity: .12; pointer-events: none; }
.sheet.peek .sheet-handle { pointer-events: auto; }
.sheet.empty { display: none; }
.turn-panel { position: relative; }
.turn-panel::before { display: none; }

/* Two-step picks on touch: what the first tap chose, and the button that commits it. */
.confirm-bar { position: sticky; bottom: -12px; margin: 10px -14px -12px; padding: 10px 14px calc(10px + var(--safe-b));
               display: flex; align-items: center; gap: 10px; background: rgba(35, 41, 50, .98); border-top: 1px solid var(--line); }
.confirm-bar[hidden] { display: none; }
.confirm-bar .what { flex: 1; min-width: 0; font-size: 13px; }
.confirm-bar .btn.primary { padding: 9px 18px; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .sheet { left: auto; right: calc(12px + var(--safe-r)); bottom: auto; top: calc(var(--bar-h) + var(--safe-t) + 12px);
           width: var(--card-w); max-height: calc(100% - var(--bar-h) - var(--safe-t) - 24px); border-radius: 14px; padding-bottom: 0;
           box-shadow: var(--shadow); }
  .sheet::before { border-radius: 14px 14px 0 0; }
  .sheet-handle .grip { display: none; }
  .sheet-title { padding-top: 2px; }
  .confirm-bar { padding-bottom: 10px; }
}
/* Landscape phones: the card is a side panel, so the map keeps its height. */
@media (max-width: 899px) and (min-aspect-ratio: 4/3) {
  .sheet { left: auto; right: var(--safe-r); top: calc(var(--bar-h) + var(--safe-t)); bottom: 0; width: min(46vw, 360px); max-height: none;
           border-radius: 14px 0 0 0; }
  .sheet-handle .grip { display: none; }
}

/* ---------- stats overlay (hold ⓘ, tap to pin) ---------- */
.info { position: absolute; z-index: 28; top: calc(var(--bar-h) + var(--safe-t) + 6px); left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r));
        max-width: 720px; margin: 0 auto; max-height: calc(100% - var(--bar-h) - var(--safe-t) - 20px); overflow: auto;
        background: rgba(23, 27, 33, .97); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; }
.info[hidden] { display: none; }
.info-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.turn-track { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.turn-track .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.turn-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--line); color: var(--muted); }
.turn-dot.done { background: var(--panel2); color: var(--ink); }
.turn-dot.now { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 700; }
.phase-strip { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.phase-strip li { font-size: 11px; padding: 3px 8px; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.phase-strip li.now { background: rgba(242, 181, 68, .15); color: var(--accent); font-weight: 600; }
.phase-strip li.auto { opacity: .6; }
.stats { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.stats th { font-size: 10px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.stats th:first-child, .stats td:first-child { text-align: left; }
.stats td { padding: 6px 6px; text-align: right; border-bottom: 1px solid rgba(47, 55, 66, .6); white-space: nowrap; }
.stats tr.active td { background: rgba(255, 255, 255, .04); }
.stats tr.active td:first-child { box-shadow: inset 3px 0 0 var(--pc); }
.stats tr.out td { opacity: .5; }
.stats .who { display: inline-flex; align-items: center; gap: 6px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
.stats .neg { color: var(--danger); }
.stats .act { font-size: 11px; color: var(--accent); }
.info-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.info-foot b { color: var(--ink); }

/* ---------- the players and log panel (drawer), from the right, where its button is ---------- */
.drawer-backdrop { position: absolute; inset: 0; z-index: 39; background: rgba(0, 0, 0, .45); }
.drawer-backdrop[hidden], .drawer[hidden] { display: none; }
.drawer { position: absolute; z-index: 40; top: 0; bottom: 0; right: 0; width: min(440px, 94vw); display: flex; flex-direction: column;
          background: var(--bg2); border-left: 1px solid var(--line); box-shadow: var(--shadow);
          padding: calc(10px + var(--safe-t)) var(--safe-r) var(--safe-b) 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 10px 16px; }
.brand-title { font-weight: 700; letter-spacing: .02em; }
.brand-sub { font-size: 11px; color: var(--muted); }
.tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.tabs button { border: 0; background: transparent; color: var(--muted); padding: 9px 10px; cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.drawer-body { flex: 1; overflow: auto; padding: 12px 14px 20px; overscroll-behavior: contain; }
.drawer-body .tab-panel h3, .full-col .tab-panel h3, .win-body .tab-panel h3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600;
                             display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.drawer .log-panel { max-height: none; }
.drawer .players { display: flex; flex-direction: column; gap: 8px; }
.drawer .map-legend { flex-direction: column; gap: 10px; padding: 0; }

@media (pointer: coarse) {
  /* Touch targets of at least 44 px on touch screens (docs/UI_GUIDE.md). */
  .btn { padding: 9px 14px; min-height: 44px; }
  .btn.mini { min-height: 36px; }
  .chip-btn { padding: 9px 12px; min-width: 48px; }
  .dir-btn { padding: 11px 12px; }
  .stepper .btn { width: 44px; height: 44px; }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .shelf-filters .home-q { min-height: 44px; }
  .shelf-filters .seg button { min-height: 38px; min-width: 42px; }
}

/* ---------- games without a players strip: a one-row bar ---------- */
body:not(.has-strip) { --bar-h: 44px; }
body:not(.has-strip) .strip { display: none; }

/* ---------- the home screen, the library (web/home.js): Continue, My rooms, then every game ---------- */
.home { position: absolute; inset: 0; z-index: 45; overflow: auto; background: radial-gradient(1100px 620px at 25% 0%, var(--gc-raised) 0%, var(--bg) 70%);
        padding: calc(22px + var(--safe-t)) calc(16px + var(--safe-r)) calc(36px + var(--safe-b)) calc(16px + var(--safe-l)); }
.home[hidden] { display: none; }
.home-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home-brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 32px/1 var(--gc-font-display); text-transform: uppercase; letter-spacing: .02em; }
.home-actions { display: flex; align-items: center; gap: 8px; }
.shelf { display: flex; flex-direction: column; gap: 12px; }
.shelf[hidden] { display: none; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.shelf-title, .home .my-rooms > h3 { margin: 0; font: 800 24px/1 var(--gc-font-display); text-transform: uppercase; letter-spacing: .02em; }
.shelf-count { font: 500 13px var(--gc-font-ui); color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.shelf-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-q { width: 220px; }
/* A cover per game: its art (tint, pattern, icon), player count and title; its length under it. */
.home-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px 14px; }
.cover { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.cover[hidden] { display: none; }
.cover-art { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--gc-r-l); overflow: hidden; box-shadow: var(--gc-shadow); transition: transform .15s ease; }
.cover-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover:hover .cover-art { transform: translateY(-3px); }
.cover:focus-visible { outline: none; }
.cover:focus-visible .cover-art { outline: 2px solid var(--accent); outline-offset: 3px; }
.cover-icon { position: absolute; left: 12px; top: 12px; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, .35); }
.cover-pc { position: absolute; right: 10px; top: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(8, 10, 9, .55); color: #f4efe4; font-size: 12px; font-weight: 700; }
.cover-title { position: absolute; left: 12px; right: 10px; bottom: 12px; font: 800 24px/.95 var(--gc-font-display); text-transform: uppercase; color: #f4efe4; text-wrap: balance; overflow-wrap: anywhere; }
.cover-meta { font-size: 13px; color: var(--muted); }
.home-games > .shelf-empty { grid-column: 1 / -1; color: var(--muted); }
/* Continue: a wide card per saved game, the most recently played first. */
.continue-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.continue-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 76px; padding: 0 14px 0 0; overflow: hidden;
                 border: 1px solid var(--line); border-radius: var(--gc-r-l); background: var(--panel); color: inherit; text-align: left; cursor: pointer; }
.continue-card:hover { border-color: var(--accent); }
.cc-art { position: relative; align-self: stretch; }
.cc-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-art .cover-icon { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cc-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 800 20px/1.05 var(--gc-font-display); text-transform: uppercase; }
.cc-sub { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.cc-go { flex: none; color: var(--accent); }
/* The card's delete button sits on its right edge, past the arrow (a 44 px target). */
.cc-wrap { position: relative; display: grid; }
.cc-wrap .continue-card { padding-right: 54px; }
.cc-remove { position: absolute; right: 4px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); display: grid; place-items: center;
             border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.cc-remove:hover, .cc-remove:focus-visible { color: var(--danger); background: rgba(255, 255, 255, .06); }
@media (max-width: 560px) {
  .home-inner { gap: 24px; }
  .home-brand { font-size: 26px; }
  .shelf-filters { width: 100%; flex-direction: column; align-items: stretch; }
  .shelf-filters .seg { display: flex; }
  .shelf-filters .seg button { flex: 1; }
  .home-q { width: 100%; }
  .home-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .cover-title { font-size: 20px; }
}

/* ---------- hold to zoom (site.js): any [data-zoom] element, held, shows large ---------- */
/* No iOS callout (the long-press menu), text selection or image drag from what can be held. */
[data-zoom], [data-zoom] * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.zoom { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
        background: rgba(6, 8, 12, .66); touch-action: none; -webkit-user-select: none; user-select: none;
        animation: zoom-in .12s ease-out; }
.zoom[hidden] { display: none; }
.zoom > * { flex: none; pointer-events: none; }
.zoom-img { object-fit: contain; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .6)); }
.zoom-read { max-width: calc(100vw - 24px); }
.zoom-svg { overflow: visible; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .6)); }
.zoom-box { position: relative; overflow: visible; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .6)); }
@keyframes zoom-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- performance mode (html.lowpower, site.js; the rest is generated by lowpower.js) ---------- */
html.lowpower { --shadow: 0 2px 6px rgba(0, 0, 0, .35); }
html.lowpower .zoom { animation: none; }
#btn-perf.on, #btn-perf.on svg { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .zoom { animation: none; } }

/* ---------- online rooms: lobby, room card, chat, My rooms (room.js) ---------- */
.badge { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--bg2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.act { background: rgba(242,181,68,.14); color: var(--accent); border-color: rgba(242,181,68,.35); }
.badge.ok { background: rgba(81,207,102,.12); color: #8ce99a; border-color: rgba(81,207,102,.4); }
.badge.warn { background: rgba(255,107,107,.12); color: #ffb3b3; border-color: rgba(255,107,107,.35); }
.lobby { display: flex; flex-direction: column; gap: 10px; }
.lobby .turn-head { flex-wrap: wrap; margin-bottom: 0; }
.invite-row .btn { flex: 1 1 auto; }
.settings-card, .room-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.room-card { margin-bottom: 12px; }
.settings-summary { color: var(--ink); overflow-wrap: anywhere; }
.lobby-seat .seat-no { width: 44px; flex: none; }
.lobby-seat .seat-who { gap: 6px; min-width: 0; }
.lobby-seat .seat-ctl { margin-left: auto; gap: 6px; }
.lobby-seat .seat-host { flex-basis: 100%; gap: 6px; padding-left: 22px; }
.lobby-seat .seat-host select { font-size: 12px; padding: 3px 6px; }
.lobby-seat .level-about { padding-left: 22px; }
.host-opts { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.host-opts[open] { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.host-opts summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
.host-opts select { font-size: 12px; padding: 3px 6px; }
.notify-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
#new-dialog.room-setup #seat-rows, #new-dialog.room-setup .seed-row { display: none; }

.chat-btn { position: relative; }
.chat-btn svg { display: block; }
.chat-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger);
              color: #fff; font: 700 10px/16px var(--gc-font-ui); text-align: center; }
.chat-badge[hidden] { display: none; }
.chat-backdrop { position: absolute; inset: 0; z-index: 41; background: rgba(0, 0, 0, .35); }
.chat-backdrop[hidden], .chat[hidden] { display: none; }
.chat { position: absolute; z-index: 42; top: 0; bottom: 0; right: 0; width: min(380px, 100vw); display: flex; flex-direction: column;
        background: var(--bg2); border-left: 1px solid var(--line); box-shadow: var(--shadow);
        padding: calc(8px + var(--safe-t)) var(--safe-r) var(--safe-b) 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 0 8px 6px 14px; }
.chat-head b { font-size: 15px; }
.chat-head .icon-btn { margin-left: auto; }
#chat-notify { padding: 0 14px 8px; border-bottom: 1px solid var(--line); }
.chat-list { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.chat-msg { border-left: 3px solid var(--pc, var(--line)); padding: 2px 0 2px 8px; min-width: 0; }
.chat-msg.mention { background: rgba(242, 181, 68, .1); border-radius: 0 8px 8px 0; }
.chat-msg.system { border-left: 0; padding: 0; color: var(--muted); font-size: 12px; display: flex; gap: 8px; justify-content: space-between; font-style: italic; }
.chat-line { display: flex; align-items: baseline; gap: 8px; }
.chat-who { background: none; border: 0; padding: 0; font-weight: 700; font-size: 13px; cursor: pointer; }
.chat-msg time { color: var(--muted); font-size: 11px; font-style: normal; flex: none; }
.chat-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-emote { display: block; font-size: 26px; line-height: 1.2; }
.chat-empty { text-align: center; margin-top: 20px; }
.chat-emotes { display: flex; gap: 2px; padding: 6px 10px 0; flex-wrap: wrap; border-top: 1px solid var(--line); }
.emote-btn { background: none; border: 1px solid transparent; border-radius: 8px; font-size: 20px; padding: 2px 6px; cursor: pointer; }
.emote-btn:hover:not(:disabled) { border-color: var(--line); background: var(--panel2); }
.emote-btn:disabled { opacity: .35; cursor: default; }
.chat-note:empty { display: none; }
.chat-note { padding: 4px 14px 0; }
.chat-form { display: flex; gap: 8px; padding: 8px 10px 10px; }
.chat-form input { flex: 1; min-width: 0; font-size: 16px; } /* 16 px: no iOS zoom on focus */

.my-rooms { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.home .my-rooms { gap: 10px; }
.my-rooms[hidden] { display: none; }
.my-rooms h3 { margin: 6px 0 2px; font-size: 14px; }
.my-room { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.my-room.yours { border-color: var(--accent); }
.my-room .btn { text-decoration: none; }
.my-room .your-turn { color: var(--accent); font-weight: 700; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .my-room { flex-wrap: wrap; } .my-room > .row { margin-left: 0 !important; } }

/* ---------- installing the app (install.js) ---------- */
.home-install[hidden] { display: none; }

/* ---------- More (⋯): a small menu under its button ---------- */
.more-menu { position: fixed; z-index: 46; min-width: 210px; padding: 6px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px;
             background: var(--panel2); border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
.more-menu[hidden] { display: none; }
.mm-item { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); text-align: left;
           padding: 10px 12px; border-radius: 8px; font: 500 14px/1.2 var(--gc-font-ui); cursor: pointer; min-height: 40px; }
.mm-item:hover, .mm-item:focus-visible { background: rgba(242, 181, 68, .14); }
.mm-item[hidden] { display: none; }
.mm-item svg { flex: none; color: var(--muted); }
/* A setting with several values in the menu (Moves: Slow, Normal, Fast, Off). */
.mm-speed { cursor: default; flex-wrap: wrap; row-gap: 6px; }
.mm-speed:hover { background: transparent; }
.mm-speed .seg { margin-left: auto; }
.mm-speed .seg button { padding: 6px 8px; font-size: 12.5px; }
@media (pointer: coarse) { .mm-speed .seg button { min-height: 36px; } }
/* A setting's switch (docs/UI_GUIDE.md, Buttons: settings look like settings): a track and a knob at
   the item's end, on when aria-checked. */
.mm-track { position: relative; flex: none; margin-left: auto; width: 34px; height: 20px; border-radius: 10px;
            background: var(--gc-sunken); border: 1px solid var(--gc-rule-strong); transition: background .15s; }
.mm-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
                   background: var(--gc-text-3); transition: transform .15s, background .15s; }
[aria-checked="true"] > .mm-track, [aria-pressed="true"] > .mm-track { background: var(--gc-good); border-color: var(--gc-good); }
[aria-checked="true"] > .mm-track::after, [aria-pressed="true"] > .mm-track::after { transform: translateX(14px); background: var(--gc-text); }
/* The volume, under the Sound switch: a slider as wide as the menu, greyed while sound is off. */
.mm-volume { display: flex; align-items: center; gap: 10px; padding: 2px 12px 6px 40px; min-height: 40px;
             font: 500 13px/1.2 var(--gc-font-ui); color: var(--gc-text-2); }
.mm-volume input[type=range] { flex: 1; min-width: 0; margin: 0; accent-color: var(--gc-text-2); min-height: 32px; }
.mm-volume.off { opacity: .45; }
@media (pointer: coarse) { .mm-volume { min-height: 44px; } .mm-volume input[type=range] { min-height: 44px; } }
/* Several actions on one target (web/kit/kit.js targetMenu): the same items, at the pointer. */
.target-menu { position: fixed; z-index: 65; min-width: 190px; padding: 6px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px;
               background: var(--panel2); border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
.target-menu .tm-cancel { color: var(--muted); }
/* Its heading (what it is for: "Play Fire 1"), an item's second line, and an item that loses something (✕ in --gc-bad). */
.target-menu .tm-title { padding: 4px 12px 6px; font: 600 11px/1.3 var(--gc-font-ui); letter-spacing: .06em; text-transform: uppercase;
                         color: var(--gc-text-3); border-bottom: 1px solid var(--gc-rule); margin-bottom: 2px; max-width: 280px;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-menu .tm-text { display: flex; flex-direction: column; gap: 2px; }
.target-menu .tm-line { font-size: 12.5px; color: var(--gc-text-3); }
.tm-x { flex: none; font-weight: 800; color: var(--gc-bad); }
.target-menu .mm-item.tone-bad:hover, .target-menu .mm-item.tone-bad:focus-visible { background: var(--gc-bad-veil); }
@media (pointer: coarse) { .target-menu .mm-item { min-height: 44px; } }
/* Players and log: its own bar button on wider screens, the first item of More on phones. */
.mm-panels { display: none; }
@media (max-width: 699px) { .mm-panels { display: flex; } }

/* ---------- the undo notice: what Undo took back, and Redo ---------- */
.undo-note { position: absolute; z-index: 48; left: 50%; transform: translateX(-50%); top: calc(var(--bar-h) + var(--safe-t) + 8px);
             display: flex; align-items: center; gap: 12px; max-width: min(92vw, 620px); padding: 8px 8px 8px 14px; border-radius: 12px;
             background: var(--ink); color: var(--bg); font-size: 13px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.undo-note[hidden] { display: none; }
.undo-note span { min-width: 0; }
.undo-note .btn { flex: none; background: transparent; color: var(--bg); border-color: rgba(0, 0, 0, .3); padding: 5px 12px; }
/* iPhone and iPad's Add to Home Screen guide: a small sheet at the bottom on phones, near Safari's toolbar. */
.install-dialog { width: min(400px, 94vw); text-align: center; }
.install-dialog h2 { font-size: 18px; margin: 10px 0 6px; }
.install-dialog p { margin: 6px 0; }
.install-dialog .dialog-actions { justify-content: center; }
.install-why { color: #ffe8a3; background: rgba(250, 176, 5, .12); border: 1px solid rgba(250, 176, 5, .45); border-radius: 10px; padding: 8px 10px; font-size: 13px; text-align: left; }
.install-why[hidden] { display: none; }
.install-art { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; color: #4dabf7; }
.install-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); }
.install-arrow { color: var(--muted); font-size: 20px; }
.install-more { font-size: 12px; }
@media (max-width: 560px) {
  .install-dialog { margin: auto auto calc(10px + var(--safe-b)); }
}

/* ---------- notifications in a room (room.js) ---------- */
.bell-btn svg { display: block; }
.bell-btn[hidden] { display: none; }
.bell-btn[data-state="on"] { color: var(--accent); }
.bell-btn[data-state="off"], .bell-btn[data-state="install"] { color: var(--muted); }
.bell-btn[data-state="blocked"] { color: var(--danger); }
.notify-dialog { width: min(420px, 94vw); }
.notify-dialog p { margin: 8px 0 12px; }
.notify-dialog .notify-row { margin-top: 10px; }
.notify-blocked { color: #ffb3b3; }
/* The one-time reminder: a small card under the bar. */
.notify-nudge { position: absolute; z-index: 29; top: calc(var(--bar-h) + var(--safe-t) + 8px); left: 50%; transform: translateX(-50%);
                width: min(520px, calc(100% - 16px - var(--safe-l) - var(--safe-r))); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
                padding: 10px 12px; border-radius: 12px; background: var(--gc-sheet, rgba(28, 33, 40, .97)); border: 1px solid var(--line);
                box-shadow: var(--shadow); backdrop-filter: blur(10px); font-size: 13px; }
.notify-nudge .bell { color: var(--accent); flex: none; display: grid; }
.notify-nudge .msg { flex: 1; min-width: 180px; }
.notify-nudge .msg.ok { color: var(--ok); }
.notify-nudge .nudge-actions { margin-left: auto; gap: 6px; flex-wrap: nowrap; }
.notify-nudge .btn { padding: 5px 12px; }

/* ---------- Full view (docs/UI_GUIDE.md, Layouts): one column beside the board, everything once ---------- */
:root { --full-w: 400px; }
@media (max-width: 1439px) { :root { --full-w: 360px; } }
.layout-switch { flex: none; }
.layout-switch[hidden] { display: none; }
.layout-switch button { padding: 5px 12px; font-size: 12.5px; }
html[data-layout="full"] .stage { right: calc(var(--full-w) + var(--safe-r)); }
.full-col { position: absolute; z-index: 25; top: calc(var(--bar-h) + var(--safe-t)); bottom: 0; right: 0; width: calc(var(--full-w) + var(--safe-r));
            overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px;
            padding: 12px calc(12px + var(--safe-r)) calc(16px + var(--safe-b)) 12px; background: var(--bg2); border-left: 1px solid var(--line); }
.full-col[hidden] { display: none; }
/* Each part keeps its own height (a scrolling section would otherwise shrink to nothing); the column scrolls. */
.full-col > * { flex: none; }
/* A game's panel wider than the column (a goods display) scrolls on its own, not the column. */
.full-sec { min-width: 0; overflow-x: auto; }
.full-sec > h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600;
                 display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.full-sec > h3::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
                        transform: rotate(45deg); margin-top: -3px; transition: transform .15s; }
.full-sec.folded > h3 { margin-bottom: 0; }
.full-sec.folded > h3::after { transform: rotate(-45deg); margin-top: 0; }
.full-sec.folded > :not(h3) { display: none !important; }
#full-mid .players { display: flex; flex-direction: column; gap: 8px; }
#full-mid .log-panel { max-height: 46vh; }
#full-mid .log-panel > h3 { display: none; } /* the section's heading names it */
#full-info { font-size: 13px; }
#full-info table { width: 100%; }
/* The decision card is the column's first part: docked, always open, pinned at the top while the rest
   scrolls; a tall one scrolls inside. */
html[data-layout="full"] #full-mid .sheet { position: sticky; top: -12px; z-index: 3; inset: auto; width: auto; max-height: 62vh; transform: none;
                                            opacity: 1; flex: none; border-radius: var(--gc-r-l); box-shadow: none; backdrop-filter: none; padding-bottom: 0; }
html[data-layout="full"] #full-mid .sheet::before { border-radius: var(--gc-r-l) var(--gc-r-l) 0 0; }
html[data-layout="full"] #full-mid .sheet-handle { cursor: default; }
html[data-layout="full"] #full-mid .sheet .chev, html[data-layout="full"] #full-mid .sheet .grip { display: none; }
html[data-layout="full"] #full-mid .sheet-body { overflow: auto; }
/* Shown once: the glance replaces the players strip, the panel button, the stats overlay and the bar's money. */
html[data-layout="full"] body { --bar-h: 44px; }
html[data-layout="full"] .strip, html[data-layout="full"] #btn-menu, html[data-layout="full"] #btn-info,
html[data-layout="full"] .bar-actor .money { display: none; }
html[data-layout="full"] .ticker, html[data-layout="full"] .undo-note, html[data-layout="full"] .replay-bar { left: calc((100% - var(--full-w)) / 2); }

/* ---------- Board view on wide screens: the players and log panel is a side panel, not a cover ----------
   Its button toggles it; the board stays playable beside it (the decision card stays on the right). */
@media (min-width: 900px) {
  .drawer { left: 0; right: auto; top: calc(var(--bar-h) + var(--safe-t)); width: 400px; border-left: 0; border-right: 1px solid var(--line);
            padding: 10px 0 var(--safe-b) var(--safe-l); }
  .drawer-backdrop { display: none !important; }
  /* The stats (hold, or tap to pin): a panel on the left, clear of the decision card. */
  .info { right: auto; width: min(640px, calc(100% - var(--card-w) - 48px)); margin: 0; }
}

/* ---------- Board view, floating (web/table.js; docs/UI_GUIDE.md, Layouts): tablets and desktops ----------
   The board fills the window. Down the left edge the players' portraits, then a toggle per panel; a
   peek beside a portrait; the panels as windows over the board. Shown once: the portraits take the
   place of the players strip and the bar's money, the toggles the place of the menu's and the stats'
   buttons. */
html[data-float] body { --bar-h: 44px; }
/* A one-screen game (GAME.oneScreen): its one Undo sits beside the decision's main button. */
html[data-one-screen] #btn-undo { display: none; }
.dc-foot-r .dc-undo { margin-right: 6px; }
html[data-float] .strip, html[data-float] #btn-menu, html[data-float] #btn-info, html[data-float] .bar-actor .money { display: none; }
.rail { position: absolute; z-index: 24; left: calc(10px + var(--safe-l)); top: calc(var(--bar-h) + var(--safe-t) + 12px);
        max-height: calc(100% - var(--bar-h) - var(--safe-t) - var(--safe-b) - 76px); display: flex; flex-direction: column; gap: 14px;
        padding: 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; pointer-events: none; }
.rail[hidden] { display: none; }
.rail-seats, .rail-dock { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rail-dock:empty { display: none; }
.rail .pt, .rail .dk { pointer-events: auto; }
/* A portrait: the seat's shape in its colour with its initials, its name, the game's numbers for it. */
.pt { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 9px; width: 210px; min-height: 48px;
      padding: 5px 12px 5px 5px; border: 1px solid var(--gc-rule); border-radius: 26px 14px 14px 26px; background: var(--gc-glass);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
      color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pt:hover { border-color: var(--gc-rule-strong); }
.pt.on { background: var(--gc-raised); border-color: var(--gc-rule-strong); }
.pt.now { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 6px 18px rgba(0, 0, 0, .28); }
.pt.you { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px -4px var(--accent); }
.pt.out { opacity: .5; }
.pt-token { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
.pt-token svg { position: absolute; inset: 0; }
.pt-ini { position: relative; color: var(--on); font: 800 14px/1 var(--gc-font-display); letter-spacing: .02em; }
.pt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.pt-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 7px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-nums:empty { display: none; }
.pt-nums b { color: var(--ink); font-weight: 700; }
.pt-nums .k { font-size: 11px; }
.pt-nums .neg { color: var(--danger); }
/* A panel's toggle. */
.dk { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; border: 1px solid var(--gc-rule); border-radius: 12px;
      background: var(--gc-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
      color: var(--muted); font: 600 13px var(--gc-font-ui); cursor: pointer; }
.dk:hover { color: var(--ink); border-color: var(--gc-rule-strong); }
.dk.on { color: var(--ink); background: var(--gc-raised); border-color: var(--gc-rule-strong); }
.dk svg { flex: none; }
/* Tablets: the portraits without names (a peek shows them); the toggles keep their names (no hover
   to tell same-looking icons apart). */
@media (max-width: 1179px) {
  .pt { width: auto; max-width: 160px; grid-template-columns: 36px auto; padding-right: 10px; }
  .pt-name { display: none; }
  .dk { padding: 0 10px 0 8px; gap: 6px; font-size: 12.5px; }
}
@media (pointer: coarse) { .dk { height: 44px; } }
/* The zoom buttons: bottom left when the decision card floats top right, else top right. */
html[data-float] .map-tools { left: auto; right: calc(12px + var(--safe-r)); top: calc(var(--bar-h) + var(--safe-t) + 12px); }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  html[data-float] .map-tools { right: auto; top: auto; left: calc(10px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); flex-direction: row; }
}
/* A peek at a player's area, beside their portrait. */
.peek { position: absolute; z-index: 29; width: min(380px, calc(100vw - 24px)); max-height: calc(100% - var(--bar-h) - var(--safe-t) - 24px);
        overflow: auto; overscroll-behavior: contain; background: var(--gc-surface); border: 1px solid var(--gc-rule-strong);
        border-radius: var(--gc-r-l); box-shadow: var(--gc-shadow); }
.peek[hidden] { display: none; }
.peek .pcard { border: 0; border-radius: 0; background: none; padding: 12px 14px 12px 18px; }
.peek-foot { display: flex; justify-content: flex-end; padding: 0 14px 12px; }
/* Windows: a title to drag by, ✕ to close, a body that scrolls; resized by the corner with a mouse. */
/* Under the decision card (one place to decide: a window never hides it), over the board and the portraits. */
.wins { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.win { position: absolute; display: flex; flex-direction: column; width: 360px; min-width: 220px; max-width: calc(100vw - 16px);
       min-height: 96px; max-height: calc(100% - var(--bar-h) - var(--safe-t) - 20px); overflow: hidden; pointer-events: auto;
       background: var(--gc-surface); border: 1px solid var(--gc-rule-strong); border-radius: var(--gc-r-l); box-shadow: var(--gc-shadow); }
.win.wide { width: 460px; }
.win.seat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pc); }
.win-head { display: flex; flex: none; align-items: center; gap: 8px; min-height: 40px; padding: 2px 4px 2px 14px; border-bottom: 1px solid var(--gc-rule);
            cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.win-head:active { cursor: grabbing; }
.win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.win-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 14px; font-size: 13px; }
.win-body table { width: 100%; }
.win .log-panel { max-height: none; }
.win .log-panel > h3 { display: none; } /* the title names it */
.win .pcard { border: 0; border-radius: 0; background: none; padding: 0; overflow: visible; }
.win .pcard::before, .win .pcard .name { display: none; } /* the title names them, in their colour */
@media (hover: hover) and (pointer: fine) { .win { resize: both; } }

/* ---------- the corner screen (GAME.screen = "corners"; docs/SCREEN_FRAMEWORK.md) ----------
   One screen at every size. Held upright: thin bands (the bar, the players' chips, the board, the sheet
   with the hand, the dock under it). Turned sideways and on desktops: the board fills the window and
   the parts sit in its corners, sized to their contents. A game dresses these parts with the tokens
   below (its theme); the shell's look is the default. */
:root {
  --gc-corner-chip: none;       /* border-image of a player's chip, the turn pill and the card */
  --gc-corner-chip-now: none;   /* the same for whoever acts */
  --gc-corner-main: none;       /* border-image of the main button */
  --gc-corner-main-dim: none;   /* the main button while waiting */
  --gc-corner-second: none;     /* border-image of a secondary button in the dock (Refresh, Skip) */
  --gc-corner-tool: none;       /* background image of Library, More, Undo (a game's shape) */
  --gc-corner-pill: none;       /* border-image of the turn pill */
  --gc-corner-card: none;       /* border-image of the decision card */
  --gc-corner-card-line: block; /* the card's top line in the actor's colour (none: off) */
  /* also, unset by default (the shell's look): --gc-stage-bg (the board's ground), --gc-corner-btn-bg,
     --gc-corner-main-ink, --gc-corner-btn-pad (the dock's buttons), --gc-corner-turn-bg and -ink (the
     turn chip), --gc-corner-pill-prefix (before the turn, e.g. "> "), --gc-corner-case and -spacing
     (capitals on chips, buttons and the turn), --gc-seat-shape (a clip-path for the seats' dots),
     --gc-corner-chip-held and --gc-held-sheen (a chip whose player holds a shared component: its
     frame and its sheen), --gc-band-inset-l and --gc-band-inset-r (two-player bands upright: the
     plates' distance from the screen's left and right edges), --gc-plate-pad-l (two-player bands
     upright: a plate's padding on the left, e.g. under a piece riding its edge),
     --gc-plate-name (two-player bands: the font of a plate's name, as the font shorthand; on the
     board --gc-plate-name-board, in board units), --gc-plate-size (a plate's size on the board) */
}
html[data-corners] .sheet { border-image: var(--gc-corner-card); }
html[data-corners] .sheet::before { display: var(--gc-corner-card-line); }
html[data-corners] .map-tools, html[data-corners] #btn-info, html[data-corners] #layout-switch,
html[data-corners] #view-switch, html[data-corners] .undo-row, html[data-corners] .sheet-handle .chev { display: none !important; }
html[data-corners] #btn-menu { display: inline-grid; }
.dock { position: absolute; z-index: 31; right: calc(10px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); display: flex; align-items: center; gap: 6px; }
.dock[hidden] { display: none; }
.dock-main:empty, .dock-side:empty { display: none; }
.dock-side { display: flex; gap: 6px; margin-right: 4px; }
.dock-side .btn { min-height: 44px; white-space: nowrap; }
html[data-corners] .dock-side .btn { border-image: var(--gc-corner-second); }
.dock .btn.primary { min-height: 44px; padding: 0 22px; white-space: nowrap; }
.dock .dock-wait { opacity: 1; background: var(--gc-raised); color: var(--gc-text-3); border-color: var(--gc-rule-strong); }
.dock .confirm-bar { position: static; margin: 0; padding: 0; background: none; border: 0; gap: 6px; }
.dock .confirm-bar:not([hidden]) ~ .dock-main { display: none; }
.dock .confirm-bar .what { display: none; }
html[data-corners] .dock #btn-undo { width: 44px; height: 44px; padding: 0; justify-content: center; }
html[data-corners] .dock #btn-undo .lbl { display: none; }
/* The game's look, when it sets the tokens: frames (border-image), button fills, capitals, the step's prefix, the seats' mark */
html[data-corners] .dock .btn, html[data-corners] .dock-side .btn { padding: var(--gc-corner-btn-pad, 0 22px); }
html[data-corners] .dock .btn.primary:not(.dock-wait) { background: var(--gc-corner-btn-bg, var(--accent)); color: var(--gc-corner-main-ink, var(--gc-signal-ink)); }
html[data-corners] .dock-side .btn, html[data-corners] .dock .dock-wait { background: var(--gc-corner-btn-bg, var(--gc-raised)); }
html[data-corners] .dock .btn, html[data-corners] .strip .cell .nm, html[data-corners] #bar-turn {
  text-transform: var(--gc-corner-case, none); letter-spacing: var(--gc-corner-spacing, normal); }
.dock-side .btn .sub { display: none; }
html[data-corners] #bar-turn .t { background: var(--gc-corner-turn-bg, var(--accent)); color: var(--gc-corner-turn-ink, #1a1a1a); }
html[data-corners] #bar-turn .t::before { content: var(--gc-corner-pill-prefix, none); }
html[data-corners] .strip .pdot { clip-path: var(--gc-seat-shape, none); border-radius: var(--gc-seat-radius, 50%); }
html[data-corners] .strip .cell .nm { color: var(--gc-text); font-weight: 600; }
html[data-corners] .strip .cell { border-image: var(--gc-corner-chip); }
html[data-corners] .strip .cell.now { border-image: var(--gc-corner-chip-now); }
html[data-corners] .dock .btn.primary:not(.dock-wait) { border-image: var(--gc-corner-main); }
html[data-corners] .dock .btn.primary.dock-wait { border-image: var(--gc-corner-main-dim); }
html[data-corners] .bar-tool, html[data-corners] .icon-btn { background-image: var(--gc-corner-tool); background-size: 100% 100%; }
html[data-corners] .ticker { background: var(--gc-note-bg, var(--gc-glass)); color: var(--gc-text); border-color: var(--gc-rule-strong);
  border-image: var(--gc-note-frame, none); border-radius: var(--gc-note-radius, 999px); padding: var(--gc-note-pad, 5px 12px 5px 15px);
  font: var(--gc-note-font, 12px/1.4 var(--gc-font-ui)); text-transform: var(--gc-corner-case, none); letter-spacing: var(--gc-corner-spacing, normal); }
html[data-corners] .ticker::before { display: var(--gc-note-bar, block); }
html[data-corners] .ticker .skip { border-image: var(--gc-note-btn, none); border-radius: var(--gc-note-radius, var(--gc-r-m)); }
/* (--gc-note-*: the corner screen's notes, the last-move line and the hand's caption, in the game's
   own frame: bg, frame (a border-image), radius, pad, font, bar (the mover's colour bar: block or
   none), btn (Skip's border-image)) */
@media (min-aspect-ratio: 1/1) { html[data-corners] .bar-row .bar-tool, html[data-corners] .bar-row .icon-btn { background-color: var(--gc-corner-tool-bg, var(--gc-glass)); border: 1px solid var(--gc-corner-tool-edge, var(--gc-rule-strong)); } }

/* Held upright: the bands. The bar and the chips on top, the sheet (the hand, the card) at the bottom with room for the dock. */
@media (max-aspect-ratio: 1/1) {
  html[data-corners] .sheet { padding-bottom: calc(62px + var(--safe-b)); }
  html[data-corners] .sheet.quiet { display: none; }
  html[data-corners] .sheet-handle { display: none; }
  html[data-corners] body { --bar-h: 100px; }
  html[data-corners] .bar { background: var(--gc-surface); }
  /* Every player's chip on screen: the row's width shared out, a long name cut short. */
  html[data-corners] .strip { height: 52px; gap: 5px; overflow: hidden; }
  html[data-corners] .strip .cell { flex: 1 1 0; min-width: 0; justify-content: center; }
  html[data-corners] .strip .cell .nm { flex: 0 1 auto; min-width: 3.2em; }
  html[data-corners] .strip .cell .pdot { flex: none; width: 10px; height: 10px; }
  /* Two lines when the row is shared by three or more: the name, then the numbers. */
  html[data-corners] .strip .cell { flex-wrap: wrap; align-content: center; row-gap: 1px; column-gap: 5px; padding: 4px 8px; line-height: 1.15; }
  html[data-corners] .strip .cell { display: grid; grid-template-columns: 10px minmax(0, 1fr); justify-content: start; align-items: center; }
  html[data-corners] .strip .cell .nm { max-width: none; overflow: hidden; text-overflow: ellipsis; }
  html[data-corners] .strip .cell .nums { grid-column: 2; min-width: 0; white-space: nowrap; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  html[data-corners] .strip .cell.now { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }
  html[data-corners] .strip .cell { padding: 6px 8px; font-size: 12.5px; gap: 5px; }
  html[data-corners] .strip .cell .nm { display: inline; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-corners] .strip .cell.me { position: fixed; left: calc(10px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); z-index: 31; min-height: 44px; max-width: 46vw; flex: none; }
  html[data-corners] .dock { max-width: calc(54vw - 26px); }
  html[data-corners] .dock .btn.primary { overflow: hidden; text-overflow: ellipsis; max-width: calc(54vw - 80px); }
  html[data-corners] .ticker { top: calc(var(--bar-h) + var(--safe-t) + 34px); }
}

/* Sideways and desktops: the corners. */
@media (min-aspect-ratio: 1/1) {
  html[data-corners] .bar { background: transparent; border-bottom: 0; pointer-events: none; height: calc(56px + var(--safe-t)); }
  html[data-corners] .bar-row { height: 52px; }
  html[data-corners] .bar-row > * { pointer-events: auto; }
  html[data-corners] .bar-title { display: none; }
  html[data-corners] #btn-library { order: 18; }
  html[data-corners] #btn-menu { order: 19; }
  html[data-corners] .bar-row { justify-content: flex-end; }
  html[data-corners] .bar-tool, html[data-corners] .bar-row .icon-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  html[data-corners] .bar-tool .lbl { display: none; }
  /* the turn: a pill, top centre */
  html[data-corners] #bar-turn { position: absolute; left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%);
    background: var(--gc-glass); border-image: var(--gc-corner-pill); padding: 8px 16px; min-height: 36px; border-radius: var(--gc-r-m); max-width: 46vw; }
  html[data-corners] #bar-actor { display: none; }
  /* the players' chips, top left (yours bottom left) */
  html[data-corners] .strip { position: absolute; left: calc(10px + var(--safe-l)); top: calc(8px + var(--safe-t)); height: auto;
    flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: auto; overflow: visible; }
  html[data-corners] .strip .cell { padding: 7px 12px; font-size: 13px; background: var(--gc-glass); border-radius: var(--gc-r-m); min-height: 40px; }
  html[data-corners] .strip .cell .nm { display: inline; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
  html[data-corners] .strip .cell.me { position: fixed; left: calc(10px + var(--safe-l)); top: auto; bottom: calc(10px + var(--safe-b)); }
  /* the card: small, above the dock, only while there's something to choose */
  html[data-corners] .sheet { left: auto; top: auto; right: calc(10px + var(--safe-r)); bottom: calc(64px + var(--safe-b));
    width: min(360px, 42vw); max-height: min(52%, 460px); border-radius: var(--gc-r-l); padding-bottom: 0; }
  html[data-corners] .sheet.quiet { display: none; }
  html[data-corners] .ticker { top: calc(58px + var(--safe-t)); }
  html[data-corners] .sheet-handle .grip { display: none; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  html[data-corners] .strip .cell { padding: 5px 10px; min-height: 36px; font-size: 12px; gap: 6px; }
  html[data-corners] .strip .cell .nm { max-width: 8em; }
  html[data-corners] #bar-turn { max-width: 36vw; padding: 6px 12px; min-height: 32px; }
}

/* Two-player bands (GAME.seatBands; docs/SCREEN_FRAMEWORK.md): each player's chip is a plate on their own
   side of the board. Upright: the far player's runs the width under the bar, the near player's stands
   above the hand (site.js placeSeatPlates sets its bottom). Sideways and desktops: where the game's
   board leaves room for it (GAME.seatPlate), laid out at that size in board units and scaled with the
   camera; without that room, in the corners (far top left, near bottom left). A plate: the seat's mark
   and the name on top, the numbers under them. */
@media (max-aspect-ratio: 1/1) {
  /* the bar: Library, the game's title in its own lettering (centred), rules and More; the step on a
     row of its own as the game's pill; then the far player's plate */
  html[data-bands] body { --bar-h: 120px; }
  html[data-bands] .bar-title { display: block; position: absolute; left: 50%; top: calc(var(--safe-t) + 22px); transform: translate(-50%, -50%);
    font-size: 24px; text-transform: var(--gc-corner-case, none); pointer-events: none; }
  html[data-bands] #bar-turn { position: absolute; left: 50%; top: calc(var(--safe-t) + 46px); transform: translateX(-50%);
    width: min(300px, calc(100vw - 90px)); min-height: 30px; box-sizing: border-box; justify-content: center;
    background: var(--gc-glass); border-image: var(--gc-corner-pill); padding: 6px 24px 6px 26px; border-radius: var(--gc-r-m); }
  html[data-bands] #bar-turn .t { background: var(--gc-corner-turn-bg, var(--accent)); }
  html[data-bands] #bar-actor { display: none; }
  html[data-bands] #btn-menu { margin-left: auto; }
  html[data-bands] .strip { height: 40px; margin-top: 36px; }
  html[data-bands] .strip .cell { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: 8px;
    box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 12px 0 var(--gc-plate-pad-l, 14px); max-width: none; }
  html[data-bands] .strip .cell .nm { max-width: 14em; }
  html[data-bands] .strip .cell .nums { grid-column: auto; margin-left: auto; font-size: 13px; gap: var(--gc-plate-gap, 8px); }
  html[data-bands] .strip .cell.near { position: fixed; left: calc(var(--gc-band-inset-l, 10px) + var(--safe-l)); right: calc(var(--gc-band-inset-r, 10px) + var(--safe-r)); top: auto;
    z-index: 31; max-width: none; min-height: 40px; }
  /* (--gc-band-inset-l and -r: the plates' distance from the screen's edges; the bar's own padding is 6 px) */
  html[data-bands] .strip .cell.far { margin-left: calc(var(--gc-band-inset-l, 10px) - 6px); margin-right: calc(var(--gc-band-inset-r, 10px) - 6px); }
  /* (A card of the hand pressed, hovered or lifted comes up over the near player's plate.) */
  html[data-bands] .tray:is(:hover, :focus-within, :has(.tray-card.sel, .tray-card.focus)) { z-index: 32; }
  html[data-bands] .dock { max-width: calc(100vw - 20px - var(--safe-l) - var(--safe-r)); }
  html[data-bands] .dock .btn.primary { max-width: calc(100vw - 150px); }
  /* (The hand's caption says what the main button already says: only a warning keeps its place.) */
  html[data-bands] .tray.fan .tray-intent:not([data-tone="bad"]) { display: none; }
}
html[data-bands] .strip .cell .nm { font: var(--gc-plate-name, inherit); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
html[data-bands] .strip .cell .pdot { flex: none; width: var(--gc-plate-dot-w, 10px); height: var(--gc-plate-dot-h, 10px); }
/* (a plate's own ground under its frame, for a frame without a fill: --gc-plate-bg) */
html[data-bands] .strip .cell, html[data-bands] .strip .cell.now { background: var(--gc-plate-bg, none); }
/* (the player to act: their plate's glow, and a cursor blinking after their name while they decide) */
html[data-bands] .strip .cell.now { filter: var(--gc-plate-now-glow, none); }
html[data-bands] .strip .cell.now:not(.thinking) .nm::after { content: ""; display: var(--gc-plate-cursor, none); flex: none; width: .45em; height: 2px;
  background: currentColor; align-self: flex-end; margin-bottom: .1em; animation: gc-blink 1.1s steps(1) infinite; }
@keyframes gc-blink { 50% { opacity: 0; } }
html[data-motion="reduced"] .strip .cell.now .nm::after, html.lowpower .strip .cell.now .nm::after { animation: none; }
.strip .cell .sub { display: none; }
@media (min-aspect-ratio: 1/1) {
  html[data-bands] .strip .cell.near:not(.on-board) { position: fixed; left: calc(10px + var(--safe-l)); top: auto; bottom: calc(10px + var(--safe-b)); }
  html[data-bands] .strip .cell.on-board { position: fixed; left: 0; top: 0; right: auto; bottom: auto; margin: 0; z-index: 20;
    transform-origin: 0 0; box-sizing: border-box; max-width: none; min-height: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; align-content: space-between;
    column-gap: 7px; padding: var(--gc-plate-pad-board, 12px 14px 10px); font-size: var(--gc-plate-size, 15px); }
  html[data-bands] .strip .cell.on-board .nm { max-width: none; overflow: visible; font: var(--gc-plate-name-board, var(--gc-plate-name, inherit)); letter-spacing: var(--gc-plate-name-track, normal); }
  html[data-bands] .strip .cell.on-board .nums { grid-column: 1 / -1; align-self: end; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--gc-plate-gap-board, 10px); }
  html[data-bands] .strip .cell.on-board .sub { display: var(--gc-plate-sub, none); order: 9; margin-left: auto; font: var(--gc-plate-sub-font, 600 10px/1 var(--gc-font-ui));
    letter-spacing: .14em; text-transform: uppercase; color: var(--gc-plate-sub-ink, var(--muted)); }
  /* (the step's line: a cursor blinking at its end, where the game asks for it: --gc-pill-cursor) */
  html[data-bands] #bar-turn::after { content: ""; display: var(--gc-pill-cursor, none); flex: none; width: 8px; height: 2px; margin-left: 3px;
    background: currentColor; align-self: center; translate: 0 .35em; animation: gc-blink 1.1s steps(1) infinite; }
  /* (a plate on the board reads like a panel: each number under its name, from the left) */
  html[data-bands] .strip .cell.on-board .nums > * { align-items: flex-start; justify-self: start; }
}

/* A chip whose player holds a shared component (strip() cell's `held`: Compile's control). On the
   corner screen it wears the component's finish (--gc-corner-chip-held, a border-image like the chip's),
   with a glow of that same frame (--gc-held-glow, without its fill), blurred and screened over it, so
   the glow has the chip's exact shape and spills just past its edge; while the holder can use it now
   (held: "live") a sheen (--gc-held-sheen, a gradient) sweeps across it, on a layer of its own clipped
   to the chip's cut corners (.sheen), moved by transform only. Reduced motion and Performance mode: no
   sheen. */
html[data-corners] .strip .cell.held { border-image: var(--gc-corner-chip-held, var(--gc-corner-chip-now)); }
html[data-corners] .strip .cell.held:not(.me):not(.near):not(.on-board) { position: relative; }
html[data-corners] .strip .cell.held::after { content: ""; position: absolute; inset: -1px; pointer-events: none; border: 0;
  border-image: var(--gc-held-glow, var(--gc-corner-chip-held, none)); filter: blur(3px); mix-blend-mode: screen; opacity: .85; }
.strip .cell .sheen { display: none; }
html[data-corners] .strip .cell.held .sheen { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
html[data-corners] .strip .cell.held .sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: var(--gc-held-sheen, linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 50%, transparent)); transform: translateX(-110%); }
html[data-corners] .strip .cell.held-live .sheen::before { animation: gc-held-sheen 3.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes gc-held-sheen { 0% { transform: translateX(-110%); } 45%, 100% { transform: translateX(250%); } }
html[data-motion="reduced"] .strip .cell.held-live .sheen::before, html.lowpower .strip .cell.held-live .sheen::before { animation: none; }

/* The corner screen: your own board bottom left (GAME.cornerBoard, desktops), a player's board at their chip. */
.corner-board { position: absolute; z-index: 24; left: calc(10px + var(--safe-l)); bottom: calc(10px + var(--safe-b));
  width: clamp(280px, 27vw, 430px); max-height: calc(100% - 140px); overflow: auto; border-radius: var(--gc-r-l);
  background: var(--gc-glass); border: 1px solid var(--gc-rule-strong); box-shadow: var(--gc-shadow); padding: 6px; }
.corner-board[hidden] { display: none; }
.corner-board > svg, .corner-board > img { display: block; width: 100%; height: auto; }
.chip-peek { position: fixed; z-index: 35; width: min(440px, calc(100vw - 20px)); max-height: calc(100% - 20px); overflow: auto;
  background: var(--gc-peek-bg, var(--gc-surface)); border: 1px solid var(--gc-rule-strong); border-top: 3px solid var(--pc, var(--gc-rule-strong));
  border-image: var(--gc-peek-frame, none); border-radius: var(--gc-peek-radius, var(--gc-r-l)); box-shadow: var(--gc-shadow); padding: 10px 14px 12px; }
/* (--gc-peek-bg, -frame (a border-image), -radius: a player's area in the game's own frame) */
.chip-peek[hidden] { display: none; }
.chip-peek-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; font-size: 13px; }
html[data-bands] .chip-peek-head { font: var(--gc-plate-name, 600 13px var(--gc-font-ui)); text-transform: var(--gc-corner-case, none); }
html[data-bands] .chip-peek-head .pdot { clip-path: var(--gc-seat-shape, none); border-radius: 0; width: 11px; height: 12px; }
.chip-peek > svg, .chip-peek > img { display: block; width: 100%; height: auto; }
html[data-corners] .strip .cell { cursor: pointer; }
/* The corner screen's chips: the numbers in a row of their own inside the chip (site.js .nums). */
html[data-corners] .strip .cell .nums { display: inline-flex; align-items: center; gap: 8px; }
/* A chip's details (a game's strip() kid with class "more"): on desktops and tablets the chip is a
   compact panel of that player's board, always on screen: the name and the score (large, right) on
   top, the details under. Your own chip joins the others when your board is in the corner, so every
   score lines up; it shows no details (your board is there). Phones: the chip's own numbers. */
.strip .cell .more { display: none; }
@media (min-aspect-ratio: 1/1) and (min-height: 521px) {
  /* the panels in a grid: --gc-chip-cols columns of --gc-chip-w (a game's tokens; default one of 268 px) */
  html[data-corners] .strip:has(.more) { display: grid; grid-template-columns: repeat(var(--gc-chip-cols, 1), var(--gc-chip-w, 268px)); gap: 6px; align-items: stretch; }
  html[data-corners] .strip .cell:has(.more) { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-content: start; align-items: center;
    column-gap: 6px; row-gap: 4px; width: auto; padding: 7px 9px 8px; }
  html[data-corners] .strip .cell:has(.more) .nums { display: contents; }
  html[data-corners] .strip .cell:has(.more) .nums > :not(.more):not(b) { display: none; }
  html[data-corners] .strip .cell:has(.more) .nums > b { grid-column: 3; grid-row: 1; font: 700 15px/1 var(--gc-font-display, inherit); white-space: nowrap; }
  html[data-corners] .strip .cell:has(.more) .more { display: flex; grid-column: 2 / 4; grid-row: 2; flex-wrap: wrap; align-items: center;
    gap: 1px 8px; font-size: 11.5px; color: var(--gc-text-2); white-space: nowrap; }
  html[data-corners] .strip .cell:has(.more) .more { grid-column: 1 / 4; }
  html[data-corner-board] .strip .cell.me { position: static; display: grid; order: -1; }
}