/* ============================================================
   NEON ECHO — Synthwave rhythm-memory arcade
   ============================================================ */
:root{
  --bg:#05030d;
  --bg-2:#0a0820;
  --cyan:#00f0ff;
  --pink:#ff2bd6;
  --purple:#9b5cff;
  --lime:#9bff3b;
  --amber:#ffb84d;
  --red:#ff3b6b;
  --fg:#e6e6ff;
  --muted:#7a7aa8;
  --grid:rgba(155,92,255,.18);
  --font:'Orbitron','Segoe UI',system-ui,sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font);user-select:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- Background layers ---------- */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,43,214,.18), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,240,255,.18), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}
.grid-bg::after{
  content:"";position:absolute;inset:-2px;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/60px 60px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
  animation:gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse{50%{opacity:.55}}

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

#particles{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:18px}
.screen.active{display:flex;animation:fadeIn .4s ease both}
.overlay{background:rgba(5,3,13,.78);backdrop-filter:blur(8px)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Logo ---------- */
.logo{
  font-weight:900;font-size:clamp(40px,9vw,96px);letter-spacing:.15em;
  color:#fff;text-align:center;line-height:1;
  text-shadow:
    0 0 8px var(--cyan),0 0 18px var(--cyan),
    0 0 32px rgba(0,240,255,.6),
    -2px 0 var(--pink), 2px 0 var(--purple);
  animation:logoPulse 3.2s ease-in-out infinite;
  position:relative;
}
.logo::before,.logo::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  mix-blend-mode:screen;opacity:.7;pointer-events:none;
}
.logo::before{color:var(--pink);transform:translate(-2px,0);animation:glitch1 4s infinite}
.logo::after{color:var(--cyan);transform:translate(2px,0);animation:glitch2 4s infinite}
@keyframes logoPulse{50%{text-shadow:0 0 12px var(--pink),0 0 24px var(--pink),0 0 48px rgba(255,43,214,.5),-2px 0 var(--cyan),2px 0 var(--purple)}}
@keyframes glitch1{0%,90%,100%{clip-path:inset(0 0 0 0)}92%{clip-path:inset(20% 0 60% 0);transform:translate(-4px,0)}94%{clip-path:inset(60% 0 10% 0);transform:translate(3px,0)}}
@keyframes glitch2{0%,88%,100%{clip-path:inset(0 0 0 0)}91%{clip-path:inset(40% 0 30% 0);transform:translate(4px,0)}93%{clip-path:inset(10% 0 70% 0);transform:translate(-3px,0)}}

.tagline{color:var(--muted);letter-spacing:.4em;font-size:12px;text-transform:uppercase}

/* ---------- Panel ---------- */
.panel{
  width:min(440px,92vw);
  background:linear-gradient(180deg,rgba(20,10,40,.85),rgba(10,8,32,.85));
  border:1px solid rgba(155,92,255,.4);
  border-radius:14px;padding:18px;
  box-shadow:0 0 0 1px rgba(0,240,255,.08) inset, 0 0 30px rgba(155,92,255,.25), 0 0 80px rgba(255,43,214,.12);
  display:flex;flex-direction:column;gap:12px;
}
.panel.small{width:min(380px,92vw);align-items:center;text-align:center}
.panel.small h2{font-size:28px;letter-spacing:.2em;margin-bottom:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase}
.row.hs span{color:var(--cyan);font-size:18px;text-shadow:0 0 10px var(--cyan)}

.seg{display:flex;border:1px solid rgba(155,92,255,.4);border-radius:10px;overflow:hidden}
.seg button{padding:8px 12px;font-size:11px;letter-spacing:.15em;color:var(--muted);transition:.2s;text-transform:uppercase}
.seg button.active{background:linear-gradient(180deg,var(--purple),var(--pink));color:#fff;text-shadow:0 0 8px rgba(255,255,255,.8)}
.seg button:hover:not(.active){color:var(--cyan);background:rgba(0,240,255,.08)}

/* ---------- CTA buttons ---------- */
.cta{
  position:relative;padding:14px 42px;font-size:18px;font-weight:900;letter-spacing:.35em;
  color:#fff;border-radius:12px;
  background:linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));
  box-shadow:0 0 20px rgba(0,240,255,.5),0 0 40px rgba(255,43,214,.35);
  transition:transform .15s, box-shadow .25s;
  text-transform:uppercase;
}
.cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 30px rgba(0,240,255,.8),0 0 60px rgba(255,43,214,.5)}
.cta:active{transform:translateY(0) scale(.98)}
.ghost{
  padding:10px 22px;font-size:12px;letter-spacing:.25em;color:var(--cyan);
  border:1px solid rgba(0,240,255,.5);border-radius:10px;text-transform:uppercase;
  transition:.2s;background:rgba(0,240,255,.04);
}
.ghost:hover{background:rgba(0,240,255,.12);box-shadow:0 0 18px rgba(0,240,255,.4)}

.hint{text-align:center;color:var(--muted);font-size:12px;line-height:1.7;max-width:480px}
.hint .keys b{color:var(--cyan)}

