@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Fredoka:wght@400;500;600;700&display=swap');

/*
 * deckades.css — the shared chrome for every Deckades game.
 * ============================================================================
 *
 * THIS FILE IS THE HOUSE STYLE. Link it BEFORE the game's own style.css:
 *
 *     <link rel="stylesheet" href="../core/deckades.css">
 *     <link rel="stylesheet" href="style.css">
 *
 * It owns the header bar, the Deckades logo, the AI indicator, the header tool
 * buttons, the two standard tool panels (move log 📜 / AI decisions 🤖), the
 * start screen, the game-over modal, and the shared felt background. A game
 * styles its own board, cards and zones — nothing above.
 *
 * ── The uniformity contract ─────────────────────────────────────────────────
 *
 * A game's style.css may re-declare EXACTLY FOUR tokens:
 *
 *     --dk-accent        the game's highlight colour
 *     --dk-accent-soft   a low-alpha version of it, for borders and washes
 *     --dk-tint          the radial hue laid over the shared table photo
 *     --dk-font-display  ONLY when the game ships its own font (see below)
 *
 * Re-declaring any other --dk-* token, or restyling a #header-*, .deckades-*,
 * #ai-indicator, .hdr-*, .start-* or #dk-* selector locally, is a bug. That is
 * what "uniform" means here, and it is greppable:
 *
 *     grep -rn "#header-bar|\.deckades-logo|\.start-card|#ai-indicator" games/GAME/style.css
 *         → must return nothing
 *
 * (Written without a glob on purpose: a "* /" pair anywhere in this comment would
 * close it early and silently drop the :root block below — which is exactly what
 * happened when the path was spelled with wildcards.)
 *
 * ── Why this file exists ────────────────────────────────────────────────────
 *
 * Until 2026-07-28 the /card-game-UI-header and /card-game-UI-start-screen
 * skills emitted ~200 lines of literal CSS for each game to paste into its own
 * stylesheet. Copy-paste inheritance drifts by construction: 25 games ended up
 * with 17 different :root vocabularies, four different header heights
 * (36/44/46/52px), the start screen styled six separate times, and the class
 * names themselves forked (.start-subtitle vs .start-sub). Shared inheritance
 * is the fix. Do not reintroduce a local copy of anything below.
 *
 * ── Fonts ───────────────────────────────────────────────────────────────────
 *
 * Cormorant Garamond (display) + Fredoka (UI) is the house pair, imported
 * above so no game needs its own Google Fonts link.
 *
 * WHEN A GAME SHIPS ITS OWN FONT IN ITS FOLDER, USE THAT ONE. Declare the
 * @font-face in the game's style.css and repoint --dk-font-display at it; the
 * UI font stays Fredoka so buttons, labels and panels still match:
 *
 *     @font-face { font-family: 'Augusta'; src: url('assets/fonts/Augusta.woff2'); }
 *     :root { --dk-font-display: 'Augusta', 'Cormorant Garamond', serif; }
 *
 * Live cases: Dalmuti/assets/fonts/Augusta.woff2, Geier/assets/duality.otf.
 * ============================================================================
 */

