:root{
  --bg:#171321;
  --fg:#f7f8fa;
  --accent:#ABF500;
  --muted:#235FA8;
  --line:#2b557d;
}
*{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(1000px,95%); display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1rem 0;}
h1{margin:0; font-size:1.25rem}
.hud{display:flex; gap:.75rem; align-items:center; flex-wrap:wrap}
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)}
.ai-toggle{display:flex; align-items:center; gap:.35rem; opacity:.9}
main{width:min(1000px,95%); display:grid; place-items:center}
canvas{
  width:min(95vmin, 900px); height:auto; aspect-ratio: 3 / 2;
  border:2px solid var(--accent); border-radius:1rem; background:#0d314b;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
footer{opacity:.85; padding:1rem; text-align:center}

/* Mobile controls (hidden on desktop) */
.mobile-ctrls{position:fixed; left:0; right:0; bottom:0; padding:10px 12px;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(13,49,75,.85); backdrop-filter: blur(4px); z-index:1000}
.mobile-ctrls .side{display:flex; flex-direction:column; align-items:center; gap:6px}
.mobile-ctrls .stack{display:flex; flex-direction:column; gap:6px}
.mobile-ctrls .lbl{font-size:12px; opacity:.8}
.mobile-ctrls .btn{min-width:56px; min-height:44px; 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.small{min-width:72px; min-height:40px; font-size:14px; background:#2f76c9}
.mobile-ctrls .btn:active{transform:translateY(1px)}
@media (max-width: 880px){ .mobile-ctrls{ display:flex } }
