:root{
  --bg:#0a0a12;
  --bg2:#0e0e1c;
  --ink:#e9e9f5;
  --dim:#7d7d9a;
  --magenta:#ff2e93;
  --cyan:#00f0ff;
  --amber:#ffb627;
  --green:#39ff7a;
  --grid: rgba(0,240,255,0.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'VT323',monospace;overflow-x:hidden}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,46,147,0.18), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(0,240,255,0.14), transparent 55%),
    linear-gradient(180deg,#0b0b18 0%, #07070f 100%);
  position:relative;
}

/* CRT scanlines */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;
}
/* CRT vignette + flicker */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:61;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  animation:flicker 4.2s infinite steps(1);
}
@keyframes flicker{
  0%,98%,100%{opacity:1}
  99%{opacity:0.92}
  99.4%{opacity:1}
  99.6%{opacity:0.85}
}

/* faint grid floor */
.grid-floor{
  position:fixed;left:0;right:0;bottom:0;height:38vh;pointer-events:none;z-index:0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,240,255,0.05) 60%, rgba(255,46,147,0.08) 100%),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 60px);
  transform:perspective(600px) rotateX(60deg);
  transform-origin:bottom;
  mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}

h1,h2,h3,h4,.pixel{font-family:'Press Start 2P',monospace;letter-spacing:0.02em;line-height:1.4}

/* TOP MARQUEE */
.marquee{
  position:relative;z-index:5;
  border-bottom:2px solid rgba(255,46,147,0.35);
  background:linear-gradient(180deg, rgba(255,46,147,0.08), transparent);
  overflow:hidden;height:36px;display:flex;align-items:center;
}
.marquee-track{
  display:flex;gap:48px;white-space:nowrap;animation:scroll 40s linear infinite;
  font-family:'Press Start 2P',monospace;font-size:10px;color:var(--amber);
  text-shadow:0 0 6px rgba(255,182,39,0.6);
}
.marquee-track span{display:inline-flex;align-items:center;gap:14px}
.marquee-track .dot{color:var(--magenta)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HEADER */
header{
  position:relative;z-index:4;
  padding:28px 32px 0;display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:14px}
.brand .logo{
  width:46px;height:46px;display:grid;place-items:center;
  border:2px solid var(--cyan); border-radius:6px;
  background:radial-gradient(circle at 30% 30%, rgba(0,240,255,0.25), transparent 60%);
  box-shadow:0 0 14px rgba(0,240,255,0.45), inset 0 0 12px rgba(0,240,255,0.25);
  font-family:'Press Start 2P',monospace;color:var(--cyan);font-size:18px;
  text-shadow:0 0 6px var(--cyan);
}
.brand .name{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--ink);text-shadow:0 0 6px rgba(255,255,255,0.25)}
.brand .name b{color:var(--magenta);text-shadow:0 0 8px rgba(255,46,147,0.7)}
.brand .sub{font-size:18px;color:var(--dim);margin-top:2px;letter-spacing:0.08em}

.top-actions{display:flex;align-items:center;gap:14px}
.credits{
  font-family:'Press Start 2P',monospace;font-size:10px;color:var(--green);
  text-shadow:0 0 6px rgba(57,255,122,0.6);
}
.credits b{color:var(--amber);text-shadow:0 0 6px rgba(255,182,39,0.6)}
.about-btn{
  appearance:none;border:2px solid var(--amber);background:transparent;color:var(--amber);
  font-family:'Press Start 2P',monospace;font-size:10px;padding:10px 14px;cursor:pointer;
  text-shadow:0 0 6px rgba(255,182,39,0.6); box-shadow:0 0 0 rgba(255,182,39,0);
  transition:transform .12s, box-shadow .2s, background .2s;
  position:relative;
}
.about-btn:hover{background:rgba(255,182,39,0.1);box-shadow:0 0 14px rgba(255,182,39,0.55);transform:translateY(-1px)}
.about-btn::before{content:"►";margin-right:8px;color:var(--magenta)}

