:root{
  --bg:#0b1020;
  --panel:#121a33;
  --text:#e8ecff;
  --muted:#a8b0d8;
  --accent:#6c7cff;
  --danger:#ff4d6d;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:radial-gradient(1200px 700px at 20% 10%, #182150, var(--bg));
  color:var(--text);
}

.wrap{max-width:1050px; margin:0 auto; padding:18px}
.topbar{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  background:rgba(18,26,51,.75);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px 16px;
  backdrop-filter: blur(10px);
}
h1{margin:0; font-size:22px}
.sub{margin:3px 0 0; color:var(--muted); font-size:13px}

.hud{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.stat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px 10px;
  min-width:92px;
}
.stat span{display:block; font-size:11px; color:var(--muted)}
.stat b{font-size:16px}

.meter{
  height:12px; border-radius:999px; overflow:hidden;
  margin:12px 0 10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.meterFill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent), var(--danger));
  transition: width .12s linear;
}

canvas{
  width:100%;
  border-radius:18px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  display:block;
}

.help{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

.overlay{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55);
  z-index: 9999;            /* <-- important */
  pointer-events: auto;     /* <-- important */
}

.card{
  width:min(520px, 92vw);
  background:rgba(18,26,51,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:16px 16px 14px;
}
.card h2{margin:0 0 6px}
.card p{margin:0 0 12px; color:var(--muted)}
button{
  appearance:none;
  border:0;
  background:var(--accent);
  color:white;
  font-weight:700;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
}
button:hover{filter:brightness(1.05)}
