:root {
  color-scheme: dark;
  --bg: #080c23;
  --bg-raised: #0d1330;
  --surface: #131b40;
  --surface-raised: #19234d;
  --gold: #f5c451;
  --gold-light: #ffe19a;
  --text: #f5f6ff;
  --muted: #a7b0d5;
  --quiet: #7f89b4;
  --line: #303967;
  --green: #5bdaa7;
  --red: #ff7888;
  --font: 'Manrope', sans-serif;
  --display: 'Unbounded', sans-serif;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 78% 25%, rgba(46, 57, 133, .23), transparent 38%), radial-gradient(ellipse at 12% 73%, rgba(20, 60, 117, .16), transparent 39%), var(--bg); color: var(--text); font: 500 14px/1.5 var(--font); }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.app-shell { width: min(1280px, calc(100% - 64px)); min-height: 100vh; min-height: 100svh; margin: auto; display: flex; flex-direction: column; }
.topbar { position: relative; z-index: 2; min-height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(120, 137, 203, .18); }
.icon-button, .profile { border: 0; background: transparent; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(151, 165, 229, .22); border-radius: 50%; color: var(--muted); transition: border-color .2s, color .2s, background .2s; }
.icon-button:hover, .profile:hover { color: var(--gold-light); }
.icon-button:hover { border-color: rgba(245, 196, 81, .55); background: rgba(245, 196, 81, .06); }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.brand { display: flex; align-items: center; gap: 10px; color: #eef0ff; font: 600 12px/1 var(--display); letter-spacing: .1em; white-space: nowrap; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 600 15px var(--display); box-shadow: inset 0 0 12px rgba(245, 196, 81, .09), 0 0 18px rgba(245, 196, 81, .06); }
.brand-dot { color: var(--gold); }
.profile { justify-self: end; min-width: 0; max-width: 220px; display: flex; align-items: center; gap: 9px; padding: 5px 0 5px 8px; color: #dce0fa; font-size: 12px; font-weight: 700; }
.avatar { flex: 0 0 33px; width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(220, 202, 255, .55); border-radius: 50%; background: linear-gradient(145deg, #8f78dc, #5646a8); color: white; font-size: 12px; font-weight: 800; }
.profile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { flex: 0 0 14px; width: 14px; fill: none; stroke: var(--quiet); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
main { flex: 1; display: flex; flex-direction: column; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.live-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(245, 196, 81, .65); }
h1, h2, h3, p { margin-top: 0; }
.intro { flex: 1; width: min(100%, 1040px); align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); align-items: center; gap: 38px; padding: 22px 20px 38px; }
.intro-copy { position: relative; z-index: 1; max-width: 540px; }
.intro h1 { margin: 22px 0 17px; font: 600 clamp(32px, 4vw, 54px)/1.2 var(--display); letter-spacing: -.055em; }
.intro h1 span { color: var(--gold-light); }
.intro-copy > p { max-width: 430px; margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.intro-note { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; color: #c3c9e5; font-size: 11px; }
.intro-note i { width: 3px; height: 3px; border-radius: 50%; background: var(--quiet); }
.note-star { position: relative; width: 12px; height: 12px; }
.note-star::before { content: ''; position: absolute; inset: 2px; transform: rotate(45deg); background: var(--gold); }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.primary-button { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 12px 16px 12px 20px; border: 1px solid #ffe19a; border-radius: 9px; background: linear-gradient(112deg, #ffe19a, #f5c451 76%); color: #16172f; font-weight: 800; box-shadow: 0 9px 28px rgba(245, 196, 81, .13), inset 0 1px rgba(255,255,255,.38); transition: transform .2s, box-shadow .2s, filter .2s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 13px 34px rgba(245, 196, 81, .24); filter: saturate(1.06); }
.primary-button:active { transform: translateY(0) scale(.99); }
.button-arrow, .link-arrow { position: relative; width: 17px; height: 17px; flex: 0 0 17px; }
.button-arrow::before, .link-arrow::before { content: ''; position: absolute; width: 8px; height: 8px; right: 2px; top: 2px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; }
.button-arrow::after, .link-arrow::after { content: ''; position: absolute; width: 12px; height: 1.8px; right: 2px; top: 8px; background: currentColor; transform: rotate(-45deg); transform-origin: right; }
.music-toggle { min-height: 42px; padding: 8px 13px; border: 1px solid rgba(245,196,81,.32); border-radius: 8px; background: rgba(245,196,81,.055); color: var(--gold-light); font-size: 11px; font-weight: 700; }
.music-toggle[aria-pressed="false"] { border-color: var(--line); color: var(--quiet); background: transparent; }
.leaderboard-link { width: min(245px, 100%); min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 13px; padding: 10px 14px; border: 1px solid rgba(132, 150, 216, .24); border-radius: 8px; background: rgba(19, 27, 64, .68); color: #dce0f7; font-size: 12px; font-weight: 700; text-align: left; transition: border-color .2s, color .2s, background .2s; }
.leaderboard-link:hover { border-color: rgba(245, 196, 81, .56); color: var(--gold-light); background: var(--surface); }
.leaderboard-link .link-arrow { color: var(--gold); transform: scale(.75); }
.stage-art { position: relative; min-height: min(62vh, 560px); display: grid; place-items: center; overflow: hidden; }
.stage-glow { position: absolute; width: min(460px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(79, 96, 188, .25), rgba(52, 50, 130, .10) 43%, transparent 70%); }
.orbit { position: absolute; border: 1px solid rgba(136, 148, 222, .13); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: min(460px, 95%); height: 190px; }
.orbit-two { width: 340px; height: min(495px, 92%); transform: rotate(48deg); }
.prize-orb { position: relative; z-index: 1; width: clamp(210px, 23vw, 276px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 225, 154, .76); border-radius: 50%; background: radial-gradient(circle at 50% 36%, #303878 0, #191e50 56%, #111633 80%); box-shadow: 0 0 0 8px rgba(255, 221, 158, .035), 0 0 0 23px rgba(148, 151, 230, .025), inset 0 0 48px rgba(100, 119, 255, .16), 0 0 76px rgba(71, 82, 180, .24); }
.prize-orb::before, .prize-orb::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(244, 205, 133, .2); border-radius: 50%; }
.prize-orb::after { inset: 23px; border-style: dashed; border-color: rgba(205, 212, 255, .13); }
.orb-small { color: #c4cae8; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.prize-orb strong { margin-top: 12px; color: #fff0c5; font: 600 clamp(19px, 2vw, 25px) var(--display); letter-spacing: -.07em; text-shadow: 0 0 20px rgba(255, 211, 132, .28); }
.orb-currency { margin-top: 2px; color: var(--gold); font: 600 17px var(--display); }
.prize-orb i { position: absolute; top: 24px; right: 39px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%); }
.stage-pedestal { position: absolute; bottom: 76px; width: 310px; height: 92px; border: 1px solid rgba(135, 149, 222, .16); border-radius: 50%; background: radial-gradient(ellipse, rgba(68, 84, 178, .19), rgba(44, 49, 119, .08) 50%, transparent 72%); transform: perspective(200px) rotateX(52deg); }
.spark { position: absolute; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%); }
.spark-a { top: 19%; left: 15%; }
.spark-b { top: 30%; right: 12%; width: 17px; height: 17px; background: #aab8ff; }
.spark-c { bottom: 29%; right: 17%; width: 8px; height: 8px; }
.art-caption { position: absolute; bottom: 17px; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.art-caption span { margin-right: 6px; color: var(--gold); font-weight: 800; }
.footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(120, 137, 203, .18); color: var(--quiet); font-size: 10px; }
.footer > span:first-child { color: #bdc4e5; font: 600 9px var(--display); letter-spacing: .12em; }
.footer-version { letter-spacing: .13em; }
.hidden { display: none !important; }

/* Game composition */
.game-screen { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 228px; align-items: center; gap: clamp(22px, 4vw, 55px); width: min(100%, 1140px); align-self: center; padding: 34px 20px 38px; }
.game-main { min-width: 0; width: 100%; max-width: 760px; justify-self: center; }
.game-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.game-heading h2 { margin: 9px 0 0; font: 600 clamp(19px, 2.3vw, 27px)/1.3 var(--display); letter-spacing: -.04em; }
.heading-total { color: var(--quiet); }
.quit-button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid rgba(132, 150, 216, .25); border-radius: 8px; background: rgba(19, 27, 64, .52); color: var(--muted); font-size: 11px; transition: border-color .2s, color .2s; }
.quit-button:hover { border-color: rgba(245, 196, 81, .5); color: var(--gold-light); }
.quit-button span { padding-left: 10px; color: #d9def5; font-size: 16px; }
.question-progress { height: 3px; margin-top: 18px; overflow: hidden; border-radius: 9px; background: rgba(91, 106, 166, .24); }
.question-progress span { display: block; width: 6.6667%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d6a43c, var(--gold-light)); box-shadow: 0 0 12px rgba(245, 196, 81, .3); transition: width .35s ease; }
.lifelines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 17px; }
.lifeline { min-width: 0; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(132, 150, 216, .24); border-radius: 9px; background: linear-gradient(130deg, rgba(25, 35, 77, .82), rgba(16, 24, 57, .82)); color: #d4daf4; font-size: 11px; font-weight: 700; transition: transform .18s, border-color .18s, background .18s, color .18s, opacity .18s; }
.life-icon { flex: 0 0 32px; width: 32px; height: 32px; fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.life-icon text { fill: var(--gold-light); stroke: none; font: 700 8px var(--font); text-anchor: middle; }
.lifeline:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(245, 196, 81, .63); background: rgba(36, 45, 91, .94); color: var(--gold-light); }
.lifeline:active:not(:disabled) { transform: scale(.98); }
.lifeline:disabled, .lifeline.used { border-color: rgba(112, 125, 174, .14); background: #0d1330; color: #697393; opacity: .48; filter: saturate(.45); box-shadow: none; cursor: default; }
.lifeline:disabled .life-icon, .lifeline.used .life-icon { stroke: #6d7697; opacity: .5; }
.question-card { position: relative; min-height: 176px; display: flex; flex-direction: column; justify-content: center; padding: clamp(23px, 3.4vw, 38px) clamp(22px, 4vw, 42px); overflow: hidden; border: 1px solid rgba(144, 158, 225, .27); border-radius: 15px; background: radial-gradient(ellipse at 84% 0%, rgba(74, 88, 171, .18), transparent 43%), linear-gradient(130deg, rgba(25, 35, 77, .97), rgba(15, 23, 57, .98)); box-shadow: 0 18px 48px rgba(1, 4, 20, .24), inset 0 1px rgba(255,255,255,.025); animation: card-arrive .42s ease both; }
.question-card::before { content: ''; position: absolute; left: 0; top: 13%; bottom: 13%; width: 2px; background: linear-gradient(transparent, var(--gold), transparent); box-shadow: 0 0 13px rgba(245, 196, 81, .45); }
.question-category { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.question-card h3 { max-width: 650px; margin: 11px 0 0; color: var(--text); font-size: clamp(18px, 2.1vw, 23px); font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.answer { min-width: 0; min-height: 62px; display: flex; align-items: center; gap: 13px; padding: 12px 16px; border: 1px solid rgba(132, 150, 216, .24); border-radius: 10px; background: linear-gradient(112deg, rgba(19, 27, 64, .96), rgba(15, 23, 56, .93)); color: #e0e4f9; font-size: 13px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; transition: transform .17s ease, border-color .17s ease, background .17s ease, box-shadow .17s ease, opacity .17s ease; -webkit-tap-highlight-color: transparent; }
.answer-key { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(245, 196, 81, .35); border-radius: 50%; color: var(--gold-light); font: 600 11px var(--display); }
.answer:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(245, 196, 81, .7); background: linear-gradient(112deg, rgba(31, 42, 88, .98), rgba(21, 31, 71, .97)); }
.answer:focus-visible, .lifeline:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.answer:active:not(:disabled) { transform: scale(.99); }
.answer.selected { border-color: var(--gold); background: rgba(130, 91, 27, .22); box-shadow: 0 0 0 1px rgba(245,196,81,.15), 0 0 22px rgba(245,196,81,.08); }
.answer.selected .answer-key { border-color: var(--gold); background: rgba(245,196,81,.13); }
.answer.correct { border-color: var(--green); background: rgba(27, 105, 78, .35); box-shadow: 0 0 26px rgba(91, 218, 167, .13); }
.answer.correct .answer-key { border-color: var(--green); color: #b9ffe0; background: rgba(91,218,167,.12); }
.answer.wrong { border-color: var(--red); background: rgba(125, 37, 67, .32); box-shadow: 0 0 20px rgba(255, 120, 136, .08); }
.answer.wrong .answer-key { border-color: var(--red); color: #ffd1d8; background: rgba(255,120,136,.12); }
.answer.faded { opacity: .3; filter: saturate(.55); }
.answer:disabled { cursor: default; }
@media (hover: none), (pointer: coarse) {
  .lifeline:hover:not(:disabled) { transform: none; border-color: rgba(132, 150, 216, .24); background: linear-gradient(130deg, rgba(25, 35, 77, .82), rgba(16, 24, 57, .82)); color: #d4daf4; }
  .answer:hover:not(:disabled) { transform: none; border-color: rgba(132, 150, 216, .24); background: linear-gradient(112deg, rgba(19, 27, 64, .96), rgba(15, 23, 56, .93)); }
}
.game-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.prize-now, .safe-now { display: flex; align-items: center; gap: 8px; }
.prize-now > span { color: var(--quiet); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.prize-now b { color: var(--gold-light); font: 600 13px var(--display); }
.safe-now { color: var(--muted); font-size: 10px; }
.safe-now b { color: var(--text); font-weight: 700; }
.safe-icon { width: 8px; height: 8px; flex: 0 0 8px; transform: rotate(45deg); background: var(--gold); }
.ladder-panel { align-self: center; min-width: 0; padding-left: 22px; border-left: 1px solid rgba(120, 137, 203, .2); }
.ladder-title { margin-bottom: 12px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.ladder-title span { color: var(--gold); }
.prize-ladder { display: flex; flex-direction: column-reverse; gap: 1px; margin: 0; padding: 0; list-style: none; }
.prize-step { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; color: #8993bd; font-size: 10px; transition: background .25s, color .25s, border-color .25s; }
.step-num { width: 23px; flex: 0 0 23px; color: #747fa9; font-size: 9px; }
.step-amount { font-weight: 700; text-align: right; }
.prize-step.completed { color: #b6c4e1; }
.prize-step.completed .step-num { color: #8f9dbc; }
.prize-step.safe .step-num, .prize-step.safe .step-amount { color: var(--gold); }
.prize-step.current { border-color: rgba(245, 196, 81, .48); background: linear-gradient(100deg, rgba(245,196,81,.12), rgba(245,196,81,.04)); color: var(--gold-light); }
.prize-step.current .step-num, .prize-step.current .step-amount { color: var(--gold-light); }

/* Results, dialogs, and hint content */
.result-screen { flex: 1; min-height: min(670px, calc(100svh - 132px)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px 20px; text-align: center; animation: card-arrive .4s ease both; }
.result-medal { width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(245,196,81,.64); border-radius: 50%; background: radial-gradient(circle, rgba(54,57,126,.84), rgba(19,24,62,.9)); box-shadow: 0 0 38px rgba(245,196,81,.12); }
.result-medal::before { content: ''; width: 20px; height: 20px; background: var(--gold); clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%); }
.result-screen > .eyebrow { justify-content: center; }
.result-screen h2 { max-width: 760px; margin: 13px 0 10px; font: 600 clamp(25px, 4vw, 43px)/1.25 var(--display); letter-spacing: -.04em; }
.result-screen > p { max-width: 500px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.result-prize { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 25px; }
.result-prize span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.result-prize strong { color: var(--gold-light); font: 600 30px var(--display); }
.result-menu-button { justify-content: center; width: min(280px, 100%); margin: 10px auto 0; text-align: center; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: rgba(4, 6, 22, .79); backdrop-filter: blur(9px); }
.modal-card { position: relative; width: min(460px, 100%); max-height: min(88svh, 760px); overflow: auto; padding: 36px; border: 1px solid rgba(144,158,225,.27); border-radius: 16px; background: radial-gradient(ellipse at top, rgba(52,59,137,.33), transparent 58%), var(--bg-raised); box-shadow: 0 25px 90px rgba(0,0,0,.42); text-align: center; }
.modal-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); font-size: 21px; }
.modal-close:hover { border-color: var(--line); color: var(--text); }
.modal-symbol { width: 38px; height: 38px; margin: 0 auto 13px; border: 1px solid rgba(245,196,81,.44); border-radius: 50%; background: radial-gradient(circle, rgba(245,196,81,.14), transparent); }
.modal-card > .eyebrow { justify-content: center; }
.modal-card h2 { margin: 12px 0; font: 600 20px/1.4 var(--display); }
.modal-content { margin: 18px 0; color: #c4cbe7; font-size: 13px; line-height: 1.7; }
.modal-content b { color: var(--gold-light); }
.modal-action { margin: 0 auto; }
.poll { display: grid; gap: 11px; text-align: left; }
.poll-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 40px; align-items: center; gap: 9px; font-size: 11px; }
.poll-row > span { color: var(--gold-light); font: 600 11px var(--display); }
.poll-row > b { color: var(--text); text-align: right; }
.poll-track { height: 7px; overflow: hidden; border-radius: 99px; background: #252e59; }
.poll-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8c83e7, var(--gold)); }
.ranking-list { display: grid; max-height: 55vh; gap: 7px; overflow: auto; text-align: left; }
.ranking-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid rgba(132,150,216,.2); border-radius: 8px; background: rgba(19,27,64,.6); font-size: 11px; }
.ranking-place { color: var(--gold); font-weight: 800; }
.ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-score { color: var(--gold-light); font-weight: 800; }
.toast { position: fixed; z-index: 12; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); padding: 11px 16px; transform: translate(-50%, 16px); border: 1px solid rgba(132,150,216,.28); border-radius: 9px; background: #19234d; color: var(--text); font-size: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.poll-fill { transition: width .4s ease; }

@keyframes card-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1100px) and (min-height: 780px) { .game-screen { padding-top: 46px; padding-bottom: 48px; } .question-card { min-height: 196px; } .answer { min-height: 68px; } }
@media (max-width: 900px) {
  .app-shell { width: min(100% - 40px, 720px); }
  .intro { grid-template-columns: 1fr; gap: 0; padding: 4px 18px 24px; }
  .stage-art { grid-row: 1; width: 100%; min-height: 320px; }
  .intro-copy { width: min(100%, 600px); justify-self: center; text-align: center; }
  .intro-copy > .eyebrow { justify-content: center; }
  .intro-copy > p { margin-left: auto; margin-right: auto; }
  .intro-note, .intro-actions { justify-content: center; }
  .intro-copy .leaderboard-link { margin-left: auto; margin-right: auto; }
  .stage-pedestal { bottom: 40px; }
  .art-caption { bottom: 5px; }
  .game-screen { grid-template-columns: 1fr; gap: 22px; padding: 28px 0 32px; }
  .game-main { max-width: none; }
  .ladder-panel { border: 0; border-top: 1px solid rgba(120,137,203,.2); padding: 16px 0 0; }
  .prize-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 6px; }
  .prize-step { min-width: 0; min-height: 29px; padding: 3px 5px; font-size: 9px; }
}
@media (max-width: 560px) {
  .app-shell { width: calc(100% - 28px); }
  .topbar { min-height: 63px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .icon-button { width: 34px; height: 34px; }
  .brand { gap: 7px; font-size: 9px; letter-spacing: .08em; }
  .brand-mark { width: 25px; height: 25px; font-size: 12px; }
  .profile { max-width: 125px; gap: 6px; font-size: 10px; }
  .avatar { flex-basis: 29px; width: 29px; height: 29px; }
  .intro { padding: 0 5px 22px; }
  .stage-art { min-height: clamp(250px, 68vw, 330px); }
  .prize-orb { width: clamp(160px, 48vw, 195px); }
  .prize-orb strong { font-size: clamp(17px, 5vw, 21px); }
  .orb-small { font-size: 7px; }
  .orbit-two { width: 270px; height: 300px; }
  .orbit-one { width: min(340px, 96%); height: 150px; }
  .stage-pedestal { bottom: 35px; width: 260px; }
  .intro h1 { margin: 14px 0 12px; font-size: clamp(28px, 8vw, 38px); }
  .intro-copy > p { margin-bottom: 17px; font-size: 13px; line-height: 1.65; }
  .intro-note { flex-wrap: wrap; margin-bottom: 18px; font-size: 10px; }
  .primary-button { min-height: 48px; }
  .footer { min-height: 50px; font-size: 8px; }
  .footer > span:nth-child(2) { text-align: center; }
  .footer-version { font-size: 7px; }
  .game-screen { gap: 18px; padding: 21px 0 26px; }
  .game-heading { align-items: flex-start; }
  .game-heading h2 { margin-top: 7px; font-size: 18px; }
  .game-heading .eyebrow { gap: 6px; font-size: 8px; }
  .quit-button { min-height: 36px; padding: 7px 9px; font-size: 10px; }
  .quit-button span { padding-left: 6px; }
  .question-progress { margin-top: 14px; }
  .lifelines { gap: 6px; margin: 16px 0 13px; }
  .lifeline { min-height: 57px; flex-direction: column; gap: 2px; padding: 5px 3px; font-size: 9px; line-height: 1.25; }
  .life-icon { width: 29px; height: 29px; flex-basis: 29px; }
  .question-card { min-height: 150px; padding: 21px 20px; border-radius: 12px; }
  .question-category { font-size: 9px; }
  .question-card h3 { margin-top: 9px; font-size: 17px; line-height: 1.5; }
  .answers { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .answer { min-height: 54px; gap: 11px; padding: 10px 12px; font-size: 12px; }
  .answer-key { flex-basis: 25px; width: 25px; height: 25px; }
  .game-foot { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 13px; }
  .ladder-title { margin-bottom: 8px; font-size: 8px; }
  .prize-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 5px; }
  .prize-step { min-height: 29px; padding: 2px 4px; font-size: 9px; }
  .step-num { width: 19px; flex-basis: 19px; font-size: 9px; }
  .result-screen { min-height: calc(100svh - 113px); padding: 32px 10px; }
  .result-screen > p { font-size: 13px; }
  .result-medal { width: 66px; height: 66px; margin-bottom: 18px; }
  .result-prize { margin: 20px 0; }
  .result-prize strong { font-size: 26px; }
  .modal-card { padding: 32px 20px 24px; }
}
@media (max-width: 360px) {
  .app-shell { width: calc(100% - 22px); }
  .profile { max-width: 100px; }
  .brand { font-size: 8px; }
  .brand-mark { width: 23px; height: 23px; }
  .lifeline { font-size: 8px; }
  .lifelines { gap: 4px; }
  .game-heading .eyebrow { letter-spacing: .11em; }
  .prize-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prize-step { font-size: 9px; }
  .step-num { width: 18px; flex-basis: 18px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}