/* Progress Bar Styles */
.progress-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 10px 0;
}

#progressText {
    font-size: 0.9em;
    color: #4ecca3;
    font-weight: bold;
}

.progress-bar {
    width: 300px;
    height: 20px;
    background: #1a1a2e;
    border: 2px solid #0f3460;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #e94560, #c23152);
    width: 0%;
    transition: width 0.1s ease;
    border-radius: 8px;
}

/* Resource Gathering Animation */
@keyframes harvestBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.harvesting-animation {
    animation: harvestBob 0.5s ease-in-out infinite;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a2e;
    color: #e0e0e0;
    overflow: hidden;
}

/* Text is readable and copyable; dragging the battlefield must not select it. */
canvas, button { user-select: none; }

.screen {
    display: none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.screen.active {
    display: flex;
}

:root {
    --bg-0:#0b1020; --bg-1:#141b33; --bg-2:#1c2748; --panel:#161f3a;
    --line: rgba(255,255,255,0.08);
    --red:#e94560; --red-2:#ff5d77; --teal:#4ecca3; --gold:#f0a500; --gold-2:#ffd45e;
    --text:#e7ecf5; --muted:#9aa6bf;
    --text-reading: 0.9375rem;
    --text-detail: 0.8125rem;
    --shadow: 0 18px 50px rgba(0,0,0,0.5);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Menu screens share a deep, softly-lit backdrop */
#startScreen, #civilizationScreen, #gameModeScreen {
    background:
        radial-gradient(1200px 720px at 50% -12%, rgba(233,69,96,0.18), transparent 60%),
        radial-gradient(900px 640px at 100% 115%, rgba(78,204,163,0.12), transparent 60%),
        linear-gradient(135deg, var(--bg-0), var(--bg-1) 55%, var(--bg-2));
    justify-content: center;
    align-items: center;
}

/* ---------- Start screen ---------- */
.start-content { text-align: center; padding: 30px; }

.game-title {
    font-size: 5.6em;
    font-weight: 900;
    letter-spacing: 12px;
    margin: 0 0 6px;
    background: linear-gradient(180deg, #ffffff, var(--gold-2) 55%, var(--gold));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 26px rgba(240,165,0,0.35));
}

.subtitle {
    font-size: 1.2em;
    color: var(--muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 42px;
}
.subtitle::after {
    content: ''; display: block; width: 92px; height: 3px; margin: 16px auto 0;
    background: linear-gradient(90deg, transparent, var(--red), transparent); border-radius: 2px;
}

.menu-buttons { display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* ---------- Language picker ---------- */
.lang-picker { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.lang-picker-inline { margin: 4px 0 18px; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
.lang-globe { font-size: 1.1em; opacity: 0.85; }
.lang-select {
    background: rgba(0, 0, 0, 0.35);
    color: #e8e8e8;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.95em;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.lang-select:hover { border-color: #e94560; background: rgba(0, 0, 0, 0.5); }
.lang-select option { background: #1a1a2e; color: #e8e8e8; }

/* ---------- Buttons ---------- */
.menu-btn {
    min-width: 300px;
    padding: 14px 44px;
    font-size: 1.02em;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--red-2), var(--red));
    box-shadow: 0 8px 22px rgba(233,69,96,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .2s;
}
.menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(233,69,96,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    filter: brightness(1.06);
}
.menu-btn:active { transform: translateY(0); }

.menu-btn.back-btn {
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid var(--line);
    color: var(--muted);
    box-shadow: none;
}
.menu-btn.back-btn:hover {
    color: #fff; border-color: rgba(255,255,255,0.25);
    filter: none; box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

/* ---------- Selection screens (civ / mode) ---------- */
.selection-content {
    text-align: center;
    padding: 48px 32px;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
}
.selection-content h2 {
    font-size: 2.4em; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: 1px;
}
.selection-content h2::after {
    content: ''; display: block; width: 72px; height: 3px; margin: 14px auto 30px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 2px;
}

.civ-grid, .mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto 28px;
}

.civ-card, .mode-card {
    position: relative;
    text-align: left;
    background: linear-gradient(160deg, var(--panel), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 22px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.civ-card::before, .mode-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--red), var(--gold));
    opacity: 0; transition: opacity .3s;
}
.civ-card:hover, .mode-card:hover {
    transform: translateY(-6px);
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(233,69,96,0.22) inset;
}
.civ-card:hover::before, .mode-card:hover::before { opacity: 1; }

.mode-card { font: inherit; color: inherit; text-align: inherit; }
.mode-name, .mode-description { display: block; }
.civ-card h3, .mode-name { font-size: 1.4em; color: #fff; margin-bottom: 12px; font-weight: 800; }
.civ-card p, .mode-description { margin: 7px 0; font-size: 0.92em; color: var(--muted); line-height: 1.45; }
.civ-card p:first-of-type { color: var(--teal); font-weight: 600; }

/* per-civilization accent stripe */
.civ-card[data-civ="egyptian"]::before { background: linear-gradient(90deg, #ffd700, #f0a500); }
.civ-card[data-civ="greek"]::before    { background: linear-gradient(90deg, #4169e1, #6ea8ff); }
.civ-card[data-civ="persian"]::before  { background: linear-gradient(90deg, #ff6347, #ff9a7a); }
.civ-card[data-civ="yamato"]::before   { background: linear-gradient(90deg, #ff69b4, #ffa6d6); }

.back-btn { margin-top: 18px; }

/* ---------- Game Screen ---------- */
#gameScreen { position: relative; }
#gameCanvas { width: 100%; height: 100%; position: relative; }
/* Drag-select rectangle: pure screen-space overlay, so it always matches the
   player's viewpoint no matter how the camera is rotated. */
.selection-marquee {
    position: absolute;
    display: none;
    pointer-events: none;
    border: 1.5px solid var(--teal);
    background: rgba(78, 204, 163, 0.12);
    z-index: 6;
}
/* "✎ edited" chip on a setup slot whose system prompt deviates from the
   shared template (derive-unless-edited model). */
.slot-prompt-badge {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    color: #1a1a2e;
    background: var(--gold-2, #ffd700);
    white-space: nowrap;
}
/* Achievements flyout on leaderboard cards (opens to the left of the card;
   fixed-positioned singleton so leaderboard re-renders can't wipe it). */
.lb-flyout {
    position: fixed;
    display: none;
    z-index: 260;
    width: 300px;
    max-height: 62vh;
    overflow: auto;
    background: rgba(16, 20, 34, 0.97);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    padding: 10px 12px;
    font-size: 0.85em;
    text-align: left;
}
.lb-flyout .lb-fly-head { display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--civ, #888); padding-left: 8px; margin-bottom: 6px; }
.lb-flyout .lb-fly-head b { color: var(--civ, #fff); }
.lb-flyout .lb-fly-head span { color: var(--muted); font-size: 0.85em; }
.lb-flyout .lb-fly-h { color: var(--teal); font-weight: 700; margin: 8px 0 4px; font-size: 0.9em; }
.lb-flyout .lb-fly-body { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-flyout .lb-fly-body i { color: var(--muted); }
.lb-fly-chip { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* Snapshot variant of the summary: a translucent backdrop OVER the still-active
   game screen — the running match shimmering through says "in-game stats". */
#arenaSummaryScreen.snapshot {
    background: rgba(8, 12, 26, 0.72);
    z-index: 300;
    overflow-y: auto;
}
/* Read-only line diff of an edited slot prompt vs. the shared template
   (unified-diff style: changed lines ±2 context, hunks separated by ⋯). */
.slot-prompt-btns { display: flex; gap: 8px; margin-top: 8px; }
.slot-diff {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    max-height: 240px;
    overflow: auto;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.78em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}
.slot-diff .diff-add { color: #7fe3a8; background: rgba(78, 204, 163, 0.10); }
.slot-diff .diff-del { color: #ff8f8f; background: rgba(233, 69, 96, 0.10); text-decoration: line-through; }
.slot-diff .diff-ctx { color: var(--muted); }
.slot-diff .diff-sep { color: var(--muted); text-align: center; opacity: 0.7; margin: 2px 0; }
.slot-diff .diff-empty { color: var(--muted); font-style: italic; }

/* Cheap post-processing without a compositor: a mild grade on the WebGL canvas
   (a touch more saturation/contrast) and a soft vignette overlay. Pure CSS —
   zero GL cost, zero dependencies. The vignette sits under the HUD (z 100). */
#gameCanvas canvas { filter: saturate(1.07) contrast(1.04); }
#gameScreen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    background: radial-gradient(ellipse 120% 95% at 50% 42%, transparent 60%, rgba(6, 9, 18, 0.30) 100%);
}

/* ---------- HUD ---------- */
.hud {
    position: absolute;
    z-index: 100;
    background: linear-gradient(180deg, rgba(14,20,38,0.92), rgba(11,16,32,0.92));
    backdrop-filter: blur(10px);
}
#topHUD {
    top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 22px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.resource-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.resource, .population {
    font-size: 0.98em; font-weight: 700; color: var(--text);
    background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    padding: 6px 13px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.population { color: var(--teal); }
.age-indicator {
    font-size: 1.02em; font-weight: 800; color: var(--gold-2);
    background: rgba(240,165,0,0.12); border: 1px solid rgba(240,165,0,0.3);
    padding: 6px 16px; border-radius: 999px; letter-spacing: .5px;
}
#bottomHUD {
    bottom: 0; left: 0; right: 0; height: 120px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 22px;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.35);
}
/* Single-player footer: who controls each rival (model / rule-based). */
.opponents-bar {
    position: absolute;
    bottom: 128px; left: 50%; transform: translateX(-50%);
    z-index: 100; pointer-events: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    max-width: 90%;
    padding: 7px 16px;
    font-size: 0.85em; color: var(--text);
    background: linear-gradient(180deg, rgba(14,20,38,0.92), rgba(11,16,32,0.92));
    backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.opponents-bar .opp-title { font-weight: 800; letter-spacing: 0.3px; opacity: 0.85; }
.opponents-bar .opp-row { white-space: nowrap; font-variant-numeric: tabular-nums; }
.unit-info {
    padding: 12px 16px; max-width: 340px; font-size: 0.92em; color: var(--text);
    background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px;
}
.action-bar { display: flex; gap: 10px; }
.action-btn {
    padding: 11px 20px; font-weight: 700; letter-spacing: .5px; cursor: pointer; color: #fff;
    background: linear-gradient(145deg, var(--bg-2), var(--bg-1));
    border: 1px solid rgba(233,69,96,0.45);
    border-radius: 10px;
    transition: all .2s;
}
.action-btn:hover {
    background: linear-gradient(145deg, var(--red-2), var(--red));
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(233,69,96,0.4);
}

/* ---------- Minimap ---------- */
/* The panel's geometry lives on the BODY, not on .minimap, because the fog knobs
   sit outside the panel and so cannot inherit it from there. One set of numbers,
   read by the panel and by the knobs beside it — the alternative is a second copy
   that silently stops agreeing the first time either size is touched. */
body { --mm-edge: 20px; --mm-bottom: 130px; --mm-canvas: 300px; --mm-gut: 14px; }

.minimap {
    position: absolute; bottom: var(--mm-bottom); right: var(--mm-edge);
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 100;
    /* Room for the A-G / 1-7 gutters. The panel is anchored bottom-right, so it
       grows up and to the left and the map itself does not move. The small right
       and bottom inset keeps the square canvas clear of the rounded corners. */
    padding: var(--mm-gut) 4px 4px var(--mm-gut);
    background: rgba(22,31,58,0.82);
}
#minimapCanvas { display: block; width: var(--mm-canvas); height: var(--mm-canvas); background: #0e1630; }

/* Tile labels for the 7x7 explore grid, in the gutters beside the map. Laid out
   with flex rather than fixed offsets: each label takes an equal share of the
   canvas edge, so the gutters stay aligned at 300px and at the 210px spectator
   size without a second set of numbers to keep in step. Offsets resolve against
   the panel's PADDING box, so `left: var(--mm-gut)` is exactly the canvas edge. */
.mm-cols, .mm-rows { position: absolute; display: flex; pointer-events: none; }
.mm-cols { top: 0; left: var(--mm-gut); right: 4px; height: var(--mm-gut); }
.mm-rows { left: 0; top: var(--mm-gut); bottom: 4px; width: var(--mm-gut); flex-direction: column; }
.mm-cols span, .mm-rows span {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    font-size: 9px; line-height: 1; font-weight: 600;
    color: var(--muted); opacity: 0.75;
}

/* Per-seat fog knobs: which seat's discovered map the minimap draws. They sit
   BESIDE the panel rather than inside it, so the panel keeps the width it always
   had and no background is stretched out under them.
   Placed off the shared numbers above: the panel's outer width is its 1px border
   + the label gutter + the canvas + the 4px right inset + the far border, and the
   knobs sit one gap to the left of that. Aligned to the CANVAS rather than to the
   panel, which is why the bottom is the panel's own offset plus that same 4px
   inset and border. Spectator-only — nothing renders them in campaign. */
.mm-fog { display: none; }
body.spectator-mode .mm-fog {
    position: absolute; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    right: calc(var(--mm-edge) + 1px + var(--mm-gut) + var(--mm-canvas) + 4px + 1px + 8px);
    bottom: calc(var(--mm-bottom) + 5px);
    height: var(--mm-canvas);
}
/* Standing on the 3D scene now, not on a dark panel, so each knob brings its own
   backing -- a translucent white wash was legible over the panel and vanishes over
   bright desert. */
.mm-fog-knob {
    flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12,17,33,0.72);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    opacity: 0.82; transition: opacity .12s, background .12s, border-color .12s;
}
.mm-fog-knob:hover { opacity: 1; background: rgba(30,40,66,0.86); }
.mm-fog-knob.on {
    opacity: 1; background: rgba(30,40,66,0.92);
    border-color: rgba(255,255,255,0.72);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.45);
}
.mm-fog-knob .team-dot { display: block; }

/* What the endpoint said it can do, under the Test button. Quiet by design: it is
   reference, not a warning, and it is absent entirely until a probe has run. */
.model-caps {
    margin: -2px 0 6px 2px;
    font-size: 11px; line-height: 1.4;
    color: var(--muted); opacity: 0.85;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Menu panels (build / train / research / upgrade) ---------- */
.menu-panel {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: linear-gradient(160deg, rgba(22,31,58,0.97), rgba(12,17,33,0.97));
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 24px 26px;
    z-index: 200;
    min-width: 420px; max-width: 620px; max-height: 82vh; overflow-y: auto;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}
.menu-panel h3 {
    color: #fff; margin-bottom: 18px; text-align: center; font-size: 1.35em; font-weight: 800; letter-spacing: .5px;
}
.menu-panel h3::after {
    content: ''; display: block; width: 54px; height: 3px; margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, var(--red), transparent); border-radius: 2px;
}
.menu-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.menu-item {
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.menu-item:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.4); }
.menu-item.disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(.4); }
.menu-item.disabled:hover { transform: none; border-color: var(--line); box-shadow: none; }
.menu-item h4 { color: var(--teal); margin-bottom: 6px; font-size: 1.02em; }
.menu-item p { font-size: 0.82em; color: var(--muted); margin: 3px 0; }
.menu-item .cost { color: var(--gold-2); font-weight: 700; }
.menu-item .unit-stats { color: #cfd8d3; font-weight: 600; letter-spacing: .3px; }
.close-btn {
    position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--muted);
    font-size: 1.05em; line-height: 1; cursor: pointer; transition: all .2s;
}
.close-btn:hover { background: var(--red); color: #fff; border-color: transparent; }

/* ---------- End (victory / defeat) ---------- */
#endScreen {
    background: radial-gradient(900px 620px at 50% 32%, rgba(8,12,24,0.55), rgba(5,8,16,0.94));
    justify-content: center;
    align-items: center;
}
.end-content { text-align: center; padding: 40px; }
.end-content h1 { font-size: 4.2em; margin-bottom: 14px; font-weight: 900; letter-spacing: 4px; }
.end-content h1#endTitle.victory { color: var(--teal); text-shadow: 0 0 40px rgba(78,204,163,0.6); }
.end-content h1#endTitle.defeat { color: var(--red); text-shadow: 0 0 40px rgba(233,69,96,0.6); }
.end-content p { font-size: 1.3em; margin-bottom: 28px; color: var(--muted); }

.hidden {
    display: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #0f3460;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e94560;
}

/* ======================================================================
   SPECTATOR / ARENA DASHBOARD
   ====================================================================== */

/* --- Top status bar (centered pill) --- */
.spectator-hud {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    pointer-events: none;
}

.spectator-statusbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 22px;
    background: linear-gradient(180deg, rgba(18, 24, 48, 0.94), rgba(10, 14, 30, 0.94));
    border: 1px solid rgba(78, 204, 163, 0.35);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    font-size: 0.92em;
}

.sb-brand {
    font-weight: 800;
    letter-spacing: 3px;
    color: #fff;
    background: linear-gradient(90deg, #e94560, #f0a500);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 14px rgba(233, 69, 96, 0.35);
}

.sb-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.14);
}

.sb-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #4ecca3;
    letter-spacing: 1px;
}

.sb-alive { color: #cdd6e8; font-weight: 600; }
.sb-alive b { color: #fff; }

.sb-wonder {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f0a500;
    font-weight: 700;
}
/* Both are SPANs in the markup, and an inline box ignores width and height outright.
   The track got away with it by accident -- it is a direct child of the flexed
   .sb-wonder, so it is blockified into a flex item and its 90x6 applies. The fill sits
   one level deeper inside the track, which is not a flex container, so it stayed inline
   and rendered 0x0 no matter what percentage was written onto it. The bar therefore
   drew its groove and never filled, for the whole life of arena mode. The player-game
   bar is unaffected because #wonderFill is a DIV. Declared explicitly on both here, so
   neither depends on what display mode a parent happens to have. */
.sb-wonder .sb-wonder-track {
    display: block;
    width: 90px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.sb-wonder .sb-wonder-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #f0a500, #ffd45e);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* --- Leaderboard (right column) --- */
.spectator-leaderboard {
    position: absolute;
    top: 14px;            /* use the empty space at the top-right */
    right: 16px;
    width: 304px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    /* End above the minimap (which occupies the bottom ~430px on the right) */
    max-height: calc(100vh - 462px);
}

/* In spectator mode the bottom HUD is hidden, so drop & slightly shrink the
   minimap, and let the leaderboard reclaim the freed vertical space. The list
   scrolls if cards still don't all fit, so nothing ever overlaps the minimap. */
body.spectator-mode { --mm-bottom: 16px; --mm-canvas: 210px; --mm-gut: 12px; }
body.spectator-mode .mm-cols span, body.spectator-mode .mm-rows span { font-size: 8px; }
body.spectator-mode .spectator-leaderboard { max-height: calc(100vh - 262px); }

/* Click-to-inspect card: #unitInfo is reparented out of the hidden bottom HUD
   and floated bottom-centre (minimap is bottom-right, leaderboard top-right, so
   the centre is clear). Read-only, so pointer-events:none lets clicks fall
   through to the canvas beneath it. */
body.spectator-mode #unitInfo.spectator-card {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 18px; display: block; z-index: 60; pointer-events: none;
    min-width: 180px; max-width: 300px; text-align: left;
    background: rgba(12,16,28,0.86); backdrop-filter: blur(4px);
}

.lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: rgba(10, 14, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    color: #f0a500;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 0.85em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.lb-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Size to content up to the leaderboard's max-height, then scroll internally
       so cards can never spill over the minimap below. */
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
    pointer-events: auto;   /* allow wheel-scrolling when cards overflow */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.lb-list::-webkit-scrollbar { width: 7px; }
.lb-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 4px; }
.lb-list::-webkit-scrollbar-track { background: transparent; }

/* Collapsed leaderboard: the model banner and the rank line stay, the rest folds away.
   Hiding the detail rather than shrinking the card keeps the two surviving lines at
   exactly the size they had, so nothing moves except the card's height. */
.lb-list.collapsed .lb-stats,
.lb-list.collapsed .lb-power,
.lb-list.collapsed .lb-advice { display: none; }
/* The advice input was the reason cards refuse to shrink; with it gone the padding it
   needed goes too, or a collapsed card keeps a strip of empty floor. */
.lb-list.collapsed .lb-card { padding-bottom: 5px; }

/* Count and caret travel together at the right of the header. */
.lb-head-right { display: inline-flex; align-items: center; gap: 7px; }
.lb-toggle { color: #6b7488; font-size: 0.8em; }
/* pointer-events must be restored: the leaderboard container is click-through so that
   clicks reach the map, and each child that wants them opts back in (see .lb-list and
   .lb-card). Without this the header showed a pointer cursor and a caret and swallowed
   nothing — it looked like a button and was not one. */
.lb-header { cursor: pointer; user-select: none; pointer-events: auto; }
.lb-header:hover .lb-toggle { color: #cfe; }

.lb-card {
    position: relative;
    flex: 0 0 auto;         /* never shrink — shrinking would clip the advice input */
    pointer-events: auto;   /* parent is none; cards are clickable to focus the base */
    cursor: pointer;
    /* left padding clears the .lb-fly-tab, which replaces the old 4px colored
       border as a WIDER, clickable civ-colored edge */
    padding: 8px 11px 9px 29px;
    border-radius: 11px;
    background: linear-gradient(160deg, rgba(26, 34, 62, 0.94), rgba(13, 17, 33, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(7px);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s, opacity 0.4s;
}
/* The card's colored edge, widened into a real button: ONLY this tab opens the
   achievements flyout (arrow points where it appears); the rest of the card
   keeps focusing the camera and does NOT open it. */
.lb-fly-tab {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    background: var(--civ, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(10, 14, 26, 0.82);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: filter 0.15s;
}
.lb-fly-tab:hover { filter: brightness(1.3); }

.lb-card.leader {
    border-color: rgba(255, 212, 94, 0.55);
    /* keep the civ-coloured left edge (border-color above would otherwise gold it) */
    border-left-color: var(--civ, #888);
    box-shadow: 0 6px 24px rgba(240, 165, 0, 0.28), 0 0 0 1px rgba(255, 212, 94, 0.25) inset;
}

.lb-card.eliminated {
    opacity: 0.42;
    filter: grayscale(0.75);
}

.lb-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}
/* Epoch now sits inline next to the civ name (saves a whole row per card). */
.lb-card-top .lb-age { flex: 0 0 auto; }

.lb-rank {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.78em;
    font-weight: 800;
    color: #0d1021;
    background: #5a6680;
}
.lb-card.rank-1 .lb-rank { background: linear-gradient(145deg, #ffe27a, #f0a500); }
.lb-card.rank-2 .lb-rank { background: linear-gradient(145deg, #eef2f7, #b5c0cf); }
.lb-card.rank-3 .lb-rank { background: linear-gradient(145deg, #e2a26a, #b9702f); color: #fff; }

/* Team-badge chip — the UI twin of the ownership mark on building flags and
   unit chests: an inline SVG whose per-seat shape, fill and rim stroke arrive
   from ui.teamDotHtml; the rim keeps every fill legible on any background. */
.team-dot {
    display: inline-block;
    /* Center the badge in EVERY context in one place. The old fixed -1px nudge was
       tuned for a ~10px badge; at the doubled size it left the badge riding high.
       vertical-align:middle centers it in inline rows (winner / summary cards);
       align-self:center centers it in flex rows regardless of the row's own
       align-items — the decision log uses align-items:baseline, which pinned the
       badge's bottom to the text baseline and shoved it upward (the "all over the
       place, shifted up" look). Leaderboard rows already center, so they're
       unchanged. */
    vertical-align: middle;
    align-self: center;
    flex: 0 0 auto;
}

.lb-civ {
    font-weight: 700;
    font-size: 0.98em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Model name banner — full width, centered, highlighted: the models are the stars. */
.lb-model-banner {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92em;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
    background: linear-gradient(90deg, rgba(240,165,0,0.14), rgba(233,69,96,0.20), rgba(240,165,0,0.14));
    border: 1px solid rgba(255, 212, 94, 0.4);
    border-radius: 7px;
    padding: 2px 6px;
    margin-bottom: 4px;
    text-shadow: 0 0 10px rgba(255, 212, 94, 0.45);
}
.lb-model-name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
/* Play/pause toggle on each model card. */
.lb-pause {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    line-height: 1;
    padding: 0;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.35);
    color: #ffd45e;
    font-size: 0.78em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lb-pause:hover { background: rgba(0, 0, 0, 0.6); border-color: #ffd45e; }
.lb-pause.is-paused { color: #4ecca3; border-color: rgba(78, 204, 163, 0.6); }
.lb-tag-paused {
    margin-left: auto;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffd45e;
    background: rgba(240, 165, 0, 0.18);
    border: 1px solid rgba(255, 212, 94, 0.5);
    border-radius: 4px;
    padding: 0 6px;
}
/* Dim a paused model's card so it reads as inactive. */
.lb-card.paused { opacity: 0.72; }
.lb-card.paused .lb-model-banner { filter: grayscale(0.4); }

.lb-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.lb-age {
    font-size: 0.72em;
    font-weight: 600;
    color: #cdd6e8;
    background: rgba(15, 52, 96, 0.55);
    padding: 2px 8px;
    border-radius: 5px;
}

.lb-think {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68em;
    font-weight: 700;
    color: #4ecca3;
    margin-left: auto;
}
.lb-think .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ecca3;
    animation: thinkPulse 1.1s ease-in-out infinite;
}
@keyframes thinkPulse { 0%,100%{ opacity:.25; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }

.lb-tag-elim {
    margin-left: auto;
    font-size: 0.66em;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ff6b81;
    border: 1px solid rgba(255, 107, 129, 0.5);
    padding: 1px 7px;
    border-radius: 5px;
}

.lb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 5px;
    font-size: 0.72em;
    color: #c7cfde;
    margin-bottom: 4px;
}
.lb-stat {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    padding: 1px 6px;
    font-variant-numeric: tabular-nums;
}

.lb-power {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lb-power-track {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}
.lb-power-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--civ, #4ecca3), color-mix(in srgb, var(--civ, #4ecca3) 55%, #fff));
    transition: width 0.6s cubic-bezier(.2,.7,.3,1);
}
.lb-power-val {
    font-size: 0.72em;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
}

/* --- Spectator advice input (per model card) --- */
.lb-advice {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lb-advice-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    color: #fff;
    font-size: 0.7em;
    padding: 4px 7px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lb-advice-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.lb-advice-input:focus {
    border-color: var(--civ, #4ecca3);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--civ, #4ecca3) 30%, transparent);
}
.lb-advice-send {
    flex: 0 0 auto;
    background: var(--civ, #4ecca3);
    color: #10141c;
    border: none;
    border-radius: 7px;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.lb-advice-send:hover { filter: brightness(1.12); }
.lb-advice-send:active { transform: scale(0.94); }
.lb-advice-badge {
    flex: 0 0 auto;
    font-size: 0.66em;
    font-weight: 700;
    color: var(--civ, #4ecca3);
    white-space: nowrap;
}

/* --- AI Decision Log (left edge feed) --- */
.ai-decision-log {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 332px;
    height: calc(100vh - 28px);
    z-index: 1000;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

.ai-log-header {
    background: linear-gradient(180deg, rgba(18, 24, 48, 0.95), rgba(12, 16, 32, 0.95));
    color: #4ecca3;
    padding: 9px 14px;
    border-radius: 11px 11px 0 0;
    font-size: 0.82em;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.ai-log-header .ai-log-count {
    font-size: 0.85em;
    color: #8a93a8;
    font-weight: 600;
    letter-spacing: 0;
}

.ai-log-toggle {
    font-size: 0.7em;
    color: #8a93a8;
    margin-left: 8px;
}

/* Filter bar: its own row under the header, so clicking a chip or the search
   box can't also trigger the header's collapse toggle. */
.ai-log-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(10, 13, 28, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 6px 8px;
    box-sizing: border-box;
    backdrop-filter: blur(7px);
}

.ai-log-filter.collapsed { display: none; }

.ai-log-players {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.ai-log-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font: inherit;
    font-size: 0.74em;
    line-height: 1.6;
    color: #b6bfd4;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

/* Icon-only label: bumped back up because 0.74em on an emoji reads as a smudge. */
.ai-log-chip-icon {
    font-size: 1.15em;
    line-height: 1;
    display: inline-block;
}

.ai-log-chip:hover { background: rgba(255, 255, 255, 0.1); color: #e6ebf5; }

.ai-log-chip.is-on {
    background: rgba(120, 165, 255, 0.2);
    border-color: rgba(140, 180, 255, 0.55);
    color: #eef3ff;
}

.ai-log-search {
    flex: 1 1 90px;
    min-width: 0;
    font: inherit;
    font-size: 0.76em;
    color: #dbe2f0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    padding: 3px 8px;
    outline: none;
}

.ai-log-search::placeholder { color: #6b7488; }
.ai-log-search:focus { border-color: rgba(140, 180, 255, 0.55); }

.ai-log-entries {
    background: rgba(10, 13, 28, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 11px 11px;
    padding: 8px;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    backdrop-filter: blur(7px);
}

.ai-decision-log.collapsed { height: auto; max-height: calc(100vh - 28px); }
.ai-log-entries.collapsed { flex: 0 1 auto; }
.ai-log-entries.collapsed .ai-log-entry { padding: 6px 7px; margin-bottom: 4px; animation: none; }
.ai-log-entries.collapsed .ai-log-entry:last-child { margin-bottom: 0; }
.ai-log-entries.collapsed .log-reason,
.ai-log-entries.collapsed .log-error,
.ai-log-entries.collapsed .log-outcome { display: none; }
.ai-log-entries.collapsed .log-line1 { white-space: nowrap; }
.ai-log-entries.collapsed .log-action { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ai-log-entry {
    padding: 7px 9px;
    margin-bottom: 6px;
    border-radius: 8px;
    font-size: 0.76em;
    line-height: 1.35;
    border-left: 3px solid #555;
    background: rgba(255, 255, 255, 0.035);
}
/* Only the newest entry slides in — re-animating every entry each refresh looked like flicker. */
.ai-log-entry.is-new { animation: logIn 0.35s ease; }
.ai-log-entry:last-child { margin-bottom: 0; }
@keyframes logIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.ai-log-entry.is-error {
    background: rgba(233, 69, 96, 0.1);
    border-left-color: #e94560 !important;
}

/* An entry you can click through to its full exchange. */
.ai-log-entry.is-linked { cursor: pointer; }
.ai-log-entry.is-linked:hover {
    background: rgba(140, 180, 255, 0.09);
    box-shadow: inset 0 0 0 1px rgba(140, 180, 255, 0.22);
}

/* Spectator advice entries stand out from the model's own decisions. */
.ai-log-entry.is-advice {
    background: rgba(240, 165, 0, 0.12);
    border-left-color: #f0a500 !important;
}
.ai-log-entry.is-advice .log-action { color: #ffcf66; font-weight: 700; }

/* Floating "scroll to top" arrow for the decision log. */
.ai-log-top-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(18, 24, 48, 0.92);
    color: #4ecca3;
    font-size: 0.9em;
    cursor: pointer;
    z-index: 1002;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s, transform 0.18s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.ai-log-top-btn.visible { opacity: 1; pointer-events: auto; transform: none; }
.ai-log-top-btn:hover { background: #4ecca3; color: #0a0d1c; }

.ai-log-entry .log-line1 {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.ai-log-entry .log-time {
    /* Same grey as .tv-meta in the transcript viewer: the head of a log card and
       the head of a transcript turn now say the same two things, so they should
       not say them in two different colours. */
    color: #7c869c;
    font-size: 0.88em;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
/* The move number, in .tv-n's pale blue for the same reason. */
.ai-log-entry .log-move { color: #8cb4ff; font-weight: 800; }
.ai-log-entry .log-civ {
    font-weight: 700;
    flex: 0 0 auto;
}
.ai-log-entry .log-action {
    color: #dbe2ee;
    font-weight: 600;
}
.ai-log-entry.is-error .log-action { color: #ff8597; }
.ai-log-entry .log-reason {
    color: #97a0b4;
    font-style: italic;
    display: block;
    margin-top: 3px;
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

/* Engine outcome shown on a successful action when the model gave no reason. */
.ai-log-entry .log-outcome {
    color: #7d8597;
    display: block;
    margin-top: 3px;
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
}

/* Spectator right-click coordinate flag (follows the cursor while held). */
.coord-flag {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    transform: translateY(-100%);
    background: rgba(15, 20, 30, 0.92);
    color: #e9eef7;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 3px 8px;
    font: 600 13px/1.2 monospace;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* Who actually KNOWS this spot (the fog can't say — it's the union of everyone's
   sight). A list: header, then one row per knower wearing its seat badge, since
   two players can field the same civilization. */
.coord-flag .cf-pos { display: block; }
.coord-flag .cf-head {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    font-size: 11px;
    color: #9fb0c8;
}
.coord-flag .cf-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-weight: 400;
    font-size: 12px;
    color: #e9eef7;
}
.coord-flag .cf-row .team-dot { flex: none; }

/* Rejected-action marker + reason in the decision log */
.ai-log-entry .log-x {
    color: #ff8597;
    font-weight: 800;
    font-size: 0.88em;
    letter-spacing: 0.3px;
}
.ai-log-entry .log-error {
    display: block;
    margin-top: 3px;
    padding-left: 8px;
    color: #ff8597;
    font-size: 0.92em;
    border-left: 2px solid rgba(233, 69, 96, 0.5);
    overflow-wrap: anywhere;
}

/* Arena Setup + Model Library screens. The library reuses the setup content
   styles but sat on the bare .screen (fixed 100vh, no overflow), so expanding
   several model cards clipped past the bottom with no way to scroll. */
#arenaSetupScreen,
#modelLibraryScreen {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px;
}

.arena-setup-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

.arena-setup-content h2 {
    font-size: 2.5em;
    color: #e94560;
    text-align: center;
    margin-bottom: 5px;
}

.arena-setup-subtitle {
    text-align: center;
    color: #a0a0a0;
    font-size: 1.1em;
    margin-bottom: 25px;
}

.arena-players-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.arena-player-config {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 2px solid #0f3460;
    border-radius: 12px;
    overflow: hidden;
}

.arena-player-header {
    padding: 12px 16px;
    border-left: 4px solid #e94560;
    background: rgba(15, 52, 96, 0.5);
}

.arena-player-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #e0e0e0;
}

.arena-player-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arena-field-row {
    display: flex;
    gap: 12px;
}

.arena-field-row .arena-field {
    flex: 1;
}

.arena-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.arena-field label {
    font-size: 0.85em;
    color: #4ecca3;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.arena-field select,
.arena-field input[type="text"],
.arena-field input[type="number"] {
    padding: 8px 12px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.95em;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.arena-field select:focus,
.arena-field input[type="text"]:focus,
.arena-field input[type="number"]:focus {
    border-color: #4ecca3;
}

/* Secret fields (API keys, passwords, tokens) are masked text inputs, NOT
   type="password" — so the browser's password manager never treats them as login
   credentials and stops popping "save password?" while editing any field. The app
   already persists these to localStorage / the export file. */
.secret-input { -webkit-text-security: disc; }

/* Keep the number field visually identical to the text fields (no spinner chrome). */
.arena-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.arena-field input[type="number"]::-webkit-outer-spin-button,
.arena-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.arena-field select option {
    background: #1a1a2e;
    color: #e0e0e0;
}

.arena-prompt-textarea {
    width: 100%;
    padding: 10px 12px;
    background: #0d1117;
    border: 1px solid #0f3460;
    border-radius: 6px;
    color: #c9d1d9;
    font-size: 0.8em;
    font-family: 'Consolas', 'Courier New', monospace;
    line-height: 1.4;
    resize: vertical;
    min-height: 120px;
    max-height: 400px;
    outline: none;
    transition: border-color 0.2s;
}

.arena-prompt-textarea:focus {
    border-color: #4ecca3;
}

.llm-field {
    display: flex;
}

.llm-field.hidden {
    display: none;
}

.arena-setup-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    padding: 10px 0 30px;
}

.arena-setup-buttons .menu-btn {
    padding: 12px 40px;
    font-size: 1.1em;
    margin: 0;   /* cancel .back-btn's margin-top so the three buttons align in the row */
}

.arena-setup-buttons .back-btn {
    background: linear-gradient(145deg, #0f3460, #16213e);
}

.arena-setup-buttons .back-btn:hover {
    box-shadow: 0 5px 20px rgba(15, 52, 96, 0.4);
}

/* --- Arena revamp: sections, model library, auth, slots --- */
.arena-section {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid #0f3460;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.arena-section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.arena-step {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; color: #10141c;
    background: linear-gradient(145deg, #ffe27a, #f0a500);
}
.arena-section-head h3 { margin: 0 0 2px; font-size: 1.25em; color: #fff; }
.arena-section-head p { margin: 0; font-size: 0.88em; color: #9aa6bd; line-height: 1.45; }

.model-library { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.model-card {
    background: rgba(13, 17, 33, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid #4ecca3;
    border-radius: 10px;
    overflow: hidden;
}
/* A native toggle and a separate remove button keep both keyboard accessible. */
.model-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 14px; user-select: none;
}
.model-card-header:hover { background: rgba(255, 255, 255, 0.04); }
.mc-toggle { color: #9aa6bd; font-size: 0.8em; transition: transform 0.15s; flex: 0 0 auto; }
.model-card.expanded .mc-toggle { transform: rotate(90deg); }
.mc-name { font-weight: 700; color: #fff; flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sub { color: #9aa6bd; font-size: 0.85em; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-auth { flex: 0 0 auto; font-size: 0.72em; color: #cdd6e8; background: rgba(15, 52, 96, 0.55); padding: 2px 8px; border-radius: 999px; }
.mc-status { flex: 0 0 auto; font-weight: 800; }
.mc-status.ok { color: #4ecca3; } .mc-status.err { color: #ff6b81; } .mc-status.pending { color: #f0a500; }

.model-card-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; }
.model-card.collapsed .model-card-body { display: none; }

.model-card-top { display: flex; gap: 12px; align-items: flex-end; }
.model-card-top .arena-field { flex: 1; }
.model-remove {
    flex: 0 0 auto;
    background: rgba(233, 69, 96, 0.15); color: #ff8499;
    border: 1px solid rgba(233, 69, 96, 0.4); border-radius: 8px;
    width: 30px; height: 30px; cursor: pointer; font-size: 0.95em;
}
.model-remove:hover { background: rgba(233, 69, 96, 0.3); }

.auth-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.auth-grid .arena-field.full { grid-column: 1 / -1; }
.auth-hint { font-size: 0.85em; color: #8b97ad; padding: 2px; }

/* EXPERIMENTAL — rolling inference. The tag rides beside the field label so the
   picker cannot be mistaken for a settled setting; the warning appears only above
   one lane, where sharing an endpoint stops being free. Same amber the Ollama hint
   uses, because it carries the same weight: read this before you rely on it. */
.xp-tag {
    font-size: 0.72em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f0a500;
    border: 1px solid rgba(240, 165, 0, 0.45);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}
.auth-hint.lanes-warn {
    color: #cdd6e8;
    background: rgba(240, 165, 0, 0.10);
    border-left: 3px solid rgba(240, 165, 0, 0.6);
    border-radius: 4px;
    padding: 7px 10px;
    margin-top: 4px;
    line-height: 1.4;
}
.auth-hint.ollama-hint {
    color: #cdd6e8;
    background: rgba(240, 165, 0, 0.10);
    border-left: 3px solid rgba(240, 165, 0, 0.6);
    border-radius: 4px;
    padding: 7px 10px;
    margin-top: 4px;
    line-height: 1.4;
}
.auth-divider { font-size: 0.8em; color: #8b97ad; text-transform: uppercase; letter-spacing: 1px; grid-column: 1 / -1; margin-top: 4px; }

.header-rows { display: flex; flex-direction: column; gap: 8px; }
.header-row { display: flex; gap: 8px; align-items: center; }
.header-row input { flex: 1; }
.hr-del {
    flex: 0 0 auto; background: rgba(255,255,255,0.06); border: 1px solid var(--line);
    color: #c7cfde; border-radius: 6px; width: 34px; height: 34px; cursor: pointer;
}
.hr-del:hover { background: rgba(255,255,255,0.12); }
.hdr-add-btn {
    align-self: flex-start; background: rgba(78,204,163,0.12);
    border: 1px dashed rgba(78,204,163,0.5); color: #7fe6c8;
    border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 700; font-size: 0.86em;
}
.hdr-add-btn:hover { background: rgba(78,204,163,0.2); }

.lib-add-btn {
    background: rgba(78,204,163,0.12);
    border: 1px dashed rgba(78,204,163,0.55); color: #7fe6c8;
    border-radius: 10px; padding: 11px 22px; cursor: pointer; font-weight: 700; font-size: 1em;
}
.lib-add-btn:hover { background: rgba(78,204,163,0.2); }
/* Sitzt IN der Sprachzeile, rechts ausgerichtet: das spart die ganze Zeile, die
   die Leiste vorher fuer sich hatte, und diese Seite ist ohnehin lang. Leer ist sie
   ein Flex-Element ohne Breite — unter zwei Modellen kostet sie also nichts. */
.lib-sortbar {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
}
.lib-sort-label { color: var(--muted); font-size: 12px; margin-right: 2px; }
.lib-sort-btn {
    background: rgba(255,255,255,0.05); color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 12px; font-size: 12px; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lib-sort-btn:hover { background: rgba(255,255,255,0.10); color: var(--text); }
.lib-sort-btn.on {
    background: rgba(78,204,163,0.16); color: var(--teal);
    border-color: rgba(78,204,163,0.45);
}

.lib-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lib-io-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line); color: #cdd6e8;
    border-radius: 10px; padding: 11px 18px; cursor: pointer; font-weight: 700; font-size: 0.95em;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lib-io-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.lib-empty { color: #9aa6bd; font-size: 0.9em; padding: 8px 2px; }

.lib-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lib-summary-count { color: #cdd6e8; font-size: 0.95em; font-weight: 600; }
.lib-open-btn {
    background: linear-gradient(145deg, #4ecca3, #2f9e85);
    color: #08231c; border: none; border-radius: 10px;
    padding: 11px 22px; font-weight: 700; font-size: 1em; cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.lib-open-btn:hover { filter: brightness(1.08); }
.lib-open-btn:active { transform: scale(0.98); }

.model-test-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.test-btn {
    background: linear-gradient(145deg, #4ecca3, #2f9e85);
    color: #08231c; border: none; border-radius: 8px;
    padding: 8px 16px; font-weight: 700; cursor: pointer; font-size: 0.9em;
    transition: filter 0.15s, transform 0.1s;
}
.test-btn:hover { filter: brightness(1.08); }
.test-btn:active { transform: scale(0.97); }
.test-status { font-size: 0.86em; font-weight: 600; }
.test-status.ok { color: #4ecca3; }
.test-status.err { color: #ff6b81; }
.test-status.pending { color: #f0a500; }

.model-select-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.model-select-row .arena-field { flex: 1; min-width: 0; }
/* The line under the model box: how many ids are behind it, or a warning that what
   is typed is not one of them. Small and quiet -- it is a status, not a control. */
/* Anchored to the FIELD, not to the browser's idea of where a popup goes. The
   native datalist put a 405-row list the full height of the page, detached from the
   input and over this very note -- none of which is reachable from CSS. */
.mdl-combo { position:relative; }
.mdl-combo .mdl-input { width:100%; padding-right:24px; }
.mdl-caret { position:absolute; right:2px; top:2px; bottom:2px; width:20px; padding:0;
    background:none; border:0; color:#8fa3bb; cursor:pointer; font-size:0.75em; line-height:1; }
.mdl-caret:hover { color:#dfe6f5; }
.mdl-pop { position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:60;
    max-height:280px; overflow-y:auto; background:#0d1520;
    border:1px solid rgba(255,255,255,0.18); border-radius:7px;
    box-shadow:0 12px 28px rgba(0,0,0,0.5); }
.mdl-pop[hidden] { display:none; }
.mdl-row { padding:5px 9px; font-size:0.82em; cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdl-row:hover, .mdl-row.on { background:rgba(78,204,163,0.18); }
/* Every line begins with the same vendor; greying it is what makes the list scannable. */
.mdl-v { color:#7f93aa; }
.mdl-none { padding:7px 9px; font-size:0.78em; color:#8fa3bb; }
/* On the LABEL, not under the box. Beneath the input it made this one field taller
   than every other field in the row, and a flex row of unequal fields is a row that
   does not line up -- which is what "misaligned" meant, not the popup at all.
   The label is uppercase, bold and letter-spaced; a hint is none of those. */
.mdl-note { margin-left:8px; font-size:0.85em; font-weight:400; color:#8fa3bb;
    text-transform:none; letter-spacing:0; }
.mdl-note.warn { color:var(--gold-2, #e3c46a); }
/* Context budget: number input + a small "set to max" button on one row. */
.ctx-budget-row { display: flex; gap: 6px; align-items: stretch; }
.ctx-budget-row input { flex: 1; min-width: 0; }
.ctx-max-btn {
    flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    background: rgba(78, 204, 163, 0.15); color: #4ecca3;
    border: 1px solid rgba(78, 204, 163, 0.4); border-radius: 6px;
    padding: 0 10px; font-size: 0.85em; font-weight: 700;
}
.ctx-max-btn:hover { background: rgba(78, 204, 163, 0.28); }
/* "Minimize token spending" checkbox row. */
.ctx-mini-toggle {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 0 2px; font-size: 0.9em; font-weight: 600; color: #cdd6e8; cursor: pointer;
}
.ctx-mini-toggle input { width: 16px; height: 16px; cursor: pointer; }
/* Keep field captions on one line so the inputs in a row stay aligned. */
.arena-field label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Campaign-only row: "You play" civ picker + opponent count, above the slots. */
.campaign-setup-row {
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-bottom: 14px; padding: 12px 14px;
    background: rgba(78, 204, 163, 0.07);
    border: 1px solid rgba(78, 204, 163, 0.25);
    border-radius: 10px;
}
/* Each picker takes only what its widest translation needs, freeing the rest of the row
   for the turn-based block. The bases are measured, not guessed: at the label font the
   longest string across en/de/es/zh is 115px for the count label, 238px for the map
   options and 238px for the seed label — Spanish in all three — plus room for a select
   arrow. min-width:0 lets them shrink on a narrow viewport instead of forcing a
   scrollbar, and the row already wraps, so the turn-based block drops below rather
   than crushing the pickers. */
.campaign-setup-row .arena-field { flex: 0 1 auto; min-width: 0; }
.campaign-setup-row .f-count { flex-basis: 140px; }
.campaign-setup-row .f-map   { flex-basis: 290px; }
.campaign-setup-row .f-seed  { flex-basis: 250px; }
.campaign-setup-row .f-turnbased { flex: 1 1 560px; min-width: 320px; }

/* The explanation on the left, the setting it governs on the right. The two bases plus
   the gap must stay under .f-turnbased's own basis or the pair wraps and the field lands
   back under the text: 200 + 16 + 300 = 516 against 560. The right column is the wider
   of the two because it holds a real caption — "Tiempo de respuesta por ronda (s)" is
   288px — while the left is only prose, which reflows at any width. */
.tb-split { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
/* Every column in this row keeps ONE rhythm: label, control, description, each starting
   at the same height across all five. Three things were breaking it.

   .tb-main is a plain div, so its children fell back to block flow while every other
   column is a flex column with a 4px gap — a 2px label offset and a 10px control one.
   It is now the same kind of box as its neighbours.

   A select and a text input do not agree on intrinsic height to within a couple of
   pixels, which was enough to push the descriptions out of line. Every control in this
   row is pinned to one height, the checkbox row included.

   And <p> brings its own margins, so the description is given explicit ones. */
.tb-split .tb-main { flex: 1 1 200px; min-width: 170px; display: flex; flex-direction: column; gap: 4px; }
.campaign-setup-row .arena-field select,
.campaign-setup-row .arena-field input[type="text"],
.campaign-setup-row .arena-field input[type="number"],
.campaign-setup-row .arena-check { height: 38px; box-sizing: border-box; }
.campaign-setup-row .arena-check { display: flex; align-items: center; gap: 8px; margin: 0; }
.campaign-setup-row .arena-hint { margin: 6px 0 0; }
/* Every caption in this row is a fixed-height flex line, so nothing placed inside one
   can grow it: the campaign "You play" label carries a 24px civ-colour chip, which was
   pushing that column's control and description 5px below its neighbours.

   The two captions nested inside .tb-split need naming separately — a direct-child
   selector missed them, and Chinese glyphs render a pixel taller than Latin here, which
   was enough to break the row in one language only.

   :not(.arena-check) because the checkbox row is ALSO a <label> and a direct child.
   Without it this rule pins that CONTROL to caption height and its description climbs
   up over it — widening a selector to reach the captions caught the control too. */
.campaign-setup-row .arena-field > label:not(.arena-check),
.campaign-setup-row .tb-main > label:not(.arena-check),
.campaign-setup-row .arena-subfield > label:not(.arena-check) {
    display: flex; align-items: center; gap: 6px;
    height: 18px; line-height: 18px;
}
.tb-split .arena-subfield { flex: 0 1 300px; margin: 0; display: flex; flex-direction: column; gap: 4px; }

.arena-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.arena-slot {
    background: rgba(13, 17, 33, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--civ, #888);
    border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.arena-slot-title { font-weight: 800; color: #fff; font-size: 0.95em; flex: 0 0 auto; }
/* Collapsible header: caret + title + a compact summary of civ/controller. */
.arena-slot-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.arena-slot-head:hover { color: #fff; }
.arena-slot-caret { color: #9aa6bd; font-size: 0.8em; flex: 0 0 auto; transition: transform 0.15s; }
.arena-slot.expanded .arena-slot-caret { transform: rotate(90deg); }
.arena-slot-summary { color: #9aa6bd; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-slot-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* A collapsed LLM slot shouldn't hog the full row — only expanded ones do. */
.arena-slot.expanded.has-prompt { grid-column: 1 / -1; }
.slot-prompt { margin-top: 2px; }
.slot-prompt .arena-prompt-textarea { min-height: 110px; }

@media (max-width: 760px) {
    .auth-grid, .arena-slots { grid-template-columns: 1fr; }
    .model-card-top { flex-wrap: wrap; }
}

/* ======================================================================
   ARENA "AUSWERTUNG" BUTTON + BENCHMARK SUMMARY SCREEN
   ====================================================================== */
/* Action-camera toggle: teal while the auto-director is driving. */
.sb-end.sb-on {
    background: linear-gradient(145deg, #35b58c, #1f8d6b);
    box-shadow: 0 0 10px rgba(78, 204, 163, 0.45);
}

.sb-end {
    pointer-events: auto;
    cursor: pointer;
    background: linear-gradient(145deg, #e94560, #c23152);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: transform 0.15s, box-shadow 0.2s;
}
.sb-end:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(233, 69, 96, 0.45); }
/* Neutral (non-red) styling for the spectator "quit to menu" button */
.sb-quit { background: linear-gradient(145deg, #404c66, #2b3550); }
.sb-quit:hover { box-shadow: 0 4px 14px rgba(64, 76, 102, 0.5); }

/* Controls help overlay — opened by the "?" button in both HUDs. */
.controls-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 9, 20, 0.62);
    backdrop-filter: blur(3px);
    animation: ctrlIn 0.15s ease;
}
@keyframes ctrlIn { from { opacity: 0; } to { opacity: 1; } }
.controls-card {
    width: min(460px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(22, 28, 52, 0.98), rgba(12, 16, 34, 0.98));
    border: 1px solid rgba(78, 204, 163, 0.35);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    padding: 18px 20px 20px;
    color: #dbe2ee;
}
.controls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.15em;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}
.controls-close {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    color: #cdd6e8;
    border: none;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    font-size: 1em;
    font-weight: 700;
    flex: 0 0 auto;
}
.controls-close:hover { background: rgba(233, 69, 96, 0.7); color: #fff; }
.controls-sub {
    grid-column: 1 / -1;
    color: #7d8aa6;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 6px;
}
.controls-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 16px;
    align-items: center;
}
.controls-grid .ck {
    font-weight: 700;
    color: #4ecca3;
    white-space: nowrap;
    font-size: 0.95em;
}
.controls-grid .cv { color: #c6cede; font-size: 0.95em; }

/* Top-HUD right cluster (age + quit) and the normal-mode quit button */
.hud-right { display: flex; align-items: center; gap: 12px; }
.quit-game-btn {
    pointer-events: auto;
    cursor: pointer;
    background: linear-gradient(145deg, #404c66, #2b3550);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 6px 15px;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.quit-game-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.4); background: linear-gradient(145deg, #4a587a, #333f5e); }

/* --- Confirmation dialog --- */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6, 9, 18, 0.62);
    backdrop-filter: blur(3px);
    animation: confirmFade 0.12s ease-out;
}
@keyframes confirmFade { from { opacity: 0; } to { opacity: 1; } }
.confirm-dialog {
    width: min(440px, 90vw);
    background: linear-gradient(160deg, rgba(24,32,58,0.98), rgba(13,18,34,0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    padding: 26px 26px 22px;
    text-align: center;
}
.confirm-title { font-size: 1.2em; font-weight: 800; color: #fff; margin: 0 0 8px; }
.confirm-message { font-size: 0.98em; color: #cdd6e8; line-height: 1.5; margin: 0 0 20px; }
.confirm-actions { display: flex; gap: 12px; justify-content: center; align-items: stretch; }
.confirm-actions .menu-btn {
    margin: 0;
    min-width: 0;
    flex: 1 1 0;          /* equal-width buttons that fill the row */
    padding: 11px 12px;   /* override the wide base padding so labels never clip */
    font-size: 0.92em;
    letter-spacing: 0.4px;
    /* Long labels (e.g. German "Modell pausieren") wrap inside the button
       instead of overflowing its boundaries. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: center;
}
.confirm-ok { background: linear-gradient(145deg, #e94560, #c23152) !important; color: #fff !important; }
.confirm-cancel { background: linear-gradient(145deg, #404c66, #2b3550) !important; color: #fff !important; }

#arenaSummaryScreen {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px;
}

.summary-content {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.summary-head { text-align: center; margin-bottom: 16px; }
.summary-head h2 {
    font-size: 2.2em;
    background: linear-gradient(90deg, #e94560, #f0a500);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.summary-sub { color: #aeb8cc; font-size: 1.02em; margin-top: 4px; }

/* Winner banner */
.summary-winner { margin: 0 auto 22px; max-width: 560px; }
.winner-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(240,165,0,0.16), rgba(13,17,33,0.92));
    border: 1px solid rgba(255, 212, 94, 0.5);
    border-left: 6px solid var(--civ, #f0a500);
    box-shadow: 0 10px 36px rgba(240, 165, 0, 0.22);
}
.winner-card.draw { border-color: rgba(255,255,255,0.15); background: rgba(13,17,33,0.92); }
.winner-crown { font-size: 2.6em; filter: drop-shadow(0 0 10px rgba(255,212,94,0.6)); }
.winner-text { flex: 1; min-width: 0; }
.winner-model { font-size: 1.5em; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.winner-civ { color: #cdd6e8; font-size: 0.95em; margin-top: 2px; }
.winner-score { font-size: 2em; font-weight: 800; color: #ffd45e; text-align: right; line-height: 1; }
.winner-score span { display: block; font-size: 0.34em; font-weight: 600; color: #aeb8cc; letter-spacing: 1px; }

/* Model cards grid */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 880px) { .summary-grid { grid-template-columns: 1fr; } }

.sum-card {
    background: linear-gradient(160deg, rgba(26,34,62,0.95), rgba(13,17,33,0.95));
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 5px solid var(--civ, #888);
    border-radius: 14px;
    padding: 14px 16px 15px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.sum-card.winner { border-color: rgba(255,212,94,0.5); box-shadow: 0 8px 26px rgba(240,165,0,0.2); }
.sum-card.dead { opacity: 0.62; }

.sum-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.sum-rank {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: 0.85em; color: #0d1021; background: #5a6680; flex: 0 0 auto;
}
.sum-card:nth-child(1) .sum-rank, .sum-card.winner .sum-rank { background: linear-gradient(145deg,#ffe27a,#f0a500); }
.sum-id { flex: 1; min-width: 0; }
.sum-model { font-weight: 800; font-size: 1.08em; color: #fff; overflow-wrap: anywhere; line-height: 1.35; }
.sum-civ { font-size: 0.82em; color: #aeb8cc; margin-top: 1px; }
.sum-power { font-size: 1.4em; font-weight: 800; color: #fff; flex: 0 0 auto; }

/* Soundness bar */
.sum-sound { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sum-sound-bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.09); overflow: hidden; }
.sum-sound-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg,#e94560,#f0a500,#4ecca3); }
.sum-sound-val { font-size: 0.82em; font-weight: 800; color: #fff; white-space: nowrap; }
.sum-sound-val span { font-size: 0.72em; font-weight: 600; color: #8a93a8; }

/* Behavior tags */
/* Fixed TWO-LINE tag row: every model card reserves exactly two rows so long
   matches (which trigger more behaviour tags) keep a stable card height and the
   grid never jumps or truncates unevenly. Tags pack top-left; any beyond two
   rows clip cleanly at the row boundary (flex-wrap never splits a pill). */
.sum-tags {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px;
    align-content: flex-start; min-height: 46px; max-height: 46px; overflow: hidden;
}
.sum-tag {
    font-size: 0.72em; font-weight: 700; padding: 2px 9px; border-radius: 999px;
    border: 1px solid transparent;
}
.sum-tag.good { color: #4ecca3; background: rgba(78,204,163,0.12); border-color: rgba(78,204,163,0.35); }
.sum-tag.warn { color: #f0a500; background: rgba(240,165,0,0.12); border-color: rgba(240,165,0,0.35); }
.sum-tag.bad { color: #ff6b81; background: rgba(233,69,96,0.14); border-color: rgba(233,69,96,0.4); }
.sum-tag.neutral { color: #aeb8cc; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }

/* Metric grid */
.sum-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 11px; }
.sum-metric {
    background: rgba(255,255,255,0.04); border-radius: 8px; padding: 7px 9px;
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.sum-metric span { font-size: 0.68em; color: #8a93a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-metric b { font-size: 1.12em; color: #fff; font-variant-numeric: tabular-nums; }
.sum-metric i { font-size: 0.66em; color: #97a0b4; font-style: normal; overflow-wrap: anywhere; }
.sum-metric.err { background: rgba(233,69,96,0.1); }
.sum-metric.err b { color: #ff8597; }

.sum-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sum-chip {
    font-size: 0.68em; color: #cdd6e8; background: rgba(15,52,96,0.5);
    border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums;
}
.sum-note { color: #8a93a8; font-size: 0.85em; font-style: italic; margin: 6px 0 10px; }
.sum-final {
    font-size: 0.78em; color: #c7cfde; border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 9px; overflow-wrap: anywhere;
}

.summary-legend { text-align: center; color: #8a93a8; font-size: 0.8em; margin: 4px 0 18px; }
.summary-buttons { display: flex; gap: 14px; justify-content: center; padding-bottom: 30px; }

/* ======================================================================
   WONDER VICTORY COUNTDOWN + ANNOUNCEMENT
   ====================================================================== */
.wonder-timer {
    position: absolute;
    top: 74px; left: 50%; transform: translateX(-50%);
    z-index: 300;
    width: 320px;
    padding: 14px 20px 16px;
    text-align: center;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 50% 0%, rgba(60, 44, 8, 0.96), rgba(18, 16, 28, 0.96));
    border: 1px solid rgba(255, 212, 94, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 212, 94, 0.25) inset, 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 38px rgba(240, 165, 0, 0.45);
    animation: wtGlow 1.8s ease-in-out infinite;
    pointer-events: none;
}
.wonder-timer.hidden { display: none; }
@keyframes wtGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,212,94,0.25) inset, 0 14px 40px rgba(0,0,0,0.5), 0 0 30px rgba(240,165,0,0.40); }
    50%      { box-shadow: 0 0 0 1px rgba(255,212,94,0.45) inset, 0 14px 40px rgba(0,0,0,0.5), 0 0 60px rgba(240,165,0,0.75); }
}
.wt-title {
    font-size: 0.95em; font-weight: 800; letter-spacing: 3px;
    color: #ffe27a; text-shadow: 0 0 14px rgba(255, 212, 94, 0.7);
}
.wt-clock { margin: 6px 0 10px; line-height: 1; }
.wt-clock #wonderSeconds {
    font-size: 3.1em; font-weight: 900; color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(255, 212, 94, 0.85);
}
.wt-unit { display: block; font-size: 0.72em; font-weight: 700; letter-spacing: 2px; color: #f0a500; margin-top: 2px; }
.wt-track {
    height: 9px; border-radius: 6px; overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}
.wt-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #f0a500, #ffe27a);
    box-shadow: 0 0 12px rgba(255, 212, 94, 0.8);
    transition: width 0.3s linear;
}
.wt-hint { margin-top: 9px; font-size: 0.78em; font-weight: 700; color: #ffd27a; }
/* Final-10-seconds urgency */
.wonder-timer.wt-urgent {
    border-color: rgba(233, 69, 96, 0.7);
    animation: wtUrgent 0.6s ease-in-out infinite;
}
.wonder-timer.wt-urgent .wt-title { color: #ff9aa8; text-shadow: 0 0 14px rgba(233,69,96,0.8); }
.wonder-timer.wt-urgent .wt-fill { background: linear-gradient(90deg, #e94560, #ff9aa8); box-shadow: 0 0 12px rgba(233,69,96,0.9); }
@keyframes wtUrgent {
    0%, 100% { box-shadow: 0 0 0 1px rgba(233,69,96,0.35) inset, 0 14px 40px rgba(0,0,0,0.5), 0 0 34px rgba(233,69,96,0.5); }
    50%      { box-shadow: 0 0 0 1px rgba(233,69,96,0.6) inset, 0 14px 40px rgba(0,0,0,0.5), 0 0 64px rgba(233,69,96,0.9); }
}

/* Big one-time announcement when the Wonder is completed */
.wonder-announce {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(240,165,0,0.16), transparent 70%);
    animation: waIn 0.5s cubic-bezier(.2,.8,.3,1);
}
.wonder-announce.wa-out { animation: waOut 0.8s ease forwards; }
.wa-inner { text-align: center; transform: translateY(-4vh); }
.wa-emoji { font-size: 5em; filter: drop-shadow(0 0 24px rgba(255,212,94,0.85)); animation: waPulse 1.6s ease-in-out infinite; }
.wa-title {
    margin-top: 6px; font-size: 3em; font-weight: 900; letter-spacing: 1px;
    color: #ffe27a; text-shadow: 0 0 26px rgba(255,212,94,0.9), 0 4px 18px rgba(0,0,0,0.6);
}
.wa-sub { margin-top: 8px; font-size: 1.2em; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
@keyframes waIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes waOut { to { opacity: 0; transform: scale(1.08); } }
@keyframes waPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Tutorial screen ---------- */
#tutorialScreen {
    overflow-y: auto;
    justify-content: center;
    align-items: flex-start;
    background:
        radial-gradient(1200px 720px at 50% -12%, rgba(233,69,96,0.18), transparent 60%),
        radial-gradient(900px 640px at 100% 115%, rgba(78,204,163,0.12), transparent 60%),
        linear-gradient(135deg, var(--bg-0), var(--bg-1) 55%, var(--bg-2));
}
.tutorial-content { max-width: 1100px; width: 100%; margin: 0 auto; padding: 28px 20px 44px; }
.tutorial-content h2 { font-size: 2.3em; color: var(--gold); text-align: center; margin-bottom: 4px; }
.tut-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; margin-bottom: 8px; }
.tut-card { background: linear-gradient(145deg, #16213e, #1a1a2e); border: 1px solid #0f3460; border-left: 4px solid var(--teal); border-radius: 12px; padding: 16px 18px; }
.tut-card.tut-wide { grid-column: 1 / -1; border-left-color: var(--gold); }
.tut-card h3 { margin: 0 0 10px; color: #fff; font-size: 1.15em; }
.tut-card p { color: #cdd6e8; font-size: 0.92em; line-height: 1.55; margin: 0 0 8px; }
.tut-card ul { margin: 0; padding-left: 18px; }
.tut-card li { color: #cdd6e8; font-size: 0.9em; line-height: 1.55; margin-bottom: 6px; }
.tut-card b { color: #fff; }
.tut-card i { color: #b9c4da; }
.tut-card code { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; padding: 1px 6px; color: #7fe6c8; font-size: 0.9em; }
.tut-tip { color: #ffd27a !important; margin-top: 8px; }
@media (max-width: 760px) { .tut-grid { grid-template-columns: 1fr; } }

/* Results screen: the transcript offer. Warm rather than alarming — it is an
   opportunity with a deadline, not an error. */
.summary-transcript-note {
    max-width: 900px;
    margin: 4px auto 10px;
    padding: 9px 14px;
    font-size: 0.82em;
    line-height: 1.5;
    color: #d8c9a4;
    background: rgba(190, 150, 60, 0.1);
    border: 1px solid rgba(212, 175, 92, 0.35);
    border-radius: 9px;
    text-align: center;
}

/* ---- Spyglass toggle on the leaderboard banner ------------------------- */
/* Mirrors .lb-pause but sits at the START of the banner, so the two controls
   bracket the model name instead of crowding one corner. */
.lb-spy {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    line-height: 1;
    padding: 0;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.35);
    color: #cfe3ff;
    font-size: 0.74em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lb-spy:hover { background: rgba(0, 0, 0, 0.6); border-color: #8cb4ff; }
.lb-spy.is-on {
    background: rgba(120, 165, 255, 0.28);
    border-color: rgba(140, 180, 255, 0.75);
    color: #fff;
}

/* ---- In-match transcript viewer ---------------------------------------- */
.tv {
    position: absolute;
    top: 96px;
    /* Sits LEFT of the leaderboard (304px + gutters), not over it: the spyglass
       that opens this panel lives on a leaderboard card, and covering the thing
       you clicked to watch a model is no way to watch a model. max-width keeps it
       clear of the decision log on the far left as the window narrows. */
    right: 330px;
    width: 440px;
    max-width: calc(100vw - 700px);
    max-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    z-index: 26;
    background: #191e19;
    border: 1px solid rgba(140, 180, 255, 0.35);
    border-radius: 11px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
    /* Avoid re-filtering the moving WebGL scene behind a deep text panel. */
    contain: layout paint;
    overflow: hidden;
}

.tv-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    font-size: 0.82em;
    font-weight: 700;
    color: #eaf1ff;
    background: rgba(120, 165, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.tv-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tv-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-count { margin-left: auto; font-size: 0.86em; color: #93a6c8; font-weight: 600; }
.tv-close {
    flex: 0 0 auto; width: 20px; height: 20px; line-height: 1; padding: 0;
    border-radius: 5px; border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.3); color: #cfd8ea; cursor: pointer; font-size: 0.8em;
}
.tv-close:hover { background: rgba(233, 69, 96, 0.35); border-color: #e94560; color: #fff; }

.tv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 7px; }
.tv-empty { color: #6b7488; font-size: 0.8em; text-align: center; padding: 18px 8px; }

.tv-turn {
    border-left: 3px solid rgba(140, 180, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 7px;
    padding: 6px 8px;
    margin-bottom: 7px;
}
.tv-turn.is-error { border-left-color: #e94560; background: rgba(233, 69, 96, 0.07); }
/* The turn a decision-log entry was clicked through to. Every turn in the list
   looks alike, so scrolling to the right one is not enough to FIND it. */
.tv-turn.tv-jumped { animation: tvJump 1.5s ease-out; }
@keyframes tvJump {
    0%   { background: rgba(140, 180, 255, 0.32); box-shadow: 0 0 0 2px rgba(140, 180, 255, 0.55); }
    100% { background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 0 0 rgba(140, 180, 255, 0); }
}

.tv-turn-head { display: flex; align-items: center; gap: 7px; font-size: 0.76em; margin-bottom: 4px; }
.tv-n { color: #8cb4ff; font-weight: 800; }
.tv-act { color: #eaf1ff; font-weight: 700; }
.tv-meta { margin-left: auto; color: #7c869c; }

.tv-sec { margin-top: 3px; }
.tv-sec > summary {
    cursor: pointer;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #93a6c8;
    padding: 2px 0;
}
.tv-sec > summary::-webkit-details-marker { color: #5d6a85; }
.tv-sec pre {
    margin: 3px 0 0;
    padding: 5px 7px;
    font-size: 0.74em;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.34);
    border-radius: 5px;
    color: #d6deec;
}
.tv-reason > summary { color: #c9a6ff; }
.tv-reason pre { color: #cbb8ee; font-style: italic; }
/* Plan takes the accent teal the analyzer plan card uses, so the same content reads as
   the same thing in both views — and it sits apart from Reply green and Harness yellow. */
.tv-plan > summary { color: #4ecca3; }
.tv-plan pre { color: #bfe6d6; }
.tv-reply > summary { color: #8cd9a4; }
.tv-result > summary { color: #ffd45e; }
.tv-state > summary { color: #7c869c; }

/* Jump-to-top for the transcript viewer — same affordance as the decision log's,
   in the panel's own blue rather than the log's green. */
.tv-top-btn {
    position: absolute;
    bottom: 48px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(18, 24, 48, 0.94);
    color: #8cb4ff;
    font-size: 0.82em;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s, transform 0.18s;
}
.tv-top-btn.visible { opacity: 1; pointer-events: auto; transform: none; }
.tv-top-btn:hover { background: #8cb4ff; color: #0a0d1c; }

/* ---- End-of-match graph (hand-rolled SVG, no chart library) -------------- */
.summary-chart {
    max-width: 980px;
    margin: 6px auto 12px;
    padding: 10px 12px 12px;
    background: rgba(10, 13, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
}
.chart-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.chart-title { font-size: 0.82em; font-weight: 700; color: #d8e0f0; letter-spacing: 0.2px; }
.chart-modes { margin-left: auto; display: flex; gap: 4px; }
.chart-mode {
    font: inherit; font-size: 0.72em; padding: 3px 9px; border-radius: 999px;
    color: #93a6c8; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12); cursor: pointer;
}
.chart-mode:hover { color: #e6ebf5; background: rgba(255,255,255,0.1); }
.chart-mode.is-on { color: #fff; background: rgba(120,165,255,0.24); border-color: rgba(140,180,255,0.6); }

.chart-svg { width: 100%; height: 240px; display: block; }
.c-grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.c-ylab, .c-xlab { fill: #7c869c; font-size: 11px; font-family: inherit; }
/* Age advances: dotted, behind the lines, in the advancing player's colour. */
.c-age { stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.55; }
.c-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }

.chart-strips { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.chart-strip { display: flex; align-items: center; gap: 8px; }
.strip-name {
    flex: 0 0 132px; display: flex; align-items: center; gap: 5px;
    font-size: 0.74em; color: #b6bfd4; min-width: 0;
}
.strip-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-svg {
    flex: 1; height: 30px; display: block;
    border-radius: 4px; background: rgba(0,0,0,0.25);
}
/* Resource bands — the four game colours, so the strip reads without a lookup. */
.c-band { stroke: none; }
.c-food  { fill: #d9584f; }
.c-wood  { fill: #4e9c5a; }
.c-stone { fill: #9aa4b2; }
.c-gold  { fill: #e0b53c; }
/* The moment a player's own discovered supply of a type ran dry. */
.c-dry { stroke: #ffffff; stroke-width: 1.4; stroke-dasharray: 2 3; opacity: 0.85; }
/* ...and the moment they were eliminated. A cumulative haul can only freeze, so
   without the scrim a corpse's bands read as a flawlessly steady economy. The
   marker is SOLID because the dry marker is dashed — the two must not blur. */
.c-dead { fill: rgba(6,10,16,0.74); }
.c-gone { stroke: #ff5a5a; stroke-width: 1.8; opacity: 0.95; }

.chart-legend {
    margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 0.72em; color: #93a6c8;
}
.c-key { display: inline-flex; align-items: center; gap: 5px; }
.c-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.c-sw.c-food { background: #d9584f; } .c-sw.c-wood { background: #4e9c5a; }
.c-sw.c-stone { background: #9aa4b2; } .c-sw.c-gold { background: #e0b53c; }
.c-sw.c-agekey { background: repeating-linear-gradient(180deg,#8cb4ff 0 3px,transparent 3px 7px); }
.c-sw.c-drykey { background: repeating-linear-gradient(180deg,#fff 0 2px,transparent 2px 5px); }
.c-sw.c-deadkey {
    background: rgba(6,10,16,0.74);
    box-shadow: inset 0 0 0 1px rgba(147,166,200,0.35), inset 2px 0 0 #ff5a5a;
}

/* Simulation-speed control in the arena bar. "is-locked" means a Wonder is holding it
   at 1x regardless of the setting — dimmed rather than relabelled, so the chosen
   speed stays visible and the tooltip explains why it is not in effect. */
.sb-speed { min-width: 60px; font-variant-numeric: tabular-nums; }
/* The strike belongs on the CHOICE, not on the whole control: the number now
   leading the button is the one actually running, and dimming that said the
   opposite of what it means. */
.sb-speed.is-locked { opacity: 1; text-decoration: none; }
.sb-speed .sb-speed-set { margin-left: 5px; opacity: 0.55; text-decoration: line-through; }
/* A speed a standing Wonder is holding out of reach. Struck rather than removed or
   disabled: picking one still records it for when the Wonder falls, and taking that
   away would cost a real capability to fix a display problem. */
.sb-speed-opt.is-held { opacity: 0.5; text-decoration: line-through; }

/* All three speeds on hover (or a click, for touch) instead of a cycle button: going
   from 1x to 2x used to mean passing THROUGH 1.5x and simulating at it on the way.
   pointer-events must be restored here — the HUD around it is click-through. */
.sb-speed-wrap { position: relative; display: inline-flex; pointer-events: auto; }
.sb-speed-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 8px;   /* a bridge, so the pointer never leaves the wrapper on the way down */
    display: none;
    z-index: 1002;
}
.sb-speed-wrap:hover .sb-speed-menu,
.sb-speed-wrap.is-open .sb-speed-menu { display: block; }

.sb-speed-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(18, 24, 48, 0.97), rgba(10, 14, 30, 0.97));
    border: 1px solid rgba(78, 204, 163, 0.35);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.sb-speed-opt {
    cursor: pointer;
    border: none;
    border-radius: 999px;
    padding: 5px 18px;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #cfe3ff;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.15s, color 0.15s;
}
.sb-speed-opt:hover { background: rgba(78, 204, 163, 0.25); color: #fff; }
.sb-speed-opt.is-active { background: linear-gradient(145deg, #35b58c, #1f8d6b); color: #fff; }

/* A checkbox setting on the setup screen, with the consequence spelled out under it. */
/* The setup row is FLEX, so the old .arena-field-wide { grid-column } was a no-op and
   the answer-time field stacked under the explanation instead of sitting beside it. */
.arena-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.arena-check input { width: 15px; height: 15px; accent-color: #8cb4ff; cursor: pointer; }
.arena-hint {
    margin: 5px 0 0 23px; color: #8b95ab; font-size: 0.78em; line-height: 1.45;
}

/* Age glyph sitting atop its marker; staggered by seat so simultaneous
   advances stay readable. */
.c-ageicon { font-size: 11px; opacity: 0.9; }
/* Line colour repeated beside each strip: in a same-civ benchmark every strip
   name reads the same, so the swatch is what ties a strip to its line. */
.strip-swatch {
    width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
    display: inline-block; border: 1px solid rgba(0,0,0,0.45);
}

/* Wonder markers: SOLID, brighter and full-height — the win condition starting or
   ending outranks an age advance, which is dashed and half-height. */
.c-wonder { stroke-width: 2; opacity: 0.9; }
.c-wonder.is-lost { stroke-dasharray: 5 3; }
.c-wondericon { font-size: 12px; }

/* Round-answer-time field: indented under the turn-based checkbox it belongs to,
   and dimmed when that checkbox is off so it cannot look like a live setting. */
.arena-subfield { margin: 8px 0 0 0; }
/* Overrides .arena-field label nowrap+ellipsis: "Tiempo de respuesta por ronda (s)" is
   288px and would be cut. A caption that outgrows its column should wrap, not lie.
   Styled like its siblings so it reads as a field label, not an afterthought. */
.arena-subfield label {
    display: block; margin-bottom: 0;
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 0.85em; color: #4ecca3; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1px;
}
.arena-subfield input { width: 100%; max-width: 150px; }
.arena-subfield.is-off { opacity: 0.45; }

/* Sampling knobs sit on their own row under the model/context row: they are set once
   and rarely touched, unlike the model picker above them. */
.sampling-row { margin-top: 8px; }

/* A parameter this endpoint has been observed to refuse. Marked rather than hidden:
   the field stays editable in case the model behind the endpoint changes. */
.param-rejected {
    font-size: 0.78em; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: #ffb26b; background: rgba(255, 178, 107, 0.14);
    border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.param-rejected-note { color: #ffb26b; }

/* A setting combination the provider will not accept, said on the card rather than
   discovered as a 400 mid-match. */
.think-conflict { color: #ffb26b; }

/* What each difficulty actually costs you, listed so the trade is visible before the
   choice rather than after the match. Derived from DIFFICULTY_MODS — see
   ui.difficultyRows — so it cannot drift from what generation really does. */
.diff-table { display: flex; flex-direction: column; gap: 2px; }
.diff-row { display: flex; gap: 8px; align-items: baseline; opacity: 0.65; }
.diff-row b { flex: 0 0 62px; font-weight: 700; }
.diff-row span { font-variant-numeric: tabular-nums; }
.diff-row.is-current { opacity: 1; color: #4ecca3; }
.diff-note { margin-top: 4px; opacity: 0.6; }

/* The passthrough. Monospace because it is JSON, and flagged rather than blocked while
   it is mid-edit — half-typed JSON is the normal state of a field like this. */
.extra-body {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: 8px 12px; background: #1a1a2e; border: 1px solid #0f3460;
    border-radius: 6px; color: #e0e0e0; outline: none;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em;
}
.extra-body:focus { border-color: #4ecca3; }
.extra-body.is-bad { border-color: #ffb26b; }
.extra-body-err { color: #ffb26b; }

/* An answer that was empty. Dimmed and italic so it reads as a note about the turn
   rather than as something the model actually said. */
.tv-sec.is-empty pre { opacity: 0.6; font-style: italic; }


/* ---------------------------------------------------------------------------
   Transcript analyzer. Two decks: the match above, the reading below, and a seam
   the reader drags to decide which one dominates. The upper deck is the ENGINE — the
   same canvas the arena uses, moved here — so the view, the camera and the feel are
   the arena's rather than an imitation of it.
   --------------------------------------------------------------------------- */
/* .active-scoped: a bare #analyzeScreen rule is ID-specificity and beat BOTH
   .screen{display:none} and .screen.active, so this screen was displayed over every
   other one — its header sat on the start screen and swallowed Play and Tutorial. */
#analyzeScreen.active { display:flex; flex-direction:column; overflow:hidden; }

/* Transparent and thin: it sits over the match, so it must not become furniture. */
.an-bar { flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:7px 14px; background:linear-gradient(180deg, rgba(8,14,20,0.82), rgba(8,14,20,0.35));
    border-bottom:1px solid rgba(255,255,255,0.07); backdrop-filter:blur(3px); z-index:5; }
.an-brand { font-weight:600; font-size:0.92em; color:#dfe; white-space:nowrap; }
.an-back { margin-left:auto; }

/* Wonder clock in the header: the one number that decides a match. */
.an-wonder { display:inline-flex; align-items:center; gap:5px; font-size:0.72em; color:#cfe;
    background:rgba(78,204,163,0.14); border:1px solid rgba(78,204,163,0.4);
    border-radius:5px; padding:3px 8px; white-space:nowrap; }
.an-wonder.is-urgent { color:#ffd9a0; background:rgba(217,164,65,0.18); border-color:rgba(217,164,65,0.55); }
.an-wonder i { font-style:normal; opacity:0.6; }
.an-pick { position:relative; overflow:hidden; display:inline-flex; align-items:center;
    padding:4px 11px; border-radius:5px; cursor:pointer; white-space:nowrap;
    background:rgba(78,204,163,0.18); border:1px solid rgba(78,204,163,0.45); color:#cfe; font-size:0.8em; }
.an-pick:hover { background:rgba(78,204,163,0.3); }
.an-pick input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.an-meta { font-size:0.72em; color:#93a7b8; line-height:1.45; min-width:0; }
.an-empty { color:#89a; padding:30px 20px; font-size:0.9em; }
/* Showcase mode has no screen behind this one. */
body.demo-only .an-back { display:none; }
/* ...and no other way to the project either. A hosted copy is the first thing a
   stranger sees, and without this the page is a dead end: they can read a whole
   match and never learn they could run one. Hidden on a local install, where the
   reader plainly already has the repo. */
.an-src { display:none; }
body.demo-only .an-src { display:inline-block; padding:5px 12px; white-space:nowrap;
    color:var(--gold-2); text-decoration:none; font-size:0.85em; font-weight:600;
    border:1px solid var(--gold); border-radius:6px;
    transition:background .15s, color .15s; }
body.demo-only .an-src:hover { background:var(--gold); color:#1a1205; }

/* Rows, not columns: action on top, reading underneath, seam between. */
.an-body { flex:1 1 auto; min-height:0; display:grid; grid-template-rows:52% 6px 1fr; }
.an-stage { position:relative; min-height:0; overflow:hidden; background:#0a1218; }
.an-viewport { position:absolute; inset:0; }
.an-viewport > * { width:100% !important; height:100% !important; }
.an-stage-hud { position:absolute; left:10px; bottom:10px; display:flex; align-items:center;
    gap:6px; flex-wrap:wrap; max-width:calc(100% - 20px); z-index:3;
    background:rgba(8,14,20,0.6); border-radius:6px; padding:4px 7px; backdrop-filter:blur(2px); }
.an-cap-txt { font-size:0.68em; color:#9ab; }


/* The inspect card. Top-right so it never covers the HUD toggles bottom-left. */
.an-pick-card { position:absolute; right:10px; top:10px; z-index:4; min-width:120px; max-width:210px;
    background:rgba(8,14,20,0.78); border:1px solid rgba(255,255,255,0.12); border-radius:6px;
    padding:6px 9px; backdrop-filter:blur(2px); }
.an-pick-h { font-size:0.78em; font-weight:600; color:#dfe; display:flex; align-items:center; gap:5px; }
.an-pick-o { font-size:0.66em; color:#8fa2b4; padding-top:1px; }
.an-pick-stale { font-size:0.64em; color:#d9a441; padding-top:3px; line-height:1.35; }
.an-pick-n { display:flex; flex-wrap:wrap; gap:4px; padding-top:4px; }
.an-pick-n span { font-size:0.64em; color:#9ab; background:rgba(255,255,255,0.06);
    border-radius:3px; padding:1px 4px; font-variant-numeric:tabular-nums; }
.an-seam { cursor:row-resize; background:rgba(255,255,255,0.09); position:relative; }
.an-seam:hover, .an-seam:active { background:rgba(78,204,163,0.55); }
.an-seam::after { content:""; position:absolute; left:50%; top:-3px; width:44px; height:12px;
    transform:translateX(-50%); border-radius:6px; }

/* Scrubber left and narrow, the conversation twice its width, the graph on the right. */
.an-lower { min-height:0; display:grid; gap:9px; padding:9px 12px 10px;
    grid-template-columns:minmax(140px, 1fr) minmax(300px, 2fr) minmax(300px, 2fr); }
.an-scrub { display:flex; flex-direction:column; min-height:0; min-width:0; }
.an-bar2 { display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding-bottom:5px; flex:0 0 auto; }
.an-chip { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
    color:#bcd; border-radius:5px; padding:2px 7px; font-size:0.7em; cursor:pointer;
    white-space:nowrap; height:24px; display:inline-flex; align-items:center; }
.an-chip:hover { background:rgba(255,255,255,0.15); color:#fff; }
.an-chip.is-on { background:linear-gradient(145deg,#35b58c,#1f8d6b); border-color:#2ea283; color:#fff; }
/* Seat picker. A native <select> could not carry the team badge, and without it two
   seats on the same model were one row printed twice.
   Named an-seat*, NOT an-pick*: that namespace already belongs to the file-load label
   and the entity inspect card, and the label's overflow:hidden clipped this menu away. */
.an-seat { position:relative; display:inline-flex; }
.an-seat-btn { display:inline-flex; align-items:center; gap:5px; height:24px;
    background:#1a2430; color:#bcd; border:1px solid rgba(255,255,255,0.14);
    border-radius:5px; font-size:0.7em; padding:0 4px 0 6px; cursor:pointer;
    max-width:230px; font-family:inherit; }
.an-seat-btn:hover { border-color:rgba(255,255,255,0.3); color:#fff; }
.an-seat.is-open .an-seat-btn { border-color:rgba(78,204,163,0.6); color:#fff; }
.an-seat.is-open .an-seat-btn .an-svg { transform:rotate(180deg); }
.an-seat-btn .an-svg { width:12px; height:12px; opacity:0.65; flex:0 0 auto; transition:transform 0.12s; }
.an-seat-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Every badge at once = the union view, readable without opening the menu. */
.an-seat-stack { display:inline-flex; align-items:center; }
.an-seat-stack > * { margin-right:-3px; }
.an-seat-menu { display:none; position:absolute; top:calc(100% + 3px); left:0; z-index:40;
    min-width:100%; background:#141d27; border:1px solid rgba(255,255,255,0.16);
    border-radius:6px; padding:3px; box-shadow:0 8px 22px rgba(0,0,0,0.55); }
.an-seat.is-open .an-seat-menu { display:block; }
.an-seat-opt { display:flex; align-items:center; gap:6px; width:100%; text-align:left;
    background:none; border:0; border-radius:4px; color:#bcd; font-size:0.7em;
    font-family:inherit; padding:4px 7px; cursor:pointer; white-space:nowrap; }
.an-seat-opt:hover, .an-seat-opt:focus { background:rgba(255,255,255,0.1); color:#fff; outline:none; }
.an-seat-opt.is-on { background:rgba(78,204,163,0.16); color:#eafff6; }
.an-seat-opt:focus-visible { box-shadow:inset 0 0 0 1px rgba(78,204,163,0.7); }
.an-seat-civ { font-style:normal; opacity:0.5; margin-left:auto; padding-left:10px; }

/* Square icon buttons: equal boxes, so the row cannot sit unevenly. */
/* Search, sized to the bar rather than stretching it — the chips and the picker keep
   their widths and this takes what is left, down to a usable minimum. */
.an-find { display:flex; align-items:center; gap:5px; flex:1 1 150px; min-width:110px; max-width:290px; }
.an-search { flex:1 1 auto; min-width:60px; height:24px; font:inherit;
    font-size:0.7em; color:#dbe2f0; background:#1a2430; border:1px solid rgba(255,255,255,0.14);
    border-radius:5px; padding:0 7px; }
.an-search:focus { outline:none; border-color:rgba(78,204,163,0.6); }
.an-search::placeholder { color:#6b7488; }
.an-count { display:inline-flex; align-items:center; height:24px; font-size:0.66em; color:#9ab;
    font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto; }
.an-nav { display:flex; gap:4px; align-items:center; }
.an-ico { display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:24px; padding:0; }
.an-ico .an-svg { width:15px; height:15px; }
.an-list:focus { outline:none; border-color:rgba(78,204,163,0.5); }
.an-list:focus-visible { outline:none; border-color:rgba(78,204,163,0.7); }
.an-list { overflow-y:auto; min-height:0; flex:1 1 auto;
    border:1px solid rgba(255,255,255,0.08); border-radius:6px; background:rgba(0,0,0,0.24); }
/* '+2' beside a turn that carried more than one command. */
.an-more { font-size:0.82em; color:#9fd8c2; background:rgba(78,204,163,0.16);
    border:1px solid rgba(78,204,163,0.34); border-radius:3px; padding:0 4px; flex:0 0 auto; }
.an-row { display:flex; align-items:center; gap:5px; padding:3px 6px; cursor:pointer;
    font-size:0.73em; border-bottom:1px solid rgba(255,255,255,0.04); }
.an-row:hover { background:rgba(255,255,255,0.06); }
.an-row.is-cur { background:rgba(78,204,163,0.22); box-shadow:inset 2px 0 0 #4ecca3; }
.an-row.is-bad .an-act { color:#e88; }
/* A closing statement: the one row in the list that is not a move. */
.an-row.is-final .an-act { color:#cbb8ee; }
.an-d-final { white-space:pre-wrap; font-size:0.8em; line-height:1.5; color:#dfe6f2;
    background:rgba(201,166,255,0.09); border-left:2px solid rgba(201,166,255,0.5);
    border-radius:0 5px 5px 0; padding:8px 10px; margin:0 0 7px; }
.an-row.is-missed .an-act { color:#d9a441; }
.an-t { color:#7f92a3; font-variant-numeric:tabular-nums; font-size:0.92em; min-width:38px; }
.an-act { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-flag { font-size:0.82em; opacity:0.85; }
.an-none { color:#89a; padding:12px 9px; font-size:0.78em; }

.an-detail { overflow-y:auto; min-height:0; min-width:0; padding:0 8px 6px 10px;
    border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.08); }
.an-d-head { display:flex; align-items:center; gap:8px; font-weight:600; padding-bottom:4px; font-size:0.92em; }
.an-d-t { margin-left:auto; color:#8fa; font-size:0.76em; font-weight:400; }
.an-d-stale { display:flex; gap:7px; flex-wrap:wrap; padding:2px 0 7px; }
.an-st { display:inline-flex; align-items:center; gap:3px; font-size:0.68em; color:#8fa2b4;
    background:rgba(255,255,255,0.05); border-radius:4px; padding:1px 5px; }
.an-st.is-cur { color:#4ecca3; background:rgba(78,204,163,0.14); }
.an-st.is-none { opacity:0.5; }
.an-d-plan { background:rgba(255,255,255,0.04); border-left:2px solid rgba(78,204,163,0.5);
    border-radius:0 5px 5px 0; padding:6px 9px; margin-bottom:7px; }
.an-d-obj { font-size:0.8em; color:#dfe; }
.an-d-steps { margin:5px 0 0; padding-left:19px; font-size:0.74em; color:#adc; }
.an-d-steps li { margin:1px 0; }
.an-d-newtag { display:inline-block; margin-top:4px; font-size:0.64em; color:#4ecca3;
    background:rgba(78,204,163,0.14); border-radius:3px; padding:1px 5px; }
/* A small caps label on the plan and command blocks: a glyph hints, a word states. */
.an-d-tag { display:inline-block; font-size:0.6em; letter-spacing:0.09em; text-transform:uppercase;
    color:#7f95a8; padding-bottom:3px; }
.an-d-sec { font-size:0.84em; padding:3px 0; }
.an-d-cmd { font-weight:600; color:#dfe; }
.an-d-sec.is-bad .an-d-cmd { color:#e88; }
.an-d-sec code { font-size:0.85em; color:#9cb; background:rgba(0,0,0,0.3);
    border-radius:3px; padding:1px 4px; word-break:break-all; }
/* Pinned directly under the name, so playback does not shuffle it around. */
.an-d-nums { position:relative; }
.an-d-reason { font-size:0.78em; color:#b9c8d6; font-style:italic; padding-bottom:5px; }
.an-d-nums { display:flex; flex-wrap:wrap; gap:4px; padding-bottom:7px; }
.an-d-nums span { font-size:0.66em; color:#9ab; background:rgba(255,255,255,0.05);
    border-radius:3px; padding:1px 5px; font-variant-numeric:tabular-nums; }
.an-d-missed { color:#d9a441; font-size:0.8em; padding:7px 0; line-height:1.5; }

.an-graph { display:flex; flex-direction:column; gap:6px; min-height:0; min-width:0; overflow-y:auto; }
.an-chart { flex:0 0 auto; }
#anChartMain { cursor:crosshair; }
.c-playhead { stroke:#fff; stroke-width:1.5; opacity:0.9; }
.c-playhead-dot { fill:#fff; }
.an-chapters { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.an-ch-title { font-size:0.7em; color:#7f92a3; padding-right:3px; width:100%; }
.an-chapter { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
    color:#bcd; border-radius:4px; padding:2px 6px; font-size:0.68em; }
.an-chapter:hover { background:rgba(255,255,255,0.13); color:#fff; }

@media (max-width: 1000px) {
    .an-lower { grid-template-columns:minmax(130px, 1fr) 2fr; }
    .an-graph { grid-column:1 / -1; border-top:1px solid rgba(255,255,255,0.08); padding-top:7px; }
    .an-detail { border-right:none; }
}

/* ---- Too small to hold this ------------------------------------------------
   Measured at 375x812 before writing any of it: the bar wraps to three lines, the
   detail pane drops to 212px, and the turn list -- the only way through a match --
   collapses to two pixels. Add controls that are drag, right-click and scroll-wheel
   and there is no phone layout to rescue, only one to pretend about.
   So: say it plainly, and send the reader to the video, which is the form of this
   that a phone is actually good at. `pointer: coarse` catches tablets that are wide
   enough to look fine and still cannot right-click. */
/* Narrow: the filter chips wrap, and in a 130px column they wrapped to SEVEN rows --
   141 of the column's 143 pixels -- which left the turn list two pixels tall with six
   thousand pixels of content inside it. That measurement is what "the layout does not
   survive a phone" was built on, and it was a wrapping bug wearing a design decision's
   clothes. One scrolling row of chips instead, and a floor under the list so nothing
   above it can squeeze it to nothing again.

   Placed here, AFTER .an-bar2 and .an-list, on purpose: a media query carries no extra
   specificity, so the first version of this sat above those two rules and lost to them
   at equal weight. It read as dead CSS and measured as an unchanged layout. */
@media (max-width: 760px) {
    .an-bar2 { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .an-bar2::-webkit-scrollbar { display:none; }
    .an-list { min-height:130px; }
}

/* Shown when the engine cannot start at all. Covers everything on purpose: the menus
   are DOM and would otherwise keep working, inviting a match that can never be drawn. */
.boot-error { position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px; padding:32px; text-align:center;
    background:var(--bg-0, #0b1017); color:#dfe6f5; font-size:1.05rem; line-height:1.5; }
.boot-error .boot-why { max-width:560px; font-size:0.86rem; color:#8fa3bb; }

.small-screen { display:none; }
/* This used to cover everything, with a link to the video as the way out, and it fired
   on `pointer: coarse` at ANY width -- so a 1317px tablet that renders the analyzer
   perfectly was shown a card telling it to go and watch a video instead. The clause was
   honest when it was written: the controls were drag, right-click and wheel, and it said
   so. Touch controls have since taken that reason away, and the wrapping fix above took
   away the other one, so what is left is a preference, not an obstacle -- and a
   preference belongs in a line you can dismiss, not in a door.
   Width only now: a tablet is simply fine, and telling it that it should be a tablet
   would be a strange thing for a page to do. */
@media (max-width: 900px) {
    body:not(.ss-off) .small-screen {
        display:flex; position:fixed; left:8px; right:8px; bottom:8px; z-index:9999;
        justify-content:center; padding:0; }
    body:not(.ss-off) .ss-card {
        display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
        max-width:none; width:100%; padding:7px 11px; text-align:left;
        background:rgba(11,16,23,0.95); border:1px solid rgba(255,255,255,0.17);
        border-radius:9px; box-shadow:0 6px 20px rgba(0,0,0,0.45); }
    body:not(.ss-off) .ss-brand,
    body:not(.ss-off) .ss-lead,
    body:not(.ss-off) .ss-alt { display:none; }
    body:not(.ss-off) .ss-why { margin:0; font-size:0.78rem; line-height:1.35; flex:1 1 150px; }
    body:not(.ss-off) .ss-cta { margin:0; padding:5px 10px; font-size:0.76rem; }
    body:not(.ss-off) .ss-anyway { margin:0; font-size:0.78rem; }
}
.ss-card { max-width:420px; text-align:center; color:var(--muted); }
.ss-brand { font-weight:900; letter-spacing:.16em; font-size:1.25rem; margin-bottom:18px;
    background:linear-gradient(180deg,#fff,var(--gold-2) 55%,var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
.ss-lead { color:#dfe6f5; font-size:1.02rem; line-height:1.5; margin:0 0 14px; }
.ss-why { font-size:.92rem; line-height:1.55; margin:0 0 24px; }
.ss-cta, .ss-alt { display:block; padding:12px 18px; border-radius:8px; text-decoration:none;
    font-weight:700; margin-bottom:10px; }
.ss-cta { background:var(--gold); color:#1a1205; }
.ss-alt { border:1px solid var(--gold); color:var(--gold-2); }
.ss-anyway { margin-top:14px; background:none; border:none; color:var(--muted);
    font-size:.85rem; text-decoration:underline; cursor:pointer; }

/* Shown while the seats are asked for their closing statements. Deliberately over
   the board rather than replacing it: the last frame of the match is worth
   looking at while you wait, and it makes clear the game is over, not stuck. */
.fw-wait { position:fixed; inset:0; z-index:9000; display:flex; align-items:center;
    justify-content:center; background:rgba(6,10,22,.72); }
.fw-card { text-align:center; padding:26px 34px; border-radius:10px; max-width:430px;
    background:var(--bg-1); border:1px solid var(--gold); color:#dfe6f5; }
.fw-title { font-size:1.05rem; font-weight:700; color:var(--gold-2); margin-bottom:8px; }
.fw-count { font-size:.9rem; color:var(--muted); }

/* The model's own last word, on the card rather than only in the transcript.
   Scrolls rather than clamps: these run to a few hundred words and the end is
   usually the part worth reading. */
.sum-word { margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); }
.sum-word-h { display:block; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
    color:var(--gold-2); margin-bottom:5px; }
.sum-word p { margin:0; font-size:.82rem; line-height:1.45; color:#c9d3e6;
    white-space:pre-wrap; max-height:10em; overflow-y:auto; }

/* Sample chooser: only rendered when samples/index.json lists more than one, so a
   checkout with a single match shows no control at all. */
.an-samples { max-width:min(340px, 34vw); padding:4px 8px; border-radius:6px;
    background:var(--bg-1); color:#cfd8ea; border:1px solid rgba(255,255,255,.16);
    font-size:0.82em; cursor:pointer; }
.an-samples:hover { border-color:var(--gold); }

/* Deliberately quiet: waiting is the right default, and this is the exit for the
   ending nobody wanted. */
.fw-skip { margin-top:16px; padding:6px 14px; cursor:pointer; font-size:.82rem;
    background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,.22);
    border-radius:6px; transition:color .15s, border-color .15s; }
.fw-skip:hover { color:#dfe6f5; border-color:var(--gold); }

/* Build- und Prompt-Version, unten rechts auf der Startseite. Bewusst leise: sie
   beantwortet "welchen Stand sehe ich hier", ohne dem Titel Konkurrenz zu machen.
   #startScreen ist position:absolute und damit selbst der Bezugsrahmen. Nicht
   pointer-events:none -- die Zeile soll sich markieren und kopieren lassen. */
.build-stamp {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 0.72em;
    letter-spacing: 1px;
    color: var(--muted);
    opacity: 0.55;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.build-stamp b { font-weight: 600; color: var(--gold-2); }
.build-stamp-dot { margin: 0 6px; opacity: 0.6; }
.build-stamp:has(.update-notice:not([hidden])) { opacity: 1; }
.update-notice { margin-bottom: 10px; letter-spacing: normal; color: var(--gold-2); }
.update-notice[hidden] { display: none; }
.update-notice summary { cursor: pointer; padding: 8px 10px; border: 1px solid #887044; border-radius: 6px; background: #171d25; }
.update-notice[open] { width: min(380px, calc(100vw - 32px)); padding: 12px; box-sizing: border-box; background: #171d25; border: 1px solid #887044; border-radius: 8px; max-height: 65vh; overflow: auto; }
.update-notice p { line-height: 1.6; color: #d6d6d6; margin: 12px 0; }
.update-notice input { width: 100%; box-sizing: border-box; background: #0e131a; color: #fff; padding: 9px; border: 1px solid #62666d; border-radius: 4px; font-family: monospace; }
.update-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.update-actions button { padding: 7px 10px; background: #313c43; color: #fff; border: 1px solid #62666d; border-radius: 4px; cursor: pointer; }
.update-actions a { color: var(--gold-2); }

/* Template-prompt state row: the same tells a per-slot prompt has always had,
   finally on the template every seat inherits. */
.tmpl-prompt-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tmpl-prompt-bar .hdr-add-btn { margin: 0; }
/* A seat wearing an edited DEFAULT has not been touched itself, so it is stated
   more quietly than a seat somebody edited on purpose. */
.slot-prompt-badge.is-derived { opacity: 0.75; font-style: italic; }

/* Shared reading sizes use rem so nested panels never shrink the same text twice. */
.tv-sec pre, .an-d-final, .an-d-obj, .an-d-steps, .an-d-reason, .an-d-sec {
    font-size: var(--text-reading);
    line-height: 1.55;
}
.an-meta, .an-cap-txt, .an-d-nums span, .an-st, .an-d-tag,
.tv-turn-head, .tv-sec > summary, .an-row, .an-chapter, .ai-log-entry {
    font-size: var(--text-detail);
    line-height: 1.45;
}
.an-meta, .an-cap-txt, .an-d-nums span, .an-st, .an-d-tag, .tv-meta {
    color: var(--muted);
}
.an-d-head, .tv-turn-head { flex-wrap: wrap; overflow-wrap: anywhere; }
.an-row { min-height: 30px; }
.an-chip, .an-seat-btn, .an-ico, .an-search, .an-count {
    min-height: 30px;
    height: auto;
    font-size: var(--text-detail);
}

/* The dialog is the full-screen hit area; its card keeps the existing styling.
   Native showModal() supplies focus containment, Escape and an inert background. */
dialog.ui-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    color: var(--text);
}
dialog.ui-dialog:not([open]) { display: none; }
dialog.ui-dialog::backdrop { background: transparent; }
dialog.ui-dialog > .confirm-dialog, dialog.ui-dialog > .controls-card {
    max-height: 100%;
    overflow-y: auto;
}

/* Include custom controls and the hidden native file input's visible label. */
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gold-2);
    outline-offset: 3px;
}
.an-pick:focus-within { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.mode-card:focus-visible::before { opacity: 1; }

/* Respect reduced motion in the interface; simulation timing is unaffected. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Group connection basics separately from optional provider tuning. */
.model-card-toggle { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    flex:1; min-width:0; padding:10px 0; border:0; background:transparent;
    color:inherit; font:inherit; text-align:left; cursor:pointer; }
.model-card-toggle .mc-name, .model-card-toggle .mc-sub { white-space:normal;
    overflow-wrap:anywhere; max-width:100%; }
.model-card-toggle .mc-sub { flex-basis:180px; }
.model-section { display:flex; flex-direction:column; gap:10px; min-width:0;
    padding:12px 0; border-top:1px solid rgba(255,255,255,.1); }
.model-section h3 { margin:0; color:var(--text); font-size:1rem; }
.model-advanced > summary { padding:12px 0; color:var(--gold-2); cursor:pointer; }
.model-remove { min-width:36px; min-height:36px; }
body[data-reading="compact"] { --text-reading:.8125rem; --text-detail:.75rem; }

.an-workspace-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    padding:8px 12px; flex:0 0 auto; border-bottom:1px solid rgba(255,255,255,.1);
    background:var(--bg-1); font-size:.8rem; }
.an-workspace-tools[hidden] { display:none; }
.an-workspace-tools label { display:flex; align-items:center; gap:6px; }
.an-workspace-tools select { min-height:32px; max-width:160px; padding:4px 6px;
    border:1px solid rgba(255,255,255,.22); border-radius:5px;
    background:var(--bg-0); color:var(--text); font:inherit; }
.an-workspace-tools .an-timeline-label { flex:1 1 220px; }
.an-timeline-label input { flex:1; min-width:80px; accent-color:var(--gold); }
#anTimelinePosition { font-variant-numeric:tabular-nums; color:var(--muted); }
.an-seam:focus-visible { z-index:5; background:var(--gold); }
@media (min-width:1001px) {
    .an-body[data-layout="read"] .an-lower {
        grid-template-columns:minmax(140px,1fr) minmax(300px,3fr) minmax(240px,1.4fr); }
    .an-body[data-layout="compare"] .an-lower {
        grid-template-columns:minmax(140px,1fr) minmax(260px,1.5fr) minmax(300px,3fr); }
}
.camera-controls { position:absolute; top:68px; left:50%; transform:translateX(-50%);
    z-index:20; width:max-content; max-width:calc(100% - 24px);
    border:1px solid rgba(255,255,255,.25); border-radius:8px;
    background:rgba(8,14,20,.94); color:var(--text); font-size:.8125rem; }
.camera-controls summary { padding:9px 12px; cursor:pointer; }
.camera-actions { display:flex; flex-wrap:wrap; gap:6px; padding:0 8px 8px; max-width:480px; }
.camera-actions button { min-width:36px; min-height:36px; padding:6px 10px;
    border:1px solid rgba(255,255,255,.22); border-radius:5px; background:var(--bg-1);
    color:var(--text); font:inherit; cursor:pointer; }
.camera-actions button:hover { border-color:var(--gold); }
.an-stage .camera-controls { top:10px; left:10px; transform:none; }
@media (max-width:600px) {
    .model-card-top { flex-wrap:wrap; }
    .model-card-top .arena-field { flex-basis:100%; }
    .auth-grid { grid-template-columns:minmax(0,1fr); }
    .an-workspace-tools { gap:6px; padding:6px 8px; }
    .an-workspace-tools label { flex-wrap:wrap; }
}

/* The transcript mounts one page while the arena keeps drawing behind it. */
.tv-nav { display:flex; align-items:center; gap:6px; padding:7px; flex-shrink:0; border-top:1px solid rgba(255,255,255,.12); }
.tv-nav button { padding:5px 8px; border:1px solid #656553; border-radius:3px; color:#e6ddc9; background:#30372d; cursor:pointer; font:inherit; font-size:.75em; }
.tv-nav button:disabled { opacity:.45; cursor:default; }
.tv-nav button:focus-visible { outline:2px solid #d5bb81; outline-offset:2px; }
#tvRange { flex:1; color:#c0bdab; text-align:center; font-size:.75em; white-space:nowrap; }