/* OVERDRIVE BREAKOUT — styles. Responsive, touch-friendly, no dependencies. */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:#070b1d; }
body {
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color:#eaf2ff; user-select:none; -webkit-user-select:none; touch-action:none;
}
#game-wrap { position:fixed; inset:0; overflow:hidden; touch-action:none; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* ---------- HUD ---------- */
#hud { position:absolute; top:0; left:0; right:0; pointer-events:none; z-index:5;
  padding:calc(8px + env(safe-area-inset-top)) 10px 0 10px; }
.hud-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.hud-left, .hud-right { min-width:90px; }
.hud-right { text-align:right; }
#hud-score { font-size:26px; font-weight:800; letter-spacing:1px;
  text-shadow:0 0 12px rgba(0,229,255,.8); font-variant-numeric:tabular-nums; }
#hud-best { font-size:11px; opacity:.7; letter-spacing:1px; }
.hud-mid { text-align:center; flex:1; }
#hud-level { font-size:13px; font-weight:700; letter-spacing:2px; opacity:.9; }
#mult-wrap { margin-top:2px; }
#mult-label { font-size:18px; font-weight:800; color:#ffe14d; text-shadow:0 0 10px rgba(255,180,0,.9); }
#mult-bar { width:min(220px,40vw); height:8px; margin:3px auto 0; background:rgba(255,255,255,.12);
  border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.18); }
#mult-fill { height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg,#00e5ff,#7cff6b,#ffe14d,#ff5d5d); transition:width .12s linear; }
#hud-lives { font-size:18px; color:#ff6b81; letter-spacing:3px; text-shadow:0 0 8px rgba(255,60,90,.8); }
.hud-btns { margin-top:6px; display:flex; gap:8px; justify-content:flex-end; pointer-events:auto; }
.icon-btn {
  width:48px; height:48px; font-size:17px; font-weight:800; color:#eaf2ff;
  background:rgba(20,30,60,.72); border:1px solid rgba(120,180,255,.4); border-radius:12px;
  cursor:pointer; touch-action:manipulation;
}
.icon-btn:active { transform:scale(.92); background:rgba(40,60,110,.85); }
.icon-btn.off { opacity:.45; text-decoration:line-through; }
#power-timers { display:flex; gap:6px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.pow-chip { font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px;
  background:rgba(10,16,40,.75); border:1px solid #fff3; letter-spacing:.5px; }
#serve-hint {
  position:absolute; top:58vh; left:50%; transform:translateX(-50%);
  font-size:clamp(14px,2.6vw,20px); font-weight:800; letter-spacing:2px; white-space:nowrap;
  color:#fff; text-shadow:0 0 14px #00e5ff; animation:pulse 1s infinite alternate;
}
@keyframes pulse { from{opacity:.55} to{opacity:1} }

/* ---------- Overdrive banner / toast ---------- */
#overdrive-banner {
  position:absolute; top:calc(64px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  padding:8px 18px; border-radius:24px; font-weight:900; letter-spacing:1px; white-space:nowrap;
  font-size:clamp(13px,2.6vw,19px); z-index:6; pointer-events:none;
  background:linear-gradient(90deg,#ff2d95,#ff9a3d,#ffe14d,#7cff6b,#00e5ff,#b16bff,#ff2d95);
  background-size:300% 100%; animation:odslide 2.2s linear infinite; color:#0b1026;
  box-shadow:0 0 24px rgba(255,80,180,.75);
}
@keyframes odslide { to { background-position:300% 0; } }
#toast {
  position:absolute; top:34%; left:50%; transform:translate(-50%,-50%); z-index:6; pointer-events:none;
  font-size:clamp(18px,4.5vw,30px); font-weight:900; letter-spacing:2px; text-align:center;
  color:#fff; text-shadow:0 0 16px #00e5ff, 0 2px 0 #0008; white-space:nowrap;
}

