/* Shared by the onboarding sketches. Palette = medians of the game's own art (docs/runner-design.md "Design"). */
:root{
  --cab:#262120;       /* cab interior */
  --titanium:#a89894;  /* grille metal */
  --gold:#d0ac68;      /* emblem */
  --sunset:#d07028;    /* porthole sky */
  --glass:#5cd040;     /* the game's selected-button ring */
  --phosphor:#c8f5b4;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{background:#000;color:var(--titanium);font:13px/1.35 Tahoma,"Segoe UI",system-ui,sans-serif;overflow:hidden}
.px{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
:focus-visible{outline:2px solid var(--glass);outline-offset:3px}

/* CRT glass: scanlines + slot mask + vignette + sheen. Put .crt on the screen box; content goes inside .crt-in. */
.crt{position:relative;overflow:hidden;background:#020302;isolation:isolate}
.crt-in{position:absolute;inset:0;filter:saturate(1.12) contrast(1.06)}
.crt::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.13) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(to right,rgba(255,40,40,.02) 0 1px,rgba(40,255,40,.02) 1px 2px,rgba(40,40,255,.02) 2px 3px);
  mix-blend-mode:multiply}
.crt::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%),
    radial-gradient(60% 40% at 30% 18%,rgba(255,255,255,.07),transparent 70%)}
.crt[data-power=off] .crt-in{opacity:0}
.crt[data-power=on] .crt-in{animation:crt-on 1.1s cubic-bezier(.2,.7,.2,1) backwards}
.crt[data-power=on]::before{animation:crt-flicker 6s steps(1) infinite}
.crt[data-power=down] .crt-in{animation:crt-off .5s ease-in forwards}
@keyframes crt-off{0%{transform:none}45%{transform:scale(1,.004);filter:brightness(6)}100%{transform:scale(0,.004);filter:brightness(10)}}
@keyframes crt-on{
  0%{transform:scale(.002,.003);filter:brightness(12)}
  18%{transform:scale(1,.004);filter:brightness(9)}
  45%{transform:scale(1,1);filter:brightness(2.4) saturate(.6)}
  100%{transform:none;filter:saturate(1.12) contrast(1.06)}}
@keyframes crt-flicker{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
html{overflow:hidden}

/* The room: the user's photo (room.png, 1536 x 1024) scaled and placed as one piece (--ss, --sx, --sy, Kit.monitor).
   The 800 x 600 tube is mapped onto the photo's screen by a perspective transform (Kit.monitor: corners fitted to the glass
   edges) and clipped to the traced glass outline (.screenclip); the photo's own black screen shows when it is off.
   The room can be held and dragged a little (.drag / .settle). */
html,body{background:#1d140e}
.scene{position:fixed;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--ss,1));
  cursor:grab;touch-action:none}
.scene.drag{cursor:grabbing}
.scene.settle{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.scene.zoom{transition:transform 1.9s cubic-bezier(.65,0,.25,1)} /* room view <-> screen view */
.scene .room{position:absolute;left:0;top:0;width:1536px;height:1024px;display:block;pointer-events:none;user-select:none}
.scene .glass{position:absolute;left:409px;top:117px;width:672px;height:479px;border-radius:8px;pointer-events:none;transition:box-shadow .8s}
.scene .glass.on{box-shadow:0 0 60px 10px rgba(110,150,230,.18)}
.screenclip{position:absolute;left:0;top:0;width:1536px;height:1024px;pointer-events:none}
.tube{position:absolute;left:0;top:0;width:800px;height:600px;transform-origin:0 0;background:transparent;pointer-events:auto;cursor:default}
.tube .stage{position:absolute;left:0;top:0;width:800px;height:600px;overflow:hidden}
/* the game's own picture (mode switch -> game end): no scanlines, mask, vignette, sheen, colour filter or curve */
.crt.clean::before,.crt.clean::after{display:none}
.crt.clean .crt-in{filter:none}
/* the photo's LED (938,665) and power button (961..1000 x 646..684) */
.scene .led{position:absolute;left:934px;top:661px;width:8px;height:8px;border-radius:50%;transition:background .2s,box-shadow .2s}
.scene .led.on{background:#7dff6a;box-shadow:0 0 6px 2px rgba(125,255,106,.8)}
.scene .pwr{position:absolute;left:961px;top:646px;width:40px;height:39px;border-radius:3px}
.scene .pwr:active{background:rgba(0,0,0,.12)}
.scene .pwr:focus-visible{outline:2px solid var(--glass);outline-offset:2px}
/* Portrait windows (Kit.monitor, width : height < 0.8): room-mobile.png, 941 x 1672. Its dark glass spans x 206..733,
   y 555..952 (scale 528 / 672 = .786 of room.png, so the glow shrinks by that); LED = the dark dot x 622..627,
   y 1007..1012 (centre 625,1010); power button = its black frame x 641..673, y 994..1025. */
.scene.tall,.scene.tall .room,.scene.tall .screenclip{width:941px;height:1672px}
.scene.tall .glass{left:206px;top:555px;width:528px;height:398px;border-radius:6px}
.scene.tall .glass.on{box-shadow:0 0 47px 8px rgba(110,150,230,.18)}
.scene.tall .led{left:622px;top:1007px;width:6px;height:6px}
.scene.tall .pwr{left:641px;top:994px;width:33px;height:32px}