/* cobalt-sinwar.css — Sinwar Snake chrome on the Cobalt schema (claude_20261002_cobalt, sub-agent training-b, 2026-10-03).
 * Loaded after styles.css + cobalt-tokens.css + cobalt-ui.css. The board, sprites and night stage are the game's art
 * and keep their colours; the HUD, cards, deck, chips and the How to play sheet take type, colour and spacing from the tokens.
 * Light by default; dark from prefers-color-scheme or the shell theme (html[data-theme]). */

/* legacy variables now point at tokens so every old rule follows the theme */
html:root, html:root[data-theme] {
  --of-ink: var(--ink); --eyebrow: var(--muted); --of-warn: var(--warn);
  --pressed: var(--accent-subtle); --btn-bg: var(--card); --btn-line: var(--rule); --focus: var(--cobalt);
}
.game-shell { font: 400 var(--fs-body)/1.5 var(--font); }
button { font-family: var(--font); }
button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* ---- HUD: one quiet glass row; small labels, bold numbers ---- */
.hud { gap: 4px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); color: var(--ink); }
.hud-button { width: 44px; height: 44px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink); position: relative; }
.hud-button:hover { background: var(--accent-subtle); }
.hud-button:active { background: var(--accent-subtle); }
.hud-button svg.c-ico { width: 18px; height: 18px; fill: none; }
.hud-button:focus-visible { outline-color: var(--cobalt); }
.sound-slash { display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; margin: -.75px 0 0 -11px; background: currentColor; transform: rotate(-45deg); border-radius: 1px; }
#sound-button[aria-pressed="false"] .sound-slash { display: block; }
.hud-stats { gap: 4px; }
.hud-stat { line-height: 1.15; }
.hud-stat small { font: 700 10px/1.2 var(--font); letter-spacing: .03em; color: var(--muted); }
.hud-stat b { font: 700 13.5px/1.25 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
.hud-stat.best b { color: var(--cobalt); }

/* ---- stage overlays: small glass pills over the art ---- */
.speed-pill, .stage-chip { padding: 4px 10px; border-radius: 13px; font: 700 11px/1.3 var(--font); letter-spacing: .02em; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); color: var(--ink); box-shadow: var(--shadow); }
.speed-pill { color: var(--warn); }

/* ---- deck (D-pad): quiet controls on the token surface ---- */
.deck button { background: var(--glass-strong); border: 1px solid var(--rule); color: var(--ink); box-shadow: none; border-radius: 10px; }
.deck button:active, .deck button[data-held] { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-accent); }
.deck svg { stroke-width: 2.2; }
.deck .sprint { font: 700 11px/1 var(--font); letter-spacing: .06em; border-color: var(--warn); color: var(--warn); }

/* ---- card layers: one content-sized glass card each ---- */
html[data-theme] .card-layer, .card-layer { background: var(--scrim); }
.card { width: min(23rem, 100%); padding: 16px; color: var(--ink); background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: var(--r-sheet); box-shadow: var(--shadow); font-size: var(--fs-body); }
@supports not (backdrop-filter: blur(1px)) { .card { background: var(--glass-strong); } }
@media (prefers-reduced-transparency: reduce) { .card { background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.card h1 { font-size: var(--fs-title); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 2px 0 0; }
.card h2 { font-size: 16px; font-weight: 700; margin: 2px 0 6px; }
.card h3 { margin: 12px 0 4px; color: var(--muted); font: 700 10px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.card p { margin: 6px 0; }
.eyebrow { color: var(--muted); font: 700 10px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.lede { font-size: 13px; line-height: 1.5; }
.muted { color: var(--muted); font-size: var(--fs-small); }
.ceo-crop { border-color: var(--rule); }
.ceo figcaption { background: var(--ink); color: var(--paper); font: 700 10px/1.5 var(--font); letter-spacing: .08em; }

/* one dominant action; secondary actions look secondary */
.primary { min-height: 44px; margin: 12px 0 8px; border: 1px solid var(--cobalt); border-radius: var(--r-ctl); background: var(--cobalt); color: var(--on-accent); font: 700 13px/1 var(--font); box-shadow: none; }
.primary:active { background: var(--cobalt); filter: brightness(1.1); }
.ghost { min-height: 44px; border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--card); color: var(--cobalt); font: 700 12px/1 var(--font); }
.row { gap: 6px; }
.row > button { font-size: 12px; }
#lobby-row p { font-size: var(--fs-small); color: var(--muted); }
.text-button { min-height: 44px; color: var(--muted); font: 700 11px/1 var(--font); }

/* mode switch = segmented control */
.segmented { gap: 0; margin: 12px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--card); overflow: hidden; }
.segmented button { min-height: 44px; border: 0; border-left: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); font: 400 12px/1 var(--font); }
.segmented button:first-child { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--cobalt); color: var(--on-accent); font-weight: 700; border-color: var(--rule); box-shadow: none; }
.chip { padding: 0 10px; height: 24px; display: inline-flex; align-items: center; border-radius: 12px; border: 1px solid var(--cobalt); background: var(--accent-subtle); color: var(--cobalt); font: 700 11px/1 var(--font); }
.best-line { margin: 2px 0 10px; font-size: var(--fs-small); color: var(--muted); }
.best-line b { color: var(--ink); }

/* pause + game over */
.pause-grid { gap: 6px; margin-top: 6px; }
.pause-grid button { font-size: 12px; }
.stat-grid { gap: 6px; margin: 10px 0; }
.stat { padding: 7px 10px; border-radius: var(--r-card); background: var(--paper-soft); }
.stat small { font: 700 10px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat b { font-size: 14px; font-weight: 700; }
.score-big b { font-size: 30px; font-weight: 700; color: var(--cobalt); }
.score-big .muted { font-size: 12px; }
.top-five { font-size: 12px; }
.top-five li { padding: 4px 8px; border-radius: var(--r-ctl); }
.top-five li.me { background: var(--accent-subtle); color: var(--cobalt); font-weight: 700; }
.warn { color: var(--warn); font-size: var(--fs-small); }

/* ---- kit sheets inside the game (How to play, Share) ---- */
.c-sheet { font: 400 var(--fs-body)/1.5 var(--font); color: var(--ink); }
.c-sheet, .c-sheet * { box-sizing: border-box; }
.c-sheet button, .c-sheet .c-btn { min-width: 0; min-height: 0; font-family: var(--font); }
.c-sheet .c-x { width: 28px; height: 28px; display: grid; place-items: center; }
.c-sheet .c-row { min-height: 0; border-radius: 0; }
.c-sheet .c-chip { font-weight: 400; }
.c-sheet .c-chip:active, .c-sheet .c-btn:active { background: var(--accent-subtle); }
.c-howto-sheet .c-howto { max-width: none; margin: 0; padding: 4px 14px 14px; border-radius: 0; box-shadow: none; }
.c-howto .c-step b { display: block; line-height: 1.35; }
.c-howto .c-keys { line-height: 2; }
.c-howto .c-keys .c-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.c-howto .c-kbd { margin: 0 1px; color: var(--ink); }
.c-howto-block { padding: 10px 0 2px; border-top: 1px solid var(--line-soft); margin-top: 8px; }
.c-howto-block p { margin: 4px 0 0; }
.c-howto-joke { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.c-sheet .c-label, .c-howto .c-label { font-size: 10px; }
.c-sheet[aria-hidden="true"]:not(.c-open) { pointer-events: none; }