/* HERO TITLE */
.hero{
  position:relative;z-index:3;
  padding:48px 32px 28px;text-align:center;
}
.hero .small{
  font-family:'Press Start 2P',monospace;color:var(--cyan);font-size:11px;
  text-shadow:0 0 8px rgba(0,240,255,0.7);letter-spacing:0.18em;margin-bottom:18px;
}
.title{
  font-family:'Press Start 2P',monospace;font-size:clamp(34px,7vw,72px);line-height:1.05;
  color:#fff;
  text-shadow:
    0 0 0 #fff,
    3px 3px 0 var(--magenta),
    6px 6px 0 var(--cyan),
    0 0 22px rgba(255,46,147,0.35);
}
.title .glow{color:var(--amber);text-shadow:3px 3px 0 var(--magenta),6px 6px 0 var(--cyan), 0 0 18px rgba(255,182,39,0.6)}
.insert{
  margin-top:26px;font-family:'Press Start 2P',monospace;font-size:14px;color:var(--magenta);
  text-shadow:0 0 12px rgba(255,46,147,0.7);
  animation:blink 1s steps(2) infinite;letter-spacing:0.2em;
}
@keyframes blink{50%{opacity:0}}

/* HUD strip */
.hud{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  margin:8px 32px 0;padding:8px 14px;
  border-top:1px dashed rgba(0,240,255,0.25);
  border-bottom:1px dashed rgba(0,240,255,0.25);
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--cyan);
  text-shadow:0 0 6px rgba(0,240,255,0.6);
}
.hud .col{display:flex;gap:20px}
.hud .v{color:var(--ink)}

/* CABINET ROW */
.cabinets{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
  padding:48px 32px 32px;max-width:1240px;margin:0 auto;
}
@media (max-width:900px){ .cabinets{grid-template-columns:1fr} }

.cab{
  position:relative; padding:14px 14px 18px;
  background:linear-gradient(180deg, #14142a 0%, #0c0c1a 100%);
  border:2px solid rgba(0,240,255,0.35);
  border-radius:6px;
  box-shadow:
    0 0 0 2px #000,
    0 0 22px rgba(0,240,255,0.15),
    inset 0 0 22px rgba(0,0,0,0.6);
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s;
}
.cab:hover{
  transform:translateY(-4px);
  border-color:var(--magenta);
  box-shadow:
    0 0 0 2px #000,
    0 0 28px rgba(255,46,147,0.45),
    inset 0 0 22px rgba(0,0,0,0.6);
}

.cab .marquee-top{
  display:flex;align-items:center;justify-content:space-between;
  background:#000;border:1px solid rgba(255,46,147,0.4);
  padding:6px 10px;border-radius:3px;margin-bottom:10px;
}
.cab .marquee-top .id{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--magenta);text-shadow:0 0 6px rgba(255,46,147,0.7)}
.cab .marquee-top .stat{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--green);text-shadow:0 0 6px rgba(57,255,122,0.7);display:flex;align-items:center;gap:6px}
.led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.4s infinite}
.led.amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}
@keyframes pulse{50%{opacity:0.35}}

/* SCREEN AREA */
.screen{
  position:relative; aspect-ratio:1/1; border-radius:4px; overflow:hidden;
  background:#000;
  border:2px solid #1a1a30;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(0,240,255,0.2);
}
.screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.screen-bg{position:absolute;inset:0}

