/* ============================================================
   RESONANCE SURGE — VERTICAL build-up meter + overclock eruption
   A super-meter docked to the LEFT of the shop bar: it fills
   bottom-up as you chain kills/merges without leaking the Nexus;
   at full the board overclocks (towers ×2, screen bloom) and the
   final blow drops into slow-mo. Uses the game's existing vars.
   ============================================================ */

/* ---------- vertical super-meter (left of the shop) ----------
   placeSurge() in surge.js docks this just left of the shop panel,
   vertically centred, measured from the real DOM. Values below are
   the pre-JS fallback. Order top→bottom: ⚡/% · track · chain · Unleash · state */
.surge{
  position:absolute;left:50%;bottom:5px;right:auto;top:auto;transform:translateX(-50%);
  z-index:46;display:flex;flex-direction:row;align-items:center;gap:0;width:auto;
  /* NO flex-wrap: an absolutely-positioned wrapping flexbox sizes to its UNWRAPPED width (phantom
     empty space left of the bar) — the CHARGING line hangs below via absolute positioning instead */
  font-family:'Rajdhani',sans-serif;user-select:none;
}
.surge-top,.surge-badge,.surge-trigger,.surge-state{display:none}   /* compact bar — label lives INSIDE the track */

/* ⚡ icon + % at the top */
.surge-top{display:flex;flex-direction:row;align-items:center;gap:5px;line-height:1}
.surge-top .st-ico{font-size:20px;filter:drop-shadow(0 0 8px rgba(176,108,255,.85))}
.surge-top .st-pct{font-size:15px;font-weight:700;color:#fff;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* the vertical track */
.surge-track{
  position:relative;width:280px;height:26px;border-radius:9px;overflow:hidden;cursor:default;   /* sized to visually match the Next Wave button */
  background:linear-gradient(180deg,rgba(8,10,26,.95),rgba(5,7,18,.97));
  border:1px solid rgba(176,108,255,.4);
  box-shadow:inset 0 0 16px rgba(0,0,0,.7),inset 0 1px 0 rgba(150,120,255,.15);
}
/* faint internal grid (horizontal rungs) */
.surge-track::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(150,120,255,.06) 0 1px,transparent 1px 11px)}

/* fill RISES from the bottom */
.surge-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:8px;
  background:linear-gradient(90deg,#3c1a78 0%,#6a2fc0 22%,#9b4dff 60%,#c79bff 100%);
  box-shadow:0 0 22px rgba(139,47,255,.7),inset 0 1px 0 rgba(255,255,255,.4);
  transition:width .18s linear;
}
/* moving energy striations flowing up */
.surge-fill::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 2px,transparent 2px 13px);
  animation:surgeFlow 1s linear infinite}
@keyframes surgeFlow{to{background-position:0 -26px}}

/* bright meniscus head riding the TOP of the fill */
.surge-head{position:absolute;top:-3px;bottom:-3px;width:10px;left:0%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.95),rgba(199,155,255,.4) 50%,transparent 75%);
  filter:blur(.3px);transition:left .18s linear;pointer-events:none}

/* threshold ticks (horizontal) */
.surge-ticks{position:absolute;inset:0;pointer-events:none}
.surge-ticks i{position:absolute;top:4px;bottom:4px;width:1.5px;background:rgba(176,108,255,.45);
  box-shadow:0 0 4px rgba(176,108,255,.5)}
.surge-tx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(176,108,255,.6);pointer-events:none;z-index:3}

/* chain multiplier badge (compact) */
.surge-badge{
  flex:0 0 auto;width:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 0;
  clip-path:polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%);
  background:linear-gradient(180deg,rgba(40,22,72,.96),rgba(20,12,40,.97));
  border:1px solid rgba(176,108,255,.5);
  box-shadow:inset 0 1px 0 rgba(200,160,255,.25),0 4px 14px rgba(0,0,0,.5),0 0 16px rgba(139,47,255,.25);
  transition:transform .12s ease,box-shadow .2s;
}
.surge-badge .sb-x{font-weight:700;font-size:20px;line-height:.9;color:#fff;
  text-shadow:0 0 12px rgba(176,108,255,.9),0 1px 2px rgba(0,0,0,.7)}
