:root{
  --bg:#171321; --fg:#f7f8fa; --accent:#ABF500; --muted:#235FA8; --court:#0d314b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{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;
}
.bar{width:min(1100px,95%); display:flex; justify-content:space-between; align-items:center; gap:1rem; 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}
main{width:min(1100px,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:var(--court);
  box-shadow:var(--shadow);
}
.hint{opacity:.85; padding:1rem; text-align:center}

/* Overlay */
[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 var(--accent);
  border-radius:16px; padding:1.25rem 1.5rem; width:min(420px, 92%); text-align:center; box-shadow:var(--shadow);
}
.modal .btn{background:#235FA8; color:#fff; border:none; padding:.6rem 1rem; border-radius:.5rem; cursor:pointer}

/* 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:900;
}
.mobile-ctrls .btn{min-width:64px; 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.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 } }