/* WAVELENGTH SCREEN */
.wv-bg{
  background:
    radial-gradient(circle at 50% 55%, rgba(255,46,147,0.0) 28%, rgba(255,46,147,0.6) 30%, rgba(255,46,147,0) 32%),
    radial-gradient(circle at 50% 55%, rgba(255,182,39,0.0) 38%, rgba(255,182,39,0.55) 40%, rgba(255,182,39,0) 42%),
    radial-gradient(circle at 50% 55%, rgba(0,240,255,0.0) 50%, rgba(0,240,255,0.5) 52%, rgba(0,240,255,0) 54%),
    radial-gradient(circle at 50% 55%, rgba(57,255,122,0.0) 62%, rgba(57,255,122,0.45) 64%, rgba(57,255,122,0) 66%),
    #060614;
  animation:wvpulse 3.8s ease-in-out infinite;
}
@keyframes wvpulse{
  0%,100%{filter:hue-rotate(0deg) brightness(1)}
  50%{filter:hue-rotate(20deg) brightness(1.25)}
}
.wv-needle{
  position:absolute;left:50%;bottom:18%;width:2px;height:55%;
  background:linear-gradient(180deg, var(--amber), rgba(255,182,39,0));
  transform-origin:bottom center;transform:translateX(-50%) rotate(-12deg);
  box-shadow:0 0 10px rgba(255,182,39,0.9);
  animation:needle 4.2s ease-in-out infinite;
}
@keyframes needle{
  0%,100%{transform:translateX(-50%) rotate(-22deg)}
  50%{transform:translateX(-50%) rotate(22deg)}
}
.wv-dot{
  position:absolute;left:50%;bottom:18%;width:10px;height:10px;border-radius:50%;
  background:var(--amber);transform:translate(-50%,50%);
  box-shadow:0 0 14px var(--amber);
}

/* MEGA TICTACTOE SCREEN */
.tt-bg{background:#0a0a18}
.tt-grid{
  position:absolute;inset:12%;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:6px;
}
.tt-cell{
  border:1px solid rgba(0,240,255,0.55); position:relative;
  background:rgba(0,240,255,0.03);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:1px;padding:2px;
}
.tt-mini{border:1px solid rgba(0,240,255,0.18);display:grid;place-items:center;font-family:'Press Start 2P',monospace;font-size:6px}
.tt-mini.x{color:var(--magenta);text-shadow:0 0 6px rgba(255,46,147,0.8)}
.tt-mini.o{color:var(--cyan);text-shadow:0 0 6px rgba(0,240,255,0.8)}
.tt-cursor{
  position:absolute;width:18px;height:18px;border:2px solid var(--amber);
  box-shadow:0 0 10px var(--amber);
  animation:ttmove 5s steps(9) infinite;
  left:14%;top:14%;
}
@keyframes ttmove{
  0%{left:14%;top:14%}
  11%{left:42%;top:14%}
  22%{left:70%;top:14%}
  33%{left:14%;top:42%}
  44%{left:42%;top:42%}
  55%{left:70%;top:42%}
  66%{left:14%;top:70%}
  77%{left:42%;top:70%}
  88%{left:70%;top:70%}
  100%{left:14%;top:14%}
}

/* COMING SOON SCREEN */
.cs-bg{background:repeating-linear-gradient(45deg,#1a1a02 0 16px,#0a0a00 16px 32px)}
.cs-tape{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,#000 14px 28px);
  height:36px;display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:10px;color:#000;
}
.cs-tape span{background:var(--amber);padding:4px 10px}
.cs-blink{
  position:absolute;top:14%;left:0;right:0;text-align:center;
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--amber);
  text-shadow:0 0 8px rgba(255,182,39,0.7);
  animation:blink 1.1s steps(2) infinite;
}
.cs-foot{
  position:absolute;bottom:14%;left:0;right:0;text-align:center;
  font-family:'Press Start 2P',monospace;font-size:7px;color:rgba(255,182,39,0.6);
}

/* CABINET INFO */
.cab .info{padding:14px 6px 4px}
.cab .title-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.cab .gname{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--ink)}
.cab .gname.wv{color:var(--magenta);text-shadow:0 0 8px rgba(255,46,147,0.6)}
.cab .gname.tt{color:var(--cyan);text-shadow:0 0 8px rgba(0,240,255,0.6)}
.cab .gname.cs{color:var(--amber);text-shadow:0 0 8px rgba(255,182,39,0.6)}
.cab .gnum{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim)}
.cab .blurb{font-family:'VT323',monospace;font-size:18px;line-height:1.25;color:#cfcfe6;min-height:96px}
.cab .meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim)}
.cab .meta .stars{color:var(--amber);letter-spacing:2px}

