/* ═══════════════════════════════════════════════════════
   ROOT / RESET  —  80s SPACE DREAM
═══════════════════════════════════════════════════════ */
:root {
  --teal:#7FFFD4; --teal-dim:#40C9A0;
  --pink:#FF79C6; --pink-dim:#E040A0;
  --gold:#FFD166; --blue:#8BE8FD;
  --purple:#BD93F9; --orange:#FFB86C;
  --bg:#1A0A2E; --bg-mid:#230C3A; --bg-card:#1E0D35;
  --panel:rgba(26,10,46,.97);
  --gt:0 0 12px #7FFFD4,0 0 35px rgba(127,255,212,.4);
  --gp:0 0 12px #FF79C6,0 0 35px rgba(255,121,198,.4);
  --gg:0 0 12px #FFD166,0 0 30px rgba(255,209,102,.35);
  --gpur:0 0 12px #BD93F9,0 0 30px rgba(189,147,249,.35);
  --radius-btn:50px;
  --radius-card:20px;
  --radius-panel:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%,#2D0B5A 0%,#1A0A2E 45%,#0D0820 100%);
  font-family:'Audiowide',sans-serif;color:var(--teal);cursor:none;touch-action:none}

/* ── BACKGROUND ── */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
#scanlines{position:fixed;inset:0;z-index:8000;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 6px)}
#vignette{position:fixed;inset:0;z-index:8001;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(10,4,20,.5) 85%,rgba(10,4,20,.8) 100%)}
#cursor{position:fixed;width:26px;height:26px;border:3px solid var(--teal);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  box-shadow:var(--gt);background:rgba(127,255,212,.1)}
#cursor::after{content:'';position:absolute;inset:5px;background:var(--teal);border-radius:50%;opacity:.6}
#cursor.H{border-color:var(--pink);box-shadow:var(--gp);background:rgba(255,121,198,.1)}
#cursor.H::after{background:var(--pink)}

/* ── VIEWS ── */
.view{position:fixed;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center}
.view.on{display:flex}

/* ═══════════════════════════════════════════════════════
   STATUS BAR (always visible)
═══════════════════════════════════════════════════════ */
#sbar{position:fixed;bottom:0;left:0;right:0;height:32px;z-index:9000;
  background:rgba(26,10,46,.96);border-top:2px solid rgba(127,255,212,.18);
  border-radius:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-size:.72rem;letter-spacing:.1em;color:rgba(127,255,212,.5);pointer-events:none}
.sdot{display:inline-block;width:8px;height:8px;background:var(--teal);border-radius:50%;
  margin-right:6px;animation:blink 2s infinite;box-shadow:0 0 6px var(--teal)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ═══════════════════════════════════════════════════════
   SHARED BUTTONS  — bubbly 80s pill style
═══════════════════════════════════════════════════════ */
.btn{padding:16px 40px;background:transparent;border:2px solid var(--teal);color:var(--teal);
  font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.12em;
  cursor:none;text-shadow:var(--gt);transition:all .2s;
  border-radius:var(--radius-btn);position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.18),transparent);transition:left .35s}
.btn:hover::before{left:100%}
.btn:hover{background:var(--teal);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(127,255,212,.55),0 6px 20px rgba(0,0,0,.4);
  transform:translateY(-2px)}
.btn:disabled{opacity:.22;pointer-events:none}
.btn.pk{border-color:var(--pink);color:var(--pink);text-shadow:var(--gp)}
.btn.pk:hover{background:var(--pink);color:var(--bg);
  box-shadow:0 0 28px rgba(255,121,198,.55),0 6px 20px rgba(0,0,0,.4)}
@keyframes kittAura{
  0%   {filter:drop-shadow(-20px 0px 14px rgba(255,121,198,.95)) drop-shadow(-20px 0 28px rgba(255,121,198,.5))}
  50%  {filter:drop-shadow( 60px 0px 14px rgba(255,121,198,.95)) drop-shadow( 60px 0 28px rgba(255,121,198,.5))}
  100% {filter:drop-shadow(-20px 0px 14px rgba(255,121,198,.95)) drop-shadow(-20px 0 28px rgba(255,121,198,.5))}}
.btn.sm{padding:9px 22px;font-size:.9rem}
.btn.pur{border-color:var(--purple);color:var(--purple);text-shadow:var(--gpur)}
.btn.pur:hover{background:var(--purple);color:var(--bg);box-shadow:0 0 28px rgba(189,147,249,.55),0 6px 20px rgba(0,0,0,.4)}

/* ═══════════════════════════════════════════════════════
   VIEW: MAIN MENU
═══════════════════════════════════════════════════════ */
#v-main{background:transparent}
.main-pretitle{font-family:'Audiowide',sans-serif;font-size:.88rem;letter-spacing:.3em;
  color:var(--pink);text-shadow:var(--gp);margin-bottom:14px;animation:flicker 5s infinite;
  margin-top:-60px}
.main-title{font-family:'Righteous',cursive;font-weight:400;
  font-size:clamp(4.5rem,11vw,9rem);letter-spacing:.06em;line-height:1;
  color:var(--teal);text-shadow:0 0 20px var(--teal),0 0 60px rgba(127,255,212,.5),0 0 100px rgba(127,255,212,.2);
  margin-bottom:8px;text-align:center}
.main-sub{font-family:'VT323',monospace;font-size:clamp(1.6rem,3.5vw,2.4rem);
  letter-spacing:.5em;color:var(--pink);text-shadow:var(--gp);margin-bottom:44px;opacity:.8}
.main-menu{display:flex;flex-direction:column;gap:18px;width:min(340px,85vw);margin-top:64px}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.25}99%{opacity:.55}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* Tutorial button: breathing glow on the pur (purple) card when not yet completed */
@keyframes tutBreathe{
  0%,100%{box-shadow:0 0 10px rgba(189,147,249,.3),0 0 0px rgba(189,147,249,0);border-color:rgba(189,147,249,.55)}
  50%    {box-shadow:0 0 30px rgba(189,147,249,.95),0 0 60px rgba(189,147,249,.45);border-color:var(--purple)}}
.tut-breathe{animation:tutBreathe 2.2s ease-in-out infinite}
@keyframes raidStartBreathe{
  0%,100%{box-shadow:0 0 10px rgba(255,121,198,.3),0 0 0px rgba(255,121,198,0);border-color:rgba(255,121,198,.55)}
  50%    {box-shadow:0 0 30px rgba(255,121,198,.95),0 0 60px rgba(255,121,198,.45);border-color:var(--pink)}}
.raid-start-breathe{animation:raidStartBreathe 1.8s ease-in-out infinite}

/* ═══════════════════════════════════════════════════════
   VIEW: ROSTER
═══════════════════════════════════════════════════════ */
.roster-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(127,255,212,.12);flex-shrink:0}
.roster-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--teal);text-shadow:var(--gt)}
.roster-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(127,255,212,.45);margin-top:3px;font-family:'Audiowide',sans-serif}
.roster-pts{display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,209,102,.08);border:2px solid rgba(255,209,102,.35);
  border-radius:30px;padding:3px 14px 3px 10px;
  box-shadow:0 0 10px rgba(255,209,102,.15)}
.roster-pts-icon{font-size:1rem;line-height:1}
.roster-pts-val{font-family:'VT323',monospace;font-size:1.45rem;color:var(--gold);
  text-shadow:var(--gg);line-height:1;letter-spacing:.06em}
.roster-pts-lbl{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.18em;
  color:rgba(255,209,102,.55);margin-top:1px}
.roster-body{flex:1;display:flex;overflow:hidden;position:relative}
.slots-scroll{display:flex;gap:16px;overflow-x:auto;padding:10px 30px 24px;
  scrollbar-width:none;flex:1}
.slots-scroll::-webkit-scrollbar{display:none}

/* Slot cards */
.slot{min-width:210px;flex:0 0 210px;border:2px solid rgba(127,255,212,.22);
  background:var(--bg-card);display:flex;flex-direction:column;cursor:none;
  transition:border-color .22s,background .22s,transform .15s,box-shadow .22s;
  position:relative;overflow:hidden;border-radius:var(--radius-card)}
.slot:hover{border-color:rgba(127,255,212,.55);background:rgba(127,255,212,.04);
  transform:translateY(-4px);box-shadow:0 12px 40px rgba(127,255,212,.15)}
.slot.selected{border-color:var(--teal);box-shadow:0 0 24px rgba(127,255,212,.25)}
.slot[data-type="Melee"]{border-color:rgba(255,121,198,.3)}
.slot[data-type="Melee"]:hover{border-color:rgba(255,121,198,.65)}
.slot[data-type="Range"]{border-color:rgba(127,255,212,.3)}
.slot[data-type="Utility"]{border-color:rgba(255,209,102,.3)}
.slot[data-type="Utility"]:hover{border-color:rgba(255,209,102,.65)}
.slot[data-type="Support"]{border-color:rgba(139,232,253,.3)}
.slot[data-type="Support"]:hover{border-color:rgba(139,232,253,.65)}
/* ── Slot card — four corner buttons ── */
/* ── Slot card corner buttons (EDIT top-left, SKIN top-right stay absolute) ── */
.slot-skin{position:absolute;top:8px;right:8px;height:22px;padding:0 7px;
  background:transparent;border:1px solid rgba(189,147,249,.4);border-radius:30px;
  color:rgba(189,147,249,.7);font-family:'Audiowide',sans-serif;font-size:.52rem;
  letter-spacing:.08em;cursor:none;display:flex;align-items:center;transition:all .15s}
.slot-skin:hover{border-color:var(--purple);color:var(--purple);background:rgba(189,147,249,.12);transform:scale(1.08)}
.slot-edit{position:absolute;top:8px;left:8px;height:22px;padding:0 7px;
  background:transparent;border:1px solid rgba(255,180,50,.35);border-radius:30px;
  color:rgba(255,180,50,.55);font-family:'Audiowide',sans-serif;font-size:.52rem;
  letter-spacing:.08em;cursor:none;display:flex;align-items:center;transition:all .15s}
.slot-edit:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,180,50,.12);transform:scale(1.08)}
/* DEL + ACHIEVE live inline in the type-row */
.slot-del{width:20px;height:20px;flex-shrink:0;
  background:transparent;border:1px solid rgba(255,121,198,.3);border-radius:50%;
  color:rgba(255,121,198,.5);font-size:.9rem;line-height:1;cursor:none;
  display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}
.slot-del:hover{border-color:var(--pink);color:var(--pink);background:rgba(255,121,198,.12);transform:scale(1.15)}
.slot-achieve{width:20px;height:20px;flex-shrink:0;
  background:transparent;border:1px solid rgba(255,209,102,.3);border-radius:50%;
  color:rgba(255,209,102,.6);font-size:.68rem;line-height:1;cursor:none;
  display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}
.slot-achieve:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,209,102,.12);transform:scale(1.15)}
.slot-achieve.has-new{border-color:rgba(255,209,102,.7);color:var(--gold);
  box-shadow:0 0 8px rgba(255,209,102,.4);animation:achievePulse 2s ease-in-out infinite}
@keyframes achievePulse{0%,100%{box-shadow:0 0 6px rgba(255,209,102,.3)}50%{box-shadow:0 0 14px rgba(255,209,102,.7)}}

/* Roster card — has upgrade points available */
.slot.has-pts{animation:slotPtsPulse 1.4s ease-in-out infinite}
@keyframes slotPtsPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(127,255,212,.2),0 0 8px rgba(127,255,212,.12)}
  50%{box-shadow:0 0 0 2px rgba(127,255,212,.65),0 0 26px rgba(127,255,212,.3)}
}

/* Points available label above XP bar — colored by unit type */
.roster-pts-avail{
  font-family:'Audiowide',sans-serif;font-size:.47rem;letter-spacing:.14em;
  color:rgba(127,255,212,.75);text-align:center;margin-bottom:5px;
  text-shadow:0 0 8px rgba(127,255,212,.4);
}
.roster-pts-avail-melee{color:rgba(255,121,198,.85);text-shadow:0 0 8px rgba(255,121,198,.4)}
.roster-pts-avail-range{color:rgba(127,255,212,.85);text-shadow:0 0 8px rgba(127,255,212,.4)}
.roster-pts-avail-support{color:rgba(139,232,253,.85);text-shadow:0 0 8px rgba(139,232,253,.4)}
.roster-pts-avail-utility{color:rgba(255,209,102,.85);text-shadow:0 0 8px rgba(255,209,102,.4)}

/* Card pulse per type when points available */
.slot[data-type="Melee"].has-pts{animation:slotPtsPulsePk 1.4s ease-in-out infinite}
.slot[data-type="Range"].has-pts{animation:slotPtsPulse 1.4s ease-in-out infinite}
.slot[data-type="Support"].has-pts{animation:slotPtsPulseSup 1.4s ease-in-out infinite}
.slot[data-type="Utility"].has-pts{animation:slotPtsPulseUtil 1.4s ease-in-out infinite}
@keyframes slotPtsPulsePk{
  0%,100%{box-shadow:0 0 0 1px rgba(255,121,198,.25),0 0 8px rgba(255,121,198,.12)}
  50%{box-shadow:0 0 0 2px rgba(255,121,198,.7),0 0 26px rgba(255,121,198,.3)}
}
@keyframes slotPtsPulseSup{
  0%,100%{box-shadow:0 0 0 1px rgba(139,232,253,.25),0 0 8px rgba(139,232,253,.12)}
  50%{box-shadow:0 0 0 2px rgba(139,232,253,.7),0 0 26px rgba(139,232,253,.3)}
}
@keyframes slotPtsPulseUtil{
  0%,100%{box-shadow:0 0 0 1px rgba(255,209,102,.25),0 0 8px rgba(255,209,102,.12)}
  50%{box-shadow:0 0 0 2px rgba(255,209,102,.7),0 0 26px rgba(255,209,102,.3)}
}

/* Level-up flash on result cards */
.level-up-flash{animation:lvlUpFlash 1.2s ease-out forwards;position:relative}
@keyframes lvlUpFlash{
  0%{box-shadow:0 0 0 2px rgba(127,255,212,.9),0 0 30px rgba(127,255,212,.6)}
  40%{box-shadow:0 0 0 3px rgba(127,255,212,.7),0 0 50px rgba(127,255,212,.4)}
  100%{box-shadow:0 0 0 2px rgba(127,255,212,.35),0 0 12px rgba(127,255,212,.15)}
}
.level-up-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:rgba(127,255,212,.15);border:1px solid rgba(127,255,212,.6);
  color:var(--teal);font-family:'Audiowide',sans-serif;font-size:.55rem;
  letter-spacing:.12em;padding:3px 10px;border-radius:20px;white-space:nowrap;
  text-shadow:0 0 8px rgba(127,255,212,.5);animation:badgePop .4s cubic-bezier(.34,1.56,.64,1) forwards;
  cursor:pointer;z-index:10;
}
@keyframes badgePop{0%{opacity:0;transform:translateX(-50%) scale(.6)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

/* XP area — clickable gold-glowing bottom section */
.slot-xp-area{margin-top:auto;width:100%;display:flex;flex-direction:column;
  padding:8px 0 4px;cursor:none;border-radius:0 0 18px 18px;
  transition:background .2s,box-shadow .2s}

/* Unit achievement badge — emoji overlay top-left of token */
.unit-badge{position:absolute;top:22px;left:-4px;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,4,26,.7);border-radius:50%;line-height:1;
  pointer-events:none;border:1px solid rgba(255,209,102,.35);
  box-shadow:0 0 6px rgba(255,209,102,.4)}
/* ── XP BAR (single player roster) ── */
.xp-bar-wrap{padding:5px 0 2px;display:flex;flex-direction:column;gap:3px}
.xp-bar-header{display:flex;justify-content:space-between;align-items:center}
.xp-bar-lbl{font-size:.58rem;letter-spacing:.14em;color:rgba(139,232,253,.7);font-family:'Audiowide',sans-serif}
.xp-bar-val{font-family:'VT323',monospace;font-size:1.05rem;color:var(--blue);line-height:1}
.xp-track{width:100%;height:6px;background:rgba(139,232,253,.1);border-radius:6px;overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,#8BE8FD,#BD93F9);
  box-shadow:0 0 8px rgba(139,232,253,.6);border-radius:6px;transition:width .4s ease}
.slot-icon{display:flex;align-items:center;justify-content:center;padding:18px 10px 8px}
.slot-icon .unit-body{box-shadow:none!important}
.slot-info{padding:0 14px 6px;text-align:center;flex:1;display:flex;flex-direction:column}
.slot-name{font-family:'Fredoka One',sans-serif;font-weight:400;font-size:.95rem;
  letter-spacing:.06em;color:var(--teal);text-shadow:0 0 10px var(--teal);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.slot-type-lbl{font-size:.72rem;letter-spacing:.18em;color:rgba(127,255,212,.55);font-family:'Audiowide',sans-serif}
.slot-type-row{display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.slot[data-type="Melee"] .slot-type-lbl{color:rgba(255,121,198,.85)}
.slot[data-type="Utility"] .slot-type-lbl{color:rgba(255,209,102,.85)}
.slot[data-type="Support"] .slot-type-lbl{color:rgba(139,232,253,.85)}
.stat-bars{display:flex;flex-direction:column;gap:2px;margin-bottom:5px}
.stat-row-r{display:flex;align-items:center;gap:5px}
.stat-lbl-r{font-size:.58rem;letter-spacing:.06em;color:rgba(127,255,212,.45);width:28px;flex-shrink:0;font-family:'Audiowide',sans-serif}
.stat-track-r{flex:1;height:4px;background:rgba(127,255,212,.08);border-radius:6px}
.stat-fill-r{height:100%;background:var(--teal);box-shadow:0 0 6px var(--teal);border-radius:6px}
.slot[data-type="Melee"] .stat-fill-r{background:var(--pink);box-shadow:0 0 6px var(--pink)}
.slot[data-type="Utility"] .stat-fill-r{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.slot[data-type="Support"] .stat-fill-r{background:var(--blue);box-shadow:0 0 6px var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;padding-bottom:8px;border-bottom:1px solid rgba(127,255,212,.08)}
.chip{font-size:.52rem;letter-spacing:.05em;padding:2px 8px;
  border:1px solid rgba(127,255,212,.25);color:rgba(127,255,212,.65);border-radius:20px;font-family:'Audiowide',sans-serif}
.slot-empty-label{font-size:.88rem;letter-spacing:.12em;color:rgba(127,255,212,.3);padding:12px 0;font-family:'Fredoka One',sans-serif}

/* Store + button slot */
.slot-plus{min-width:90px;flex:0 0 90px;border:2px dashed rgba(127,255,212,.18);
  background:transparent;display:flex;align-items:center;justify-content:center;
  cursor:none;transition:all .22s;border-radius:var(--radius-card);
  align-self:stretch;}
.slot-plus:hover{border-color:rgba(127,255,212,.45);background:rgba(127,255,212,.04);
  transform:translateY(-4px);box-shadow:0 12px 30px rgba(127,255,212,.1)}
.slot-plus-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.slot-plus-icon{font-size:2rem;color:rgba(127,255,212,.3);line-height:1;
  transition:color .18s,text-shadow .18s}
.slot-plus:hover .slot-plus-icon{color:var(--teal);text-shadow:var(--gt)}
.slot-plus-label{font-size:.62rem;letter-spacing:.15em;color:rgba(127,255,212,.25);
  font-family:'Audiowide',sans-serif;transition:color .18s}
.slot-plus:hover .slot-plus-label{color:rgba(127,255,212,.6)}
.roster-bottom{padding:22px 30px 52px;border-top:2px solid rgba(127,255,212,.1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  gap:18px;position:relative}
.roster-status{font-size:.82rem;letter-spacing:.14em;color:rgba(127,255,212,.55);
  font-family:'Audiowide',sans-serif;position:absolute;right:30px}
.scroll-arrows{display:flex;gap:14px;align-items:center}
.scroll-arrow-btn{width:48px;height:48px;background:transparent;
  border:2px solid rgba(127,255,212,.28);color:rgba(127,255,212,.7);
  font-size:1.4rem;cursor:none;transition:all .15s;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.scroll-arrow-btn:hover{border-color:var(--teal);color:var(--teal);background:rgba(127,255,212,.08);transform:scale(1.08)}

/* ═══════════════════════════════════════════════════════
   VIEW: GAME MODE SELECT
═══════════════════════════════════════════════════════ */
#v-gamemode{background:var(--bg);flex-direction:column;align-items:center;justify-content:flex-start;padding:0;overflow-y:auto;overflow-x:hidden}
@media(max-width:600px){
  #v-gamemode{overflow-y:auto}
}
.gm-top{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(127,255,212,.12);flex-shrink:0}
.gm-top-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--teal);text-shadow:var(--gt)}
.gm-top-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(127,255,212,.45);margin-top:3px;font-family:'Audiowide',sans-serif}

/* ── mode menu — vertical pill list matching main menu ── */
.gm-grid{display:flex;flex-direction:column;gap:18px;align-items:center;
  padding:10px 30px 30px;overflow-y:auto;flex:1;justify-content:center;
  scrollbar-width:none}
.gm-grid::-webkit-scrollbar{display:none}

/* Mode pill button */
.gm-card{width:min(340px,85vw);padding:18px 40px;background:transparent;
  border:2px solid var(--teal);color:var(--teal);text-shadow:var(--gt);
  font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.12em;
  cursor:none;border-radius:var(--radius-btn);transition:all .2s;
  position:relative;overflow:hidden;text-align:center}
.gm-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.18),transparent);transition:left .35s}
.gm-card:hover::before{left:100%}
.gm-card:hover{background:var(--teal);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(127,255,212,.55),0 6px 20px rgba(0,0,0,.4);transform:translateY(-2px)}
.gm-card.locked{opacity:.28;pointer-events:none}
.gm-card.pk{border-color:var(--pink);color:var(--pink);text-shadow:var(--gp)}
.gm-card.pk:hover{background:var(--pink);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(255,121,198,.55),0 6px 20px rgba(0,0,0,.4)}

/* ── size picker sub-step ── */
.gm-size-row{display:flex;flex-direction:column;gap:16px;align-items:center;
  padding:10px 30px 20px;flex:1;justify-content:center}
.gm-size-btn{width:min(320px,85vw);padding:18px 40px;background:transparent;
  border:2px solid var(--teal);color:var(--teal);text-shadow:var(--gt);
  font-family:'Fredoka One',sans-serif;font-size:1.15rem;letter-spacing:.12em;
  cursor:none;border-radius:var(--radius-btn);transition:all .2s;
  position:relative;overflow:hidden}
.gm-size-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.18),transparent);transition:left .35s}
.gm-size-btn:hover::before{left:100%}
.gm-size-btn:hover{background:var(--teal);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(127,255,212,.55),0 6px 20px rgba(0,0,0,.4);transform:translateY(-2px)}
.gm-size-btn.sel{background:var(--teal);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(127,255,212,.4)}
.gm-size-tag{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.14em;
  color:rgba(127,255,212,.35);margin-top:-8px}

/* ── "coming soon" inline badge on locked pills ── */
.gm-soon-inline{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.1em;
  opacity:.6;margin-left:8px;vertical-align:middle}

/* ══ PVP INTENT LOBBY (two-column squad picker) ══ */
.pvp-lobby{display:flex;gap:0;width:min(820px,96vw);flex-shrink:0;align-items:flex-start;
  padding:6px 30px 120px}
.pvp-lobby::-webkit-scrollbar{display:none}

/* left column — your selection */
.pvp-col-left{flex:1;display:flex;flex-direction:column;gap:0;padding-right:20px;
  border-right:1px solid rgba(127,255,212,.1);justify-content:flex-start;padding-top:6px;align-self:flex-start}
.pvp-col-left-hdr{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.2em;
  color:rgba(127,255,212,.35);margin-bottom:12px;text-align:center}

/* intent buttons */
.pvp-intent-btn{width:100%;padding:13px 20px;background:transparent;
  border:2px solid rgba(127,255,212,.28);color:rgba(127,255,212,.7);
  font-family:'Fredoka One',sans-serif;font-size:1rem;letter-spacing:.1em;
  cursor:none;border-radius:var(--radius-btn);transition:all .2s;
  position:relative;overflow:hidden;text-align:left;display:flex;
  align-items:center;justify-content:space-between;margin-bottom:7px}
.pvp-intent-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.15),transparent);transition:left .35s}
.pvp-intent-btn:hover::before{left:100%}
.pvp-intent-btn:hover{border-color:rgba(127,255,212,.65);color:var(--teal);
  background:rgba(127,255,212,.06);transform:translateX(2px)}
.pvp-intent-btn.sel{border-color:var(--teal);color:var(--bg);background:var(--teal);
  text-shadow:none;box-shadow:0 0 22px rgba(127,255,212,.45)}
.pvp-intent-btn.sel::before{display:none}
.pvp-intent-btn.soon{opacity:.28;pointer-events:none}
.pvp-intent-btn .pib-label{display:flex;flex-direction:column;gap:1px}
.pvp-intent-btn .pib-mode{font-size:.98rem}
.pvp-intent-btn .pib-sub{font-family:'Audiowide',sans-serif;font-size:.52rem;
  letter-spacing:.13em;opacity:.65}
.pvp-intent-btn .pib-soon-tag{font-family:'Audiowide',sans-serif;font-size:.48rem;
  letter-spacing:.1em;opacity:.5;margin-left:6px}
.pvp-intent-gap{height:10px}

