.hidden {
    display: none !important;
}

/* No outer wrapping/centering -- the whole viewport is just the
   stage-body grid below (main column + sidebar). */
.stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.stage-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 16px;
    padding: 16px;
    /* Both columns match the row's height (the taller of the two) so the
       idle/question panels below can stretch to fill it, matching the
       sidebar's height. */
    align-items: stretch;
}

@media (max-width: 900px) {
    .stage-body {
        grid-template-columns: 1fr;
    }
}

.question-area {
    position: relative; /* anchors .audience-results as an overlay, see below */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.idle-panel, .question-panel {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 360px;
}

/* Stretch to match the sidebar's full height instead of just sitting at
   min-height with empty space left in the column below. */
.idle-panel, .question-panel {
    flex: 1;
}

/* Question panel background gradually turns "space-like" as the game gets
   deeper: --depth (set from JS, see renderQuestion in player.js) is 0 for
   levels 1-5 (the plain flat .panel gradient, untouched -- no override
   here at all, it just shows through) and ramps up 0.1->1.0 across levels
   6-15. Every extra layer uses plain element `opacity: var(--depth)`
   rather than baking the number into each gradient's alpha, so the effect
   fades in gradually without needing calc() inside every color stop.
   Three layers, back to front:
     .space-far  (a real child div -- see below)  -- small, dim, distant
                 stars, drifting *slowly*.
     ::after                                       -- the center glow:
                 deep blue-violet core fading to near-black then to fully
                 transparent well before the panel's edges (radial,
                 "galactic", flat near the borders, same as the untouched
                 1-5 look).
     ::before                                      -- brighter, closer
                 stars, drifting *faster* than .space-far.
   The two star layers moving at different speeds is what actually reads
   as parallax (distant things drift slower than near things); the glow
   between them sits still, like it's further away than either.
   Everything sits *behind* the panel's actual content via negative
   z-index -- #questionPanel itself gets position+z-index:0 so that
   negative index is contained to this panel instead of escaping into the
   page's own stacking order. Both star layers animate via
   `transform: translate()`, not `background-position` -- transform is
   GPU-compositable so the drift is genuinely smooth; animating
   background-position instead forces a full repaint every frame, which is
   what caused an earlier version to visibly step/jump rather than flow. */
#questionPanel {
    position: relative;
    z-index: 0;
    overflow: hidden;
    --depth: 0;
}

#questionPanel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Reaches all the way to farthest-corner (not a fixed percentage) and
       never fades back to transparent -- monotonically darker at every
       step from the blue-violet center out to the corners, with enough
       intermediate stops that the blend reads as smooth rather than
       banded. */
    background-image: radial-gradient(
        ellipse farthest-corner at center,
        rgba(47, 92, 255, 0.2) 0%,
        rgba(35, 20, 65, 0.4) 35%,
        rgba(12, 8, 35, 0.6) 65%,
        rgba(1, 2, 10, 0.85) 100%
    );
    opacity: var(--depth);
    pointer-events: none;
}

#questionPanel .space-far,
#questionPanel::before {
    content: '';
    position: absolute;
    inset: -300px; /* oversized so a full one-tile translate never reveals an edge, even with #questionPanel's overflow:hidden clipping the visible part */
    background-repeat: repeat;
    background-size: 300px 300px;
    opacity: var(--depth);
    pointer-events: none;
    will-change: transform;
}

/* Distant layer: fewer, dimmer, smaller dots. */
#questionPanel .space-far {
    z-index: -3;
    background-image:
        radial-gradient(1px 1px at 70px 90px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 200px 220px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 250px 60px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 30px 200px, rgba(255, 255, 255, 0.25), transparent);
}

/* Near layer: more, brighter, slightly bigger dots. */
#questionPanel::before {
    z-index: -1;
    background-image:
        radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 140px 180px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 220px 40px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 260px 220px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 60px 240px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 180px 100px, rgba(255, 255, 255, 0.55), transparent);
}

