/* Production scene layout: editable surfaces replace the legacy painted backdrops. */
body:not([data-phase="intro"]) { color:var(--lab-ink); --font-display:'Cairo',sans-serif; --font-body:'Cairo',sans-serif; }
body[data-phase="intro"] .lab-world { display:none; }
body:not([data-phase="intro"]) :is(#stage,#view,.setup-shell,.setup-stage) { background:transparent !important; }
body:not([data-phase="intro"]) #stage { position:relative; z-index:1; }
body:not([data-phase="intro"]) #view { overflow:auto; }
.lab-world { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.lab-world::before { content:''; position:absolute; inset:0; background-image:radial-gradient(#20305218 1.5px,transparent 1.5px); background-size:28px 28px; mask-image:linear-gradient(90deg,#000,transparent 45%,#000); }
body:not([data-phase="intro"]) :is(.lobby-canvas,.paper-drawing-stage,.spotlight-reveal-stage,.evidence-guess-stage,.choice-arena-stage,.quiet-reveal-stage,.scoreboard-spotlight-stage,.final-scrapbook-stage,.round-rocket-stage,.gallery-salon-stage) {
  background:transparent !important; width:100%; max-width:1600px; min-height:100%; aspect-ratio:auto; height:100%; isolation:isolate;
}
/* Flexible lobby: independent join, roster and instruction panels. */
body:not([data-phase="intro"]) .lobby-canvas { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) auto; gap:24px; padding:5vh 5vw; direction:ltr; box-sizing:border-box; }
.lobby-canvas :is(.lobby-join-card,.lobby-roster-card,.lobby-guide-card) { position:relative; inset:auto; width:auto; height:auto; direction:rtl; border:1px solid var(--lab-border); border-radius:28px; background:var(--lab-card); box-shadow:0 12px 0 #20305209,0 22px 55px #2030520c; }
.lobby-canvas .lobby-join-card { grid-row:1 / 3; padding:28px; }
.lobby-canvas .lobby-roster-card { padding:22px; }
.lobby-canvas .lobby-guide-card { padding:18px 24px; }
.lobby-canvas :is(.lobby-roster-heading,.lobby-player-grid,.lobby-player-count,.lobby-step-list) { position:relative; inset:auto; width:100%; height:auto; }
.lobby-canvas .lobby-player-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 8px; padding:16px 0; }
.lobby-canvas :is(h1,h2,.lobby-player-count,.lobby-step,.lobby-player-name,.player-name) { color:var(--lab-ink); text-shadow:none; }
.lobby-canvas .lobby-player-card { background:#e7f1ff !important; border-radius:18px; padding:10px 4px; }
.lobby-canvas .lobby-step-list { display:grid; gap:8px; }
.lobby-canvas .lobby-step { background:transparent; padding:0; }
/* Stage heading is real text, replacing labels formerly painted into art. */
.lab-phase-heading { position:absolute; top:4%; left:10%; right:10%; margin:0; text-align:center; color:var(--lab-ink); font:900 clamp(24px,3vw,48px)/1.3 'Cairo',sans-serif; z-index:2; }
body:not([data-phase="intro"]) :is(.paper-drawing-stage,.evidence-guess-stage,.choice-arena-stage,.quiet-reveal-stage,.scoreboard-spotlight-stage,.gallery-salon-stage,.final-scrapbook-stage,.spotlight-reveal-stage) { min-height:540px; }
/* Drawing layout: roomy instruction surface plus compact progress cluster. */
.paper-drawing-stage { display:grid; grid-template-columns: minmax(0,1.8fr) minmax(240px,1fr); grid-template-rows:auto auto auto 1fr; gap:16px 30px; padding:12vh 7vw 7vh; box-sizing:border-box; }
.paper-drawing-stage > :not(.lab-phase-heading) { position:relative; inset:auto; width:auto; height:auto; }
.paper-drawing-stage .paper-drawing-instruction { grid-column:1; grid-row:1 / 5; padding:5%; background:var(--lab-card); border:2px solid white; border-radius:36px; box-shadow:0 14px 0 #2030520a; color:var(--lab-ink); font-size:clamp(28px,3.5vw,60px); }
.paper-drawing-instruction span { white-space:normal; }
.paper-drawing-stage :is(.paper-timer-panel,.paper-progress-panel,.paper-privacy-panel,.paper-player-grid) { grid-column:2; }
.paper-drawing-stage .paper-timer-value { color:var(--lab-accent); font-size:clamp(70px,8vw,130px); text-shadow:none; }
.paper-drawing-stage .paper-player-grid { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; align-content:start; }
.paper-player-avatar { width:clamp(36px,4vw,66px); height:auto; }
body:not([data-phase="intro"]) :is(.paper-progress-value,.paper-privacy-panel,.evidence-progress-value,.choice-progress-value,.gallery-salon-prompt,.gallery-salon-artist,.gallery-salon-round,.gallery-salon-counter,.scoreboard-winner-name,.scoreboard-winner-place,.scoreboard-ranking-title,.scoreboard-row-name,.final-champion-place,.final-runner-place,.final-award-title) { color:var(--lab-ink); text-shadow:none; }
.paper-privacy-panel img { filter:none; }
/* Real drawing frames and timers are independent of the backdrop. */
body:not([data-phase="intro"]) :is(.spotlight-drawing-frame,.evidence-drawing-frame,.choice-arena-drawing-frame,.quiet-reveal-drawing-frame,.gallery-salon-drawing-frame) { background:white; border:10px solid white; border-radius:24px; box-shadow:0 14px 0 #20305210,0 25px 65px #20305213; overflow:hidden; box-sizing:border-box; }
body:not([data-phase="intro"]) :is(.evidence-timer-value,.choice-timer-value) { background:var(--lab-card); border-radius:24px; color:var(--lab-accent); text-shadow:none; box-shadow:0 8px 0 #2030520a; }
body:not([data-phase="intro"]) :is(.evidence-timer-value,.choice-timer-value,.paper-timer-value).urgent { color:#d82c59; }
.evidence-guess-stage .evidence-drawing-frame { left:43%; top:18%; width:min(42vw,65vh); }
.evidence-guess-stage .evidence-timer-value { left:8%; top:24%; width:20%; }
.evidence-guess-stage .evidence-progress-value { left:5%; top:46%; width:26%; }
.choice-arena-stage .choice-timer-value { left:auto; right:4%; top:3%; width:9%; height:13%; transform:none; font-size:clamp(28px,4vw,64px); }
.choice-arena-stage :is(.choice-arena-title,.choice-arena-description) { color:var(--lab-ink); text-shadow:none; }
.choice-arena-stage .choice-arena-options .choice-arena-option { background:var(--choice-color,#fff); border:2px solid white; border-radius:18px; box-shadow:0 7px 0 #20305212; }
.choice-arena-stage :is(.choice-arena-text,.choice-arena-text-label) { color:var(--lab-ink); text-shadow:none; }
.quiet-reveal-stage .quiet-reveal-panel { padding:25px; border:2px solid white; border-radius:28px; background:var(--lab-card); box-sizing:border-box; }
.quiet-reveal-stage :is(.quiet-reveal-title,.quiet-reveal-meta,.quiet-reveal-kind,.quiet-reveal-stats) { color:var(--lab-ink); text-shadow:none; }
/* Results use live panels, never painted placards. */
.scoreboard-spotlight-stage::before { content:''; position:absolute; left:5%; top:20%; width:38%; height:72%; border-radius:36px; background:var(--lab-card); box-shadow:0 12px 0 #2030520a; }
.scoreboard-spotlight-stage .scoreboard-ranking-list { background:var(--lab-card); border-radius:24px; padding:12px 22px; box-sizing:border-box; }
.scoreboard-spotlight-stage :is(.scoreboard-spotlight-title,.scoreboard-row-total,.scoreboard-row-delta) { color:var(--lab-ink); text-shadow:none; }
.scoreboard-rank-badge { background:#1769e0 !important; border-radius:50%; color:white; }
.final-title-banner-art { display:none; }
.final-scrapbook-stage::before { content:''; position:absolute; inset:19% 55% 9% 8%; background:var(--lab-card); border:2px solid white; border-radius:32px; }
.final-scrapbook-stage .final-awards-board { background:var(--lab-card); border-radius:24px; }
.final-scrapbook-stage :is(.final-runner-rank,.final-champion-place) { color:var(--lab-accent); text-shadow:none; }
.round-rocket-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4vh; }
.round-rocket-stage > * { position:relative; inset:auto; width:auto; transform:none; }
.round-rocket-stage .round-rocket-number { color:var(--lab-accent); font-size:clamp(100px,22vh,240px); -webkit-text-stroke:0; text-shadow:0 10px 0 #ffffff80; }
.round-rocket-stage .round-rocket-label { color:var(--lab-ink); font-size:clamp(32px,6vh,80px); }
.round-rocket-stage .round-rocket-instruction { color:var(--lab-ink); font-size:clamp(22px,3vh,40px); }
.gallery-salon-stage .gallery-salon-best-lie { background:var(--lab-card); border-radius:18px; }
/* Setup no longer depends on the workbench illustration. */
body:not([data-phase="intro"]) .setup-stage { display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:4vw; padding:7vh 7vw; width:100%; min-height:100vh; height:auto; box-sizing:border-box; }
body:not([data-phase="intro"]) .setup-stage > * { position:relative; inset:auto; width:auto; height:auto; transform:none; }
body:not([data-phase="intro"]) .setup-intro { grid-column:1; color:var(--lab-ink); }
body:not([data-phase="intro"]) .setup-card { grid-column:2; grid-row:1 / 4; border:2px solid white; border-radius:28px; background:var(--lab-card) !important; padding:28px; }
body:not([data-phase="intro"]) .setup-tv-note { display:none; }
body:not([data-phase="intro"]) :is(.setup-intro h1,.setup-copy,.setup-title-kicker,.setup-step strong,.setup-step small,.field-label) { color:var(--lab-ink); text-shadow:none; }
body:not([data-phase="intro"]) .setup-step { background:transparent !important; }
body:not([data-phase="intro"]) .button.primary { background:#1769e0; color:white; border-radius:14px; }
/* Phone keeps its working drawing controls, with a CSS-only surface. */

body[data-screen]::before,body[data-screen]::after { background-image:none !important; }
@media (max-width:800px) {
  .lobby-canvas { gap:12px !important; padding:35px 18px !important; }
  .lobby-canvas .lobby-join-card { padding:16px; }
  .lobby-canvas .lobby-player-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .paper-drawing-stage { gap:12px; padding:90px 20px 25px; grid-template-columns:1.3fr 1fr; }
  .paper-player-avatar { width:32px; }
  body:not([data-phase="intro"]) .setup-stage { display:flex; flex-direction:column; padding:45px 20px; gap:20px; }
  body:not([data-phase="intro"]) .setup-card { width:100%; }
}
@media (max-aspect-ratio:1/1) {
  body:not([data-phase="intro"]) .lobby-canvas { display:flex; flex-direction:column; height:auto; overflow:auto; }
  .lobby-canvas .lobby-join-card { min-height:390px; }
  body:not([data-phase="intro"]) .lobby-view:has(.lobby-canvas) { overflow:auto; }
}
/* Layout corrections after rendered QA: remove the old art-aligned setup anchors. */
body:not([data-phase="intro"]) .setup-stage { aspect-ratio:auto; }
body:not([data-phase="intro"]) .setup-card { display:flex; flex-direction:column; gap:20px; }
body:not([data-phase="intro"]) :is(.setup-steps,.setup-actions,.preset-field,.setup-error,.create-button) { position:relative; inset:auto; width:100%; height:auto; }
body:not([data-phase="intro"]) .setup-steps { display:grid; grid-template-rows:none; gap:18px; }
body:not([data-phase="intro"]) .setup-step { min-height:74px; padding:8px; }
body:not([data-phase="intro"]) .setup-actions { display:grid; gap:12px; }
body:not([data-phase="intro"]) .create-button { min-height:62px !important; padding:16px !important; background:#1769e0 !important; color:white !important; border-radius:16px; font-size:24px !important; text-shadow:none; }
body:not([data-phase="intro"]) .create-button:disabled { opacity:.5; }
body:not([data-phase="intro"]) .setup-intro .eyebrow { color:#1769e0; text-shadow:none; }
body:not([data-phase="intro"]) .connection-banner { color:white; }
.paper-drawing-stage .paper-player-grid { align-content:center; grid-template-rows:repeat(2,85px); }
.paper-drawing-stage .paper-player-token { width:70px; height:70px; max-width:100%; }
.paper-player-marker { right:-4%; bottom:0; width:22px; height:22px; }
.lobby-canvas .lobby-player-status { color:#536882; }
@media(max-width:800px) {
 body:not([data-phase="intro"]) .setup-step { grid-template-columns:36px minmax(0,1fr) 26px; gap:12px; }
 body:not([data-phase="intro"]) .step-index { width:34px; }
 body:not([data-phase="intro"]) .step-state-icon { width:24px; }
 body:not([data-phase="intro"]) .setup-step strong { font-size:16px; }
 body:not([data-phase="intro"]) .setup-step small { font-size:13px; }
}
/* Winners use flow layout so changing the aspect ratio cannot collide text and portraits. */
.scoreboard-spotlight-stage .scoreboard-spotlight-winner { inset:21% auto 10% 5%; width:38%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.scoreboard-spotlight-stage .scoreboard-spotlight-winner > * { position:relative; inset:auto; width:auto; height:auto; margin:0; }
.scoreboard-spotlight-stage .scoreboard-winner-avatar { width:min(18vw,25vh); }
.scoreboard-spotlight-stage .scoreboard-winner-score { color:var(--lab-accent); text-shadow:none; font-size:clamp(40px,7vh,78px); }
.scoreboard-spotlight-stage .scoreboard-winner-delta { direction:ltr; }
.final-scrapbook-stage .final-champion { inset:20% auto 10% 8%; width:37%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.final-scrapbook-stage .final-champion > * { position:relative; inset:auto; width:auto; margin:0; }
.final-scrapbook-stage .final-champion-avatar { width:min(21vw,30vh); }
body:not([data-phase="intro"]) .quiet-reveal-phase { color:var(--lab-ink); text-shadow:none; }
.quiet-reveal-stage > .lab-phase-heading { display:none; }
body:not([data-phase="intro"]) .quiet-reveal-progress { color:var(--lab-ink); text-shadow:none; }
body:not([data-phase="intro"]) .setup-copy { max-width:100%; }
/* Reserve the top-right corner for the site mark. */
.choice-arena-stage .choice-timer-value { right:12%; }