:root {
    /* ── Type ─────────────────────────────────────────────────────────────── */
    --dk-font-display: 'Cormorant Garamond', Georgia, serif;
    --dk-font-ui:      'Fredoka', 'Segoe UI', system-ui, sans-serif;

    /* ── Chrome — never overridden by a game ──────────────────────────────── */
    --dk-header-h:    52px;
    --dk-header-bg:   linear-gradient(180deg,
                          rgba(14, 8, 28, 0.92),
                          rgba(14, 8, 28, 0.65) 80%,
                          rgba(14, 8, 28, 0));
    --dk-header-line: rgba(150, 100, 220, 0.18);

    --dk-logo:        rgba(200, 180, 240, 0.45);
    --dk-logo-hover:  rgba(200, 180, 240, 0.92);
    --dk-spade:       rgba(150, 100, 220, 0.55);
    --dk-spade-hover: rgba(180, 140, 255, 1);

    --dk-msg:         rgba(240, 234, 216, 0.78);
    --dk-msg-alert:   rgba(240, 150, 120, 0.95);
    --dk-msg-good:    rgba(140, 240, 160, 0.95);

    --dk-panel:       rgba(18, 10, 34, 0.97);
    --dk-panel-line:  rgba(150, 100, 220, 0.32);
    --dk-panel-text:  rgba(225, 215, 245, 0.92);
    --dk-panel-dim:   rgba(225, 215, 245, 0.55);
    --dk-panel-shadow: 0 10px 34px rgba(0, 0, 0, 0.62);

    --dk-scrim:       rgba(8, 5, 16, 0.86);
    --dk-field-bg:    #1c1730;
    --dk-field-line:  #443a66;

    --dk-radius:      8px;
    --dk-radius-lg:   14px;
    --dk-tap:         44px;          /* Apple HIG / Material minimum tap target */

    --dk-z-header:    300;
    --dk-z-popup:     301;
    --dk-z-panel:     400;
    --dk-z-overlay:   1100;
    --dk-z-start:     1200;
    --dk-z-tip:       10001;

    /* ── Skin — the ONLY tokens a game may re-declare ─────────────────────── */
    --dk-accent:      #8b6fe0;
    --dk-accent-soft: rgba(139, 111, 224, 0.35);
    --dk-tint:        rgba(112, 74, 168, 0.26);
}

/* ────────────────────────────────────────────────────────────────────────────
 * Shared table background
 *
 * The felt photo at games/table.avif is the table in EVERY game — it is what
 * makes the platform read as one product. Apply it to the play surface:
 *
 *     #game { background: var(--dk-table); }        or   <div id="game" class="dk-table">
 *
 * The dark scrim over the photo is not decoration: without it the photo's own
 * highlights compete with the cards, which must stay the brightest thing on
 * screen. Tint with --dk-tint if the game wants its own hue.
 *
 * The per-game cover image belongs BEHIND THE START SCREEN ONLY (body::before
 * + body::after in the game's own style.css), where a distinct identity per
 * game is a feature rather than drift.
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
    --dk-table:
        radial-gradient(ellipse at 50% 40%, var(--dk-tint), transparent 68%),
        linear-gradient(rgba(16, 12, 30, 0.70), rgba(11, 9, 22, 0.84)),
        url('../table.avif') center / cover no-repeat fixed;
}

.dk-table { background: var(--dk-table); }

/* ────────────────────────────────────────────────────────────────────────────
 * Header bar — y = 0 to y = var(--dk-header-h) is reserved.
 * Nothing else may anchor at top:0. Every other fixed/absolute element starts
 * at y >= 56px (52 + 4px gap); use top:64px for a comfortable gap.
 * ──────────────────────────────────────────────────────────────────────────── */

#header-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--dk-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    background: var(--dk-header-bg);
    border-bottom: 1px solid var(--dk-header-line);
    z-index: var(--dk-z-header);
    pointer-events: none;               /* the strip never eats board clicks */
}
#header-bar > * { pointer-events: auto; }

#header-left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
#header-right { display: flex; align-items: center; gap: 8px; }

/* Absolutely centred so it does NOT shift when the left/right clusters change
   width — a growing AI badge must not slide what sits in the middle.

   THE CENTRE SLOT IS THE GAME'S NAME. Top centre is where a player looks to find out
   what they are playing, and it is the one place on the strip whose position does not
   depend on how wide the AI badge or the tool row happens to be. */
#header-center {
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    height: var(--dk-header-h);
    display: flex; align-items: center;
    max-width: min(46vw, 520px);
    pointer-events: none;
}
#header-center .game-wordmark {
    font-size: 19px;
    letter-spacing: 0.26em;
    opacity: 1;
}

/* LEGACY. Turn and help text belongs beside the player's own area (#status-line below),
   not up here — at the top of the screen it is missed. Games written before 2026-08-01
   still put #header-msg in #header-center and keep working; new games must not. */
#header-msg {
    font-family: var(--dk-font-ui);
    font-size: 13px; letter-spacing: 0.4px;
    color: var(--dk-msg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity 0.25s;
}
#header-msg.show      { opacity: 1; }
#header-msg.msg-alert { color: var(--dk-msg-alert); }
#header-msg.msg-good  { color: var(--dk-msg-good); }

