.hud { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 4; }
.hud.show { display: block; }
.hud-top { position: absolute; left: 10px; right: 10px; top: calc(var(--safe-t) + 8px); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hud-top .pill { font-family: 'Fredoka', system-ui, sans-serif; font-size: 16px; white-space: nowrap; }
.hud-c { font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,.6); text-align: center; flex: 1; min-width: 0; white-space: nowrap; }
.sqs { display: flex; gap: 6px; align-items: center; }
.sq { pointer-events: auto; width: 38px; height: 38px; 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: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sq.off #muteWave { display: none; }
.banner { position: fixed; left: 0; right: 0; top: 30%; 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.2s ease-out forwards; }
@keyframes pop { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1.12); } 28% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.sel-title { font-size: 34px; text-shadow: 0 3px 10px rgba(0,0,0,.5); }
.res-portrait { width: 150px; height: 140px; }
.res-stats { display: flex; flex-direction: column; gap: 6px; width: min(320px, 100%); }
.res-stats .row { display: flex; justify-content: space-between; align-items: center; background: rgba(18,58,102,.85); border: 1px solid rgba(94,200,229,.3); border-radius: 14px; padding: 8px 14px; font-size: 16px; }
.res-stats .row b { font-family: 'Fredoka', system-ui, sans-serif; font-size: 24px; }
.res-stats .row.hi { border-color: #ffc59a; }
.title-screen { justify-content: space-between; padding-top: calc(var(--safe-t) + 48px); padding-bottom: calc(var(--safe-b) + 32px); }
.title-top { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.title-art { width: min(340px, 100%); height: 200px; }
.title-screen .btn-row { gap: 10px; }
.title-screen .btn { min-height: 48px; }
@media (max-height: 700px) { .title-art { height: 140px; } .logo { font-size: 44px; } .title-screen { padding-top: calc(var(--safe-t) + 30px); } }
@media (max-width: 380px) { .hud-c { font-size: 17px; } .hud-top .pill { font-size: 14px; padding: 6px 10px; } }
:root { --navy: #0c1530; --navy2: #172650; --teal: #5ec8ff; --orange: #e8433a; --ice: #f2f6ff; --muted: #9ab0d8; }
html, body { background: #0c1530; }
.pill:empty { display: none; }
.pill, .sq { background: rgba(10, 20, 48, .92); border-color: rgba(94, 200, 255, .6); }
.logo { color: #f6f9ff; text-shadow: 0 3px 0 #d9332b, 0 6px 0 #2a52c0, 0 12px 24px rgba(0, 0, 0, .55); letter-spacing: .5px; }
.logo small { color: #5ec8ff; letter-spacing: 5px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.tag { color: #e6eeff; }
.btn { background: #172650; border-color: #5ec8ff; }
.btn.primary { background: linear-gradient(#ff6a52, #d9332b); border-color: #ffd9a8; color: #fff; }
.btn.ghost { background: rgba(23, 38, 80, .88); }
.btn.install { border-color: #ffcf4a; color: #fff0c0; }
.modal-card { background: #121e44; border-color: #5ec8ff; }
.res-stats .row { background: rgba(10, 20, 48, .94); border-color: rgba(94, 200, 255, .4); }
.res-stats .row.hi { border-color: #e8433a; }
.banner { text-shadow: 0 3px 0 #d9332b, 0 6px 0 #2a52c0, 0 10px 24px rgba(0,0,0,.55); }
.toast { background: rgba(8, 14, 34, .95); border-color: #5ec8ff; }
.screen.dim { background: rgba(4, 8, 22, .78); }
.title-art { height: 190px; }
.sbtn { pointer-events: auto; flex: 1; min-height: 72px; border-radius: 18px; border: 2px solid rgba(255,255,255,.55); background: linear-gradient(#5ec8ff, #2a82d8); color: #04223a;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.45); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.sbtn.red { background: linear-gradient(#ff8070, #d83a2c); color: #fff; }
.sbtn.green { background: linear-gradient(#7dea8a, #2fae4c); color: #05260f; }
.sbtn:active, .sbtn.down { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.sbtn[disabled] { opacity: .4; pointer-events: none; }
.sbar { position: absolute; left: 14px; right: 14px; bottom: calc(var(--safe-b) + 16px); display: flex; gap: 12px; pointer-events: none; }
.crowd { position: absolute; left: 14px; right: 14px; top: calc(var(--safe-t) + 54px); height: 8px; background: rgba(0,0,0,.55); border-radius: 6px; overflow: hidden; border: 1px solid rgba(94,200,255,.4); }
.crowd i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5ec8ff, #e8433a); }