@import url('../_shared/arcade.css?v=20260607c');

:root{
  --accent:#25e8ff;
  --accent2:#ff3fc7;
  --gold:#ffe766;
  --green:#4dff9d;
  --hot:#ff4c6f;
}

html,body{background:#02040d}
.game-shell{background:radial-gradient(circle at 50% -8%,#183261 0%,#090f24 36%,#02040d 100%)}
.game-bar{background:rgba(3,6,18,.76);border-bottom-color:rgba(37,232,255,.18)}
.game-bar-title{letter-spacing:.08em;background:linear-gradient(90deg,#25e8ff,#ffe766,#ff3fc7);-webkit-background-clip:text;background-clip:text;color:transparent}
.icon-btn{border-radius:8px;font-size:.72rem;font-weight:1000;color:#dffaff;border-color:rgba(37,232,255,.24);background:rgba(2,10,28,.65);display:inline-flex;align-items:center;justify-content:center}
.icon-btn.is-muted{color:#6f7b9e}
.icon-btn .ic-sound-off{display:none}
.icon-btn.is-muted .ic-sound-on{display:none}
.icon-btn.is-muted .ic-sound-off{display:block}
.game-wrap{display:block;background:#02040d}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.scanline{position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 1px);background-size:100% 4px;mix-blend-mode:screen;opacity:.26}
.fx-layer{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.fx-float{position:absolute;transform:translate(-50%,-50%);font-weight:1000;font-size:.95rem;letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 12px rgba(0,0,0,.95),0 0 18px currentColor;animation:float-up .95s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes float-up{0%{opacity:0;transform:translate(-50%,-20%) scale(.66)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-180%) scale(1.16)}}

.hud{padding:10px 12px max(12px,var(--safe-bottom));gap:9px}
.hud-top{gap:7px}
.hud-chip{min-width:76px;border-radius:8px;background:rgba(3,8,24,.62);border-color:rgba(37,232,255,.18);box-shadow:0 0 20px rgba(37,232,255,.08)}
.hud-chip span{color:#9fb6d8}
.hud-chip b{color:#f7fbff;font-variant-numeric:tabular-nums}
.hud-btn{border-radius:8px;background:rgba(3,8,24,.72);border-color:rgba(255,255,255,.16)}
.hud-row2{gap:7px}
.streak-tag,.ball-tag{border-radius:8px}
.streak-tag{padding:.32rem .58rem;background:rgba(3,8,24,.58);border:1px solid rgba(255,231,102,.22)}
.ball-tag{background:linear-gradient(135deg,#25e8ff,#4dff9d);color:#03111c}
.precision-meter{width:min(280px,52vw);height:8px;border-radius:999px;background:rgba(3,8,24,.68);border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 0 18px rgba(37,232,255,.12)}
.precision-meter i{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff4c6f,#ffe766,#4dff9d,#25e8ff);transition:width .12s linear}
.hud-hint{border-radius:8px;background:rgba(3,8,24,.58);border-color:rgba(255,255,255,.1);transition:opacity .7s ease}
.hud-hint.gone{opacity:0}
.hud-banner{margin:auto auto 7vh;color:#fff;text-shadow:0 0 26px rgba(37,232,255,.85),0 0 8px rgba(0,0,0,.95)}
.hud-banner.combo{color:var(--gold);text-shadow:0 0 28px rgba(255,231,102,.9)}

.screen{background:radial-gradient(circle at 50% 18%,rgba(37,232,255,.12),rgba(8,15,40,.58) 42%,rgba(0,0,0,.82));backdrop-filter:blur(4px)}
.panel{border-radius:8px;background:linear-gradient(180deg,rgba(6,14,34,.9),rgba(4,6,18,.88));border-color:rgba(37,232,255,.18);box-shadow:0 26px 90px rgba(0,0,0,.65),0 0 60px rgba(37,232,255,.12)}
.panel h1{letter-spacing:0;font-size:clamp(2.1rem,9vw,3.65rem);background:linear-gradient(135deg,#f7fbff,#25e8ff,#ffe766,#ff3fc7);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel h1 span{font-size:.58em;letter-spacing:.12em;margin-top:.12em}
.panel h2{letter-spacing:0}
.eyebrow{color:#25e8ff}
.subtitle{max-width:34rem;margin:0 auto}
.menu-actions button,.summary-grid div,.how-grid div,.lb-row,.nn-score-nudge,.stat-strip span{border-radius:8px}
.menu-actions button{min-height:50px;background:rgba(255,255,255,.065);border-color:rgba(37,232,255,.17)}
.menu-actions button:hover{border-color:rgba(37,232,255,.36);box-shadow:0 0 20px rgba(37,232,255,.1)}
.menu-actions .primary{background:linear-gradient(135deg,#25e8ff,#4dff9d);color:#02101b}
.stat-strip span{background:rgba(3,8,24,.56)}
.how-grid div{background:rgba(3,8,24,.56);border-color:rgba(255,255,255,.1)}
.leaderboard-list.large{margin-top:14px}
.lb-row{background:rgba(3,8,24,.56);border-color:rgba(255,255,255,.11)}
.summary-grid{grid-template-columns:repeat(4,1fr)}
.summary-grid div{background:rgba(3,8,24,.6)}
.summary-grid b{font-variant-numeric:tabular-nums}
.over-panel{width:min(560px,calc(100vw - 26px))}
.nn-score-nudge{border-color:rgba(255,231,102,.38);background:rgba(255,231,102,.1)}
.nn-nudge-signup,.nn-nudge-later{border-radius:8px}

.loading-panel{overflow:hidden}
.logo-tower{height:76px;width:92px;margin:0 auto 16px;display:flex;align-items:flex-end;justify-content:center;gap:5px;filter:drop-shadow(0 0 22px rgba(37,232,255,.55))}
.logo-tower i{display:block;width:24px;border:1px solid rgba(255,255,255,.38);background:linear-gradient(180deg,#25e8ff,#0b3861);box-shadow:0 0 22px rgba(37,232,255,.45),inset 0 0 14px rgba(255,255,255,.26);animation:logo-block 1.6s ease-in-out infinite}
.logo-tower i:nth-child(1){height:38px;background:linear-gradient(180deg,#ff3fc7,#3b1545);animation-delay:.12s}
.logo-tower i:nth-child(2){height:64px;background:linear-gradient(180deg,#ffe766,#3d3309);animation-delay:0s}
.logo-tower i:nth-child(3){height:50px;background:linear-gradient(180deg,#25e8ff,#072b49);animation-delay:.24s}
@keyframes logo-block{50%{transform:translateY(-8px);filter:brightness(1.4)}}
.load-bar{height:8px;margin:18px auto 0;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.load-bar i{display:block;height:100%;width:10%;border-radius:999px;background:linear-gradient(90deg,#25e8ff,#ffe766,#ff3fc7);transition:width .25s ease}

@media (max-width:700px){
  .game-bar{height:48px;padding-left:9px;padding-right:9px}
  .game-bar-title{font-size:.72rem}
  .back-link{font-size:.72rem}
  .hud{padding-left:8px;padding-right:8px}
  .hud-chip{min-width:0;padding:.33rem .48rem}
  .hud-chip span{font-size:.5rem}
  .hud-chip b{font-size:.86rem}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .precision-meter{width:min(260px,74vw)}
  .panel{padding:20px 18px}
}

@media (max-width:420px){
  .hud-top{gap:5px}
  .hud-chip{padding:.3rem .42rem}
  .hud-chip b{font-size:.78rem}
  .hud-btn{width:35px;height:35px}
  .hud-hint{font-size:.66rem}
}

@media (prefers-reduced-motion: reduce){
  .scanline{display:none}
  .fx-float{animation-duration:.6s}
  .logo-tower i{animation:none}
}