/* ── section headers inside pvp lobby columns ── */
.pvp-section-hdr{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.22em;
  color:rgba(255,209,102,.6);text-shadow:0 0 8px rgba(255,209,102,.2);
  padding:4px 4px 6px;margin-top:8px;border-bottom:1px solid rgba(255,209,102,.15);
  margin-bottom:6px;width:100%}
.pvp-section-hdr:first-child{margin-top:0}
.pvp-count-section-hdr{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.22em;
  color:rgba(255,209,102,.45);padding:4px 4px 6px;margin-top:8px;
  border-bottom:1px solid rgba(255,209,102,.1);margin-bottom:6px;width:100%}
.pvp-count-section-hdr:first-child{margin-top:0}

/* right column — players waiting counts */
.pvp-col-right{flex:1;display:flex;flex-direction:column;padding-left:20px;justify-content:flex-start;gap:0;padding-top:6px;align-self:flex-start}
.pvp-col-right-hdr{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.2em;
  color:rgba(127,255,212,.35);margin-bottom:12px;text-align:center}
.pvp-count-row{display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-radius:12px;margin-bottom:7px;min-height:48px;
  border:1px solid transparent;transition:all .3s}
.pvp-count-row.has-players{border-color:rgba(127,255,212,.18);background:rgba(127,255,212,.04)}
.pvp-count-row.soon{opacity:.22}
.pvp-count-label{font-family:'Fredoka One',sans-serif;font-size:.9rem;
  letter-spacing:.08em;color:rgba(127,255,212,.5);flex:1}
.pvp-count-val{font-family:'VT323',monospace;font-size:1.8rem;
  color:rgba(127,255,212,.3);line-height:1;min-width:28px;text-align:right;
  transition:color .3s}
.pvp-count-row.has-players .pvp-count-label{color:rgba(127,255,212,.8)}
.pvp-count-row.has-players .pvp-count-val{color:var(--teal)}
.pvp-count-unit{font-family:'Audiowide',sans-serif;font-size:.5rem;letter-spacing:.12em;
  color:rgba(127,255,212,.35);margin-left:2px;align-self:flex-end;margin-bottom:5px}
.pvp-count-gap{height:10px}

/* pulse dot shown when players are waiting */
.pvp-pulse{width:9px;height:9px;border-radius:50%;background:var(--teal);flex-shrink:0;
  box-shadow:0 0 8px var(--teal);display:none}
.pvp-count-row.has-players .pvp-pulse{display:block;animation:pvpPulse 1.2s ease-in-out infinite}
@keyframes pvpPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
/* ── BR lobby list (inside pvp-col-right) ────────────────── */
.br-lobbies-section{margin-top:18px}
.br-lobby-row{position:relative;border:1px solid rgba(127,255,212,.15);border-radius:14px;
  margin-bottom:10px;overflow:hidden}
.br-lobby-row.mine{border-color:rgba(127,255,212,.4)}
.br-lobby-hdr{display:flex;align-items:center;gap:10px;padding:9px 14px}
.br-lobby-pulse{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;
  animation:pvpPulse 1.4s ease-in-out infinite}
.br-lobby-name{font-family:'Fredoka One',sans-serif;font-size:.92rem;letter-spacing:.08em;color:var(--teal)}
.br-member-row{display:flex;align-items:center;gap:8px;padding:4px 14px 4px 14px;
  font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.08em}
.br-member-name{color:rgba(255,200,100,.85);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-member-type{color:rgba(255,150,50,.5);margin-left:auto;flex-shrink:0}
.br-empty{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.12em;
  color:rgba(127,255,212,.4);padding:16px 14px;text-align:center}
.br-status-row{display:flex;align-items:center;gap:6px;padding:4px 14px 8px;flex-wrap:wrap}
.br-slot-pip{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 1px}
.br-ready-btn{width:100%;padding:13px 20px;background:transparent;
  border:2px solid rgba(127,255,212,.35);color:rgba(127,255,212,.5);font-family:'Audiowide',sans-serif;
  font-size:.62rem;letter-spacing:.18em;cursor:none;border-radius:8px;
  transition:background .18s,color .18s,border-color .18s;display:none}
.br-ready-btn.active{border-color:var(--teal);color:var(--teal)}
.br-ready-btn.readied{background:var(--teal);color:var(--bg);border-color:var(--teal)}
/* ── Coop sub-buttons and code display ── */
.coop-sub-row{display:flex;gap:8px;margin:4px 0 6px}
.coop-join-row{display:flex;gap:8px;margin:4px 0 6px;align-items:center}
.coop-sub-btn{flex:1;padding:8px 10px;background:transparent;
  border:1px solid rgba(127,255,212,.45);color:rgba(127,255,212,.85);
  font-family:'Audiowide',sans-serif;font-size:.6rem;letter-spacing:.15em;
  cursor:none;border-radius:8px;transition:all .18s}
.coop-sub-btn:hover{background:var(--teal);color:var(--bg)}
.coop-code-input{flex:1;background:rgba(127,255,212,.06);border:1px solid rgba(127,255,212,.35);
  color:var(--teal);font-family:'VT323',monospace;font-size:1.4rem;letter-spacing:.2em;
  text-align:center;border-radius:8px;padding:4px 8px;outline:none;cursor:text;width:0}
.coop-code-input:focus{border-color:var(--teal);box-shadow:0 0 10px rgba(127,255,212,.2)}
.coop-code-display{font-family:'VT323',monospace;font-size:2.4rem;letter-spacing:.25em;
  color:var(--teal);text-shadow:0 0 16px rgba(127,255,212,.6);text-align:center;
  margin:4px 0 10px;padding:8px 0;border:1px solid rgba(127,255,212,.2);border-radius:8px}
.coop-member-row{font-family:'Fredoka One',sans-serif;font-size:.78rem;letter-spacing:.05em;
  color:rgba(127,255,212,.7);padding:3px 0;display:flex;align-items:center;gap:6px}
.coop-member-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 5px var(--teal);flex-shrink:0}
.br-section-divider{border:none;border-top:1px solid rgba(127,255,212,.12);margin:14px 0 10px}

/* ── mobile: keep two columns but shrink everything to fit side by side ── */
@media(max-width:600px){
  .pvp-lobby{
    padding:4px 8px 100px;
    width:100vw;
    gap:0;
    align-items:flex-start;
  }
  .pvp-col-left{
    padding-right:8px;
    justify-content:flex-start;
    padding-top:4px;
  }
  .pvp-col-left-hdr,.pvp-col-right-hdr{
    font-size:.52rem;
    letter-spacing:.12em;
    margin-bottom:8px;
  }
  .pvp-intent-btn{
    padding:9px 10px;
    margin-bottom:5px;
    border-radius:10px;
  }
  .pvp-intent-btn .pib-mode{font-size:.82rem}
  .pvp-intent-btn .pib-sub{font-size:.44rem;letter-spacing:.08em}
  .pvp-intent-gap{height:6px}
  .pvp-col-right{
    padding-left:8px;
    justify-content:flex-start;
    padding-top:4px;
  }
  .pvp-count-row{
    padding:5px 7px;
    margin-bottom:5px;
    min-height:38px;
    gap:6px;
    border-radius:8px;
  }
  .pvp-count-label{font-size:.75rem}
  .pvp-count-val{font-size:1.45rem;min-width:22px}
  .pvp-count-unit{display:none}
  .pvp-count-gap{height:6px}
  .pvp-pulse{width:7px;height:7px}
  .pvp-section-hdr,.pvp-count-section-hdr{font-size:.46rem;letter-spacing:.12em;padding:3px 4px 4px;margin-top:5px;margin-bottom:4px}
}

/* ─── mobile ─── */
@media(max-width:600px){
  .gm-grid{gap:14px;padding:10px 12px 20px}
  .gm-card{width:min(260px,85vw);padding:14px 28px;font-size:.95rem}
  .gm-card-banner{height:68px;font-size:2.2rem}
  .gm-size-btn{width:min(260px,85vw);padding:14px 28px;font-size:.95rem}
}

/* ═══════════════════════════════════════════════════════
   RAID ROSTER PICKER OVERLAY
═══════════════════════════════════════════════════════ */
#raid-picker-overlay{position:fixed;inset:0;z-index:650;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.92);backdrop-filter:blur(8px)}
#raid-picker-overlay.on{display:flex}
.raid-picker-panel{background:var(--bg-mid);border:2px solid rgba(255,121,198,.35);
  width:min(820px,96vw);max-height:90vh;overflow:hidden;border-radius:var(--radius-panel);
  display:flex;flex-direction:column;
  box-shadow:0 0 60px rgba(255,121,198,.12),0 24px 64px rgba(0,0,0,.55)}
.raid-picker-header{display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px 14px;border-bottom:2px solid rgba(255,121,198,.12);flex-shrink:0}
.raid-picker-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.55rem;
  letter-spacing:.12em;color:var(--pink);text-shadow:var(--gp)}
.raid-picker-sub{font-size:.75rem;letter-spacing:.18em;color:rgba(255,121,198,.45);
  margin-top:3px;font-family:'Audiowide',sans-serif}
.raid-picker-close{background:none;border:none;color:rgba(255,255,255,.3);font-size:1.1rem;
  cursor:none;padding:4px 8px;transition:color .15s}
.raid-picker-close:hover{color:var(--pink)}
.raid-picker-body{flex:1;overflow-x:auto;overflow-y:hidden;padding:18px 24px 24px;
  display:flex;gap:14px;scrollbar-width:none}
.raid-picker-body::-webkit-scrollbar{display:none}

/* Unit confirm popup */
#raid-confirm-overlay{position:fixed;inset:0;z-index:700;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.88);backdrop-filter:blur(8px)}
#raid-confirm-overlay.on{display:flex}
.raid-confirm-box{background:var(--bg-mid);border:2px solid rgba(255,121,198,.45);
  border-radius:var(--radius-panel);padding:40px 52px;text-align:center;
  box-shadow:0 0 60px rgba(255,121,198,.18),0 24px 64px rgba(0,0,0,.6);
  animation:rcPopIn .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes rcPopIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
.raid-confirm-unit{display:flex;justify-content:center;margin-bottom:16px}
.raid-confirm-q{font-family:'Righteous',cursive;font-weight:400;font-size:1.35rem;
  letter-spacing:.1em;color:var(--teal);text-shadow:var(--gt);margin-bottom:6px}
.raid-confirm-name{font-family:'Fredoka One',sans-serif;font-size:1.6rem;letter-spacing:.08em;
  color:var(--pink);text-shadow:var(--gp);margin-bottom:22px}
.raid-confirm-btns{display:flex;gap:14px;justify-content:center}

/* ═══════════════════════════════════════════════════════
   RAID LOBBY (mirrors pvp-lobby layout)
═══════════════════════════════════════════════════════ */
.raid-lobby{display:flex;gap:0;width:min(820px,96vw);flex:1;align-items:stretch;
  padding:6px 30px 80px;overflow-y:auto;scrollbar-width:none}
.raid-lobby::-webkit-scrollbar{display:none}

/* left column */
.raid-col-left{flex:1;display:flex;flex-direction:column;gap:0;padding-right:20px;
  border-right:1px solid rgba(255,121,198,.14);justify-content:flex-start;padding-top:6px}
.raid-col-left-hdr{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.2em;
  color:rgba(255,121,198,.4);margin-bottom:12px;text-align:center}

/* create-party section header */
.raid-section-hdr{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.22em;
  color:rgba(255,121,198,.7);text-shadow:0 0 8px rgba(255,121,198,.2);
  padding:4px 4px 6px;margin-top:8px;border-bottom:1px solid rgba(255,121,198,.18);
  margin-bottom:6px;width:100%}
.raid-section-hdr:first-child{margin-top:0}

/* create-party button — matches pvp-intent-btn but pink */
.raid-create-btn{width:100%;padding:16px 22px;background:transparent;
  border:2px solid rgba(255,121,198,.35);color:rgba(255,121,198,.8);
  font-family:'Fredoka One',sans-serif;font-size:1.05rem;letter-spacing:.12em;
  cursor:none;border-radius:var(--radius-btn);transition:all .2s;
  position:relative;overflow:hidden;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px}
.raid-create-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,121,198,.18),transparent);transition:left .35s}
.raid-create-btn:hover::before{left:100%}
.raid-create-btn:hover{border-color:var(--pink);color:var(--bg);background:var(--pink);
  box-shadow:0 0 28px rgba(255,121,198,.5),0 6px 20px rgba(0,0,0,.4);transform:translateY(-2px)}
.raid-create-btn .rc-icon{font-size:1.2rem}
.raid-start-btn{width:100%;padding:16px 22px;background:transparent;
  border:2px solid var(--pink);color:var(--pink);
  font-family:'Fredoka One',sans-serif;font-size:1.15rem;letter-spacing:.12em;
  cursor:none;border-radius:var(--radius-btn);transition:all .2s;
  position:relative;overflow:hidden;text-align:center;
  margin-top:12px;display:none}
.raid-start-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,121,198,.18),transparent);transition:left .35s}
.raid-start-btn:hover::before{left:100%}
.raid-start-btn:hover{background:var(--pink);color:var(--bg);
  box-shadow:0 0 28px rgba(255,121,198,.55),0 6px 20px rgba(0,0,0,.4);transform:translateY(-2px)}

/* right column — parties */
.raid-col-right{flex:1;display:flex;flex-direction:column;padding-left:20px;
  justify-content:flex-start;gap:0;overflow-y:auto;scrollbar-width:none}
.raid-col-right::-webkit-scrollbar{display:none}
.raid-col-right-hdr{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.2em;
  color:rgba(255,121,198,.35);margin-bottom:12px;text-align:center;flex-shrink:0}

/* party row — tree header */
.raid-party-row{border:1px solid rgba(255,121,198,.22);border-radius:14px;
  margin-bottom:9px;overflow:hidden;flex-shrink:0}
.raid-party-hdr{display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:rgba(255,121,198,.04);cursor:none}
.raid-party-pulse{width:8px;height:8px;border-radius:50%;background:var(--pink);flex-shrink:0;
  box-shadow:0 0 8px var(--pink);animation:pvpPulse 1.4s ease-in-out infinite}
.raid-party-name{font-family:'Fredoka One',sans-serif;font-size:.92rem;letter-spacing:.08em;
  color:rgba(255,121,198,.85);flex:1}
.raid-party-badge{font-family:'Audiowide',sans-serif;font-size:.5rem;letter-spacing:.12em;
  color:rgba(255,121,198,.45);border:1px solid rgba(255,121,198,.2);
  padding:2px 8px;border-radius:20px}

/* party members tree — coloured by type */
.raid-member-row{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 30px;
  border-top:1px solid rgba(255,121,198,.08)}
.raid-member-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.raid-member-name{font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em}

.raid-member-type{font-family:'Audiowide',sans-serif;font-size:.46rem;letter-spacing:.12em;opacity:.65;margin-left:auto}

/* empty state */
.raid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:10px;color:rgba(255,121,198,.25);
  font-family:'Audiowide',sans-serif;font-size:.7rem;letter-spacing:.18em;padding:24px 0}
.raid-empty-icon{font-size:2.4rem;opacity:.3}

@media(max-width:600px){
  .raid-lobby{padding:4px 8px 14px;width:100vw}
  .raid-col-left{padding-right:8px}
  .raid-col-right{padding-left:8px}
  .raid-col-left-hdr,.raid-col-right-hdr{font-size:.5rem;letter-spacing:.12em;margin-bottom:8px}
  .raid-create-btn{padding:11px 14px;font-size:.88rem}
  .raid-member-row{padding:5px 10px 5px 22px}
}

/* ── CREATOR OVERLAY ── */
/* ── Skin Picker Overlay ── */
/* ═══════════════════════════════════════════════════════
   ACHIEVEMENT OVERLAY
═══════════════════════════════════════════════════════ */
#achieve-overlay{position:fixed;inset:0;z-index:610;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.88);backdrop-filter:blur(6px)}
#achieve-overlay.on{display:flex}
.achieve-panel{background:var(--bg-mid);border:2px solid rgba(255,209,102,.3);
  width:min(480px,94vw);max-height:85vh;display:flex;flex-direction:column;
  border-radius:4px;overflow:hidden}
.achieve-panel-header{padding:22px 24px 14px;border-bottom:1px solid rgba(255,209,102,.12);flex-shrink:0}
.achieve-panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.achieve-panel-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.35rem;
  letter-spacing:.08em;color:var(--gold);text-shadow:0 0 16px rgba(255,209,102,.4)}
.achieve-panel-close{background:none;border:none;color:rgba(255,255,255,.35);font-size:1.1rem;
  cursor:none;padding:4px 8px;transition:color .15s}
.achieve-panel-close:hover{color:#fff}
.achieve-panel-sub{font-family:'Audiowide',sans-serif;font-size:.56rem;letter-spacing:.18em;
  color:rgba(127,255,212,.4)}
.achieve-progress-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.achieve-progress-track{flex:1;height:5px;background:rgba(255,209,102,.1);border-radius:6px;overflow:hidden}
.achieve-progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),rgba(127,255,212,.6));
  box-shadow:0 0 8px rgba(255,209,102,.5);border-radius:6px;transition:width .5s ease}
.achieve-progress-label{font-family:'VT323',monospace;font-size:1.1rem;color:var(--gold);
  line-height:1;white-space:nowrap}
.achieve-panel-body{overflow-y:auto;padding:16px 24px 24px;scrollbar-width:none;flex:1}
.achieve-panel-body::-webkit-scrollbar{display:none}
.achieve-section-hdr{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.22em;
  color:rgba(255,209,102,.6);text-shadow:0 0 8px rgba(255,209,102,.2);
  padding:4px 4px 6px;margin-top:14px;border-bottom:1px solid rgba(255,209,102,.15);
  margin-bottom:6px;width:100%}
.achieve-section-hdr:first-child{margin-top:0}
.achieve-row{width:100%;padding:11px 16px;background:transparent;
  border:2px solid rgba(127,255,212,.2);color:rgba(127,255,212,.65);
  border-radius:var(--radius-btn);transition:border-color .15s,background .15s;
  display:flex;align-items:center;margin-bottom:7px;text-align:left}
.achieve-row.earned{border-color:rgba(127,255,212,.2);background:transparent;color:var(--gold)}
.achieve-row.displayed{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.05);
  box-shadow:0 0 10px rgba(255,209,102,.1)}
.achieve-row-label{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.achieve-row-name{font-family:'Fredoka One',sans-serif;font-size:.92rem;letter-spacing:.06em;line-height:1.2}
.achieve-row-obj{font-family:'Audiowide',sans-serif;font-size:.46rem;
  letter-spacing:.1em;color:rgba(127,255,212,.5);margin:2px 0}
.achieve-row.earned .achieve-row-obj{color:rgba(255,209,102,.4)}
.achieve-row-reward{font-family:'Audiowide',sans-serif;font-size:.48rem;
  letter-spacing:.13em;opacity:.65}
.achieve-row.earned .achieve-row-reward{color:var(--gold);opacity:.75}
.achieve-row-check{font-size:1rem;margin-left:8px;flex-shrink:0;
  color:var(--gold);text-shadow:0 0 8px rgba(255,209,102,.8)}
/* earned rows are clickable — hover shows intent */
.achieve-row.earned:hover{border-color:rgba(127,255,212,.38);background:rgba(127,255,212,.03)}
.achieve-row.displayed:hover{border-color:rgba(255,209,102,.7);background:rgba(255,209,102,.08)}

#skin-picker-overlay{position:fixed;inset:0;z-index:600;display:none;align-items:flex-start;
  justify-content:center;padding-top:5vh;background:rgba(10,4,26,.88);backdrop-filter:blur(6px)}
#skin-picker-overlay.on{display:flex}
.skin-picker-panel{background:var(--bg-mid);border:2px solid rgba(189,147,249,.35);
  width:min(520px,94vw);max-height:85vh;overflow-y:auto;border-radius:4px;padding:28px 24px 24px;
  min-height:420px}
.skin-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.skin-picker-title{font-family:'Fredoka One',sans-serif;font-size:1.2rem;letter-spacing:.14em;color:var(--purple)}
.skin-picker-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.1rem;
  cursor:none;padding:4px 8px;transition:color .15s}
.skin-picker-close:hover{color:#fff}
.skin-picker-sub{display:none}
.skin-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.skin-card{border:2px solid rgba(189,147,249,.18);padding:16px 14px 14px;border-radius:4px;
  cursor:none;text-align:center;transition:border-color .18s,background .18s,box-shadow .18s;position:relative}
.skin-card:hover{border-color:rgba(189,147,249,.55);background:rgba(189,147,249,.05)}
.skin-card.sel{border-color:var(--purple);background:rgba(189,147,249,.09);box-shadow:0 0 18px rgba(189,147,249,.22)}
.skin-card-preview{display:flex;justify-content:center;margin-bottom:10px}
.skin-card-name{font-family:'Fredoka One',sans-serif;font-size:.9rem;letter-spacing:.1em;color:rgba(189,147,249,.9)}
.skin-card-name.sel{color:var(--purple)}
.skin-card-equip-badge{position:absolute;top:8px;right:8px;font-size:.6rem;letter-spacing:.12em;
  color:var(--purple);opacity:.8}
/* Get More card */
.skin-card.skin-card-get-more{border-color:rgba(255,209,102,.3);background:rgba(255,209,102,.04);
  cursor:none;position:relative;overflow:hidden}
.skin-card.skin-card-get-more::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,209,102,.08),transparent 70%);
  pointer-events:none}
.skin-card.skin-card-get-more:hover{border-color:var(--gold);background:rgba(255,209,102,.1);
  box-shadow:0 0 22px rgba(255,209,102,.25);transform:translateY(-2px)}
.skin-card-get-more-label{color:var(--gold)!important;text-shadow:0 0 10px rgba(255,209,102,.6)!important;
  font-size:1rem!important;letter-spacing:.14em!important}
.skin-card-get-more-sub{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.18em;
  color:rgba(255,209,102,.45);margin-top:4px}

/* ── VISUALS PICKER — tab bar ── */
.vp-tabs{display:flex;gap:0;flex-shrink:0;border-bottom:2px solid rgba(127,255,212,.12);
  overflow-x:auto;scrollbar-width:none;margin-bottom:20px}
.vp-tabs::-webkit-scrollbar{display:none}
.vp-tab{padding:10px 22px;font-family:'Fredoka One',sans-serif;font-size:.9rem;
  letter-spacing:.1em;background:none;border:none;border-bottom:2px solid transparent;
  color:rgba(127,255,212,.35);cursor:none;transition:all .15s;white-space:nowrap;
  margin-bottom:-2px;flex-shrink:0}
.vp-tab:hover{color:rgba(127,255,212,.7)}
.vp-tab.active{color:var(--teal);text-shadow:var(--gt);border-bottom-color:var(--teal)}

/* ── VISUALS PICKER — sections ── */
.vp-section{display:none}
.vp-section.active{display:block}

/* ── ABILITY FX list — mirrors ab-card style ── */
.vp-fx-list{display:flex;flex-direction:column;gap:8px}
.vp-fx-card{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border:2px solid rgba(127,255,212,.18);border-radius:10px;cursor:none;
  transition:border-color .15s,background .15s;background:rgba(127,255,212,.02)}
.vp-fx-card:hover{border-color:rgba(127,255,212,.45);background:rgba(127,255,212,.05)}
.vp-fx-card.sel{border-color:var(--teal);background:rgba(127,255,212,.09);
  box-shadow:0 0 14px rgba(127,255,212,.18)}
.vp-fx-card.locked{opacity:.35;pointer-events:none}
.vp-fx-check{width:14px;height:14px;border:2px solid rgba(127,255,212,.35);
  border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;color:var(--bg)}
.vp-fx-card.sel .vp-fx-check{background:var(--teal);border-color:var(--teal)}
.vp-fx-info{flex:1;min-width:0}
.vp-fx-name{font-family:'Fredoka One',sans-serif;font-size:.88rem;letter-spacing:.07em;
  color:var(--teal)}
.vp-fx-sub{font-family:'Audiowide',sans-serif;font-size:.56rem;letter-spacing:.1em;
  color:rgba(127,255,212,.4);margin-top:2px}
.vp-fx-lock-tag{font-family:'Audiowide',sans-serif;font-size:.52rem;letter-spacing:.1em;
  color:rgba(127,255,212,.3);margin-left:auto;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   RAID ENCOUNTER PICKER OVERLAY
═══════════════════════════════════════════════════════ */
#raid-encounter-overlay{position:fixed;inset:0;z-index:660;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.92);backdrop-filter:blur(8px)}
#raid-encounter-overlay.on{display:flex}
.raid-enc-panel{background:var(--bg-mid);border:2px solid rgba(255,121,198,.38);
  width:min(520px,94vw);max-height:88vh;display:flex;flex-direction:column;
  border-radius:var(--radius-panel);padding:0;
  box-shadow:0 0 60px rgba(255,121,198,.14),0 24px 64px rgba(0,0,0,.6);
  animation:rcPopIn .22s cubic-bezier(.34,1.56,.64,1)}
.raid-enc-header{display:flex;align-items:center;justify-content:space-between;
  padding:22px 26px 14px;border-bottom:2px solid rgba(255,121,198,.12);flex-shrink:0}
.raid-enc-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.45rem;
  letter-spacing:.12em;color:var(--pink);text-shadow:var(--gp)}
