/* styles.css */
:root{
  --bg:#0c0f17;--panel:#141826;--text:#e9edf3;--muted:#9aa6bf;--accent:#67e8f9;--accent2:#a78bfa;--good:#22c55e;--warn:#f59e0b;--bad:#ef4444;
}

*{box-sizing:border-box}

html,body{height:100%; overscroll-behavior:none}

body{
  margin:0;
  background:radial-gradient(1200px 800px at 20% 10%,#11162a,#0b0e18);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  display:flex; align-items:center; justify-content:center;
}

.wrap{width:min(1100px,96vw);padding:16px}

.hud{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px}

.title{font-weight:800;letter-spacing:.3px;font-size:18px;display:flex;gap:10px;align-items:center}
.title .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2))}

.stats{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:linear-gradient(180deg,#181d30,#111524);border:1px solid #232a45;border-radius:12px;padding:8px 10px;display:flex;gap:8px;align-items:baseline;min-width:110px;justify-content:space-between}
.chip b{font-size:18px}

.controls{display:flex;gap:8px}
button{background:linear-gradient(180deg,#1a2033,#131828);border:1px solid #2a3558;color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
button:hover{filter:brightness(1.08)}

canvas{
  width:100%; height:auto;
  background:linear-gradient(#0b1222,#0d1730);
  border:1px solid #243055; border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  display:block;
  /* Stops mobile page dragging while shooting */
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}

.hint{margin-top:8px;color:var(--muted);font-size:14px}