:root{
  --ink:#0b0a10;
  --cream:#efe7d2;
  --ochre:#d8a85a;
  --phosphor:#c9ffd0;
  --box:rgba(14,14,17,.93);
  --pixel:"Pixelify Sans", "VT323", ui-monospace, monospace;
  --mono:"VT323", ui-monospace, monospace;
  --dolly:1.15s;
  --ease:cubic-bezier(.65,0,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--cream);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--pixel);-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-font-smoothing:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}

/* ---------- stage: phone-shaped, centered on desktop ---------- */
#stage{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;overflow:hidden;overflow:clip;background:#07060a}

/* ---------- the pixel room ---------- */
#scene{position:absolute;left:0;top:0;width:180px;height:320px;transform-origin:0 0;will-change:transform}
#scene.dolly{transition:transform var(--dolly) var(--ease)}
#scene canvas{position:absolute;inset:0;width:180px;height:320px;image-rendering:pixelated;image-rendering:crisp-edges}
/* first look at the room: the other reds sit quiet until you've pressed the remote once */
#redMute{opacity:0;transition:opacity .9s ease}
#stage.mute-red #redMute{opacity:1}
.pol .cap{transition:filter .9s ease}
#stage.mute-red .pol .cap{filter:saturate(.2) brightness(.6)}
/* darkness: a light map that lets only the TV and the window through */
#shadeOn{opacity:0}
#shadeSleep,#shadeOn{transition:opacity 1s ease}
#stage[data-state="on"] #shadeSleep{opacity:0}
#stage[data-state="on"] #shadeOn{opacity:1}
/* only two lights: warm daylight through the busted blinds, blue from the TV */
#light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 13% 6% at 20.5% 21.2%, rgba(255,214,150,.16), transparent 100%),
    radial-gradient(ellipse 30% 20% at 20% 30%, rgba(255,204,140,.04), transparent 100%)}
/* the TV's own glow, separate so it can flicker with the screen */
/* --tv: the color the TV throws into the room (set per channel in main.js); it eases between channels */
@property --tv{syntax:'<color>';inherits:true;initial-value:#6ea0ff}
#stage{--tv:#6ea0ff}                         /* changes in step with the picture, no easing */
#tvGlow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 14% 7% at 54.5% 27.2%, color-mix(in srgb, var(--tv) 22%, transparent), transparent 100%),
    radial-gradient(ellipse 30% 16% at 54.5% 28%, color-mix(in srgb, var(--tv) 18%, transparent), transparent 100%)}
#light::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1s ease;
  background:
    radial-gradient(ellipse 20% 10% at 54.5% 27.2%, color-mix(in srgb, var(--tv) 32%, transparent), transparent 100%),
    radial-gradient(ellipse 36% 20% at 54.5% 28.5%, color-mix(in srgb, var(--tv) 22%, transparent), transparent 100%),
    radial-gradient(ellipse 60% 30% at 55% 52%, color-mix(in srgb, var(--tv) 11%, transparent), transparent 100%)}
#stage[data-state="on"] #light::after{opacity:1}

/* invisible hit areas over the TV's pixel CH buttons */
.hit,.bag-hit{position:absolute;border-radius:1px}
.bag-hit{cursor:pointer}
.hit:focus-visible{outline:.5px solid #ffe08a;outline-offset:.5px}
#stage:not(.tv-live) .hit{pointer-events:none}
#stage:not([data-state="sleep"]) .bag-hit,#stage:not([data-state="sleep"]) #fridgeHit{pointer-events:none}

/* ---------- the picture on the TV (DOM, so video/text stay sharp) ---------- */
#screen{position:absolute;overflow:hidden;background:#050806;opacity:0;pointer-events:none;--w:240px;transition:opacity .25s ease}
#stage.tv-live #screen{opacity:1;pointer-events:auto}
#flies{position:absolute;left:0;top:0;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;opacity:0;transition:opacity .5s ease}
#stage.flies #flies{opacity:1}
#screen.hold{opacity:1}                        /* glass stays up while the picture collapses */
#picture{position:absolute;inset:0;transform-origin:50% 50%}
#stage.tv-live #picture.crt{animation:crt-on .7s cubic-bezier(.2,.7,.2,1) both}
/* the glass in front: pixel art at the tube's own resolution (drawn in scene.js) */
.glass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
@keyframes crt-on{
  0%{transform:scale(.02,.006);filter:brightness(12)}
  35%{transform:scale(1,.01);filter:brightness(8)}
  70%{transform:none;filter:brightness(2)}
  100%{transform:none;filter:none}
}
#channel{position:absolute;inset:0}
#channel video,#channel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
.scan{display:none}
#static{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;pointer-events:none}
#static.show{opacity:.92}
/* archive band: weak signal */
#screen.weak #static{opacity:.2}
#screen.weak #static.show{opacity:.92}
#screen.weak #channel{filter:saturate(.45) contrast(.9) brightness(.9)}
.roll{position:absolute;left:0;right:0;height:22%;top:-25%;pointer-events:none;opacity:0;
  background:linear-gradient(transparent,rgba(255,255,255,.08) 40%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.08) 60%,transparent)}