.raid-enc-sub{font-size:.72rem;letter-spacing:.18em;color:rgba(255,121,198,.4);
  margin-top:3px;font-family:'Audiowide',sans-serif}
.raid-enc-close{background:none;border:none;color:rgba(255,255,255,.3);font-size:1.1rem;
  cursor:none;padding:4px 8px;transition:color .15s}
.raid-enc-close:hover{color:var(--pink)}
.raid-enc-body{overflow-y:auto;padding:20px 22px 22px;scrollbar-width:thin;
  scrollbar-color:rgba(255,121,198,.2) transparent;flex:1}
.raid-enc-body::-webkit-scrollbar{width:4px}
.raid-enc-body::-webkit-scrollbar-track{background:transparent}
.raid-enc-body::-webkit-scrollbar-thumb{background:rgba(255,121,198,.25);border-radius:4px}
.raid-enc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.raid-enc-card{border:2px solid rgba(255,121,198,.2);padding:22px 16px 18px;
  border-radius:18px;cursor:none;text-align:center;
  transition:border-color .18s,background .18s,box-shadow .18s,transform .15s;
  position:relative;background:rgba(255,121,198,.02)}
.raid-enc-card:hover{border-color:rgba(255,121,198,.55);background:rgba(255,121,198,.06);
  transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,121,198,.12)}
.raid-enc-card.sel{border-color:var(--pink);background:rgba(255,121,198,.1);
  box-shadow:0 0 22px rgba(255,121,198,.28)}
.raid-enc-preview{font-size:3.2rem;line-height:1;margin-bottom:10px;
  filter:drop-shadow(0 0 10px rgba(255,121,198,.5))}
.raid-enc-name{font-family:'Fredoka One',sans-serif;font-size:1rem;letter-spacing:.1em;
  color:rgba(255,121,198,.85);margin-bottom:5px}
.raid-enc-card.sel .raid-enc-name{color:var(--pink);text-shadow:var(--gp)}
.raid-enc-desc{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.06em;
  color:rgba(255,121,198,.4);line-height:1.55}
.raid-enc-diff{display:inline-flex;gap:3px;margin-top:8px;justify-content:center}
.raid-enc-pip{width:8px;height:8px;border-radius:50%;
  border:2px solid rgba(255,121,198,.3);background:transparent;transition:background .15s}
.raid-enc-pip.on{background:var(--pink);border-color:var(--pink);box-shadow:0 0 6px var(--pink)}
.raid-enc-equip{position:absolute;top:9px;right:10px;font-size:.6rem;letter-spacing:.1em;
  color:var(--pink);opacity:.8}
.raid-enc-footer{padding:14px 22px 20px;border-top:2px solid rgba(255,121,198,.1);flex-shrink:0}
.raid-enc-confirm-btn{width:100%;padding:14px 20px;background:transparent;
  border:2px solid var(--pink);color:var(--pink);
  font-family:'Fredoka One',sans-serif;font-size:1.1rem;letter-spacing:.12em;
  cursor:none;border-radius:var(--radius-btn);transition:all .2s;
  position:relative;overflow:hidden}
.raid-enc-confirm-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,121,198,.18),transparent);transition:left .35s}
.raid-enc-confirm-btn:hover::before{left:100%}
.raid-enc-confirm-btn:hover{background:var(--pink);color:var(--bg);
  box-shadow:0 0 28px rgba(255,121,198,.5),0 6px 20px rgba(0,0,0,.4);transform:translateY(-2px)}
.raid-enc-confirm-btn:disabled{opacity:.25;pointer-events:none}

#creator-overlay{position:fixed;inset:0;z-index:500;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.88);backdrop-filter:blur(6px)}
#creator-overlay.on{display:flex}
.creator-panel{background:var(--bg-mid);border:2px solid rgba(127,255,212,.28);
  width:min(640px,95vw);max-height:90vh;overflow:hidden;
  border-radius:28px;
  padding:32px 38px;
  display:flex;flex-direction:column;}
/* Only the step body scrolls — title/sub/nav stay pinned */
#cr-body{flex:1;overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(127,255,212,.18) transparent;
  padding-right:4px;}
#cr-body::-webkit-scrollbar{width:4px}
#cr-body::-webkit-scrollbar-track{background:transparent}
#cr-body::-webkit-scrollbar-thumb{background:rgba(127,255,212,.2);border-radius:4px}
.creator-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.creator-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.45rem;
  letter-spacing:.1em;color:var(--teal);text-shadow:var(--gt)}
#cr-ab-counter{font-family:'Audiowide',sans-serif;font-size:.78rem;letter-spacing:.15em;
  color:rgba(127,255,212,.4)}
#cr-ab-counter span{color:var(--teal)}
.creator-sub{font-size:.75rem;letter-spacing:.18em;color:rgba(127,255,212,.45);margin-bottom:24px;font-family:'Audiowide',sans-serif}
.step-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.type-card{border:2px solid rgba(127,255,212,.18);padding:18px;cursor:none;
  transition:all .18s;background:rgba(127,255,212,.02);border-radius:18px}
.type-card:hover{border-color:rgba(127,255,212,.5);background:rgba(127,255,212,.05)}
.type-card.sel{border-color:var(--teal);background:rgba(127,255,212,.09);box-shadow:0 0 20px rgba(127,255,212,.2)}
.type-card.Melee.sel{border-color:var(--pink);background:rgba(255,121,198,.08);box-shadow:0 0 20px rgba(255,121,198,.2)}
.type-card.Utility.sel{border-color:var(--gold);background:rgba(255,209,102,.07)}
.type-card.Support.sel{border-color:var(--blue);background:rgba(139,232,253,.07)}
.type-name{font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1rem;
  letter-spacing:.06em;color:var(--teal);margin:10px 0 4px}
.type-card.Melee .type-name{color:var(--pink)}
.type-card.Utility .type-name{color:var(--gold)}
.type-card.Support .type-name{color:var(--blue)}
.type-desc{font-size:.72rem;letter-spacing:.04em;color:rgba(127,255,212,.5);line-height:1.55;font-family:'Audiowide',sans-serif}
/* name input */
.name-input{width:100%;background:rgba(127,255,212,.05);border:2px solid rgba(127,255,212,.28);
  color:var(--teal);font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1.15rem;
  letter-spacing:.1em;padding:14px 20px;margin-bottom:18px;outline:none;border-radius:30px}
.name-input:focus{border-color:var(--teal);box-shadow:0 0 18px rgba(127,255,212,.25)}
.name-input::placeholder{color:rgba(127,255,212,.25)}
/* stat builder */
.stat-builder{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.sb-row{display:flex;align-items:center;gap:12px}
.sb-label{font-size:.8rem;letter-spacing:.1em;color:rgba(127,255,212,.75);width:90px;flex-shrink:0;font-family:'Audiowide',sans-serif}
.sb-track{flex:1;height:10px;background:rgba(127,255,212,.08);border-radius:8px}
.sb-fill{height:100%;background:var(--teal);box-shadow:0 0 8px var(--teal);border-radius:8px;transition:width .2s}
.sb-val{font-family:'VT323',monospace;font-size:1.5rem;color:var(--teal);width:52px;text-align:center}
.sb-btn{width:36px;height:36px;background:transparent;border:2px solid rgba(127,255,212,.3);
  color:rgba(127,255,212,.75);font-size:1.15rem;cursor:none;transition:all .14s;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.sb-btn:hover{border-color:var(--teal);color:var(--teal);background:rgba(127,255,212,.1);transform:scale(1.1)}
.sb-btn:disabled{opacity:.2;pointer-events:none}
.points-left{font-family:'VT323',monospace;font-size:2rem;color:var(--gold);
  text-shadow:var(--gg);text-align:center;margin-bottom:14px;letter-spacing:.1em}
/* ability picker */
.ab-col-headers{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex-shrink:0;margin-bottom:0}
.ab-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.ab-col-header{font-size:.65rem;letter-spacing:.18em;color:rgba(255,209,102,.45);
  font-family:'Audiowide',sans-serif;margin-bottom:8px;text-align:center;padding:4px 0;
  border-bottom:1px solid rgba(255,209,102,.12)}
.ab-col-header.teal{color:rgba(127,255,212,.38);border-bottom-color:rgba(127,255,212,.12)}
.ab-list{display:flex;flex-direction:column;gap:7px}
.ab-card{padding:10px 12px;border:2px solid rgba(255,209,102,.18);cursor:none;
  transition:all .15s;background:rgba(255,209,102,.02);border-radius:14px;
  display:flex;align-items:center;gap:8px}
.ab-card:hover{border-color:rgba(255,209,102,.5);background:rgba(255,209,102,.06);transform:translateX(2px)}
.ab-card.sel{border-color:var(--gold);background:rgba(255,209,102,.1)}
.ab-card.passive{border-color:rgba(127,255,212,.22)}
.ab-card.passive:hover{border-color:rgba(127,255,212,.55);background:rgba(127,255,212,.05)}
.ab-card.passive.sel{border-color:var(--teal);background:rgba(127,255,212,.09)}
.ab-card.disabled-ab{opacity:.25;pointer-events:none}
.ab-check{width:14px;height:14px;border:2px solid rgba(255,209,102,.3);border-radius:3px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.55rem;color:var(--gold)}
.ab-card.sel .ab-check{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.ab-card.passive .ab-check{border-color:rgba(127,255,212,.4);color:var(--teal)}
.ab-card.passive.sel .ab-check{background:var(--teal);border-color:var(--teal);color:var(--bg)}
.ab-info{flex:1;min-width:0}
.ab-name{font-size:.72rem;letter-spacing:.07em;color:var(--gold);font-family:'Fredoka One',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-card.passive .ab-name{color:var(--teal)}
.ab-tag{font-size:.55rem;letter-spacing:.06em;color:rgba(255,209,102,.35);font-family:'Audiowide',sans-serif}
.ab-card.passive .ab-tag{color:rgba(127,255,212,.35)}
/* tooltip / flavor text box — fixed height so it never jumps the layout */
#ab-tooltip{height:88px;background:rgba(255,209,102,.04);border:1px solid rgba(255,209,102,.2);
  border-radius:14px;padding:10px 16px;margin-bottom:6px;transition:border-color .2s,background .2s;
  display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;flex-shrink:0}
#ab-tooltip.passive{border-color:rgba(127,255,212,.2);background:rgba(127,255,212,.04)}
#ab-tooltip-name{font-family:'Fredoka One',sans-serif;font-size:.85rem;letter-spacing:.08em;
  color:var(--gold);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
#ab-tooltip.passive #ab-tooltip-name{color:var(--teal)}
#ab-tooltip-desc{font-size:.68rem;letter-spacing:.03em;color:rgba(255,209,102,.6);
  line-height:1.5;font-family:'Audiowide',sans-serif;overflow:hidden;}
#ab-tooltip.passive #ab-tooltip-desc{color:rgba(127,255,212,.6)}
/* creator nav */
.creator-nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.step-dots{display:flex;gap:10px}
.step-dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(127,255,212,.32);
  background:transparent;transition:all .2s}
.step-dot.active{background:var(--teal);box-shadow:var(--gt);border-color:var(--teal)}

/* ── CONFIRM DELETE ── */
#confirm-delete{position:fixed;inset:0;z-index:600;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.88);backdrop-filter:blur(6px)}
#confirm-delete.on{display:flex}
.confirm-box{background:var(--bg-mid);border:2px solid rgba(255,121,198,.4);
  padding:36px 44px;text-align:center;border-radius:24px;
  box-shadow:0 0 40px rgba(255,121,198,.15)}
.confirm-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.15rem;
  letter-spacing:.1em;color:var(--pink);text-shadow:var(--gp);margin-bottom:10px}
.confirm-sub{font-size:.8rem;letter-spacing:.12em;color:rgba(127,255,212,.5);margin-bottom:22px;font-family:'Audiowide',sans-serif}
.confirm-btns{display:flex;gap:14px;justify-content:center}

/* ═══════════════════════════════════════════════════════
   VIEW: MATCH LOADING
═══════════════════════════════════════════════════════ */
#v-lobby{
  background:transparent;
  justify-content:center;
  align-items:center;
}

/* lob-inner: pill is true center; title floats above via negative margin trick */
#v-lobby .lob-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  /* No height/justify here — we let the pill be the layout anchor */
}

/* Title rides above the pill; margin-bottom creates the gap */
.lob-title{
  font-family:'Righteous',cursive;font-weight:400;
  font-size:3.4rem;letter-spacing:.18em;
  color:var(--teal);text-align:center;
  text-shadow:0 0 20px var(--teal),0 0 60px rgba(127,255,212,.5),0 0 100px rgba(127,255,212,.2);
  margin-bottom:28px;
  /* Pull the whole block up so the pill is visually centered, not the title+pill stack */
  margin-top:calc(-3.4rem - 28px);
}

/* The pill */
.load-pill{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  background:rgba(26,10,46,.92);
  border:2px solid rgba(127,255,212,.25);
  border-radius:60px;
  padding:32px 60px 28px;
  min-width:340px;
  box-shadow:0 0 60px rgba(127,255,212,.06),0 12px 60px rgba(0,0,0,.6);
  animation:pillBreath 3.5s ease-in-out infinite;
}
@keyframes pillBreath{
  0%,100%{border-color:rgba(127,255,212,.22);box-shadow:0 0 40px rgba(127,255,212,.05),0 12px 60px rgba(0,0,0,.6)}
  50%    {border-color:rgba(127,255,212,.48);box-shadow:0 0 70px rgba(127,255,212,.14),0 12px 60px rgba(0,0,0,.6)}
}

/* Status text */
.load-status{
  font-family:'VT323',monospace;font-size:2.4rem;letter-spacing:.18em;
  color:var(--pink);text-shadow:var(--gp);
  text-align:center;min-height:2.8rem;
  transition:color .3s,text-shadow .3s;
}
.load-status.is-error{
  color:#FF6E6E;
  text-shadow:0 0 12px #FF6E6E,0 0 35px rgba(255,110,110,.4);
}

/* Scan bar */
.scan-bar{width:200px;height:3px;background:rgba(127,255,212,.08);overflow:hidden;border-radius:4px}
.scan-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--pink));
  box-shadow:0 0 10px var(--teal);border-radius:4px;animation:scan 1.4s ease infinite}
.scan-bar.is-error .scan-fill{
  background:linear-gradient(90deg,#FF6E6E,var(--pink));
  box-shadow:0 0 10px #FF6E6E;animation:none;width:100%
}
@keyframes scan{0%{width:0;margin-left:0}50%{width:55%;margin-left:22%}100%{width:0;margin-left:100%}}

/* button row — stacks cancel alone, lines up ready+cancel side by side */
.lob-btn-row{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;margin-top:4px;
}
.lob-btn-row .btn{padding:9px 28px}

/* Cancel button */
.cancel-btn{
  padding:9px 30px;background:transparent;
  border:2px solid rgba(127,255,212,.22);color:rgba(127,255,212,.55);
  font-family:'Audiowide',sans-serif;font-size:.72rem;letter-spacing:.16em;
  border-radius:50px;cursor:pointer;transition:all .22s;margin-top:4px;
}
.cancel-btn:hover{
  border-color:var(--teal);color:var(--teal);
  background:rgba(127,255,212,.07);box-shadow:0 0 20px rgba(127,255,212,.12);
}

/* friend-code box (hosted games) */
.mm-code-box{background:rgba(127,255,212,.05);border:2px solid rgba(127,255,212,.22);
  border-radius:18px;padding:18px 28px;text-align:center;width:100%;box-sizing:border-box}
.mm-code-label{font-family:'Audiowide',sans-serif;font-size:.7rem;letter-spacing:.18em;
  color:rgba(127,255,212,.45);margin-bottom:10px}
.mm-code-val{font-family:'VT323',monospace;font-size:3.2rem;letter-spacing:.22em;
  color:var(--teal);text-shadow:var(--gt)}
.mm-code-hint{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.1em;
  color:rgba(127,255,212,.35);margin-top:8px}

/* join-code input */
.mm-input{width:100%;background:rgba(127,255,212,.04);
  border:2px solid rgba(127,255,212,.22);color:var(--teal);
  font-family:'VT323',monospace;font-size:2rem;letter-spacing:.3em;
  padding:12px 20px;outline:none;border-radius:30px;transition:border-color .2s;
  text-align:center;text-transform:uppercase;box-sizing:border-box}
.mm-input:focus{border-color:var(--teal);box-shadow:0 0 16px rgba(127,255,212,.2)}
.mm-input::placeholder{color:rgba(127,255,212,.18);font-size:1.4rem;letter-spacing:.2em}
.mm-err{font-family:'Audiowide',sans-serif;font-size:.7rem;letter-spacing:.1em;
  color:var(--pink);text-shadow:var(--gp);min-height:1.2rem;text-align:center}

/* retain these — still referenced by in-game JS */
.mm-panel{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(380px,92vw)}
.mm-panel.hidden{display:none}
.lob-sub{display:none}
.lob-status{display:none}
.lob-detail{display:none}
.lob-timer{display:none}
.player-badge{display:none!important}
.sp-mode-icon{display:none}
.sp-size-badge{display:none}
.mm-divider{display:none}

/* ═══════════════════════════════════════════════════════
   VIEW: BATTLEFIELD (spawn + battle)
═══════════════════════════════════════════════════════ */
#v-battle{background:transparent;display:none;z-index:10}
#v-battle.on{display:block}
#map-viewport{position:absolute;inset:0;overflow:hidden}
#map-world{position:absolute;transform-origin:0 0;will-change:transform}

/* ── HEX TILES ── */
:root { --board-hex:#1c1c2e; --board-hex-hover:#252538; --board-edge:rgba(127,255,212,.38); }
.hex-wrap{position:absolute;transform:translate(-50%,-50%);cursor:none;overflow:visible;z-index:1}
.hex-wrap:has(.regen-label,.regen-plus,.poison-float,.dmg-float){z-index:50}
.hex-tile{position:absolute;inset:0;z-index:0;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  background:var(--board-hex);transition:background .15s;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 2px rgba(255,255,255,.03)}
.hex-outline{position:absolute;inset:0;z-index:2;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  box-shadow:inset 0 0 0 1px var(--board-edge)}
.hex-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:transparent;transition:background .12s;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
/* ── Landed zone layer divs — sit between hex-tile and hex-overlay, stack independently ── */
.hex-mud,.hex-blizzard-ice,.hex-meteor-scorch{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  transition:background .3s}
.hex-mud{background:rgba(160,120,60,.20)}
.hex-mud[data-mud="2"]{background:rgba(160,120,60,.34)}
.hex-mud[data-mud="3"]{background:rgba(160,120,60,.48)}
.hex-blizzard-ice{background:rgba(60,180,255,.22);box-shadow:inset 0 0 0 1px rgba(80,200,255,.45)}
.hex-meteor-scorch{background:rgba(220,50,20,.26);box-shadow:inset 0 0 0 2px rgba(255,120,30,.70)}
.board-skin-on .hex-mud{background:rgba(160,120,60,.26)}
.board-skin-on .hex-mud[data-mud="2"]{background:rgba(160,120,60,.40)}
.board-skin-on .hex-mud[data-mud="3"]{background:rgba(160,120,60,.56)}
.board-skin-on .hex-blizzard-ice{background:rgba(60,180,255,.26);box-shadow:inset 0 0 0 1px rgba(80,200,255,.50)}
.board-skin-on .hex-meteor-scorch{background:rgba(220,50,20,.30);box-shadow:inset 0 0 0 2px rgba(255,130,40,.75)}
.hex-wrap:hover .hex-tile{background:var(--board-hex-hover)}
.hex-wrap.spawn-teal .hex-tile{background:color-mix(in srgb,var(--board-hex) 80%,rgba(127,255,212,1) 20%)}
.hex-wrap.spawn-teal .hex-outline{box-shadow:inset 0 0 0 2px rgba(127,255,212,.9),0 0 8px rgba(127,255,212,.45)}
.hex-wrap.spawn-pink .hex-tile{background:color-mix(in srgb,var(--board-hex) 80%,rgba(255,121,198,1) 20%)}
.hex-wrap.spawn-pink .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,121,198,.9),0 0 8px rgba(255,121,198,.45)}
/* BR: other players' spawn hexes — dim neutral so you know they exist but it's not your zone */
.hex-wrap.spawn-neutral .hex-tile{background:color-mix(in srgb,var(--board-hex) 88%,rgba(180,180,180,1) 12%)}
.hex-wrap.spawn-neutral .hex-outline{box-shadow:inset 0 0 0 1px rgba(180,180,180,.22)}
.hex-wrap.move-range .hex-overlay{background:rgba(189,147,249,.18)}
.hex-wrap.summon-range .hex-overlay{background:rgba(255,107,26,.26)}
.hex-wrap.move-range .hex-outline{box-shadow:inset 0 0 0 1px rgba(189,147,249,.9)}
.hex-wrap.lock-zone .hex-outline{box-shadow:inset 0 0 0 1px rgba(220,200,255,.9)}
.hex-wrap.lock-zone .hex-overlay{background:rgba(220,200,255,.13)}
.hex-wrap.friend-range .hex-overlay{background:rgba(80,250,123,.18)}
.hex-wrap.friend-range .hex-outline{box-shadow:inset 0 0 0 1px rgba(80,250,123,.9)}
/* Friendly units within range get a much deeper green so they stand out from empty hexes */
.hex-wrap.friend-range:has(.unit-token) .hex-overlay{background:rgba(80,250,123,.55)}
.hex-wrap.friend-range:has(.unit-token) .hex-outline{box-shadow:inset 0 0 0 2px rgba(80,250,123,1),0 0 14px rgba(80,250,123,.55)}
.hex-wrap.hilite .hex-overlay{background:rgba(255,180,50,.20)}
.hex-wrap.hilite .hex-outline{box-shadow:inset 0 0 0 1px rgba(255,180,50,.95)}
.hex-wrap.threat .hex-overlay{background:rgba(255,60,60,.22)}
.hex-wrap.threat .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,60,60,.95)}
.hex-wrap.active-hex .hex-outline{box-shadow:inset 0 0 0 2px var(--teal),0 0 22px rgba(127,255,212,.5)}

/* ── BOARD SKIN LAYER ── */
#board-skin-layer{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .8s ease;overflow:hidden}
#board-skin-layer img{width:100%;height:100%;object-fit:cover;display:block}
#board-skin-layer.active{opacity:1}
/* When board skin active — tiles go semi-transparent, outlines thicken for legibility */
.board-skin-on .hex-tile{background:rgba(0,0,0,.40)!important;transition:background .15s}
.board-skin-on .hex-wrap:hover .hex-tile{background:rgba(0,0,0,.20)!important}
.board-skin-on .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,255,255,.60)!important}
.board-skin-on .hex-wrap.spawn-teal  .hex-tile{background:rgba(127,255,212,.32)!important}
.board-skin-on .hex-wrap.spawn-teal  .hex-outline{box-shadow:inset 0 0 0 2px rgba(127,255,212,.95)!important}
.board-skin-on .hex-wrap.spawn-pink  .hex-tile{background:rgba(255,121,198,.32)!important}
.board-skin-on .hex-wrap.spawn-pink  .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,121,198,.95)!important}
.board-skin-on .hex-wrap.spawn-neutral .hex-tile{background:rgba(180,180,180,.14)!important}
.board-skin-on .hex-wrap.spawn-neutral .hex-outline{box-shadow:inset 0 0 0 1px rgba(180,180,180,.35)!important}
.board-skin-on .hex-wrap.move-range  .hex-overlay{background:rgba(189,147,249,0.28)!important}
.board-skin-on .hex-wrap.friend-range .hex-overlay{background:rgba(80,250,123,0.26)!important}
.board-skin-on .hex-wrap.friend-range:has(.unit-token) .hex-overlay{background:rgba(80,250,123,0.64)!important}
.board-skin-on .hex-wrap.hilite      .hex-overlay{background:rgba(255,180,50,0.34)!important}
.board-skin-on .hex-wrap.threat      .hex-overlay{background:rgba(255,60,60,0.34)!important}
.board-skin-on .hex-wrap.lock-zone   .hex-overlay{background:rgba(220,200,255,0.19)!important}
.board-skin-on .hex-wrap.battlecry-preview .hex-overlay{background:rgba(255,209,102,0.3)!important}
.board-skin-on .hex-wrap.cleave-range   .hex-overlay{background:rgba(255,180,50,0.34)!important}
.board-skin-on .hex-wrap.cleave-preview .hex-overlay{background:rgba(255,30,30,0.54)!important}
.board-skin-on .hex-wrap.fireball-range   .hex-overlay{background:rgba(255,120,40,0.3)!important}
.board-skin-on .hex-wrap.fireball-preview .hex-overlay{background:rgba(255,80,10,0.6)!important}
.board-skin-on .hex-wrap.icebolt-range   .hex-overlay{background:rgba(255,180,50,0.34)!important}
.board-skin-on .hex-wrap.icebolt-preview .hex-overlay{background:rgba(60,190,255,0.54)!important}
.board-skin-on .hex-wrap.meteor-range    .hex-overlay{background:rgba(255,120,40,0.3)!important}
.board-skin-on .hex-wrap.meteor-preview  .hex-overlay{background:rgba(255,60,0,0.54)!important}
.board-skin-on .hex-wrap.blizzard-range  .hex-overlay{background:rgba(255,120,40,0.3)!important}
.board-skin-on .hex-wrap.blizzard-preview .hex-overlay{background:rgba(60,190,255,0.54)!important}
.board-skin-on .hex-wrap.ensnare-range   .hex-overlay{background:rgba(255,120,40,0.3)!important}
.board-skin-on .hex-wrap.ensnare-preview .hex-overlay{background:rgba(100,60,15,0.54)!important}
.board-skin-on .hex-wrap.firewall-range   .hex-overlay{background:rgba(255,120,40,0.3)!important}
.board-skin-on .hex-wrap.firewall-preview .hex-overlay{background:rgba(255,50,0,0.62)!important}
.board-skin-on .hex-wrap.meteor-warn     .hex-overlay{background:rgba(255,100,20,.22)!important}
.board-skin-on .hex-wrap.meteor-warn-center .hex-overlay{background:rgba(255,50,0,.30)!important}
.board-skin-on .hex-wrap.curse-range     .hex-overlay{background:rgba(255,120,40,0.3)!important}
.board-skin-on .hex-wrap.curse-preview   .hex-overlay{background:rgba(148,0,211,0.47)!important}
.board-skin-on .hex-wrap.active-hex .hex-outline{box-shadow:inset 0 0 0 2px var(--teal),0 0 24px rgba(127,255,212,.7)!important}

