/* Gliński's Hexagonal Chess — dual-facing tabletop UI.
   Dark theme is default; light theme via [data-theme="light"] (spec §12). */

:root, [data-theme="dark"] {
  --bg-0:#121319; --bg-1:#171922; --panel:#1b1e28; --panel-edge:#2a2f3d;
  --tone-0:#333b47; --tone-1:#465264; --tone-2:#5b6a80;
  --white:#f1e8d6; --white-edge:#3a3528; --black:#23262f; --black-edge:#aab3c4;
  --accent:#d9a441; --accent-soft:#e7c074; --capture:#e0685f; --move:#5fa8e0;
  --ink:#ece7dd; --ink-dim:#9aa3b0; --ink-faint:#6c7382;
  --cell-stroke:#10121a;
}
[data-theme="light"] {
  --bg-0:#e7e1d3; --bg-1:#efe9db; --panel:#fbf7ee; --panel-edge:#d6cebb;
  --tone-0:#b9c0cb; --tone-1:#98a2b2; --tone-2:#7c8698;
  --white:#fbf6ea; --white-edge:#5a5340; --black:#2b2f38; --black-edge:#d7dde7;
  --accent:#b07d22; --accent-soft:#8c6118; --capture:#bf463c; --move:#2f72b8;
  --ink:#272a31; --ink-dim:#565c66; --ink-faint:#878d97;
  --cell-stroke:#e9e3d5;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background:radial-gradient(120% 80% at 50% 0%, var(--bg-1) 0%, var(--bg-0) 70%, var(--bg-0) 100%);
  color:var(--ink); font-family:"Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden; touch-action:none;
}

/* ---------- layout ---------- */
.app {
  /* dvh tracks the *visible* viewport (excludes the browser toolbars), so the
     board is never clipped behind Safari's bars; vh is the older fallback. */
  height:100vh; height:100dvh; width:100vw; width:100dvw; display:grid;
  grid-template-columns:248px 1fr 248px;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  transform-origin:center;
}
.app.flip { transform:rotate(180deg); }

.gutter {
  display:flex; flex-direction:column; padding:20px 18px; gap:13px;
  background:linear-gradient(var(--bg-1), var(--bg-0)); border-inline:1px solid var(--panel-edge);
  min-width:0;
}
.gutter.far { transform:rotate(180deg); }

.seat-head { display:flex; align-items:baseline; justify-content:space-between; }
.seat-name { font-family:"Fraunces", serif; font-weight:600; font-size:20.7px; letter-spacing:.04em; }

.score-card { position:relative; background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px;
  padding:11px 14px; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  width:100%; font:inherit; color:inherit; text-align:left; } /* reset <button> native styling */
.score-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* captured-pieces pop-out (toggled by tapping the score card). Opens downward in
   landscape; in portrait it opens "upward" in local coords, which — thanks to the
   far gutter's 180° rotation — lands toward the board for both seats. */
