:root{
  --bg:#171321;
  --fg:#f7f8fa;
  --accent:#ABF500;
  --muted:#235FA8;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg); color:var(--fg);
  display:flex; flex-direction:column; align-items:center;
}
header{width:min(900px,95%); display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1rem 0;}
h1{margin:0; font-size:1.4rem}
.hud{display:flex; gap:.5rem; align-items:center}
button{
  background:var(--muted); color:#fff; border:none; padding:.5rem .75rem; border-radius:.5rem;
  cursor:pointer; transition:transform .15s ease, background .2s ease;
}
button:hover{transform:translateY(-1px); background:#2e74c8}
button:active{transform:translateY(0)}
main{width:min(900px,95%); display:grid; place-items:center}
canvas{
  width:min(90vmin, 560px); height:min(90vmin, 560px);
  border:2px solid var(--accent); border-radius:1rem; background:#0d314b;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
footer{opacity:.8; padding:1rem}

/* Mobile controls (hidden on desktop) */
.mobile-ctrls{position:fixed; left:0; right:0; bottom:0; padding:10px 6rem;
  display:none; gap:14px; align-items:center; justify-content:space-between;
  background:rgba(13,49,75,.85); backdrop-filter: blur(4px); z-index:1000}
.mobile-ctrls .pad{display:grid; grid-template-rows:auto auto auto; gap:6px}
.mobile-ctrls .pad .h{display:flex; gap:6px; justify-content:center}
.mobile-ctrls .btn{min-width:100px; min-height:48px; font-size:18px; border:none;
  color:#fff; background:#235FA8; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.25)}
.mobile-ctrls .btn:active{transform:translateY(1px)}
.mobile-ctrls .btn.small{min-width:72px; min-height:40px; font-size:14px; background:#2f76c9}
@media (max-width: 880px){ .mobile-ctrls{ display:flex } }

[hidden]{display:none!important}
.overlay{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); z-index:1000}
.modal{background:#0d314b; color:#fff; border:2px solid #ABF500; border-radius:16px; padding:1.25rem 1.5rem; width:min(420px, 92%); text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.modal .btn{background:#235FA8; color:#fff; border:none; padding:.6rem 1rem; border-radius:.5rem; cursor:pointer}