/* ── UNIT TOKENS ── */
.unit-token{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}

/* Base unit body — shape is controlled by type modifier classes below */
.unit-body{
  border:none;
  background:radial-gradient(circle at 35% 30%,rgba(127,255,212,.85),rgba(26,10,46,.92));
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:box-shadow .2s;
  /* default shape = circle (Melee) */
  border-radius:50%;overflow:hidden;}

/* ── Melee: circle (default, no override needed) ── */

/* ── Range: triangle via clip-path ── */
.unit-body.shape-Range{
  border-radius:0;
  overflow:visible;
  clip-path:polygon(50% 4%,96% 92%,4% 92%);
  /* border won't show with clip-path — use outline div instead */
  border:none;
  background:radial-gradient(circle at 50% 65%,rgba(127,255,212,.85),rgba(26,10,46,.92));}

/* ── Utility: square ── */
.unit-body.shape-Utility{
  border-radius:6px;
  overflow:hidden;}
.unit-body.shape-Utility.pk{border-radius:6px;}

/* ── Support: diamond via clip-path ── */
.unit-body.shape-Support{
  border-radius:0;
  overflow:visible;
  clip-path:polygon(50% 4%,96% 50%,50% 96%,4% 50%);
  border:none;
  background:radial-gradient(circle at 50% 50%,rgba(139,232,253,.85),rgba(26,10,46,.92));}

/* Pink team overrides for each shape */
.unit-body.pk{
  background:radial-gradient(circle at 35% 30%,rgba(255,121,198,.85),rgba(26,10,46,.92));}
.unit-body.shape-Range.pk{
  background:radial-gradient(circle at 50% 65%,rgba(255,121,198,.85),rgba(26,10,46,.92));}
.unit-body.shape-Support.pk{
  background:radial-gradient(circle at 50% 50%,rgba(255,121,198,.85),rgba(26,10,46,.92));}

/* ── BOSS SHAPES ─────────────────────────────────────────────────
   Pentagon and hexagon are raid-boss-only shapes.
   clip-path is injected inline by resolveBossAppearance() so the
   polygon string lives in raid.js — CSS just handles overflow/radius. */
.unit-body.shape-boss{
  border-radius:0;
  overflow:visible;
  border:none;
  /* clip-path set inline from RAID_BOSS_SHAPES */
}

/* ── BOSS COLOR FRAMEWORK ────────────────────────────────────────
   One CSS block per named color key in RAID_BOSS_COLORS (raid.js).
   The JS spawn handler adds class "boss-color-<key>" to the token.
   Background gradient, HP bar, name tag, unit panel all styled here.
   To add a new boss color: add it to RAID_BOSS_COLORS in raid.js,
   then add a matching .boss-color-X block below. That's it. */

/* crimson ─────── */
.unit-body.boss-color-crimson{
  background:radial-gradient(circle at 40% 35%,rgba(220,20,60,.92),rgba(26,10,46,.96));}
.unit-body.boss-color-crimson.active{animation:bossGlow-crimson 1.1s infinite}
@keyframes bossGlow-crimson{
  0%,100%{box-shadow:0 0 14px rgba(220,20,60,.6),0 0 32px rgba(220,20,60,.25)}
  50%    {box-shadow:0 0 28px rgba(220,20,60,1),  0 0 60px rgba(220,20,60,.5)}}
.unit-hp-bar.boss-color-crimson  {background:#DC143C;box-shadow:0 0 6px #DC143C;}
.unit-name-tag.boss-color-crimson{color:rgba(220,20,60,.95);text-shadow:0 0 8px #DC143C;}
.up-name.boss-color-crimson      {color:#DC143C;text-shadow:0 0 8px rgba(220,20,60,.6);}
.up-fill.boss-color-crimson      {background:#DC143C;box-shadow:0 0 6px #DC143C;}

/* inferno ─────── */
.unit-body.boss-color-inferno{
  background:radial-gradient(circle at 40% 35%,rgba(255,69,0,.92),rgba(26,10,46,.96));}
.unit-body.boss-color-inferno.active{animation:bossGlow-inferno 1.1s infinite}
@keyframes bossGlow-inferno{
  0%,100%{box-shadow:0 0 14px rgba(255,69,0,.6),0 0 32px rgba(255,69,0,.25)}
  50%    {box-shadow:0 0 28px rgba(255,69,0,1),  0 0 60px rgba(255,69,0,.5)}}
.unit-hp-bar.boss-color-inferno  {background:#FF4500;box-shadow:0 0 6px #FF4500;}
.unit-name-tag.boss-color-inferno{color:rgba(255,69,0,.95);text-shadow:0 0 8px #FF4500;}
.up-name.boss-color-inferno      {color:#FF4500;text-shadow:0 0 8px rgba(255,69,0,.6);}
.up-fill.boss-color-inferno      {background:#FF4500;box-shadow:0 0 6px #FF4500;}

/* void ─────────── */
.unit-body.boss-color-void{
  background:radial-gradient(circle at 40% 35%,rgba(148,0,211,.92),rgba(26,10,46,.96));}
.unit-body.boss-color-void.active{animation:bossGlow-void 1.1s infinite}
@keyframes bossGlow-void{
  0%,100%{box-shadow:0 0 14px rgba(148,0,211,.6),0 0 32px rgba(148,0,211,.25)}
  50%    {box-shadow:0 0 28px rgba(148,0,211,1),  0 0 60px rgba(148,0,211,.5)}}
.unit-hp-bar.boss-color-void  {background:#9400D3;box-shadow:0 0 6px #9400D3;}
.unit-name-tag.boss-color-void{color:rgba(148,0,211,.95);text-shadow:0 0 8px #9400D3;}
.up-name.boss-color-void      {color:#9400D3;text-shadow:0 0 8px rgba(148,0,211,.6);}
.up-fill.boss-color-void      {background:#9400D3;box-shadow:0 0 6px #9400D3;}

/* gold ──────────── */
.unit-body.boss-color-gold{
  background:radial-gradient(circle at 40% 35%,rgba(255,215,0,.92),rgba(26,10,46,.96));}
.unit-body.boss-color-gold.active{animation:bossGlow-gold 1.1s infinite}
@keyframes bossGlow-gold{
  0%,100%{box-shadow:0 0 14px rgba(255,215,0,.6),0 0 32px rgba(255,215,0,.25)}
  50%    {box-shadow:0 0 28px rgba(255,215,0,1),  0 0 60px rgba(255,215,0,.5)}}
.unit-hp-bar.boss-color-gold  {background:#FFD700;box-shadow:0 0 6px #FFD700;}
.unit-name-tag.boss-color-gold{color:rgba(255,215,0,.95);text-shadow:0 0 8px #FFD700;}
.up-name.boss-color-gold      {color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.6);}
.up-fill.boss-color-gold      {background:#FFD700;box-shadow:0 0 6px #FFD700;}

/* ice ───────────── */
.unit-body.boss-color-ice{
  background:radial-gradient(circle at 40% 35%,rgba(0,191,255,.92),rgba(26,10,46,.96));}
.unit-body.boss-color-ice.active{animation:bossGlow-ice 1.1s infinite}
@keyframes bossGlow-ice{
  0%,100%{box-shadow:0 0 14px rgba(0,191,255,.6),0 0 32px rgba(0,191,255,.25)}
  50%    {box-shadow:0 0 28px rgba(0,191,255,1),  0 0 60px rgba(0,191,255,.5)}}
.unit-hp-bar.boss-color-ice  {background:#00BFFF;box-shadow:0 0 6px #00BFFF;}
.unit-name-tag.boss-color-ice{color:rgba(0,191,255,.95);text-shadow:0 0 8px #00BFFF;}
.up-name.boss-color-ice      {color:#00BFFF;text-shadow:0 0 8px rgba(0,191,255,.6);}
.up-fill.boss-color-ice      {background:#00BFFF;box-shadow:0 0 6px #00BFFF;}

/* Shape outline overlays (SVG injected by JS for clip-path shapes) */
.unit-shape-outline{position:absolute;inset:0;pointer-events:none;}

/* Active pulse animations */
.unit-body.active{animation:pulseT 1.1s infinite}
.unit-body.pk.active{animation:pulseP 1.1s infinite}

.unit-initials{font-family:'Fredoka One',sans-serif;font-weight:400;color:#fff;
  text-shadow:0 0 8px currentColor;font-size:10px;position:relative;z-index:2}

/* HP bar — sits above the name tag, below the token body */
.unit-hp-bar-wrap{
  position:absolute;
  bottom:-14px; /* just above the name tag */
  left:50%;transform:translateX(-50%);
  width:80%;height:4px;
  background:rgba(0,0,0,.45);
  border-radius:4px;
  overflow:hidden;
  pointer-events:none;
  z-index:6;
  opacity:0;
  transition:opacity .25s;
}
.unit-hp-bar-wrap.damaged{opacity:1;}
.unit-hp-bar{
  height:100%;
  width:calc(var(--hp,100) * 1%);
  background:var(--teal);
  box-shadow:0 0 6px var(--teal);
  border-radius:4px;
  transition:width .35s ease;
}
.unit-hp-bar.pk{
  background:var(--pink);
  box-shadow:0 0 6px var(--pink);
}

/* ── POISON STATUS ── */
/* Purple tint overlay on the unit body */
.unit-token.poisoned .unit-body{
  filter:drop-shadow(0 0 7px rgba(189,147,249,1)) drop-shadow(0 0 14px rgba(189,147,249,.5));
}
.unit-token.poisoned:has(.unit-body.shape-Range),
.unit-token.poisoned:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(189,147,249,1)) drop-shadow(0 0 14px rgba(189,147,249,.5));
}
.unit-token.poisoned:has(.unit-body.shape-Range) .unit-body,
.unit-token.poisoned:has(.unit-body.shape-Support) .unit-body{
  filter:none;
}
.unit-token.poisoned .unit-body::after{
  content:'';position:absolute;inset:0;
  clip-path:inherit;
  background:rgba(189,147,249,.32);pointer-events:none;z-index:3;
}
/* Bubble container floats above the token */
.poison-bubbles{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:36px;height:18px;pointer-events:none;z-index:10;
  display:flex;align-items:flex-end;justify-content:center;gap:4px;
}
.poison-bubble{
  width:6px;height:6px;border-radius:50%;
  background:rgba(189,147,249,.9);
  box-shadow:0 0 5px rgba(189,147,249,.8);
  animation:bubbleRise 1.6s ease-in infinite;
}
.poison-bubble:nth-child(2){animation-delay:.55s;width:5px;height:5px;}
.poison-bubble:nth-child(3){animation-delay:1.1s;width:4px;height:4px;}
@keyframes bubbleRise{
  0%  {opacity:0;transform:translateY(0) scale(.6)}
  20% {opacity:1}
  80% {opacity:.7}
  100%{opacity:0;transform:translateY(-14px) scale(1)}
}
/* Poison tick float text */
.poison-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#BD93F9;text-shadow:0 0 10px rgba(189,147,249,.9);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat .9s cubic-bezier(.22,.68,0,1) forwards;
}
.regen-label{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.07em;
  color:#50FA7B;text-shadow:0 0 10px rgba(80,250,123,.95),0 0 22px rgba(80,250,123,.5);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}
.dmg-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:1.15rem;letter-spacing:.06em;
  color:#ff4444;text-shadow:0 0 10px rgba(255,60,60,.85);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat .9s cubic-bezier(.22,.68,0,1) forwards;
}
@keyframes poisonFloat{
  0%  {opacity:0;top:10px}
  15% {opacity:1}
  70% {opacity:1;top:-42px}
  100%{opacity:0;top:-58px}
}
/* Summon entry in turn queue — italic, slightly dimmed */
.q-entry.summon-entry{font-style:italic;opacity:.8}
/* Poison icon in turn queue */
.q-poison{font-size:.75rem;margin-left:4px;opacity:.9;animation:blink 1.8s infinite;}

/* ── BURN debuff ──────────────────────────────── */
.unit-token.burned .unit-body{
  filter:drop-shadow(0 0 7px rgba(255,120,30,1)) drop-shadow(0 0 16px rgba(255,60,0,.65));
}
.unit-token.burned:has(.unit-body.shape-Range),
.unit-token.burned:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(255,120,30,1)) drop-shadow(0 0 16px rgba(255,60,0,.65));
}
.unit-token.burned:has(.unit-body.shape-Range) .unit-body,
.unit-token.burned:has(.unit-body.shape-Support) .unit-body{
  filter:none;
}
.unit-token.burned .unit-body::after{
  content:'';position:absolute;inset:0;
  clip-path:inherit;
  background:rgba(255,100,20,.28);pointer-events:none;z-index:3;
}
/* Tiny flame particles above token */
.burn-embers{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  width:36px;height:20px;pointer-events:none;z-index:10;
  display:flex;align-items:flex-end;justify-content:center;gap:5px;
}
.burn-ember{
  width:5px;height:5px;border-radius:50% 50% 30% 30%;
  background:radial-gradient(circle at 40% 35%,#FFD166 0%,#FF6B1A 65%,#FF2200 100%);
  box-shadow:0 0 5px rgba(255,120,30,.9);
  animation:emberRise 1.3s ease-in infinite;
}
.burn-ember:nth-child(2){animation-delay:.45s;width:4px;height:4px;background:radial-gradient(circle at 40% 35%,#FFF 0%,#FFB86C 50%,#FF4400 100%);}
.burn-ember:nth-child(3){animation-delay:.9s;width:3px;height:3px;}
@keyframes emberRise{
  0%  {opacity:0;transform:translateY(0) scale(.5)}
  20% {opacity:1}
  70% {opacity:.8;transform:translateY(-13px) scale(1) rotate(15deg)}
  100%{opacity:0;transform:translateY(-20px) scale(.3) rotate(-10deg)}
}
/* Burn tick float text */
.burn-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#FFB86C;text-shadow:0 0 10px rgba(255,120,30,.95),0 0 22px rgba(255,80,0,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat .9s cubic-bezier(.22,.68,0,1) forwards;
}

/* ── CHILL debuff ─────────────────────────────── */
.unit-token.chilled .unit-body{
  filter:drop-shadow(0 0 7px rgba(139,232,253,1)) drop-shadow(0 0 16px rgba(80,200,255,.65));
}
.unit-token.chilled:has(.unit-body.shape-Range),
.unit-token.chilled:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(139,232,253,1)) drop-shadow(0 0 16px rgba(80,200,255,.65));
}
.unit-token.chilled:has(.unit-body.shape-Range) .unit-body,
.unit-token.chilled:has(.unit-body.shape-Support) .unit-body{
  filter:none;
}
.unit-token.chilled .unit-body::after{
  content:'';position:absolute;inset:0;
  clip-path:inherit;
  background:rgba(139,232,253,.22);pointer-events:none;z-index:3;
}
/* Frost crystal particles */
.chill-crystals{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  width:40px;height:22px;pointer-events:none;z-index:10;
  display:flex;align-items:flex-end;justify-content:center;gap:5px;
}
.chill-crystal{
  width:4px;height:7px;border-radius:1px 1px 0 0;
  background:linear-gradient(to top,rgba(139,232,253,.4),rgba(200,245,255,.95));
  box-shadow:0 0 4px rgba(139,232,253,.9),0 0 10px rgba(80,200,255,.5);
  animation:crystalDrift 2.2s ease-in-out infinite;
}
.chill-crystal:nth-child(2){animation-delay:.75s;height:5px;width:3px;}
.chill-crystal:nth-child(3){animation-delay:1.5s;height:6px;width:4px;}
@keyframes crystalDrift{
  0%  {opacity:0;transform:translateY(0) scale(.7)}
  25% {opacity:1}
  75% {opacity:.8;transform:translateY(-10px) scale(1) rotate(20deg)}
  100%{opacity:0;transform:translateY(-18px) scale(.4) rotate(-15deg)}
}
/* Chill label float */
.chill-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#8BE8FD;text-shadow:0 0 10px rgba(139,232,253,.95),0 0 22px rgba(80,200,255,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}

/* ── HASTE buff ───────────────────────────────── */
.unit-token.hasted .unit-body{
  filter:drop-shadow(0 0 7px rgba(80,250,123,1)) drop-shadow(0 0 16px rgba(50,200,100,.65));
}
.unit-token.hasted:has(.unit-body.shape-Range),
.unit-token.hasted:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(80,250,123,1)) drop-shadow(0 0 16px rgba(50,200,100,.65));
}
.unit-token.hasted:has(.unit-body.shape-Range) .unit-body,
.unit-token.hasted:has(.unit-body.shape-Support) .unit-body{ filter:none; }
.unit-token.hasted .unit-body::after{
  content:'';position:absolute;inset:0;clip-path:inherit;
  background:rgba(80,250,123,.18);pointer-events:none;z-index:3;
}
/* ── SLOW debuff ──────────────────────────────── */
.unit-token.slowed .unit-body{
  filter:drop-shadow(0 0 7px rgba(189,147,249,1)) drop-shadow(0 0 16px rgba(140,100,220,.65));
}
.unit-token.slowed:has(.unit-body.shape-Range),
.unit-token.slowed:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(189,147,249,1)) drop-shadow(0 0 16px rgba(140,100,220,.65));
}
.unit-token.slowed:has(.unit-body.shape-Range) .unit-body,
.unit-token.slowed:has(.unit-body.shape-Support) .unit-body{ filter:none; }
.unit-token.slowed .unit-body::after{
  content:'';position:absolute;inset:0;clip-path:inherit;
  background:rgba(189,147,249,.2);pointer-events:none;z-index:3;
}
/* ── Clock particles — shared container ──────── */
.speed-clock{
  position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;pointer-events:none;z-index:10;
}
.speed-clock svg{ width:100%;height:100%; }
/* Haste: fast-spinning hand — 0.4s per revolution */
.speed-clock.fast .clock-hand{
  transform-origin:50% 50%;
  animation:clockSpin 0.4s linear infinite;
}
/* Slow: sluggish spin — 2.5s per revolution */
.speed-clock.slow .clock-hand{
  transform-origin:50% 50%;
  animation:clockSpin 2.5s linear infinite;
}
@keyframes clockSpin{ to{ transform:rotate(360deg); } }
/* Haste label float */
.haste-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#50FA7B;text-shadow:0 0 10px rgba(80,250,123,.95),0 0 22px rgba(50,200,100,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}
/* Slow label float */
.slow-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#BD93F9;text-shadow:0 0 10px rgba(189,147,249,.95),0 0 22px rgba(140,100,220,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}
/* Queue icons */
.q-haste{font-size:.72rem;margin-left:4px;color:#50FA7B;opacity:.95;animation:blink 1s infinite;}
.q-slow {font-size:.72rem;margin-left:4px;color:#BD93F9;opacity:.95;animation:blink 1.6s infinite;}
.q-root {font-family:'Georgia',serif;font-size:.78rem;margin-left:4px;color:#4A7C2F;opacity:.95;text-shadow:0 0 6px rgba(60,120,20,.7);animation:blink 1.2s infinite;}
.q-burn {font-size:.72rem;margin-left:4px;color:#FF6B1A;opacity:.95;text-shadow:0 0 6px rgba(255,100,20,.7);animation:blink 1.0s infinite;}
.q-chill{font-size:.72rem;margin-left:4px;color:#8BE8FD;opacity:.95;text-shadow:0 0 6px rgba(80,200,255,.6);animation:blink 1.5s infinite;}
.q-blind  {font-size:.78rem;margin-left:4px;opacity:.95;animation:blink 1.4s infinite;}
.q-silence{font-size:.78rem;margin-left:4px;opacity:.95;animation:blink 1.4s infinite;}

/* ── BLIND debuff ─────────────────────────────── */
.unit-token.blinded .unit-body{
  filter:drop-shadow(0 0 7px rgba(255,184,108,1)) drop-shadow(0 0 16px rgba(255,140,30,.65));
}
.unit-token.blinded:has(.unit-body.shape-Range),
.unit-token.blinded:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(255,184,108,1)) drop-shadow(0 0 16px rgba(255,140,30,.65));
}
.unit-token.blinded:has(.unit-body.shape-Range) .unit-body,
.unit-token.blinded:has(.unit-body.shape-Support) .unit-body{ filter:none; }
.unit-token.blinded .unit-body::after{
  content:'';position:absolute;inset:0;clip-path:inherit;
  background:rgba(255,184,108,.28);pointer-events:none;z-index:3;
}
/* Sunglasses icon floating above token */
.blind-icon{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  font-size:1.1rem;line-height:1;pointer-events:none;z-index:10;
  animation:blindBob 1.6s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(255,184,108,.9));
  transition:left .15s;
}
@keyframes blindBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(-3px)}
}
/* Blind label float */
.blind-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#FFB86C;text-shadow:0 0 10px rgba(255,184,108,.95),0 0 22px rgba(255,140,30,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}

/* ── SILENCE debuff ───────────────────────────── */
.unit-token.silenced .unit-body{
  filter:drop-shadow(0 0 7px rgba(200,180,240,1)) drop-shadow(0 0 16px rgba(160,120,220,.65));
}
.unit-token.silenced:has(.unit-body.shape-Range),
.unit-token.silenced:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(200,180,240,1)) drop-shadow(0 0 16px rgba(160,120,220,.65));
}
.unit-token.silenced:has(.unit-body.shape-Range) .unit-body,
.unit-token.silenced:has(.unit-body.shape-Support) .unit-body{ filter:none; }
.unit-token.silenced .unit-body::after{
  content:'';position:absolute;inset:0;clip-path:inherit;
  background:rgba(180,150,230,.22);pointer-events:none;z-index:3;
}
/* Muted icon floating above token */
.silence-icon{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  font-size:1.1rem;line-height:1;pointer-events:none;z-index:10;
  animation:blindBob 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(180,150,230,.9));
  transition:left .15s;
}
/* Silence label float */
.silence-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#C8B4F0;text-shadow:0 0 10px rgba(200,180,240,.95),0 0 22px rgba(160,120,220,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}

/* ── Rooted unit token ──────────────────────────── */
/* Dark green glow — vines grip the unit */
.unit-token.rooted .unit-body{
  filter:drop-shadow(0 0 7px rgba(40,120,20,1)) drop-shadow(0 0 18px rgba(30,90,10,.7));
}
.unit-token.rooted:has(.unit-body.shape-Range),
.unit-token.rooted:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 7px rgba(40,120,20,1)) drop-shadow(0 0 18px rgba(30,90,10,.7));
}
.unit-token.rooted:has(.unit-body.shape-Range) .unit-body,
.unit-token.rooted:has(.unit-body.shape-Support) .unit-body{ filter:none; }
.unit-token.rooted .unit-body::after{
  content:'';position:absolute;inset:0;clip-path:inherit;
  background:rgba(30,100,10,.25);pointer-events:none;z-index:3;
}
/* Vine icon floating above rooted token */
.root-icon{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  font-family:'Georgia',serif;font-size:1.2rem;line-height:1;
  color:#4A7C2F;text-shadow:0 0 8px rgba(60,140,20,.9),0 0 20px rgba(40,100,10,.6);
  pointer-events:none;z-index:10;
  animation:rootSway 2.2s ease-in-out infinite;
  transition:left .15s;
}
@keyframes rootSway{
  0%,100%{transform:translateX(-50%) rotate(-8deg) scaleX(1)}
  50%{transform:translateX(-50%) rotate(8deg) scaleX(-1)}
}
/* Root float label */
.root-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:#6BBF3F;text-shadow:0 0 10px rgba(80,180,30,.95),0 0 22px rgba(40,120,10,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}

/* ── Cleanse / Dispel float labels ──────────────── */
.cleanse-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.85rem;letter-spacing:.07em;
  color:#fff;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 28px rgba(180,255,200,.7);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}
.dispel-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Fredoka One',sans-serif;font-size:.85rem;letter-spacing:.07em;
  color:#FFD166;text-shadow:0 0 12px rgba(255,209,102,.95),0 0 28px rgba(255,180,30,.6);
  white-space:nowrap;pointer-events:none;z-index:20;
  animation:poisonFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}

.unit-name-tag{position:absolute;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.06em;color:rgba(127,255,212,.95);white-space:nowrap;
  text-shadow:0 0 8px var(--teal);pointer-events:none;font-family:'Fredoka One',sans-serif;
  z-index:50}
.unit-name-tag.pk{color:rgba(255,121,198,.95);text-shadow:0 0 8px var(--pink)}

@keyframes pulseT{
  0%,100%{box-shadow:0 0 18px rgba(127,255,212,.65)}
  50%{box-shadow:0 0 34px rgba(127,255,212,1),0 0 60px rgba(127,255,212,.45)}}
@keyframes pulseP{
  0%,100%{box-shadow:0 0 18px rgba(255,121,198,.65)}
  50%{box-shadow:0 0 34px rgba(255,121,198,1),0 0 60px rgba(255,121,198,.45)}}

/* Clip-path shapes can't use box-shadow — use filter:drop-shadow via parent token */
.unit-token.pulse-teal{animation:pulseTokenT 1.1s infinite}
.unit-token.pulse-pink{animation:pulseTokenP 1.1s infinite}
@keyframes pulseTokenT{
  0%,100%{filter:drop-shadow(0 0 8px rgba(127,255,212,.7))}
  50%{filter:drop-shadow(0 0 22px rgba(127,255,212,1))}}
@keyframes pulseTokenP{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,121,198,.7))}
  50%{filter:drop-shadow(0 0 22px rgba(255,121,198,1))}}