/* ---------- HUD ---------- */
.hud{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:linear-gradient(180deg,rgba(5,3,13,.9),transparent);
  z-index:6;
}
.hud-cell{display:flex;flex-direction:column;align-items:center;min-width:60px}
.hud-cell .k{font-size:9px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.hud-cell span:last-child{font-size:20px;font-weight:700;color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.hud-cell.streak{flex:1;height:8px;background:rgba(155,92,255,.15);border-radius:4px;overflow:hidden;margin:0 8px;align-self:center;border:1px solid rgba(155,92,255,.3)}
#streakBar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .3s ease;box-shadow:0 0 10px var(--pink)}
#pauseBtn{padding:8px 14px;font-size:14px;color:var(--cyan);border:1px solid rgba(0,240,255,.4);border-radius:8px}

/* ---------- Board ---------- */
.board{
  display:grid;gap:14px;
  width:min(560px,92vmin);aspect-ratio:1/1;
  padding:14px;border-radius:20px;
  background:rgba(10,5,25,.5);
  border:1px solid rgba(155,92,255,.3);
  box-shadow:0 0 40px rgba(155,92,255,.25), inset 0 0 30px rgba(0,0,0,.6);
  transition:transform .6s cubic-bezier(.7,.1,.3,1), filter .3s;
}
.board.cols-2{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
.board.cols-3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);aspect-ratio:3/2}

.pad{
  position:relative;border-radius:14px;cursor:pointer;
  background:radial-gradient(circle at 50% 50%,var(--c-dim),#0a0820 75%);
  border:2px solid var(--c);
  box-shadow:0 0 12px var(--c-glow), inset 0 0 30px rgba(0,0,0,.6);
  transition:transform .12s ease, box-shadow .2s, filter .2s;
  overflow:hidden;
}
.pad::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 50%,var(--c),transparent 70%);
  opacity:0;transition:opacity .15s;
}
.pad.lit{transform:scale(1.05);box-shadow:0 0 40px var(--c),0 0 80px var(--c-glow),inset 0 0 40px var(--c-dim);filter:brightness(1.4)}
.pad.lit::before{opacity:.9}
.pad.press{transform:scale(.96)}
.pad.bad{animation:padBad .35s}
@keyframes padBad{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.pad .ripple{position:absolute;border-radius:50%;border:2px solid var(--c);pointer-events:none;animation:ripple .7s ease-out forwards}
@keyframes ripple{from{width:10px;height:10px;opacity:.8}to{width:300px;height:300px;opacity:0}}

.pad[data-i="0"]{--c:var(--cyan);--c-glow:rgba(0,240,255,.5);--c-dim:rgba(0,240,255,.15)}
.pad[data-i="1"]{--c:var(--pink);--c-glow:rgba(255,43,214,.5);--c-dim:rgba(255,43,214,.15)}
.pad[data-i="2"]{--c:var(--purple);--c-glow:rgba(155,92,255,.55);--c-dim:rgba(155,92,255,.15)}
.pad[data-i="3"]{--c:var(--lime);--c-glow:rgba(155,255,59,.5);--c-dim:rgba(155,255,59,.15)}
.pad[data-i="4"]{--c:var(--amber);--c-glow:rgba(255,184,77,.5);--c-dim:rgba(255,184,77,.15)}
.pad[data-i="5"]{--c:var(--red);--c-glow:rgba(255,59,107,.5);--c-dim:rgba(255,59,107,.15)}

/* Colorblind: add symbols */
body.cb .pad::after{
  content:attr(data-sym);position:absolute;inset:0;display:grid;place-items:center;
  font-size:42px;font-weight:900;color:rgba(255,255,255,.85);
  text-shadow:0 0 10px var(--c);pointer-events:none;
}

/* ---------- Status / floats ---------- */
.status{
  position:absolute;bottom:30px;left:0;right:0;text-align:center;
  letter-spacing:.4em;font-size:12px;color:var(--muted);text-transform:uppercase;
  text-shadow:0 0 8px rgba(0,240,255,.4);
}
.status.show{color:var(--cyan)}
.status.bad{color:var(--red);text-shadow:0 0 8px var(--red)}

.floats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float{position:absolute;font-weight:900;font-size:22px;color:var(--lime);text-shadow:0 0 14px var(--lime);animation:floatUp 1s ease-out forwards;letter-spacing:.1em}
@keyframes floatUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}

/* ---------- Countdown ---------- */
.countdown{position:absolute;inset:0;display:grid;place-items:center;z-index:8;pointer-events:none}
.countdown.hidden{display:none}
.countdown span{font-size:140px;font-weight:900;color:#fff;text-shadow:0 0 30px var(--cyan),0 0 60px var(--pink);animation:cd .9s ease-out}
@keyframes cd{from{transform:scale(.3);opacity:0}50%{transform:scale(1.1);opacity:1}to{transform:scale(2);opacity:0}}

/* ---------- Glitch board states ---------- */
.board.rot90{transform:rotate(90deg)}
.board.rot180{transform:rotate(180deg)}
.board.rot270{transform:rotate(270deg)}
.board.mirror{transform:scaleX(-1)}
.board.invert{filter:hue-rotate(180deg) saturate(1.4)}
.board.flash{animation:bFlash .4s 3}
@keyframes bFlash{50%{filter:invert(1) hue-rotate(90deg)}}

.body-shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,4px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}

/* ---------- Game over ---------- */
.glitch{font-size:30px;letter-spacing:.25em;color:#fff;text-shadow:0 0 14px var(--red),0 0 28px var(--pink);position:relative}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin:14px 0 6px}
.stats > div{display:flex;flex-direction:column;align-items:center;padding:10px;border:1px solid rgba(155,92,255,.3);border-radius:10px;background:rgba(10,5,25,.5)}
.stats .k{font-size:10px;letter-spacing:.25em;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.stats span:last-child{font-size:20px;font-weight:700;color:var(--cyan);text-shadow:0 0 10px var(--cyan)}

/* ---------- Reduced motion ---------- */
body.reduced *,body.reduced *::before,body.reduced *::after{animation:none!important;transition:none!important}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .panel{padding:14px}
  .row{font-size:11px}
  .seg button{padding:7px 9px;font-size:10px}
  .cta{padding:12px 30px;font-size:16px;letter-spacing:.25em}
  .hud-cell span:last-child{font-size:16px}
  .logo{letter-spacing:.1em}
}

/* Focus states */
button:focus-visible,.pad:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}