:root {
  --night: #1a0b2e;
  --plum: #2d1250;
  --magenta: #7a1f6e;
  --pink: #ff3e9a;
  --hot: #ff6ec7;
  --teal: #21e6c1;
  --sun1: #ffd166;
  --sun2: #ff8c42;
  --cream: #fff4e0;
  --paper: #fffaf0;
  --ink: #1a1020;
  --muted: #6b5a6e;
  --hard-shadow: 6px 6px 0 rgba(10, 2, 20, .55);
  --pixel: "VT323", ui-monospace, monospace;
  --mono: "Space Mono", ui-monospace, monospace;
  --neon: "Monoton", "VT323", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--night);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Synthwave backdrop ---------- */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--night) 0%, var(--plum) 38%, var(--magenta) 56%, var(--pink) 64%, var(--sun2) 66%);
  overflow: hidden;
}
.sun {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sun1) 10%, var(--sun2) 50%, var(--pink) 90%);
  -webkit-mask: linear-gradient(180deg, #000 48%, transparent 48% 52%, #000 52% 60%, transparent 60% 65%, #000 65% 72%, transparent 72% 78%, #000 78% 84%, transparent 84% 91%, #000 91%);
          mask: linear-gradient(180deg, #000 48%, transparent 48% 52%, #000 52% 60%, transparent 60% 65%, #000 65% 72%, transparent 72% 78%, #000 78% 84%, transparent 84% 91%, #000 91%);
  filter: drop-shadow(0 0 60px rgba(255, 110, 199, .55));
}
.floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 36%;
  background:
    linear-gradient(180deg, var(--night) 0%, transparent 30%),
    repeating-linear-gradient(90deg, rgba(33, 230, 193, .7) 0 2px, transparent 2px 80px),
    repeating-linear-gradient(0deg, rgba(33, 230, 193, .7) 0 2px, transparent 2px 60px),
    #12061f;
  transform: perspective(300px) rotateX(55deg);
  transform-origin: top center;
  animation: drive 3s linear infinite;
}
@keyframes drive { to { background-position: 0 0, 0 0, 0 60px, 0 0; } }

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* ---------- Menu bar ---------- */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  font-family: var(--pixel);
  font-size: 21px;
}
.menubar button { background: none; border: 0; padding: 0 10px; height: 28px; white-space: nowrap; }
.menubar button:hover, .menubar button:focus-visible { background: var(--ink); color: var(--cream); outline: none; }
.menu-items { display: flex; }
.menu-eye { display: flex; align-items: center; }
.menu-clock { margin-left: auto; padding: 0 6px 0 14px; }


/* ---------- Eye ---------- */
.eye { display: block; overflow: visible; }
.eye-sm { width: 34px; height: 20px; }
.eye-lg { width: 150px; height: 88px; margin: 0 auto 6px; filter: drop-shadow(0 0 18px rgba(33, 230, 193, .45)); }
.eye .iris { transition: transform .08s linear; }
.eye .eye-lid { transform-origin: 60px 35px; transition: transform .09s ease-in; }
.eye.blink .eye-lid { transform: scaleY(.08); }

/* ---------- Desktop + windows ---------- */
.desktop {
  position: relative;
  z-index: 10;
  min-height: max(100vh, 900px);
  padding-top: 32px;
}

.icons {
  list-style: none;
  margin: 0;
  padding: 20px 10px;
  position: absolute;
  left: 0;
  top: 32px;
  display: grid;
  gap: 14px;
}
.icon {
  width: 96px;
  background: none;
  border: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 4px;
}
.icon-art { font-size: 34px; line-height: 1; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .5)); }
.icon-label {
  font-family: var(--pixel);
  font-size: 18px;
  line-height: 1.05;
  color: var(--cream);
  padding: 1px 4px;
  text-shadow: 1px 1px 0 var(--ink);
}
.icon:hover .icon-label, .icon:focus-visible .icon-label { background: var(--pink); text-shadow: none; color: var(--ink); }
.icon:focus-visible { outline: none; }

.win {
  position: absolute;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-shadow);
  border-radius: 4px 4px 2px 2px;
}
.win.is-closed { display: none; }
.win.pop { animation: pop .18s ease-out; }
@keyframes pop { from { transform: scale(.92); opacity: .4; } }

.win-bar {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.win.is-active .win-bar {
  background: repeating-linear-gradient(180deg, var(--paper) 0 2px, var(--pink) 2px 4px);
  background-clip: content-box;
  padding: 5px 8px;
}
.win-bar:active { cursor: grabbing; }
.win-title {
  font-family: var(--pixel);
  font-size: 20px;
  background: var(--paper);
  padding: 0 10px;
  line-height: 1;
}
.win-close {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 0;
}
.win-close:hover { background: var(--pink); }

.win-body { padding: 18px 20px 20px; }

/* Initial desktop layout */
#win-hero  { left: 130px; top: 70px; width: 560px; }
#win-video { left: max(730px, calc(100% - 590px)); top: 96px; width: 540px; }
#win-case  { left: 220px; top: 450px; width: 440px; }
#win-tips  { left: max(760px, calc(100% - 500px)); top: 570px; width: 380px; }

/* ---------- Hero ---------- */
.win-dark .win-body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 62, 154, .25), transparent 60%),
    var(--night);
  color: var(--cream);
}
.hero { text-align: center; padding: 26px 28px 22px; }
.wordmark {
  margin: 0;
  font-family: var(--neon);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}
