/* ==========================================================================
   MillionQuiz.css — game-show quiz stage, light Die Ratte theme.
   Game-show structure (lozenge question/answer bars on rails, money ladder,
   oval lifelines, light rays, medallion) on a bright mint-wash stage in the
   Die Ratte palette: white surfaces, mint rims and ladder, brand gold for the
   lock-in, the Die Ratte brand mark at the centre.
   Built for 16:9 projectors first; clamp() + vw/vh scale it from 1366×768 to 4K.
   All colours come from the tokens below.
   ========================================================================== */

:root {
  --QzInk: #22312b;
  --QzInkSoft: #4b5a54;
  --QzMuted: #6b7b74;
  --QzLine: rgba(44, 142, 106, 0.24);
  --QzLineStrong: rgba(44, 142, 106, 0.5);
  --QzMint: #83d8b9;
  --QzMintBright: #9ae3c8;
  --QzMintInk: #2c6f57;
  --QzWash: #eef8f3;
  --QzSurface: #ffffff;
  --QzGold: #ffd166;
  --QzGoldDeep: #f0a92e;
  --QzGoldText: #b9790b;
  --QzOnMint: #0d2a1f;
  --QzOnGold: #2a2108;
  --QzWrong: #d9545b;
  --QzWrongInk: #b23a41;
  --QzShadow: rgba(30, 70, 55, 0.14);

  /* Lozenge defaults (overridden per state) */
  --RimMint: linear-gradient(180deg, #c3eadb 0%, var(--MintDark) 50%, #c3eadb 100%);
  --RimGold: linear-gradient(180deg, #ffe7a6 0%, var(--QzGoldDeep) 50%, #ffe7a6 100%);
  --FillLight: linear-gradient(180deg, #ffffff 0%, #f8fcfa 48%, #eef8f3 52%, #ffffff 100%);
  --FillHover: linear-gradient(180deg, #f3fbf7 0%, #e3f4ec 48%, #d8f0e5 52%, #f3fbf7 100%);
}

.MillionQuizPage {
  background: #e9f4ef;
  color: var(--QzInk);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Stage shell + backdrop
   -------------------------------------------------------------------------- */
.Stage {
  --Gutter: clamp(16px, 3vw, 48px);
  --LadderGap: clamp(16px, 2.2vw, 40px);
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.Stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 40% 55%, var(--FlashColor, rgba(131, 216, 185, 0.4)), transparent 65%);
}
.Stage.FlashGood::after { --FlashColor: rgba(131, 216, 185, 0.45); animation: StageFlash 1.1s ease-out; }
.Stage.FlashBad::after { --FlashColor: rgba(229, 100, 107, 0.3); animation: StageFlash 1.1s ease-out; }

.StageBackdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse 75% 65% at 42% 45%, #ffffff 0%, #f3faf7 38%, #e2f2eb 70%, #d2eadf 100%);
}
.StageBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 80% 70% at 42% 50%, transparent 35%, rgba(229, 100, 107, 0.28) 100%);
  transition: opacity .8s ease;
}
.Stage.IsFalling .StageBackdrop::after { opacity: 1; }
.Rays {
  position: absolute;
  left: 42%;
  top: 45%;
  width: 240vmax;
  height: 240vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(74, 175, 137, 0.075) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 38%);
  mask-image: radial-gradient(circle, #000 0%, transparent 38%);
  animation: RaysSpin 120s linear infinite;
}
.Halo {
  position: absolute;
  left: 42%;
  top: 45%;
  width: 92vmin;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(74, 175, 137, 0.14);
  box-shadow: inset 0 0 120px rgba(131, 216, 185, 0.22);
}
.Halo::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgba(74, 175, 137, 0.16);
}
.Beam {
  position: absolute;
  top: -12%;
  width: 34vw;
  height: 130%;
  transform-origin: 50% 0;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(131, 216, 185, 0.22), rgba(131, 216, 185, 0) 70%);
  filter: blur(10px);
}
.BeamLeft { left: -2%; animation: BeamSweepLeft 12s ease-in-out infinite alternate; }
.BeamRight { right: -2%; animation: BeamSweepRight 14s ease-in-out infinite alternate; }
.StageFloor {
  position: absolute;
  left: 42%;
  bottom: -24vh;
  width: 120vw;
  height: 46vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(131, 216, 185, 0.32), transparent);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.StageHeader {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: clamp(10px, 2vh, 22px) var(--Gutter);
}
.BackBtn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--RadiusPill);
  background: transparent;
  color: var(--QzMintInk);
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 800;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.BackBtn svg {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform .2s var(--EaseOut);
}
.BackBtn:hover {
  background: rgba(74, 175, 137, 0.12);
  color: var(--QzInk);
}
.BackBtn:hover svg { transform: translateX(-3px); }
.BackBtn:focus-visible { outline: 3px solid var(--MintDark); outline-offset: 3px; }

.StageTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  transition: opacity .3s ease;
}
.Stage[data-screen="Intro"] .StageTitle { opacity: 0; }
.StageTitle { filter: drop-shadow(0 6px 14px var(--QzShadow)); }

/* Wordmark — two-tier show title: small tracked lead between gold rules,
   big shimmering mint main word. Sized per use via --LeadSize / --MainSize. */
.Wordmark {
  --LeadSize: 12px;
  --MainSize: 26px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-transform: uppercase;
}
.WordmarkLead {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: var(--LeadSize);
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--QzMintInk);
  /* letter-spacing adds trailing space after the last letter; pull it back */
  margin-right: -0.3em;
}
.WordmarkLead::before,
.WordmarkLead::after {
  content: "";
  width: 2.4em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--QzGoldDeep));
}
.WordmarkLead::after {
  margin-left: -0.3em;
  background: linear-gradient(270deg, transparent, var(--QzGoldDeep));
}
.WordmarkMain {
  margin-top: 0.12em;
  font-size: var(--MainSize);
  font-weight: 900;
  letter-spacing: 0.03em;
  background: linear-gradient(110deg, #1f5f49 0%, #1f5f49 35%, #49c095 50%, #1f5f49 65%, #1f5f49 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: WordmarkShine 6s ease-in-out infinite;
}
@keyframes WordmarkShine {
  0%, 30% { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}
/* Header plaque reuses the lozenge shape of the question/answer bars */
.WordmarkPlaque {
  --N: clamp(16px, 1.3vw, 24px);
  --LeadSize: clamp(9px, 0.6vw, 11.5px);
  --MainSize: clamp(17px, 1.35vw, 25px);
  flex-direction: column;
  padding: clamp(6px, 0.9vh, 10px) calc(var(--N) + clamp(14px, 1.4vw, 26px));
}
.StageTools {
  justify-self: end;
  display: flex;
  gap: 10px;
}
.IconBtn {
  width: clamp(40px, 5vh, 50px);
  height: clamp(40px, 5vh, 50px);
  border-radius: 50%;
  border: 1.5px solid var(--QzLine);
  background: var(--QzSurface);
  color: var(--QzMintInk);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--QzShadow);
  transition: border-color .2s, background .2s, transform .2s;
}
.IconBtn:hover { border-color: var(--QzLineStrong); background: var(--QzWash); transform: translateY(-1px); }
.IconBtn:focus-visible { outline: 3px solid var(--MintDark); outline-offset: 2px; }
.IconBtn svg { width: 22px; height: 22px; }
.IconSoundOff { display: none; }
.IconBtn[aria-pressed="false"] .IconSoundOn { display: none; }
.IconBtn[aria-pressed="false"] .IconSoundOff { display: block; }

/* --------------------------------------------------------------------------
   Buttons — Die Ratte mint primary
   -------------------------------------------------------------------------- */
.StageBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--RadiusPill);
  font-family: inherit;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s, border-color .2s, opacity .2s, filter .2s;
}
.StageBtn:focus-visible { outline: 3px solid var(--QzGoldDeep); outline-offset: 3px; }
.StageBtnPrimary {
  background: linear-gradient(180deg, var(--QzMintBright), var(--MintDark));
  color: var(--QzOnMint);
  box-shadow: 0 4px 0 var(--MintDeep), 0 10px 22px rgba(74, 175, 137, 0.3);
}
.StageBtnPrimary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.StageBtnPrimary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--MintDeep), 0 6px 14px rgba(74, 175, 137, 0.3); }
.StageBtnGhost {
  background: var(--QzSurface);
  border-color: var(--QzLine);
  color: var(--QzMintInk);
}
.StageBtnGhost:hover { border-color: var(--QzLineStrong); background: var(--QzWash); }
.StageBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.StageBtnLarge {
  padding: 15px 34px;
  font-size: clamp(16px, 1.2vw, 21px);
}

/* --------------------------------------------------------------------------
   Lozenge shape — clipped hexagon with a 2-3px gradient rim.
   Set --N (notch width), --Rim and --Fill on the element; glows go on an
   unclipped parent because clip-path also clips shadows.
   -------------------------------------------------------------------------- */
