/* Seven Steps — 250 Edition layer over the Cinematic V4 styles.
   Loaded last. Everything here is an override; deleting this file and its
   <link> returns the build to stock V4. */

/* ---------------------------------------------------------------
   1. The WHY panel.
   Was muted blue-grey on near-black at 15px, sitting last in the
   panel where it fell below the fold. Now it reads like the answer
   it is: gold rule, lifted background, brighter body copy.
   --------------------------------------------------------------- */

#gameScreen .explanation,
.explanation {
  background: linear-gradient(180deg, rgba(11, 26, 44, 0.94), rgba(5, 13, 24, 0.97)) !important;
  border: 1px solid rgba(233, 182, 54, 0.42) !important;
  border-left: 4px solid #e9b636 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-top: 14px !important;
  color: #dbe7f2 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.explanation.show {
  display: block !important;
  animation: whyIn 0.28s ease both;
}

@keyframes whyIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.explanation span {
  display: block !important;
  font: 800 11px var(--orbitron) !important;
  letter-spacing: 0.18em;
  color: #ffcf5c !important;
  margin: 0 0 6px !important;
}

.explanation p {
  margin: 0 !important;
  font-family: var(--rajdhani), "Rajdhani", system-ui, sans-serif;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.55 !important;
  color: #e4eef8 !important;
}

/* "Tap to continue" — quiet, and only while the pause is running. */
.read-hint {
  display: block;
  text-align: center;
  margin: 9px auto 2px;
  font: 700 10px var(--orbitron);
  letter-spacing: 0.16em;
  color: #7f9ab2;
  animation: hintPulse 1.5s ease-in-out infinite;
}

@keyframes hintPulse {
  50% { opacity: 0.42; }
}

/* ---------------------------------------------------------------
   2. The climb — a colour per step reached.
   The staircase stays as built; what changes is that each conquered
   step lights its own colour, so progress reads at a glance from
   across a room. Cool bronze at the foot, hot gold at the summit.
   --------------------------------------------------------------- */