@keyframes spaceDrift {
    from { transform: translate(0, 0); }
    to { transform: translate(-300px, -300px); }
}

/* Level 11+ only -- a slow, smooth drift across both star layers (same
   keyframes, different durations -- looping seamlessly since each moves by
   exactly one tile), the far one taking twice as long as the near one so
   they visibly move at different rates -- that speed difference is what
   actually reads as parallax. */
#questionPanel.space-animated .space-far {
    animation: spaceDrift 260s linear infinite;
}

#questionPanel.space-animated::before {
    animation: spaceDrift 130s linear infinite;
}

/* Fully covers the panel -- overrides .panel's gradient background-image
   (see base.css) with the actual picture; background-size/position aren't
   touched by that shorthand so they're safe to set here. */
/* background-image itself is set inline from player.js (see
   applyActiveImage), driven by the director-chosen activeImage -- only the
   sizing/position is fixed here. */
.idle-panel {
    background-size: cover;
    background-position: center;
}

/* Floats over the top of the main block (like the Phone-A-Friend timer)
   instead of sitting inline in the flex column -- an inline box here would
   force the question panel below it to shrink and share height with it,
   visibly shifting the question/answers layout every time results
   appear/disappear. Taken out of flow entirely, it never does that,
   overlapping the top of the question panel instead when both show at
   once. Capped and centered to match the answers grid's own width (two
   answer boxes wide) rather than the full main column. */
.question-area .audience-results {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    background: linear-gradient(180deg, var(--bg-panel-light), var(--bg-panel));
    border: 1px solid rgba(255, 212, 94, 0.25);
    box-shadow: 0 0 30px rgba(47, 92, 255, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.question-area .audience-results h2 {
    font-size: 28px;
}

.question-area .audience-bar-row {
    font-size: 22px;
    gap: 12px;
    margin-bottom: 10px;
}

.question-area .audience-bar-track {
    height: 28px;
    border-radius: 14px;
}

.question-area .audience-bar-pct {
    width: 110px;
}

.prize-tag {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.question-text {
    font-size: clamp(26px, 3.6vw, 40px);
    text-align: center;
    font-weight: bold;
    max-width: 900px;
}

.answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 900px;
}

.answer-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-radius: 24px;
    border: 1px solid var(--gold-dim);
    background: rgba(255, 255, 255, 0.03);
    font-size: 24px;
    min-height: 32px;
}

.answer-box.hidden-answer {
    visibility: hidden;
}

.answer-box .answer-key {
    color: var(--gold);
    font-weight: bold;
}

.answer-box.selected {
    border-color: var(--blue-glow);
    background: rgba(47, 92, 255, 0.25);
}

.answer-box.locked {
    border-color: var(--gold);
    background: rgba(255, 212, 94, 0.15);
}

.answer-box.correct {
    border-color: var(--green);
    background: rgba(61, 220, 114, 0.25);
}

.answer-box.incorrect {
    border-color: var(--red);
    background: rgba(255, 77, 77, 0.25);
}

/* Sidebar: lifelines, prize ladder. Audience results box is back in the
   main column (see .question-area .audience-results above). */
.sidebar-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Pinned to the bottom of the sidebar (rather than sitting right after the
   lifelines row with empty space left below it whenever the sidebar is
   taller than its content) -- an auto top margin on a flex child absorbs
   all remaining free space above it. */
.sidebar-panel .ladder {
    margin-top: auto;
}

.sidebar-panel .lifelines-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sidebar-panel .lifeline-badge {
    width: 80px;
    padding: 10px 6px;
}

.sidebar-panel .lifeline-badge svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.8;
}

.sidebar-panel .lifeline-badge .label {
    font-size: 14px;
}

.sidebar-panel .ladder-row {
    font-size: 18px;
    padding: 7px 12px;
}