/* ── BERSERK STATUS ── */
/* Red tint on the body */
.unit-token.berserked .unit-body{
  filter:drop-shadow(0 0 8px rgba(255,80,60,1));
}
.unit-token.berserked .unit-body::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,80,60,.18);pointer-events:none;z-index:3;
}
/* Pulsing rage aura ring — sits behind the token body */
.berserk-aura{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:100%;height:100%;
  border-radius:50%;
  border:2px solid rgba(255,80,60,.7);
  box-shadow:0 0 12px rgba(255,80,60,.5),inset 0 0 8px rgba(255,80,60,.2);
  pointer-events:none;z-index:1;
  animation:berserkPulse 0.75s ease-out infinite;
}
.berserk-aura:nth-child(2){animation-delay:.38s;opacity:.6;}
@keyframes berserkPulse{
  0%  {transform:translate(-50%,-50%) scale(1);  opacity:.85}
  60% {transform:translate(-50%,-50%) scale(1.55);opacity:.35}
  100%{transform:translate(-50%,-50%) scale(1.8); opacity:0}
}
/* Berserk icon in turn queue */
.q-berserk{font-size:.75rem;margin-left:4px;color:#FF503C;opacity:.95;animation:blink .75s infinite;}
/* Battle Cry icon in turn queue — gold crossed swords */
.q-battlecry{font-size:.72rem;margin-left:4px;color:#FFD166;opacity:.95;text-shadow:0 0 6px rgba(255,209,102,.7);}
/* Curse icon in turn queue — purple six-pointed star, slow pulse */
.q-curse{font-size:.72rem;margin-left:4px;color:#BD93F9;opacity:.95;text-shadow:0 0 6px rgba(189,147,249,.7);animation:blink 2.2s infinite;}
/* Meteor phantom queue entry */
.q-entry.meteor{border-left-color:rgba(255,80,0,.9);color:rgba(255,140,40,.95);
  text-shadow:0 0 8px rgba(255,80,0,.7);animation:meteorPulse 1.1s ease-in-out infinite;
  background:rgba(255,60,0,.07)}

/* ── SHIELD BUBBLE ── */
.unit-token.shielded .unit-body{
  filter:drop-shadow(0 0 9px rgba(220,235,255,.9));
}
.unit-token.shielded .unit-body::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(200,220,255,.12);pointer-events:none;z-index:3;
}
/* Outer bubble ring — slow breathe */
.shield-bubble{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:108%;height:108%;
  border-radius:50%;
  border:2px solid rgba(200,225,255,.75);
  box-shadow:0 0 14px rgba(180,210,255,.5),inset 0 0 10px rgba(200,225,255,.15);
  pointer-events:none;z-index:1;
  animation:shieldBreathe 2.4s ease-in-out infinite;
}
/* Inner shimmer ring — offset phase for iridescent feel */
.shield-bubble-inner{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:92%;height:92%;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:inset 0 0 16px rgba(200,225,255,.2);
  pointer-events:none;z-index:1;
  animation:shieldBreathe 2.4s ease-in-out infinite;
  animation-delay:1.2s;
  opacity:.6;
}
@keyframes shieldBreathe{
  0%  {transform:translate(-50%,-50%) scale(1);    opacity:.75}
  50% {transform:translate(-50%,-50%) scale(1.08); opacity:.95}
  100%{transform:translate(-50%,-50%) scale(1);    opacity:.75}
}

/* ── REGEN STATUS ── */
.unit-token.regen-other .unit-body{
  filter:drop-shadow(0 0 7px rgba(80,250,123,.9)) drop-shadow(0 0 14px rgba(80,250,123,.45));
  animation:regenGlowPulse 2.4s ease-in-out infinite;
}
.unit-token.regen-other:has(.unit-body.shape-Range),
.unit-token.regen-other:has(.unit-body.shape-Support){
  animation:regenGlowPulse 2.4s ease-in-out infinite;
}
.unit-token.regen-other:has(.unit-body.shape-Range) .unit-body,
.unit-token.regen-other:has(.unit-body.shape-Support) .unit-body{
  filter:none;animation:none;
}
.unit-token.regen-other .unit-body::after{
  content:'';position:absolute;inset:0;
  clip-path:inherit;
  background:rgba(80,250,123,.15);pointer-events:none;z-index:3;
}
@keyframes regenGlowPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(80,250,123,.7))  drop-shadow(0 0 11px rgba(80,250,123,.35))}
  50%    {filter:drop-shadow(0 0 10px rgba(80,250,123,1))   drop-shadow(0 0 22px rgba(80,250,123,.6))}
}

/* ── BATTLE CRY BUFF ── */
/* Static thin gold outline — sits quietly around the unit shape.
   drop-shadow with low blur acts like a border on clip-path shapes. */
.unit-token.battlecried .unit-body{
  filter:drop-shadow(0 0 0px rgba(255,209,102,0))
         drop-shadow(0 0 9px rgba(255,209,102,.7))
         drop-shadow(0 0 14px rgba(255,209,102,.35));
}
.unit-token.battlecried:has(.unit-body.shape-Range),
.unit-token.battlecried:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 0px rgba(255,209,102,0))
         drop-shadow(0 0 9px rgba(255,209,102,.7))
         drop-shadow(0 0 14px rgba(255,209,102,.35));
}
.unit-token.battlecried:has(.unit-body.shape-Range) .unit-body,
.unit-token.battlecried:has(.unit-body.shape-Support) .unit-body{
  filter:none;
}
/* Both buffs active — regen pulse shows through, outline just sits on top */
.unit-token.regen-other.battlecried .unit-body::after{
  background:rgba(80,250,123,.15);
}
.regen-plus{
  position:absolute;left:50%;
  font-family:'Fredoka One',sans-serif;font-size:1rem;font-weight:400;
  color:#50FA7B;text-shadow:0 0 8px rgba(80,250,123,.9);
  pointer-events:none;z-index:20;
  animation:regenFloat 1.1s cubic-bezier(.22,.68,0,1) forwards;
}

@keyframes regenFloat{
  0%  { transform:var(--regen-offset,translateX(-50%)) translateY(0);   opacity:1;   }
  60% { transform:var(--regen-offset,translateX(-50%)) translateY(-28px); opacity:.9; }
  100%{ transform:var(--regen-offset,translateX(-50%)) translateY(-46px); opacity:0;  }
}

/* BattleCry AoE preview ring — shown on hover hex and confirmed hex */
.hex-wrap.battlecry-preview .hex-overlay{background:rgba(255,209,102,.22)}
.hex-wrap.battlecry-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,209,102,.95)}
/* Curse hex targeting range — orange like all offensive abilities */
.hex-wrap.curse-range .hex-overlay{background:rgba(255,180,50,.20)}
.hex-wrap.curse-range .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,120,40,.9),0 0 10px rgba(255,80,10,.4)}
/* Curse AoE preview ring — deep purple on hover and confirmed hex */
.hex-wrap.curse-preview .hex-overlay{background:rgba(148,0,211,.45)}
.hex-wrap.curse-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(189,147,249,1),0 0 16px rgba(148,0,211,.7)}
/* Cursed token — purple glow, mirrors battlecried pattern */
.unit-token.cursed .unit-body{
  filter:drop-shadow(0 0 0px rgba(189,147,249,0))
         drop-shadow(0 0 9px rgba(189,147,249,.75))
         drop-shadow(0 0 14px rgba(148,0,211,.45));
}
.unit-token.cursed:has(.unit-body.shape-Range),
.unit-token.cursed:has(.unit-body.shape-Support){
  filter:drop-shadow(0 0 0px rgba(189,147,249,0))
         drop-shadow(0 0 9px rgba(189,147,249,.75))
         drop-shadow(0 0 14px rgba(148,0,211,.45));
}
.unit-token.cursed:has(.unit-body.shape-Range) .unit-body,
.unit-token.cursed:has(.unit-body.shape-Support) .unit-body{
  filter:none;
}
.hex-wrap.cleave-range .hex-overlay{background:rgba(255,180,50,.20)}
.hex-wrap.cleave-range .hex-outline{box-shadow:inset 0 0 0 1px rgba(255,180,50,.95)}
.hex-wrap.cleave-preview .hex-overlay{background:rgba(255,32,32,.42)}
.hex-wrap.cleave-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,40,40,1),0 0 12px rgba(255,30,30,.7)}
/* Fireball targeting */
.hex-wrap.fireball-range .hex-overlay{background:rgba(255,107,26,.26)}
.hex-wrap.fireball-range .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,120,40,.9),0 0 10px rgba(255,80,10,.5)}
.hex-wrap.fireball-preview .hex-overlay{background:rgba(255,56,0,.52)}
.hex-wrap.fireball-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,80,20,1),0 0 18px rgba(255,60,0,.85)}
/* IceBolt targeting — range uses standard orange, cone preview stays icy blue */
.hex-wrap.icebolt-range .hex-overlay{background:rgba(255,180,50,.20)}
.hex-wrap.icebolt-range .hex-outline{box-shadow:inset 0 0 0 1px rgba(255,180,50,.9)}
.hex-wrap.icebolt-preview .hex-overlay{background:rgba(79,200,255,.52)}
.hex-wrap.icebolt-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(80,210,255,1),0 0 20px rgba(60,190,255,.9)}
/* Meteor targeting range — deep orange-red, distinct from Fireball */
.hex-wrap.meteor-range .hex-overlay{background:rgba(255,107,26,.26)}
.hex-wrap.meteor-range .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,120,40,.9),0 0 10px rgba(255,80,10,.5)}
/* Meteor AoE warning glow — shown while meteor is in flight (persistent until strike) */
.hex-wrap.meteor-warn .hex-overlay{background:rgba(255,100,20,.16);animation:meteorPulse 1.1s ease-in-out infinite}
.hex-wrap.meteor-warn .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,80,10,.9),0 0 16px rgba(255,60,0,.6)}
.hex-wrap.meteor-warn-center .hex-overlay{background:rgba(255,60,0,.24);animation:meteorPulse 1.1s ease-in-out infinite}
.hex-wrap.meteor-warn-center .hex-outline{box-shadow:inset 0 0 0 3px rgba(255,40,0,1),0 0 22px rgba(255,30,0,.8)}
/* Meteor cast confirm preview */
.hex-wrap.meteor-preview .hex-overlay{background:rgba(255,56,0,.52)}
.hex-wrap.meteor-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,80,20,1),0 0 18px rgba(255,60,0,.85)}
/* Persistent on-ground indicator — subtle warm tint while meteor is in the queue */
@keyframes meteorPulse{0%,100%{opacity:.7}50%{opacity:1}}
/* Blizzard targeting range — same orange as all offensive abilities */
.hex-wrap.blizzard-range .hex-overlay{background:rgba(255,107,26,.26)}
.hex-wrap.blizzard-range .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,120,40,.9),0 0 10px rgba(255,80,10,.5)}
/* Blizzard hover AoE preview — IceBolt blue */
.hex-wrap.blizzard-preview .hex-overlay{background:rgba(79,200,255,.52)}
.hex-wrap.blizzard-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(80,210,255,1),0 0 20px rgba(60,190,255,.9)}
/* Blizzard persistent zone — dark blue, very transparent */
/* Ensnare targeting range — same orange as all offensive abilities */
.hex-wrap.ensnare-range .hex-overlay{background:rgba(255,107,26,.26)}
.hex-wrap.ensnare-range .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,120,40,.9),0 0 10px rgba(255,80,10,.5)}
/* Ensnare hover AoE preview — muddy brown */
.hex-wrap.ensnare-preview .hex-overlay{background:rgba(140,90,30,.52)}
.hex-wrap.ensnare-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(140,90,30,.9),0 0 14px rgba(100,60,10,.7)}
/* Ensnare persistent mud zone — dark muddy brown, very transparent */
/* Stacked ensnare zones get darker */

/* ── FIREWALL range / preview / persistent tile ─────────────────── */
/* Targeting range — same aggressive orange as fireball                */
.hex-wrap.firewall-range .hex-overlay{background:rgba(255,80,0,.26)}
.hex-wrap.firewall-range .hex-outline{box-shadow:inset 0 0 0 2px rgba(255,120,30,.9),0 0 10px rgba(255,70,0,.5)}
/* Hover wall preview — vivid red like cleave-preview                  */
.hex-wrap.firewall-preview .hex-overlay{background:rgba(255,40,0,.52)}
.hex-wrap.firewall-preview .hex-outline{box-shadow:inset 0 0 0 2.5px rgba(255,80,10,1),0 0 18px rgba(255,50,0,.9)}
/* Persistent landed wall tile — dark ember base, fire canvas sits on top */
.hex-wrap.firewall-landed .hex-tile{background:rgba(140,30,0,.55)}
.hex-wrap.firewall-landed .hex-outline{box-shadow:inset 0 0 0 2.5px #ff5500,0 0 14px rgba(255,60,0,.55)}
/* Fire canvas element — clipped to hex shape, drawn by the off-canvas fire sim */
.hex-fire-canvas{
  position:absolute;inset:0;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  z-index:3;pointer-events:none;
}

/* ── PlaceTotem range highlight — green like friend-range/HealOther ── */
.hex-wrap.totem-range .hex-overlay{background:rgba(80,250,123,.18)}
.hex-wrap.totem-range .hex-outline{box-shadow:inset 0 0 0 1px rgba(80,250,123,.9)}
/* PlaceTotem hover aura preview — shows the 2-hex buff zone around hovered hex */
.hex-wrap.totem-preview .hex-overlay{background:rgba(80,250,123,.28)}
.hex-wrap.totem-preview .hex-outline{box-shadow:inset 0 0 0 2px rgba(80,250,123,.9),0 0 10px rgba(80,250,123,.4)}

/* ── Totem aura persistent overlay ─────────────────────────────────── */
/* Drawn as .hex-totem-aura inside hex-wrap, same stacking as .hex-mud  */
/* Teal team — soft aqua glow                                           */
.hex-totem-aura{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
.hex-wrap.totem-aura-teal .hex-totem-aura{background:rgba(127,255,212,.10)}
.hex-wrap.totem-aura-teal .hex-outline{box-shadow:inset 0 0 0 1px rgba(127,255,212,.20)}
/* Pink team — soft pink glow                                           */
.hex-wrap.totem-aura-pk .hex-totem-aura{background:rgba(255,121,198,.10)}
.hex-wrap.totem-aura-pk .hex-outline{box-shadow:inset 0 0 0 1px rgba(255,121,198,.20)}

/* Board skin overrides — slightly more opaque on dark board             */
.board-skin-on .hex-wrap.totem-aura-teal .hex-totem-aura{background:rgba(127,255,212,.15)!important}
.board-skin-on .hex-wrap.totem-aura-pk   .hex-totem-aura{background:rgba(255,121,198,.15)!important}
.board-skin-on .hex-wrap.totem-range .hex-overlay{background:rgba(80,250,123,0.26)!important}
.board-skin-on .hex-wrap.totem-preview .hex-overlay{background:rgba(80,250,123,0.38)!important}

/* ── Totem unit token — transparent body, skull SVG is the visual ───── */
.unit-body.shape-totem{background:none!important;box-shadow:none!important;clip-path:none!important;}
/* board-skin overrides */

/* ── TELEPORT WORMHOLE ── */
@keyframes teleportOut{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1)   rotate(0deg)}
  40% {opacity:.7;transform:translate(-50%,-50%) scale(.35) rotate(180deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(0)   rotate(360deg)}
}
@keyframes teleportIn{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0)   rotate(-360deg)}
  55% {opacity:.7;transform:translate(-50%,-50%) scale(1.2) rotate(-40deg)}
  75% {opacity:1;transform:translate(-50%,-50%) scale(.9)  rotate(8deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)   rotate(0deg)}
}
.wormhole-ring{
  position:absolute;left:50%;top:50%;
  width:10px;height:10px;
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  border:3px solid #BD93F9;
  box-shadow:0 0 18px rgba(189,147,249,.8),inset 0 0 10px rgba(189,147,249,.3);
  pointer-events:none;z-index:25;
  animation:wormholeExpand .55s ease-out forwards;
}
@keyframes wormholeExpand{
  0%  {opacity:1; transform:translate(-50%,-50%) scale(1);   width:10px;height:10px}
  60% {opacity:.8;transform:translate(-50%,-50%) scale(1);   width:90px;height:90px}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1);   width:110px;height:110px}
}

#b-hud{position:fixed;inset:0;z-index:400;pointer-events:none}
#b-top{position:absolute;top:0;left:0;right:0;height:72px;
  background:linear-gradient(to bottom,rgba(26,10,46,.97),transparent);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.hud-pill{display:flex;align-items:center;gap:12px;padding:9px 22px;
  background:rgba(26,10,46,.92);border:2px solid rgba(127,255,212,.25);
  border-radius:40px}
.turn-dot{width:12px;height:12px;border-radius:50%;background:var(--teal);
  box-shadow:var(--gt);animation:blink 1.4s infinite;flex-shrink:0}
.turn-dot.pk{background:var(--pink);box-shadow:var(--gp)}
#turn-label{font-family:'Fredoka One',sans-serif;font-size:1.05rem;letter-spacing:.08em;color:var(--teal)}
#turn-label.pk{color:var(--pink)}
#turn-timer{font-family:'VT323',monospace;font-size:3.5rem;letter-spacing:.05em;
  color:var(--teal);text-shadow:var(--gt);padding:2px 20px;
  border:2px solid rgba(127,255,212,.22);background:rgba(26,10,46,.9);
  border-radius:30px;min-width:90px;text-align:center;
  position:absolute;left:50%;transform:translateX(-50%)}
#turn-timer.warn{color:var(--pink);text-shadow:var(--gp);border-color:rgba(255,121,198,.45)}

/* ── GEAR / SETTINGS BUTTON ── */
#game-settings-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(26,10,46,.92);border:2px solid rgba(127,255,212,.3);
  color:var(--teal);font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  cursor:none;pointer-events:all;flex-shrink:0;
  transition:all .2s;
  box-shadow:0 0 8px rgba(127,255,212,.1)}
#game-settings-btn:hover{
  border-color:var(--teal);
  box-shadow:var(--gt);
  transform:rotate(45deg) scale(1.1)}
#game-settings-btn svg{transition:transform .3s}

/* ── IN-GAME SETTINGS POPUP ── */
#game-settings-popup{
  position:fixed;inset:0;z-index:9500;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,4,20,.82);backdrop-filter:blur(6px)}
#game-settings-popup.on{display:flex}
.gs-box{
  background:var(--bg-card);
  border:2px solid rgba(127,255,212,.35);
  border-radius:var(--radius-panel);
  padding:40px 48px 36px;
  min-width:320px;max-width:92vw;
  display:flex;flex-direction:column;align-items:center;gap:0;
  box-shadow:0 0 60px rgba(127,255,212,.12),0 24px 64px rgba(0,0,0,.55);
  animation:gsPopIn .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes gsPopIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.gs-title{
  font-family:'Righteous',cursive;font-weight:400;font-size:1.6rem;
  letter-spacing:.12em;color:var(--teal);text-shadow:var(--gt);
  margin-bottom:6px}
.gs-sub{
  font-family:'Audiowide',sans-serif;font-size:.68rem;
  letter-spacing:.22em;color:rgba(127,255,212,.38);
  margin-bottom:34px}
.gs-divider{width:100%;height:1px;background:rgba(127,255,212,.1);margin-bottom:24px}
.gs-btn-quit{
  width:100%;padding:15px 0;margin-bottom:14px;
  background:transparent;border:2px solid var(--pink);
  color:var(--pink);font-family:'Fredoka One',sans-serif;
  font-size:1.05rem;letter-spacing:.12em;border-radius:var(--radius-btn);
  cursor:none;text-shadow:var(--gp);transition:all .2s;pointer-events:all}
.gs-btn-quit:hover{
  background:var(--pink);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(255,121,198,.5),0 6px 20px rgba(0,0,0,.4);
  transform:translateY(-2px)}
.gs-btn-resume{
  width:100%;padding:15px 0;
  background:transparent;border:2px solid rgba(127,255,212,.3);
  color:rgba(127,255,212,.45);font-family:'Fredoka One',sans-serif;
  font-size:.9rem;letter-spacing:.1em;border-radius:var(--radius-btn);
  cursor:none;transition:all .2s;pointer-events:all}
.gs-btn-resume:hover{
  border-color:var(--teal);color:var(--teal);
  box-shadow:0 0 14px rgba(127,255,212,.2)}
.gs-esc-hint{
  margin-top:18px;font-family:'VT323',monospace;
  font-size:1rem;letter-spacing:.18em;
  color:rgba(127,255,212,.2)}
#round-lbl{font-size:.85rem;letter-spacing:.16em;color:rgba(127,255,212,.45);
  padding:6px 16px;border:2px solid rgba(127,255,212,.12);border-radius:20px;font-family:'Audiowide',sans-serif}
#my-badge{font-size:.85rem;letter-spacing:.14em;color:rgba(127,255,212,.42);font-family:'Audiowide',sans-serif}

/* ── UNIT PANEL (bottom-left) ── */
#unit-panel{position:absolute;bottom:38px;left:18px;width:295px;
  background:var(--panel);border:2px solid rgba(127,255,212,.3);
  border-radius:20px;
  padding:16px 22px 18px;pointer-events:none;opacity:0;transition:opacity .2s;
  box-shadow:0 8px 32px rgba(0,0,0,.4)}
#unit-panel.vis{opacity:1}
.up-name{font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1.1rem;
  letter-spacing:.08em;color:var(--teal);text-shadow:var(--gt);margin-bottom:3px}
.up-name.pk{color:var(--pink);text-shadow:var(--gp)}
.up-type{font-size:.72rem;letter-spacing:.18em;color:rgba(127,255,212,.42);margin-bottom:13px;font-family:'Audiowide',sans-serif}
.up-stat-row{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.up-slbl{font-size:.68rem;letter-spacing:.08em;color:rgba(127,255,212,.42);width:30px;flex-shrink:0;font-family:'Audiowide',sans-serif}
.up-track{flex:1;height:6px;background:rgba(127,255,212,.08);border-radius:6px}
.up-fill{height:100%;background:var(--teal);box-shadow:0 0 6px var(--teal);
  transition:width .3s;border-radius:6px}
.up-fill.pk{background:var(--pink);box-shadow:0 0 6px var(--pink)}
.up-fill.gold{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.up-val{font-size:.72rem;color:rgba(127,255,212,.65);width:40px;text-align:right;flex-shrink:0}
.up-abilities{margin-top:11px;display:flex;flex-wrap:wrap;gap:5px}
.up-chip{font-size:.62rem;letter-spacing:.05em;padding:4px 10px;
  border:1px solid rgba(255,209,102,.35);color:rgba(255,209,102,.75);border-radius:16px;font-family:'Audiowide',sans-serif}

/* ── SCORE PANEL (bottom-right) ── */
#score-panel-wrap{position:absolute;bottom:38px;right:18px;display:flex;flex-direction:row;align-items:flex-end;gap:12px;pointer-events:none}
#score-panel{display:flex;flex-direction:column;gap:10px;pointer-events:none}
.score-card{display:flex;align-items:center;gap:14px;padding:12px 22px;
  background:rgba(26,10,46,.92);border:2px solid rgba(127,255,212,.2);
  border-radius:40px}
.score-card.pk{border-color:rgba(255,121,198,.25)}
.score-dot{width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:var(--gt);flex-shrink:0}
.score-dot.pk{background:var(--pink);box-shadow:var(--gp)}
.score-lbl{font-size:.78rem;letter-spacing:.1em;color:rgba(127,255,212,.55);font-family:'Fredoka One',sans-serif}
.score-lbl.pk{color:rgba(255,121,198,.55)}
.score-num{font-family:'VT323',monospace;font-size:2.3rem;color:var(--teal);
  text-shadow:var(--gt);margin-left:auto}
.score-num.pk{color:var(--pink);text-shadow:var(--gp)}

/* ── TURN QUEUE (left) ── */
#turn-queue{position:fixed;left:18px;top:80px;width:185px;z-index:400;
  pointer-events:none;display:flex;flex-direction:column;gap:5px}
#turn-queue.hidden{display:none}
.q-entry{display:flex;align-items:center;gap:9px;padding:8px 14px;
  background:rgba(26,10,46,.88);border-left:3px solid rgba(127,255,212,.25);
  font-size:.72rem;letter-spacing:.06em;color:rgba(127,255,212,.55);
  transition:all .2s;border-radius:0 14px 14px 0;font-family:'Audiowide',sans-serif}
.q-entry.cur{border-left-color:var(--teal);color:var(--teal);
  background:rgba(127,255,212,.08);text-shadow:var(--gt)}
.q-entry.pk{border-left-color:rgba(255,121,198,.35);color:rgba(255,121,198,.55)}
.q-entry.pk.cur{border-left-color:var(--pink);color:var(--pink);
  background:rgba(255,121,198,.08);text-shadow:var(--gp)}
.q-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.75}

