:root { --neon: #ff2d95; --cyan: #19f0ff; --bass: 0; --mid: 0; --high: 0; --kick: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #030208; color: #e8e8ff; font-family: 'Orbitron', system-ui, sans-serif; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* CRT scanlines + vignette + chromatic wobble */
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.85) 100%);
  mix-blend-mode: multiply; }
.rainfog { position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(255,45,149,calc(0.05 + var(--bass) * 0.25)), transparent 50%, rgba(25,240,255,calc(0.03 + var(--high) * 0.15)));
  filter: blur(calc(var(--kick) * 3px)); }

/* Neon title */
.neon-title { position: fixed; top: 6vh; left: 0; right: 0; text-align: center; z-index: 6; pointer-events: none;
  transform: translateY(calc(var(--kick) * -6px)) skewX(calc(var(--kick) * -8deg)); }
.kanji { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(1.4rem, 4vw, 3rem); color: var(--cyan); letter-spacing: 0.6em;
  text-shadow: 0 0 8px var(--cyan), 0 0 30px var(--cyan), 0 0 60px #0ff;
  animation: flicker 4s infinite; opacity: calc(0.6 + var(--mid) * 0.4); }
h1 { margin: 0.2em 0 0; font-weight: 900; font-size: clamp(1.6rem, 6vw, 5rem); line-height: 1; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; position: relative; display: inline-block;
  text-shadow: 0 0 6px #fff, 0 0 20px var(--neon), 0 0 50px var(--neon), 0 0 calc(80px + var(--bass) * 200px) var(--neon); }
h1::before, h1::after { content: attr(data-glitch); position: absolute; inset: 0; opacity: calc(var(--high) * 1.2); }
h1::before { color: var(--cyan); transform: translate(calc(var(--high) * -8px), 0); clip-path: inset(0 0 55% 0); }
h1::after  { color: var(--neon); transform: translate(calc(var(--high) * 8px), 0);  clip-path: inset(45% 0 0 0); }
.sub { margin: 1rem 0 0; font-size: 0.75rem; letter-spacing: 0.4em; color: #9aa; text-transform: uppercase; }
@keyframes flicker { 0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.3} 94%{opacity:1} 97%{opacity:.5} 98%{opacity:1} }

/* Start button */
.start { position: fixed; inset: 0; margin: auto; width: 240px; height: 240px; border-radius: 50%; z-index: 7;
  background: rgba(3,2,8,0.5); border: 2px solid var(--neon); color: #fff; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  box-shadow: 0 0 40px var(--neon), inset 0 0 40px rgba(255,45,149,0.4); backdrop-filter: blur(6px);
  transition: opacity 0.6s, transform 0.6s; }
.start .pulse { font-size: 3.5rem; text-shadow: 0 0 20px #fff; animation: beat 1.4s ease-in-out infinite; }
.start .hint { font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); }
.start:hover { transform: scale(1.06); }
body.playing .start { opacity: 0; transform: scale(3); pointer-events: none; }
@keyframes beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* Notes: a subtitle-like block that fades in when playing */
.notes { position: fixed; left: 50%; bottom: 14vh; transform: translateX(-50%); z-index: 6; max-width: 60ch; text-align: center;
  font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.6; color: #cfd; opacity: 0; transition: opacity 2s 1s;
  text-shadow: 0 0 10px rgba(25,240,255,0.6), 0 2px 0 #000; padding: 0 1rem; }
body.playing .notes { opacity: 0.9; }

/* HUD */
.hud { position: fixed; bottom: 2.5vh; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 3vw; z-index: 6;
  font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; }
.hud a { color: var(--cyan); text-decoration: none; text-shadow: 0 0 10px var(--cyan); }
.hud a:hover { color: #fff; }
#time { color: var(--neon); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px var(--neon); }
.help { color: #667; font-size: 0.55rem; letter-spacing: 0.15em; } @media (max-width: 800px) { .help { display: none; } }

@media (prefers-reduced-motion: reduce) { .kanji, .start .pulse { animation: none; } }