:root{
  --bg:#0e0d13;
  --ink:#f7f4fb;
  --mint:#b7ffe3;
  --lav:#c9b7ff;
  --rose:#ffb3d6;
  --sun:#ffe1a8;
  --aqua:#aee6ff;
  --danger:#ff6b6b;
  --good:#25d366;
  --hud: rgba(255, 255, 255, 0.85);
}

html, body {
  height:100%;
  margin:0;
  background:radial-gradient(1200px 800px at 50% -200px, #1b1830 0%, #0e0d13 50%, #0b0a11 100%);
  color:var(--ink);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
}
#wrap {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}
canvas {
  background:transparent;
  display:block;
  image-rendering:pixelated;
}

.hud{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:0.75rem;
  padding:0.75rem 1rem;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.4)
}

.badge{
  padding:0.2rem 0.5rem;
  border-radius:0.5rem;
  background:rgba(255, 255, 255, 0.08);
  backdrop-filter:blur(2px);
}

.center{
  margin-top:0.25rem;
  display:flex;
  justify-content:center;
  gap:0.5rem;
  opacity:0.8;
  font-size:0.9rem;
}

#charge{
  position:relative;
  min-width:120px;
}
#charge .bar{
  position:absolute;
  left:3px;
  right:3px;
  bottom:3px;
  height:6px;
  border-radius:4px;
  background:rgba(255, 255, 255, 0.15);
  overflow:hidden;
}
#charge .fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:linear-gradient(90deg, var(--rose), var(--lav), var(--aqua));
}

.modal{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(14, 13, 19, 0.85));
  backdrop-filter:blur(4px);
  z-index: 4;
}
.card{
  width:min(560px, 92vw);
  border-radius:16px;
  padding:20px 22px;
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  box-shadow:0 10px 30px rgba(0, 0, 0, 0.35);
}
.card h1{
  margin: 0.2rem 0 0;
  font-size:1.6rem;
}
.card p{
  opacity: 0.9;
  line-height:1.4;
}
.card p.small{
  opacity: 0.7;
  margin-top:0.6rem;
}
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:0.65rem 1rem;
  font-weight:700;
  cursor:pointer;
  color:#15131d;
  background:white;
}
.btn.pastel{
  background:linear-gradient(90deg, var(--rose), var(--lav), var(--aqua));
  color:#101018;
}
.btn.ghost{
  background:transparent;
  color:white;
  border:1px solid rgba(255, 255, 255, 0.25);
}

.touch{
  position:absolute;
  inset:auto 0 10px 0;
  display:flex;
  justify-content:center;
  gap:10px;
  pointer-events:auto;
  z-index: 5;
}
.tbtn{
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  border-radius:12px;
  padding:14px 16px;
  border:1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color:white;
  font-weight:700;
  min-width:90px;
}
@media (min-width: 900px){ .touch{ display:none } }