.Shape {
  --N: clamp(18px, 1.8vw, 34px);
  --RimWidth: 2px;
  --Rim: var(--RimMint);
  --Fill: var(--FillLight);
  position: relative;
  display: flex;
  align-items: center;
  clip-path: polygon(var(--N) 0, calc(100% - var(--N)) 0, 100% 50%, calc(100% - var(--N)) 100%, var(--N) 100%, 0 50%);
  background: var(--Rim);
}
.Shape::before {
  content: "";
  position: absolute;
  inset: var(--RimWidth);
  clip-path: polygon(calc(var(--N) - 1px) 0, calc(100% - var(--N) + 1px) 0, 100% 50%, calc(100% - var(--N) + 1px) 100%, calc(var(--N) - 1px) 100%, 0 50%);
  background: var(--Fill);
}
.Shape > * { position: relative; }

/* --------------------------------------------------------------------------
   Screens
   -------------------------------------------------------------------------- */
.Screen {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  display: none;
}
.Screen.IsActive {
  display: grid;
  animation: ScreenIn .55s var(--EaseOut);
}

.IntroCard,
.EndCard {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
  padding: clamp(20px, 3.4vh, 40px) clamp(20px, 3vw, 44px);
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--QzLine);
  border-radius: 28px;
  box-shadow: 0 30px 70px var(--QzShadow), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
}
.IntroCard,
.EndMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 18px);
}

/* Medallion — mint ring around the Die Ratte brand mark */
.Medallion {
  position: relative;
  width: clamp(130px, 21vh, 220px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.MedallionSmall { width: clamp(84px, 12vh, 130px); }
.MedallionRing {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #d8f3e8, var(--MintDark), #ffffff, var(--MintDeep), var(--QzMintBright), var(--MintDark), #d8f3e8);
  box-shadow: 0 14px 40px rgba(74, 175, 137, 0.35), 0 0 0 6px rgba(131, 216, 185, 0.18);
  animation: Spin 14s linear infinite;
}
.MedallionCore {
  position: absolute;
  inset: 7%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f6fbf9 70%, #e3f4ec 100%);
  box-shadow: inset 0 0 0 2px rgba(44, 142, 106, 0.18), inset 0 -8px 20px rgba(44, 142, 106, 0.1);
}
.MedallionMark {
  width: 58%;
  height: auto;
  transform: translateX(-3%);
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.IntroScreen {
  place-items: center;
  padding: 0 var(--Gutter) clamp(16px, 3vh, 40px);
  overflow-y: auto;
}
.IntroTitle {
  /* 7.5vw keeps the main word inside the card on phones; 4.4vh rules on projectors */
  --LeadSize: clamp(11px, min(1.6vh, 3.2vw), 16px);
  --MainSize: clamp(26px, min(4.4vh, 7.5vw), 46px);
}
.IntroTagline {
  margin: 0;
  color: var(--QzMuted);
  font-size: clamp(15px, 1.9vh, 20px);
  font-weight: 600;
}
.SetPicker {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.SetOption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  text-align: left;
  border: 1.5px solid var(--QzLine);
  border-radius: 16px;
  background: #f8fcfa;
  color: var(--QzInk);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.SetOption:hover { border-color: var(--QzLineStrong); }
.SetOption:focus-visible { outline: 3px solid var(--QzGoldDeep); outline-offset: 2px; }
.SetOption[aria-checked="true"] {
  border-color: var(--MintDark);
  background: var(--MintWash);
  box-shadow: 0 0 0 4px rgba(131, 216, 185, 0.25);
}
.SetOptionTitle { font-size: 16px; font-weight: 800; }
.SetOptionDesc { font-size: 13px; color: var(--QzMuted); }

.TeamField {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--QzInkSoft);
}
.TeamField em { font-style: normal; font-weight: 500; color: var(--QzMuted); }
.TeamField input {
  padding: 12px 16px;
  border: 1.5px solid var(--QzLine);
  border-radius: 14px;
  background: var(--QzSurface);
  color: var(--QzInk);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: border-color .2s, box-shadow .2s;
}
.TeamField input::placeholder { color: #9aa9a3; }
.TeamField input:focus {
  outline: none;
  border-color: var(--MintDark);
  box-shadow: 0 0 0 4px rgba(131, 216, 185, 0.25);
}
.KeyHint {
  margin: 0;
  font-size: 12.5px;
  color: var(--QzMuted);
}
.KeyHint kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--QzLine);
  border-radius: 6px;
  background: #f1f7f4;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--QzInk);
}

/* --------------------------------------------------------------------------
   Game screen
   -------------------------------------------------------------------------- */
.GameScreen {
  grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 380px);
  gap: var(--LadderGap);
  padding: 0 var(--Gutter) clamp(14px, 2.6vh, 32px);
}
.PlayArea {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(12px, 2.2vh, 26px);
  transition: filter .8s ease, opacity .8s ease;
}
.Stage.IsFalling .PlayArea { filter: saturate(0.4); opacity: 0.75; }

/* Brand centrepiece above the question; shrinks with the free space */
.StageEmblem {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  place-items: center;
}
.MedallionStage {
  width: auto;
  height: min(88%, 28vh);
  max-height: 280px;
}

.QuestionMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.MetaChip {
  padding: 6px 14px;
  border: 1.5px solid var(--QzLine);
  border-radius: var(--RadiusPill);
  background: var(--QzSurface);
  color: var(--QzInk);
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px var(--QzShadow);
}
.MetaChipGold {
  color: var(--QzMintInk);
  border-color: var(--QzLineStrong);
  background: var(--MintWash);
}
.MetaTeam {
  margin-left: auto;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 800;
  color: var(--QzMintInk);
}

/* Horizontal rails behind the question and each answer row */
.QuestionWrap,
.AnswerRow { position: relative; }
.QuestionWrap::before,
.AnswerRow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--Gutter));
  right: calc(-1 * var(--LadderGap));
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(74, 175, 137, 0.1), rgba(74, 175, 137, 0.6) 12%, rgba(74, 175, 137, 0.6) 88%, rgba(74, 175, 137, 0.1));
}

