:root{
  --bg:#0e1530;
  --card:#0f254f;
  --accent:#ffd166;
  --text:#e6eef8;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,var(--bg),#07102a);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
.container{
  width:min(520px, calc(100% - 24px));
  padding:18px;
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  box-shadow:0 6px 30px rgba(2,6,23,0.7);
  text-align:center;
}
h1{margin:6px 0 12px;font-size:20px}
canvas{background:linear-gradient(180deg,#07102a,#0b2347);display:block;margin:0 auto;border-radius:6px;border:2px solid rgba(255,255,255,0.04);max-width:100%;height:auto;touch-action:none}
.controls{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
button{background:var(--accent);border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600}
.hint{font-size:12px;opacity:0.8;margin-top:8px}

@media (max-width: 480px) {
  .container{padding:12px}
  .controls{flex-wrap:wrap;gap:8px}
  button{min-height:44px}
}