/* ── COMBAT LOG (top-right) ── */
#combat-log{position:fixed;right:18px;top:8px;width:320px;z-index:400;
  pointer-events:none;display:flex;flex-direction:column;gap:3px;max-height:28vh;overflow:hidden}
.log-e{font-size:.7rem;letter-spacing:.05em;color:rgba(127,255,212,.6);
  background:rgba(26,10,46,.85);padding:6px 14px;border-left:3px solid rgba(127,255,212,.3);
  animation:logIn .2s both;border-radius:0 10px 10px 0;font-family:'Audiowide',sans-serif}
.log-e.dmg{border-left-color:var(--pink);color:rgba(255,121,198,.75)}
.log-e.heal{border-left-color:var(--gold);color:rgba(255,209,102,.75)}
.log-e.sys{border-left-color:rgba(139,232,253,.45);color:rgba(139,232,253,.65)}
@keyframes logIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* ── SPAWN OVERLAY ── */
#spawn-overlay{position:fixed;top:82px;left:50%;transform:translateX(-50%);
  z-index:600;text-align:center;pointer-events:none}
#spawn-overlay.hidden{display:none}
.spawn-title{font-family:'Righteous',cursive;font-weight:400;
  font-size:clamp(2rem,5vw,3.5rem);letter-spacing:.1em;
  color:var(--teal);text-shadow:var(--gt);margin-bottom:8px}
.spawn-sub{font-size:1rem;letter-spacing:.18em;color:rgba(127,255,212,.55);font-family:'Audiowide',sans-serif}

/* ── UNIT BANK ── */
#unit-bank{position:fixed;bottom:38px;left:50%;transform:translateX(-50%);
  z-index:601;display:flex;gap:10px;pointer-events:all}
#unit-bank.hidden{display:none}
.bank-slot{width:84px;background:rgba(26,10,46,.97);border:2px solid rgba(127,255,212,.3);
  padding:10px 8px 8px;cursor:none;transition:all .18s;text-align:center;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.bank-slot:hover{border-color:var(--teal);background:rgba(26,10,46,.97);transform:translateY(-4px)}
.bank-slot.sel{border-color:var(--teal);background:rgba(26,10,46,.97);
  box-shadow:0 0 22px rgba(127,255,212,.3)}
.bank-slot.placed{opacity:.2;pointer-events:none}
.bank-icon{display:flex;align-items:center;justify-content:center}
.bank-name{font-size:.65rem;letter-spacing:.05em;color:rgba(127,255,212,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Fredoka One',sans-serif;
  width:100%}
.bank-type{font-size:.55rem;letter-spacing:.08em;color:rgba(127,255,212,.42);font-family:'Audiowide',sans-serif}

/* ── ACTION MENU — position:absolute inside #v-battle, world→screen coords updated on pan/zoom ── */
#action-menu{
  position:absolute;z-index:500;display:none;flex-direction:column;gap:5px;pointer-events:all;
}
#action-menu.on{display:flex;animation:menuIn .22s cubic-bezier(.34,1.56,.64,1) both}
@keyframes menuIn{from{opacity:0;transform:scale(.85) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.am-header{background:rgba(26,10,46,.98);border:2px solid rgba(127,255,212,.38);
  border-bottom:1px solid rgba(127,255,212,.14);padding:12px 22px 10px;
  border-radius:18px 18px 6px 6px;min-width:252px}
.am-name{font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1.05rem;
  letter-spacing:.08em;color:var(--teal);text-shadow:var(--gt)}
.am-sub{font-size:.7rem;letter-spacing:.12em;color:rgba(127,255,212,.42);margin-top:2px;font-family:'Audiowide',sans-serif}
.am-btn{background:rgba(26,10,46,.98);border:2px solid rgba(127,255,212,.22);
  color:rgba(127,255,212,.92);font-family:'Fredoka One',sans-serif;
  font-size:.95rem;letter-spacing:.06em;padding:12px 20px;cursor:none;text-align:left;
  transition:all .14s;border-radius:12px;
  min-width:252px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.am-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.1),transparent);
  transition:left .28s;pointer-events:none}
.am-btn:hover::before{left:100%}
.am-btn:hover{border-color:var(--teal);color:var(--teal);background:rgba(26,10,46,.98);transform:translateX(4px)}
.am-btn:disabled{opacity:1;pointer-events:none;color:rgba(127,255,212,.18);border-color:rgba(127,255,212,.1);background:rgba(26,10,46,.98)}
.am-btn.ab:disabled{color:rgba(255,209,102,.18);border-color:rgba(255,209,102,.1)}
.am-btn.danger:disabled{color:rgba(255,121,198,.18);border-color:rgba(255,121,198,.1)}
.am-btn.danger{border-color:rgba(255,121,198,.25);color:rgba(255,121,198,.85)}
.am-btn.danger:hover{border-color:var(--pink);color:var(--pink);background:rgba(26,10,46,.98)}
.am-btn.ab{border-color:rgba(255,209,102,.25);color:rgba(255,209,102,.88)}
.am-btn.ab:hover{border-color:var(--gold);color:var(--gold);background:rgba(26,10,46,.98)}

.am-lbl{flex:1}
.am-cd{font-size:.65rem;color:rgba(255,209,102,.55);margin-left:auto;font-family:'Audiowide',sans-serif}

/* ── MATCH OVER ── */
#match-over{position:fixed;inset:0;z-index:900;display:none;align-items:center;
  justify-content:center;flex-direction:column;gap:18px;
  background:rgba(10,4,26,.92);backdrop-filter:blur(8px)}
#match-over.on{display:flex}
.mo-title{font-family:'Righteous',cursive;font-weight:400;
  font-size:clamp(3.5rem,10vw,8rem);letter-spacing:.1em;
  color:var(--teal);text-shadow:0 0 30px var(--teal),0 0 80px rgba(127,255,212,.4);
  animation:fadeDown .7s both}
.mo-title.defeat{color:var(--pink);text-shadow:0 0 30px var(--pink),0 0 80px rgba(255,121,198,.4)}
.mo-sub{font-family:'VT323',monospace;font-size:2.5rem;letter-spacing:.25em;
  color:rgba(127,255,212,.55);animation:fadeDown .7s .1s both;opacity:0}
.mo-btn{margin-top:12px;padding:18px 55px;background:transparent;border:2px solid var(--pink);
  color:var(--pink);font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1.2rem;
  letter-spacing:.12em;cursor:none;transition:all .18s;
  border-radius:50px;
  animation:fadeDown .7s .25s both;opacity:0;pointer-events:all}
.mo-btn:hover{background:var(--pink);color:var(--bg);
  box-shadow:0 0 30px rgba(255,121,198,.6),0 8px 24px rgba(0,0,0,.4);transform:translateY(-3px)}

/* ── SP BATTLE RESULTS PANEL ── */
#sp-results{position:fixed;inset:0;z-index:910;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.95);backdrop-filter:blur(10px)}
#sp-results.on{display:flex}
.sp-res-box{background:var(--bg-mid);border:2px solid rgba(127,255,212,.25);
  border-radius:28px;padding:36px 44px;width:min(520px,92vw);
  display:flex;flex-direction:column;align-items:center;gap:20px;
  animation:fadeDown .55s both}
.sp-res-title{font-family:'Righteous',cursive;font-weight:400;
  font-size:clamp(2.4rem,7vw,4.2rem);letter-spacing:.1em;
  color:var(--teal);text-shadow:var(--gt)}
.sp-res-title.defeat{color:var(--pink);text-shadow:var(--gp)}
.sp-res-sub{font-family:'VT323',monospace;font-size:1.6rem;letter-spacing:.3em;
  color:rgba(127,255,212,.45);margin-top:-12px}
.sp-res-cards{display:flex;flex-direction:column;gap:10px;width:100%}
.sp-res-card{display:flex;align-items:center;gap:14px;
  background:rgba(127,255,212,.04);border:1px solid rgba(127,255,212,.12);
  border-radius:14px;padding:12px 16px}
.sp-res-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.75rem;
  font-family:'Fredoka One',sans-serif;color:var(--teal)}
.sp-res-card[data-type="Melee"] .sp-res-icon{border-color:rgba(255,121,198,.5);color:var(--pink)}
.sp-res-card[data-type="Utility"] .sp-res-icon{border-color:rgba(255,209,102,.5);color:var(--gold)}
.sp-res-card[data-type="Support"] .sp-res-icon{border-color:rgba(139,232,253,.5);color:var(--blue)}
.sp-res-info{flex:1;min-width:0}
.sp-res-name{font-family:'Fredoka One',sans-serif;font-size:.95rem;letter-spacing:.06em;
  color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-res-card[data-type="Melee"] .sp-res-name{color:var(--pink)}
.sp-res-card[data-type="Utility"] .sp-res-name{color:var(--gold)}
.sp-res-card[data-type="Support"] .sp-res-name{color:var(--blue)}
.sp-res-kills{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.1em;
  color:rgba(127,255,212,.5);margin-top:2px}
.sp-res-xp-wrap{display:flex;flex-direction:column;gap:3px;width:110px;flex-shrink:0;align-items:flex-end}
.sp-res-xp-gain{font-family:'VT323',monospace;font-size:1.3rem;color:var(--blue);
  text-shadow:0 0 8px rgba(139,232,253,.5);letter-spacing:.06em}
.sp-res-xp-bar-track{width:100%;height:5px;background:rgba(139,232,253,.1);border-radius:4px;overflow:hidden}
.sp-res-xp-bar-fill{height:100%;border-radius:4px;
  background:linear-gradient(90deg,#8BE8FD,#BD93F9);
  box-shadow:0 0 6px rgba(139,232,253,.5);transition:width .6s ease}
.sp-res-lvl{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.12em;
  color:rgba(139,232,253,.55);margin-top:1px}
.sp-res-btn{padding:14px 44px;background:transparent;border:2px solid var(--teal);
  color:var(--teal);font-family:'Fredoka One',sans-serif;font-size:1.1rem;letter-spacing:.12em;
  cursor:none;border-radius:50px;transition:all .18s;margin-top:4px}
.sp-res-btn:hover{background:var(--teal);color:var(--bg);
  box-shadow:0 0 28px rgba(127,255,212,.5);transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════
   CAMPAIGN RESULTS OVERLAY
═══════════════════════════════════════════════════════ */
#camp-results{position:fixed;inset:0;z-index:912;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.95);backdrop-filter:blur(10px)}
#camp-results.on{display:flex}
.camp-res-box{background:var(--bg-mid);border:2px solid rgba(127,255,212,.25);
  border-radius:28px;padding:36px 44px;width:min(520px,92vw);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  animation:fadeDown .55s both}
.camp-res-title{font-family:'Righteous',cursive;font-weight:400;
  font-size:clamp(2.4rem,7vw,4.2rem);letter-spacing:.1em;
  color:var(--teal);text-shadow:0 0 16px rgba(127,255,212,.35)}
.camp-res-title.defeat{color:var(--pink);text-shadow:var(--gp)}
.camp-res-sub{font-family:'VT323',monospace;font-size:1.6rem;letter-spacing:.3em;
  color:rgba(127,255,212,.55);margin-top:-10px}
.camp-res-sub.defeat{color:rgba(255,121,198,.5)}
.camp-res-stage{font-family:'Audiowide',sans-serif;font-size:.65rem;letter-spacing:.2em;
  color:rgba(127,255,212,.4);border:1px solid rgba(127,255,212,.2);
  padding:4px 16px;border-radius:20px;background:rgba(127,255,212,.04)}
.camp-res-xp-award{display:flex;align-items:center;gap:10px;
  background:rgba(255,209,102,.06);border:1px solid rgba(255,209,102,.2);
  border-radius:14px;padding:10px 20px;width:100%;justify-content:center}
.camp-res-xp-icon{font-size:1.4rem}
.camp-res-xp-text{font-family:'VT323',monospace;font-size:1.8rem;color:var(--teal);
  text-shadow:var(--gg);letter-spacing:.1em}
.camp-res-xp-label{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.15em;
  color:rgba(255,209,102,.5);margin-top:2px}
.camp-res-cards{display:flex;flex-direction:column;gap:10px;width:100%}
.camp-res-btns{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:4px}
.camp-res-btn{padding:14px 44px;background:transparent;border:2px solid var(--teal);
  color:var(--teal);font-family:'Fredoka One',sans-serif;font-size:1.1rem;letter-spacing:.12em;
  cursor:none;border-radius:50px;transition:all .18s;width:100%;text-align:center}
.camp-res-btn:hover{background:var(--teal);color:var(--bg);
  box-shadow:0 0 28px rgba(127,255,212,.4);transform:translateY(-2px)}
.camp-res-btn.dim{border-color:rgba(127,255,212,.3);color:rgba(127,255,212,.5)}
.camp-res-btn.dim:hover{background:rgba(127,255,212,.12);color:var(--teal);transform:translateY(-1px);
  box-shadow:none}

/* ── COMBAT EFFECTS ── */
/* Shield defend — SVG overlay on the unit's own hex */
.shield-effect{
  position:absolute;pointer-events:none;z-index:600;
  animation:shieldAnim .55s cubic-bezier(.22,.68,0,1.1) both}
@keyframes shieldAnim{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.3)}
  35% {opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  70% {opacity:.9;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}

/* Melee slash — SVG overlay on the hex */
.slash-effect{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:600;
  animation:slashAnim .42s cubic-bezier(.22,.68,0,1.1) both;
}
@keyframes slashAnim{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-30deg)}
  25% {opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(8deg)}
  65% {opacity:.9;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(5deg)}
}

/* Ranged bullet — absolutely positioned div that flies across the map-world */
.bullet-effect{
  position:absolute;pointer-events:none;z-index:601;
  border-radius:50%;
  transition:none;
}
@keyframes bulletTrail{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  85% {opacity:1;transform:translate(-50%,-50%) scale(.8)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
}

/* ── CONN BADGE ── */
#conn-badge{position:fixed;top:80px;left:210px;z-index:500;padding:7px 18px;
  background:rgba(26,10,46,.94);border:2px solid rgba(255,121,198,.42);
  font-size:.78rem;letter-spacing:.1em;color:rgba(255,121,198,.88);
  border-radius:30px;transition:all .3s;font-family:'Audiowide',sans-serif}
#conn-badge.ok{border-color:rgba(127,255,212,.42);color:rgba(127,255,212,.88)}
#conn-badge.hidden{display:none}

/* ═══════════════════════════════════════════════════════
   MOBILE — screens narrower than 600px
   Same layout as desktop, just scaled down to fit.
   Nothing hidden except the custom cursor.
═══════════════════════════════════════════════════════ */
@media (max-width:600px){
  /* Hide custom cursor — not relevant on touch */
  #cursor{display:none}

  /* ── Top HUD bar: slimmer ── */
  #b-top{height:44px;padding:0 8px}
  .hud-pill{padding:5px 10px;gap:6px;border-radius:30px}
  .turn-dot{width:9px;height:9px}
  #turn-label{font-size:.72rem;letter-spacing:.04em}
  #turn-timer{font-size:1.6rem;min-width:46px;padding:1px 8px;border-radius:20px}
  #round-lbl{font-size:.6rem;padding:4px 10px;letter-spacing:.08em}
  #my-badge{font-size:.6rem;letter-spacing:.06em}

  /* ── Turn queue: left side, narrower + smaller text ── */
  #turn-queue{left:6px;top:50px;width:108px;gap:3px}
  .q-entry{padding:4px 8px;font-size:.56rem;gap:5px;border-radius:0 10px 10px 0}
  .q-dot{width:6px;height:6px}

  /* ── Combat log: right side, narrower + smaller text ── */
  #combat-log{right:6px;top:6px;width:160px;max-height:28vh;gap:2px}
  .log-e{font-size:.54rem;padding:4px 8px;border-radius:0 7px 7px 0}

  /* ── Unit panel: bottom-left, compact ── */
  #unit-panel{
    left:6px !important;
    bottom:36px !important;
    width:155px !important;
    padding:10px 12px 12px !important;
  }
  .up-name{font-size:.82rem}
  .up-type{font-size:.58rem;margin-bottom:8px}
  .up-stat-row{gap:5px;margin-bottom:4px}
  .up-slbl{font-size:.54rem;width:24px}
  .up-track{height:4px}
  .up-val{font-size:.56rem;width:30px}
  .up-abilities{margin-top:7px;gap:3px}
  .up-chip{font-size:.5rem;padding:2px 6px}

  /* ── Score panel: bottom-right, compact ── */
  #score-panel-wrap{bottom:36px;right:6px;gap:8px}
  #score-panel{gap:5px}
  .score-card{padding:6px 12px;gap:8px;border-radius:28px}
  .score-dot{width:8px;height:8px}
  .score-lbl{font-size:.6rem}
  .score-num{font-size:1.6rem}

  /* ── Unit bank (spawn): smaller tiles ── */
  .bank-slot{width:62px;padding:7px 5px 5px}
  .bank-name{font-size:.55rem}
  .bank-type{font-size:.46rem}

  /* ── Status bar ── */
  #sbar{font-size:.58rem;padding:0 8px}

  /* ── Conn badge ── */
  #conn-badge{left:8px;top:50px;font-size:.62rem;padding:4px 12px}

  /* ── Roster screen ── */
  .roster-top{padding:10px 14px 8px}
  .roster-title{font-size:1.2rem}
  .slot{min-width:155px;flex:0 0 155px}
  .slot-icon{padding:10px 8px 4px}
  .slot-icon-inner{width:52px;height:52px}

  /* ── Armory chrome: shrink the header and tabs ── */
  .armory-top{padding:10px 14px 8px}
  .armory-title{font-size:1.2rem}
  .armory-sub{font-size:.65rem;margin-top:1px}
  .armory-tabs{padding:0 8px}
  .armory-tab{padding:9px 12px;font-size:.78rem;letter-spacing:.06em}

  /* ── Roster section: kill the armory-section padding so slots sit flush ── */
  #armory-roster{padding:0}

  /* ── Scroll buttons: tighten bottom breathing room ── */
  .roster-bottom{padding:14px 14px 38px}
  .scroll-arrow-btn{width:42px;height:42px;font-size:1.2rem}

  /* ── Action menu ── */
  .am-header{padding:8px 14px 7px;min-width:160px;border-radius:12px 12px 4px 4px}
  .am-name{font-size:.78rem}
  .am-sub{font-size:.55rem;margin-top:1px}
  .am-btn{padding:8px 12px;min-width:160px;font-size:.72rem;gap:8px;border-radius:8px}

  .am-cd{font-size:.52rem}
  #action-menu{gap:3px}
}

/* ═══════════════════════════════════════════════════════
   VIEW: SETTINGS
═══════════════════════════════════════════════════════ */
#v-settings{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0}

.settings-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(189,147,249,.15);flex-shrink:0}
.settings-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--purple);text-shadow:var(--gpur)}
.settings-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(189,147,249,.45);
  margin-top:3px;font-family:'Audiowide',sans-serif}

.settings-tabs{display:flex;gap:0;flex-shrink:0;border-bottom:2px solid rgba(189,147,249,.12);
  padding:0 30px;overflow-x:auto;scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tab{padding:14px 28px;font-family:'Fredoka One',sans-serif;font-size:.95rem;
  letter-spacing:.1em;color:rgba(189,147,249,.45);cursor:none;
  border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .18s,border-color .18s;white-space:nowrap;background:transparent;
  border-top:none;border-left:none;border-right:none}
.settings-tab:hover{color:rgba(189,147,249,.8)}
.settings-tab.active{color:var(--purple);text-shadow:var(--gpur);border-bottom-color:var(--purple)}

.settings-body{flex:1;overflow:hidden;position:relative}
.settings-section{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;
  padding:32px 30px 60px;scrollbar-width:thin;scrollbar-color:rgba(189,147,249,.2) transparent}
.settings-section.active{display:flex}
.settings-section-title{font-family:'Audiowide',sans-serif;font-size:.72rem;letter-spacing:.22em;
  color:rgba(189,147,249,.4);margin-bottom:24px;padding-bottom:10px;
  border-bottom:1px solid rgba(189,147,249,.1)}

/* ── Setting rows ── */
.setting-row{display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-card);border:2px solid rgba(189,147,249,.15);
  border-radius:16px;padding:20px 24px;margin-bottom:14px;gap:24px;
  transition:border-color .2s}
.setting-row:hover{border-color:rgba(189,147,249,.35)}
.setting-row-info{flex:1}
.setting-row-label{font-family:'Fredoka One',sans-serif;font-size:1rem;letter-spacing:.08em;
  color:var(--purple);text-shadow:0 0 8px rgba(189,147,249,.3);margin-bottom:4px}
.setting-row-desc{font-family:'Audiowide',sans-serif;font-size:.65rem;letter-spacing:.1em;
  color:rgba(189,147,249,.4);line-height:1.5}

/* ── Volume slider ── */
.setting-slider-wrap{display:flex;align-items:center;gap:14px;flex-shrink:0;min-width:200px}
.setting-slider{-webkit-appearance:none;appearance:none;width:160px;height:6px;
  border-radius:6px;outline:none;cursor:none;
  background:rgba(189,147,249,.15)}
.setting-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--purple);box-shadow:0 0 10px rgba(189,147,249,.6);
  cursor:none;border:2px solid rgba(189,147,249,.8);transition:transform .12s}
.setting-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.setting-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--purple);box-shadow:0 0 10px rgba(189,147,249,.6);
  cursor:none;border:2px solid rgba(189,147,249,.8)}
.setting-vol-val{font-family:'VT323',monospace;font-size:1.5rem;color:var(--purple);
  text-shadow:var(--gpur);letter-spacing:.06em;width:40px;text-align:right;line-height:1}

/* ── Mute toggle button ── */
.setting-mute-btn{padding:10px 22px;background:transparent;
  border:2px solid rgba(189,147,249,.35);color:rgba(189,147,249,.8);
  font-family:'Fredoka One',sans-serif;font-size:.9rem;letter-spacing:.1em;
  cursor:none;border-radius:30px;transition:all .18s;white-space:nowrap;flex-shrink:0}
.setting-mute-btn:hover{border-color:var(--purple);color:var(--purple);background:rgba(189,147,249,.08)}
.setting-mute-btn.muted{border-color:var(--pink);color:var(--pink);background:rgba(255,121,198,.08)}
.setting-mute-btn.muted:hover{background:rgba(255,121,198,.14)}

/* ── Coming soon placeholder rows ── */
.setting-coming{display:inline-flex;align-items:center;gap:6px;
  font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.15em;
  color:rgba(189,147,249,.3)}
.setting-coming::before{content:'';width:5px;height:5px;border-radius:50%;
  background:rgba(189,147,249,.25);flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   VIEW: SHOP
═══════════════════════════════════════════════════════ */
#v-shop{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0}

/* ── Top bar ── */
.shop-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(255,209,102,.12);flex-shrink:0}
.shop-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--gold);text-shadow:var(--gg)}
.shop-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(255,209,102,.45);margin-top:3px;font-family:'Audiowide',sans-serif}

/* ── Submenu tabs (like armory-tabs but gold) ── */
.shop-tabs{display:flex;gap:0;flex-shrink:0;border-bottom:2px solid rgba(255,209,102,.12);
  overflow-x:auto;scrollbar-width:none}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tab{padding:14px 28px;font-family:'Fredoka One',sans-serif;font-size:.95rem;
  letter-spacing:.1em;color:rgba(255,209,102,.4);background:transparent;border:none;
  border-bottom:3px solid transparent;margin-bottom:-2px;cursor:none;
  transition:color .18s,border-bottom-color .18s;white-space:nowrap}
.shop-tab:hover{color:rgba(255,209,102,.8)}
.shop-tab.active{color:var(--gold);text-shadow:var(--gg);border-bottom-color:var(--gold)}

/* ── Body / sections ── */
.shop-body{flex:1;overflow:hidden;position:relative}
.shop-section{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;
  padding:24px 30px 80px;scrollbar-width:thin;scrollbar-color:rgba(255,209,102,.2) transparent}
.shop-section.active{display:flex}
.shop-section-title{font-family:'Audiowide',sans-serif;font-size:.72rem;letter-spacing:.22em;
  color:rgba(255,209,102,.35);margin-bottom:20px;padding-bottom:10px;
  border-bottom:1px solid rgba(255,209,102,.08)}

/* ── Purchase cards grid (like slot cards) ── */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;width:100%}

/* ── Individual card (mirrors .slot / armory-bg-card style) ── */
.shop-card{background:var(--bg-card);border:2px solid rgba(255,209,102,.22);
  border-radius:var(--radius-card);display:flex;flex-direction:column;cursor:none;
  transition:border-color .22s,background .22s,transform .15s,box-shadow .22s;
  position:relative;overflow:hidden}