/* Question */
.QuestionShape {
  --N: clamp(30px, 3.2vw, 60px);
  --RimWidth: 3px;
  justify-content: center;
  min-height: clamp(120px, 23vh, 270px);
  padding: clamp(16px, 2.6vh, 34px) calc(var(--N) + clamp(18px, 2.4vw, 48px));
}
.QuestionWrap { filter: drop-shadow(0 14px 26px var(--QzShadow)); }
.QuestionText {
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 2.45vw, 52px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--QzInk);
  transition: opacity .35s ease;
}
.QuestionText.IsLong { font-size: clamp(20px, 2.05vw, 44px); }
.QuestionWrap.IsEntering .QuestionText { animation: QuestionIn .65s var(--EaseOut); }
.QuestionWrap.HasBanner .QuestionText { opacity: 0; }

/* Amount banner shown over the question after a correct answer */
.WinBanner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .35s ease, transform .45s var(--EaseOut);
}
.QuestionWrap.HasBanner .WinBanner { opacity: 1; transform: scale(1); }
.WinBannerShape {
  --N: clamp(24px, 2.4vw, 44px);
  --RimWidth: 3px;
  --Rim: var(--RimGold);
  --Fill: linear-gradient(180deg, #fffdf6 0%, #fff7e0 48%, #fff1cc 52%, #fffdf6 100%);
  justify-content: center;
  min-width: min(70%, 620px);
  min-height: 62%;
  padding: 10px calc(var(--N) + 30px);
}
.WinBannerAmount {
  font-size: clamp(34px, 4.6vw, 92px);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--QzGoldDeep) 15%, var(--QzGoldText) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Answers */
.Answers {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 20px);
}
.AnswerRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 44px);
}
.Answer {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--QzInk);
  font: inherit;
  text-align: left;
  cursor: default;
  filter: drop-shadow(0 8px 14px var(--QzShadow));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s var(--EaseOut), filter .3s ease;
}
.Answer.IsShown { opacity: 1; transform: none; }
.Answer:focus-visible { outline: none; }
.Answer:focus-visible .AnswerShape { --Rim: var(--RimGold); }
.AnswerShape {
  gap: 0.5em;
  min-height: clamp(56px, 9.2vh, 104px);
  padding: 8px calc(var(--N) + clamp(10px, 1vw, 18px));
  font-size: clamp(17px, 1.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  transition: color .25s;
}
.AnswerLetter {
  flex: none;
  color: var(--MintDark);
  font-weight: 900;
  transition: color .25s;
}
.AnswerText {
  min-width: 0;
  overflow-wrap: anywhere;
}

.GameScreen[data-phase="Choosing"] .Answer:not(.IsEliminated) { cursor: pointer; }
.GameScreen[data-phase="Choosing"] .Answer:not(.IsEliminated):not(.IsSelected):hover { transform: translateY(-2px); }
.GameScreen[data-phase="Choosing"] .Answer:not(.IsEliminated):not(.IsSelected):hover .AnswerShape {
  --Rim: linear-gradient(180deg, #9ae3c8, var(--MintDeep) 50%, #9ae3c8);
  --Fill: var(--FillHover);
}

.Answer.IsSelected { filter: drop-shadow(0 0 14px rgba(240, 169, 46, 0.5)); }
.Answer.IsSelected .AnswerShape {
  --Rim: var(--RimGold);
  --Fill: linear-gradient(180deg, #fffdf6 0%, #fff8e6 48%, #fff2d2 52%, #fffdf6 100%);
}
.Answer.IsSelected .AnswerLetter { color: var(--QzGoldText); }

.Answer.IsLocked { animation: LockedGlow 1s ease-in-out infinite; }
.Answer.IsLocked .AnswerShape {
  --Rim: linear-gradient(180deg, #fff3cc, #e39a1c 50%, #fff3cc);
  --Fill: linear-gradient(180deg, #ffe08a 0%, #ffc94d 48%, #f6b532 52%, #ffd877 100%);
  color: var(--QzOnGold);
}
.Answer.IsLocked .AnswerLetter { color: var(--QzOnGold); }

.Answer.IsCorrect { animation: CorrectFlash .42s ease-in-out 5 alternate; filter: drop-shadow(0 0 20px rgba(74, 175, 137, 0.6)); }
.Answer.IsCorrect .AnswerShape {
  --Rim: linear-gradient(180deg, #d8f3e8, var(--MintDeep) 50%, #d8f3e8);
  --Fill: linear-gradient(180deg, #a6f0d2 0%, #5fcca2 48%, #4cbf93 52%, #96e8c6 100%);
  color: var(--QzOnMint);
}
.Answer.IsCorrect .AnswerLetter { color: var(--QzOnMint); }

.Answer.IsWrong { animation: WrongShake .5s ease; filter: drop-shadow(0 0 16px rgba(217, 84, 91, 0.5)); }
.Answer.IsWrong .AnswerShape {
  --Rim: linear-gradient(180deg, #ffe3e4, var(--QzWrongInk) 50%, #ffe3e4);
  --Fill: linear-gradient(180deg, #f39297 0%, #e0646b 48%, #d9545b 52%, #ee7f85 100%);
  color: #ffffff;
}
.Answer.IsWrong .AnswerLetter { color: #ffffff; }

.Answer.IsShown.IsDimmed { opacity: 0.5; }
.Answer.IsShown.IsEliminated { opacity: 0.25; filter: grayscale(1); }
.Answer.IsEliminated .AnswerText { visibility: hidden; }

/* Host bar */
.HostBar {
  min-height: 54px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.HostInfo {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.HostMessage {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 23px);
  font-weight: 700;
  color: var(--QzInkSoft);
}
.HostMessage.IsGood { color: var(--MintDeep); }
.HostMessage.IsBad { color: var(--QzWrongInk); }

/* Auto-advance progress after a correct answer */
.AutoNext {
  width: min(320px, 100%);
  height: 6px;
  overflow: hidden;
  border-radius: var(--RadiusPill);
  background: rgba(44, 142, 106, 0.14);
  opacity: 0;
  transition: opacity .25s ease;
}
.AutoNext.IsRunning { opacity: 1; }
.AutoNextFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--MintDark), var(--QzMintBright));
}
.AutoNext.IsRunning .AutoNextFill { animation: AutoFill var(--AutoMs, 3000ms) linear forwards; }

.HostActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Ladder panel
   -------------------------------------------------------------------------- */
.LadderPanel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 16px);
  padding: clamp(12px, 1.6vh, 20px) clamp(10px, 1vw, 16px);
  border: 2px solid var(--QzLine);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 50px var(--QzShadow);
}
.Lifelines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-bottom: clamp(8px, 1.2vh, 14px);
  border-bottom: 1px solid var(--QzLine);
}
.Lifeline {
  position: relative;
  height: clamp(42px, 6vh, 64px);
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 28%, #8fe0c3 0%, var(--MintDark) 58%, var(--MintDeep) 100%);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(44, 142, 106, 0.35), 0 0 0 1.5px rgba(44, 142, 106, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform .2s, box-shadow .2s, opacity .3s, filter .2s;
}
.Lifeline svg { width: clamp(20px, 2.8vh, 30px); height: clamp(20px, 2.8vh, 30px); }
.Lifeline:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 22px rgba(44, 142, 106, 0.45), 0 0 0 1.5px rgba(44, 142, 106, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.Lifeline:focus-visible { outline: 3px solid var(--QzGoldDeep); outline-offset: 2px; }
/* Not usable right now (e.g. during the lock-in) but still available: no "blocked" cursor */
.Lifeline[aria-disabled="true"] { cursor: default; }
.LifelineFifty {
  font-size: clamp(13px, 1.8vh, 20px);
  font-weight: 900;
  letter-spacing: -0.02em;
}
/* Spent for good: the only state that shows the "blocked" cursor */
.Lifeline.IsUsed { opacity: 0.4; filter: grayscale(0.8); cursor: not-allowed; }
.Lifeline.IsUsed.IsReopenable { opacity: 0.85; filter: none; cursor: pointer; }
.Lifeline.IsUsed::before,
.Lifeline.IsUsed::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 50%;
  height: 3px;
  border-radius: 3px;
  background: var(--QzWrong);
}
.Lifeline.IsUsed::before { transform: rotate(32deg); }
.Lifeline.IsUsed::after { transform: rotate(-32deg); }

.Ladder {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.Rung {
  --N: 12px;
  flex: 1 1 0;
  min-height: 0;
  max-height: 48px;
  display: grid;
  grid-template-columns: 2.4ch 1.1em 1fr;
  align-items: center;
  gap: 6px;
  padding: 0 calc(var(--N) + 4px);
  color: var(--MintDark);
  font-size: clamp(12px, min(1.15vw, 2.15vh), 22px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background .3s ease, color .3s ease, transform .4s var(--EaseOut);
}
.RungLevel { text-align: right; opacity: .8; }
.RungMark { text-align: center; font-size: .75em; opacity: 0; transition: opacity .3s; }
.RungAmount { text-align: right; white-space: nowrap; }
.Rung.IsMilestone { color: var(--QzInk); font-weight: 900; }
.Rung.IsTop { color: var(--QzGoldText); }
.Rung.IsTop .RungAmount { font-size: 1.08em; }
.Rung.IsPassed .RungMark { opacity: 1; }
.Rung.IsCurrent,
.Rung.IsFallMarker,
.Rung.IsLanded {
  clip-path: polygon(var(--N) 0, calc(100% - var(--N)) 0, 100% 50%, calc(100% - var(--N)) 100%, var(--N) 100%, 0 50%);
}
.Rung.IsCurrent {
  background: linear-gradient(180deg, var(--QzMintBright) 0%, var(--MintDark) 50%, #8fe0c3 100%);
  color: var(--QzOnMint);
  transform: scale(1.03);
}
.Rung.IsCurrent .RungMark,
.Rung.IsCurrent .RungLevel { opacity: 1; }
.Rung.IsJustWon { animation: RungWin .9s var(--EaseOut); }
.Rung.IsCurrent.IsLost,
.Rung.IsFallMarker {
  background: linear-gradient(180deg, #f39297, var(--QzWrong) 50%, #ee7f85);
  color: #ffffff;
}
.Rung.IsLanded {
  background: linear-gradient(180deg, #ffe08a, var(--QzGoldDeep) 50%, #ffd166);
  animation: Landed .7s var(--EaseOut) 2;
}
.Rung.IsLanded,
.Rung.IsLanded .RungLevel,
.Rung.IsLanded .RungAmount { color: var(--QzOnGold); opacity: 1; }

.LadderLegend {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--QzMuted);
}
.LegendMilestone {
  display: inline-block;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--QzInk);
}

/* --------------------------------------------------------------------------
   End screen (win / walk away / wrong answer)
   -------------------------------------------------------------------------- */
.EndScreen {
  place-items: center;
  padding: 0 var(--Gutter) clamp(16px, 3vh, 40px);
  overflow-y: auto;
}
.EndKicker {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--MintDark);
}
.EndTitle {
  margin: 0;
  font-size: clamp(30px, 5vh, 58px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--QzInk);
}
.EndAmountLabel {
  margin: 0 0 -8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--QzMuted);
}
.EndAmountLabel:empty { display: none; }
.EndAmount {
  margin: 0;
  font-size: clamp(46px, 8.5vh, 100px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--QzGoldDeep) 15%, var(--QzGoldText) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.EndDetail {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.9vh, 19px);
  color: var(--QzInkSoft);
  line-height: 1.45;
}
.EndActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

/* Wrong answer: two columns — result on the left, a learning review on the right */
.EndCard[data-result="Lose"] {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  border-color: rgba(217, 84, 91, 0.35);
  box-shadow: 0 30px 70px var(--QzShadow), inset 0 0 60px rgba(229, 100, 107, 0.06);
}
.EndCard[data-result="Lose"] .EndKicker { color: var(--QzWrongInk); }
.EndCard[data-result="Lose"] .MedallionRing {
  background: conic-gradient(from 0deg, #ffe3e4, var(--QzWrong), #ffffff, #a8343b, #f5a3a8, var(--QzWrong), #ffe3e4);
  box-shadow: 0 14px 40px rgba(217, 84, 91, 0.3);
  animation: none;
}
.EndCard[data-result="Lose"] .MedallionMark { filter: grayscale(1) opacity(0.6); }

.Review {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 16px);
  padding: clamp(16px, 2.4vh, 26px) clamp(16px, 1.8vw, 28px);
  text-align: left;
  border: 1.5px solid var(--QzLine);
  border-radius: 22px;
  background: #f8fcfa;
  animation: ReviewIn .7s var(--EaseOut) .25s both;
}
.ReviewLabel {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--QzMuted);
}
.ReviewQuestion {
  margin: -4px 0 4px;
  font-size: clamp(18px, 1.7vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--QzInk);
}
/* One shared label column so both answer bars line up */
.ReviewAnswers {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
}
.ReviewRow { display: contents; }
.ReviewTag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ReviewRowWrong .ReviewTag { color: var(--QzWrongInk); }
.ReviewRowRight .ReviewTag { color: var(--MintDeep); }
.ReviewShape {
  --N: 16px;
  gap: 0.5em;
  min-height: clamp(44px, 6.4vh, 64px);
  padding: 6px calc(var(--N) + 12px);
  font-size: clamp(16px, 1.35vw, 24px);
  font-weight: 800;
}
.ReviewRowWrong .ReviewShape {
  --Rim: linear-gradient(180deg, #ffe3e4, var(--QzWrongInk) 50%, #ffe3e4);
  --Fill: linear-gradient(180deg, #f39297 0%, #e0646b 48%, #d9545b 52%, #ee7f85 100%);
  color: #ffffff;
}
.ReviewRowRight .ReviewShape {
  --Rim: linear-gradient(180deg, #d8f3e8, var(--MintDeep) 50%, #d8f3e8);
  --Fill: linear-gradient(180deg, #a6f0d2 0%, #5fcca2 48%, #4cbf93 52%, #96e8c6 100%);
  color: var(--QzOnMint);
}
.ReviewLetter { flex: none; opacity: .85; }
.ReviewTip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
  padding: 14px 16px;
  border: 1.5px dashed var(--QzLineStrong);
  border-radius: 16px;
  background: var(--MintWash);
}
.ReviewTipMark {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--QzLine);
}
.ReviewTipText {
  margin: 4px 0 0;
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--QzInk);
}

/* --------------------------------------------------------------------------
   Overlays
   -------------------------------------------------------------------------- */
.Overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(34, 49, 43, 0.4);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.Overlay.IsOpen {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}
.OverlayCard {
  width: min(720px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: clamp(20px, 3.4vh, 38px);
  text-align: center;
  background: var(--QzSurface);
  border: 2px solid var(--QzLine);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(20, 50, 40, 0.25);
  transform: translateY(16px) scale(0.96);
  transition: transform .3s var(--EaseOut);
}
.Overlay.IsOpen .OverlayCard { transform: none; }
.OverlayCardNarrow { width: min(540px, 100%); }
.OverlayTitle {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--QzMintInk);
}
.OverlayText {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 19px);
  color: var(--QzInkSoft);
}
.OverlayActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(16px, 2.6vh, 26px);
}

/* Ask the Class */
.VoteBars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 28px);
  margin-top: clamp(16px, 2.6vh, 26px);
}
.VoteCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity .3s;
}
.VoteCol.IsDisabled { opacity: 0.25; pointer-events: none; }
.VotePct {
  font-size: clamp(17px, 1.7vw, 28px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--QzInk);
}
.VoteTrack {
  width: 100%;
  max-width: 90px;
  height: clamp(130px, 28vh, 270px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1.5px solid var(--QzLine);
  border-radius: 10px;
  background: var(--QzWash);
}
.VoteFill {
  width: 100%;
  height: 0;
  background: linear-gradient(0deg, var(--MintDeep), var(--QzMintBright));
  transition: height .7s var(--EaseOut);
}
.VoteLetter {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 900;
  color: var(--MintDark);
}
.VoteStepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.VoteStep {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--QzLine);
  border-radius: 50%;
  background: var(--QzSurface);
  color: var(--QzMintInk);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.VoteStep:hover { border-color: var(--QzLineStrong); background: var(--QzWash); }
.VoteCount {
  min-width: 2.2ch;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--QzInk);
}

/* Ask a Friend */
.Countdown {
  --P: 1;
  position: relative;
  width: clamp(120px, 20vh, 170px);
  aspect-ratio: 1;
  margin: clamp(16px, 2.6vh, 26px) auto 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--MintDark) calc(var(--P) * 360deg), #e3efe9 0);
  box-shadow: 0 10px 30px rgba(74, 175, 137, 0.25);
}
.Countdown::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffffff, #f1f8f5 75%);
}
.Countdown.IsDone { background: conic-gradient(var(--QzWrong) 360deg, transparent 0); box-shadow: 0 10px 30px rgba(217, 84, 91, 0.25); }
.CountdownValue {
  position: relative;
  font-size: clamp(34px, 6vh, 56px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--QzInk);
}
.Countdown.IsDone .CountdownValue { font-size: clamp(16px, 2.4vh, 22px); color: var(--QzWrongInk); }
.FriendTip {
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  padding: 16px 20px;
  border: 1.5px dashed var(--QzLineStrong);
  border-radius: 16px;
  background: var(--MintWash);
  font-size: clamp(18px, 1.7vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--QzInk);
}

