* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height:100%;
  background:#03040a;
  overflow:hidden;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  overscroll-behavior:none;
}

#stage {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}

canvas#game {
  display:block;
  background:#04050d;
  border-radius:6px;
  box-shadow:0 0 60px rgba(80,40,180,.35), 0 0 14px rgba(0,0,0,.9);
}

/* ---------- HUD ---------- */
#hud {
  position:absolute;
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none;
  padding:10px 14px 0;
  width:100%; top:0; left:0;
  font-variant-numeric:tabular-nums;
}
#hud-score {
  color:#dffaff;
  font-size:clamp(20px, 4.4vh, 34px);
  font-weight:800; letter-spacing:1px;
  text-shadow:0 0 12px rgba(60,220,255,.8);
  transition:transform .08s;
}
#hud-score.bump { transform:scale(1.12); }
#hud-right { text-align:right; color:#9fb3d8; font-weight:600; }
#hud-ball { font-size:clamp(11px, 1.8vh, 15px); letter-spacing:2px; }
#hud-bx   { font-size:clamp(11px, 1.8vh, 15px); letter-spacing:2px; color:#ffd56b; text-shadow:0 0 8px rgba(255,190,60,.6); }

#combo-pill {
  position:absolute; top:13%; left:50%; transform:translateX(-50%);
  color:#0a0a14; background:linear-gradient(90deg,#ffd56b,#ff8c4b);
  font-weight:900; font-size:clamp(12px,2vh,17px); letter-spacing:2px;
  padding:3px 14px; border-radius:20px;
  box-shadow:0 0 18px rgba(255,160,60,.8);
  pointer-events:none;
}

/* ---------- floating messages ---------- */
#msg-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.msg {
  position:absolute; left:50%; top:38%;
  transform:translate(-50%,-50%) scale(.6);
  color:#fff; font-weight:900; text-align:center;
  letter-spacing:3px; white-space:pre-line;
  font-size:clamp(20px, 4.2vh, 40px);
  text-shadow:0 0 16px currentColor, 0 0 40px currentColor;
  opacity:0;
  animation:msgPop var(--dur,1.6s) ease-out forwards;
}
.msg .sub { display:block; font-size:.45em; letter-spacing:5px; opacity:.85; margin-top:.2em; }
@keyframes msgPop {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.5); }
  12%  { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  20%  { transform:translate(-50%,-50%) scale(1); }
  80%  { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-58%) scale(1.02); }
}

/* ---------- touch zones ---------- */
.touch-zone { position:absolute; top:0; bottom:0; width:50%; }
#touch-left  { left:0; }
#touch-right { right:0; }
.touch-zone.flash-l { background:linear-gradient(90deg, rgba(80,200,255,.07), transparent 40%); }
.touch-zone.flash-r { background:linear-gradient(270deg, rgba(80,200,255,.07), transparent 40%); }

#launch-btn {
  position:absolute; bottom:4%; left:50%; transform:translateX(-50%);
  font:800 15px/1 inherit; letter-spacing:2px;
  color:#04121a; background:linear-gradient(180deg,#54e7ff,#1fa6d8);
  border:none; border-radius:30px; padding:14px 26px;
  box-shadow:0 0 22px rgba(60,220,255,.7);
  animation:pulse 1.4s ease-in-out infinite;
}
#launch-btn:active { filter:brightness(1.3); }
@keyframes pulse { 50% { box-shadow:0 0 38px rgba(60,220,255,1); } }

/* ---------- corner buttons ---------- */
#corner-btns { position:absolute; bottom:10px; right:10px; display:flex; gap:8px; }
#corner-btns button {
  width:38px; height:38px; border-radius:50%;
  background:rgba(20,30,60,.65); color:#9fd8ff;
  border:1px solid rgba(120,180,255,.35);
  font-size:16px; font-weight:700;
  backdrop-filter:blur(4px);
  cursor:pointer;
}
#corner-btns button.off { color:#44506e; text-decoration:line-through; }

/* ---------- overlay ---------- */
#overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 35%, rgba(40,20,90,.88), rgba(3,4,10,.96));
  backdrop-filter:blur(3px);
  transition:opacity .35s;
}
#overlay.hidden { opacity:0; pointer-events:none; }
#overlay-card { text-align:center; padding:24px; max-width:92%; }

.title {
  font-size:clamp(22px, min(8vh, 7.2vw), 64px);
  font-weight:900; letter-spacing:.14em;
  background:linear-gradient(180deg,#e8f6ff 20%,#7fd0ff 50%,#b07bff 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(140,90,255,.7));
}
.subtitle {
  color:#8aa0c8; letter-spacing:7px; font-size:clamp(10px,1.7vh,14px);
  font-weight:600; margin:6px 0 22px;
}
#overlay-score { margin-bottom:14px; }
.final-label { color:#8aa0c8; letter-spacing:4px; font-size:12px; font-weight:700; }
#final-score {
  color:#ffe9a8; font-size:clamp(28px,5.5vh,46px); font-weight:900;
  text-shadow:0 0 18px rgba(255,200,80,.8);
  font-variant-numeric:tabular-nums;
}
#overlay-high { color:#9fb3d8; letter-spacing:2px; font-weight:600; margin-bottom:26px; font-variant-numeric:tabular-nums; }
#overlay-high span { color:#dffaff; }

#play-btn {
  font:900 clamp(16px,2.6vh,20px)/1 inherit; letter-spacing:4px;
  color:#04121a; background:linear-gradient(180deg,#6cf2ff,#23a8e0);
  border:none; border-radius:40px; padding:16px 46px;
  box-shadow:0 0 30px rgba(70,220,255,.55);
  cursor:pointer;
  transition:transform .1s;
}
#play-btn:hover  { transform:scale(1.05); }
#play-btn:active { transform:scale(.97); }

#howto { margin-top:26px; color:#7286ab; font-size:clamp(11px,1.6vh,13px); line-height:1.9; }
#howto b { color:#aee6ff; }
.how.dim { opacity:.75; max-width:420px; margin:8px auto 0; }
.hidden { display:none !important; }

@media (hover:hover) and (pointer:fine) { .mobile-only  { display:none; } }
@media not ((hover:hover) and (pointer:fine)) { .desktop-only { display:none; } }