*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;color:#e7e9ee;background:#0b0e14;overflow-x:hidden}
#bg{position:fixed;inset:0;z-index:-1;image-rendering:pixelated}
.wrap{min-height:100%;display:grid;place-items:center;padding:40px 16px}
.panel{width:min(460px,92vw);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px 18px 22px;box-shadow:0 12px 40px rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(4px)}
.title{margin:.2rem 0 .2rem;font-size:28px;font-weight:800;letter-spacing:.3px}
.accent{color:#20e3b2}.muted{color:#9aa4b2;margin-top:0}
.hud{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;color:#d7dce6;align-items:center}
#board{display:block;margin:0 auto;border-radius:8px;background:#0a0f1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0 0}
.btn{background:#1b2030;color:#e7e9ee;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.help{margin-top:10px;color:#aab3c2}.hiscore{margin-top:12px;color:#d7dce6}