:root{
  --bg:#0b1020;
  --panel:#111a33;
  --text:#e9eefc;
  --muted:#9fb0ff;
  --accent:#4d7cff;
  --danger:#ff4d4d;
  --ok:#33d17a;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; }
#wrap{ position:relative; width:100%; height:100%; overflow:hidden; }

canvas#game{
  position:absolute; inset:0;
  width:100%; height:100%;
  background: radial-gradient(1200px 800px at 70% 30%, #17224a 0%, #0b1020 55%, #070a14 100%);
  touch-action:none;
}

#hud{
  position:absolute; top:10px; left:10px; right:10px;
  z-index:5;
  pointer-events:none;
}
.hud-row{ display:flex; justify-content:space-between; gap:10px; }
#hudLeft,#hudRight{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pill{
  pointer-events:none;
  padding:6px 10px; border-radius:999px;
  background:rgba(17,26,51,.72);
  border:1px solid rgba(77,124,255,.28);
  backdrop-filter: blur(8px);
  font-weight:600;
}
.pill-btn{
  pointer-events:auto;
  padding:6px 10px; border-radius:999px;
  background:rgba(17,26,51,.72);
  border:1px solid rgba(77,124,255,.28);
  color:var(--text);
  font-weight:700;
}
#toast{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

#controls{
  position:absolute; left:0; right:0; bottom:0;
  z-index:6;
  height:42%;
  pointer-events:none;
}
#stick{
  position:absolute; left:18px; bottom:18px;
  width:160px; height:160px;
  pointer-events:auto;
}
#stickBase{
  position:absolute; inset:0;
  border-radius:50%;
  background:rgba(17,26,51,.45);
  border:1px solid rgba(255,255,255,.10);
}
#stickKnob{
  position:absolute; left:50%; top:50%;
  width:64px; height:64px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(77,124,255,.55);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}

#buttons{
  position:absolute; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:auto;
}
.btn{
  border:0; border-radius:16px;
  padding:14px 18px;
  font-weight:800;
  color:var(--text);
  background:rgba(17,26,51,.78);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.btn.big{ padding:18px 22px; border-radius:18px; font-size:18px; letter-spacing:1px; }
.btn.primary{ background:rgba(77,124,255,.85); border-color:rgba(77,124,255,.25); }
.btn.danger{ background:rgba(255,77,77,.85); border-color:rgba(255,77,77,.25); }
.btn:active{ transform:translateY(1px); }

#overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
.hidden{ display:none !important; }

.panel{
  width:min(520px, 100%);
  background:linear-gradient(180deg, rgba(17,26,51,.98), rgba(10,14,28,.98));
  border:1px solid rgba(77,124,255,.25);
  border-radius:22px;
  padding:18px 18px 14px;
  box-shadow:0 25px 80px rgba(0,0,0,.45);
}
.panel h1{ margin:4px 0 6px; font-size:24px; }
.panel p{ margin:0 0 14px; color:var(--muted); }
.panel-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 14px; }
.tips{ display:grid; gap:8px; color:var(--muted); font-size:14px; }
.tip{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:10px; border-radius:14px; }
.foot{ display:block; margin-top:10px; color:rgba(159,176,255,.7); }

@media (max-height: 700px){
  #controls{ height:48%; }
  #stick{ width:140px; height:140px; }
  #stickKnob{ width:56px; height:56px; }
}