/* ── Status line: whose turn it is, and what the player may do right now ─────
 *
 * It belongs BESIDE THE PLAYER'S OWN AREA — under their hand, their plate, their board
 * edge — because that is where they are already looking when they need it. Dalmuti and
 * Haggis both moved it there after the same complaint: in the header it was missed.
 *
 * The game positions it (left/top) in the SAME JS layout pass as the player's cards, so
 * the strip can never drift away from the thing it describes. Only the appearance is
 * here. `position: fixed` so the coordinates are viewport coordinates, matching what
 * getBoundingClientRect() on a card returns. */
#status-line {
    position: fixed;
    transform: translateX(-50%);
    max-width: 92vw;
    text-align: center;
    pointer-events: none;
    z-index: 120;
}
#status-msg {
    display: inline-block;
    font-family: var(--dk-font-display);
    font-size: 17px; letter-spacing: 0.4px;
    color: var(--dk-msg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 92vw;
    opacity: 0; transition: opacity 0.25s, color 0.2s;
}
#status-msg.show      { opacity: 1; }
#status-msg.msg-alert { color: var(--dk-msg-alert); }
#status-msg.msg-good  { color: var(--dk-msg-good); }

@media (max-height: 560px) {
    #status-msg { font-size: 14px; }
}

/* ── Deckades logo ──────────────────────────────────────────────────────── */

.deckades-logo {
    font-family: var(--dk-font-display);
    font-weight: 700; font-size: 22px; letter-spacing: 0.12em;
    color: var(--dk-logo);
    text-decoration: none; user-select: none; line-height: 1;
    transition: color 0.2s;
}
.deckades-logo:hover { color: var(--dk-logo-hover); }
.deckades-spade {
    color: var(--dk-spade);
    font-size: 1.2em; vertical-align: middle;
    display: inline-block; transform: translateY(-2px);
    transition: color 0.2s;
}
.deckades-logo:hover .deckades-spade { color: var(--dk-spade-hover); }

.game-wordmark {
    font-family: var(--dk-font-display);
    font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--dk-accent); opacity: 0.9;
    user-select: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── AI indicator ───────────────────────────────────────────────────────── */

#ai-indicator {
    position: relative;                 /* anchors the hover detail card */
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 12px;
    font-family: var(--dk-font-ui);
    font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(20, 10, 40, 0.65);
    border: 1px solid var(--dk-header-line);
    color: rgba(200, 180, 240, 0.7);
    white-space: nowrap; user-select: none; cursor: default;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#ai-indicator::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(180, 180, 180, 0.5); box-shadow: 0 0 6px rgba(180, 180, 180, 0.4);
}
#ai-indicator.ai-pending::before   { background: rgba(200,180,80,0.85); box-shadow: 0 0 6px rgba(200,180,80,0.55); }
#ai-indicator.ai-onnx              { color: rgba(140,240,160,0.95); border-color: rgba(140,240,160,0.45); }
#ai-indicator.ai-onnx::before      { background: rgba(140,240,160,0.95); box-shadow: 0 0 8px rgba(140,240,160,0.7); }
#ai-indicator.ai-ready             { color: rgba(190,160,245,0.95); border-color: rgba(170,130,235,0.45); }
#ai-indicator.ai-ready::before     { background: rgba(190,160,245,0.95); box-shadow: 0 0 8px rgba(170,130,235,0.65); }
#ai-indicator.ai-heuristic         { color: rgba(220,180,110,0.95); border-color: rgba(220,180,110,0.35); }
#ai-indicator.ai-heuristic::before { background: rgba(220,180,110,0.9); box-shadow: 0 0 6px rgba(220,180,110,0.5); }