.captured-pop { position:absolute; left:0; top:calc(100% + 8px); z-index:8;
  min-width:160px; max-width:260px; background:var(--panel); border:1px solid var(--accent);
  border-radius:12px; padding:10px 12px; box-shadow:0 18px 44px -20px #000, 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset; }
.captured-pop[hidden] { display:none; }
.captured-pop .cap-title { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:6px; }
.captured-pop .cap-row { display:flex; flex-wrap:wrap; gap:5px; font-size:24px; line-height:1; color:var(--ink);
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2",sans-serif; }
.captured-pop .cap-none { font-size:12.5px; color:var(--ink-dim); }
.score-num { font-family:"Fraunces", serif; font-size:39.1px; font-weight:600; line-height:1; color:var(--accent-soft); }
.score-meta { text-align:right; }
.score-meta .lbl { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.adv { font-size:14.9px; color:var(--ink-dim); margin-top:3px; cursor:pointer; }

.status { border-radius:12px; padding:11px 13px; background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border:1px solid var(--panel-edge); }
.status .turn { font-size:12.6px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.status .state { font-family:"Fraunces", serif; font-size:20.7px; font-weight:600; margin-top:3px; }
.status .last { font-size:13.8px; color:var(--ink-faint); margin-top:5px; font-variant-numeric:tabular-nums; }
.gutter.on-move .status { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, 0 6px 22px -14px var(--accent); }
.gutter.on-move .status .state { color:var(--accent-soft); }

.prompt { border-radius:12px; padding:12px 13px; background:linear-gradient(180deg,#2a2230,#201a24);
  border:1px solid var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.prompt .t { font-size:13.8px; color:var(--accent-soft); margin-bottom:9px; line-height:1.25; }
.prompt .acts { display:flex; gap:8px; }
.prompt .acts .btn { flex:1; }

.legend { display:flex; gap:14px; font-size:12.6px; color:var(--ink-dim); align-items:center; }
.legend .chip { display:flex; align-items:center; gap:6px; }
.legend .mk { width:12px; height:12px; border-radius:50%; box-sizing:border-box; }
.legend .mk.move { border:2.5px solid var(--move); }
.legend .mk.cap { border:2.5px solid var(--capture); }

.spacer { flex:1 1 auto; }

/* ---------- clock (timed games) ---------- */
/* One large tappable button: clock icon stacked above the running time. */
.clock { display:flex; justify-content:center; padding:6px 0; }
.clock[hidden] { display:none; }
.clock-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; max-width:188px; padding:20px 18px 22px; border-radius:22px; cursor:pointer;
  background:var(--panel); border:2px solid var(--panel-edge); color:var(--ink-dim);
  box-shadow:0 10px 30px -20px #000; }
.clock-ic { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.clock-time { font-family:"Fraunces", serif; font-size:52px; font-weight:600; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; pointer-events:none; }
.clock-btn:disabled { cursor:default; }
.clock-btn:not(:disabled):active { transform:translateY(1px); }
.clock.armed .clock-btn { border-color:var(--accent); color:var(--accent-soft); /* pre-game: tap to start */
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset, 0 10px 30px -20px #000; }
.clock.active .clock-btn { border-color:var(--accent-soft); color:var(--accent-soft); /* this seat is running */
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset, 0 12px 34px -18px var(--accent); }
.clock.active .clock-time { color:var(--accent-soft); }
.clock:not(.active):not(.armed) .clock-time { color:var(--ink-faint); } /* idle seat dimmed */
.clock:not(.active):not(.armed) .clock-btn { opacity:.72; }
/* low time (<10s scramble): red tenths, pulsing. The .gutter prefix lifts specificity
   above the active/idle colour rules so red always wins. */
.gutter .clock.low .clock-time { color:var(--capture); animation:lowpulse 1s ease-in-out infinite; }
@keyframes lowpulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

.controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.btn { font-size:14.4px; font-weight:600; color:var(--ink); background:var(--panel);
  border:1px solid var(--panel-edge); border-radius:11px; padding:10px 11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.4; pointer-events:none; }
.btn.ghost { background:transparent; }
.btn.danger { color:#e89a93; border-color:#4a2e2c; }
.btn.mute { color:var(--capture); border-color:#4a2e2c; background:color-mix(in srgb, var(--capture) 8%, transparent); }
.btn.mute.on { background:var(--capture); color:#1a0c0b; }
.btn.primary { background:linear-gradient(180deg, var(--accent-soft), var(--accent)); color:#241a08;
  border-color:var(--accent-soft); font-weight:700; }
.btn.accept { background:linear-gradient(180deg, var(--accent-soft), var(--accent)); color:#241a08;
  border-color:var(--accent-soft); font-weight:700; }

/* ---------- board ---------- */
.board-wrap { position:relative; display:flex; align-items:center; justify-content:center; padding:10px; min-width:0; min-height:0; }
.board-wrap::before { content:""; position:absolute; inset:6px; border-radius:24px;
  background:radial-gradient(120% 120% at 50% 40%, var(--bg-1) 0%, var(--bg-0) 75%);
  box-shadow:inset 0 1px 0 var(--panel-edge), 0 24px 60px -34px #000; }
/* Absolutely positioned with explicit dimensions so the board never forces its
   cell's size (keeps the 1fr track free to shrink in portrait) and its aspect
   ratio can't overflow into the seat bars; preserveAspectRatio fits it inside. */
svg.board { position:absolute; top:10px; left:10px; width:calc(100% - 20px); height:calc(100% - 20px); overflow:visible; }
/* Faint supertitle — mirrored top/bottom so each player reads it right-side-up. */
.brand { position:absolute; left:0; right:0; text-align:center; font-family:"Fraunces", serif;
  font-size:13.8px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); pointer-events:none; }
.brand.near { top:12px; }
.brand.far { bottom:12px; transform:rotate(180deg); }

.cell { stroke:var(--cell-stroke); stroke-width:1.1; }
.cell.t0 { fill:var(--tone-0); } .cell.t1 { fill:var(--tone-1); } .cell.t2 { fill:var(--tone-2); }
.lastmove { fill:var(--accent); opacity:.16; pointer-events:none; }
.check-fill { fill:var(--capture); opacity:.24; pointer-events:none; }
.check-stroke { fill:none; stroke:var(--capture); stroke-width:5; stroke-linejoin:round; pointer-events:none; }
.coord { fill:var(--ink-dim); font-size:8.5px; opacity:.85; pointer-events:none; font-variant-numeric:tabular-nums; }

.sel-fill { fill:var(--accent); opacity:.12; pointer-events:none; }
.sel-stroke { fill:none; stroke:var(--accent); stroke-width:4; stroke-linejoin:round; pointer-events:none; }
.tgt { fill:none; stroke-width:5.5; stroke-linejoin:round; pointer-events:none; }
.tgt.move { stroke:var(--move); } .tgt.cap { stroke:var(--capture); }
@keyframes pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
.tgt { animation:pulse 1.5s ease-in-out infinite; }

.piece { pointer-events:none; }
.piece.gliding { transition:transform .2s cubic-bezier(.4,0,.2,1); }
.piece.knight-hop .piece-glyph { animation:knight-hop .22s ease; }
@keyframes knight-hop { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-16px); } }
.capture-ghost { animation:capture-fade .24s ease forwards; }
@keyframes capture-fade { to { opacity:0; } }
.piece-glyph { font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2",sans-serif;
  paint-order:stroke; }
.piece.role-white .piece-glyph { fill:var(--white); stroke:var(--white-edge); stroke-width:1.1px; }
.piece.role-black .piece-glyph { fill:var(--black); stroke:var(--black-edge); stroke-width:1.3px; }

/* ---------- overlays ---------- */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; }
.overlay[hidden] { display:none; }
.overlay::before { content:""; position:absolute; inset:6px; border-radius:24px; background:rgba(8,9,13,.55); }
.overlay .card, .overlay .modal, .overlay .histpanel { position:relative; background:rgba(22,24,32,.97);
  border:1px solid var(--panel-edge); border-radius:18px; box-shadow:0 30px 80px -28px #000, 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset; }
[data-theme="light"] .overlay .card, [data-theme="light"] .overlay .modal, [data-theme="light"] .overlay .histpanel { background:var(--panel); }

/* promotion */
.promo .card, .botdlg .card { padding:15px 18px; display:flex; flex-direction:column; align-items:center; gap:11px; }
.promo.face-far .card, .botdlg.face-far .card { transform:rotate(180deg); }
.settings.face-far .modal { transform:rotate(180deg); }
.undo.face-far .histpanel { transform:rotate(180deg); }
.promo .ttl, .botdlg .ttl { font-family:"Fraunces",serif; font-weight:600; color:var(--accent-soft); }
.promo .opts, .botdlg .opts { display:flex; gap:10px; }
.promo .opt, .botdlg .opt { width:72px; height:84px; border-radius:13px; background:linear-gradient(180deg,var(--bg-1),var(--bg-0));
  border:1px solid var(--panel-edge); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.promo .opt:active, .botdlg .opt:active { border-color:var(--accent); }
.promo .opt .g, .botdlg .opt .g { font-family:"Segoe UI Symbol","Apple Symbols",sans-serif; font-size:46.0px; color:var(--white); line-height:1; }
.promo .opt .n, .botdlg .opt .n { font-size:11.5px; color:var(--ink-dim); letter-spacing:.08em; text-transform:uppercase; }
.botdlg .sub { font-size:12.6px; color:var(--ink-faint); max-width:240px; text-align:center; margin-top:-3px; }
.botdlg .btn { margin-top:3px; }

/* game over — dual-facing card */
.endcard .card { width:300px; overflow:hidden; }
.endhalf { padding:15px 18px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.endhalf.top { transform:rotate(180deg); border-bottom:1px solid var(--panel-edge); }
.endhalf .kick { font-size:12.6px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.endhalf .main { font-family:"Fraunces",serif; font-size:23.0px; font-weight:600; color:var(--accent-soft); text-align:center; }
.endbtns { display:flex; gap:8px; }

/* undo / history picker */
.undo .histpanel { width:312px; max-height:86%; overflow:auto; padding:17px 19px; }
.histpanel h3 { font-family:"Fraunces",serif; font-size:20.7px; font-weight:600; }
.histpanel .hint { font-size:12.6px; color:var(--ink-faint); margin:2px 0 11px; }
.mlist { font-size:14.9px; font-variant-numeric:tabular-nums; }
.mrow { display:grid; grid-template-columns:24px 1fr 1fr; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; align-items:center; }
.mrow .no { color:var(--ink-faint); font-size:13.8px; }
.mrow .mv:hover { color:var(--accent-soft); }
.mrow .mv.sel-target { color:var(--accent-soft); font-weight:700; }
.mrow .mv.ghost { color:var(--ink-faint); text-decoration:line-through; opacity:.6; }
.mrow.target { background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:0 0 0 1px var(--accent) inset; }
.histfoot { display:flex; justify-content:space-between; gap:10px; margin-top:13px; }

/* settings */
.settings .modal { width:430px; max-height:96%; overflow:auto; padding:15px 24px 16px; }
.settings h2 { font-family:"Fraunces",serif; font-size:27.6px; font-weight:600; display:flex; justify-content:space-between; align-items:baseline; }
.savednote { font-size:12.6px; color:var(--ink-faint); letter-spacing:.04em; }
.grp { font-family:"Fraunces",serif; font-size:13.8px; letter-spacing:.12em; color:var(--accent-soft); margin:10px 0 1px; text-transform:uppercase; }
.settings .row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--panel-edge); gap:14px; }
.settings .lab { font-size:16.1px; }
.settings .sub { font-size:12.6px; color:var(--ink-faint); margin-top:2px; max-width:240px; }
.toggle { width:44px; height:26px; border-radius:13px; background:var(--panel-edge); position:relative; border:1px solid var(--panel-edge); flex:none; cursor:pointer; }
.toggle.on { background:linear-gradient(180deg,var(--accent-soft),var(--accent)); border-color:var(--accent-soft); }
.toggle .knob { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--bg-0); transition:left .15s; }
.toggle.on .knob { left:20px; background:#241a08; }
.seg { display:inline-flex; background:var(--bg-0); border:1px solid var(--panel-edge); border-radius:10px; overflow:hidden; flex:none; }
.seg button { padding:7px 13px; font-size:14.4px; font-weight:600; color:var(--ink-dim); background:transparent; border:none; cursor:pointer; }
.seg button.act { background:linear-gradient(180deg,var(--accent-soft),var(--accent)); color:#241a08; }
/* A full-width segmented control that shares its width evenly (for the 6 clock presets). */
.settings .row.stack { flex-direction:column; align-items:stretch; gap:8px; }
.settings .row.stack .sub { max-width:none; }
.seg.full { display:flex; }
.seg.full button { flex:1 1 0; padding:7px 4px; text-align:center; }
/* Custom time-control builder: two stepper fields revealed under the preset row. */
.custombuild { display:flex; gap:10px; flex-wrap:wrap; }
.custombuild[hidden] { display:none; } /* beat .custombuild's display:flex so [hidden] collapses */
.cb-field { display:flex; align-items:center; gap:8px; flex:1 1 0; background:var(--bg-0); border:1px solid var(--panel-edge); border-radius:10px; padding:6px 10px; }
.cb-lab { font-size:13px; color:var(--ink-faint); margin-right:auto; }
.cb-val { font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; min-width:54px; text-align:center; }
.cb-step { width:28px; height:28px; border-radius:7px; border:1px solid var(--panel-edge); background:var(--panel); color:var(--ink); font-size:18px; line-height:1; cursor:pointer; flex:none; }
.cb-step:active { background:var(--accent-soft); color:#241a08; }
.modal-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.btn.reset { background:transparent; color:var(--ink-dim); font-weight:600; }
.foot-actions { display:flex; gap:10px; }

/* ---------- help: round "?" trigger + field-guide modal ---------- */
/* centered row of round icon buttons (help, fullscreen) under the controls */
.aux-row { grid-column:1 / -1; justify-self:center; display:flex; gap:10px; margin-top:2px; }
.help-btn { width:42px; height:42px; padding:0;
  border-radius:50%; font-family:"Fraunces",serif; font-size:23px; font-weight:600; line-height:1;
  color:var(--accent-soft); background:var(--panel); border:1.5px solid var(--accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset, 0 8px 24px -14px #000; }
.help-btn.fs svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none; display:block; }
.help-btn.on { background:linear-gradient(180deg, var(--accent-soft), var(--accent)); color:#241a08; }
.help-btn[hidden] { display:none; }
.help-btn:active { transform:translateY(1px); }

.help .helpmodal { position:relative; width:min(500px, 94%); max-height:88%; display:flex; flex-direction:column;
  background:rgba(22,24,32,.98); border:1px solid var(--panel-edge); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 100px -30px #000, 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset; }
[data-theme="light"] .help .helpmodal { background:var(--panel); }
.help.face-far .helpmodal { transform:rotate(180deg); }

.help-head { position:relative; flex:none; padding:18px 22px 0; border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent); }
.help-eyebrow { font-family:"Fraunces",serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.help-title { font-family:"Fraunces",serif; font-size:25px; font-weight:600; margin-top:2px; line-height:1.1; }
.help-close { position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:50%;
  background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink-dim);
  font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.help-close:active { transform:translateY(1px); }

.helpmodal .tabs { display:flex; gap:4px; margin-top:16px; }
.helpmodal .tab { position:relative; padding:11px 16px 13px; font-size:14.5px; font-weight:600;
  color:var(--ink-faint); background:transparent; border:none; cursor:pointer; font-family:inherit; }
.helpmodal .tab .ic { margin-right:7px; opacity:.85; }
.helpmodal .tab .ic svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; }
.helpmodal .tab.act { color:var(--accent-soft); }
.helpmodal .tab.act::after { content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2.5px;
  border-radius:2px; background:linear-gradient(90deg, var(--accent-soft), var(--accent)); }

.help-body { padding:20px 24px 24px; overflow:auto; flex:1 1 auto; }
.helpmodal .panel[hidden] { display:none; }
.helpmodal .lead { font-size:15px; line-height:1.6; color:var(--ink-dim); margin-bottom:18px; }
.helpmodal a { color:var(--accent-soft); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.helpmodal a:active { color:var(--accent); }
.helpmodal .lead b, .helpmodal .sec b, .helpmodal .dd b { color:var(--accent-soft); font-weight:600; }
.helpmodal .sec { margin-bottom:18px; }
.helpmodal .sec:last-child { margin-bottom:2px; }
.helpmodal .sec h3 { font-family:"Fraunces",serif; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-soft); margin-bottom:7px; }
.helpmodal .sec p { font-size:14.5px; line-height:1.62; color:var(--ink); margin-bottom:7px; }
.helpmodal .sec p:last-child { margin-bottom:0; }

.helpmodal .moves { display:flex; flex-direction:column; gap:1px; background:var(--panel-edge);
  border:1px solid var(--panel-edge); border-radius:12px; overflow:hidden; }
.helpmodal .moves .mv { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center;
  padding:10px 14px; background:rgba(22,24,32,.97); }
[data-theme="light"] .helpmodal .moves .mv { background:var(--panel); }
.helpmodal .moves .pc { font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2",sans-serif;
  font-size:30px; line-height:1; color:var(--white); text-align:center; }
.helpmodal .moves .nm { font-weight:600; font-size:14.5px; color:var(--ink); display:block; margin-bottom:1px; }
.helpmodal .moves .ds { font-size:13px; line-height:1.45; color:var(--ink-dim); }

.helpmodal .ctrls { display:flex; flex-direction:column; gap:9px; }
.helpmodal .ctrl { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
.helpmodal .ctrl .ico { font-size:19px; line-height:1.3; text-align:center; }
.helpmodal .ctrl .nm { font-weight:600; color:var(--ink); }
.helpmodal .ctrl .ds { font-size:13.5px; line-height:1.5; color:var(--ink-dim); margin-top:1px; }
.helpmodal .sw { display:inline-block; width:13px; height:13px; border-radius:50%; vertical-align:-1px; margin:0 2px; }
.helpmodal .sw.move { border:2.5px solid var(--move); }
.helpmodal .sw.cap { border:2.5px solid var(--capture); }

.helpmodal .dl { display:flex; flex-direction:column; gap:13px; }
.helpmodal .dt { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:3px; }
.helpmodal .dt .nm { font-weight:600; font-size:14.5px; color:var(--ink); }
.helpmodal .dd { font-size:13.7px; line-height:1.55; color:var(--ink-dim); }
.helpmodal .score { font-variant-numeric:tabular-nums; }

.helpmodal .tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; letter-spacing:.03em;
  color:var(--accent-soft); background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:999px; padding:2px 9px;
  white-space:nowrap; vertical-align:1px; }
.helpmodal .tag::before { content:"⚙"; font-size:10px; opacity:.8; }

.helpmodal .callout { margin-top:6px; padding:11px 14px; border-radius:11px; font-size:13.5px; line-height:1.55;
  color:var(--ink-dim); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent); }
.helpmodal .callout b { color:var(--accent-soft); }

/* rotate hint (unused when both orientations supported; kept for very small screens) */
.rotate-hint { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:40px; background:var(--bg-0); color:var(--ink-dim); z-index:20; }
.rotate-hint[hidden] { display:none; }

/* device warning — shown when not on a touch tablet */
.device-warning { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  padding:32px; background:radial-gradient(120% 80% at 50% 0%, var(--bg-1) 0%, var(--bg-0) 70%); }
.device-warning[hidden] { display:none; }
.dw-card { max-width:440px; text-align:center; background:rgba(22,24,32,.98); border:1px solid var(--panel-edge);
  border-radius:20px; padding:30px 32px 28px;
  box-shadow:0 40px 100px -30px #000, 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset; }
[data-theme="light"] .dw-card { background:var(--panel); }
.dw-eyebrow { font-family:"Fraunces",serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.dw-title { font-family:"Fraunces",serif; font-size:27px; font-weight:600; margin-top:6px; color:var(--accent-soft); }
.dw-body { font-size:15px; line-height:1.62; color:var(--ink-dim); margin:14px 0 22px; }
.dw-body b { color:var(--accent-soft); font-weight:600; }
.dw-btn { font-family:inherit; font-size:15px; font-weight:600; color:#241a08; cursor:pointer;
  background:linear-gradient(180deg, var(--accent-soft), var(--accent)); border:1px solid var(--accent-soft);
  border-radius:12px; padding:12px 22px; }
.dw-btn:active { transform:translateY(1px); }

/* ---------- portrait ---------- */
@media (orientation:portrait) {
  .app { grid-template-columns:none; grid-template-rows:auto 1fr auto; }
  .gutter { flex-direction:row; align-items:center; gap:12px; padding:12px 18px; border-inline:none; border-block:1px solid var(--panel-edge); flex-wrap:wrap; }
  /* Each console on the edge nearest its player: far (top, rotated), near (bottom). */
  .gutter.far { transform:rotate(180deg); order:1; }
  .board-wrap { order:2; }
  .gutter.near { order:3; }
  .gutter .legend, .gutter .spacer { display:none; }
  .gutter .status { flex:1 1 auto; }
  /* compact stacked clock in the row layout */
  .clock { padding:0; }
  .clock-btn { width:auto; max-width:none; padding:6px 14px; gap:3px; border-radius:14px; }
  .clock-ic { width:18px; height:18px; }
  .clock-time { font-size:26px; }
  .gutter .controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; margin-left:auto; }
  .gutter .controls .btn { padding:9px 11px; }
  .gutter .prompt { flex-basis:100%; order:5; }
  /* open the captured pane toward the board (away from the screen edge) */
  .captured-pop { top:auto; bottom:calc(100% + 8px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .app { transition:none; }
  .tgt { animation:none; opacity:.9; }
  .toggle .knob { transition:none; }
  .gutter .clock.low .clock-time { animation:none; } /* keep the red, drop the pulse */
}