/* Solo play — one screen: the real display fills it, the real phone UI docks
   on the right as the player's console, a slim HUD drives the story. */
:root {
    --solo-bg: #07090f;
    --solo-panel: #0f1520;
    --solo-line: rgba(255, 255, 255, 0.09);
    --solo-ink: #e8eaed;
    --solo-mut: #9aa0a6;
    --solo-accent: #2f5fa8;
    --solo-accent-ink: #fff;
    /* the buttons' ground, NEXT while it counts down, the console tab's pulse:
       an edition's tokens.css may set them (18 Oct 2026) */
    --solo-button: #182030;
    --solo-counting: #1d3b68;
    --solo-pulse: rgba(47, 95, 168, 0.6);
    --solo-pulse-0: rgba(47, 95, 168, 0);
    --solo-hud-h: 52px;
    --solo-console-w: clamp(360px, 32vw, 520px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--solo-bg); color: var(--solo-ink); font-family: 'Archivo', system-ui, sans-serif; }
body.solo-play { overflow: hidden; }

/* ---- Play layout ---- */
.solo-stage-wrap { position: fixed; top: 0; left: 0; bottom: var(--solo-hud-h); right: 0; transition: right 0.32s cubic-bezier(.2, .7, .2, 1); background: #000; overflow: hidden; }
body.console-open .solo-stage-wrap { right: var(--solo-console-w); }
.solo-stage { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.solo-console { position: fixed; top: 0; right: 0; bottom: var(--solo-hud-h); width: var(--solo-console-w); background: var(--solo-panel); border-left: 1px solid var(--solo-line); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(.2, .7, .2, 1); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45); }
body.console-open .solo-console { transform: translateX(0); }
.solo-console-head { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.6rem 0.35rem 0.9rem; border-bottom: 1px solid var(--solo-line); }
.solo-console-title { font-size: 0.66rem; letter-spacing: 0.22em; color: var(--solo-mut); }
.solo-console-hide { background: none; border: 0; color: var(--solo-mut); font-size: 1.3rem; cursor: pointer; padding: 0 0.3rem; }
.solo-console-hide:hover { color: #fff; }
.solo-pad-host { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.solo-pad { width: 100%; height: 100%; border: 0; background: transparent; display: block; }
.solo-console-tab { position: fixed; right: 0; top: 40%; transform: rotate(-90deg) translate(50%, -100%); transform-origin: right top; background: var(--solo-accent); color: var(--solo-accent-ink); border: 0; border-radius: 8px 8px 0 0; padding: 0.5rem 1.1rem; font: inherit; font-size: 0.75rem; letter-spacing: 0.2em; cursor: pointer; z-index: 5; }
.solo-console-tab[hidden] { display: none; }
.solo-console-tab.is-attention { animation: soloPulse 1.2s ease-in-out infinite; }
@keyframes soloPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--solo-pulse); } 50% { box-shadow: 0 0 0 10px var(--solo-pulse-0); } }

/* ---- HUD ---- */
.solo-hud { position: fixed; left: 0; right: 0; bottom: 0; height: var(--solo-hud-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.75rem; background: var(--solo-panel); border-top: 1px solid var(--solo-line); z-index: 6; }
.solo-hud-left, .solo-hud-right { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.solo-hud-title { font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.solo-hud-progress, .solo-hud-status { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--solo-mut); white-space: nowrap; }
.solo-btn { font: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; color: var(--solo-ink); background: var(--solo-button); border: 1px solid var(--solo-line); border-radius: 10px; padding: 0.55rem 0.9rem; cursor: pointer; min-height: 40px; min-width: 44px; }
.solo-btn:hover { border-color: rgba(255, 255, 255, 0.25); }
.solo-btn:disabled { opacity: 0.4; cursor: default; }
.solo-btn-next { background: var(--solo-accent); color: var(--solo-accent-ink); border-color: transparent; padding: 0.55rem 1.3rem; }
.solo-btn-next.is-counting { background: var(--solo-counting); }
.solo-next-count { font-weight: 400; opacity: 0.85; margin-left: 0.25rem; }
.solo-next-count:empty { display: none; }

/* ---- Menu sheet + ending card ---- */
.solo-menu-sheet, .solo-ending { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 10, 0.72); backdrop-filter: blur(4px); }
.solo-menu-sheet[hidden], .solo-ending[hidden] { display: none; }
.solo-menu-card, .solo-ending-card { width: min(92vw, 440px); background: var(--solo-panel); border: 1px solid var(--solo-line); border-radius: 18px; padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.solo-menu-card h2, .solo-ending-card h2 { margin: 0; font-size: 1.3rem; }
.solo-toggle-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--solo-mut); }
.solo-toggle-row input { width: 20px; height: 20px; }
.solo-wide { font: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid var(--solo-line); background: var(--solo-button); color: var(--solo-ink); cursor: pointer; min-height: 48px; }
.solo-wide:hover { border-color: rgba(255, 255, 255, 0.25); }
.solo-accent { background: var(--solo-accent); color: var(--solo-accent-ink); border-color: transparent; }
.solo-quiet { background: transparent; }
.solo-ending-eyebrow { margin: 0; font-size: 0.66rem; letter-spacing: 0.24em; color: var(--solo-mut); }
.solo-ending-meta { margin: 0; color: var(--solo-mut); }
.solo-ending-saved { margin: 0; font-size: 0.8rem; color: #7bd88f; }
.solo-ending-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }

/* ---- Menu page ---- */
.solo-menu-main { max-width: 900px; margin: 0 auto; padding: 2.4rem 1.4rem 4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.solo-menu-header { display: flex; align-items: center; gap: 1rem; }
.solo-glyph { width: 56px; height: 56px; }
.solo-menu-header h1 { margin: 0; font-size: 1.9rem; letter-spacing: 0.12em; text-transform: uppercase; }
.solo-menu-sub { margin: 0.2rem 0 0; color: var(--solo-mut); }
.solo-menu-name label { display: block; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--solo-mut); margin-bottom: 0.4rem; }
.solo-menu-name input { width: 100%; max-width: 360px; font: inherit; font-size: 1.15rem; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid var(--solo-line); background: var(--solo-panel); color: var(--solo-ink); }
.solo-menu-list h2, .solo-menu-recent h2 { font-size: 0.75rem; letter-spacing: 0.22em; color: var(--solo-mut); margin: 0 0 0.7rem; text-transform: uppercase; }
/* The scenarios as storyboard cards on the storyboard's night (14 Oct,
   PREMIERE: scenario_cards.css draws the face; PLAY in the card's accent). */
.solo-scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; align-items: start; }
.solo-card { font: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.solo-card:hover, .solo-card:focus-visible { border-color: rgba(228, 232, 236, 0.28); border-top-color: var(--sc-accent); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); outline: none; }
.solo-card-play { justify-self: start; margin-top: 0.4rem; font-family: var(--solo-play-font, 'Archivo', system-ui, sans-serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: var(--solo-play-ink, #0a0d10); background: var(--solo-play, var(--sc-accent, var(--solo-accent))); border-radius: 4px; padding: 0.4rem 0.95rem; }
.solo-recent-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; align-items: center; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--solo-line); font-size: 0.9rem; }
.solo-recent-row small { display: block; color: var(--solo-mut); font-size: 0.75rem; }
.solo-recent-score { font-weight: 700; white-space: nowrap; }
.solo-muted { color: var(--solo-mut); }
.solo-menu-tip { color: var(--solo-mut); font-size: 0.85rem; line-height: 1.5; }

/* ---- One-screen layout: exactly ONE surface at a time, filling the window
   above the control bar. The big screen carries the story, the video and the
   results; the moment the player has something to do, the player's own
   surface takes its place at the same size. Both are laid out at the stage
   design height and scaled to the window as a whole (stageframe.js), so a
   screen that fits at 1080p fits in every window. The control bar has its own
   strip along the bottom in both layouts: nothing floats over the scene, so
   nothing can ever sit on top of a button or a line of text. ---- */
body.view-single .solo-stage-wrap,
body.view-single.console-open .solo-stage-wrap { right: 0; }
body.view-single .solo-stage-wrap { transition: opacity 0.25s ease; }
body.view-single.console-open .solo-stage-wrap { opacity: 0; pointer-events: none; }

body.view-single .solo-console {
    top: 0; right: 0; bottom: var(--solo-hud-h); left: 0;
    width: auto; height: auto;
    transform: none;
    border: 0; border-radius: 0; box-shadow: none;
    background: var(--solo-bg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 4;
}
body.view-single.console-open .solo-console { opacity: 1; visibility: visible; pointer-events: auto; }
/* The panel header and the reopen tab belong to the docked layout. */
body.view-single .solo-console-head,
body.view-single .solo-console-tab { display: none; }

/* A message from the scenario is the one thing that does NOT take the screen:
   the video keeps playing and the thread floats over it (the player's page
   makes itself transparent — see voter-solo.css). Both frames are the same
   size and scale, so the thread lands where the player page puts it. */
body.view-single.msg-over.console-open .solo-stage-wrap { opacity: 1; }
body.view-single.msg-over .solo-console { background: transparent; }
body.view-single .solo-hud-title { max-width: 30vw; }
.solo-btn-view { font-size: 0.72rem; letter-spacing: 0.12em; }
.solo-menu-group { display: flex; flex-direction: column; gap: 0.35rem; }
.solo-menu-label { font-size: 0.66rem; letter-spacing: 0.22em; color: var(--solo-mut); }

@media (max-width: 900px) {
    :root { --solo-console-w: min(92vw, 420px); }
    body.console-open .solo-stage-wrap { right: 0; }
    .solo-hud-title { max-width: 28vw; }
}

/* Team exercises: which team is the player? */
.solo-team-sub { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--solo-mut, #9aa3b2); }
.solo-team-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.3rem 0 0.2rem; }