/* Hover detail card — what model, exported when, why heuristic. */
#ai-indicator-detail {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 224px; padding: 8px 10px;
    background: var(--dk-panel);
    border: 1px solid var(--dk-panel-line);
    border-radius: var(--dk-radius);
    font-size: 11px; font-weight: 500; letter-spacing: 0.3px; text-transform: none;
    color: var(--dk-panel-text); line-height: 1.5;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    display: none; z-index: var(--dk-z-tip);
}
#ai-indicator:hover #ai-indicator-detail,
#ai-indicator.tip-open #ai-indicator-detail { display: block; }
#ai-indicator-detail .ai-detail-head {
    font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
    opacity: 0.55; margin-bottom: 5px;
}
#ai-indicator-detail .ai-detail-row  { display: flex; align-items: baseline; gap: 10px; }
#ai-indicator-detail .ai-detail-key  { opacity: 0.55; }
#ai-indicator-detail .ai-detail-val  { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
#ai-indicator-detail .ai-detail-time {
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--dk-header-line);
    font-size: 9.5px; letter-spacing: 0.5px; opacity: 0.6;
}

/* ── Header tool buttons (📜 🤖 🏆 🎵 ?) ────────────────────────────────── */

.hdr-tool-btn {
    width: var(--dk-tap); height: var(--dk-tap);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(150, 100, 220, 0.45);
    color: rgba(190, 155, 235, 0.85);
    font-size: 16px; padding: 0; cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#rules-btn { font-size: 18px; font-weight: 700; text-decoration: none; }
.hdr-tool-btn:hover,
.hdr-tool-btn.active {
    background: rgba(150, 100, 220, 0.2);
    color: rgba(215, 180, 255, 1);
    border-color: rgba(170, 120, 240, 1);
}

/* Hovering a tool button must not also open the AI badge's detail card. */
#header-right .hdr-tool-btn:hover ~ #ai-indicator #ai-indicator-detail { display: none; }

#rules-popup {
    position: fixed; right: 14px; top: calc(var(--dk-header-h) + 10px);
    min-width: 220px; max-width: 320px;
    padding: 14px 36px 14px 14px;
    background: var(--dk-panel);
    border: 1px solid rgba(150, 100, 220, 0.5);
    border-radius: 10px;
    color: var(--dk-panel-text);
    font-family: var(--dk-font-ui);
    font-size: 12.5px; letter-spacing: 0.3px; line-height: 1.6;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
    z-index: var(--dk-z-popup);
}
#rules-popup-close {
    position: absolute; top: 6px; right: 8px;
    background: transparent; border: none;
    color: rgba(180, 140, 220, 0.85); font-size: 13px; cursor: pointer; padding: 4px;
}
#rules-popup-close:hover { color: #fff; }
#rules-popup a { display: inline-block; margin-top: 8px; color: var(--dk-accent); }

/* ────────────────────────────────────────────────────────────────────────────
 * The two standard tool panels — move log 📜 and AI decisions 🤖.
 * Both ship by default in every game (see /card-game-creation, "Ship these
 * three by default"). Same geometry so they read as one component.
 * ──────────────────────────────────────────────────────────────────────────── */

#move-log-panel,
#ai-eval-panel {
    position: fixed;
    right: 12px;
    top: calc(var(--dk-header-h) + 6px);
    max-height: 68dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 11px 13px;
    background: var(--dk-panel);
    border: 1px solid var(--dk-panel-line);
    border-radius: var(--dk-radius);
    box-shadow: var(--dk-panel-shadow);
    color: var(--dk-panel-text);
    font-family: var(--dk-font-ui);
    z-index: var(--dk-z-panel);
}
#move-log-panel { width: min(272px, 88vw); }
#ai-eval-panel  { width: min(290px, 90vw); }

.log-title {
    font-family: var(--dk-font-display);
    font-weight: 700; letter-spacing: 0.05em;
    color: var(--dk-accent);
    margin-bottom: 7px;
}
.log-empty { color: var(--dk-panel-dim); font-size: 12px; font-style: italic; }