.shop-card:hover{border-color:rgba(255,209,102,.6);background:rgba(255,209,102,.04);
  transform:translateY(-4px);box-shadow:0 12px 40px rgba(255,209,102,.15)}
.shop-card.owned-card{border-color:rgba(127,255,212,.35)}
.shop-card.owned-card:hover{border-color:rgba(127,255,212,.65)}

/* Card preview area (like armory-bg-preview) */
.shop-card-preview{height:110px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 40% 40%,rgba(255,209,102,.07),transparent 70%);
  border-bottom:1px solid rgba(255,209,102,.1)}
.shop-card-preview .card-icon{font-size:3rem;filter:drop-shadow(0 0 12px rgba(255,209,102,.6))}

/* Card info area */
.shop-card-info{padding:14px 16px 12px;display:flex;flex-direction:column;flex:1}
.shop-card-name{font-family:'Fredoka One',sans-serif;font-size:.95rem;letter-spacing:.07em;
  color:var(--gold);text-shadow:0 0 8px rgba(255,209,102,.4);margin-bottom:4px}
.shop-card-category{font-size:.6rem;letter-spacing:.18em;color:rgba(255,209,102,.4);
  font-family:'Audiowide',sans-serif;margin-bottom:8px}
.shop-card-desc{font-size:.67rem;letter-spacing:.04em;color:rgba(255,209,102,.5);
  line-height:1.6;font-family:'Audiowide',sans-serif;flex:1;margin-bottom:10px}

/* Card footer */
.shop-card-footer{display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,209,102,.1)}
.shop-card-price{font-family:'VT323',monospace;font-size:1.5rem;color:var(--gold);
  text-shadow:var(--gg);letter-spacing:.06em;line-height:1}
.shop-card-price.free{color:var(--teal);text-shadow:var(--gt)}
.shop-card-owned-lbl{font-size:.6rem;letter-spacing:.12em;color:rgba(127,255,212,.6);
  font-family:'Audiowide',sans-serif}
.shop-buy-btn{padding:8px 18px;background:transparent;
  border:2px solid rgba(255,209,102,.4);
  color:rgba(255,209,102,.9);font-family:'Fredoka One',sans-serif;font-size:.82rem;
  letter-spacing:.08em;cursor:none;transition:all .15s;border-radius:30px;white-space:nowrap}
.shop-buy-btn:hover{border-color:var(--gold);color:var(--bg);background:var(--gold);
  box-shadow:0 0 22px rgba(255,209,102,.45);transform:scale(1.04)}
.shop-buy-btn.owned{border-color:rgba(127,255,212,.4);color:var(--teal);
  background:rgba(127,255,212,.06);pointer-events:none}
.shop-buy-btn.owned:hover{background:rgba(127,255,212,.06);color:var(--teal);
  box-shadow:none;transform:none}

/* "Coming soon" tag */
.shop-card-coming{display:inline-flex;align-items:center;gap:6px;
  font-family:'Audiowide',sans-serif;font-size:.6rem;letter-spacing:.15em;
  color:rgba(255,209,102,.35);margin-top:6px}
.shop-card-coming::before{content:'';width:5px;height:5px;border-radius:50%;
  background:rgba(255,209,102,.3);flex-shrink:0}

/* Toast */
.shop-toast{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);
  background:rgba(26,10,46,.97);border:2px solid var(--gold);border-radius:30px;
  padding:12px 30px;font-family:'Fredoka One',sans-serif;font-size:1rem;
  letter-spacing:.1em;color:var(--gold);text-shadow:var(--gg);
  z-index:9500;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.shop-toast.show{opacity:1}

/* Legacy scroll arrows (kept for JS compat) */
.shop-bottom{display:none}
.shop-arrow-btn{display:none}
.shop-scroll{display:none}

/* ── MAP BACKGROUND (purchased cosmetics) ── */
#map-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s}
#map-bg.active{opacity:1}
#map-bg svg,#map-bg img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
#map-bg .bg-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Audiowide',sans-serif;font-size:.85rem;letter-spacing:.2em;
  color:rgba(189,147,249,.35)}

/* pegasus glow pulse */
@keyframes pegasusFloat{
  0%,100%{transform:translateY(0px) rotate(-2deg)}
  50%{transform:translateY(-14px) rotate(2deg)}
}
@keyframes wingFlap{
  0%,100%{transform-origin:center;transform:scaleX(1) skewY(0deg)}
  30%{transform:scaleX(1.18) skewY(-5deg)}
  60%{transform:scaleX(0.88) skewY(4deg)}
}
@keyframes starTwinkle{
  0%,100%{opacity:.7;r:1.2}
  50%{opacity:.15;r:.5}
}
@keyframes nebulaShift{
  0%,100%{opacity:.18}
  50%{opacity:.32}
}
#pegasus-body{animation:pegasusFloat 5s ease-in-out infinite}
#pegasus-lwing{animation:wingFlap 1.1s ease-in-out infinite}
#pegasus-rwing{animation:wingFlap 1.1s ease-in-out infinite .55s}
.bg-star{animation:starTwinkle var(--dur,3s) ease-in-out infinite var(--delay,0s)}
.bg-nebula{animation:nebulaShift 7s ease-in-out infinite}

/* shop item owned badge — handled in .shop-buy-btn.owned above */

/* ═══════════════════════════════════════════════════════
   VIEW: ARMORY
═══════════════════════════════════════════════════════ */
#v-armory{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0}

/* ── Top bar ── */
.armory-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(189,147,249,.15);flex-shrink:0}
.armory-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--purple);text-shadow:var(--gpur)}
.armory-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(189,147,249,.45);
  margin-top:3px;font-family:'Audiowide',sans-serif}

/* ── Section tab bar ── */
.armory-tabs{display:flex;gap:0;flex-shrink:0;border-bottom:2px solid rgba(189,147,249,.12);
  padding:0 30px;overflow-x:auto;scrollbar-width:none}
.armory-tabs::-webkit-scrollbar{display:none}
.armory-tab{padding:14px 28px;font-family:'Fredoka One',sans-serif;font-size:.95rem;
  letter-spacing:.1em;color:rgba(189,147,249,.45);cursor:none;
  border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .18s,border-color .18s;white-space:nowrap;background:transparent;border-top:none;border-left:none;border-right:none}
.armory-tab:hover{color:rgba(189,147,249,.8)}
.armory-tab.active{color:var(--purple);text-shadow:var(--gpur);border-bottom-color:var(--purple)}

/* ── Body ── */
.armory-body{flex:1;overflow:hidden;position:relative}
.armory-section{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;
  padding:28px 30px 40px;scrollbar-width:thin;scrollbar-color:rgba(189,147,249,.2) transparent}
.armory-section.active{display:flex}
.armory-section-title{font-family:'Audiowide',sans-serif;font-size:.72rem;letter-spacing:.22em;
  color:rgba(189,147,249,.4);margin-bottom:20px;padding-bottom:10px;
  border-bottom:1px solid rgba(189,147,249,.1)}

/* ── UNIT SKINS section — 2x2 grid that fills the whole panel, no scroll ── */
#armory-units{}
.armory-unit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.armory-unit-card{background:var(--bg-card);border:2px solid rgba(189,147,249,.15);
  border-radius:var(--radius-card);padding:44px 32px;cursor:none;
  transition:border-color .2s,transform .15s;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:28px}
.armory-unit-card:hover{border-color:rgba(189,147,249,.45);transform:translateY(-2px)}

/* Unit preview shape — reuses game's .unit-body classes */
.armory-unit-preview{width:64px;height:64px;position:relative;flex-shrink:0}
.armory-unit-preview .unit-body{width:100%;height:100%;box-shadow:none;}

.armory-unit-info{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.armory-unit-name{font-family:'Fredoka One',sans-serif;font-size:.9rem;letter-spacing:.07em;
  color:var(--purple)}
.armory-unit-type{font-size:.65rem;letter-spacing:.18em;color:rgba(189,147,249,.45);
  font-family:'Audiowide',sans-serif}

.armory-skin-row{display:flex;gap:10px;flex-wrap:nowrap;justify-content:center}
.armory-skin-chip{padding:7px 16px;background:transparent;border:2px solid rgba(189,147,249,.2);
  color:rgba(189,147,249,.5);font-family:'Fredoka One',sans-serif;font-size:.78rem;
  letter-spacing:.08em;cursor:none;border-radius:30px;transition:all .15s;white-space:nowrap}
.armory-skin-chip:hover{border-color:rgba(189,147,249,.55);color:var(--purple);background:rgba(189,147,249,.06)}
.armory-skin-chip.active-skin{border-color:var(--purple);color:var(--purple);
  background:rgba(189,147,249,.12);text-shadow:0 0 8px rgba(189,147,249,.4)}
.armory-unit-card .coming-tag{position:absolute;top:12px;right:12px;
  font-size:.58rem;letter-spacing:.12em;color:rgba(189,147,249,.35);
  font-family:'Audiowide',sans-serif;border:1px solid rgba(189,147,249,.18);
  padding:3px 8px;border-radius:10px}

/* ── BACKGROUNDS section ── */
.armory-bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;max-width:900px;margin:0 auto;width:100%}
.armory-bg-card{background:var(--bg-card);border:2px solid rgba(189,147,249,.18);
  border-radius:var(--radius-card);overflow:hidden;cursor:none;
  transition:border-color .2s,transform .15s,box-shadow .2s;position:relative}
.armory-bg-card:hover{border-color:rgba(189,147,249,.5);transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(189,147,249,.12)}
.armory-bg-card.active-bg{border-color:var(--purple);box-shadow:0 0 24px rgba(189,147,249,.3)}
.armory-bg-card.active-bg .armory-bg-equip{background:var(--purple);color:var(--bg);border-color:var(--purple)}
.armory-bg-preview{height:120px;display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;position:relative;overflow:hidden}
.armory-bg-preview.space{background:radial-gradient(ellipse at 40% 40%,#2D0B5A,#0D0820)}
.armory-bg-preview.void{background:#050108}
.armory-bg-info{padding:14px 16px 12px}
.armory-bg-name{font-family:'Fredoka One',sans-serif;font-size:.9rem;letter-spacing:.07em;
  color:var(--purple);margin-bottom:4px}
.armory-bg-desc{font-size:.65rem;letter-spacing:.05em;color:rgba(189,147,249,.45);
  font-family:'Audiowide',sans-serif;line-height:1.55;margin-bottom:10px}
.armory-bg-footer{display:flex;align-items:center;justify-content:space-between}
.armory-bg-lock{font-size:.65rem;letter-spacing:.1em;color:rgba(255,209,102,.55);
  font-family:'Audiowide',sans-serif}
.armory-bg-equip{padding:7px 18px;background:transparent;border:2px solid rgba(189,147,249,.35);
  color:rgba(189,147,249,.8);font-family:'Fredoka One',sans-serif;font-size:.78rem;
  letter-spacing:.08em;cursor:none;border-radius:30px;transition:all .15s}
.armory-bg-equip:hover{border-color:var(--purple);color:var(--purple);background:rgba(189,147,249,.08)}
.armory-bg-equip:disabled{opacity:.25;pointer-events:none}
.armory-bg-equip.purchase-btn{border-color:rgba(255,209,102,.55);color:var(--gold);text-shadow:var(--gg)}
.armory-bg-equip.purchase-btn:hover{border-color:var(--gold);color:var(--bg);background:var(--gold);box-shadow:0 0 20px rgba(255,209,102,.5)}
.armory-bg-star{position:absolute;border-radius:50%;background:white}

/* ── ABILITY SKINS section ── */
.armory-ability-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;max-width:900px;margin:0 auto;width:100%}
.armory-ability-card{background:var(--bg-card);border:2px solid rgba(189,147,249,.15);
  border-radius:var(--radius-card);padding:20px 18px;cursor:none;
  transition:border-color .2s,transform .15s;position:relative}
.armory-ability-card:hover{border-color:rgba(189,147,249,.45);transform:translateY(-2px)}
.armory-ability-icon{font-size:2rem;margin-bottom:10px}
.armory-ability-name{font-family:'Fredoka One',sans-serif;font-size:.88rem;letter-spacing:.07em;
  color:var(--purple);margin-bottom:5px}
.armory-ability-desc{font-size:.65rem;letter-spacing:.04em;color:rgba(189,147,249,.4);
  font-family:'Audiowide',sans-serif;line-height:1.5}

/* ── MENU UI section ── */
.armory-ui-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:780px;margin:0 auto;width:100%}
.armory-ui-card{background:var(--bg-card);border:2px solid rgba(189,147,249,.15);
  border-radius:var(--radius-card);padding:22px 20px;cursor:none;
  transition:border-color .2s,transform .15s;position:relative}
.armory-ui-card:hover{border-color:rgba(189,147,249,.45);transform:translateY(-2px)}
.armory-ui-preview{height:70px;border-radius:12px;margin-bottom:14px;display:flex;
  align-items:center;justify-content:center;gap:8px;font-size:.75rem;
  font-family:'Audiowide',sans-serif;letter-spacing:.1em;overflow:hidden;position:relative}
.armory-ui-name{font-family:'Fredoka One',sans-serif;font-size:.9rem;letter-spacing:.07em;
  color:var(--purple);margin-bottom:5px}
.armory-ui-desc{font-size:.65rem;letter-spacing:.04em;color:rgba(189,147,249,.4);
  font-family:'Audiowide',sans-serif;line-height:1.5}

/* coming soon pill — shared */
.armory-coming{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:5px 14px;border:1px solid rgba(189,147,249,.2);border-radius:20px;
  font-size:.62rem;letter-spacing:.12em;color:rgba(189,147,249,.4);
  font-family:'Audiowide',sans-serif}
.armory-coming::before{content:'';width:6px;height:6px;border-radius:50%;
  background:rgba(189,147,249,.4);flex-shrink:0;animation:blink 2s infinite}

/* ═══════════════════════════════════════════════════════
   VIEW: LOGIN
═══════════════════════════════════════════════════════ */
#v-login{background:transparent;z-index:20}

.login-box{
  background:var(--bg-mid);border:2px solid rgba(127,255,212,.22);
  border-radius:var(--radius-panel);padding:40px 44px 36px;
  width:min(420px,92vw);display:flex;flex-direction:column;align-items:center;gap:0;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 40px rgba(127,255,212,.06)}

.login-logo{font-family:'Righteous',cursive;font-weight:400;font-size:2rem;
  letter-spacing:.1em;color:var(--teal);text-shadow:var(--gt);margin-bottom:4px}
.login-tagline{font-family:'VT323',monospace;font-size:1.1rem;letter-spacing:.4em;
  color:rgba(127,255,212,.4);margin-bottom:32px}

/* Tab toggle: LOG IN / CREATE ACCOUNT */
.login-tabs{display:flex;width:100%;margin-bottom:28px;
  border:2px solid rgba(127,255,212,.18);border-radius:40px;overflow:hidden}
.login-tab-btn{flex:1;padding:11px 0;background:transparent;border:none;
  font-family:'Fredoka One',sans-serif;font-size:.9rem;letter-spacing:.1em;
  color:rgba(127,255,212,.4);cursor:none;transition:all .2s}
.login-tab-btn.active{background:rgba(127,255,212,.12);color:var(--teal);text-shadow:var(--gt)}

/* Fields */
.login-field{width:100%;margin-bottom:14px;position:relative}
.login-input{width:100%;background:rgba(127,255,212,.04);
  border:2px solid rgba(127,255,212,.22);color:var(--teal);
  font-family:'Fredoka One',sans-serif;font-size:1rem;letter-spacing:.08em;
  padding:14px 20px;outline:none;border-radius:30px;transition:border-color .2s}
.login-input:focus{border-color:var(--teal);box-shadow:0 0 16px rgba(127,255,212,.2)}
.login-input::placeholder{color:rgba(127,255,212,.22)}

/* Error message */
.login-error{width:100%;text-align:center;font-family:'Audiowide',sans-serif;
  font-size:.72rem;letter-spacing:.1em;color:var(--pink);text-shadow:var(--gp);
  min-height:22px;margin-bottom:10px;transition:opacity .2s}

/* Primary action button */
.login-btn{width:100%;padding:15px;background:transparent;
  border:2px solid var(--teal);color:var(--teal);
  font-family:'Fredoka One',sans-serif;font-size:1rem;letter-spacing:.12em;
  cursor:none;border-radius:40px;transition:all .2s;text-shadow:var(--gt);
  position:relative;overflow:hidden;margin-bottom:12px}
.login-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.18),transparent);transition:left .35s}
.login-btn:hover::before{left:100%}
.login-btn:hover{background:var(--teal);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(127,255,212,.5)}
.login-btn:disabled{opacity:.3;pointer-events:none}

/* Guest link */
.login-guest{background:transparent;border:none;color:rgba(127,255,212,.35);
  font-family:'Audiowide',sans-serif;font-size:.72rem;letter-spacing:.12em;
  cursor:none;padding:8px 0;transition:color .2s;text-decoration:none;display:block;text-align:center}
.login-guest:hover{color:rgba(127,255,212,.7)}

/* Main-menu login / logout button — always half the menu width */
#menu-auth-btn{
  width:50%;align-self:center;
  padding:9px 0;background:transparent;
  border:2px solid rgba(127,255,212,.28);border-radius:var(--radius-btn);
  font-family:'Fredoka One',sans-serif;font-size:.92rem;letter-spacing:.12em;
  color:rgba(127,255,212,.55);cursor:none;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden}
#menu-auth-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.14),transparent);transition:left .35s}
#menu-auth-btn:hover::before{left:100%}
#menu-auth-btn:hover{background:rgba(127,255,212,.1);border-color:rgba(127,255,212,.6);color:var(--teal);
  box-shadow:0 0 20px rgba(127,255,212,.25);transform:translateY(-2px)}
/* Logged-in state — becomes a pink LOG OUT button */
#menu-auth-btn.logged-in{border-color:rgba(255,121,198,.45);color:rgba(255,121,198,.75)}
#menu-auth-btn.logged-in::before{background:linear-gradient(90deg,transparent,rgba(255,121,198,.14),transparent)}
#menu-auth-btn.logged-in:hover{background:var(--pink);color:var(--bg);
  border-color:var(--pink);box-shadow:0 0 28px rgba(255,121,198,.5);text-shadow:none}

/* Status bar user chip */
#sbar-user{display:flex;align-items:center;gap:6px;
  font-family:'Audiowide',sans-serif;letter-spacing:.1em;color:rgba(127,255,212,.45)}
#sbar-user .sbar-udot{display:none;width:7px;height:7px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 6px var(--teal);flex-shrink:0;animation:blink 2s infinite}
#sbar-user.logged-in{color:var(--teal);text-shadow:0 0 8px rgba(127,255,212,.4)}
#sbar-user.logged-in .sbar-udot{display:inline-block}

/* No units guard modal */
#no-units-guard{position:fixed;inset:0;z-index:9200;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,20,.82);backdrop-filter:blur(4px)}
#no-units-guard.on{display:flex}
/* Store purchase guard modal */
#login-guard{position:fixed;inset:0;z-index:9200;display:none;align-items:center;
  justify-content:center;background:rgba(10,4,26,.85);backdrop-filter:blur(6px)}
#login-guard.on{display:flex}
.guard-box{background:var(--bg-mid);border:2px solid rgba(255,121,198,.3);
  border-radius:var(--radius-panel);padding:36px 40px;width:min(380px,90vw);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.guard-title{font-family:'Righteous',cursive;font-size:1.5rem;letter-spacing:.1em;
  color:var(--pink);text-shadow:var(--gp)}
.guard-sub{font-family:'Audiowide',sans-serif;font-size:.75rem;letter-spacing:.1em;
  color:rgba(127,255,212,.55);line-height:1.6}
.guard-btns{display:flex;gap:12px;margin-top:6px}

/* ═══════════════════════════════════════════════════
   RAID BOSS HUD
═══════════════════════════════════════════════════ */
#raid-boss-hud{
  position:fixed;top:52px;left:50%;transform:translateX(-50%);
  z-index:700;pointer-events:none;
  display:none;flex-direction:column;align-items:center;gap:4px;
  min-width:320px;
}
#raid-boss-hud.on{display:flex}
.rbhud-name{
  font-family:'Righteous',cursive;font-weight:400;font-size:1.5rem;
  letter-spacing:.14em;color:#FF6B35;
  text-shadow:0 0 18px rgba(255,107,53,.8),0 0 40px rgba(255,107,53,.4);
  animation:bossFlicker 4s infinite;
}
@keyframes bossFlicker{0%,95%,100%{opacity:1}96%{opacity:.3}98%{opacity:.7}}
.rbhud-bar-track{
  width:320px;height:14px;
  background:rgba(255,107,53,.08);
  border:1.5px solid rgba(255,107,53,.35);
  border-radius:8px;overflow:hidden;
  box-shadow:0 0 12px rgba(255,107,53,.2);
}
.rbhud-bar-fill{
  height:100%;width:100%;
  background:linear-gradient(90deg,#FF3333,#FF6B35,#FFB347);
  box-shadow:0 0 10px rgba(255,107,53,.7);
  border-radius:8px;
  transition:width .5s ease;
}
.rbhud-hp-text{
  font-family:'VT323',monospace;font-size:1.1rem;letter-spacing:.12em;
  color:rgba(255,107,53,.8);text-shadow:0 0 8px rgba(255,107,53,.5);
}
/* Beam attack visual */
@keyframes beamPulse{
  0%{opacity:0;stroke-width:4}
  20%{opacity:1;stroke-width:14}
  80%{opacity:.8;stroke-width:10}
  100%{opacity:0;stroke-width:2}
}
.raid-beam-svg{
  position:absolute;top:0;left:0;pointer-events:none;z-index:600;overflow:visible;
}
/* Boss body shudder on damage */
@keyframes bossShudder{
  0%,100%{transform:translate(-50%,-50%)}
  20%{transform:translate(-46%,-52%)}
  40%{transform:translate(-54%,-48%)}
  60%{transform:translate(-47%,-51%)}
  80%{transform:translate(-53%,-49%)}
}
/* Claw pulse on attack */
@keyframes clawAttackPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,107,53,.6))}
  50%{filter:drop-shadow(0 0 22px rgba(255,50,50,1)) drop-shadow(0 0 40px rgba(255,107,53,.8))}
}
/* ── UPGRADES SCREEN ── */
#v-upgrades{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0}
.upg-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(189,147,249,.18);flex-shrink:0}
.upg-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--purple);text-shadow:var(--gpur)}
.upg-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(189,147,249,.45);margin-top:3px;font-family:'Audiowide',sans-serif}
.upg-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
/* ── Anchored unit header bar ── */
.upg-anchor{display:flex;align-items:center;gap:12px;flex-shrink:0;
  padding:10px 16px 10px 20px;
  background:rgba(26,10,46,.97);
  border-bottom:2px solid rgba(189,147,249,.18);
  position:relative;z-index:2;
  box-shadow:0 4px 18px rgba(0,0,0,.35)}