#screen.weak .roll{opacity:1;animation:roll 3.6s linear infinite}
@keyframes roll{to{transform:translateY(560%)}}
#screen.weak #osd{color:#ffb3a8;text-shadow:0 0 6px rgba(255,90,70,.7)}
/* power off: picture collapses to a line, then a dot */
#picture.off{animation:crt-off .42s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes crt-off{
  0%{transform:none;filter:none}
  50%{transform:scale(1,.01);filter:brightness(6)}
  100%{transform:scale(0,.01);filter:brightness(10);opacity:0}
}
#osd{position:absolute;top:7%;right:7%;font-family:var(--mono);font-size:calc(var(--w) * .09);line-height:1;color:var(--phosphor);
  text-shadow:0 0 6px rgba(140,255,170,.85);opacity:0;transition:opacity .15s}
#osd.show{opacity:1}

.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:12% 8% 8%;text-align:center;
  background:radial-gradient(ellipse at 50% 42%,var(--tint,#4d5a35) 0%,color-mix(in srgb, var(--tint,#4d5a35) 45%, #050608) 55%,#050608 100%)}
.card h3{font-family:var(--pixel);font-weight:600;font-size:calc(var(--w) * .1);letter-spacing:.04em;line-height:1;text-shadow:0 0 8px rgba(220,255,230,.5)}
.card p{font-family:var(--mono);font-size:calc(var(--w) * .058);opacity:.8}
.card a{color:var(--phosphor);text-decoration:none;border-bottom:1px solid rgba(201,255,208,.4)}
.card .links{display:flex;gap:1em;flex-wrap:wrap;justify-content:center}
.card .credit{font-size:calc(var(--w) * .036);opacity:.45}
.card.archive{background:radial-gradient(ellipse at 50% 45%,var(--tint,#2a2a33),#060608 88%)}
.card.archive h3{text-shadow:0 0 8px rgba(255,255,255,.35)}
.stamp{font-family:var(--pixel);font-weight:600;font-size:calc(var(--w) * .055);letter-spacing:.12em;color:#ff4a3a;
  border:2px solid #ff4a3a;padding:.1em .5em;transform:rotate(-8deg);text-shadow:0 0 6px rgba(255,60,40,.6);box-shadow:0 0 8px rgba(255,60,40,.35)}
.stamp.float{position:absolute;top:10%;left:8%}
.tap-sound{position:absolute;left:6%;bottom:7%;font-family:var(--mono);font-size:calc(var(--w) * .05);background:rgba(0,0,0,.55);padding:.05em .45em;pointer-events:none}

/* ---------- the remote (own pixel layer, same scale as the wide room) ---------- */
#remote{position:absolute;left:0;top:0;width:180px;height:320px;transform-origin:0 0;pointer-events:none}
#remote .ri{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}
#remote .rl{position:absolute;width:95px;height:172px;transform-origin:0 0}      /* the upright remote, turned into your hand */
#remote canvas{position:absolute;inset:0;width:95px;height:172px;image-rendering:pixelated;image-rendering:crisp-edges}
#remoteB{opacity:0;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:1}}
#power{position:absolute;pointer-events:auto;border-radius:3px}
#power .blink{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(255,70,50,.45),transparent 65%);opacity:0;animation:blink 1.1s steps(1) infinite;pointer-events:none}
#power.press .blink{animation:none;opacity:0}
#remote.dropped .ri{animation:drop .75s cubic-bezier(.55,0,.95,.55) forwards}
#remote.dropped #power{pointer-events:none}
#remote.return .ri{animation:pickup .7s cubic-bezier(.2,.8,.3,1) .35s both}
@keyframes drop{
  0%{transform:none}
  14%{transform:translateY(-2%) rotate(-1deg)}
  100%{transform:translate(8%,80%) rotate(16deg)}
}
@keyframes pickup{0%{transform:translate(8%,80%) rotate(16deg)}100%{transform:none}}

/* ---------- Coffee Talk-style dialogue boxes ---------- */
.dialog{position:absolute;left:50%;transform:translateX(-50%);width:min(88%,420px);
  background:var(--box);border:3px solid #26262c;border-radius:10px;box-shadow:0 0 0 2px #0a0810,0 10px 30px rgba(0,0,0,.6);
  padding:22px 18px 16px;font-size:clamp(17px,4.6vw,21px);line-height:1.35;transition:opacity .3s ease}
.dialog .tag{position:absolute;left:14px;top:-15px;background:#18181c;border:3px solid #26262c;border-radius:6px;padding:1px 10px;
  font-size:.82em;color:var(--ochre);letter-spacing:.04em;white-space:nowrap}
.dialog .next{position:absolute;right:14px;bottom:8px;font-size:.7em;color:var(--cream);animation:bob .9s steps(2) infinite}
@keyframes bob{50%{transform:translateY(3px)}}
#sayHint{top:calc(env(safe-area-inset-top, 0px) + 26px);left:auto;right:12px;transform:none;width:min(62%,300px);font-size:clamp(15px,4vw,19px);opacity:1}
#dialog{bottom:max(18px,env(safe-area-inset-bottom));opacity:0;pointer-events:none}
#stage:not([data-state="sleep"]) #sayHint{opacity:0;pointer-events:none}
#stage.tv-live #dialog{opacity:1}

/* ---------- TV guide: a pixel digest under the TV's blue light; red = tappable ---------- */
#guide{--paper:#c3c7cf;--paper-dk:#a9aeb8;--ink:#1a1b21;--ink-soft:#4a4c56;--red:#c8261c;--red-hi:#ff3b2f;
  position:absolute;left:50%;bottom:0;width:min(88%,400px);height:min(56vh,560px);z-index:3;
  display:flex;flex-direction:column;color:var(--ink);font-family:var(--mono);
  background:
    radial-gradient(circle at 20% 30%,rgba(0,0,0,.05) 0 1px,transparent 1.5px) 0 0/7px 7px,
    radial-gradient(circle at 60% 70%,rgba(255,255,255,.18) 0 1px,transparent 1.5px) 0 0/11px 11px,
    linear-gradient(180deg,transparent 49.6%,rgba(0,0,0,.06) 50%,transparent 50.6%),
    var(--paper);
  border-left:6px solid var(--paper-dk);border-radius:3px 3px 0 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.55),inset 0 0 40px rgba(20,30,60,.25);
  transform:translate(-50%,calc(100% - var(--peek,62px))) rotate(-2.5deg);transform-origin:50% 100%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;opacity:0;pointer-events:none}
#stage.tv-live #guide{opacity:1;pointer-events:auto}
#stage.guide-open #guide{transform:translate(-50%,0) rotate(-.6deg)}
#guideTab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px 8px;text-align:left;flex:none;width:100%;color:var(--ink)}
.g-mast{font-family:var(--pixel);font-weight:600;font-size:30px;line-height:1;letter-spacing:.06em;color:var(--red);animation:gpulse 1.1s steps(1) infinite}
@keyframes gpulse{50%{color:var(--red-hi)}}
.g-sub{font-size:14px;letter-spacing:.08em;color:var(--ink-soft)}
/* faint pencil note scribbled on the guide, pointing at the masthead */
#guideTab{position:relative}
.g-note{position:absolute;left:168px;top:6px;display:flex;align-items:flex-start;gap:0;color:#5d6068;opacity:.62;pointer-events:none;transform:rotate(-4deg);transition:opacity .25s;mix-blend-mode:multiply}
.g-note svg{margin-top:6px;flex:none}
.g-note span{font-family:"Reenie Beanie",cursive;font-size:24px;line-height:1;letter-spacing:.02em;margin-left:-2px;margin-top:-2px;white-space:nowrap}
#stage.guide-open .g-note{opacity:0}
#stage.guide-open .g-mast{animation:none;color:var(--ink)}
#guideClose{position:absolute;top:12px;right:14px;font-family:var(--pixel);font-size:14px;color:var(--red);opacity:0;pointer-events:none;transition:opacity .2s}
#stage.guide-open #guideClose{opacity:1;pointer-events:auto}
#guideBody{flex:1;overflow-y:auto;padding:0 16px 20px;border-top:2px solid var(--ink);margin:0 10px;font-size:18px;line-height:1.25;overscroll-behavior:contain}
.g-kicker{font-family:var(--pixel);font-size:13px;letter-spacing:.14em;margin:10px 0 4px;color:var(--ink-soft)}
.g-grid{list-style:none;border-bottom:1px solid var(--ink-soft);padding-bottom:6px;margin-bottom:10px}
.g-row{display:grid;grid-template-columns:4.2em 1fr auto;gap:6px;align-items:baseline;width:100%;padding:3px 0;text-align:left;font:inherit;color:var(--red)}
button.g-row:hover .n,button.g-row:focus-visible .n{text-decoration:underline}
.g-row.now{color:var(--ink)}
.g-row .c{font-variant-numeric:tabular-nums}
.g-row .tag{background:var(--ink);color:var(--paper);font-size:13px;padding:0 5px}
.g-feature h3{font-family:var(--pixel);font-weight:600;font-size:26px;line-height:1.05;margin:2px 0 4px;text-wrap:balance}
.g-slot{font-size:15px;color:var(--ink-soft)}
.g-status{display:inline-block;border:2px solid var(--ink);padding:0 6px;font-family:var(--pixel);font-size:12px;letter-spacing:.12em;transform:rotate(-3deg);margin:2px 0 6px}
.g-meta{font-size:16px;color:var(--ink-soft);margin-bottom:6px}
.g-log{margin-bottom:8px}
.g-feature h4{font-family:var(--pixel);font-size:12px;letter-spacing:.16em;margin:10px 0 3px;display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
.g-feature h4::after{content:"";flex:1;border-top:1px dotted var(--ink-soft)}
.g-feature dl{display:grid;grid-template-columns:auto 1fr;gap:1px 12px}
.g-feature dt{color:var(--ink-soft)}
.g-fest{list-style:none}
.g-feature blockquote{margin-top:10px;padding:6px 0 0;border-top:1px solid var(--ink-soft)}
.g-feature cite{display:block;font-style:normal;font-size:15px;color:var(--ink-soft);margin-top:2px}
/* dialogue box steps up to make room for the guide; hides while you read */
#stage.tv-live #dialog{z-index:4;min-height:calc(38px + 4.05em);background:#0e0e11}   /* fixed height so the guide above it never jumps while text types */
#stage.guide-open #dialog{opacity:0}

/* ---------- fridge + polaroids ---------- */
#fridgeHit{position:absolute;cursor:pointer}
.pol{position:absolute;width:8px;height:9.6px;padding:.55px .55px 0;background:#b9bab6;transform:rotate(var(--rot));
  box-shadow:0 .5px .8px rgba(0,0,0,.7);display:flex;flex-direction:column;pointer-events:none;transition:opacity .3s,transform .3s}
.pol::after{content:"";position:absolute;inset:0;background:rgba(4,4,8,.74);transition:background 1.2s ease;pointer-events:none}
.pol .ph{display:block;height:6.9px;background:#333 center/cover;filter:grayscale(1) contrast(.9);image-rendering:pixelated}
.pol .cap{position:relative;z-index:1;display:block;height:2.1px;margin:.15px .15px 0;
  background:no-repeat left center/100% 100%;image-rendering:pixelated;image-rendering:crisp-edges}
#stage.at-fridge .pol{pointer-events:auto;cursor:pointer}
#stage.at-fridge .pol::after{background:rgba(10,14,26,.22)}               /* your eyes adjust */
.pol.taken{opacity:0;transform:rotate(var(--rot)) translateY(-1px)}
.pol:focus-visible{outline:.4px solid #ff3b2f;outline-offset:.4px}
#remote .ri{transition:transform .6s cubic-bezier(.4,0,.2,1)}
#remote.lowered .ri{transform:translateY(80%) rotate(8deg)}
#remote.lowered #power{pointer-events:none}
#fridgeSay{bottom:max(18px,env(safe-area-inset-bottom));opacity:0;pointer-events:none}
#stage.at-fridge #fridgeSay{opacity:1;pointer-events:auto}
#stage.holding #fridgeSay{opacity:0;pointer-events:none}
#fridgeBack{margin-top:8px;font-family:var(--pixel);color:#ff3b2f;font-size:.9em}

/* a polaroid in your hand: color comes back */
#photoView{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px max(16px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
  background:rgba(4,5,9,.72);opacity:0;pointer-events:none;transition:opacity .25s ease;perspective:900px}
#stage.holding #photoView{opacity:1;pointer-events:auto}
#pvCard{position:relative;width:min(78vw,330px);aspect-ratio:8/9.6;transform-style:preserve-3d;cursor:pointer;
  transform:rotate(var(--rot,0deg)) scale(.6);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .16s}
#stage.holding #pvCard{transform:rotate(var(--rot,0deg)) scale(1)}
#stage.holding #pvCard.flipped{transform:rotate(var(--rot,0deg)) rotateY(180deg)}
#pvCard.out-left{opacity:0;transform:translateX(-40%) rotate(-12deg)!important}
#pvCard.out-right{opacity:0;transform:translateX(40%) rotate(12deg)!important}
.pv-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.pv-front{background:#ecebe4;padding:5.5% 5.5% 0;display:flex;flex-direction:column}
#pvImg{flex:none;aspect-ratio:1/0.86;background:#222 center/cover;image-rendering:pixelated}
#pvCap{font-family:"Permanent Marker",cursive;color:#c8261c;font-size:clamp(18px,5.6vw,26px);text-align:center;margin:auto 0;transform:rotate(-1.5deg)}
.pv-back{transform:rotateY(180deg);background:#e4e1d6;padding:9%;display:flex;flex-direction:column;gap:12px;
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(40,60,120,.12) 27px 28px)}
#pvNote{font-family:"Permanent Marker",cursive;color:#23232b;font-size:clamp(16px,4.6vw,21px);line-height:1.35}
#pvMeta{margin-top:auto;font-family:var(--mono);color:#55555e;font-size:17px}
.pv-actions{display:flex;align-items:center;gap:22px;font-family:"Permanent Marker",cursive;font-size:19px}
.pv-actions button{color:#ff3b2f}
#pvCount{font-family:var(--mono);color:#8a8a92;font-size:18px}

/* ---------- the front door: the remote up close in a void, then you pull back into the room ---------- */
#void{position:absolute;inset:0;z-index:20;background:#040405;transition:opacity 1.3s ease .2s}
#stage.entered #void{opacity:0;pointer-events:none}
#introRemote{position:absolute;left:0;top:0;width:95px;height:172px;transform-origin:0 0;z-index:21;will-change:transform}
/* boot screen: a still title card, like an old handheld powering on */
#boot>div{opacity:0}
#boot.go>div{opacity:1}
#boot{position:absolute;inset:0;z-index:30;background:#040405;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .45s ease;cursor:pointer}
#boot.done{opacity:0;pointer-events:none}
#boot .b-logo{font-family:var(--pixel);font-weight:600;font-size:clamp(30px,10.5vw,46px);letter-spacing:.08em;color:#c9ccd6;line-height:1}
#boot .b-sub{font-family:var(--pixel);font-size:clamp(14px,4.4vw,18px);letter-spacing:.5em;padding-left:.5em;color:var(--ochre)}
#boot .b-sub::before,#boot .b-sub::after{content:"\2014";letter-spacing:0;margin:0 .6em;color:#5a5650}
#boot .b-copy{position:absolute;bottom:calc(env(safe-area-inset-bottom, 0px) + 26px);font-family:var(--mono);font-size:15px;letter-spacing:.12em;color:#55545c}
#introRemote.pull{transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
#introRemote canvas{position:absolute;inset:0;width:95px;height:172px;image-rendering:pixelated;image-rendering:crisp-edges}
#irB{opacity:0;animation:blink 1.1s steps(1) infinite}
.ir-halo{position:absolute;left:24px;top:14px;width:47px;height:37px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,59,47,.4),transparent 65%);opacity:0;animation:blink 1.1s steps(1) infinite}
#introBtn{position:absolute;left:34px;top:24px;width:27px;height:17px;border-radius:1px}
#introBtn:focus-visible{outline:.6px solid #ff3b2f;outline-offset:1.5px}
#introRemote.press #irB,#introRemote.press .ir-halo{animation:none;opacity:0}
#stage.intro #sayHint{opacity:0}
#stage.intro.saying #sayHint{opacity:1;z-index:25}
#stage.intro #remote{visibility:hidden}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--dolly:.01s}
  #power .blink{animation:none;opacity:.6}
  #stage.tv-live #picture.crt{animation:none}
  #picture.off{animation:none;opacity:0}
  #remote.dropped .ri{animation:none;opacity:0}
  #remote.return .ri{animation:none}
  #remoteB{animation:none}
  #screen.weak .roll{animation:none}
  .g-mast{animation:none}
  #irB,.ir-halo{animation:none}
  #introRemote.pull{transition-duration:.01s}
  #void{transition-duration:.01s}
  #pvCard,#remote .ri{transition:none}
  #guide{transition:none}
}