.hud { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 4; }
.hud.show { display: block; }
.hud-top { position: absolute; left: 12px; right: 12px; top: calc(var(--safe-t) + 10px); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.melt { font-size: 30px; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.6); min-width: 110px; text-align: center; }
.melt.warn { color: #ffb27a; animation: pulse .5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

.chips-row { position: absolute; left: 12px; right: 12px; top: calc(var(--safe-t) + 54px); display: flex; align-items: center; gap: 6px; }
.chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: flex; align-items: center; gap: 6px; background: rgba(18,58,102,.88); border: 1px solid rgba(94,200,229,.35); padding: 4px 10px 4px 6px;
  border-radius: 999px; font-size: 13px; color: var(--ice); }
.chip.out { opacity: .45; }
.chip .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.chip .stars { color: #ffd45e; letter-spacing: 1px; }
.sq { pointer-events: auto; width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(94,200,229,.5); background: rgba(18,58,102,.85); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sq svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sq.off #muteWave { display: none; }

.hud-bottom { position: absolute; left: 14px; right: 14px; bottom: calc(var(--safe-b) + 14px); display: flex; flex-direction: column; gap: 10px; }
.hint { text-align: center; font-size: 14px; color: #d6eef9; text-shadow: 0 2px 6px rgba(0,0,0,.7); transition: opacity .4s; }
.ctl-row { display: flex; gap: 12px; align-items: stretch; }
.powerbox { flex: 1; background: rgba(11,37,69,.78); border: 1px solid rgba(94,200,229,.3); border-radius: 16px; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 13px; color: var(--ice); }
.pwbar { height: 12px; border-radius: 6px; background: rgba(0,0,0,.4); overflow: hidden; }
.pwbar i { display: block; height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, #5ec8e5, #ff8a3d); }
.abil { pointer-events: auto; position: relative; overflow: hidden; width: 152px; min-height: 60px; border-radius: 16px; border: 2px solid #ffc59a; background: linear-gradient(#ffa45e, #ff8a3d);
  color: var(--navy); font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.abil:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.abil-name { font-size: 18px; }
.abil-sub { font-size: 12px; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; }
.abil .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: rgba(8,26,50,.72); pointer-events: none; }
.abil.cooling { color: #cfe9f5; border-color: rgba(94,200,229,.4); }

.banner { position: fixed; left: 0; right: 0; top: 34%; text-align: center; z-index: 8; pointer-events: none; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(40px, 13vw, 68px); color: #fff; text-shadow: 0 3px 0 #1a6f96, 0 6px 0 #0d4a6c, 0 10px 24px rgba(0,0,0,.5); opacity: 0; transform: scale(.6); line-height: 1.05; padding: 0 16px; }
.banner small { display: block; font-size: 22px; margin-top: 8px; color: var(--ice); text-shadow: 0 2px 8px rgba(0,0,0,.6); font-family: 'Nunito', system-ui, sans-serif; }
.banner.pop { animation: pop 1.1s ease-out forwards; }
.banner.hold { animation: popHold .35s ease-out forwards; }
@keyframes pop { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: 1; transform: scale(1.1); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes popHold { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }

.sel-title { font-size: 34px; text-shadow: 0 3px 10px rgba(0,0,0,.5); }
.res-portrait { width: 160px; height: 150px; }
.standings { display: flex; flex-direction: column; gap: 6px; width: min(340px, 100%); }
.standings .row { display: flex; align-items: center; gap: 10px; background: rgba(18,58,102,.85); border: 1px solid rgba(94,200,229,.3); border-radius: 14px; padding: 8px 12px; font-size: 16px; }
.standings .row .nm { flex: 1; text-align: left; }
.standings .row.me { border-color: #ffc59a; }
.standings .row .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.standings .row .stars { color: #ffd45e; }

@media (max-height: 640px) {
  .cards { gap: 8px; }
  .card canvas { height: 92px; }
  .logo { font-size: 44px; }
}

.title-screen { justify-content: space-between; padding-top: calc(var(--safe-t) + 56px); padding-bottom: calc(var(--safe-b) + 36px); }
.title-top { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.title-screen .btn-row { gap: 10px; }
.title-screen .btn { min-height: 48px; }