.upg-anchor-identity{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.upg-anchor-name{font-family:'Righteous',cursive;font-weight:400;font-size:1.15rem;
  letter-spacing:.08em;color:var(--purple);text-shadow:var(--gpur);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upg-anchor-type{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.18em;
  color:rgba(189,147,249,.45);margin-top:2px;white-space:nowrap}
.upg-anchor-pts{display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,209,102,.08);border:2px solid rgba(255,209,102,.35);
  border-radius:30px;padding:3px 12px 3px 9px;flex-shrink:0;
  box-shadow:0 0 10px rgba(255,209,102,.12)}
.upg-anchor-pts-val{font-family:'VT323',monospace;font-size:1.4rem;color:var(--gold);text-shadow:var(--gg);line-height:1}
.upg-anchor-pts-lbl{font-family:'Audiowide',sans-serif;font-size:.5rem;letter-spacing:.15em;color:rgba(255,209,102,.5)}
.upg-anchor-navs{display:flex;gap:7px;align-items:center;flex-shrink:0}
.upg-nav-btn{width:34px;height:34px;background:transparent;
  border:2px solid rgba(189,147,249,.28);color:rgba(189,147,249,.7);
  font-size:1.1rem;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;line-height:1}
.upg-nav-btn:hover{border-color:var(--purple);color:var(--purple);background:rgba(189,147,249,.1);transform:scale(1.08)}
.upg-nav-btn:disabled{opacity:.18;pointer-events:none}
/* ── Panel ── */
.upg-panel{flex:1;overflow:hidden;padding:0;
  display:flex;flex-direction:column;min-height:0}
.upg-empty{display:flex;align-items:center;justify-content:center;height:100%;
  font-family:'Audiowide',sans-serif;font-size:.75rem;letter-spacing:.2em;color:rgba(189,147,249,.25)}
/* upg-unit-header kept but now hidden — anchor bar replaces it */
.upg-unit-header{display:none}
.upg-header-name{font-family:'Righteous',cursive;font-weight:400;font-size:1.5rem;
  letter-spacing:.08em;color:var(--purple);text-shadow:var(--gpur)}
.upg-header-type{font-family:'Audiowide',sans-serif;font-size:.65rem;letter-spacing:.18em;
  color:rgba(189,147,249,.45);margin-top:3px}
.upg-pts-badge{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  background:rgba(255,209,102,.08);border:2px solid rgba(255,209,102,.35);
  border-radius:30px;padding:4px 14px 4px 10px}
.upg-pts-val{font-family:'VT323',monospace;font-size:1.5rem;color:var(--gold);text-shadow:var(--gg);line-height:1}
.upg-pts-lbl{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.15em;color:rgba(255,209,102,.5)}
.upg-stats{display:flex;flex-direction:column;gap:10px}
.upg-stat-row{background:var(--bg-card);border:2px solid rgba(189,147,249,.14);
  border-radius:16px;padding:11px 14px;display:flex;align-items:center;gap:10px;transition:border-color .18s}
.upg-stat-row:hover{border-color:rgba(189,147,249,.28)}
.upg-stat-lbl-wrap{display:flex;flex-direction:column;width:74px;flex-shrink:0}
.upg-stat-lbl{font-family:'Audiowide',sans-serif;font-size:.66rem;letter-spacing:.1em;
  color:rgba(189,147,249,.8);line-height:1.2}
.upg-stat-cost-lbl{font-family:'Audiowide',sans-serif;font-size:.8rem;letter-spacing:.08em;
  color:rgba(255,209,102,.45);margin-top:2px}
.upg-bar-wrap{flex:1;height:8px;background:rgba(189,147,249,.08);border-radius:6px;overflow:hidden}
.upg-bar-fill{height:100%;border-radius:6px;background:var(--purple);
  box-shadow:0 0 8px rgba(189,147,249,.5);transition:width .3s ease}
.upg-stat-val{font-family:'VT323',monospace;font-size:1.3rem;color:var(--purple);width:36px;text-align:center;flex-shrink:0}
.upg-btn{width:32px;height:32px;background:transparent;border:2px solid rgba(189,147,249,.3);
  color:rgba(189,147,249,.8);font-size:1.1rem;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;line-height:1}
.upg-btn:hover{border-color:var(--purple);color:var(--purple);background:rgba(189,147,249,.1);transform:scale(1.1)}
.upg-btn:disabled{opacity:.18;pointer-events:none}
.upg-btn-minus{border-color:rgba(255,121,198,.25);color:rgba(255,121,198,.5)}
.upg-btn-minus:not(:disabled):hover{border-color:var(--pink);color:var(--pink);background:rgba(255,121,198,.08)}
.upg-btn-plus{}
.upg-spent-badge{font-family:'VT323',monospace;font-size:.85rem;color:rgba(255,209,102,.6);
  background:rgba(255,209,102,.07);border:1px solid rgba(255,209,102,.2);
  border-radius:12px;padding:1px 6px;flex-shrink:0}
.upg-maxed{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.12em;
  color:rgba(189,147,249,.35);width:34px;text-align:center;flex-shrink:0}
.upg-section-title{font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.2em;
  color:rgba(189,147,249,.45);margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(189,147,249,.1)}
/* Reset row */
.upg-reset-row{display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:30px;padding-top:20px;border-top:1px solid rgba(189,147,249,.1);padding-bottom:12px}
.upg-reset-btn{font-family:'Audiowide',sans-serif;font-size:.68rem;letter-spacing:.14em;
  background:transparent;border:2px solid rgba(255,121,198,.3);color:rgba(255,121,198,.6);
  border-radius:30px;padding:8px 24px;cursor:pointer;transition:all .2s}
.upg-reset-btn:not(:disabled):hover{border-color:var(--pink);color:var(--pink);background:rgba(255,121,198,.08);
  box-shadow:0 0 16px rgba(255,121,198,.2)}
.upg-reset-btn:disabled{opacity:.2;pointer-events:none}
.upg-reset-hint{font-family:'Audiowide',sans-serif;font-size:.5rem;letter-spacing:.12em;color:rgba(189,147,249,.3)}
/* ── Upgrades: ability section ── */
.upg-ab-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.upg-ab-col-hdr{font-family:'Audiowide',sans-serif;font-size:.6rem;letter-spacing:.18em;
  padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid rgba(127,255,212,.12);
  color:rgba(127,255,212,.45)}
.upg-ab-col-hdr.gold{color:rgba(255,209,102,.45);border-bottom-color:rgba(255,209,102,.12)}
.upg-ab-list{display:flex;flex-direction:column;gap:6px}
.upg-ab-card{padding:9px 11px;border:2px solid rgba(127,255,212,.18);cursor:pointer;
  display:flex;align-items:center;gap:9px;border-radius:12px;transition:all .16s;background:transparent}
.upg-ab-card:hover:not(.upg-ab-locked):not(.upg-ab-disabled){border-color:rgba(127,255,212,.55);background:rgba(127,255,212,.05);transform:translateX(2px)}
.upg-ab-card.upg-ab-sel{border-color:var(--teal);background:rgba(127,255,212,.09)}
.upg-ab-card.upg-ab-active-type{border-color:rgba(255,209,102,.22)}
.upg-ab-card.upg-ab-active-type:hover:not(.upg-ab-locked):not(.upg-ab-disabled){border-color:rgba(255,209,102,.6);background:rgba(255,209,102,.06)}
.upg-ab-card.upg-ab-active-type.upg-ab-sel{border-color:var(--gold);background:rgba(255,209,102,.09)}
.upg-ab-card.upg-ab-locked{cursor:not-allowed;opacity:.65}
.upg-ab-card.upg-ab-disabled{opacity:.28;pointer-events:none}
.upg-ab-check{width:15px;height:15px;border:2px solid rgba(127,255,212,.35);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--bg);flex-shrink:0;transition:all .15s}
.upg-ab-card.upg-ab-sel .upg-ab-check{background:var(--teal);border-color:var(--teal)}
.upg-ab-card.upg-ab-active-type .upg-ab-check{border-color:rgba(255,209,102,.45)}
.upg-ab-card.upg-ab-active-type.upg-ab-sel .upg-ab-check{background:var(--gold);border-color:var(--gold)}
.upg-ab-card.upg-ab-locked .upg-ab-check{border-color:rgba(127,255,212,.2)}
.upg-ab-card.upg-ab-locked.upg-ab-sel .upg-ab-check{background:rgba(127,255,212,.35);border-color:rgba(127,255,212,.4)}
.upg-ab-card.upg-ab-locked.upg-ab-active-type.upg-ab-sel .upg-ab-check{background:rgba(255,209,102,.35);border-color:rgba(255,209,102,.4)}
.upg-ab-info{flex:1;min-width:0}
.upg-ab-name{font-family:'Fredoka One',sans-serif;font-size:.72rem;letter-spacing:.06em;color:var(--teal)}
.upg-ab-card.upg-ab-active-type .upg-ab-name{color:var(--gold)}
.upg-ab-meta{display:flex;align-items:center;gap:5px;margin-top:1px}
.upg-ab-tag{font-family:'Audiowide',sans-serif;font-size:.48rem;letter-spacing:.06em;color:rgba(127,255,212,.35)}
.upg-ab-card.upg-ab-active-type .upg-ab-tag{color:rgba(255,209,102,.35)}
.upg-ab-cost{font-family:'VT323',monospace;font-size:.82rem;color:rgba(255,209,102,.6);margin-left:auto;flex-shrink:0}
.upg-ab-locked-icon{font-size:.65rem;flex-shrink:0;opacity:.4}
.upg-ab-tooltip{background:rgba(26,10,46,.96);border:1px solid rgba(127,255,212,.2);
  border-radius:10px;padding:10px 13px;margin-bottom:10px;min-height:56px;
  font-family:'Audiowide',sans-serif}
.upg-ab-tooltip.active-type{border-color:rgba(255,209,102,.2)}
.upg-ab-tooltip-name{font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.07em;
  color:rgba(127,255,212,.35);margin-bottom:3px}
.upg-ab-tooltip.active-type .upg-ab-tooltip-name{color:rgba(255,209,102,.35)}
.upg-ab-tooltip-desc{font-size:.58rem;letter-spacing:.04em;color:rgba(127,255,212,.5);line-height:1.55}
.upg-ab-tooltip.active-type .upg-ab-tooltip-desc{color:rgba(255,209,102,.5)}
.upg-ab-slots{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.14em;
  color:rgba(189,147,249,.45);text-align:right;margin-bottom:6px}

/* ═══════════════════════════════════════════════════════
   VIEW: SINGLE PLAYER HUB
═══════════════════════════════════════════════════════ */
#v-sp-hub{background:var(--bg);flex-direction:column;align-items:center;justify-content:flex-start;padding:0}
.sp-hub-top{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(127,255,212,.12);flex-shrink:0}
.sp-hub-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--teal);text-shadow:var(--gt)}
.sp-hub-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(127,255,212,.45);margin-top:3px;font-family:'Audiowide',sans-serif}
.sp-hub-grid{display:flex;flex-direction:column;gap:18px;align-items:center;
  padding:0 30px;overflow-y:auto;flex:1;justify-content:center;scrollbar-width:none}
.sp-hub-grid::-webkit-scrollbar{display:none}

/* Hub mode buttons — same pill style as main menu but with subtitle */
.sp-hub-btn{width:min(360px,85vw);padding:18px 40px 16px;background:transparent;
  border:2px solid var(--teal);color:var(--teal);text-shadow:var(--gt);
  font-family:'Fredoka One',sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.12em;
  cursor:none;border-radius:var(--radius-btn);transition:all .2s;
  position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0}
.sp-hub-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.18),transparent);transition:left .35s}
.sp-hub-btn:hover::before{left:100%}
.sp-hub-btn:hover{background:var(--teal);color:var(--bg);text-shadow:none;
  box-shadow:0 0 28px rgba(127,255,212,.55),0 6px 20px rgba(0,0,0,.4);transform:translateY(-2px)}
.sp-hub-btn.pk{border-color:var(--pink);color:var(--pink);text-shadow:var(--gp)}
.sp-hub-btn.pk:hover{background:var(--pink);color:var(--bg);
  box-shadow:0 0 28px rgba(255,121,198,.55),0 6px 20px rgba(0,0,0,.4)}
.sp-hub-btn.gold{border-color:var(--gold);color:var(--gold);text-shadow:var(--gg)}
.sp-hub-btn.gold:hover{background:var(--gold);color:var(--bg);
  box-shadow:0 0 28px rgba(255,209,102,.55),0 6px 20px rgba(0,0,0,.4)}
.sp-hub-btn.disabled-btn{opacity:.28;pointer-events:none}
.sp-hub-btn-label{font-size:1.15rem;letter-spacing:.12em;line-height:1}
.sp-hub-btn-tag{font-family:'Audiowide',sans-serif;font-size:.6rem;letter-spacing:.18em;opacity:.6;line-height:1}
.sp-hub-soon{display:inline-flex;align-items:center;gap:5px;
  font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.12em;
  color:rgba(255,209,102,.5);margin-top:1px}
.sp-hub-soon::before{content:'';width:5px;height:5px;border-radius:50%;
  background:rgba(255,209,102,.4);animation:blink 2s infinite;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   VIEW: CAMPAIGN SELECT  (file-explorer tree)
═══════════════════════════════════════════════════════ */
#v-campaign{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0}
.camp-top{display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px 14px;border-bottom:2px solid rgba(255,209,102,.14);flex-shrink:0}
.camp-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.7rem;
  letter-spacing:.1em;color:var(--teal);text-shadow:0 0 16px rgba(127,255,212,.35)}
.camp-sub{font-size:.8rem;letter-spacing:.18em;color:rgba(127,255,212,.45);margin-top:3px;font-family:'Audiowide',sans-serif}

/* Two-pane explorer body */
.camp-body{flex:1;display:flex;overflow:hidden;min-height:0}

/* LEFT PANE — level list */
.camp-levels{width:220px;flex-shrink:0;border-right:2px solid rgba(127,255,212,.1);
  overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:thin;scrollbar-color:rgba(255,209,102,.15) transparent}
.camp-levels::-webkit-scrollbar{width:3px}
.camp-levels::-webkit-scrollbar-thumb{background:rgba(127,255,212,.15);border-radius:3px}

.camp-level-row{border:2px solid rgba(127,255,212,.15);border-radius:14px;
  padding:11px 14px;cursor:none;transition:all .18s;
  display:flex;align-items:center;gap:10px;background:transparent;
  font-family:'Fredoka One',sans-serif;font-size:.9rem;letter-spacing:.06em;color:rgba(255,209,102,.7)}
.camp-level-row:hover{border-color:rgba(127,255,212,.4);background:rgba(127,255,212,.04);transform:translateX(3px)}
.camp-level-row.sel{border-color:var(--teal);background:rgba(127,255,212,.08);
  color:var(--gold);box-shadow:0 0 16px rgba(255,209,102,.18)}
.camp-level-row.locked{opacity:.32;pointer-events:none}
.camp-level-row.locked .camp-lvl-lock{display:inline}
.camp-lvl-lock{display:none;font-size:.8rem;margin-left:auto;opacity:.7}
.camp-lvl-num{font-family:'VT323',monospace;font-size:1.4rem;color:var(--teal);
  line-height:1;text-shadow:var(--gg);flex-shrink:0;width:28px}
.camp-level-row.locked .camp-lvl-num{color:rgba(127,255,212,.3);text-shadow:none}
.camp-lvl-info{flex:1;min-width:0}
.camp-lvl-name{font-family:'Fredoka One',sans-serif;font-size:.85rem;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-lvl-stars{font-size:.7rem;letter-spacing:.04em;color:rgba(127,255,212,.4);margin-top:1px}
.camp-lvl-stars.earned{color:var(--teal)}

/* RIGHT PANE — stage list */
.camp-stages{flex:1;overflow-y:auto;padding:20px 24px 40px;
  scrollbar-width:thin;scrollbar-color:rgba(255,209,102,.15) transparent;
  display:flex;flex-direction:column;gap:0}
.camp-stages::-webkit-scrollbar{width:3px}
.camp-stages::-webkit-scrollbar-thumb{background:rgba(127,255,212,.15);border-radius:3px}

.camp-stages-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:12px;color:rgba(255,209,102,.25);
  font-family:'Audiowide',sans-serif;font-size:.75rem;letter-spacing:.2em}
.camp-stages-empty-icon{font-size:2.8rem;opacity:.3}

/* Stage header (level title + progress) */
.camp-stage-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(127,255,212,.1)}
.camp-stage-header-title{font-family:'Righteous',cursive;font-weight:400;font-size:1.4rem;
  letter-spacing:.1em;color:var(--gold);text-shadow:var(--gg)}
.camp-stage-progress{font-family:'Audiowide',sans-serif;font-size:.65rem;letter-spacing:.14em;
  color:rgba(255,209,102,.45);margin-top:4px}
.camp-progress-bar{width:100%;height:5px;background:rgba(127,255,212,.06);border-radius:4px;
  overflow:hidden;margin-top:6px}
.camp-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--orange));
  box-shadow:0 0 8px rgba(255,209,102,.5);border-radius:4px;transition:width .4s ease}

/* Individual stage rows */
.camp-stage-row{display:flex;align-items:center;gap:14px;
  padding:13px 16px;border:2px solid rgba(255,209,102,.12);
  border-radius:14px;margin-bottom:9px;cursor:none;
  transition:all .18s;background:transparent;position:relative;overflow:hidden}
.camp-stage-row::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(127,255,212,.06),transparent);transition:left .3s}
.camp-stage-row:hover::before{left:100%}
.camp-stage-row:hover{border-color:rgba(127,255,212,.35);background:rgba(127,255,212,.04);transform:translateX(3px)}
.camp-stage-row.completed{border-color:rgba(127,255,212,.22);background:rgba(127,255,212,.03)}
.camp-stage-row.locked{opacity:.3;pointer-events:none}
.camp-stage-row.current-stage{border-color:rgba(127,255,212,.5);background:rgba(127,255,212,.05);
  box-shadow:0 0 14px rgba(255,209,102,.12)}

.camp-stage-num{font-family:'VT323',monospace;font-size:1.6rem;color:rgba(127,255,212,.5);
  line-height:1;width:28px;flex-shrink:0;text-align:center}
.camp-stage-row.completed .camp-stage-num{color:var(--teal);text-shadow:0 0 8px rgba(127,255,212,.4)}
.camp-stage-row.current-stage .camp-stage-num{color:var(--teal);text-shadow:0 0 10px rgba(127,255,212,.5)}

.camp-stage-info{flex:1;min-width:0}
.camp-stage-name{font-family:'Fredoka One',sans-serif;font-size:1rem;letter-spacing:.06em;
  color:rgba(255,209,102,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-stage-row.completed .camp-stage-name{color:var(--teal)}
.camp-stage-detail{font-family:'Audiowide',sans-serif;font-size:.58rem;letter-spacing:.1em;
  color:rgba(255,209,102,.4);margin-top:2px}

.camp-stage-stars{display:flex;gap:3px;font-size:.85rem;flex-shrink:0}
.camp-stage-stars .s-on{color:var(--teal);text-shadow:0 0 8px rgba(127,255,212,.5)}
.camp-stage-stars .s-off{color:rgba(127,255,212,.15)}

.camp-stage-play{padding:7px 18px;background:transparent;
  border:2px solid rgba(255,209,102,.45);color:rgba(255,209,102,.9);
  font-family:'Fredoka One',sans-serif;font-size:.82rem;letter-spacing:.08em;
  cursor:none;border-radius:30px;white-space:nowrap;transition:all .15s;flex-shrink:0}
.camp-stage-play:hover{border-color:var(--teal);color:var(--bg);background:var(--teal);
  box-shadow:0 0 18px rgba(255,209,102,.45)}
.camp-stage-locked-icon{font-size:1rem;opacity:.45;flex-shrink:0;margin-left:auto}

/* Mobile tweaks */
@media(max-width:600px){
  .camp-levels{width:130px;padding:10px 8px}
  .camp-lvl-num{font-size:1.1rem;width:20px}
  .camp-lvl-name{font-size:.72rem}
  .camp-stages{padding:14px 12px 30px}
  .sp-hub-btn{width:min(280px,85vw);padding:15px 28px 13px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIT PANEL — Tab bar, sections, visual grid, bottom actions
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab Bar ──────────────────────────────────────────────────────────────── */
.unit-panel-tabs{
  display:flex;gap:0;flex-shrink:0;
  border-bottom:2px solid rgba(189,147,249,.12);
  overflow-x:auto;scrollbar-width:none;
  background:rgba(10,4,22,.6);
}
.unit-panel-tabs::-webkit-scrollbar{display:none}
.unit-panel-tab{
  padding:11px 20px;
  font-family:'Fredoka One',sans-serif;font-size:.88rem;letter-spacing:.1em;
  background:none;border:none;border-bottom:3px solid transparent;
  color:rgba(189,147,249,.4);cursor:pointer;white-space:nowrap;
  transition:color .18s,border-color .18s;margin-bottom:-2px;flex-shrink:0;
}
.unit-panel-tab:hover{color:rgba(189,147,249,.75)}
.unit-panel-tab.active{color:var(--purple);border-bottom-color:var(--purple);text-shadow:0 0 12px rgba(189,147,249,.6)}
.unit-panel-tab.has-new{color:var(--gold)}
.unit-panel-tab.has-new.active{border-bottom-color:var(--gold);text-shadow:0 0 12px rgba(255,209,102,.5)}

/* ── Sections (tab bodies) ────────────────────────────────────────────────── */
.unit-panel-section{display:none;flex:1;overflow-y:auto;padding:20px 24px 40px;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(189,147,249,.15) transparent}
.unit-panel-section.active{display:block}

/* ── Inline Visual Grid (Skins / Death FX / Ability FX) ─────────────────── */
.unit-panel-visual-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}

/* ── Bottom Action Buttons (Rename / Change Type / Delete) ───────────────── */
.upg-bottom-actions{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:32px;padding-top:20px;
  border-top:1px solid rgba(189,147,249,.1);
}
.upg-action-btn{
  font-family:'Fredoka One',sans-serif;font-size:1rem;letter-spacing:.1em;
  padding:12px 0;width:280px;min-width:260px;background:transparent;
  border:2px solid rgba(189,147,249,.3);border-radius:var(--radius-btn);
  color:rgba(189,147,249,.6);cursor:pointer;
  transition:border-color .18s,color .18s,background .18s,transform .12s,box-shadow .18s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.upg-action-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(189,147,249,.12),transparent);transition:left .35s}
.upg-action-btn:hover::before{left:100%}
.upg-action-btn:hover{transform:translateY(-2px)}
.upg-action-btn.rename-btn:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px rgba(255,209,102,.25)}
.upg-action-btn.type-btn:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 0 18px rgba(127,255,212,.25)}
.upg-action-btn.delete-btn{border-color:rgba(255,121,198,.25);color:rgba(255,121,198,.5)}
.upg-action-btn.delete-btn:hover{border-color:var(--pink);color:var(--pink);box-shadow:0 0 18px rgba(255,121,198,.25)}

/* ── Stats / FX "Coming Soon" Placeholder ────────────────────────────────── */
.ups-coming-soon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:240px;opacity:.55;
}
.ups-coming-icon{font-size:2.8rem;filter:drop-shadow(0 0 12px rgba(189,147,249,.4))}
.ups-coming-title{font-family:'Audiowide',sans-serif;font-size:.7rem;letter-spacing:.22em;color:rgba(189,147,249,.7)}
.ups-coming-sub{font-family:'Audiowide',sans-serif;font-size:.55rem;letter-spacing:.12em;color:rgba(189,147,249,.35);text-align:center;max-width:280px;line-height:1.6}

/* ── Achievements inline progress bar ────────────────────────────────────── */
.ups-achieve-header{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(189,147,249,.1)}
.ups-achieve-progress-wrap{display:flex;flex-direction:column;gap:6px}
.ups-achieve-progress-bar{height:6px;background:rgba(189,147,249,.1);border-radius:4px;overflow:hidden}
.ups-achieve-progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--teal));border-radius:4px;transition:width .4s ease}
.ups-achieve-progress-label{font-family:'Audiowide',sans-serif;font-size:.5rem;letter-spacing:.14em;color:rgba(189,147,249,.4)}

/* ── Safety: hide old slot corner buttons (also removed from JS) ─────────── */
.slot-edit,.slot-skin,.slot-achieve{display:none!important}

/* ═══════════════════════════════════════════════════════════════════════════
   UPGRADE PANEL — Ability economy, pills, PVP badge, slot buttons
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Anchor pills container ──────────────────────────────────────────────── */
.upg-anchor-pills{display:flex;gap:7px;align-items:center;flex-wrap:wrap;flex-shrink:0}

/* Shared pill base */
.upg-pill{
  display:inline-flex;align-items:center;gap:4px;
  border-radius:30px;padding:3px 11px;
  font-family:'Audiowide',sans-serif;font-size:.5rem;letter-spacing:.13em;
  white-space:nowrap;flex-shrink:0;
}
/* Gold pill — extra pts / extra ability slots */
.upg-pill-extra{
  background:rgba(255,209,102,.08);border:2px solid rgba(255,209,102,.38);
  color:rgba(255,209,102,.85);box-shadow:0 0 8px rgba(255,209,102,.1);
}
/* Blue pill — core ability slots unspent */
.upg-pill-core{
  background:rgba(139,232,253,.08);border:2px solid rgba(139,232,253,.38);
  color:rgba(139,232,253,.85);box-shadow:0 0 8px rgba(139,232,253,.1);
}

/* ── PVP badge on ability cards ──────────────────────────────────────────── */
.upg-ab-pvp-badge{
  font-family:'Audiowide',sans-serif;font-size:.42rem;letter-spacing:.16em;
  color:rgba(139,232,253,.9);background:rgba(139,232,253,.12);
  border:1px solid rgba(139,232,253,.35);border-radius:4px;
  padding:1px 5px;flex-shrink:0;margin-left:auto;
}

/* ── Buy / Sell slot buttons ─────────────────────────────────────────────── */
.upg-ab-slot-actions{
  display:flex;flex-direction:column;gap:6px;margin:10px 0 14px;
}
/* Slot buy/sell buttons match upg-stat-row visual language */
.upg-ab-slot-btn{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 14px;background:var(--bg-card);
  border:2px solid rgba(189,147,249,.14);border-radius:16px;
  font-family:'Audiowide',sans-serif;font-size:.62rem;letter-spacing:.1em;
  color:rgba(189,147,249,.7);cursor:pointer;
  transition:border-color .18s,color .18s,background .18s;
  width:100%;min-height:52px;
}
.upg-ab-slot-btn:disabled{opacity:.22;pointer-events:none}
.buy-slot-btn{border-left:3px solid rgba(255,209,102,.45)}
.buy-slot-btn:hover:not(:disabled){border-color:rgba(255,209,102,.6);border-left-color:var(--gold);color:var(--gold);background:rgba(255,209,102,.06)}
.sell-slot-btn{border-left:3px solid rgba(127,255,212,.35)}
.sell-slot-btn:hover:not(:disabled){border-color:rgba(127,255,212,.5);border-left-color:var(--teal);color:var(--teal);background:rgba(127,255,212,.06)}
.upg-ab-slot-cost{font-family:'VT323',monospace;font-size:1rem;color:var(--gold);opacity:.75}
.sell-slot-btn .upg-ab-slot-cost{color:var(--teal)}

/* ── Stat bonus annotation ───────────────────────────────────────────────── */
.upg-stat-bonus{font-family:'VT323',monospace;font-size:.75rem;margin-left:3px}

/* ── Extra bottom action buttons ─────────────────────────────────────────── */
.upg-action-btn.base-btn:hover{border-color:var(--purple);color:var(--purple);background:rgba(189,147,249,.07)}
.upg-action-btn.deselect-btn{border-color:rgba(255,209,102,.25);color:rgba(255,209,102,.5)}
.upg-action-btn.deselect-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,209,102,.07)}