.surge-badge .sb-x b{font-weight:800}
.surge-badge .sb-l{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--arc-lite);opacity:.8;margin-top:1px}
.surge-badge.bump{transform:scale(1.12);box-shadow:inset 0 1px 0 rgba(200,160,255,.3),0 4px 14px rgba(0,0,0,.5),0 0 26px rgba(139,47,255,.7)}
/* a Nexus leak just drained the meter — flash red */
.surge-badge.leak{border-color:rgba(255,120,120,.75);
  box-shadow:inset 0 1px 0 rgba(255,170,170,.3),0 4px 14px rgba(0,0,0,.5),0 0 26px rgba(255,80,80,.7)}

/* Unleash button — directly underneath the meter */
.surge-trigger{
  cursor:not-allowed;align-self:center;   /* fit-content: just wide enough for the word "UNLEASH" */
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx-faint);padding:8px 14px;border-radius:9px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(24,16,46,.9),rgba(12,8,28,.95));
  border:1px solid rgba(176,108,255,.25);transition:.18s;
}

/* short state line at the very bottom */
.surge-state{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;justify-content:center;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx-dim);white-space:nowrap}
.surge-state::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--arc);
  box-shadow:0 0 8px var(--arc-glow)}

/* ---------- PRIMED state ---------- */
.surge.primed .surge-track{border-color:rgba(231,198,107,.85);cursor:pointer;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 0 30px rgba(199,155,255,.45);
  animation:surgePrime 1.05s ease-in-out infinite}
@keyframes surgePrime{0%,100%{box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 0 26px rgba(199,155,255,.4)}
  50%{box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 0 46px rgba(231,198,107,.8)}}
