:root{
  --bg:#0b0518; --pink:#ff3ea5; --cyan:#00f0ff; --purple:#b537f2;
  --yellow:#ffe83d; --ink:#f4efff; --dim:#8f83ad; --amp:0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  overflow:hidden; min-height:100svh;
  display:flex; flex-direction:column;
  touch-action:manipulation;
}
.grid-floor{
  position:fixed; left:-25vw; right:-25vw; bottom:0; height:42vh;
  pointer-events:none; perspective:340px; z-index:0;
  -webkit-mask-image:linear-gradient(to top,#000 55%,transparent);
          mask-image:linear-gradient(to top,#000 55%,transparent);
}
.grid-floor .plane{
  position:absolute; inset:0; transform-origin:50% 0; transform:rotateX(62deg);
  background:
    repeating-linear-gradient(to right, rgba(181,55,242,.55) 0 2px, transparent 2px 84px),
    repeating-linear-gradient(to top, rgba(0,240,255,.5) 0 2px, transparent 2px 64px);
  animation:gridScroll 2.4s linear infinite;
}
@keyframes gridScroll{from{background-position:0 0,0 0}to{background-position:0 0,0 64px}}

/* HUD bar shared by games */
.hud{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  font-family:'Chivo Mono',monospace; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.hud a{
  color:var(--cyan); text-decoration:none;
  border:1px solid rgba(0,240,255,.4); border-radius:999px; padding:6px 14px;
}
.hud a:hover{background:rgba(0,240,255,.12)}
.hud .title{font-family:'Bungee',cursive; letter-spacing:.05em; color:var(--pink);
  font-size:clamp(.8rem,3vw,1.05rem); text-shadow:0 0 14px rgba(255,62,165,.6)}
.hud .score{color:var(--yellow); font-weight:700; text-align:right; min-width:90px}

.stage{position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center}
canvas.game{
  display:block; max-width:100%; max-height:100%;
  border:2px solid rgba(181,55,242,.4); border-radius:12px;
  background:rgba(8,3,18,.85);
  box-shadow:0 0 40px rgba(181,55,242,.2), inset 0 0 60px rgba(0,0,0,.5);
}

/* overlays */
.overlay{
  position:fixed; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:24px;
  background:rgba(11,5,24,.86); backdrop-filter:blur(4px);
}
.overlay.hidden{display:none}
.overlay h1{
  font-family:'Bungee',cursive; font-size:clamp(1.6rem,7vw,3.2rem);
  color:var(--pink);
  text-shadow:0 0 18px rgba(255,62,165,.8), 4px 4px 0 rgba(0,240,255,.4);
}
.overlay p{color:var(--dim); max-width:420px; line-height:1.6; font-size:.95rem}
.overlay .big{
  font-family:'Chivo Mono',monospace; color:var(--yellow);
  font-size:clamp(1.2rem,5vw,2rem); font-weight:700; letter-spacing:.1em;
}
.btn{
  font-family:'Bungee',cursive; font-size:1rem; letter-spacing:.08em;
  color:var(--bg);
  background:linear-gradient(135deg,var(--pink),var(--purple) 60%,var(--cyan));
  border:none; border-radius:999px; padding:.9em 2.2em; cursor:pointer;
  box-shadow:0 0 24px rgba(255,62,165,.55);
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}
.keys{font-family:'Chivo Mono',monospace; font-size:.75rem; color:var(--cyan); letter-spacing:.2em}
.best{font-family:'Chivo Mono',monospace; font-size:.72rem; letter-spacing:.18em; color:var(--yellow); text-transform:uppercase}
.controls{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center}
footer a{color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(0,240,255,.35)}
footer a:hover{color:var(--yellow); border-color:var(--yellow)}
footer a:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
footer .credit{display:block; margin-top:7px; color:var(--dim)}

/* screen-reader-only text */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* "now playing" pattern chip (shows the rotating loop name) */
.nowplaying{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Chivo Mono',monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); border:1px solid rgba(0,240,255,.4); border-radius:999px; padding:5px 11px;
  white-space:nowrap;
}
.nowplaying[hidden]{display:none}
.nowplaying .np-dot{
  width:7px; height:7px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 8px var(--pink); animation:npPulse 1s ease-in-out infinite;
}
@keyframes npPulse{0%,100%{opacity:.4; transform:scale(.8)}50%{opacity:1; transform:scale(1.15)}}

/* reduce-flashing toggle */
.flash-toggle{
  font-family:'Chivo Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); background:transparent; cursor:pointer;
  border:1px solid rgba(143,131,173,.4); border-radius:999px; padding:5px 11px;
}
.flash-toggle[aria-pressed="true"]{color:var(--cyan); border-color:rgba(0,240,255,.5)}
.flash-toggle:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}

.hud .hud-right{display:flex; align-items:center; gap:10px}

@media (prefers-reduced-motion:reduce){
  .grid-floor .plane{animation:none}
  .nowplaying .np-dot{animation:none}
}