:root { --bg:#0b0716; --pink:#ff2e88; --cyan:#22d3ee; --lime:#a3e635; }
* { box-sizing: border-box; }
body {
  margin:0; color:#eee6ff; font-family:'Chakra Petch',sans-serif;
  background: radial-gradient(ellipse at 50% -10%, #2a0f4a 0%, transparent 60%),
    linear-gradient(transparent 0 97%, rgba(34,211,238,.08) 97%) 0 0/100% 40px,
    linear-gradient(90deg, transparent 0 97%, rgba(255,46,136,.06) 97%) 0 0/40px 100%, var(--bg);
}
.crt { pointer-events:none; position:fixed; inset:0; z-index:50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); animation: scan 8s linear infinite; }
@keyframes scan { to { background-position: 0 100px; } }
.pixel { font-family:'Press Start 2P',monospace; }
.text-cyan { color:var(--cyan); } .text-lime { color:var(--lime); } .text-pink { color:var(--pink); }
.neon-title { color:var(--pink); text-shadow:0 0 6px var(--pink),0 0 22px var(--pink); animation:flicker 4s infinite; }
.neon-title .text-cyan { text-shadow:0 0 6px var(--cyan),0 0 22px var(--cyan); }
@keyframes flicker { 0%,19%,22%,62%,64%,100%{opacity:1} 20%,63%{opacity:.4} }
.badge { border:1px solid var(--cyan); color:var(--cyan); padding:4px 10px; border-radius:999px; font-size:12px; }
.badge:hover { box-shadow:0 0 12px var(--cyan); }
.cabinet { background:linear-gradient(160deg,#1c0b33,#07040f); border-radius:24px; padding:14px;
  border:2px solid transparent; background-clip:padding-box; position:relative;
  box-shadow:0 0 0 2px var(--pink),0 0 30px rgba(255,46,136,.4),0 0 60px rgba(34,211,238,.25), inset 0 0 40px #000; }
.cabinet:fullscreen { border-radius:0; display:flex; flex-direction:column; justify-content:center; }
.marquee { text-align:center; font-size:10px; color:var(--lime); padding:6px 0 12px; letter-spacing:2px; }
.screen { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000;
  box-shadow: inset 0 0 0 4px #111, 0 0 0 3px #2b1747; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(11,7,22,.94); }
.bounce { animation:bounce .8s infinite alternate ease-in; }
@keyframes bounce { to { transform:translateY(-16px); } }
.blink { animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }
.big-play { background:var(--pink); color:#fff; padding:14px 18px; border-radius:14px; font-size:12px; box-shadow:0 6px 0 #9d1350,0 0 20px var(--pink); }
.big-play:active { transform:translateY(4px); box-shadow:0 2px 0 #9d1350; }
.panel { display:flex; justify-content:space-between; align-items:center; padding:16px 18px 6px; }
.stick { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ff7ab3,var(--pink)); box-shadow:0 0 0 8px #222, 0 0 0 10px #444; }
.arcade-btn { width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff8,var(--c) 45%); box-shadow:0 5px 0 #0008,0 0 14px var(--c); }
.arcade-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #0008,0 0 20px var(--c); }
.wiggle { animation:wig .4s; }
@keyframes wig { 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} }
.ctrl { background:#160c2a; border:2px solid #3a2163; color:#eee6ff; padding:12px 16px; border-radius:14px;
  font-weight:700; text-align:center; cursor:pointer; transition:.15s; box-shadow:0 4px 0 #05020c; }
.ctrl:hover { border-color:var(--cyan); box-shadow:0 4px 0 #05020c,0 0 14px rgba(34,211,238,.5); }
.ctrl:active { transform:translateY(3px); box-shadow:0 1px 0 #05020c; }
.ctrl.on { border-color:var(--lime); color:var(--lime); }
.five.pop { transform:scale(1.08); }
.led { background:#000; color:#ff3b3b; text-shadow:0 0 8px #ff3b3b; padding:10px 16px; border-radius:12px; border:2px solid #3a1010; text-align:center; font-size:14px; }
.toast { position:fixed; bottom:20px; right:20px; left:20px; max-width:340px; margin-left:auto; background:#160c2a;
  border:2px solid var(--lime); padding:16px; border-radius:16px; z-index:60; box-shadow:0 0 24px rgba(163,230,53,.4); animation:slide .4s ease-out; }
@keyframes slide { from { transform:translateY(120%); } }
.rise { animation:rise .7s both ease-out; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } }