@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Patrick+Hand&display=swap');
:root{color-scheme:dark;--paper:#e2decf;--muted:#bcbcaf;--warm:#d8ae7a;--mono:'IBM Plex Mono',monospace;--hand:'Patrick Hand','Comic Sans MS',cursive}
*{box-sizing:border-box}body{margin:0;background:#101210;color:var(--paper);font-family:var(--mono);font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #f3ca8d;outline-offset:5px}button:disabled{cursor:default;opacity:.4}button[hidden],[hidden]{display:none!important}.experience{position:relative;min-height:100svh;height:max(760px,100svh);overflow:hidden;isolation:isolate;background:#171916}.scene-viewport{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}.scene-camera{position:absolute;left:50%;top:50%;width:max(100vw,150svh);height:max(66.6667vw,100svh);min-height:760px;min-width:1140px;transform:translate(-50%,-50%) translate(var(--pan-x,0px),var(--pan-y,0px)) scale(1.025);transform-origin:center;transition:transform .25s ease-out;will-change:transform}#scene-root,.room-svg{display:block;width:100%;height:100%}.room-base,.foreground-image{filter:brightness(.35) saturate(.22);transition:filter 2s ease}.foreground-layer{transform:translate(calc(var(--depth-x,0px) * 1.8),calc(var(--depth-y,0px) * 1.8));transition:transform .35s ease-out}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#080b0970,transparent 22%,transparent 66%,#080b09de 100%),radial-gradient(ellipse at 52% 45%,transparent 35%,#080b0955 90%)}.masthead{position:absolute;inset:24px 32px auto;display:flex;align-items:center;gap:26px;z-index:3}.wordmark{font:500 17px var(--mono);color:#eee9dc;text-decoration:none;letter-spacing:-.7px;text-shadow:0 1px 9px #000}.wordmark span{opacity:.6}.room-label{font:19px var(--hand);color:#ded7c2;opacity:.8}.motion-toggle{margin-left:auto;font-size:12px;background:#11171370;color:#d8d6c9;border:1px solid #d3d0ae35;border-radius:3px;padding:10px 12px}.room-whisper{position:absolute;top:15%;left:43%;font:25px var(--hand);color:#d9d0b7;transform:rotate(-3deg);text-shadow:0 2px 9px #000;opacity:.75;transition:opacity .5s}.session{position:absolute;left:4%;bottom:40px;max-width:680px;z-index:2;text-shadow:0 2px 15px #0c0d09}.session h1{font:500 13px var(--mono);letter-spacing:1.7px;margin:0 0 3px;color:#d0cbb9}.status-line{display:flex;align-items:baseline;gap:18px}.answer{font:clamp(36px,4.2vw,66px)/1.07 var(--hand);color:#e6e0c9;transition:color .7s}.phase-note{font-size:12px;color:#b4b7a5}.session-caption{font:18px var(--hand);color:#c5c4b2;margin:6px 0 0;max-width:420px}.pregame{margin-top:13px;display:flex;align-items:baseline;gap:15px;font-size:12px;flex-wrap:wrap}.pregame strong{font-size:24px;font-weight:400;color:#e8bd82}.pregame #setup-note{font:16px var(--hand);color:#ccc9b4}.dashboard{margin:17px 0 0;display:flex;gap:34px;animation:ui-reveal .8s both}.dashboard dt{font-size:11px;color:#a9ad99;margin-bottom:6px}.dashboard dd{font-size:16px;margin:0;color:#e4e2d0}.dashboard .game dd{font-family:var(--hand);font-size:22px;line-height:1}.connection-note{font-size:12px;color:#edbe80}.remote{position:absolute;right:3.5%;bottom:36px;width:290px;padding:17px 18px 10px;transform:rotate(1.2deg);background:#202521ed;border:1px solid #6e776454;border-radius:12px 10px 17px 13px;box-shadow:3px 8px 0 #080c08,0 12px 30px #0005;z-index:4}.remote::before{content:"";position:absolute;inset:5px;border:1px solid #5c66513b;border-radius:9px 7px 13px 10px;pointer-events:none}.remote-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#9caa90;margin-bottom:13px}.remote-led{width:5px;height:5px;border-radius:100%;background:#737965}.remote-buttons{display:flex;gap:9px}.remote-buttons button{flex:1;min-width:0;border:1px solid #6a75534d;color:#cbd0b9;background:#141b15;padding:10px 5px 9px;border-radius:5px 6px 4px 6px;font-size:12px;box-shadow:0 3px 0 #0a110a}.key-mark{display:block;font-size:19px;line-height:22px;margin-bottom:5px;color:#d7cbaa}.remote-buttons button:hover{background:#303a2b}.remote-buttons button[aria-pressed=true]{color:#f1dfb6;border-color:#c6ab7177;background:#41422d}.remote-buttons button[aria-pressed=true] .key-mark{color:#f0bf71}.remote-secondary{display:flex;justify-content:space-between;gap:12px;margin-top:12px}.remote-secondary button{padding:7px 0;background:none;border:0;color:#b6bba2;font-size:11px;min-height:32px}.remote-secondary button[aria-pressed=true]{color:#efb47d}.remote p{font-size:9px;color:#89947c;margin:3px 0 0;text-align:center}.look-controls{display:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.no-script{position:absolute;top:20%;left:20%;color:white}.tv-picture{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .25s}.tv-ambient,.sign-spill,.screen-reflection,.light-bulbs{opacity:0;transition:opacity 2s ease}.floor-tv{opacity:0;transform:translate(-100px,100px) rotate(-7deg);transform-box:fill-box;transform-origin:bottom center;transition:transform 1.9s cubic-bezier(.2,.75,.2,1),opacity .9s;pointer-events:none}.floor-tv.second{transform:translate(120px,110px) rotate(5deg);transition-delay:.85s}.floor-prop{filter:brightness(.8) saturate(.3)}.frame-sign{opacity:.13;filter:grayscale(1) brightness(.75);transition:opacity .6s,filter .6s}.sign-lit{mix-blend-mode:screen}.screen-reflection{mix-blend-mode:screen}.room-svg text{font-family:var(--mono)}
[data-phase=setting_up] .room-base,[data-phase=setting_up] .foreground-image{filter:brightness(.55) saturate(.35)}
[data-phase=setting_up] .floor-tv,[data-phase=watching] .floor-tv{opacity:1;transform:translate(0,0) rotate(0)}
[data-phase=setting_up] .light-bulbs{opacity:.45}
[data-phase=setting_up] .frame-sign{opacity:.19}
[data-phase=setting_up] .answer{color:#d6b887}
[data-phase=watching] .room-base,[data-phase=watching] .foreground-image{filter:brightness(.73) saturate(.52)}
[data-phase=watching] .tv-picture{opacity:.92;animation:tv-start 1.2s both;animation-delay:var(--screen-delay,0s)}
[data-phase=watching] .frame-sign{animation:sign-ignite 1.9s both;opacity:1;filter:none}
[data-phase=watching] .tv-ambient{opacity:.7;animation:light-breathe 8s ease-in-out infinite}
[data-phase=watching] .light-bulbs{opacity:.85}
[data-phase=watching] .sign-spill{opacity:.8;transition-delay:.75s}
[data-phase=watching] .screen-reflection{opacity:.28}
[data-phase=watching] .room-whisper{opacity:0}
[data-phase=watching] .answer{color:#e6bc86}
[data-phase=watching] .remote-led{background:#e4af67;box-shadow:0 0 8px #f0ad56}
[data-phase=powering_down] .tv-picture{animation:tv-stop .9s both}
[data-phase=powering_down] .frame-sign{animation:sign-out .8s both}
[data-phase=powering_down] .floor-tv{transition-delay:.95s;transition-duration:1.35s,.7s}
[data-phase=powering_down] .floor-tv.second{transition-delay:1.1s}
[data-phase=powering_down] .room-base,[data-phase=powering_down] .foreground-image{transition-delay:.4s}
[data-phase=off] .floor-tv{visibility:hidden}
@keyframes tv-start{0%{opacity:0;transform:scale(.006,.006);filter:brightness(3)}15%{opacity:.9;transform:scale(.7,.012)}45%{transform:scale(1,.02);filter:brightness(2)}100%{opacity:var(--picture-opacity,.92);transform:scale(1);filter:none}}
@keyframes tv-stop{0%{opacity:var(--picture-opacity,.92);transform:scale(1)}47%{opacity:.9;transform:scale(1,.012);filter:brightness(3)}80%{opacity:.8;transform:scale(.02,.008)}100%{opacity:0;transform:scale(0)}}
@keyframes sign-ignite{0%,40%{opacity:.13;filter:grayscale(1)}48%{opacity:.6;filter:grayscale(.3)}57%{opacity:.18}78%,100%{opacity:var(--sign-strength,1);filter:none}}
@keyframes sign-out{from{opacity:1;filter:none}to{opacity:.13;filter:grayscale(1)}}
@keyframes light-breathe{0%,100%{opacity:.7}50%{opacity:.5}}
@keyframes ui-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
[data-motion=off] *,[data-motion=off] *::before{animation:none!important;transition:none!important}[data-motion=off] .scene-camera{will-change:auto}
@media(min-width:1500px){.session{left:6%;bottom:55px}.remote{right:6%;bottom:50px}}
@media(max-width:1000px){.session{left:28px;bottom:235px;max-width:90%}.remote{bottom:27px;right:28px}.dashboard{gap:24px}.room-whisper{left:40%;font-size:22px}.experience{height:max(850px,100svh)}.scene-camera{min-height:850px;min-width:1275px}.masthead{inset:20px 25px auto}}
@media(max-width:600px){.experience{height:1040px;min-height:100svh}.masthead{inset:18px 18px auto;gap:10px}.wordmark{font-size:14px}.room-label{display:none}.motion-toggle{font-size:11px;padding:9px}.scene-viewport{bottom:190px}.scene-camera{min-width:1080px;min-height:720px;width:1080px;height:720px;top:48%;left:50%;transform:translate(-50%,-50%) translate(var(--pan-x,0px),var(--pan-y,0px));}.vignette{background:linear-gradient(180deg,#080b0933,transparent 18%,transparent 45%,#101210a6 61%,#101210 83%)}.session{left:22px;right:22px;bottom:247px;max-width:none}.session h1{font-size:12px}.answer{font-size:44px}.phase-note{font-size:11px}.session-caption{font-size:17px}.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.dashboard .game{grid-column:1/-1}.dashboard dd{font-size:15px}.dashboard .game dd{font-size:21px}.dashboard dt{font-size:10px}.remote{bottom:36px;width:calc(100% - 44px);max-width:370px;right:22px;transform:rotate(.6deg)}.remote-buttons button{min-height:59px}.remote-secondary button{min-height:38px}.remote p{font-size:10px}.room-whisper{top:105px;left:25px;font-size:22px}.look-controls{position:absolute;top:475px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-size:11px;color:#d2d0bb;z-index:2}.look-controls button{pointer-events:auto;background:#1822199e;border:1px solid #b2bba05c;border-radius:50%;color:#e4dec4;font-size:22px;width:44px;height:44px}.look-controls span{text-shadow:0 1px 4px black}.pregame{gap:8px 14px}.pregame #setup-note{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.scene-camera{will-change:auto}}

/* Cancelling pregame must never briefly flash a live screen. */
[data-phase=powering_down][data-was-watching=false] .tv-picture{animation:none;opacity:0}
[data-phase=powering_down][data-was-watching=false] .frame-sign{animation:none;opacity:.13}
/* Keep graphite hatching visible beneath each screen's animated picture. */
.tv-picture{mix-blend-mode:screen}

/* Real room: physical presence and screen activity are independent of presentation phase. */
.experience[data-mode=real] .floor-tv[data-present=true]{visibility:visible;opacity:1;transform:translate(0,0) rotate(0);transition-delay:0s}
.experience[data-mode=real] .floor-tv[data-present=false]{opacity:0;visibility:hidden;transition:transform 1.9s cubic-bezier(.2,.75,.2,1),opacity .9s,visibility 0s 1.9s;transform:translate(-100px,100px) rotate(-7deg)}
.experience[data-mode=real] .floor-tv.second[data-present=false]{transform:translate(120px,110px) rotate(5deg)}
.experience[data-mode=real] .tv-picture{opacity:0;animation:none}
.experience[data-mode=real] [data-tv-id][data-active=true] .tv-picture{opacity:.92;animation:tv-start 1.2s both;animation-delay:var(--screen-delay,0s)}
.experience[data-mode=real] [data-tv-id][data-stopping=true] .tv-picture{animation:tv-stop .9s both}
.experience[data-mode=real] [data-tv-id][data-active=false] .tv-ambient{opacity:0;animation:none}
.experience[data-mode=real] [data-tv-id][data-active=true] .tv-ambient{opacity:.5}
.experience[data-mode=real] [data-content=UNKNOWN] .screen-field,.experience[data-mode=real] [data-content=NON_FOOTBALL] .screen-field{display:none}
.experience[data-mode=real][data-any-active=false] .screen-reflection{opacity:0}
.experience[data-mode=real][data-signal=unavailable] .tv-picture,.experience[data-mode=real][data-signal=loading] .tv-picture{opacity:0;animation:none}
.experience[data-mode=real][data-signal=stale] .tv-ambient{animation-play-state:paused}
.experience[data-mode=real] .dashboard .game dd{white-space:pre-line;font-size:19px;line-height:1.3;overflow-wrap:anywhere;max-width:400px}
.experience[data-mode=real] .dashboard{flex-wrap:wrap;gap:16px 28px}
.experience[data-mode=real] .connection-note{font-size:14px}
@media(max-width:600px){.experience[data-mode=real] .dashboard .game dd{font-size:18px}}


/* The real room's readout sits low over the couch, clear of the TV wall. */
.experience[data-mode=real] .session{
 left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);bottom:26px;max-width:none;
 display:grid;grid-template-columns:minmax(240px,320px) minmax(0,600px);column-gap:42px;row-gap:3px;
 align-items:end;text-shadow:0 2px 12px #080b09;
}
.experience[data-mode=real] .session h1{grid-column:1;grid-row:1;font-size:.875rem;letter-spacing:.12em;color:#c6c5b4;margin:0 0 3px}
.experience[data-mode=real] .status-line{grid-column:1;grid-row:2;gap:12px;flex-wrap:wrap}
.experience[data-mode=real] .answer{font-size:clamp(2rem,2.8vw,2.8rem);line-height:1.1}
.experience[data-mode=real] .phase-note{font-size:.875rem}
.experience[data-mode=real][data-signal=live] .phase-note{display:none}
.experience[data-mode=real] .session-caption{grid-column:1;grid-row:3;font-size:1.0625rem;line-height:1.25;margin:5px 0 0;max-width:320px;color:#c7c6b8}
.experience[data-mode=real] .dashboard{
 grid-column:2;grid-row:1 / 4;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
 align-items:start;gap:16px 28px;margin:0 0 1px;animation:none;
}
.experience[data-mode=real] .dashboard>div{min-width:0}
.experience[data-mode=real] .dashboard dt{font-size:.875rem;line-height:1.3;margin-bottom:6px;color:#b2b7a7}
.experience[data-mode=real] .dashboard dd{font-size:1rem;line-height:1.45;font-variant-numeric:tabular-nums}
.experience[data-mode=real] .dashboard .game dd{
 font-size:1.125rem;line-height:1.35;max-width:none;max-height:4.1em;overflow:auto;
 scrollbar-width:thin;scrollbar-color:#7a81705c transparent;padding-right:6px;
}
.experience[data-mode=real] .dashboard .game dd:focus-visible{outline:1px solid #dacbaa;outline-offset:4px}
.experience[data-mode=real] .pregame{grid-column:2;grid-row:1 / 4;align-self:end;margin-bottom:3px;font-size:.875rem}
.experience[data-mode=real] .pregame #setup-note{font-size:1.0625rem}
.experience[data-mode=real] .connection-note{grid-column:1 / -1;grid-row:4;margin:8px 0 0;line-height:1.4}
.experience[data-mode=real] .masthead{inset:22px clamp(24px,4vw,64px) auto}
.experience[data-mode=real] .room-label{font-size:1.0625rem;opacity:.66}
.experience[data-mode=real] .motion-toggle{font-size:.875rem;padding:8px 11px;min-height:44px;background:#11171340;border-color:#d3d0ae26}

/* Standby is dim neutral glass, not a bright green unassigned broadcast. */
.experience[data-mode=real] [data-content=UNKNOWN] .tv-picture{--picture-opacity:.94}
.experience[data-mode=real] [data-content=UNKNOWN][data-active=true] .tv-picture{opacity:var(--picture-opacity)}
.experience[data-mode=real] [data-content=UNKNOWN][data-stopping=true] .tv-picture{animation:tv-stop .9s both}
.experience[data-mode=real] [data-content=UNKNOWN][data-active=true] .tv-ambient{opacity:.10;animation:none}
.experience[data-mode=real][data-assigned-active=false] .screen-reflection{opacity:.035}
.experience[data-mode=real][data-any-active=false] .screen-reflection{opacity:0}
/* Keep the warm sign as a wall object, with a tighter light footprint. */
.experience[data-mode=real][data-phase=watching] .sign-spill{opacity:.48}
.experience[data-mode=real][data-phase=watching][data-football-active=false] .sign-spill{opacity:.25}
.experience[data-mode=real][data-phase=watching][data-football-active=false] .frame-sign{--sign-strength:.78;opacity:.78}
.experience[data-mode=real][data-phase=watching][data-football-active=false] .light-bulbs{opacity:.60}
.experience[data-mode=real] .tv-picture .screen-field{opacity:.82}

@media(min-width:1500px){.experience[data-mode=real] .session{bottom:32px;column-gap:54px}}
@media(max-width:1100px){
 .experience[data-mode=real] .session{grid-template-columns:minmax(220px,280px) minmax(0,1fr);column-gap:28px}
 .experience[data-mode=real] .dashboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
 .experience[data-mode=real] .dashboard .game{grid-column:1 / -1}
 .experience[data-mode=real] .dashboard .game dd{max-height:2.7em}
 .experience[data-mode=real] .dashboard dt{margin-bottom:3px}
}
@media(max-width:720px){
 .experience[data-mode=real] .session{display:block;bottom:24px;left:24px;right:24px}
 .experience[data-mode=real] .answer{font-size:2.25rem}
 .experience[data-mode=real] .session-caption{max-width:none}
 .experience[data-mode=real] .dashboard{grid-template-columns:minmax(0,1fr) auto auto;margin-top:18px;gap:12px 18px}
 .experience[data-mode=real] .dashboard .game{grid-column:auto}
 .experience[data-mode=real] .pregame{margin-top:12px}
}
@media(max-width:600px){
 .experience[data-mode=real]{height:max(860px,100svh)}
 .experience[data-mode=real] .scene-viewport{bottom:155px}
 .experience[data-mode=real] .masthead{inset:16px 20px auto}
 .experience[data-mode=real] .session{left:22px;right:22px;bottom:24px}
 .experience[data-mode=real] .session h1{font-size:.875rem}
 .experience[data-mode=real] .dashboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:16px}
 .experience[data-mode=real] .dashboard .game{grid-column:1 / -1}
 .experience[data-mode=real] .dashboard .game dd{font-size:1.125rem;max-height:2.7em}
 .experience[data-mode=real] .look-controls{top:auto;bottom:310px}
 .experience[data-mode=real] .vignette{background:linear-gradient(180deg,#080b0933,transparent 18%,transparent 50%,#101210a6 70%,#101210 100%)}
}

/* The removable set catches the same muted light as the drawn furniture. */
.experience[data-mode=real] .floor-prop{filter:brightness(.67) saturate(.28) contrast(.95)}
.experience[data-mode=real] .floor-tv{filter:drop-shadow(0 4px 3px #05070480)}
.experience[data-mode=real] .light-bulbs{filter:blur(.25px) drop-shadow(0 0 2px #cda36f75)}

/* Recessed glass and correctly proportioned input lettering inside each bezel.
   The room's original pencil texture still shows faintly through the surface. */
.tv-picture{mix-blend-mode:normal;--picture-opacity:.95}
.experience[data-mode=real] [data-tv-id][data-active=true] .tv-picture{opacity:var(--picture-opacity)}
.tv-surface{overflow:hidden}
.room-svg .screen-input{font-family:var(--mono);font-size:12px;letter-spacing:1.6px;fill:#b0bab9;opacity:.48}
.room-svg .screen-title{font-family:var(--mono);font-size:17px;font-weight:400;letter-spacing:-.25px;fill:#e0e4dc}
.room-svg .screen-subtitle{font-family:var(--mono);font-size:16px;letter-spacing:-.25px;fill:#c0c9c1}
.room-svg .screen-demo-label{font-family:var(--mono);font-size:10px;letter-spacing:1px;fill:#bdc6b6;opacity:.5}
.screen-caption{filter:drop-shadow(0 1px 2px #040706b3)}
.screen-inset{opacity:.74}
.experience[data-mode=real] [data-content=UNKNOWN] .screen-title{font-size:16px;fill:#b9c3c6;opacity:.72}
.experience[data-mode=real] [data-content=UNKNOWN] .screen-input{opacity:.38}
.experience[data-mode=real] .tv-picture .screen-field{opacity:.64}
.experience[data-mode=real][data-signal=stale] .screen-caption{opacity:.6}
@media(prefers-reduced-motion:reduce){.tv-picture{filter:none}}