/* Round and result views share the same quiet typography and controls. */
.ready-screen, .pause-screen, .countdown-screen { min-height: 100dvh; padding: max(16px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); }
.play-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; font-size: 13px; }
.play-topbar > span { min-width: 0; }
.ready-screen .play-topbar { max-width: 1000px; margin: auto; color: var(--muted); }
.ready-content { max-width: 410px; margin: 48px auto 0; text-align: center; }
.ready-phone { width: 92px; height: 92px; border-radius: 27px; background: #e4edfc; color: var(--blue); display: grid; place-items: center; margin: 0 auto 28px; }
.ready-phone .icon { width: 44px; height: 44px; stroke-width: 1.3; transform: rotate(-12deg); }
.ready-content h1 { font-size: 34px; }
.ready-direction { color: var(--muted); margin-top: 14px; font-size: 17px; line-height: 1.5; }
.instruction-card { text-align: left; background: white; padding: 20px; border-radius: 18px; margin: 30px 0 24px; }
.ready-facts { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.ready-facts > span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.instruction-card p { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 12px; }
.instruction-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.level-ready-target { margin-top: 20px; font-size: 14px; color: #776321; }
.level-ready-target span { display: block; margin-top: 8px; font-size: 13px; }
.countdown-screen { position: relative; display: grid; place-items: center; background: #152238; color: white; text-align: center; }
.countdown-screen p { font-size: 18px; color: #b4c7e2; }
.countdown-number { font-size: clamp(130px,28vw,250px); line-height: 1.25; font-weight: 650; letter-spacing: -.07em; }
.countdown-cancel { position: absolute; top: 18px; left: 22px; color: #c5d4e8; }
.pause-screen { display: grid; place-items: center; text-align: center; }
.pause-screen > div { width: min(350px,100%); }
.pause-symbol { display: inline-grid; place-items: center; color: var(--blue); background: #e4edfc; width: 72px; height: 72px; border-radius: 22px; margin-bottom: 24px; }
.pause-symbol .icon { width: 30px; height: 30px; }
.pause-screen h1 { font-size: 36px; }
.pause-screen p { font-size: 15px; color: var(--muted); margin-top: 14px; }
.pause-actions { display: grid; gap: 12px; margin-top: 30px; }
.pause-more { margin: 0; text-align: left; }
.pause-more .disclosure-body { display: grid; gap: 10px; }
.play-screen { min-height: 100dvh; display: flex; flex-direction: column; background: #152238; color: #f9fbff; padding: max(14px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); }
.play-screen .play-topbar { font-size: 13px; color: #c9d7ea; }
.play-screen .play-topbar b { color: white; font-weight: 600; }
.play-screen .icon-button { background: #ffffff10; color: #d7e2f3; border: 1px solid #ffffff25; }
.round-rule { color: #b4c7e2; font-size: 12px; }
.time-track { background: #ffffff19; height: 3px; width: 100%; margin-top: 12px; border-radius: 2px; overflow: hidden; }
.time-track > div { height: 100%; background: #9dc9ff; transition: width .1s linear; }
.game-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 16px; gap: 14px; }
.timer { font-size: 64px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.055em; color: #b6d7ff; }
.timer.urgent { color: #ffb6a8; }
.score-pill, .streak-pill { font-size: 13px; color: #afc0d7; }
.score-pill b { font-size: 18px; color: white; font-weight: 600; }
.streak-pill { text-align: right; font-size: 12px; }
.answer-stage { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 38px 0; text-align: center; min-height: 230px; gap: 18px; }
.card-category { color: #9aadc7; font-size: 13px; line-height: 1.4; }
.answer { font-size: clamp(40px,7.5vw,100px); letter-spacing: -.035em; line-height: 1.12; font-weight: 650; max-width: 1050px; overflow-wrap: anywhere; }
.answer-long { font-size: clamp(30px,5vw,70px); }
.photo-prompt { display: block; max-width: min(660px,90%); width: auto; max-height: 35dvh; object-fit: contain; border-radius: 14px; }
.photo-stage { gap: 12px; padding-top: 20px; padding-bottom: 20px; }
.photo-stage .answer { font-size: clamp(26px,4.5vw,46px); }
.forbidden { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 680px; font-size: 16px; margin-top: 8px; }
.forbidden > span { font-size: 12px; color: #c3cde0; margin-right: 6px; }
.forbidden b { border: 1px solid #ffffff35; color: #f6cfcb; border-radius: 8px; font-size: 15px; font-weight: 500; padding: 7px 10px; }
.game-actions { display: flex; justify-content: center; gap: 14px; margin-top: auto; }
.game-actions > button { border: 0; border-radius: 18px; min-height: 78px; flex: 1; max-width: 500px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; color: white; }
.game-actions b { font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.game-actions small { font-size: 12px; }
.pass-button { background: #344257; }
.got-button { background: #148257; }
.pass-button:hover { background: #425269; }
.got-button:hover { background: #179664; }
.game-foot { display: flex; justify-content: center; align-items: center; min-height: 24px; padding-top: 10px; font-size: 10px; color: #99adc8; }
.clue-rotation, .voice-prompt { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #d5e0f0; margin-top: 7px; }
.clue-rotation button, .voice-prompt .text-button { border: 1px solid #ffffff38; background: #ffffff0b; border-radius: 10px; color: #c5ddff; padding: 11px 12px; min-height: 44px; font-size: 13px; }
.clue-rotation button .icon { width: 14px; height: 14px; }
.live-rule-note { max-width: 580px; color: #bfd0e8; font-size: 13px; line-height: 1.6; }
.score-flash { position: fixed; top: 22%; left: 50%; transform: translate(-50%,-8px); padding: 10px 18px; border-radius: 30px; background: #f5fff7; color: #176543; opacity: 0; pointer-events: none; font-size: 15px; font-weight: 600; transition: opacity .15s,transform .15s; }
.score-flash.visible { opacity: 1; transform: translate(-50%,0); }
.score-flash.pass, .score-flash.challenge { background: #edf0f7; color: #435369; }
.recap-page { max-width: 620px; margin: 0 auto; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); background: white; padding: 26px 12px; border-radius: 20px; text-align: center; margin-bottom: 28px; }
.result-stats > div + div { border-left: 1px solid var(--line); }
.result-stats b { display: block; font-size: 48px; font-weight: 600; line-height: 1.1; letter-spacing: -.04em; }
.result-stats > div:first-child b { color: var(--blue); }
.result-stats span { display: block; color: var(--muted); margin-top: 9px; font-size: 12px; }
.reveal-section h2 { font-size: 18px; margin: 0 4px 14px; }
.reveal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.reveal-card { min-height: 92px; background: #e8edf6; border: 0; border-radius: 14px; padding: 16px; text-align: left; }
.reveal-card > span { display: block; color: #6d7c91; font-size: 11px; }
.reveal-card > b { display: block; margin-top: 9px; font-size: 16px; line-height: 1.3; font-weight: 600; color: #476b9a; }
.reveal-card > b .icon { width: 14px; height: 14px; }
.reveal-card small { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.reveal-card.revealed { background: white; box-shadow: inset 0 0 0 1px var(--line); }
.reveal-card.revealed b { color: var(--ink); }
.perfect-note { color: var(--green); font-size: 15px; text-align: center; margin-bottom: 24px; }
.round-details > summary > span { color: var(--muted); font-size: 12px; margin-left: auto; }
.round-details > .footnote { padding: 0 14px; }
.result-list { padding: 0 16px 10px; }
.result-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 14px; }
.result-line + .result-line { border-top: 1px solid var(--line); }
.result-line > span { min-width: 0; line-height: 1.4; }
.result-line select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 5px; background: white; max-width: 45%; color: var(--muted); font-size: 12px; }
.recap-scoreboard { margin: 24px 0; }
.recap-scoreboard h2 { font-size: 18px; margin: 0 4px 14px; display: flex; align-items: center; justify-content: space-between; }
.recap-scoreboard h2 > span { color: var(--blue); }
.score-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.score-row .rank { color: var(--muted); width: 18px; }
.score-row b { flex: 1; font-weight: 600; }
.score-row small { font-size: 12px; color: var(--muted); }
.recap-actions { display: grid; gap: 10px; margin-top: 26px; }
.button.text-only { background: transparent; color: var(--blue); }
progress { appearance: none; border: 0; background: #e2e4ec; width: 100%; height: 8px; border-radius: 10px; overflow: hidden; }
progress::-webkit-progress-bar { background: #e2e4ec; }
progress::-webkit-progress-value { background: var(--blue); }
progress::-moz-progress-bar { background: var(--blue); }
.final-screen { max-width: 560px; margin: 50px auto 0; text-align: center; }
.final-screen h1 { font-size: 36px; margin: 15px 0; }
.final-screen > p { line-height: 1.65; font-size: 15px; }
.final-screen > .eyebrow { font-size: 12px; color: var(--muted); margin-top: 24px; }
.final-screen > .small { font-size: 12px; margin-top: 24px; }
.final-medallion { width: 85px; height: 85px; display: grid; place-items: center; background: #e6edfa; border-radius: 26px; margin: auto; font-size: 38px; }
.final-scoreboard { text-align: left; background: white; border-radius: 16px; margin: 26px 0; }
.final-coop { margin: 26px 0; }
.final-scoreboard .score-row:last-child { border: 0; }
.final-buttons { display: flex; flex-direction: column; gap: 12px; max-width: 370px; margin: 26px auto 0; }
.level-award { font-size: 64px; letter-spacing: 6px; color: #a77c16; }
.room-screen { background: #152238; color: white; min-height: 100dvh; padding: 24px; display: flex; flex-direction: column; }
.room-wait { margin: auto; text-align: center; max-width: 600px; }
.room-wait h1 { font-size: 40px; margin: 26px 0 18px; }
.room-wait p { color: #b8c8dc; line-height: 1.6; margin: 16px 0; }
.room-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #b8c8dc; font-size: 14px; }
.room-top .brand { color: white; }
.room-top .button { min-height: 40px; font-size: 13px; padding: 10px 14px; }
.room-top > div { display: flex; gap: 8px; }
.room-content { margin: auto; padding: 36px 12px; text-align: center; }
.room-content .eyebrow { font-size: 13px; color: #b6c8e0; }
.room-timer { font-size: 78px; color: #b6d7ff; margin: 20px 0; font-weight: 600; }
.room-content h1 { font-size: clamp(36px,7vw,95px); margin: 14px 0; }
.room-content > p { font-size: 16px; color: #b6c8e0; margin-top: 20px; }
.room-photo { max-width: 70vw; max-height: 35dvh; object-fit: contain; border-radius: 14px; }
.room-scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.room-scores > div { min-width: 100px; text-align: center; }
.room-scores span { display: block; color: #b6c8e0; font-size: 13px; }
.room-scores b { display: block; font-size: 34px; margin-top: 8px; }
.room-note { font-size: 11px; color: #9db1ce; text-align: center; margin-top: 26px; }
@media (max-width: 760px) {
  .ready-screen, .pause-screen, .countdown-screen { padding-left: 20px; padding-right: 20px; }
  .ready-content { margin-top: 32px; }
  .ready-content h1 { font-size: 30px; }
  .ready-phone { width: 80px; height: 80px; margin-bottom: 24px; border-radius: 23px; }
  .ready-phone .icon { width: 40px; height: 40px; }
  .ready-direction { font-size: 16px; }
  .instruction-card { margin-top: 26px; padding: 18px; }
  .play-screen { padding-left: max(16px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); }
  .play-topbar { gap: 12px; font-size: 12px; }
  .play-screen .play-topbar { font-size: 12px; }
  .round-rule { font-size: 11px; }
  .play-screen .icon-button { width: 38px; height: 38px; }
  .game-hud { padding-top: 14px; }
  .timer { font-size: 56px; }
  .score-pill { font-size: 12px; }
  .score-pill b { font-size: 16px; }
  .answer { font-size: 45px; line-height: 1.13; }
  .answer-long { font-size: 33px; }
  .answer-stage { padding: 26px 0; gap: 20px; }
  .card-category { font-size: 12px; }
  .game-actions { gap: 12px; }
  .game-actions > button { min-height: 78px; padding: 18px 12px; border-radius: 17px; gap: 8px; flex-wrap: wrap; }
  .game-actions b { font-size: 22px; }
  .game-actions small { flex-basis: 100%; font-size: 11px; }
  .game-foot { min-height: 12px; }
  .keyboard-hint { display: none; }
  .photo-prompt { max-height: 30dvh; max-width: 100%; }
  .photo-stage .answer { font-size: 28px; }
  .photo-stage { gap: 10px; }
  .forbidden { gap: 6px; }
  .forbidden > span { flex-basis: 100%; }
  .forbidden b { font-size: 13px; padding: 7px 9px; }
  .result-stats { padding: 24px 8px; }
  .result-stats b { font-size: 42px; }
  .result-stats span { font-size: 11px; }
  .reveal-card { padding: 14px; }
  .reveal-card > b { font-size: 15px; }
  .final-screen { margin-top: 35px; }
  .final-screen h1 { font-size: 31px; }
  .room-top { flex-wrap: wrap; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .ready-content { margin: 6px auto 0; max-width: 630px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-items: center; }
  .ready-phone { display: none; }
  .ready-content h1 { font-size: 28px; }
  .ready-direction { font-size: 14px; margin: 0; }
  .instruction-card { grid-column: 1; grid-row: 2 / 4; margin: 6px 0 0; padding: 14px; }
  .ready-content > .button { grid-column: 2; grid-row: 2; }
  .ready-content > .footnote { grid-column: 2; grid-row: 3; margin: 0; font-size: 11px; }
  .level-ready-target { font-size: 12px; margin: 0; }
  .play-screen { min-height: 100dvh; padding-top: 7px; padding-bottom: 7px; }
  .play-topbar { min-height: 34px; }
  .play-screen .icon-button { height: 32px; width: 32px; }
  .time-track { margin-top: 5px; }
  .game-hud { padding-top: 6px; }
  .timer { font-size: 36px; }
  .answer-stage { min-height: 80px; padding: 8px 0; gap: 6px; }
  .answer { font-size: clamp(30px,5vw,56px); }
  .answer-long { font-size: 30px; }
  .card-category { font-size: 10px; }
  .game-actions { gap: 14px; }
  .game-actions > button { min-height: 50px; padding: 10px 18px; border-radius: 12px; }
  .game-actions b { font-size: 20px; }
  .game-foot { min-height: 8px; padding-top: 4px; }
  .forbidden { margin-top: 2px; }
  .forbidden > span { flex-basis: auto; }
  .forbidden b { font-size: 12px; padding: 4px 8px; }
  .clue-rotation, .voice-prompt { margin-top: 0; font-size: 12px; gap: 8px; }
  .clue-rotation button, .voice-prompt .text-button { min-height: 34px; padding: 7px 10px; font-size: 11px; }
  .live-rule-note { font-size: 11px; line-height: 1.35; }
  .photo-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; padding: 8px 8%; gap: 5px 20px; }
  .photo-stage .card-category { grid-column: 2; }
  .photo-stage .photo-prompt { grid-column: 1; grid-row: 1 / 3; max-height: 130px; max-width: 100%; margin: auto; }
  .photo-stage .answer { grid-column: 2; font-size: 28px; }
}