/* Le Chonk Feast: small additions on top of style.css (the arcade shell lives there). */
.game-frame { -webkit-tap-highlight-color: transparent; }
.game-frame canvas { cursor: crosshair; }
.game-overlay[hidden] { display: none !important; }

/* touch targets: every control in the HUD and the back link is at least 44 px tall */
.game-hud { row-gap: 8px; }
.game-hud .btn { min-height: 44px; }
.game-hud .hud-chip { padding: 9px 12px; }
.back-link { min-height: 44px; align-items: center; }

/* the dash button carries its own cooldown ring: a conic arc that fills as the dash recharges */
.btn-dash { min-width: 140px; gap: 9px; font-variant-numeric: tabular-nums; }
.btn-dash:disabled { opacity: 0.9; color: var(--muted); }
.dash-ring {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(var(--orange-hi) calc(var(--p, 100) * 1%), rgba(255, 249, 240, 0.18) 0);
}
.dash-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #140a00;
}
.btn-dash:not(:disabled) .dash-ring { box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25); }

/* HUD values: the hearts in pink, the multiplier in orange, the phase in the display face */
[data-hud="hearts"] { color: var(--pink); letter-spacing: 0.06em; }
[data-hud="combo"] { color: var(--orange-hi); }
[data-hud="phase"] { color: var(--cream); font-size: 15px; }

@media (max-width: 520px) {
  .game-hud { gap: 6px; }
  .game-hud .hud-chip { padding: 8px 10px; font-size: 12px; }
  .game-hud .hud-chip b { font-size: 15px; }
  .btn-dash { min-width: 0; padding: 0 12px; }
  .hud-spacer { display: none; }
}