/* Game-only styles: canvas, HUD, icon buttons, start/game-over overlays.
   Shared variables, buttons, card and typography live in style.css. */

#game{
  position:fixed; inset:0; display:block;
  touch-action:none; cursor:pointer;
}

#ui-overlay{
  position:fixed; inset:0; pointer-events:none;
  font-family:'Inter', system-ui, sans-serif;
}

/* ---------- HUD ---------- */
#hud{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  display:flex; align-items:stretch; gap:0;
  background:var(--panel-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius:16px;
  border-top:3px solid var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
  overflow:hidden;
  pointer-events:none;
}
.hud-stat{
  padding:8px 20px; text-align:center; min-width:88px;
}
.hud-stat + .hud-stat{ border-left:1px solid rgba(255,255,255,0.15); }
.hud-label{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(253,246,233,0.65); font-weight:600; margin-bottom:2px;
}
.hud-value{
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:22px;
  color:var(--balloon-cream); line-height:1.1;
}
.hud-value span{ font-size:13px; opacity:0.7; font-weight:600; margin-left:2px; }

/* ---------- Round icon buttons (menu / mute) ---------- */
.icon-btn{
  position:absolute; top:16px;
  width:44px; height:44px; border-radius:50%;
  background:var(--panel-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.15);
  color:var(--balloon-cream); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:auto;
  text-decoration:none;
  transition:transform 0.15s ease, background 0.15s ease;
}
.icon-btn:hover{ transform:scale(1.07); background:rgba(20,18,40,0.75); }
.icon-btn:active{ transform:scale(0.94); }
.icon-btn:focus-visible{ outline:3px solid var(--balloon-cream); outline-offset:2px; }

#menuBtn{ left:16px; }
#muteBtn{ right:16px; }

/* ---------- Overlays (start / game over) ---------- */
.screen{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
}
.screen.hidden{ display:none; }

.title.pop{ color:#FF6B57; }

.score-row{
  display:flex; justify-content:center; gap:26px; margin:18px 0 24px;
}
.score-box .hud-label{ color:rgba(253,246,233,0.6); }
.score-box .hud-value{ font-size:26px; }

@media (max-width:420px){
  .hud-stat{ padding:8px 14px; min-width:70px; }
}