@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #f7f3e8;
  --muted: #9690a2;
  --pink: #ff4fc8;
  --cyan: #00e5ff;
  --yellow: #ffe600;
  --paper: #090611;
  --line: #2d2738;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,79,200,.12), transparent 34rem),
    radial-gradient(circle at 86% 22%, rgba(0,229,255,.08), transparent 30rem),
    var(--paper);
  font-family: Manrope, system-ui, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
button { font: inherit; }
.shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 18px; }
.eyebrow, .stats, footer, .room-label, .overlay p, .message { font-family: "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { color: var(--pink); font-size: 12px; margin: 0 0 7px; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.055em; line-height: .95; }
.stats { display: flex; gap: 18px; color: var(--cyan); font-size: 12px; flex-wrap: wrap; justify-content: end; }
.game-frame { position: relative; border: 1px solid var(--line); background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.6); overflow: hidden; }
.game-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
canvas { display: block; width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; outline: none; }
.spectrum-hud { position: absolute; z-index: 2; inset: 0; pointer-events: none; font-family: "DM Mono", ui-monospace, monospace; letter-spacing: .12em; text-shadow: 2px 0 #000; }
.original-room { position: absolute; top: 65.8%; left: 0; width: 100%; text-align: center; color: #fff; font-size: clamp(11px, 2.1vw, 24px); }
.original-stats { position: absolute; top: 78.7%; left: 0; width: 100%; text-align: center; color: #eee; font-size: clamp(9px, 1.75vw, 20px); white-space: nowrap; }
.rainbow { color: #f315a1; }
.time { color: #1de426; }
.overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; color: #090611; background: var(--yellow); transition: opacity .25s ease, visibility .25s ease; }
.overlay.hidden { opacity: 0; visibility: hidden; }
.room-label { margin: 0 0 16px; font-size: 13px; font-weight: 500; }
.overlay h2 { margin: 0; font-size: clamp(30px, 5vw, 64px); line-height: .98; letter-spacing: -.06em; }
.overlay p:last-child { margin: 18px 0 0; font-size: 11px; }
.overlay button { margin-top: 28px; padding: 14px 28px; border: 0; color: var(--yellow); background: #090611; font-weight: 800; cursor: pointer; box-shadow: 6px 6px 0 #908400; }
.overlay button:hover { transform: translate(2px,2px); box-shadow: 4px 4px 0 #908400; }
.message { position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translate(-50%, 10px); padding: 10px 14px; color: #090611; background: var(--pink); font-size: 12px; font-weight: 500; opacity: 0; transition: .2s ease; pointer-events: none; white-space: nowrap; }
.message.show { opacity: 1; transform: translate(-50%, 0); }
footer { display: flex; gap: 24px; margin-top: 16px; color: var(--muted); font-size: 11px; flex-wrap: wrap; }
footer b { color: var(--ink); border: 1px solid var(--line); padding: 3px 6px; margin-right: 4px; font-weight: 500; }
.mobile-controls { display: none; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; margin-top: 10px; }
.mobile-controls button { min-height: 52px; border: 1px solid var(--line); background: #15101e; color: var(--ink); font-weight: 800; touch-action: none; }
.mobile-controls .jump { color: #090611; background: var(--yellow); }
@media (max-width: 680px) {
  .shell { width: calc(100% - 12px); padding-top: 10px; }
  .topbar { align-items: start; margin-bottom: 10px; }
  .stats { max-width: 180px; gap: 6px 12px; font-size: 10px; }
  .eyebrow { font-size: 9px; }
  .overlay h2 { font-size: 30px; }
  .mobile-controls { display: grid; }
  footer { display: none; }
}