.climb-panel .game-step.done[data-step="1"] { background: linear-gradient(180deg, #2f5563, #14262e 62%, #081217) !important; border-color: #57a0b6 !important; color: #b9e4f0 !important; }
.climb-panel .game-step.done[data-step="2"] { background: linear-gradient(180deg, #2f6360, #14302c 62%, #081716) !important; border-color: #58baaa !important; color: #bdf0e5 !important; }
.climb-panel .game-step.done[data-step="3"] { background: linear-gradient(180deg, #47653a, #1f2f19 62%, #0d160a) !important; border-color: #7fbc5c !important; color: #d6f3c2 !important; }
.climb-panel .game-step.done[data-step="4"] { background: linear-gradient(180deg, #6d6631, #2f2c13 62%, #151407) !important; border-color: #c4b455 !important; color: #f4ecbb !important; }
.climb-panel .game-step.done[data-step="5"] { background: linear-gradient(180deg, #7d5a22, #35260c 62%, #191204) !important; border-color: #e0a83f !important; color: #ffe4a8 !important; }
.climb-panel .game-step.done[data-step="6"] { background: linear-gradient(180deg, #8a4a1e, #3a1e0a 62%, #1c0e04) !important; border-color: #f08c37 !important; color: #ffd6ab !important; }
.climb-panel .game-step.done[data-step="7"] {
  background: linear-gradient(180deg, #a8721b, #4a3009 62%, #221503) !important;
  border-color: #ffd25a !important;
  color: #fff3c4 !important;
  box-shadow: 0 0 26px rgba(255, 200, 70, 0.5), 0 11px 18px rgba(0, 0, 0, 0.45) !important;
}

/* The step you're standing on keeps a steady pulse regardless of colour. */
.climb-panel .game-step.current {
  animation: stepPulse 1.9s ease-in-out infinite;
}

@keyframes stepPulse {
  50% { box-shadow: 0 0 30px rgba(255, 214, 110, 0.62), inset 0 0 20px rgba(255, 203, 70, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .climb-panel .game-step.current { animation: none; }
  .read-hint { animation: none; }
  .explanation.show { animation: none; }
}

/* ---------------------------------------------------------------
   3. Fireworks canvas — sits over the results screen, never clickable.
   --------------------------------------------------------------- */

#fireworksCanvas {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#fireworksCanvas.show {
  opacity: 1;
}

/* Lift the results card above the shells so the numbers stay readable —
   people watch the score, not the sky. */
#resultsScreen .results-panel {
  position: relative;
  z-index: 46;
}


/* ---------------------------------------------------------------
   4. Real photo questions.
   Text-only questions render exactly as before: question centered
   full-width, answers in a 2x2 grid below. A question with a photo
   splits into two columns instead — question text and photo on the
   left, the four answers (stacked, one per row) and the WHY box on
   the right. Toggled via .has-photo on #questionColumns.
   --------------------------------------------------------------- */

.question-columns.has-photo {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin: 10px 0 4px;
}

.question-columns.has-photo .question-left {
  flex: 0 0 40%;
  max-width: 40%;
}

.question-columns.has-photo .question-right {
  flex: 1 1 auto;
  min-width: 0;
}

.question-columns.has-photo .question-left h2 {
  margin: 0 0 16px !important;
  text-align: left !important;
}

.q-photo {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(233, 182, 54, 0.34);
  border-radius: 12px;
  overflow: hidden;
  background: #05101d;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}

.q-photo img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
  background: #05101d;
}

.q-photo figcaption {
  padding: 6px 12px 7px;
  font: 600 11px var(--rajdhani), system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: #93aec6;
  background: rgba(3, 9, 18, 0.92);
  border-top: 1px solid rgba(233, 182, 54, 0.2);
  text-align: right;
}

.q-photo figcaption:empty {
  display: none;
}

@media (max-width: 900px) {
  .question-columns.has-photo { flex-direction: column; }
  .question-columns.has-photo .question-left,
  .question-columns.has-photo .question-right { max-width: 100%; flex: 1 1 auto; }
  .question-columns.has-photo .question-left h2 { text-align: center !important; }
  .q-photo img { height: 190px; }
}

@media (max-height: 760px) {
  .q-photo img { height: 190px; }
}

/* ===============================================================
   5. The lean question screen — 2026-08-11
   The decorative art strip and the right-hand climb panel are gone.
   Progress now sits in front of the player: seven numbered steps
   rising left to right, with the climber walking them.
   =============================================================== */

#gameScreen .era-art { display: none !important; }

/* The stage is a two-row grid: art on top, panel below. With the art hidden
   the panel became the first row and was clipped to 32% height, which hid the
   question and answers entirely. One row now, and nothing is cut off. */
#gameScreen .question-stage {
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: auto !important;
  background: #06101d;
}
#gameScreen .question-panel { border-top: 0; }
.game-layout { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 900px) { .game-layout { display: flex; flex-direction: column; } }

/* ---- the step track ----
   Bottoms line up on one floor; each step is taller than the last, so the
   staircase rises as you climb. */
.step-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 8px;
  margin: 2px 0 6px;
  padding-top: 62px;               /* headroom for the climber standing at the foot of the track */
}

.step-track .track-step {
  position: relative;
  border-radius: 9px 9px 4px 4px;
  border: 1px solid #31506f;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #1a3049, #0a1626);
  color: #7f9bb4;
  font: 800 17px var(--orbitron);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}

.step-track .track-step[data-step="1"] { height: 38px; }
.step-track .track-step[data-step="2"] { height: 48px; }
.step-track .track-step[data-step="3"] { height: 58px; }
.step-track .track-step[data-step="4"] { height: 68px; }
.step-track .track-step[data-step="5"] { height: 78px; }
.step-track .track-step[data-step="6"] { height: 88px; }
.step-track .track-step[data-step="7"] { height: 98px; }

.step-track .track-step.done {
  background: linear-gradient(180deg, #a8761b, #3c2a06);
  border-color: #e9b636;
  color: #ffe9a8;
  box-shadow: 0 0 18px rgba(233, 182, 54, .32);
}

.step-track .track-step.current {
  border-color: #ffe37b;
  color: #fff1b5;
  box-shadow: 0 0 26px rgba(255, 190, 44, .5);
}

/* ---- the climber, walking the steps ---- */
.track-climber {
  position: absolute;
  width: 116px;
  height: 154px;
  transform: translateX(-50%);
  transition: left .55s cubic-bezier(.25, .9, .3, 1), bottom .55s cubic-bezier(.25, .9, .3, 1);
  pointer-events: none;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .7));
  z-index: 3;
}
.track-climber img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

@media (prefers-reduced-motion: reduce) { .track-climber { transition: none; } }

@media (max-width: 900px) {
  .step-track { padding-top: 72px; gap: 5px; }
  .step-track .track-step { font-size: 13px; }
  .track-climber { width: 72px; height: 96px; }
}

/* ---- the answer line, so a miss is never ambiguous ---- */
.explanation .answer-line {
  display: block;
  font: 800 13px var(--orbitron);
  letter-spacing: .06em;
  color: #7ce9b6;
  margin: 0 0 7px;
}
.explanation.missed .answer-line { color: #ffd166; }

/* ---- GO ---- */
.go-row { display: flex; justify-content: center; margin-top: 14px; }
.go-btn { min-width: 190px; letter-spacing: .18em; }

/* ---- era roadmap screen ---- */
.era-road { display: grid; gap: 10px; margin: 22px 0 8px; }
.era-road .road-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #2a4763;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 28, 46, .92), rgba(5, 12, 22, .95));
  transition: .25s;
}
.era-road .road-row i {
  font-style: normal;
  font: 900 22px var(--cinzel);
  color: #7f9bb4;
  text-align: center;
}
.era-road .road-row b { display: block; font: 800 17px var(--cinzel); color: #eaf2fa; }
.era-road .road-row small { color: #8aa4bc; font-size: 12px; }
.era-road .road-row em {
  font-style: normal;
  font: 800 15px var(--orbitron);
  color: #6f8ba6;
  white-space: nowrap;
}
.era-road .road-row.current { border-color: #ffd25a; box-shadow: 0 0 24px rgba(255, 200, 70, .22); }
.era-road .road-row.current i { color: #ffd25a; }
.era-road .road-row.done { border-color: #4bbb8a; }
.era-road .road-row.done i { color: #4bbb8a; }
.era-road .road-row.done em { color: #7ce9b6; }
.era-road .road-row.locked { opacity: .55; }

/* ---- Road (era roadmap) screen: fit all eras + Begin button without scrolling ---- */
.screen[data-screen="road"] .console-panel {
  display: flex;
  flex-direction: column;
  max-height: 94vh;
  box-sizing: border-box;
}
.screen[data-screen="road"] h2 { margin: 2px 0 4px; font-size: clamp(24px, 3.4vw, 38px); }
.screen[data-screen="road"] #roadCopy { margin: 0 0 8px; font-size: 13px; }
.screen[data-screen="road"] .era-road {
  margin: 6px 0;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.screen[data-screen="road"] .era-road .road-row {
  padding: 7px 14px;
  gap: 10px;
}
.screen[data-screen="road"] .era-road .road-row i { font-size: 17px; }
.screen[data-screen="road"] .era-road .road-row b { font-size: 14px; }
.screen[data-screen="road"] .era-road .road-row small { font-size: 10px; }
.screen[data-screen="road"] .era-road .road-row em { font-size: 11px; }
.screen[data-screen="road"] .panel-actions { flex: 0 0 auto; margin-top: 8px; }

/* ——— v35: the step track was a third of a phone screen ———
   62–72px of climber headroom plus a 98px summit step pushed the question and
   answers off the bottom. Same staircase, phone-sized: the whole track now
   tops out near 78px instead of 170px, with a smaller climber to match. */
@media (max-width: 900px) {
  .step-track { padding-top: 30px; gap: 4px; margin: 0 0 6px; }
  .step-track .track-step { font-size: 11px; padding-bottom: 4px; border-bottom-width: 2px; }
  .step-track .track-step[data-step="1"] { height: 18px; }
  .step-track .track-step[data-step="2"] { height: 23px; }
  .step-track .track-step[data-step="3"] { height: 28px; }
  .step-track .track-step[data-step="4"] { height: 33px; }
  .step-track .track-step[data-step="5"] { height: 38px; }
  .step-track .track-step[data-step="6"] { height: 43px; }
  .step-track .track-step[data-step="7"] { height: 48px; }
  .track-climber { width: 52px; height: 68px; }
}

/* ——— v38: GO goes in the flow — Tony + two testers, Aug 18 ———
   The sticky GO button kept covering the WHY no matter how we scrolled
   around it. Retired for good: the panel now hugs its content instead of
   stretching to the full stage (killing the big empty gap under the
   answers), the CORRECT + WHY sit right below the answers, and GO stands
   in normal flow BELOW the WHY. Nothing can ever cover the explanation. */
@media (min-width: 901px) {
  #gameScreen .question-stage { align-items: start !important; }
  #gameScreen .question-panel { height: auto !important; min-height: 0 !important; }
}
#gameScreen .go-row, .go-row {
  position: static !important;
  margin-top: 12px !important;
  padding: 0 0 8px !important;
  background: none !important;
  box-shadow: none !important;
}
#gameScreen .question-panel:has(#goRow:not([hidden])) .explanation { padding-bottom: 12px !important; }
#gameScreen .explanation { scroll-margin-bottom: 12px !important; }

/* ——— v40: fit the whole answered screen without scrolling (desktop) ———
   With GO in normal flow the panel got taller than the window, pushing the
   button below the fold. Reclaim the vertical slack: the fixed-height
   feedback strip, the oversized question margin, and the tall answer
   buttons. Nothing is removed — everything just stops wasting inches. */
@media (min-width: 901px) {
  #gameScreen .question-panel { padding-top: 14px !important; padding-bottom: 10px !important; }
  #gameScreen .question-panel h2 { margin: 6px auto 10px !important; }
  #gameScreen .answers { gap: 8px !important; }
  #gameScreen .answer { min-height: 54px !important; padding: 9px 14px !important; }
  #gameScreen .feedback { height: auto !important; min-height: 0 !important; margin-top: 8px !important; }
  #gameScreen .explanation { margin-top: 8px !important; padding-top: 8px !important; }
  #gameScreen .explanation p { line-height: 1.38 !important; }
  #gameScreen .go-row { margin-top: 8px !important; padding-bottom: 4px !important; }
  #gameScreen .step-track { padding-top: 42px !important; margin-bottom: 4px !important; }
}

/* ——— v41: phone photo questions — Tony's iPhone pass, Aug 19 ———
   On a photo question the picture ran so tall that the four answers fell
   below the fold, and the answered state left a dead stretch above
   CORRECT. Cap the photo to a quarter of the screen, tighten the answer
   stack, and the whole question fits with the picture still readable. */
@media (max-width: 900px) {
  #gameScreen .q-photo:not([hidden]) { margin: 6px auto 8px !important; max-width: 100% !important; }
  #gameScreen .q-photo img {
    max-height: 24vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }
  #gameScreen .q-photo figcaption { font-size: 10px !important; padding: 3px 6px !important; }
  #gameScreen .question-panel h2 { margin: 4px auto 8px !important; }
  #gameScreen .answers { gap: 7px !important; }
  #gameScreen .answer { min-height: 44px !important; padding: 8px 12px !important; }
  #gameScreen .feedback { height: auto !important; min-height: 0 !important; margin-top: 6px !important; }
  #gameScreen .explanation { margin-top: 6px !important; padding-top: 6px !important; }
  #gameScreen .go-row { margin-top: 8px !important; }
  /* no reserved space when a question has no photo */
  #gameScreen .q-photo[hidden] { display: none !important; }
}

/* ——— v42: close the gap between the answers and CORRECT ———
   Nothing in the sheets obviously reserves that band, so instead of
   hunting it, pin the layout flat: the question column stacks as plain
   blocks with no stretching, and the CORRECT line sits directly under
   the last answer. */
/* v43: scope the flattening to questions WITHOUT a photo — v42's blanket
   rule was overriding the built-in two-column photo layout, dropping the
   picture full-width above the answers. Photo questions keep their split:
   question + picture on the left, the four answers stacked on the right. */
#gameScreen .question-columns:not(.has-photo) { display: block !important; }
#gameScreen .question-columns:not(.has-photo) .question-left,
#gameScreen .question-columns:not(.has-photo) .question-right {
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  justify-content: flex-start !important;
}
#gameScreen .answers { margin-bottom: 0 !important; align-content: start !important; }
#gameScreen .feedback { margin-top: 6px !important; padding: 0 !important; line-height: 1.2 !important; }

/* v43: photo questions on desktop — the picture fills its 40% column
   instead of floating in a half-empty box. */
@media (min-width: 901px) {
  #gameScreen .question-columns.has-photo { margin: 6px 0 4px !important; gap: 22px !important; }
  #gameScreen .question-columns.has-photo .q-photo { width: 100%; }
  #gameScreen .question-columns.has-photo .q-photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 46vh !important;
    object-fit: contain !important;
    display: block;
  }
  #gameScreen .question-columns.has-photo .answers { grid-template-columns: 1fr !important; }
}

/* ——— v44: the empty band under the answers — SOLVED, not guessed ———
   Measured off Tony's Aug 19 desktop screenshots: the void between the last
   answer and CORRECT is 93px. game-v4.css line 147 (the v33 sticky-GO fix)
   reserves padding-bottom: 74px + 12px = 86px under .answers whenever the GO
   row is showing, and .feedback adds its 6px margin. 86 + 6 = 92. That is the
   whole band, to the pixel.
   v38 retired the floating GO and zeroed that reserve on .explanation — the
   twin rule on .answers was missed, so the layout has gone on holding space
   for a button that no longer floats. v42 aimed at margin-bottom; the space
   was padding-bottom, which is why nothing changed.
   Global, not desktop-only: GO sits in normal flow on phones too, so this
   also hands 86px back to the phone — the room a photo question needs. */
#gameScreen .question-panel:has(#goRow:not([hidden])) .answers {
  padding-bottom: 0 !important;
}

/* ——— v45: the phone header, consolidated ———
   Tony's iPhone put only three of four answers above the fold. Measured
   shortfall: ~50 CSS px. game-v4.css line 16 (@media max-width:620px) gives
   .hud-profile min-width:100%, which forces the mode badge to wrap onto its
   own full-width row — two stacked bars where one would do. Undo that, drop
   the rank line and XP bar (the least useful pixels on a 375px screen), and
   tighten the meta row. Worth ~90px against a 50px need. */
@media (max-width: 900px) {
  #gameScreen .hud-top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }
  #gameScreen .hud-profile {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 5px 9px !important;
    gap: 8px !important;
  }
  #gameScreen .hud-profile > div:last-child { min-width: 0 !important; }
  #gameScreen .hud-profile strong {
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Rank and XP bar are pure decoration mid-question — reclaim the row. */
  #gameScreen #hudRank,
  #gameScreen .hud-profile .xp-track { display: none !important; }

  #gameScreen .hud-mode {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 5px 11px !important;
  }
  #gameScreen .hud-mode span {
    font-size: 8px !important;
    letter-spacing: .10em !important;
  }
  #gameScreen .hud-mode b {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  #gameScreen .miss-dots { margin: 3px 0 !important; }

  /* The meta row appeared on some questions and not others. Pin it to one
     compact line so the layout is the same on every question. */
  #gameScreen .question-meta {
    margin: 0 0 3px !important;
    min-height: 0 !important;
    align-items: center !important;
  }
  #gameScreen #questionEra { font-size: 9px !important; }
  #gameScreen .question-meta .timer-pill {
    padding: 1px 9px !important;
    font-size: 10px !important;
  }
}

/* ——— v46: on a phone, the answers you didn't pick step aside ———
   Tony's v45 phone shots: the header fix worked, but the WHY and GO still
   fell below the fold, in Potpourri and worse in the citizenship test where
   the 21-cell board eats the top of the panel. The arithmetic doesn't close —
   header + question + four buttons already fills 375x630, and CORRECT + WHY
   + GO need ~250px more. v36 solved it by scrolling; Tony rejected that,
   rightly, because it threw the question off screen.
   So the buttons give way instead. On reveal, game-v4.js marks the right
   answer .correct and the player's miss .wrong; everything else is now
   hidden on phones. What's left is the question, the answer, and the why —
   which is the teaching moment with nothing competing against it.
   Frees ~124px on a clean sheet, ~186px when the player is right.
   Desktop untouched: it all fits there already. */
@media (max-width: 900px) {
  #gameScreen .question-panel:has(#goRow:not([hidden])) .answer:not(.correct):not(.wrong) {
    display: none !important;
  }
  /* With the list short, give the survivors a little breathing room back. */
  #gameScreen .question-panel:has(#goRow:not([hidden])) .answers {
    gap: 8px !important;
    margin-bottom: 4px !important;
  }
}

/* ——— v47: on reveal, the progress track steps aside too ———
   v46 got correct answers fitting, but Tony's MISS shots still pushed GO off
   the bottom: a miss keeps two buttons instead of one. The next redundant
   thing on screen is the progress track — the climber and seven steps in the
   open modes, the 21-cell board in the citizenship test — sitting above a
   question already answered, when the badge overhead says STEP x OF 7 anyway.
   Hide both on reveal, ease the question type down a notch, and the miss case
   closes with room to spare: ~57px back in Lagniappe, closer to 100 in the
   test. Everything returns the moment GO loads the next question.
   Phones only. Desktop is untouched and always has been. */
@media (max-width: 900px) {
  #gameScreen .question-panel:has(#goRow:not([hidden])) .step-track,
  #gameScreen .question-panel:has(#goRow:not([hidden])) .civics-board {
    display: none !important;
  }
  #gameScreen .question-panel:has(#goRow:not([hidden])) h2 {
    font-size: clamp(15px, 4.0vw, 19px) !important;
    margin: 2px auto 8px !important;
  }
}

/* ——— v49: SEND FEEDBACK link on the home screen ———
   First thing people asked after launch was where to send feedback, so it
   sits beside MY STATS rather than buried. It's an <a>, not a <button>, so
   .btn's default styling needs the anchor bits restored. Opens in a new tab
   with rel=noopener so a player mid-climb doesn't lose the page. */
#homeScreen .scores-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
#homeScreen #feedbackBtn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ——— v55: photo questions no longer overflow the desktop stage ———
   Mechanism, found by reading the cascade rather than guessing again:
   question-v4.css locks the whole game screen to the viewport on desktop
   (height: 100dvh - header, overflow hidden) and gives .question-stage
   height:100%; edition250.css line 215 then makes that stage overflow:auto.
   So the stage is a fixed-height scroll container. Text-only questions fit
   inside it. A photo question adds an image capped at 46vh — on a 950px
   window that is 437px on top of the question, four answers and the WHY —
   and the stage starts scrolling, which is the bar down the right side of
   Tony's Aug 21 screenshots, with GO clipped off the bottom.

   Two fixes, belt and braces. First a lower hard ceiling on the picture.
   Second, and more important, a chain of min-height:0 from the panel down
   to the image so the PHOTO is the thing that gives way when a window is
   short — every other element keeps its natural size. That is a structural
   fix, not a tuned number: it holds at any window height.
   The stage keeps overflow:auto underneath as a last resort, so nothing can
   ever become unreachable even if some future question is taller still. */
@media (min-width: 901px) {
  #gameScreen .question-panel {
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }
  #gameScreen .question-columns { min-height: 0 !important; }
  #gameScreen .question-columns.has-photo { align-items: stretch !important; }
  #gameScreen .question-columns.has-photo .question-left {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  #gameScreen .question-columns.has-photo .question-left h2 { flex: 0 0 auto !important; }
  #gameScreen .question-columns.has-photo .question-right { min-height: 0 !important; }
  #gameScreen .question-columns.has-photo .q-photo {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 120px !important;
    overflow: hidden !important;
  }
  #gameScreen .question-columns.has-photo .q-photo img {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(34vh, 300px) !important;
    object-fit: contain !important;
  }
  #gameScreen .question-columns.has-photo .q-photo figcaption { flex: 0 0 auto !important; }
}