/* Confetti — above the backdrop, behind the result card */
.Confetti {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ConfettiPiece {
  position: absolute;
  top: -4vh;
  left: var(--X);
  width: var(--W, 10px);
  height: var(--H, 16px);
  border-radius: 2px;
  background: var(--C);
  animation: ConfettiFall var(--D) linear var(--Delay) forwards;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes ScreenIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes RaysSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes Spin {
  to { transform: rotate(360deg); }
}
@keyframes BeamSweepLeft {
  from { transform: rotate(-26deg); }
  to { transform: rotate(-6deg); }
}
@keyframes BeamSweepRight {
  from { transform: rotate(24deg); }
  to { transform: rotate(5deg); }
}
@keyframes QuestionIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes LockedGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(240, 169, 46, 0.45)); }
  50% { filter: drop-shadow(0 0 22px rgba(240, 169, 46, 0.85)); }
}
@keyframes CorrectFlash {
  from { filter: drop-shadow(0 0 10px rgba(74, 175, 137, 0.45)) brightness(1); }
  to { filter: drop-shadow(0 0 26px rgba(74, 175, 137, 0.85)) brightness(1.1); }
}
@keyframes WrongShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
@keyframes RungWin {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1.03); }
}
@keyframes Landed {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.1); }
}
@keyframes AutoFill {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes ReviewIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes StageFlash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ConfettiFall {
  to { transform: translate3d(var(--Drift), 112vh, 0) rotate(var(--R)); }
}

/* --------------------------------------------------------------------------
   Smaller screens (the stage targets projectors; this keeps it usable)
   -------------------------------------------------------------------------- */
@media (max-height: 640px) {
  .StageEmblem { display: none; }
}
@media (max-width: 900px) {
  .MillionQuizPage { overflow: auto; }
  .Stage { height: auto; min-height: 100dvh; overflow: visible; }
  .StageEmblem { display: none; }
  .GameScreen { grid-template-columns: 1fr; }
  .QuestionWrap::before, .AnswerRow::before { right: calc(-1 * var(--Gutter)); }
  .Ladder {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .Rung { padding: 6px 14px; font-size: 13px; grid-template-columns: 2.4ch 1em 1fr; }
  .Rung.IsCurrent { transform: none; }
  .LadderLegend { display: none; }
  .EndCard[data-result="Lose"] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .StageHeader { grid-template-columns: auto 1fr; }
  .StageTitle { display: none; }
  .BackBtn { padding: 8px; }
  .BackBtnLabel { display: none; }
  .AnswerRow { grid-template-columns: 1fr; }
  .AnswerRow::before { display: none; }
  .HostActions { width: 100%; }
  .HostActions .StageBtn { flex: 1; }
  .Ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .VoteStep { width: 28px; height: 28px; font-size: 15px; }
  .ReviewAnswers { grid-template-columns: 1fr; gap: 4px; }
  .ReviewRowRight .ReviewTag { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .Rays, .Beam, .MedallionRing, .WordmarkMain, .Answer.IsLocked, .Answer.IsCorrect, .Rung.IsLanded { animation: none; }
  .ConfettiPiece { display: none; }
}