.play{
  display:block;width:100%;margin-top:14px;padding:12px;
  background:#000;border:2px solid var(--green);color:var(--green);
  font-family:'Press Start 2P',monospace;font-size:11px;cursor:pointer;
  text-shadow:0 0 6px rgba(57,255,122,0.7);
  box-shadow:0 0 0 rgba(57,255,122,0);
  transition:transform .12s, box-shadow .2s, background .2s;
  text-decoration:none;text-align:center;
  position:relative;
}
.play:hover{transform:translateY(-1px);box-shadow:0 0 14px rgba(57,255,122,0.6);background:rgba(57,255,122,0.07)}
.play .arrow{display:inline-block;animation:blink 1s steps(2) infinite;margin-right:8px}
.play.disabled{border-color:var(--dim);color:var(--dim);text-shadow:none;cursor:not-allowed}
.play.disabled:hover{transform:none;box-shadow:none;background:#000}

/* FOOTER */
footer{
  position:relative;z-index:3;
  margin-top:24px;padding:24px 32px 36px;text-align:center;
  border-top:1px dashed rgba(255,46,147,0.25);
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);
}
footer b{color:var(--cyan);text-shadow:0 0 6px rgba(0,240,255,0.5)}
footer .hi{color:var(--magenta);text-shadow:0 0 6px rgba(255,46,147,0.6)}

/* ABOUT PANEL */
.about{
  position:fixed;top:0;right:0;height:100vh;width:min(420px,92vw);z-index:80;
  background:linear-gradient(180deg,#0e0e22 0%, #07071a 100%);
  border-left:2px solid var(--magenta);
  box-shadow:-30px 0 60px rgba(0,0,0,0.6), 0 0 30px rgba(255,46,147,0.25);
  transform:translateX(100%);transition:transform .35s cubic-bezier(.6,.2,.2,1);
  padding:28px 26px;display:flex;flex-direction:column;gap:18px;
  overflow-y:auto;
}
.about.open{transform:translateX(0)}
.about .x{
  align-self:flex-end;background:transparent;border:2px solid var(--cyan);
  color:var(--cyan);font-family:'Press Start 2P',monospace;font-size:9px;
  padding:6px 9px;cursor:pointer;text-shadow:0 0 6px rgba(0,240,255,0.6);
}
.about .x:hover{background:rgba(0,240,255,0.07);box-shadow:0 0 12px rgba(0,240,255,0.5)}
.about h2{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--magenta);
  text-shadow:3px 3px 0 var(--cyan);margin:0 0 4px}
.about .lead{font-family:'VT323',monospace;font-size:20px;color:#dcdcf2;line-height:1.3}
.about .row{display:flex;justify-content:space-between;
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--ink);
  border-bottom:1px dashed rgba(0,240,255,0.2);padding:10px 0}
.about .row .k{color:var(--cyan);text-shadow:0 0 6px rgba(0,240,255,0.6)}
.about .row .v{color:var(--amber);text-shadow:0 0 6px rgba(255,182,39,0.6)}
.about .terminal{
  background:#000;border:1px solid rgba(0,240,255,0.4);padding:14px;
  font-family:'VT323',monospace;font-size:18px;color:var(--green);line-height:1.3;
  text-shadow:0 0 6px rgba(57,255,122,0.5);
}
.about .terminal .p{color:var(--magenta);text-shadow:0 0 6px rgba(255,46,147,0.6)}
.cursor::after{content:"▮";margin-left:4px;animation:blink 1s steps(2) infinite;color:var(--green)}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;pointer-events:none;
  transition:opacity .3s;z-index:70;backdrop-filter:blur(2px)}
.scrim.show{opacity:1;pointer-events:auto}

/* tiny chip */
.chip{display:inline-block;border:1px solid currentColor;padding:3px 6px;font-size:8px;
  font-family:'Press Start 2P',monospace}