/* ---------- Overlays ---------- */
.overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,20,.62); backdrop-filter:blur(3px); padding:16px; overflow:auto; }
.hidden { display:none !important; }
.panel { text-align:center; background:rgba(12,18,44,.92); border:1px solid rgba(120,180,255,.35);
  border-radius:20px; padding:28px 30px; max-width:min(480px,94vw); max-height:92vh; overflow:auto;
  box-shadow:0 0 50px rgba(0,180,255,.25); }
.panel h2 { letter-spacing:3px; margin-bottom:14px; font-size:clamp(20px,5vw,28px); }
.logo { display:flex; flex-direction:column; line-height:1; margin-bottom:10px; }
.logo-over { font-size:clamp(34px,9vw,58px); font-weight:900; letter-spacing:4px;
  background:linear-gradient(90deg,#ff2d95,#ffe14d,#7cff6b,#00e5ff,#b16bff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,80,180,.5)); animation:hue 6s linear infinite; }
.logo-break { font-size:clamp(20px,5vw,30px); font-weight:300; letter-spacing:14px; color:#cfe6ff; margin-top:4px; }
@keyframes hue { to { filter:hue-rotate(360deg) drop-shadow(0 0 18px rgba(255,80,180,.5)); } }
.tagline { opacity:.9; margin-bottom:12px; font-size:clamp(13px,3vw,16px); line-height:1.5; }
.tagline b { color:#ffe14d; }
.best-line { letter-spacing:2px; font-size:14px; opacity:.85; margin-bottom:16px; }
.big-btn {
  display:block; width:100%; margin:10px auto; padding:16px 20px; font-size:20px; font-weight:900;
  letter-spacing:2px; color:#06121f; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(90deg,#00e5ff,#7cff6b); box-shadow:0 0 22px rgba(0,229,255,.55);
  touch-action:manipulation; min-height:56px;
}
.big-btn:active { transform:scale(.96); }
.ghost-btn {
  display:block; width:100%; margin:8px auto; padding:13px; font-size:15px; font-weight:700;
  letter-spacing:2px; color:#cfe6ff; background:transparent; border:1px solid rgba(140,190,255,.5);
  border-radius:14px; cursor:pointer; touch-action:manipulation; min-height:50px;
}
.ghost-btn:active { transform:scale(.96); background:rgba(80,130,255,.15); }
.controls-hint { margin-top:12px; font-size:12px; opacity:.6; }
.howto-list { text-align:left; font-size:14px; line-height:1.65; margin:0 0 14px 0; list-style:none; }
.howto-list li { margin-bottom:8px; }
.score-line { font-size:24px; font-weight:800; letter-spacing:1px; margin:6px 0; }
.score-line.dim { opacity:.7; font-size:17px; }
#newbest { color:#ffe14d; font-weight:900; letter-spacing:2px; margin:8px 0; animation:pulse .5s infinite alternate; }
#level-num { font-size:15px; letter-spacing:4px; opacity:.75; }
#level-name { font-size:clamp(26px,6vw,38px); font-weight:900; letter-spacing:2px; margin:6px 0;
  color:#ffe14d; text-shadow:0 0 16px rgba(255,200,0,.6); }
#level-hint { font-size:14px; opacity:.9; margin-bottom:12px; line-height:1.5; }

/* ---------- Thumbstick ---------- */
#stick-base { position:absolute; width:110px; height:110px; border-radius:50%; z-index:8; pointer-events:none;
  border:2px solid rgba(0,229,255,.55); background:rgba(0,229,255,.08);
  transform:translate(-50%,-50%); box-shadow:0 0 18px rgba(0,229,255,.35); }
#stick-knob { position:absolute; left:50%; top:50%; width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #00e5ff 70%); transform:translate(-50%,-50%);
  box-shadow:0 0 14px rgba(0,229,255,.8); }

@media (max-width:520px) {
  #hud-score { font-size:21px; }
  #mult-label { font-size:15px; }
  .panel { padding:20px 18px; }
  .icon-btn { width:52px; height:52px; }
}