@import url('../_shared/arcade.css?v=20260607c');
:root{ --accent:#29e7ff; --accent2:#b16cff; --gold:#ffd24a; --hot:#ff3b6b; }
.game-shell{ background:radial-gradient(circle at 50% 6%,#1b0f44 0%,#0c0726 42%,#05030f 100%); }

/* Three.js canvas fills the play area */
.game-wrap{display:block;background:#05030f}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* Floating score / pickup text overlay */
.fx-layer{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden}
.fx-float{position:absolute;transform:translate(-50%,-50%);font-weight:1000;font-size:.92rem;
  text-shadow:0 0 10px rgba(0,0,0,.9);white-space:nowrap;will-change:transform,opacity;animation:fxrise .9s ease-out forwards}
@keyframes fxrise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}16%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(1.1)}}

/* Health / shield bars */
.bar-stack{display:flex;flex-direction:column;gap:5px;margin-top:2px;max-width:260px}
.hp-bar,.sh-bar{display:flex;align-items:center;gap:7px}
.bar-ico{font-size:.85rem;width:16px;text-align:center;filter:drop-shadow(0 0 5px rgba(0,0,0,.6))}
.bar-track{flex:1;height:11px;border-radius:7px;background:rgba(8,8,22,.66);border:1px solid rgba(255,255,255,.14);overflow:hidden;backdrop-filter:blur(6px)}
.bar-track i{display:block;height:100%;width:100%;border-radius:7px;transition:width .18s ease,background .2s}
#hp-fill{background:linear-gradient(90deg,#ff3b6b,#ff9d3b)}
#hp-fill.mid{background:linear-gradient(90deg,#ffb13b,#ffe23b)}
#hp-fill.ok{background:linear-gradient(90deg,#2fffa6,#29e7ff)}
#sh-fill{background:linear-gradient(90deg,#29e7ff,#b16cff)}

/* Active powerup chips */
.pw-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.pw-chip{display:flex;align-items:center;gap:4px;font-size:.64rem;font-weight:900;letter-spacing:.04em;
  padding:.2rem .5rem;border-radius:999px;background:rgba(8,8,22,.6);border:1px solid var(--c,rgba(255,255,255,.2));
  color:var(--c,#fff);backdrop-filter:blur(6px);box-shadow:0 0 12px -2px var(--c)}
.pw-chip .pw-t{opacity:.85;font-variant-numeric:tabular-nums}

/* Boss bar */
.boss-bar{margin:4px auto 0;max-width:420px;width:90%;background:rgba(8,8,22,.6);border:1px solid rgba(255,59,107,.5);
  border-radius:12px;padding:5px 9px 7px;backdrop-filter:blur(8px);box-shadow:0 0 26px -6px var(--hot)}
.boss-name{display:block;font-size:.62rem;font-weight:1000;letter-spacing:.22em;color:var(--hot);text-align:center;margin-bottom:4px}
.boss-track{height:12px;border-radius:7px;background:rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,59,107,.4)}
.boss-track i{display:block;height:100%;width:100%;border-radius:7px;background:linear-gradient(90deg,#ff3b6b,#ffb13b,#ffe23b);transition:width .14s linear}

/* Boss warning banner */
.boss-warn{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:15;pointer-events:none;opacity:0;transition:opacity .25s}
.boss-warn.show{opacity:1;animation:bosspulse 1s ease-in-out infinite}
.boss-warn span{display:block;font-weight:1000;font-size:clamp(1.2rem,6.5vw,2.1rem);color:var(--hot);
  text-shadow:0 0 26px rgba(255,59,107,.95);letter-spacing:.05em}
@keyframes bosspulse{50%{transform:translate(-50%,-50%) scale(1.09)}}

.hud-banner{color:#fff;text-shadow:0 0 30px rgba(41,231,255,.8),0 0 8px rgba(0,0,0,.6)}
.hud-hint{margin-top:auto;margin-bottom:max(6px,var(--safe-bottom));align-self:center;transition:opacity .8s ease}

/* Damage vignette */
.dmg-flash{position:absolute;inset:0;z-index:13;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 120px 30px rgba(255,59,107,.7);transition:opacity .08s}
.dmg-flash.show{opacity:1}

@media (max-width:560px){.player-pill{display:none}.hud-chip b{font-size:.92rem}.bar-stack{max-width:200px}}

/* Motion sensitivity: calm the pulsing/rising overlays (game.js also disables
   camera shake and halves particle budgets under this preference). */
@media (prefers-reduced-motion:reduce){
  .boss-warn.show{animation:none}
  .fx-float{animation:fxfade .9s ease-out forwards}
  @keyframes fxfade{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
}