*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:#eaf2ff; background:#070915; overflow-x:hidden;
}

/* Animated neon gradient background */
#background{
  position:fixed; inset:0; z-index:-1;
  background: linear-gradient(45deg, #0a1230, #10164a, #022c40, #07204a, #1b0c3a);
  background-size: 800% 800%;
  filter: blur(28px) saturate(120%);
  animation: bgShift 22s ease-in-out infinite;
}
@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

header{ text-align:center; margin:18px 0 6px; }
header h1{ margin:0; font-size:2.2rem; letter-spacing:.5px; color:#66f0ff; text-shadow:0 0 8px #33e0ff, 0 0 20px #33aaff; }
header .subtitle{ margin:.25rem 0 0; color:#9cc7ff; opacity:.9; }

main{ max-width:860px; margin:0 auto; padding:12px 16px 28px; display:grid; gap:14px; }

#hud{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
#hud .stat{ display:flex; align-items:baseline; gap:6px; padding:8px 12px; border:1px solid rgba(120,170,255,.25); border-radius:12px; background:rgba(10,20,50,.35); box-shadow: inset 0 0 18px rgba(80,140,255,.12), 0 4px 18px rgba(0,0,0,.35); }
#hud .stat span{ color:#9cc7ff; font-size:.9rem; }
#hud .stat strong{ font-size:1.2rem; text-shadow:0 0 8px rgba(140,200,255,.85); }

#stage{ position:relative; width:480px; height:480px; margin:0 auto; }
#game{ width:100%; height:100%; background:rgba(0,0,0,.5); border-radius:12px; box-shadow:0 0 14px #0ff, 0 0 26px #08f inset; display:block; }

#message{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:16px; background:rgba(0,0,0,.6); border-radius:12px; cursor:pointer; }
#message h2{ margin:.2rem 0; font-size:1.6rem; color:#fff; text-shadow:0 0 10px #fff; }
#message p{ margin:.2rem 0; color:#cde1ff; }

#controls{ text-align:center; color:#a9c7ff; }
#controls kbd{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:6px; padding:2px 6px; margin:0 2px; box-shadow:0 0 6px #6ef; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

footer{ text-align:center; color:#7ea6ff; opacity:.8; margin:12px 0 20px; font-size:.85rem; }

@media (max-width:520px){
  #stage{ width:92vw; height:92vw; }
}