.wm-my {
  display: block;
  font-size: clamp(30px, 4.6vw, 50px);
  color: var(--cream);
  text-shadow: 0 0 6px var(--teal), 0 0 18px var(--teal);
}
.wm-ais {
  display: block;
  font-size: clamp(66px, 10vw, 112px);
  color: var(--hot);
  text-transform: none;
  text-shadow: 0 0 6px var(--pink), 0 0 22px var(--pink), 0 0 44px rgba(255, 62, 154, .6);
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .35; } 94% { opacity: 1; } 96% { opacity: .5; } 97% { opacity: 1; }
}

/* ---------- CRT / video ---------- */
.crt {
  background: linear-gradient(160deg, #4a3d4f, #241b28);
  border-radius: 18px;
  padding: 18px 18px 10px;
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15);
}
.crt-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px / 22px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .9);
}
.crt-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.crt-facade {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: #111;
  display: grid;
  place-items: center;
}
.static {
  position: absolute;
  inset: -50%;
  background:
    repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 73% 61%, #888 0 1px, transparent 1px 2px),
    #222;
  opacity: .22;
  animation: static .25s steps(4) infinite;
}
@keyframes static {
  0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -3%); } 75% { transform: translate(-3%, -6%); }
}
.crt-label { position: relative; display: grid; gap: 4px; color: var(--cream); font-family: var(--pixel); text-shadow: 0 0 8px rgba(255, 255, 255, .5); }
.crt-play { font-size: 34px; padding: 2px 16px; border: 2px solid var(--cream); background: rgba(0, 0, 0, .55); }
.crt-facade:hover .crt-play, .crt-facade:focus-visible .crt-play { background: var(--pink); border-color: var(--pink); color: var(--ink); text-shadow: none; }
.crt-facade:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.crt-knobs { display: flex; align-items: center; gap: 10px; padding-top: 8px; font-family: var(--pixel); color: #b9aabd; font-size: 16px; }
.crt-knobs i { width: 14px; height: 14px; border-radius: 50%; background: #1a1220; border: 2px solid #6b5a6e; }
.crt-knobs span { margin-left: auto; letter-spacing: .15em; }
.caption { font-size: 13px; margin: 14px 2px 0; text-align: center; }

/* ---------- Case file ---------- */
.case { position: relative; }
.redacted { display: grid; gap: 9px; padding: 56px 0 6px; }
.redacted i { display: block; height: 15px; background: var(--ink); }
.stamp {
  position: absolute;
  right: 18px; top: 14px;
  margin: 0;
  font-family: var(--pixel);
  font-size: 30px;
  text-transform: uppercase;
  color: #d61f5b;
  border: 3px solid #d61f5b;
  padding: 0 10px;
  transform: rotate(8deg);
  opacity: .85;
}

/* ---------- Tip line ---------- */
.tips form { display: grid; gap: 6px; }
.tips label { font-family: var(--pixel); font-size: 19px; }
.tips input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 0;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .08);
}
.tips input:focus { outline: 3px solid var(--teal); outline-offset: 0; }
.hp { position: absolute; left: -9999px; }
.btn {
  justify-self: start;
  margin-top: 6px;
  font-family: var(--pixel);
  font-size: 24px;
  padding: 2px 18px;
  background: var(--pink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:hover { background: var(--teal); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn:disabled { opacity: .6; cursor: wait; }
.form-msg { margin: 4px 0 0; font-size: 13px; min-height: 1.2em; }
.form-msg.ok { color: #0b7a62; }
.form-msg.err { color: #c2185b; }

/* ---------- Small screens: stack the windows ---------- */
@media (max-width: 1080px) {
  .desktop { min-height: 0; padding: 48px 16px 64px; display: flex; flex-direction: column; gap: 22px; }
  .icons { display: none; }
  .win, .win.is-closed { position: relative; display: block; left: auto !important; top: auto !important; width: 100% !important; max-width: 640px; margin: 0 auto; z-index: auto !important; }
  .win-bar { cursor: default; }
  .scene .sun { top: 18%; width: 70vw; }
}
@media (max-width: 560px) {
  .menu-items button { padding: 0 6px; font-size: 19px; }
  .menu-clock { display: none; }
  .hero { padding: 22px 16px 18px; }
  .win-body { padding: 16px 14px 16px; }
  .stamp { font-size: 22px; }
  .crt { padding: 10px 10px 6px; border-radius: 12px; }
  .crt-play { font-size: 26px; }
}

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