/* BREAKTHROUGH — style.css
   Fixed logical canvas, scaled responsively. Portrait-friendly. */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:#05060f; touch-action:none; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  color:#eaf2ff; user-select:none; -webkit-user-select:none;
}
#app { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }

/* #stage is sized to the canvas; every in-game DOM layer (HUD, chips, buttons,
   overlays) anchors to it so the HUD hugs the playfield on wide desktops. */
#stage { position:relative; }
#game {
  background:#05060f;
  width:100%; height:100%;
  max-width:calc(100vh * 0.75); /* keep 3:4 logical aspect, letterbox otherwise */
  aspect-ratio: 3/4;
  display:block;
  box-shadow:0 0 80px rgba(60,80,255,.18);
}
@media (orientation:landscape) and (min-width:760px) {
  #game { max-width:none; max-height:100vh; width:auto; height:100vh; }
}

/* ---------- HUD ---------- */
#hud {
  position:absolute; left:0; right:0; top:0;
  padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left));
  pointer-events:none; z-index:30;
  display:flex; flex-direction:column; gap:2px;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.hud-top-row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.hud-left { text-align:left; }
.hud-score { font-size:clamp(20px,4.2vmin,30px); font-weight:800; letter-spacing:1px; color:#fff; }
.hud-hi { font-size:12px; opacity:.6; letter-spacing:2px; }
.hud-mid { flex:1; text-align:center; min-width:0; }
.hud-mult { font-size:clamp(16px,3.4vmin,24px); font-weight:800; color:#7df; transition:transform .08s; }
.hud-mult.pop { transform:scale(1.35); }
.hud-mult.frenzy { color:#ffd166; text-shadow:0 0 14px #ff9f1c; }
#hudMultBar { width:110px; height:4px; background:rgba(255,255,255,.12); margin:4px auto 0; border-radius:2px; overflow:hidden; }
#hudMultBar i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#4cc9f0,#f72585); border-radius:2px; transition:width .1s linear; }
.hud-right { text-align:right; min-width:0; padding-right:150px; }
.hud-lives {
  font-size:22px; line-height:1; letter-spacing:4px; color:#ff5d7e; padding-top:4px;
  text-shadow:0 0 10px rgba(255,60,110,.85), 0 2px 3px rgba(0,0,0,.8);
}
/* leave room for the button row which sits over the canvas corner */
#hudLives { margin-right:0; }
.hud-level {
  font-size:12px; opacity:.7; letter-spacing:2px; margin-top:2px;
  text-align:left; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Active power-up chips ---------- */
#powerups {
  position:absolute; left:12px; bottom:calc(22px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:6px; pointer-events:none; z-index:30;
}
#powerups:empty { display:none; }
.pu-chip {
  display:flex; align-items:center; gap:7px; padding:5px 10px 5px 6px;
  background:rgba(10,16,40,.78); border:1px solid rgba(120,180,255,.35); border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:1px; backdrop-filter:blur(4px);
  animation:chipIn .18s ease-out;
}
.pu-chip .ic { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; flex:0 0 auto; }
.pu-chip .lb { color:#dfeaff; text-shadow:0 1px 2px rgba(0,0,0,.7); }
.pu-chip .tm { color:#9fd4ff; font-variant-numeric:tabular-nums; min-width:20px; text-align:right; }
.pu-chip .bar { width:34px; height:3px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; }
.pu-chip .bar i { display:block; height:100%; background:#7df; }
@keyframes chipIn { from { transform:translateX(-14px); opacity:0; } }

/* ---------- Overlay screens ---------- */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:40; }
.overlay.hidden { display:none; }
.screen {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:24px; text-align:center; background:rgba(4,6,16,.68); backdrop-filter:blur(6px);
}
.screen.hidden { display:none; }
.logo { font-size:clamp(38px,10vmin,72px); font-weight:900; letter-spacing:2px; line-height:1;
  background:linear-gradient(180deg,#fff,#8ab6ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(90,140,255,.45)); }
.logo span { background:linear-gradient(180deg,#ffd166,#f72585); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { opacity:.75; font-size:clamp(13px,2.6vmin,16px); max-width:34em; }
h2 { font-size:clamp(24px,6vmin,40px); font-weight:900; letter-spacing:1px; }
h3 { font-size:13px; letter-spacing:2px; color:#8ab6ff; margin-bottom:8px; }
.hi-line { font-size:14px; color:#ffd166; letter-spacing:1px; }
.hint { font-size:11px; letter-spacing:3px; opacity:.4; }
.menu-btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn {
  padding:14px 34px; font:inherit; font-weight:800; font-size:16px; letter-spacing:2px;
  color:#eaf2ff; background:rgba(30,44,90,.55); border:1px solid rgba(140,180,255,.4);
  border-radius:14px; cursor:pointer; transition:transform .1s, background .15s; touch-action:manipulation;
}
.btn:hover { background:rgba(50,70,130,.7); }
.btn:active { transform:scale(.95); }
.btn.primary { background:linear-gradient(180deg,#4361ee,#7209b7); border-color:rgba(180,200,255,.6);
  box-shadow:0 6px 30px rgba(80,80,255,.4); }
.btn.primary:hover { filter:brightness(1.15); }
.btn.secondary { background:rgba(60,40,30,.55); border-color:rgba(255,170,110,.4); }
.btn.secondary:hover { background:rgba(110,60,40,.7); }
.help-cols { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; max-width:900px; font-size:12.5px; line-height:1.55; opacity:.9; }
.help-col { flex:1 1 220px; max-width:300px; text-align:left; background:rgba(15,22,50,.6); border:1px solid rgba(120,160,255,.18); border-radius:14px; padding:14px; }
.help-col p { margin:4px 0; }
.c-angle{color:#ffb02e} .c-speed{color:#4cc9f0} .c-move{color:#b5e48c} .c-phase{color:#c77dff}
.c-bomb{color:#ff5d5d} .c-regen{color:#ff9770} .c-fire{color:#ff7043} .c-heavy{color:#ffd166}
.c-split{color:#90f0ff} .c-gold{color:#ffe066} .c-frenzy{color:#ffd166}

/* ---------- Level-clear celebration ---------- */
#stateScreen.clear h2 {
  font-size:clamp(34px,9vmin,64px);
  background:linear-gradient(92deg,#ffe066,#ff9f1c 30%,#f72585 60%,#4cc9f0);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:clearSlide 2.4s linear infinite, clearPulse 1.1s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 22px rgba(255,180,60,.55));
}
#stateScreen.clear { background:rgba(8,10,26,.55); }
.scorecard {
  display:flex; gap:26px; padding:12px 26px; border-radius:14px;
  background:rgba(15,22,50,.65); border:1px solid rgba(255,200,110,.35);
}
.scorecard { transition:opacity .15s; }
.scorecard.hidden { display:none; }
.scorecard div { display:flex; flex-direction:column; gap:2px; }
.scorecard .k { font-size:10px; letter-spacing:2px; opacity:.6; }
.scorecard .v { font-size:clamp(18px,4vmin,26px); font-weight:900; color:#ffe066; font-variant-numeric:tabular-nums; }
@keyframes clearSlide { from { background-position:0% 0; } to { background-position:220% 0; } }
@keyframes clearPulse { from { transform:scale(1); } to { transform:scale(1.045); } }

/* ---------- Top buttons ---------- */
#topBtns { position:absolute; top:calc(6px + env(safe-area-inset-top)); right:8px; display:flex; gap:8px; z-index:50; }
#topBtns.hidden { display:none; }
#topBtns button {
  width:40px; height:40px; border-radius:12px; font-size:15px; color:#cfe0ff;
  background:rgba(12,18,44,.55); border:1px solid rgba(120,160,255,.28); cursor:pointer; font-family:inherit;
}
#topBtns button:hover { background:rgba(30,44,90,.7); }

/* ---------- Thumbstick ---------- */
#thumbzone { position:absolute; inset:0; pointer-events:none; z-index:20; }
#thumbzone.hidden { display:none; }
#thumbbase {
  position:absolute; width:110px; height:110px; border-radius:50%;
  border:2px solid rgba(140,180,255,.35); background:rgba(20,30,70,.25);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .15s;
}
#thumbknob { position:absolute; width:46px; height:46px; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%); background:rgba(140,180,255,.5); box-shadow:0 0 18px rgba(100,140,255,.6); }
#thumbzone.active #thumbbase { opacity:1; }