/* Move log: newest at the bottom, one divider per round. */
.log-entry {
    display: flex; align-items: baseline; gap: 7px;
    padding: 2px 0;
    font-size: 12.5px;
    color: var(--dk-panel-dim);
}
.log-entry b     { color: var(--dk-panel-text); font-weight: 600; }
.log-entry.big   { color: #f0b45e; }
.log-entry.good  { color: var(--dk-msg-good); }
.log-entry.alert { color: var(--dk-msg-alert); }
.log-divider     { border-top: 1px solid var(--dk-panel-line); margin: 6px 0; }

/* AI decisions: softmax over LEGAL actions only, labelled in game terms. */
.eval-entry { padding: 6px 0; border-top: 1px solid var(--dk-panel-line); }
.eval-entry:first-of-type { border-top: 0; }
.eval-head  { font-family: var(--dk-font-display); font-size: 12.5px;
              color: var(--dk-panel-text); margin-bottom: 3px; }
.eval-row   { display: flex; align-items: center; gap: 6px;
              font-size: 11.5px; color: var(--dk-panel-dim); padding: 1px 0; }
.eval-row.picked { color: var(--dk-msg-good); font-weight: 600; }
.eval-label { flex: 0 0 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eval-bar   { flex: 1; height: 6px; border-radius: 3px;
              background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.eval-bar i { display: block; height: 100%; background: var(--dk-accent); }
.eval-row.picked .eval-bar i { background: var(--dk-msg-good); }
.eval-pct   { flex: 0 0 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ────────────────────────────────────────────────────────────────────────────
 * Overlays and the game-over modal
 * ──────────────────────────────────────────────────────────────────────────── */

.overlay {
    position: fixed; inset: 0;
    z-index: var(--dk-z-overlay);
    display: grid; place-items: center;
    padding: 16px;
    background: var(--dk-scrim);
}
.overlay.hidden { display: none; }

.panel {
    position: relative;
    background: linear-gradient(180deg, #241640, #150d2c);
    border: 1px solid rgba(150, 100, 220, 0.45);
    border-radius: 16px;
    padding: 22px 24px;
    width: min(440px, 94vw);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    text-align: center;
    color: var(--dk-panel-text);
    font-family: var(--dk-font-ui);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.7);
}
.panel h2 {
    font-family: var(--dk-font-display); font-weight: 700;
    font-size: 24px; color: var(--dk-accent); margin-bottom: 12px;
}
.over-line { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }

.primary-btn {
    margin-top: 16px; width: 100%; min-height: 48px;
    border: 1px solid var(--dk-accent);
    border-radius: 10px;
    background: var(--dk-accent); color: #fff;
    font-family: var(--dk-font-ui);
    font-size: 16px; font-weight: 700;
    cursor: pointer; touch-action: manipulation;
    transition: filter 0.15s;
}
.primary-btn:hover { filter: brightness(1.15); }

/* ────────────────────────────────────────────────────────────────────────────
 * Start screen — the first thing the player sees, and the only place settings
 * are chosen. These class names are a FROZEN CONTRACT: ui/start.js in every
 * game emits exactly these, so the panel has the same shape everywhere.
 * (Dalmuti once forked .start-sub / .start-cols — that is the bug this
 * prevents. Do not invent variants.)
 * ──────────────────────────────────────────────────────────────────────────── */

#start-screen {
    position: fixed; inset: 0;
    z-index: var(--dk-z-start);
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 6, 14, 0.86);
    backdrop-filter: blur(2px);
    font-family: var(--dk-font-ui);
}
#start-screen.hidden { display: none; }

/* Fixed width — NOT min-width — so a language switch never resizes the card. */
.start-card {
    position: relative;
    width: 620px; max-width: 92vw;
    /* Top padding reserves the language corner (top:12px + 32px button + 8px gap), so a
       long nowrap .start-title can never run underneath it. Bottom padding reserves the
       🏆 corner stack. */
    padding: 52px 30px 62px;
    background: rgba(20, 14, 34, 0.97);
    border: 1px solid var(--dk-accent);
    border-radius: var(--dk-radius-lg);
    box-shadow: 0 0 30px var(--dk-accent-soft), 0 10px 40px rgba(0, 0, 0, 0.8);
    text-align: center;
    transform-origin: center center;    /* fitCard() scales from the centre */
}
.start-title {
    font-family: var(--dk-font-display);
    font-weight: 700; font-size: 42px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e7ddff; text-shadow: 0 0 18px var(--dk-accent-soft);
    margin-bottom: 4px; white-space: nowrap;
}
.start-subtitle {
    font-size: 13px; color: #b9add9;
    margin-bottom: 20px; letter-spacing: 0.3px; line-height: 1.5;
}

.start-columns     { display: flex; gap: 26px; align-items: stretch; text-align: left; }
.start-col         { display: flex; flex-direction: column; }
.start-col-left    { flex: 0 0 50%; gap: 14px; }
.start-col-right   { flex: 1; gap: 10px; justify-content: center; }
.start-col-divider { width: 1px; align-self: stretch; background: var(--dk-accent-soft); }

.start-field       { display: flex; flex-direction: column; gap: 5px; }
.start-field label,
.start-field-label { color: #b9add9; font-weight: 600; font-size: 13px; white-space: nowrap; }

/* Explicit uniform width so switching language never resizes the panel. */
.start-field select {
    width: 100%; min-height: 40px; padding: 8px;
    background: var(--dk-field-bg); color: #eee;
    border: 1px solid var(--dk-field-line);
    border-radius: 6px;
    font-family: var(--dk-font-ui); font-size: 13px;
    cursor: pointer;
}
/* Colour / faction selector. These three class names have been in the
   /card-game-UI-start-screen contract table since the sheet was extracted, but no game
   using the shared chrome had a colour picker until games/Village, so the rules were
   never written. Added 2026-08-04; purely additive, nothing previously styled matched.
   (games/Decks has its own pre-shared-sheet copy of these names in its own stylesheet —
   it is not affected, and is a separate migration.) */
.start-colors      { display: flex; flex-direction: column; gap: 6px; }
.color-swatches    { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch {
    width: var(--dk-tap); height: var(--dk-tap);
    flex: none; padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.28);
    opacity: 0.55;
    cursor: pointer; touch-action: manipulation;
    transition: opacity .15s, transform .15s, box-shadow .15s, border-color .15s;
}
.color-swatch:hover  { opacity: 0.85; transform: translateY(-2px); }
/* currentColor is set to the swatch's own colour by the game, so the glow matches it. */
.color-swatch.on     { opacity: 1; border-color: #fff; box-shadow: 0 0 14px currentColor; }
.color-swatch:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 3px; }

.start-check {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--dk-tap);
    color: #d9cff0; font-weight: 600; font-size: 13px;
    cursor: pointer; touch-action: manipulation;
}
.start-check input[type=checkbox] {
    width: 22px; height: 22px; flex: none;
    accent-color: var(--dk-accent); cursor: pointer;
}
.start-sub-hint {
    color: #8a7fb0; font-size: 11.5px; line-height: 1.45;
    margin-top: -8px; min-height: 0;
}
.start-speed input[type=range] {
    width: 100%; height: 24px; cursor: pointer; accent-color: var(--dk-accent);
}
.start-speed-val { color: #e7ddff; font-size: 12px; min-height: 16px; }

.start-play {
    width: 100%; min-height: 48px; padding: 12px 30px;
    font-family: var(--dk-font-ui); font-weight: 700; font-size: 16px;
    color: #fff;
    background: var(--dk-accent);
    border: 1px solid var(--dk-accent); border-radius: var(--dk-radius);
    cursor: pointer; touch-action: manipulation;
    transition: filter 0.15s, opacity 0.15s;
}
.start-play:hover:not(:disabled) { filter: brightness(1.15); }
/* Tutorial / Multiplayer ship from day one, disabled until the feature exists. */
.start-play:disabled { opacity: 0.35; cursor: not-allowed; }

.start-secondary {
    background: transparent;
    border-color: rgba(139, 111, 224, 0.6);
    color: #d9cff0; font-weight: 600; font-size: 14px;
}
.start-secondary:hover:not(:disabled) { background: var(--dk-accent-soft); filter: none; }

.start-hint { margin-top: 12px; color: #8a7fb0; font-size: 12px; min-height: 16px; }

/* Language selector: TOP-RIGHT of the card, in every game. It is chrome, not a game
   setting — it never belongs in the settings column, and never at the bottom. The card
   reserves top padding for it (.start-card padding-top), so a nowrap title clears it. */
.start-lang-corner {
    position: absolute; top: 12px; right: 14px;
    display: flex; align-items: center; gap: 10px; z-index: 6;
}

/* Bottom-right stack: achievements 🏆 and any other corner tool. */
.start-corner {
    position: absolute; bottom: 16px; right: 18px;
    display: flex; align-items: center; gap: 10px; z-index: 5;
}
.start-lang-wrap { position: relative; }
.start-lang-btn {
    width: 44px; height: 32px; padding: 0;
    border: 1px solid var(--dk-accent); border-radius: 5px;
    background: rgba(20, 14, 34, 0.9);
    cursor: pointer; overflow: hidden; display: block;
    touch-action: manipulation;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.start-lang-btn:hover { box-shadow: 0 0 10px var(--dk-accent-soft); }
/* Opens DOWNWARD — the button is at the top of the card, so an upward picker would
   escape it. Was `bottom:` while the selector lived in the bottom-right corner. */
.start-lang-picker {
    position: absolute; top: calc(100% + 6px); right: 0;
    display: flex; gap: 8px; padding: 10px;
    background: rgba(20, 14, 34, 0.98);
    border: 1px solid var(--dk-accent); border-radius: var(--dk-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    z-index: 10;
}
.start-lang-opt {
    width: 44px; height: 32px; padding: 0;
    border: 2px solid var(--dk-field-line); border-radius: 5px;
    background: rgba(20, 14, 34, 0.9);
    cursor: pointer; overflow: hidden; display: block;
    touch-action: manipulation;
}
.start-lang-opt.on { border-color: var(--dk-accent); }

/* ────────────────────────────────────────────────────────────────────────────
 * Shared responsive rules. Every game must be playable at 1024×768, 768×1024
 * and 640×360 — tablet is the floor, not a follow-up task.
 * ──────────────────────────────────────────────────────────────────────────── */

/* Phones / short landscape: stack the two start columns, drop the divider. */
@media (max-width: 620px), (max-height: 540px) {
    .start-card        { width: 420px; padding: 48px 20px 62px; }
    .start-columns     { flex-direction: column; gap: 14px; }
    .start-col-divider { display: none; }
    .start-col-left    { flex: none; }
    .start-title       { font-size: 32px; }
    .start-subtitle    { margin-bottom: 14px; }
}

/* Narrow header: the wordmark gives way before the logo does — but only where it is
   decoration. Which slot it sits in changes what it MEANS:

   - In #header-center it IS the game's title, and that is where new games put it.
     Shrink it, never hide it; a game whose title lives there has nothing left
     identifying it if this rule blanks the slot.
   - In #header-left (pre-2026-08-01 games) it is decoration beside the logo and it
     competes with the centred slot, so it is the first thing to go. 760px, not 560:
     #header-center is absolutely centred, so it starts overlapping the left cluster well
     before the viewport gets narrow — at 640px a logo plus a wordmark runs straight into
     the centre content. */
@media (max-width: 760px) {
    #header-left .game-wordmark { display: none; }
    #header-center .game-wordmark { font-size: 14px; letter-spacing: 0.18em; }

    /* The centred title is absolutely positioned, so it does NOT get out of the right
       cluster's way on its own — at 640px a title plus five tool controls collide on top
       of each other. Something has to yield, and it is the AI badge's TEXT: it is a
       status readout, not a control, and its detail card is still one tap away. Every
       tap target stays 44px, and the title stays legible.

       Scoped with :has() to headers that actually carry a centred title, so the games
       written before 2026-08-01 — whose centre slot holds a message, not a name — keep
       their badge text exactly as it was. */
    #header-bar:has(#header-center .game-wordmark) #ai-indicator {
        padding: 3px;
        gap: 0;
        font-size: 0;                                /* keeps the ::before LED dot */
    }
    #header-bar:has(#header-center .game-wordmark) #ai-indicator::before {
        width: 10px; height: 10px;
    }
    #header-center:has(.game-wordmark) { max-width: min(34vw, 220px); }
}
@media (max-width: 560px) {
    #header-bar    { padding: 0 10px; }
    #header-center { max-width: 30vw; }
}