/* cobalt-melon-wars.css — Melon Wars chrome on the Cobalt schema (claude_20261002_cobalt, sub-agent training-a, 2026-10-03).
 * Loads last. The game's brand (watermelon red and rind green, avatar, lobby glow, feed art) stays inside the content;
 * surfaces, rules, buttons, focus and status colours come from the tokens. Light by default; dark from the shell or system. */
:root, :root[data-theme] {
  --of-paper: var(--paper); --card: var(--card); --card-2: var(--paper-soft); --of-ink: var(--ink); --of-ink-soft: var(--muted);
  --of-rule: color-mix(in srgb, var(--rule) 60%, transparent); --of-good: var(--good); --of-warn: var(--warn); --of-bad: var(--bad);
  --accent-fill: var(--cobalt); --focus: var(--cobalt); --pressed: var(--accent-subtle); --hud: var(--glass-strong);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html.c-game { font-family: var(--font); }
.c-game :focus-visible, .c-game button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.c-game .primary { color: var(--on-accent); }

/* HUD: a thin glass bar in the shell's theme */
.c-game .hud { background: var(--glass-strong); color: var(--ink); border-bottom: 1px solid var(--glass-line); }
.c-game .hud button { background: transparent; border-color: transparent; color: var(--ink); }
.c-game .hud button:hover { background: var(--accent-subtle); }
.c-game .hud .avatar { border-color: var(--line); }
.c-game .m-label, .c-game .meter .m-next { color: var(--muted); }
.c-game .hud-meters .m-label { font-size: max(10px, .62rem); }
.c-game .cash { color: var(--good); }

/* type: labels are small caps in muted ink; titles bold and modest */
.c-game .eyebrow { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.c-game .lobby h1 { font-size: 1.5rem; font-weight: 700; }
.c-game .card-top h2 { font-size: 1.1rem; font-weight: 700; }
.c-game .over h2 { font-size: 1.35rem; font-weight: 700; }

/* overlays: Cobalt glass and scrim */
.c-game .card-layer { background: var(--scrim); }
.c-game .card-layer > .card { background: var(--glass); border-color: var(--glass-line); box-shadow: var(--shadow); color: var(--ink); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
@media (prefers-reduced-transparency: reduce) { .c-game .card-layer > .card { background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.c-game .sheet-layer > .card.sheet { background: var(--glass-strong); }
.c-game .grab { background: color-mix(in srgb, var(--ink) 25%, transparent); }
.c-game .card-layer .close:not(.c-x) { border-color: transparent; background: transparent; color: var(--muted); font-size: 1.2rem; }

/* the How to play sheet (css/cobalt-arcade.css) replaces the old centred explainer card */
.c-game #explainer.c-howto-layer { place-items: initial; padding: 0; animation: none; }

/* tab dock: glass, muted words, the selected tab in ink with the game's red marker */
.c-game .deck { background: var(--glass-strong); border-top-color: var(--glass-line); border-left-color: var(--glass-line); border-right-color: var(--glass-line); }
.c-game .deck button { color: var(--muted); }
.c-game .deck [aria-selected="true"] { color: var(--ink); }
.c-game .post-btn, .c-game .again { color: var(--on-accent); }