/* The phone is a controller. The large stage keeps the show graphics. */
.brand-owner { display:block; font-size:9px; font-weight:900; letter-spacing:4px; color:var(--gold); margin-bottom:2px; }
.brand-name { font-size:clamp(26px,3.6vw,43px); }
.phone-pages { display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0; }
.phone-pages .button { min-width:48px; min-height:44px; padding:8px 16px; font-size:20px; }
.phone-pages span { color:var(--muted); font-size:12px; font-weight:700; }
.phone-photo-zoom { display:block; position:relative; border:0; padding:0; width:100%; height:100%; background:transparent; cursor:zoom-in; }
.phone-photo-zoom img { width:100%; height:100%; object-fit:contain; }
.phone-photo-zoom > span { position:absolute; bottom:5px; right:5px; padding:4px 7px; color:white; background:#130824e8; font-size:10px; }
.phone-photo-peek { display:none; }
.phone-photo-dialog { width:min(96vw,900px); max-height:94dvh; padding:14px; color:var(--ink); background:#160e26; border:2px solid var(--gold); }
.phone-photo-dialog::backdrop { background:#06020ce8; }
.phone-photo-dialog form { display:flex; justify-content:flex-end; margin-bottom:12px; }
.phone-photo-dialog .button { min-height:44px; }
.phone-photo-dialog img { display:block; width:100%; max-height:70dvh; object-fit:contain; }
.phone-photo-dialog p { font-size:14px; line-height:1.5; }
.estimate-sign { position:absolute; z-index:1; top:50%; left:7px; transform:translateY(-50%); width:42px; min-height:44px; border:1px solid #b58ad66b; border-radius:4px; background:#38234c; color:var(--gold); font-size:25px; cursor:pointer; }
.estimate-form .field #estimate-value { padding-left:58px; }
.phone-question-meta { display:flex; align-items:center; gap:10px; }
.phone-question-meta .timer { margin-left:auto; }
.phone-question-number { white-space:nowrap; color:var(--gold); font-weight:850; }
.phone-stakes { color:#ffbc91; font-weight:750; }
.phone-answer-note .answer-confirmation { margin:0; }
.phone-helpers { position:relative; }
.phone-helpers > summary { display:flex; justify-content:space-between; align-items:center; min-height:40px; padding:8px 12px; color:var(--gold); border:1px solid #aa85de66; background:#241438; font-size:12px; font-weight:800; cursor:pointer; list-style:none; }
.phone-helpers > summary::-webkit-details-marker { display:none; }
.phone-helpers[open] > summary > span { transform:rotate(45deg); }
.phone-helper-drawer { padding:12px; background:#1b102b; border:1px solid #aa85de66; }

@media(max-width:900px) {
  body.view-play { overflow-x:hidden; }
  .view-play .app-shell { padding:10px 12px max(8px,env(safe-area-inset-bottom)); }
  .view-play .app-header { gap:8px; padding-bottom:9px; }
  .view-play .brand-name { font-size:23px; }
  .view-play .brand-owner { font-size:7px; letter-spacing:2px; }
  .view-play .brand-sub { display:none; }
  .view-play .brand-icon { width:24px; height:29px; font-size:26px; }
  .view-play .brand { gap:7px; }
  .view-play .header-meta { gap:7px; }
  .view-play .room-pill { font-size:8px; padding:6px; }
  .view-play .room-pill strong { font-size:11px; }
  .view-play .app-main { padding-top:12px; }
  .view-play .player-summary { margin:0 0 5px; gap:8px; min-height:30px; }
  .view-play .player-identity { gap:7px; }
  .view-play .player-identity .avatar { width:27px; height:27px; font-size:10px; flex:0 0 27px; }
  .view-play .player-identity strong { font-size:12px; line-height:1.2; }
  .view-play .player-identity .section-label { font-size:7px; letter-spacing:.4px; margin-top:2px; }
  .view-play .player-score strong { font-size:19px; }
  .view-play .player-score span { font-size:8px; margin-top:0; }
  .view-play .player-tools { margin:0 0 5px; gap:8px; }
  .view-play .player-tools .rules-link { min-height:28px; padding:3px 0; font-size:10px; }
  .view-play .awake-status { margin:0; gap:6px; justify-content:space-between; font-size:9px; }
  .view-play .awake-status button { min-height:28px; padding:3px 7px; font-size:9px; }
  .view-play.player-active .app-shell { padding-top:5px; }
  .view-play.player-active .app-header { min-height:31px; padding-bottom:5px; }
  .view-play.player-active .brand-name { font-size:18px; }
  .view-play.player-active .brand-owner { font-size:6px; letter-spacing:1.8px; }
  .view-play.player-active .brand-icon { width:18px; height:24px; font-size:22px; }
  .view-play.player-active .app-main { padding-top:5px; }
  .view-play.player-active .player-summary { min-height:26px; margin-bottom:2px; }
  .view-play.player-active .player-identity .avatar { width:24px; height:24px; flex-basis:24px; }
  .view-play.player-active .player-identity .section-label,
  .view-play.player-active .player-score span { display:none; }
  .view-play.player-active .player-score strong { font-size:16px; }
  .view-play.player-active .awake-status { display:inline-flex; width:calc(100% - 110px); min-height:24px; align-items:center; vertical-align:middle; }
  .view-play.player-active .awake-status button { min-height:24px; font-size:8px; }
  .view-play.player-active .player-tools { display:inline-flex; width:105px; min-height:24px; justify-content:flex-end; vertical-align:middle; margin:0 0 4px; }
  .view-play.player-active .player-tools .rules-link { min-height:24px; font-size:9px; }
  .view-play.player-active .player-tools .powerup-inventory,
  .view-play.player-active .player-tools .powerup-shield,
  .view-play.player-active .moderator,
  .view-play.player-active .app-footer { display:none; }
  .view-play.player-active .phone-question { display:flex; flex-direction:column; gap:7px; height:var(--phone-workspace-height,calc(var(--phone-vh,100dvh) - 115px)); min-height:0; }
  .view-play .phone-question-meta { flex:0 0 38px; min-width:0; gap:8px; }
  .view-play .phone-question-number { font-size:12px; }
  .view-play .phone-question-meta .category-pill { font-size:9px; padding:5px 7px; min-width:0; overflow-wrap:anywhere; }
  .view-play .phone-question-meta .timer { width:38px; height:38px; padding:2px; }
  .view-play .phone-question-meta .timer strong { font-size:18px; }
  .view-play .phone-question-meta .timer span { display:none; }
  .view-play .phone-question-context { flex:1 1 0; min-height:48px; overflow-y:auto; overscroll-behavior:contain; padding:9px 10px; border-left:3px solid var(--gold); background:#ffffff05; }
  .view-play .phone-question-context .question-text { font-size:clamp(16px,4.3vw,20px); line-height:1.32; letter-spacing:-.2px; margin:0; }
  .view-play .phone-stakes { font-size:10px; line-height:1.3; margin:6px 0 0; }
  .view-play .phone-answer-area { display:flex; flex:2.6 1 0; min-height:138px; }
  .view-play .phone-answer-area .answers-grid { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:7px; min-height:0; }
  .view-play .phone-answer-area .answer-card { min-height:44px; min-width:0; flex-direction:row; align-items:center; gap:6px; padding:10px 8px; border-radius:8px; }
  .view-play .phone-answer-area .answer-letter { width:18px; min-width:18px; height:auto; padding:0; font-size:15px; flex:0 0 18px; align-self:flex-start; margin-top:2px; }
  .view-play .phone-answer-area .answer-label { display:block; font-size:clamp(13px,3.5vw,16px); line-height:1.25; max-height:100%; min-width:0; overflow-y:auto; overscroll-behavior:contain; overflow-wrap:anywhere; text-align:left; }
  .view-play .phone-answer-area .selected-check { position:absolute; top:3px; right:5px; font-size:13px; }
  .view-play .phone-answer-note { flex:0 0 auto; }
  .view-play .phone-answer-note .answer-confirmation { padding:3px 1px; min-height:0; font-size:10px; line-height:1.25; background:transparent; border:0; }
  .view-play .phone-helpers { flex:0 0 auto; }
  .view-play .phone-helpers > summary { min-height:36px; padding:7px 10px; font-size:11px; }
  .view-play .phone-helper-drawer { position:absolute; z-index:75; left:0; right:0; bottom:100%; max-height:min(65vh,470px); overflow:auto; box-shadow:0 -12px 35px #000a; }
  .view-play .phone-helper-drawer .powerup-panel { margin:0 0 10px; padding:12px; }
  .view-play .phone-helper-drawer .joker-section { margin:0; }
  .view-play .phone-helper-drawer .joker-section h2 { font-size:13px; }
  .view-play .phone-helper-drawer .joker { min-height:85px; padding:9px 5px; }
  .view-play .phone-helper-drawer .joker-name { font-size:10px; }
  .view-play .phone-helper-drawer .joker-note { font-size:10px; line-height:1.4; }
  .view-play .phone-estimate .phone-answer-area { flex:0 0 auto; min-height:0; }
  .view-play .estimate-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; width:100%; padding:11px; border-radius:6px; }
  .view-play .estimate-form .field { display:contents; }
  .view-play .estimate-form .field > span { grid-column:1/-1; font-size:12px; margin:0; }
  .view-play .estimate-form .estimate-input-wrap { grid-column:1; min-width:0; }
  .view-play .estimate-form .field #estimate-value { min-height:48px; height:48px; min-width:0; font-size:23px; letter-spacing:0; padding:8px 9px 8px 49px; }
  .view-play .estimate-form .field input::placeholder { font-size:17px; }
  .view-play .estimate-input-unit { display:none; }
  .view-play .estimate-sign { left:4px; width:38px; min-height:40px; }
  .view-play .estimate-form > .button { grid-column:2; grid-row:2; width:103px; padding:8px; font-size:12px; line-height:1.2; min-height:48px; }
  .view-play .estimate-format-hint { grid-column:1/-1; grid-row:3; margin:0; font-size:9px; line-height:1.3; }
  .view-play .estimate-form .form-error { grid-column:1/-1; margin:0; font-size:11px; }
  .view-play .estimate-logged { width:100%; padding:14px; }
  .view-play .photo-duel:not(.photo-stage-result) { display:flex; flex-direction:column; height:var(--phone-workspace-height,calc(var(--phone-vh,100dvh) - 115px)); gap:7px; min-height:0; }
  .view-play .photo-heading { flex:0 0 auto; align-items:center; gap:8px; margin:0; }
  .view-play .photo-heading .section-label { display:none; }
  .view-play .photo-heading h1 { font-size:25px; margin:0; }
  .view-play .photo-clock { width:38px; min-height:38px; border-width:2px; }
  .view-play .photo-clock strong { font-size:22px; }
  .view-play .photo-clock > span { display:none; }
  .view-play .photo-round-status { flex:0 0 auto; margin:0; padding:0; font-size:9px; }
  .view-play .photo-round-status > strong { display:none; }
  .view-play .photo-duel-grid { display:flex; flex-direction:column; align-items:stretch; flex:1 1 0; min-height:0; gap:8px; }
  .view-play .photo-figure { flex:1 1 0; min-height:35px; overflow-y:auto; margin:0; overscroll-behavior:contain; }
  .view-play .photo-image-frame { height:clamp(64px,18vh,145px); padding:3px; box-shadow:none; }
  .view-play .photo-figure figcaption { font-size:11px; line-height:1.35; margin:5px 0 0; padding-left:7px; }
  .view-play .photo-duel-content { flex:0 0 auto; min-width:0; width:100%; }
  .view-play .photo-caption-form { display:grid; grid-template-columns:1fr auto; gap:6px; padding:10px; }
  .view-play .photo-caption-form label { grid-column:1/-1; }
  .view-play .photo-caption-form label > strong { display:none; }
  .view-play .photo-caption-form label .section-label { font-size:9px; }
  .view-play .photo-caption-form textarea { grid-column:1/-1; min-height:72px; height:72px; resize:none; padding:9px; font-size:16px; line-height:1.35; }
  .view-play .photo-caption-form .photo-input-meta { margin:0; font-size:10px; }
  .view-play .photo-caption-form .photo-input-meta > span { display:none; }
  .view-play .photo-caption-form .button { width:auto; min-height:44px; padding:8px 12px; font-size:12px; }
  .view-play .photo-caption-form .form-error { grid-column:1/-1; font-size:11px; margin:0; }
  .view-play .photo-form-note { display:none; }
  .view-play .photo-vote-form.has-photo-submit { padding-bottom:0; }
  .view-play .photo-vote-intro { font-size:10px; line-height:1.35; margin:0 0 6px; }
  .view-play .photo-vote-list { gap:6px; }
  .view-play .photo-vote-card { min-height:58px; padding:8px 10px; gap:8px; }
  .view-play .photo-vote-copy > small { font-size:7px; letter-spacing:.5px; margin-bottom:3px; }
  .view-play .photo-vote-copy > strong { font-size:14px; line-height:1.3; }
  .view-play .photo-vote-mark { width:23px; height:23px; font-size:16px; }
  .view-play .photo-abstain { min-height:36px; margin:6px 0; }
  .view-play .photo-abstain .photo-vote-copy > strong { font-size:11px; }
  .view-play .photo-vote-submit { position:static; padding:7px 0 0; border:0; box-shadow:none; background:transparent; margin:0; }
  .view-play .photo-vote-submit p { font-size:10px; line-height:1.25; margin:0 0 5px; }
  .view-play .photo-vote-submit .button { min-height:44px; padding:9px 12px; font-size:13px; }
  .view-play .phone-pages { gap:14px; margin:5px 0; }
  .view-play .phone-pages .button { min-height:38px; padding:4px 14px; }
  .view-play .phone-pages span { font-size:11px; }
  .view-play .voting-stage { display:flex; flex-direction:column; gap:8px; height:var(--phone-workspace-height,calc(var(--phone-vh,100dvh) - 115px)); min-height:0; }
  .view-play .voting-heading { align-items:center; gap:8px; margin:0; }
  .view-play .voting-heading .section-label { display:none; }
  .view-play .voting-heading h1 { font-size:29px; margin:0 0 5px; }
  .view-play .voting-heading p { font-size:11px; line-height:1.35; margin:0; }
  .view-play .voting-clock { width:40px; height:45px; flex-basis:40px; }
  .view-play .voting-clock strong { font-size:25px; }
  .view-play .voting-clock span { display:none; }
  .view-play .voting-status { font-size:9px; margin:0; }
  .view-play .vote-ballot.has-vote-submit { padding-bottom:0; }
  .view-play .vote-ballot { flex:1; min-height:0; display:flex; flex-direction:column; gap:7px; }
  .view-play .vote-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; flex:1; min-height:0; }
  .view-play .vote-card { min-height:48px; padding:9px 8px; gap:6px; }
  .view-play .vote-card strong { font-size:12px; line-height:1.2; overflow-wrap:anywhere; }
  .view-play .vote-card small { font-size:8px; line-height:1.3; }
  .view-play .vote-choice-mark { width:21px; height:21px; min-width:21px; font-size:15px; }
  .view-play .vote-submit-bar { position:static; padding:6px 0 0; margin:0; border:0; box-shadow:none; background:transparent; gap:10px; }
  .view-play .vote-submit-count strong { font-size:21px; }
  .view-play .vote-submit-count span { font-size:8px; }
  .view-play .vote-submit-bar .vote-submit { min-height:44px; padding:10px; font-size:13px; }
  .view-play .voting-note { display:none; }
  .view-play .ready-card { padding:18px; }
  .view-play .ready-card h1 { font-size:32px; margin:12px 0; }
  .view-play .ready-symbol { display:none; }
  .view-play .waiting-card { padding:18px; margin:14px 0; }
  .view-play .waiting-symbol { font-size:26px; margin-bottom:8px; }
  .view-play .waiting-card h1 { font-size:29px; margin:10px 0; }
  .view-play .waiting-card p { font-size:13px; line-height:1.45; }
  .view-play.phone-keyboard .brand-owner { display:none; }
  .view-play.phone-keyboard .app-header { min-height:25px; }
  .view-play.phone-keyboard .player-tools,
  .view-play.phone-keyboard .awake-status { display:none; }
  .view-play.phone-keyboard .photo-heading h1 { font-size:20px; }
  .view-play.phone-keyboard .photo-image-frame { height:64px; }
  .view-play.phone-keyboard .phone-photo-zoom > span { display:none; }
  .view-play.phone-keyboard .photo-round-status { display:none; }
  .view-play.phone-keyboard .phone-question-context .question-text { font-size:15px; }
  .view-play.phone-keyboard .phone-question-context { min-height:35px; }
  .view-play.phone-keyboard .phone-question-meta { flex-basis:30px; }
  .view-play.phone-keyboard .phone-question-meta .timer { width:30px; height:30px; }
}
@media(max-width:360px) {
  .view-play .app-shell { padding-inline:9px; }
  .view-play .photo-heading h1 { font-size:22px; }
  .view-play .phone-question-meta .category-pill { font-size:8px; padding:4px 5px; }
  .view-play .phone-answer-area .answer-card { padding:8px 6px; gap:4px; }
}
@media(max-width:360px) and (max-height:680px) {
  .view-play .phone-answer-area .answers-grid { grid-template-columns:1fr; grid-template-rows:repeat(4,minmax(0,1fr)); gap:5px; }
  .view-play .phone-answer-area .answer-card { display:block; padding:2px 7px; text-align:left; }
  .view-play .phone-answer-area .answer-letter { float:left; margin:0 7px 0 0; font-size:15px; line-height:1.1; }
  .view-play .phone-answer-area .answer-label { font-size:13px; line-height:1.18; }
}
@media(max-width:900px) and (max-height:650px) {
  .view-play .photo-stage-vote .photo-figure { display:none; }
  .view-play .photo-stage-vote .photo-heading h1 { font-size:21px; }
  .view-play .phone-photo-peek { display:inline-flex; margin-left:auto; min-height:34px; padding:5px 8px; font-size:11px; }
  .view-play .photo-stage-vote .photo-clock { flex-shrink:0; }
}

/* All 14 quiz topics share one ballot; the confirmation stays within reach. */
@media(max-width:900px) {
  .view-play .voting-stage { gap:6px; }
  .view-play .voting-heading,.view-play .voting-status { flex:0 0 auto; }
  .view-play .voting-heading h1 { font-size:27px; margin-bottom:4px; }
  .view-play .voting-heading p { font-size:10px; line-height:1.3; }
  .view-play .voting-status { padding:6px 0; gap:8px; }
  .view-play .voting-status strong { font-size:8px; letter-spacing:.2px; white-space:nowrap; }
  .view-play .vote-ballot { flex:1 1 0; gap:6px; min-height:0; }
  .view-play .vote-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(48px,1fr); gap:5px; min-height:0; flex:1 1 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .view-play .vote-card { position:relative; justify-content:center; text-align:center; min-height:48px; min-width:0; padding:7px 5px; gap:0; border-radius:7px; }
  .view-play .vote-card>span:last-child { min-width:0; }
  .view-play .vote-card strong { display:block; font-size:11px; line-height:1.2; overflow-wrap:anywhere; }
  .view-play .vote-card small { display:block; font-size:7px; line-height:1.2; margin-top:3px; }
  .view-play .vote-choice-mark { position:absolute; top:2px; right:2px; width:11px; min-width:11px; height:11px; font-size:9px; border:0; opacity:0; }
  .view-play .vote-card.selected .vote-choice-mark { opacity:1; }
  .view-play .vote-card:focus-within { outline:2px solid var(--gold); outline-offset:-2px; }
  .view-play .vote-submit-bar { position:sticky; bottom:0; flex:0 0 auto; z-index:5; padding:6px 0 max(1px,env(safe-area-inset-bottom)); gap:8px; background:var(--bg,#120e1c); border-top:1px solid var(--line); }
  .view-play .vote-submit-count strong { font-size:19px; }
  .view-play .vote-submit-bar .vote-submit { min-height:44px; font-size:12px; }
}
@media(max-width:400px) and (max-height:650px) {
  .view-play .vote-card small { display:none; }
  .view-play .vote-card { padding:6px 4px; }
  .view-play .voting-heading h1 { font-size:25px; }
  .view-play .voting-clock { width:35px; height:39px; flex-basis:35px; }
  .view-play .voting-clock strong { font-size:23px; }
}

.view-play .awake-status{display:flex;align-items:center;gap:8px;margin:5px 0 9px;padding:5px 8px;border:1px solid #77548e66;border-radius:8px;background:#261334;min-height:36px;box-sizing:border-box;color:#c8b4dc}
.view-play .awake-status .awake-preference{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;border:0;padding:0;margin:0;background:transparent;color:inherit;cursor:pointer;min-height:27px}
.view-play .awake-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.view-play .awake-copy>strong{font-size:11px;line-height:1.15;color:#f1e6f8}
.view-play .awake-copy>small{font-size:9px;line-height:1.15;color:#c4acd6}
.view-play .awake-toggle-track{position:relative;flex:0 0 29px;width:29px;height:17px;border:1px solid #9c7ab5;border-radius:20px;background:#493254}
.view-play .awake-toggle-track>i{display:block;position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#c8b6d4;transition:transform .15s}
.view-play .awake-preference[aria-checked=true] .awake-toggle-track{background:#536318;border-color:var(--gold)}
.view-play .awake-preference[aria-checked=true] .awake-toggle-track>i{background:var(--gold);transform:translateX(12px)}
.view-play .awake-status .awake-activate{flex:0 0 auto;min-height:28px;padding:5px 7px;border:1px solid #a078bf88;border-radius:5px;background:#3a224d;color:var(--gold);font-size:10px;font-weight:800}
.view-play .awake-status [hidden]{display:none!important}
.view-play .awake-preference:focus-visible,.view-play .awake-activate:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:900px){
  .view-play.player-active .awake-status{display:inline-flex;vertical-align:middle;width:calc(100% - 83px);min-height:33px;gap:4px;padding:3px 5px;margin:0 4px 5px 0}
  .view-play.player-active .awake-status .awake-preference{gap:5px;min-height:25px}
  .view-play.player-active .awake-copy>strong{font-size:9px}
  .view-play.player-active .awake-copy>small{font-size:7px;line-height:1.15}
  .view-play.player-active .awake-status .awake-activate{font-size:8px;min-height:25px;padding:3px 4px}
  .view-play.player-active .player-tools{width:75px;min-height:32px;margin-bottom:5px}
  .view-play.player-active .player-tools .rules-link{font-size:8px}
  .view-play.player-active.phone-keyboard .awake-status{display:inline-flex}
}