.surge.primed .surge-fill{background:linear-gradient(90deg,#7a2fd0 0%,#b06cff 35%,#e7cdff 75%,#fff 100%)}
.surge.primed .surge-state{color:var(--gold)}
.surge.primed .surge-state::before{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.surge.primed .surge-trigger{cursor:pointer;color:#1a1230;
  background:linear-gradient(180deg,#ffe9a8,var(--gold) 45%,var(--gold-dim));
  border:1px solid #fff3c8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 22px rgba(231,198,107,.7),0 4px 12px rgba(0,0,0,.4);
  animation:surgeTrig 1.05s ease-in-out infinite}
@keyframes surgeTrig{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.surge.primed .surge-trigger:hover{filter:brightness(1.08)}

/* spent / draining */
.surge.drain .surge-fill{transition:height .1s linear;filter:saturate(.6) brightness(.8)}
.surge.drain .surge-state{color:var(--tx-faint)}

/* floating +kill / +merge pips that rise beside the track */
.surge-pip{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--arc-lite);text-shadow:0 0 10px var(--arc-glow),0 1px 3px rgba(0,0,0,.8);
  pointer-events:none;white-space:nowrap;animation:surgePip 1.1s ease-out forwards}
@keyframes surgePip{0%{opacity:0;transform:translateY(8px) scale(.85)}
  18%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(1.05)}}

/* ============================================================
   ERUPTION OVERLAY — fills the whole arena (orientation-agnostic)
   ============================================================ */
.surge-fx{position:absolute;inset:0;z-index:70;pointer-events:none;opacity:0;visibility:hidden}
.surge-fx.show{opacity:1;visibility:visible}

/* screen bloom flash */
.sfx-bloom{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 54%,rgba(231,205,255,.55) 0%,rgba(139,47,255,.32) 34%,transparent 66%);
  mix-blend-mode:screen;opacity:0}
.surge-fx.show .sfx-bloom{animation:sfxBloom 3.6s ease-out forwards}
@keyframes sfxBloom{0%{opacity:0}8%{opacity:1}26%{opacity:.5}70%{opacity:.42}100%{opacity:.32}}

/* cinematic letterbox bars */
.sfx-bar{position:absolute;left:0;right:0;height:46px;background:linear-gradient(rgba(6,5,16,.92),rgba(6,5,16,.4));
  transform:translateY(-100%)}
.sfx-bar.top{top:0}
.sfx-bar.bot{bottom:0;background:linear-gradient(rgba(6,5,16,.4),rgba(6,5,16,.92));transform:translateY(100%)}
.surge-fx.show .sfx-bar.top{animation:sfxBarT 3.6s cubic-bezier(.2,.9,.2,1) forwards}
.surge-fx.show .sfx-bar.bot{animation:sfxBarB 3.6s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes sfxBarT{0%{transform:translateY(-100%)}14%{transform:translateY(0)}82%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes sfxBarB{0%{transform:translateY(100%)}14%{transform:translateY(0)}82%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* diagonal light streaks */
.sfx-streaks{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;opacity:0}
.surge-fx.show .sfx-streaks{animation:sfxStreaks 3.6s ease-out forwards}
@keyframes sfxStreaks{0%{opacity:0}10%{opacity:.8}40%{opacity:.3}100%{opacity:0}}
.sfx-streaks i{position:absolute;top:-20%;height:140%;width:2px;
  background:linear-gradient(rgba(199,155,255,0),rgba(231,205,255,.9),rgba(199,155,255,0));
  filter:blur(.4px)}

/* big crescendo title */
.sfx-title{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;
  opacity:0}
.surge-fx.show .sfx-title{animation:sfxTitle 3.6s cubic-bezier(.18,1.3,.3,1) forwards}
@keyframes sfxTitle{0%{opacity:0;transform:translate(-50%,-50%) scale(.7);letter-spacing:.4em}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  20%{transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
.sfx-t{font-family:'Cinzel',serif;font-weight:900;font-size:74px;line-height:.96;color:#fff;
  letter-spacing:.04em;
  text-shadow:0 0 30px rgba(199,155,255,.9),0 0 60px rgba(139,47,255,.7),
    3px 0 0 rgba(95,208,255,.5),-3px 0 0 rgba(255,106,61,.45),0 4px 10px rgba(0,0,0,.6)}
.sfx-sub{margin-top:8px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:21px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 0 18px rgba(231,198,107,.7),0 2px 6px rgba(0,0,0,.7)}

/* overclock countdown ring, top-center */
.sfx-ring{position:absolute;left:50%;top:88px;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;opacity:0;
  background:conic-gradient(var(--gold) calc(var(--p,1)*360deg),rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 68%,#000 70%);
          mask:radial-gradient(farthest-side,transparent 68%,#000 70%);
  filter:drop-shadow(0 0 10px rgba(231,198,107,.7))}
.surge-fx.show .sfx-ring{opacity:1}
.sfx-ring-lbl{position:absolute;left:50%;top:88px;transform:translate(-50%,-50%);
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:15px;color:#fff;opacity:0;
  text-shadow:0 0 10px rgba(231,198,107,.8)}
.surge-fx.show .sfx-ring-lbl{opacity:1}

/* ---------- slow-mo final blow ---------- */
/* PERF: visibility gates the full-stage backdrop-filter — at opacity:0 alone Chromium can still
   allocate the backdrop render surface and pay the readback for the whole 3.6s eruption; hidden
   removes it from painting until the 1.1s slow-mo actually shows it (fade-in unchanged). */
.surge-fx.slowmo .sfx-slowmo{opacity:1;visibility:visible}
.sfx-slowmo{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.sfx-slowmo::before{content:'';position:absolute;inset:0;backdrop-filter:saturate(.4) brightness(1.05);
  background:radial-gradient(120% 100% at 50% 50%,transparent 40%,rgba(4,3,12,.72) 100%)}
.sfx-finalnum{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.5);opacity:0;
  font-family:'Cinzel',serif;font-weight:900;font-size:128px;color:#fff;
  text-shadow:0 0 40px rgba(231,205,255,.95),0 0 80px rgba(139,47,255,.8),0 6px 14px rgba(0,0,0,.7)}
.surge-fx.slowmo .sfx-finalnum{animation:sfxFinal 1s cubic-bezier(.14,.9,.2,1) forwards}
@keyframes sfxFinal{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
.sfx-finallbl{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);opacity:0;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--arc-lite);text-shadow:0 0 16px rgba(176,108,255,.8)}
.surge-fx.slowmo .sfx-finallbl{animation:sfxFinalLbl 1s ease-out forwards}
@keyframes sfxFinalLbl{0%,20%{opacity:0}45%{opacity:1}85%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .surge-fill::after,.surge.primed .surge-track,.surge.primed .surge-trigger{animation:none}
}