@font-face { font-family: "VT323"; src: url("/fonts/vt323.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bungee"; src: url("/fonts/bungee.woff2") format("woff2"); font-display: swap; }

:root {
  --lime: #d8ff1a;
  --lime-glow: rgba(216, 255, 26, .55);
  --wall: #0a0a0a;
  /* TV width: fits height and width, leaves room for the labels on the right */
  --W: min(76vw, calc((100svh - 120px) * 1.2), 1080px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--wall);
  color: var(--lime);
  font-family: "VT323", ui-monospace, Menlo, monospace;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }

/* ---------- room ---------- */
.room {
  position: fixed; inset: 0;
  background:
    radial-gradient(55% 45% at 46% 52%, rgba(216,255,26,.06), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, #1a1917 0%, #0d0d0c 60%, #050505 100%);
}
.room::after {
  content: ""; position: absolute; inset: 0; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- stage: the photo TV + its labels ---------- */
.stage { position: relative; width: var(--W); transform: translateX(-6%); container-type: inline-size; }
.tv {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1680 / 1377;
  filter: drop-shadow(0 2.5cqw 3cqw rgba(0,0,0,.75));
}
.tv-img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; z-index: 2; }

/* masking tape holding the cut-out to the wall */
.tape {
  position: absolute; z-index: 4; width: 14cqw; height: 4cqw;
  background: linear-gradient(rgba(255,255,255,.12), rgba(0,0,0,.05)), #d9cfb4;
  opacity: .82;
  clip-path: polygon(2% 8%, 6% 0, 12% 10%, 18% 2%, 24% 9%, 32% 1%, 40% 8%, 48% 0, 56% 9%, 64% 1%, 72% 8%, 80% 0, 88% 9%, 94% 2%, 100% 10%, 98% 90%, 94% 100%, 88% 92%, 80% 100%, 72% 91%, 64% 99%, 56% 90%, 48% 100%, 40% 92%, 32% 99%, 24% 91%, 18% 100%, 12% 90%, 6% 98%, 0 92%);
}
.tape-a { left: -3cqw; top: 1cqw; transform: rotate(-24deg); }
.tape-b { right: 2cqw; bottom: 9cqw; transform: rotate(-12deg); width: 11cqw; }

/* ---------- picture tube (behind the bezel) ---------- */
.screen {
  position: absolute; z-index: 1;
  left: 10%; top: 14.2%; width: 69.5%; height: 68.6%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #0c140c 0%, #040604 75%);
  isolation: isolate;
}
.screen.off { background: radial-gradient(ellipse at 45% 40%, #2a2e2a 0%, #151815 55%, #0b0c0b 100%); }
.screen.off .picture, .screen.off .noise, .screen.off .osd, .screen.off .win { display: none; }

.picture {
  position: absolute; inset: 0;
  animation: flicker 4s steps(60) infinite;
  filter: drop-shadow(.22cqw 0 0 rgba(255,0,90,.35)) drop-shadow(-.22cqw 0 0 rgba(0,190,255,.35));
}
.channel {
  position: absolute;
  inset: 9% 9% 9% 8%; /* stay inside the visible, round-cornered glass */
  display: none;
  grid-auto-rows: min-content;
  place-items: center; align-content: center;
  gap: 1cqw;
  text-align: center;
}
.channel.on { display: grid; }

.screen.rolling .picture { animation: roll .38s cubic-bezier(.3,.6,.4,1); }
.screen.booting .picture { animation: boot 1.1s cubic-bezier(.2,.8,.2,1) both; }
.screen.shutting .picture { animation: shut .5s cubic-bezier(.6,0,.8,.2) both; }

@keyframes flicker { 0%,100% { opacity: 1; } 47% { opacity: .96; } 49% { opacity: 1; } 83% { opacity: .98; } }
@keyframes roll {
  0% { transform: translateY(-60%) skewX(6deg); filter: blur(2px) brightness(1.6); }
  60% { transform: translateY(8%) skewX(-2deg); }
  100% { transform: none; }
}
@keyframes boot {
  0% { transform: scale(.02, .004); filter: brightness(6); }
  35% { transform: scale(1, .006); filter: brightness(4); }
  60% { transform: scale(1, 1.08); filter: brightness(1.8); }
  100% { transform: none; filter: none; }
}
@keyframes shut {
  0% { transform: none; filter: brightness(1); }
  55% { transform: scale(1, .006); filter: brightness(4); }
  100% { transform: scale(0, .004); filter: brightness(8); }
}

/* overlays */
.noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .07; mix-blend-mode: screen; pointer-events: none; transition: opacity .12s; }
.screen.static .noise { opacity: .9; mix-blend-mode: normal; }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.42) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.scanlines::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(transparent, rgba(216,255,26,.035), transparent); animation: bar 7s linear infinite; }
.screen.off .scanlines::after { display: none; }
@keyframes bar { from { top: -20%; } to { top: 110%; } }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7) 100%); }
.glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 35% at 28% 18%, rgba(255,255,255,.1), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.05), transparent 35%); }
.osd {
  position: absolute; top: 9%; right: 10%; z-index: 3;
  display: grid; justify-items: end;
  font-size: 3.4cqw; line-height: .9;
  text-shadow: 0 0 .8cqw var(--lime-glow);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.osd #osdName { font-size: 1.8cqw; opacity: .8; }
.osd.show { opacity: 1; }
.win {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  font-family: "Bungee", sans-serif; font-size: 9cqw; color: var(--lime);
  text-shadow: 0 0 2cqw var(--lime-glow), .4cqw .4cqw 0 #3b4a00;
  opacity: 0;
}
.win.on { animation: winpop 1.3s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes winpop {
  0% { opacity: 0; transform: scale(.3) rotate(-8deg); }
  25% { opacity: 1; transform: scale(1.1) rotate(-4deg); }
  80% { opacity: 1; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: scale(1.15) rotate(-4deg); }
}

/* ---------- screen content ---------- */
.type { margin: 0; min-height: 2.3em; font-size: 3.3cqw; line-height: 1.15; letter-spacing: .02em; text-shadow: 0 0 .8cqw var(--lime-glow); }
.type .cur { display: inline-block; width: .55em; height: .95em; margin-left: .05em; vertical-align: -.1em; background: var(--lime); animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hint { margin: 0; font-size: 2cqw; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.game { display: grid; justify-items: center; gap: .6cqw; animation: fadein .5s both; }
.game[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; transform: translateY(1cqw); } }

.logo-btn { width: 12cqw; aspect-ratio: 1; background: none; border: 0; padding: 0; cursor: pointer; filter: drop-shadow(0 0 1cqw var(--lime-glow)); }
.logo-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* turret mini game */
.turret { width: 40cqw; height: auto; overflow: visible; touch-action: none; filter: drop-shadow(0 0 .7cqw var(--lime-glow)); }
.turret .grip { cursor: ns-resize; outline: none; }
.turret .grip:focus-visible .cap { stroke: #fff; }

/* GOOD mini game */
.good-row { position: relative; display: flex; gap: 1.2cqw; height: 14cqw; align-items: center; touch-action: none; }
.good-row::before { content: ""; position: absolute; left: -2cqw; right: -2cqw; top: 50%; border-top: .25cqw dashed rgba(216,255,26,.28); }
.letter {
  position: relative;
  font-family: "Bungee", sans-serif; font-size: 7.4cqw; line-height: 1;
  color: var(--lime); background: none; border: 0; padding: 0 .1em; cursor: ns-resize; touch-action: none;
  transform: translateY(calc(var(--o, 0) * 1em));
  text-shadow: 0 0 1cqw var(--lime-glow);
}
.letter.ok { cursor: default; color: #f2ffb0; text-shadow: 0 0 1.6cqw var(--lime), .3cqw .3cqw 0 #3b4a00; animation: lock .35s cubic-bezier(.2,1.6,.4,1); }
.letter:focus-visible { outline: .2cqw dashed var(--lime); outline-offset: .4cqw; }
@keyframes lock { 50% { transform: translateY(0) scale(1.18); } }

/* portfolio */
.folio { gap: 1cqw; }
.factory { position: relative; width: 44cqw; height: 13cqw; }
.press { position: absolute; left: 50%; top: -1cqw; width: 6cqw; transform: translateX(-50%); z-index: 2; }
.press-arm { width: 1.3cqw; height: 3.6cqw; margin: 0 auto; background: repeating-linear-gradient(0deg, var(--lime) 0 .35cqw, transparent .35cqw .7cqw); opacity: .7; }
.press-head { width: 6cqw; height: 2cqw; border-radius: .4cqw; background: var(--lime); box-shadow: 0 0 1cqw var(--lime-glow); animation: stamp 1.6s cubic-bezier(.7,0,.3,1) .9s infinite; }
@keyframes stamp { 0%,30% { transform: translateY(0); } 42% { transform: translateY(1.3cqw) scaleY(.9); } 55%,100% { transform: translateY(0); } }
.belt { position: absolute; left: 0; right: 0; bottom: 0; height: 8cqw; }
.belt-line { position: absolute; left: 0; right: 0; bottom: 1.6cqw; height: .35cqw; background: var(--lime); box-shadow: 0 0 .8cqw var(--lime-glow); }
.rollers { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 1.4cqw; }
.rollers i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; border: .3cqw solid var(--lime); background: conic-gradient(var(--lime) 0 25%, transparent 0 50%, var(--lime) 0 75%, transparent 0); animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cards { position: absolute; inset: 0 0 2cqw 0; overflow: hidden; }
.card { position: absolute; bottom: 0; left: 0; width: 4.2cqw; height: 5.8cqw; border-radius: .45cqw; border: .25cqw solid var(--lime); background: #0a0f05; display: grid; place-items: center; animation: conveyor 6.4s linear infinite; }
.card svg { width: 72%; opacity: 0; animation: printed 6.4s steps(1) infinite; }
@keyframes conveyor { from { transform: translateX(-5cqw); } to { transform: translateX(46cqw); } }
@keyframes printed { 0%,49.9% { opacity: 0; } 50%,100% { opacity: 1; } }
.cf-title { margin: .4cqw 0 0; font-family: "Bungee", sans-serif; font-weight: 400; font-size: 4.6cqw; line-height: 1; color: var(--lime); text-shadow: 0 0 1.2cqw var(--lime-glow), .3cqw .3cqw 0 #3b4a00; transform: rotate(-3deg); }

/* H·X·O */
.hxo { position: relative; width: 34cqw; aspect-ratio: 300 / 220; }
.hxo-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .8cqw var(--lime-glow)); }
.hxo-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.hxo-cells button { background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.hxo-cells button:disabled { cursor: default; }
.hxo-cells button:focus-visible { outline: .2cqw dashed var(--lime); outline-offset: -.8cqw; }
.hxo-cells svg { width: 58%; height: 70%; overflow: visible; filter: drop-shadow(0 0 .6cqw var(--lime-glow)); }
.hxo-letter { font-family: "Bungee", sans-serif; font-size: 5cqw; line-height: 1; color: var(--lime); text-shadow: 0 0 1cqw var(--lime-glow); animation: pop .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.hxo-status button { background: none; border: 0; padding: 0 .4em; cursor: pointer; text-decoration: underline; letter-spacing: inherit; text-transform: inherit; }

/* ---------- real knobs from the photo ---------- */
.knob {
  position: absolute; z-index: 3;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1);
}
.knob::before { content: ""; position: absolute; inset: -45%; border-radius: 50%; } /* bigger hit area */
.knob img { display: block; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.knob:focus-visible { outline: .3cqw solid var(--lime); outline-offset: .3cqw; }
.k-dial  { left: 84.94%;  top: 24.473%; width: 8.333%; height: 10.167%; }
.k-vol   { left: 86.25%;  top: 40.305%; width: 5.357%; height: 6.536%; }
.k-power { left: 86.131%; top: 53.086%; width: 5.595%; height: 6.826%; }
.k-dial img, .k-vol img { transition: transform .35s cubic-bezier(.3,1.5,.5,1); transform: rotate(var(--rot, 0deg)); }
.k-power:active, .k-power.pressed { transform: scale(.9); }
.k-power[aria-pressed="false"] { box-shadow: 0 0 0 .35cqw var(--lime), 0 0 3cqw .6cqw var(--lime-glow); animation: beckon 1.6s ease-in-out infinite; }
@keyframes beckon { 50% { box-shadow: 0 0 0 .35cqw var(--lime), 0 0 5cqw 1.4cqw var(--lime-glow); } }

/* ---------- Dymo label tape ---------- */
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.dymo {
  pointer-events: auto;
  position: absolute; left: 94.5%;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
  font-size: max(12px, 1.9cqw); letter-spacing: .14em; white-space: nowrap;
  color: #f4f4f4;
  padding: .55em .9em .5em;
  border: 0; border-radius: .18em; cursor: pointer;
  background: linear-gradient(rgba(255,255,255,.12), transparent 30%, rgba(0,0,0,.25)), #141414;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 .35em .6em rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  transform: rotate(var(--r, 0deg));
  transition: transform .08s, box-shadow .08s, opacity .4s;
}
.dymo:active, .dymo.pressed { transform: translateY(2px) rotate(var(--r, 0deg)); box-shadow: 0 .15em .3em rgba(0,0,0,.5); }
.dymo:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.l-up    { top: 22.5%; --r: -3deg; }
.l-down  { top: 30.5%; --r: 2deg; }
.l-power { top: 53.5%; --r: -2deg; background: linear-gradient(rgba(255,255,255,.18), transparent 30%, rgba(0,0,0,.25)), #8fb300; color: #fff; }
body.off .l-up, body.off .l-down { opacity: .35; }

/* ---------- landing mask: everything dark but the power switch ---------- */
.mask {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: rgba(3,3,3,.94);
  -webkit-mask-image:
    radial-gradient(circle at var(--k-x, 80%) var(--k-y, 55%), transparent 0 var(--k-r, 40px), #000 calc(var(--k-r, 40px) + 30px)),
    radial-gradient(circle at var(--l-x, 90%) var(--l-y, 55%), transparent 0 var(--l-r, 60px), #000 calc(var(--l-r, 60px) + 30px));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at var(--k-x, 80%) var(--k-y, 55%), transparent 0 var(--k-r, 40px), #000 calc(var(--k-r, 40px) + 30px)),
    radial-gradient(circle at var(--l-x, 90%) var(--l-y, 55%), transparent 0 var(--l-r, 60px), #000 calc(var(--l-r, 60px) + 30px));
  mask-composite: intersect;
  transition: opacity 1.2s ease;
}
.mask.gone { opacity: 0; }

.nojs { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; color: #999; font-family: sans-serif; }

/* ---------- portrait / phones ---------- */
@media (max-aspect-ratio: 1/1) {
  :root { --W: min(96vw, calc((100svh - 140px) * 1.2)); }
  .stage { transform: none; }
  .labels { position: static; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
  .dymo { position: relative; left: auto; top: auto; font-size: 15px; min-height: 44px; }
  .type { font-size: 3.7cqw; }
  .hint { font-size: 2.5cqw; }
  .logo-btn { width: 12cqw; }
  .turret { width: 42cqw; }
  .good-row { height: 18cqw; }
  .letter { font-size: 10cqw; }
  .factory { width: 54cqw; }
  .cf-title { font-size: 6cqw; }
  .hxo { width: 46cqw; }
  .hxo-letter { font-size: 7cqw; }
  .osd { font-size: 5cqw; } .osd #osdName { font-size: 2.8cqw; }
  .channel { inset: 8% 8% 8% 7%; gap: 1.2cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .picture, .scanlines::after, .press-head, .rollers i, .card, .card svg, .k-power { animation: none !important; }
  .card svg { opacity: 1; }
  .screen.booting .picture, .screen.rolling .picture, .screen.shutting .picture { animation: none; }
}