/* ═══════════════════════════════════════════════════════════════════════
   RAINBOW'S END FIGHTER — style.css  v4.0  ULTIMATE EDITION
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Cinzel+Decorative:wght@700;900&family=Exo+2:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root {
  --green:#00ff88; --green-dark:#00aa55; --green-glow:rgba(0,255,136,.35);
  --gold:#ffd700;  --gold-dark:#cc9900;  --gold-glow:rgba(255,215,0,.4);
  --red:#ff2244;   --red-dark:#aa0022;   --red-glow:rgba(255,34,68,.4);
  --blue:#00aaff;  --purple:#cc44ff;     --orange:#ff8800;
  --hp-g1:#1a8830; --hp-g2:#44dd44; --hp-g3:#ddff00;
  --hp-r1:#ff2244; --hp-r2:#ff6600;
  --sp1:#0044cc;   --sp2:#00aaff;
  --su1:#cc6600;   --su2:#ffaa00;   --su3:#ffd700;
  --st1:#cc8800;   --st2:#ffcc00;
  --font-title:'Cinzel Decorative',serif;
  --font-hud:'Exo 2',sans-serif;
  --font-bang:'Bangers',cursive;
  --r:6px; --tf:.12s ease; --tm:.2s ease; --ts:.35s ease;
}

html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font-hud);cursor:default;-webkit-font-smoothing:antialiased;user-select:none;}
#c{position:fixed;top:0;left:0;width:100%;height:100%;display:block;z-index:1;}

/* ══ HUD ══════════════════════════════════════════════════════════════ */
#hud{
  position:fixed;top:0;left:0;width:100%;display:none;
  justify-content:space-between;align-items:flex-start;
  padding:clamp(7px,1vw,14px) clamp(8px,1.2vw,18px) clamp(6px,.8vw,10px);
  gap:clamp(5px,.8vw,12px);z-index:20;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 65%,transparent 100%);
}
.hud-side{
  flex:1;display:flex;flex-direction:column;
  gap:clamp(3px,.4vw,5px);max-width:42vw;
  background:linear-gradient(135deg,rgba(0,0,0,.52),rgba(8,18,5,.44));
  border:1px solid rgba(0,255,100,.1);
  border-radius:0 0 var(--r) var(--r);
  padding:clamp(5px,.6vw,9px) clamp(7px,1vw,14px);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
}
.hud-side.right{align-items:flex-end;border-color:rgba(255,50,50,.1);}

/* Fighter name */
.fighter-name{
  font-family:var(--font-bang);font-size:clamp(13px,1.8vw,24px);
  letter-spacing:clamp(2px,.4vw,5px);color:var(--gold);
  text-shadow:0 0 12px rgba(255,215,0,.8),0 0 30px rgba(255,215,0,.3),2px 2px 0 rgba(0,0,0,.9);
  padding:1px 0;line-height:1;
}
.fighter-name.right{text-align:right;}

/* HP bar */
.hp-wrap{width:100%;}
.hp-bar-bg{
  position:relative;width:100%;height:clamp(16px,2.2vw,28px);
  background:linear-gradient(90deg,#0d0000,#1a0000,#0d0000);
  border:2px solid rgba(80,0,0,.8);border-radius:4px;overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.95),0 0 8px rgba(200,0,0,.18),0 2px 8px rgba(0,0,0,.5);
}
.hp-bar-bg::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,transparent 0,transparent 14px,rgba(0,0,0,.14) 14px,rgba(0,0,0,.14) 15px);
  z-index:0;
}
.hp-dmg{
  position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,#cc8800,#ffcc00,#ffee44);
  border-radius:2px;z-index:1;transition:width .5s cubic-bezier(.4,0,.2,1) .12s;
}
.hp-fill{
  position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,var(--hp-g1) 0%,var(--hp-g2) 45%,var(--hp-g3) 100%);
  border-radius:2px;transition:width .06s linear;z-index:2;
}
.hp-fill::after{
  content:'';position:absolute;top:0;left:0;right:0;height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 100%);
  border-radius:2px 2px 0 0;
}
.hp-fill.p2hp{
  right:0;left:auto;
  background:linear-gradient(270deg,var(--hp-g1) 0%,var(--hp-g2) 45%,var(--hp-g3) 100%);
}
.hp-fill.danger,.hp-fill.p2hp.danger{
  background:linear-gradient(90deg,var(--hp-r1),var(--hp-r2)) !important;
  animation:hpFlash .3s infinite alternate,hpDangerGlow .6s infinite alternate;
}
@keyframes hpFlash{from{opacity:1}to{opacity:.52}}
@keyframes hpDangerGlow{from{box-shadow:0 0 0 rgba(255,34,68,0)}to{box-shadow:0 0 14px rgba(255,34,68,.65)}}

/* Meters */
.meter-row{display:flex;align-items:center;gap:clamp(3px,.4vw,5px);width:100%;}
.meter-row.right{flex-direction:row-reverse;}
.stun-row{display:flex;align-items:center;gap:clamp(3px,.4vw,5px);}
.meter-label{font-size:clamp(6px,.72vw,9px);font-weight:700;color:rgba(255,255,255,.42);letter-spacing:1px;white-space:nowrap;text-transform:uppercase;}
.meter-bg{flex:1;height:6px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.07);border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);}
.super-bg{flex:2;}.stun-bg{flex:1.2;}
.sp-fill{height:100%;background:linear-gradient(90deg,var(--sp1),var(--sp2));transition:width .15s;border-radius:2px;box-shadow:0 0 4px rgba(0,170,255,.5);}
.super-fill{height:100%;background:linear-gradient(90deg,var(--su1),var(--su2),var(--su3));transition:width .2s;border-radius:2px;box-shadow:0 0 6px rgba(255,200,0,.5);}
.super-fill.full{animation:superPulse .45s infinite alternate;}
@keyframes superPulse{from{box-shadow:0 0 4px var(--gold);filter:brightness(1)}to{box-shadow:0 0 18px var(--gold),0 0 36px var(--orange);filter:brightness(1.3)}}
.stun-fill,.enemy-stun{height:100%;background:linear-gradient(90deg,var(--st1),var(--st2));transition:width .1s;border-radius:2px;}
.enemy-stun{background:linear-gradient(270deg,var(--st1),var(--st2));}

/* HUD center */
.hud-center{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;min-width:clamp(78px,9vw,126px);}
#round-display{font-family:var(--font-bang);font-size:clamp(9px,1vw,12px);color:rgba(255,255,255,.42);letter-spacing:2px;}
#timer-box{
  position:relative;
  background:linear-gradient(180deg,#1e0f00,#100500,#080200);
  border:2px solid var(--gold);border-radius:10px;
  padding:clamp(1px,.2vw,3px) clamp(10px,1.6vw,20px);
  box-shadow:0 0 0 1px rgba(255,150,0,.18),0 0 22px rgba(255,200,0,.52),0 0 50px rgba(255,130,0,.22),inset 0 0 14px rgba(255,150,0,.14),inset 0 1px 0 rgba(255,255,150,.12);
  overflow:hidden;
}
#timer-box::before,#timer-box::after{content:'◆';position:absolute;top:50%;transform:translateY(-50%);font-size:clamp(5px,.7vw,8px);color:var(--gold);opacity:.42;}
#timer-box::before{left:4px;}
#timer-box::after{right:4px;}
#timer{
  font-family:var(--font-bang);font-size:clamp(26px,4vw,55px);
  color:var(--gold);text-shadow:0 0 14px rgba(255,215,0,.9),0 0 30px rgba(255,180,0,.5),2px 2px 0 rgba(0,0,0,.9);
  line-height:1;display:block;text-align:center;transition:color .2s,text-shadow .2s;
}
#timer.urgent{color:var(--red);text-shadow:0 0 14px rgba(255,34,68,.9),0 0 30px rgba(255,34,68,.5),2px 2px 0 rgba(0,0,0,.9);animation:timerUrg .2s infinite alternate;}
@keyframes timerUrg{from{transform:scale(1)}to{transform:scale(1.1)}}
#score-box{font-family:var(--font-bang);font-size:clamp(10px,1.3vw,16px);color:rgba(255,255,255,.52);letter-spacing:1px;text-shadow:0 0 8px rgba(255,215,0,.28);}
#win-icons-p1,#win-icons-p2{display:flex;gap:5px;align-items:center;min-height:15px;}
.win-gem{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffee88,var(--gold),#aa7700);
  box-shadow:0 0 6px var(--gold),0 0 12px rgba(255,215,0,.4),inset 0 1px 2px rgba(255,255,200,.6);
  animation:gemPulse 2s ease-in-out infinite alternate;
}
@keyframes gemPulse{from{box-shadow:0 0 6px var(--gold),0 0 12px rgba(255,215,0,.4)}to{box-shadow:0 0 10px var(--gold),0 0 22px rgba(255,215,0,.72)}}

/* ══ HIT / COMBO ══════════════════════════════════════════════════════ */
#hit-label{
  position:fixed;right:5%;top:34%;font-family:var(--font-bang);font-size:clamp(24px,4.5vw,68px);
  color:#fff;text-shadow:3px 3px 0 var(--red),0 0 22px var(--red),0 0 44px rgba(255,34,68,.4);
  pointer-events:none;z-index:30;opacity:0;transform:scale(.5)rotate(-10deg);letter-spacing:2px;
}
#hit-label.pop{animation:hitPop .55s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes hitPop{0%{opacity:1;transform:scale(1.6)rotate(-10deg)}40%{opacity:1;transform:scale(1.05)rotate(0)}70%{opacity:1;transform:scale(1)rotate(0)}100%{opacity:0;transform:scale(.85)rotate(4deg)translateY(-40px)}}

#combo-label{
  position:fixed;right:4%;top:47%;font-family:var(--font-bang);font-size:clamp(15px,3vw,54px);
  color:var(--gold);text-shadow:2px 2px 0 #000,0 0 18px var(--gold),0 0 38px rgba(255,215,0,.4);
  pointer-events:none;z-index:30;opacity:0;letter-spacing:1px;
}
#combo-label.show{animation:comboShow .48s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes comboShow{0%{opacity:1;transform:scale(1.5)translateX(20px)}50%{opacity:1;transform:scale(1)translateX(0)}80%{opacity:1}100%{opacity:0;transform:scale(.9)translateY(-28px)}}

/* ══ OVERLAY ══════════════════════════════════════════════════════════ */
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;pointer-events:all;}

/* ══ TITLE SCREEN ══════════════════════════════════════════════════════ */
.title-screen{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(14px,2.5vw,36px);gap:0;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 25%,rgba(10,60,20,.92) 0%,rgba(2,12,4,.97) 55%,#000 100%);
}
.title-screen::before{
  content:'🍀';position:absolute;font-size:clamp(120px,24vw,380px);opacity:.03;
  top:50%;left:50%;transform:translate(-50%,-50%)rotate(-15deg);pointer-events:none;filter:blur(2px);
  animation:bgRot 22s linear infinite;
}
@keyframes bgRot{from{transform:translate(-50%,-50%)rotate(-15deg)scale(1)}to{transform:translate(-50%,-50%)rotate(345deg)scale(1.12)}}
.title-screen::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,255,100,.14) 1px,transparent 1px),radial-gradient(circle,rgba(255,215,0,.08) 1px,transparent 1px);
  background-size:80px 80px,130px 130px;background-position:0 0,40px 40px;
  animation:titlePart 9s linear infinite;pointer-events:none;opacity:.5;
}
@keyframes titlePart{from{transform:translateY(0)}to{transform:translateY(-80px)}}

.title-shamrock{
  font-size:clamp(50px,8.5vw,112px);
  animation:shamrockFloat 3.5s ease-in-out infinite;
  filter:drop-shadow(0 0 22px #00ff66) drop-shadow(0 0 55px rgba(0,200,80,.5)) drop-shadow(0 0 100px rgba(0,150,60,.3));
  line-height:1;margin-bottom:clamp(4px,.5vw,8px);position:relative;z-index:1;
}
@keyframes shamrockFloat{
  0%,100%{transform:translateY(0)rotate(-6deg)scale(1)}
  25%{transform:translateY(-8px)rotate(-2deg)scale(1.04)}
  50%{transform:translateY(-14px)rotate(6deg)scale(1.08)}
  75%{transform:translateY(-8px)rotate(2deg)scale(1.04)}
}

.title-main{
  font-family:var(--font-title);font-size:clamp(26px,5.8vw,80px);
  background:linear-gradient(180deg,#fff 0%,#ffe566 28%,var(--gold) 54%,#ff9900 78%,#cc5500 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.85)) drop-shadow(0 0 42px rgba(255,200,0,.65)) drop-shadow(0 0 80px rgba(255,130,0,.32));
  line-height:1.06;text-align:center;position:relative;z-index:1;
  letter-spacing:clamp(1px,.3vw,4px);animation:titlePulse 4s ease-in-out infinite alternate;
}
@keyframes titlePulse{
  from{filter:drop-shadow(4px 4px 0 rgba(0,0,0,.85)) drop-shadow(0 0 42px rgba(255,200,0,.55))}
  to{filter:drop-shadow(4px 4px 0 rgba(0,0,0,.85)) drop-shadow(0 0 72px rgba(255,200,0,.95)) drop-shadow(0 0 130px rgba(255,100,0,.45))}
}

.title-sub{
  font-family:var(--font-bang);font-size:clamp(12px,2.2vw,30px);color:var(--green);
  letter-spacing:clamp(4px,1vw,10px);
  text-shadow:0 0 18px rgba(0,255,136,.8),0 0 40px rgba(0,200,80,.4);
  margin:clamp(8px,1vw,16px) 0 clamp(14px,2vw,28px);position:relative;z-index:1;
  animation:subtitleBreathe 2.6s ease-in-out infinite alternate;
}
@keyframes subtitleBreathe{from{opacity:.8;letter-spacing:clamp(4px,1vw,10px)}to{opacity:1;letter-spacing:clamp(6px,1.3vw,14px)}}

.story-scroll{
  background:linear-gradient(135deg,rgba(0,35,14,.93),rgba(0,18,7,.97));
  border:1px solid rgba(0,255,100,.16);border-radius:12px;
  padding:clamp(10px,1.6vw,20px) clamp(14px,2.2vw,28px);
  max-width:clamp(260px,54vw,580px);text-align:center;
  margin-bottom:clamp(14px,2vw,26px);position:relative;z-index:1;
  box-shadow:0 0 0 1px rgba(0,255,100,.04),0 8px 32px rgba(0,0,0,.6),0 0 50px rgba(0,80,30,.14),inset 0 0 24px rgba(0,50,20,.1),inset 0 1px 0 rgba(0,255,100,.07);
}
.story-scroll p{color:rgba(210,255,225,.88);font-size:clamp(10px,1.2vw,14px);line-height:1.85;font-weight:300;}
.story-scroll p b{color:var(--gold);font-weight:700;text-shadow:0 0 10px rgba(255,215,0,.4);}
.story-scroll p i{color:rgba(180,255,200,.75);}

/* ══ BUTTONS ══════════════════════════════════════════════════════════ */
.btn{
  position:relative;display:inline-block;
  padding:clamp(10px,1.3vw,15px) clamp(26px,3.8vw,50px);
  font-family:var(--font-bang);font-size:clamp(14px,1.9vw,23px);
  letter-spacing:clamp(2px,.4vw,5px);color:#fff;text-decoration:none;
  background:linear-gradient(180deg,rgba(30,110,55,.96),rgba(14,52,26,.98));
  border:2px solid var(--green);border-radius:8px;cursor:pointer;
  margin:clamp(3px,.4vw,6px);
  transition:transform var(--tf),filter var(--tm),box-shadow var(--tm),border-color var(--tm);
  box-shadow:0 4px 20px rgba(0,255,100,.22),0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
  text-shadow:1px 1px 0 rgba(0,0,0,.8);overflow:hidden;vertical-align:middle;
}
.btn::before{
  content:'';position:absolute;top:0;left:-110%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-20deg);transition:left .5s ease;
}
.btn:hover::before{left:155%}
.btn::after{
  content:'';position:absolute;top:2px;left:2px;width:30%;height:40%;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent);
  border-radius:6px 0 0 0;pointer-events:none;
}
.btn:hover{transform:scale(1.06)translateY(-3px);filter:brightness(1.28);box-shadow:0 8px 32px rgba(0,255,100,.45),0 4px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);border-color:rgba(0,255,136,.9);}
.btn:active{transform:scale(.96)translateY(1px);filter:brightness(.95);box-shadow:0 2px 8px rgba(0,255,100,.3);}
.btn.gold-btn{background:linear-gradient(180deg,rgba(130,84,0,.96),rgba(58,36,0,.98));border-color:var(--gold);box-shadow:0 4px 20px rgba(255,200,0,.28),0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,150,.14);}
.btn.gold-btn:hover{box-shadow:0 8px 32px rgba(255,200,0,.55),0 4px 16px rgba(0,0,0,.4);border-color:rgba(255,215,0,.9);}
.btn.red-btn{background:linear-gradient(180deg,rgba(100,0,16,.96),rgba(48,0,8,.98));border-color:var(--red);box-shadow:0 4px 20px rgba(255,34,68,.24),0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,100,100,.09);}
.btn.red-btn:hover{box-shadow:0 8px 32px rgba(255,34,68,.5),0 4px 16px rgba(0,0,0,.4);border-color:rgba(255,34,68,.9);}

/* ══ ROUND/FIGHT/KO TEXTS ═════════════════════════════════════════════ */
.round-announce{
  font-family:var(--font-bang);font-size:clamp(34px,8vw,118px);
  color:#fff;text-shadow:5px 5px 0 var(--red),0 0 40px rgba(255,34,68,.7),0 0 80px rgba(255,34,68,.3);
  letter-spacing:clamp(4px,1vw,10px);animation:announceIn .36s cubic-bezier(.17,.67,.35,1.4) forwards;text-align:center;
}
@keyframes announceIn{from{transform:scaleX(3.5)scaleY(.15);opacity:0;filter:blur(8px)}to{transform:scale(1);opacity:1;filter:blur(0)}}

.fight-text{
  font-family:var(--font-bang);font-size:clamp(46px,10vw,145px);
  background:linear-gradient(180deg,#fff 25%,var(--gold) 65%,var(--orange) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(255,200,0,.8)) drop-shadow(4px 4px 0 rgba(200,50,0,.9));
  letter-spacing:clamp(6px,1.5vw,14px);animation:fightPop .3s cubic-bezier(.17,.67,.35,1.55) forwards;text-align:center;
}
@keyframes fightPop{from{transform:scale(4);opacity:0;filter:blur(12px)}to{transform:scale(1);opacity:1;filter:blur(0)}}

.ko-text{
  font-family:var(--font-bang);font-size:clamp(56px,13vw,192px);
  background:linear-gradient(180deg,#fff 20%,var(--red) 70%,#880000 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(255,34,68,.7)) drop-shadow(0 0 80px rgba(255,34,68,.4));
  letter-spacing:clamp(8px,2vw,18px);animation:koSlam .2s cubic-bezier(.17,.67,.1,1.95) forwards;text-align:center;
}
@keyframes koSlam{from{transform:scale(6);opacity:0;filter:blur(20px)}60%{transform:scale(.92)}to{transform:scale(1);opacity:1;filter:blur(0)}}

.perfect-text{
  font-family:var(--font-bang);font-size:clamp(26px,5.5vw,78px);
  background:linear-gradient(180deg,#fff,var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px var(--gold)) drop-shadow(2px 2px 0 rgba(0,0,0,.8));
  letter-spacing:4px;animation:fightPop .4s ease forwards;text-align:center;
}
.win-sub{font-family:var(--font-bang);font-size:clamp(12px,2vw,28px);color:rgba(255,255,255,.72);letter-spacing:clamp(2px,.5vw,5px);margin:clamp(5px,.8vw,10px) 0;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,.6);}

/* ══ VS SCREEN ════════════════════════════════════════════════════════ */
.vs-panel{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,68px);margin:clamp(8px,1.3vw,16px) 0;position:relative;}
.vs-fighter-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;}
.vs-fighter-art{
  width:clamp(80px,13.5vw,190px);height:clamp(92px,15.5vw,210px);
  position:relative;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28)),rgba(0,0,0,.06);
  border:2px solid rgba(255,255,255,.1);border-radius:12px;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin-bottom:5px;
  transition:border-color var(--tm),box-shadow var(--tm),transform var(--tm);
  animation:vsCardIn .4s cubic-bezier(.2,1.4,.4,1) both;
}
.vs-fighter-art:hover{transform:scale(1.04)translateY(-3px);}
.vs-fighter-art::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55) 100%);z-index:1;pointer-events:none;}
@keyframes vsCardIn{from{transform:scale(.7)translateY(20px);opacity:0}to{transform:scale(1)translateY(0);opacity:1}}
.vs-fighter-name{font-family:var(--font-bang);font-size:clamp(12px,1.7vw,22px);letter-spacing:2px;text-shadow:2px 2px 0 rgba(0,0,0,.7),0 0 16px currentColor;}
.vs-divider{
  font-family:var(--font-bang);font-size:clamp(36px,7vw,106px);
  color:var(--red);text-shadow:0 0 28px rgba(255,34,68,.8),0 0 60px rgba(255,34,68,.4),4px 4px 0 rgba(0,0,0,.8);
  animation:vsFlash .36s infinite alternate;line-height:1;
}
@keyframes vsFlash{from{color:var(--red);text-shadow:0 0 28px rgba(255,34,68,.8),4px 4px 0 rgba(0,0,0,.8)}to{color:var(--gold);text-shadow:0 0 28px rgba(255,200,0,.8),4px 4px 0 rgba(0,0,0,.8)}}

.lore-box{
  background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(10,5,20,.65));
  border:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:clamp(7px,1vw,13px) clamp(12px,1.8vw,22px);
  max-width:clamp(240px,48vw,510px);font-size:clamp(9px,1.05vw,13px);
  color:rgba(215,215,195,.82);line-height:1.76;text-align:center;font-style:italic;
  backdrop-filter:blur(4px);box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
}

/* ══ OVERLAY BACKGROUNDS ══════════════════════════════════════════════ */
.screen-bg-dark{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(14,8,24,.9),rgba(0,0,0,.96));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  gap:clamp(5px,.8vw,11px);padding:clamp(14px,2.2vw,32px);
}
.screen-bg-green{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 35%,rgba(4,28,10,.96),rgba(1,8,3,.98),#000);
  gap:clamp(5px,.8vw,11px);padding:clamp(14px,2.2vw,32px);
  position:relative;overflow:hidden;
}
.screen-bg-green::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,255,80,.055) 1px,transparent 1px);
  background-size:60px 60px;animation:bgDots 6s linear infinite;pointer-events:none;
}
@keyframes bgDots{from{transform:translateY(0)}to{transform:translateY(60px)}}

/* ══ LEADERBOARD ══════════════════════════════════════════════════════ */
.lb-table{width:100%;max-width:clamp(260px,48vw,490px);border-collapse:separate;border-spacing:0 3px;}
.lb-table tr{background:rgba(0,0,0,.3);transition:background var(--tf);}
.lb-table tr:hover{background:rgba(255,215,0,.06);}
.lb-table tr:first-child{background:rgba(255,215,0,.1);}
.lb-table tr:nth-child(2){background:rgba(200,200,220,.07);}
.lb-table tr:nth-child(3){background:rgba(200,130,60,.07);}
.lb-table td{padding:clamp(6px,.9vw,11px) clamp(9px,1.3vw,16px);font-size:clamp(10px,1.1vw,14px);color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.04);}
.lb-table td:first-child{border-radius:6px 0 0 6px;}
.lb-table td:last-child{border-radius:0 6px 6px 0;}
.lb-table .rank-cell{font-family:var(--font-bang);font-size:clamp(12px,1.5vw,19px);color:var(--gold);width:42px;text-shadow:0 0 8px rgba(255,215,0,.4);}
.lb-table .score-cell{font-family:var(--font-bang);font-size:clamp(10px,1.4vw,16px);color:var(--green);text-align:right;text-shadow:0 0 8px rgba(0,255,136,.3);}

/* ══ CONTROLS HINT ═════════════════════════════════════════════════════ */
#ctrl-hint{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:15;pointer-events:none;text-align:center;display:none;}
.ctrl-grid{
  display:inline-grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(3px,.5vw,7px) clamp(8px,1.3vw,18px);
  background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:clamp(7px,.9vw,12px) clamp(12px,1.8vw,20px) clamp(5px,.7vw,9px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
}
.ctrl-group{display:flex;flex-direction:column;align-items:center;gap:3px;}
.ctrl-label{font-size:clamp(7px,.72vw,9px);color:rgba(255,255,255,.36);letter-spacing:1px;text-transform:uppercase;font-weight:600;}
.ctrl-keys{display:flex;gap:3px;align-items:center;font-family:var(--font-bang);font-size:clamp(10px,1vw,13px);color:rgba(255,255,255,.7);flex-wrap:wrap;justify-content:center;}
.key{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.2);border-bottom-width:2px;border-radius:4px;padding:1px 7px;font-size:clamp(8px,.8vw,10px);font-family:var(--font-hud);font-weight:700;color:rgba(255,255,255,.85);box-shadow:0 2px 4px rgba(0,0,0,.4);}

/* ══ MUTE BUTTON ═══════════════════════════════════════════════════════ */
#mute-btn{
  position:fixed;bottom:16px;right:16px;z-index:100;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(40,40,40,.9),rgba(0,0,0,.85));
  border:1.5px solid rgba(0,255,100,.34);color:#fff;font-size:18px;cursor:pointer;
  transition:filter var(--tm),border-color var(--tm),box-shadow var(--tm),transform var(--tf);line-height:1;
  box-shadow:0 3px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
}
#mute-btn:hover{filter:brightness(1.4);border-color:var(--green);box-shadow:0 4px 16px rgba(0,255,100,.3),0 3px 12px rgba(0,0,0,.5);transform:scale(1.08);}
#mute-btn:active{transform:scale(.93);}

/* ══ SCREEN FX ══════════════════════════════════════════════════════ */
body.shake{animation:screenShake .18s ease;}
@keyframes screenShake{0%{transform:translate(0,0)}15%{transform:translate(-9px,5px)}30%{transform:translate(9px,-5px)}45%{transform:translate(-7px,4px)}60%{transform:translate(6px,-3px)}75%{transform:translate(-4px,2px)}90%{transform:translate(3px,-1px)}100%{transform:translate(0,0)}}

.super-flash-overlay{position:fixed;inset:0;pointer-events:none;z-index:45;animation:superFlashAnim .44s forwards;}
@keyframes superFlashAnim{0%{background:rgba(255,220,60,.65)}15%{background:rgba(255,255,200,.45)}40%{background:rgba(255,180,0,.2)}100%{background:transparent}}

/* ══ TOUCH ════════════════════════════════════════════════════════════ */
#touch-pad{position:fixed;bottom:0;left:0;width:100%;height:215px;pointer-events:none;z-index:25;}
.tpad-btn{
  position:absolute;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(0,200,80,.22),rgba(0,100,40,.12));
  border:2px solid rgba(0,255,100,.4);color:rgba(255,255,255,.85);font-family:var(--font-bang);font-size:15px;
  display:flex;align-items:center;justify-content:center;pointer-events:all;
  user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background var(--tf),transform var(--tf);
  box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1),0 0 8px rgba(0,255,100,.1);
}
.tpad-btn:active{background:radial-gradient(circle at 40% 35%,rgba(0,255,100,.38),rgba(0,180,60,.22));transform:scale(.9);box-shadow:0 1px 4px rgba(0,0,0,.4),0 0 16px rgba(0,255,100,.3);}

/* ══ SCROLLBAR ════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--orange));border-radius:2px;}
::-webkit-scrollbar-corner{background:transparent;}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media(max-width:600px){
  #hud{padding:5px 7px 0;}
  .hud-side{padding:3px 7px;}
  .hp-bar-bg{height:13px;}
  .meter-bg{height:4px;}
  .vs-panel{gap:14px;}
  .vs-fighter-art{width:76px;height:88px;}
  .ctrl-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:420px){
  .title-main{font-size:clamp(20px,9vw,34px);}
  .btn{padding:8px 16px;font-size:12px;}
  .hud-center{min-width:66px;}
  #timer{font-size:clamp(19px,7vw,32px);}
}
@media(min-resolution:2dppx){
  .hp-bar-bg{border-width:1px;}
  .btn{border-width:1.5px;}
  .vs-fighter-art{border-width:1px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ════════════════════════════════════════════════════════════════════════
   ROUND RESULT SCREEN — KO / WIN / DRAW
   ════════════════════════════════════════════════════════════════════════ */
.rr-screen {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.rr-particles {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.rr-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.75) 100%);
  pointer-events: none; z-index: 1;
}
.rr-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(6px,1vw,14px);
  animation: rrContentIn .4s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes rrContentIn {
  from { transform: scale(.8) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* KO text — massive, cinematic */
.rr-ko {
  font-family: var(--font-bang);
  font-size: clamp(72px, 16vw, 220px);
  line-height: .9;
  background: linear-gradient(180deg, #fff 15%, var(--accent, #ff2244) 60%, #660000 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter:
    drop-shadow(0 0 40px var(--accent, #ff2244))
    drop-shadow(0 0 80px color-mix(in srgb, var(--accent, #ff2244) 50%, transparent))
    drop-shadow(8px 8px 0 rgba(0,0,0,.9));
  letter-spacing: .04em;
  animation: koSlam .22s cubic-bezier(.17,.67,.1,1.95) both;
  text-align: center;
}

.rr-perfect {
  font-family: var(--font-bang);
  font-size: clamp(22px, 4.5vw, 60px);
  color: var(--gold);
  text-shadow: 0 0 22px var(--gold), 0 0 50px rgba(255,215,0,.5), 3px 3px 0 rgba(0,0,0,.8);
  letter-spacing: .15em;
  animation: perfectSlide .5s .18s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes perfectSlide {
  from { opacity: 0; transform: translateY(-20px) scale(1.3); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rr-winner {
  font-family: var(--font-bang);
  font-size: clamp(22px, 4vw, 52px);
  text-shadow: 0 0 18px currentColor, 3px 3px 0 rgba(0,0,0,.9);
  letter-spacing: .1em;
  animation: rrWinnerIn .45s .25s cubic-bezier(.2,1.4,.4,1) both;
  text-align: center;
}
@keyframes rrWinnerIn {
  from { opacity: 0; transform: scaleX(1.8) scaleY(.3); }
  to   { opacity: 1; transform: scale(1); }
}

.rr-shamrocks {
  font-size: clamp(22px, 4vw, 48px);
  animation: shamrocksBounce .5s .4s cubic-bezier(.2,1.6,.4,1) both;
  letter-spacing: .2em;
}
@keyframes shamrocksBounce {
  from { opacity: 0; transform: translateY(20px) scale(.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rr-score-line {
  font-family: var(--font-bang);
  font-size: clamp(11px, 1.4vw, 17px);
  color: rgba(255,255,255,.45);
  letter-spacing: .08em;
  animation: rrFadeIn .5s .5s both;
}
@keyframes rrFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ════════════════════════════════════════════════════════════════════════
   STAGE STORY SCREEN — the cinematic chapter reveal
   ════════════════════════════════════════════════════════════════════════ */
.story-screen {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(6,20,10,.97) 0%, rgba(2,8,4,.99) 60%, #000 100%);
}
.story-particles {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.story-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 25%, rgba(0,0,0,.65) 100%);
  pointer-events: none; z-index: 1;
}

/* Top header bar */
.story-header {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(16px,2.5vw,32px) clamp(20px,3vw,40px) clamp(10px,1.5vw,18px);
  border-bottom: 1px solid rgba(var(--acc, 0,255,136), .15);
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent);
  gap: clamp(4px,.6vw,8px);
  animation: storyHeaderIn .5s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes storyHeaderIn {
  from { transform: translateY(-40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.story-stage-badge {
  font-family: var(--font-bang);
  font-size: clamp(10px, 1.2vw, 15px);
  color: var(--acc, var(--green));
  letter-spacing: .22em;
  text-shadow: 0 0 12px var(--acc, var(--green));
  background: rgba(0,0,0,.45);
  border: 1px solid color-mix(in srgb, var(--acc, var(--green)) 40%, transparent);
  border-radius: 20px;
  padding: 3px 14px;
}

.story-stage-name {
  font-family: var(--font-bang);
  font-size: clamp(18px, 3.2vw, 44px);
  color: var(--acc, var(--gold));
  text-shadow: 0 0 24px var(--acc, var(--gold)), 2px 2px 0 rgba(0,0,0,.8);
  letter-spacing: .06em;
  text-align: center;
  line-height: 1;
}

/* Central story body */
.story-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px, 1.5vw, 20px);
  padding: clamp(16px,2.5vw,32px) clamp(20px,3vw,40px);
}

.story-emoji-orb {
  font-size: clamp(52px, 9vw, 110px);
  filter:
    drop-shadow(0 0 28px var(--acc, #00ff88))
    drop-shadow(0 0 60px color-mix(in srgb, var(--acc, #00ff88) 55%, transparent));
  animation: orbFloat 3s ease-in-out infinite, orbIn .6s .1s cubic-bezier(.2,1.4,.4,1) both;
  line-height: 1;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0) rotate(-5deg) scale(1); }
  50%      { transform: translateY(-12px) rotate(5deg) scale(1.06); }
}
@keyframes orbIn {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.story-chapter-title {
  font-family: var(--font-title);
  font-size: clamp(18px, 3vw, 40px);
  background: linear-gradient(180deg, #fff 20%, var(--acc, var(--gold)) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 18px var(--acc, var(--gold)));
  text-align: center;
  line-height: 1.2;
  animation: storyTitleIn .55s .2s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes storyTitleIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Decorative divider */
.story-divider {
  display: flex; align-items: center;
  gap: clamp(8px,1.2vw,16px); width: clamp(200px,40vw,480px);
  animation: rrFadeIn .5s .35s both;
}
.story-divider span:first-child,
.story-divider span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc, var(--green)), transparent);
}
.story-div-icon {
  font-size: clamp(14px,1.8vw,22px);
  color: var(--acc, var(--green));
  text-shadow: 0 0 10px var(--acc, var(--green));
  flex: none;
  animation: divIconSpin 8s linear infinite;
}
@keyframes divIconSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* The story text card — the beating heart */
.story-text-card {
  position: relative;
  max-width: clamp(280px, 55vw, 640px);
  background:
    linear-gradient(135deg, rgba(0,30,14,.92) 0%, rgba(0,12,6,.97) 100%);
  border: 1px solid color-mix(in srgb, var(--acc, #00ff88) 22%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--acc, #00ff88) 45%, transparent);
  border-radius: 14px;
  padding: clamp(14px,2vw,24px) clamp(18px,2.8vw,34px);
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 8px 32px rgba(0,0,0,.65),
    0 0 40px color-mix(in srgb, var(--acc, #00ff88) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 30px rgba(0,0,0,.15);
  animation: storyCardIn .6s .3s cubic-bezier(.2,1.15,.4,1) both;
  overflow: hidden;
}
/* Shimmer line at top */
.story-text-card::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc, #00ff88), transparent);
  animation: cardShimmer 3s 1s ease-in-out infinite;
}
@keyframes cardShimmer {
  0%   { left: -100%; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}
@keyframes storyCardIn {
  from { opacity: 0; transform: translateY(28px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.story-text-card p {
  color: rgba(218,255,228,.9);
  font-size: clamp(11px, 1.35vw, 15px);
  line-height: 1.9;
  font-weight: 300;
  font-style: italic;
}
.story-text-card p b {
  color: var(--acc, var(--gold));
  font-weight: 700;
  font-style: normal;
  text-shadow: 0 0 10px color-mix(in srgb, var(--acc, var(--gold)) 60%, transparent);
}
.story-text-card p i {
  color: rgba(180,255,200,.75);
}

/* Footer */
.story-footer {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(6px,.9vw,10px);
  padding: clamp(10px,1.5vw,18px) clamp(20px,3vw,40px) clamp(14px,2vw,24px);
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  animation: rrFadeIn .5s .6s both;
}

.story-score-row {
  display: flex; align-items: center;
  gap: clamp(6px,1vw,14px); flex-wrap: wrap; justify-content: center;
}
.story-score-label {
  font-family: var(--font-bang);
  font-size: clamp(9px,.9vw,12px);
  color: rgba(255,255,255,.4);
  letter-spacing: .15em;
}
.story-score-val {
  font-family: var(--font-bang);
  font-size: clamp(14px,2vw,26px);
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255,215,0,.5);
}
.story-score-sep { color: rgba(255,255,255,.2); font-size: 1.2em; }

.story-btn-row {
  display: flex; gap: clamp(8px,1.2vw,16px); justify-content: center; flex-wrap: wrap;
}
.story-btn-main {
  font-size: clamp(15px,2vw,24px) !important;
  padding: clamp(12px,1.6vw,18px) clamp(32px,5vw,62px) !important;
  animation: btnPulse 1.8s .8s ease-in-out infinite alternate;
}
@keyframes btnPulse {
  from { box-shadow: 0 4px 20px rgba(0,255,100,.22), 0 2px 8px rgba(0,0,0,.5); }
  to   { box-shadow: 0 6px 30px rgba(0,255,100,.55), 0 2px 8px rgba(0,0,0,.5); }
}

.story-next-preview {
  font-family: var(--font-hud);
  font-size: clamp(9px,1vw,12px);
  color: rgba(255,255,255,.3);
  letter-spacing: .06em;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   GAME OVER SCREEN
   ════════════════════════════════════════════════════════════════════════ */
.gameover-screen {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,2,6,.97) 0%, rgba(10,0,2,.99) 60%, #000 100%);
}
.go-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.go-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(0,0,0,.8) 100%);
  pointer-events: none; z-index: 1;
}
.go-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px,1.2vw,16px);
  animation: goIn .5s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes goIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.go-skull {
  font-size: clamp(52px,9vw,100px);
  filter: drop-shadow(0 0 30px rgba(255,34,68,.7)) drop-shadow(0 0 60px rgba(200,0,0,.4));
  animation: skullPulse 1.5s ease-in-out infinite alternate;
}
@keyframes skullPulse {
  from { transform: scale(1) rotate(-4deg); filter: drop-shadow(0 0 28px rgba(255,34,68,.6)); }
  to   { transform: scale(1.08) rotate(4deg); filter: drop-shadow(0 0 48px rgba(255,34,68,.9)); }
}
.go-title {
  font-family: var(--font-bang);
  font-size: clamp(52px,11vw,150px);
  background: linear-gradient(180deg, #fff 15%, var(--red) 60%, #550000 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(255,34,68,.7));
  letter-spacing: .06em;
  line-height: .9;
  animation: koSlam .22s cubic-bezier(.17,.67,.1,1.95) both;
  text-align: center;
}
.go-subtitle {
  font-family: var(--font-bang);
  font-size: clamp(13px,1.8vw,24px);
  color: rgba(255,150,150,.7);
  letter-spacing: .1em;
  text-align: center;
}
.go-stage-info {
  font-family: var(--font-hud);
  font-size: clamp(10px,1.2vw,14px);
  color: rgba(255,255,255,.4);
  text-align: center;
}
.go-stage-name { color: var(--red); font-weight: 700; }
.go-score {
  font-family: var(--font-bang);
  font-size: clamp(16px,2.2vw,28px);
  color: rgba(255,255,255,.6);
  letter-spacing: .08em;
}
.go-score span { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,.5); }
.go-divider {
  display: flex; align-items: center; gap: 12px;
  width: clamp(200px,38vw,440px); color: rgba(255,34,68,.5);
  font-size: 1.2em;
}
.go-divider span:first-child, .go-divider span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,34,68,.4), transparent);
}
.go-btn-row { display: flex; gap: clamp(8px,1.2vw,16px); flex-wrap: wrap; justify-content: center; }
.go-retry-btn { animation: btnPulse 2s ease-in-out infinite alternate; }
.go-tip {
  font-family: var(--font-hud);
  font-size: clamp(9px,.95vw,12px);
  color: rgba(255,255,255,.25);
  font-style: italic;
  max-width: 400px;
  text-align: center;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
   VICTORY SCREEN — the ultimate finale
   ════════════════════════════════════════════════════════════════════════ */
.victory-screen {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, rgba(8,36,14,.97) 0%, rgba(3,12,5,.99) 60%, #000 100%);
}
.victory-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Rotating light rays behind everything */
.victory-rays {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 45%,
    transparent 0deg, rgba(0,255,100,.03) 15deg, transparent 30deg,
    rgba(255,215,0,.03) 55deg, transparent 70deg,
    rgba(0,255,100,.03) 95deg, transparent 110deg,
    rgba(255,215,0,.03) 140deg, transparent 155deg,
    rgba(0,255,100,.03) 185deg, transparent 200deg,
    rgba(255,215,0,.03) 235deg, transparent 250deg,
    rgba(0,255,100,.03) 285deg, transparent 300deg,
    rgba(255,215,0,.03) 335deg, transparent 360deg);
  animation: raysRotate 20s linear infinite;
}
@keyframes raysRotate { to { transform: rotate(360deg); } }

.victory-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(6px,1vw,14px);
  padding: clamp(16px,2.5vw,32px);
  text-align: center;
}

.victory-rainbow {
  font-size: clamp(48px,8vw,96px);
  filter: drop-shadow(0 0 30px rgba(0,200,255,.5));
  animation: rainbowArc 3s ease-in-out infinite alternate, orbIn .5s .05s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes rainbowArc {
  from { transform: translateY(0) scaleX(1); }
  to   { transform: translateY(-8px) scaleX(1.05); }
}

/* Three bouncing shamrocks */
.victory-shamrock-row { display: flex; gap: clamp(8px,1.5vw,20px); }
.vic-sh {
  font-size: clamp(28px,4.5vw,56px);
  display: inline-block;
  filter: drop-shadow(0 0 18px #00ff88) drop-shadow(0 0 40px rgba(0,200,80,.5));
}
.sh1 { animation: shamBounce 1.2s .1s ease-in-out infinite alternate, orbIn .6s .15s both; }
.sh2 { animation: shamBounce 1.2s .3s ease-in-out infinite alternate, orbIn .6s .25s both; }
.sh3 { animation: shamBounce 1.2s .5s ease-in-out infinite alternate, orbIn .6s .35s both; }
@keyframes shamBounce {
  from { transform: translateY(0) rotate(-8deg); }
  to   { transform: translateY(-14px) rotate(8deg); }
}

.victory-trophy {
  font-size: clamp(62px,10vw,120px);
  filter: drop-shadow(0 0 40px rgba(255,215,0,.8)) drop-shadow(0 0 80px rgba(255,130,0,.4));
  animation: trophyPulse 1.8s ease-in-out infinite alternate, orbIn .65s .1s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes trophyPulse {
  from { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 38px rgba(255,215,0,.7)); }
  to   { transform: scale(1.1) rotate(3deg); filter: drop-shadow(0 0 65px rgba(255,215,0,1)) drop-shadow(0 0 100px rgba(255,150,0,.5)); }
}

.victory-title {
  font-family: var(--font-title);
  font-size: clamp(22px,4vw,54px);
  background: linear-gradient(180deg, #fff 0%, #ffe566 30%, var(--gold) 60%, #ff8800 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter:
    drop-shadow(3px 3px 0 rgba(0,0,0,.85))
    drop-shadow(0 0 38px rgba(255,200,0,.7))
    drop-shadow(0 0 70px rgba(255,120,0,.4));
  line-height: 1.1;
  animation: titlePulse 3s ease-in-out infinite alternate, storyTitleIn .55s .2s both;
}

.victory-sub {
  font-family: var(--font-bang);
  font-size: clamp(12px,1.7vw,22px);
  color: rgba(200,255,220,.7);
  letter-spacing: .08em;
  line-height: 1.5;
  animation: rrFadeIn .5s .4s both;
}

.victory-divider {
  display: flex; align-items: center; gap: 14px;
  width: clamp(240px,45vw,520px);
  animation: rrFadeIn .5s .45s both;
}
.victory-divider span:first-child, .victory-divider span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.victory-divider span:nth-child(2) {
  color: var(--gold); font-size: clamp(12px,1.5vw,18px);
  text-shadow: 0 0 12px var(--gold); white-space: nowrap; letter-spacing: .2em;
}

.victory-stats {
  display: flex; align-items: center; gap: clamp(10px,1.8vw,24px);
  flex-wrap: wrap; justify-content: center;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,215,0,.18);
  border-radius: 12px;
  padding: clamp(10px,1.4vw,18px) clamp(16px,2.5vw,32px);
  box-shadow: 0 0 30px rgba(255,200,0,.1), inset 0 1px 0 rgba(255,255,200,.07);
  animation: rrFadeIn .5s .5s both;
}
.vic-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vic-stat-label {
  font-family: var(--font-bang);
  font-size: clamp(8px,.85vw,11px);
  color: rgba(255,255,255,.4);
  letter-spacing: .18em;
}
.vic-stat-val {
  font-family: var(--font-bang);
  font-size: clamp(18px,2.5vw,32px);
  color: var(--green);
  text-shadow: 0 0 12px rgba(0,255,136,.5);
}
.vic-stat-val.gold {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,215,0,.6);
}
.vic-stat-sep { color: rgba(255,215,0,.25); font-size: 1.5em; line-height: 1; }

.victory-btn-row {
  display: flex; gap: clamp(10px,1.5vw,18px); flex-wrap: wrap; justify-content: center;
  animation: rrFadeIn .5s .65s both;
}

/* ════════════════════════════════════════════════════════════════════════
   NAME ENTRY SCREEN
   ════════════════════════════════════════════════════════════════════════ */
.name-entry-screen {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, rgba(8,36,14,.97), rgba(2,10,4,.99), #000);
}
.ne-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px,1.5vw,18px);
  padding: clamp(20px,3vw,40px);
  text-align: center;
  animation: rrContentIn .45s cubic-bezier(.2,1.2,.4,1) both;
}
.ne-trophy {
  font-size: clamp(52px,8vw,90px);
  filter: drop-shadow(0 0 35px rgba(255,215,0,.8));
  animation: trophyPulse 2s ease-in-out infinite alternate;
}
.ne-title {
  font-family: var(--font-bang);
  font-size: clamp(28px,5vw,64px);
  background: linear-gradient(180deg,#fff 20%,var(--gold) 70%,#ff8800 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 28px rgba(255,200,0,.7)) drop-shadow(3px 3px 0 rgba(0,0,0,.9));
  letter-spacing: .06em;
}
.ne-score {
  font-family: var(--font-bang);
  font-size: clamp(16px,2.2vw,28px);
  color: rgba(255,255,255,.55); letter-spacing:.08em;
}
.ne-score span { color: var(--gold); text-shadow: 0 0 12px rgba(255,215,0,.5); }
.ne-sub {
  font-family: var(--font-hud);
  font-size: clamp(12px,1.5vw,17px);
  color: rgba(200,255,220,.75);
  line-height: 1.6;
}
.ne-sub b { color: var(--gold); font-weight:700; }

.ne-input-wrap {
  position: relative;
  width: clamp(240px,45vw,480px);
}
.ne-input {
  width: 100%;
  background: rgba(0,20,8,.85);
  border: 2px solid rgba(0,255,100,.35);
  border-radius: 10px;
  padding: clamp(12px,1.6vw,18px) clamp(16px,2vw,22px) clamp(12px,1.6vw,18px) clamp(16px,2vw,22px);
  font-family: var(--font-bang);
  font-size: clamp(18px,2.5vw,30px);
  color: #fff;
  letter-spacing: .06em;
  text-align: center;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 0 0 0 transparent, inset 0 2px 8px rgba(0,0,0,.6);
  caret-color: var(--green);
}
.ne-input::placeholder { color: rgba(255,255,255,.25); font-style: italic; }
.ne-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,255,100,.18), 0 0 22px rgba(0,255,100,.25), inset 0 2px 8px rgba(0,0,0,.5);
}
.ne-char-count {
  position: absolute; right: 12px; bottom: 10px;
  font-size: clamp(9px,.9vw,11px);
  color: rgba(255,255,255,.3);
  font-family: var(--font-hud);
  pointer-events: none;
}
.ne-btn-row { display: flex; gap: clamp(8px,1.2vw,16px); flex-wrap: wrap; justify-content: center; }
.ne-submit { animation: btnPulse 1.8s ease-in-out infinite alternate; }
.ne-hint {
  font-size: clamp(9px,.95vw,12px);
  color: rgba(255,255,255,.25); font-style: italic;
  max-width: 400px; text-align: center; line-height: 1.5;
}

/* New record flash */
.new-record-flash {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  font-family: var(--font-bang);
  font-size: clamp(18px,2.8vw,36px);
  color: var(--gold);
  text-shadow: 0 0 22px var(--gold), 0 0 50px rgba(255,200,0,.5), 3px 3px 0 rgba(0,0,0,.9);
  background: rgba(0,0,0,.75);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 12px 28px;
  letter-spacing: .08em;
  white-space: nowrap;
  animation: recordFlash 3.2s cubic-bezier(.2,1.2,.4,1) forwards;
  pointer-events: none;
}
@keyframes recordFlash {
  0%   { opacity:0; transform:translateX(-50%) translateY(-30px) scale(.8); }
  12%  { opacity:1; transform:translateX(-50%) translateY(0) scale(1.05); }
  20%  { transform:translateX(-50%) translateY(0) scale(1); }
  75%  { opacity:1; }
  100% { opacity:0; transform:translateX(-50%) translateY(-20px); }
}

/* ════════════════════════════════════════════════════════════════════════
   HALL OF FAME SCREEN — cinematic global leaderboard
   ════════════════════════════════════════════════════════════════════════ */
.hof-screen {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(10,30,16,.97), rgba(3,10,5,.99), #000);
}
.hof-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.hof-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: clamp(8px,1.2vw,16px);
  width: 100%; max-width: clamp(320px, 70vw, 820px);
  max-height: 100vh;
  overflow-y: auto;
  padding: clamp(16px,2.5vw,32px) clamp(16px,2.5vw,32px) clamp(12px,1.8vw,24px);
  scrollbar-width: thin;
  animation: rrContentIn .45s cubic-bezier(.2,1.2,.4,1) both;
}

/* Header */
.hof-header {
  display: flex; flex-direction: column; align-items: center; gap: clamp(3px,.4vw,6px);
  padding-bottom: clamp(8px,1.2vw,14px);
  border-bottom: 1px solid rgba(255,215,0,.18);
  width: 100%;
}
.hof-crown {
  font-size: clamp(38px,6vw,72px);
  filter: drop-shadow(0 0 22px rgba(255,215,0,.8));
  animation: trophyPulse 2.5s ease-in-out infinite alternate;
}
.hof-title {
  font-family: var(--font-bang);
  font-size: clamp(32px,5.5vw,72px);
  background: linear-gradient(180deg,#fff 15%,var(--gold) 55%,#cc8800 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.9)) drop-shadow(0 0 32px rgba(255,200,0,.6));
  letter-spacing: .08em; line-height: 1;
}
.hof-subtitle {
  font-family: var(--font-bang);
  font-size: clamp(11px,1.3vw,16px);
  color: rgba(0,255,136,.6);
  letter-spacing: .15em;
  text-shadow: 0 0 10px rgba(0,255,100,.3);
}

/* Table wrap */
.hof-table-wrap {
  width: 100%;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,215,0,.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,200,.05);
}

.hof-table {
  width: 100%;
  border-collapse: collapse;
}

/* Table header */
.hof-th {
  font-family: var(--font-bang);
  font-size: clamp(9px,.95vw,12px);
  color: rgba(255,215,0,.5);
  letter-spacing: .18em;
  padding: clamp(6px,.8vw,10px) clamp(10px,1.5vw,18px);
  border-bottom: 1px solid rgba(255,215,0,.1);
  text-align: left;
  background: rgba(0,0,0,.3);
}
.hof-th:last-child { text-align: right; }

/* Table rows */
.lb-row {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
  animation: rowIn .4s calc(var(--delay,0s)) cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes rowIn {
  from { opacity:0; transform:translateX(-18px); }
  to   { opacity:1; transform:translateX(0); }
}
.lb-row:hover { background: rgba(255,215,0,.05); }
.lb-row:last-child { border-bottom: none; }

/* Top 3 special styling */
.lb-gold   { background: linear-gradient(90deg,rgba(255,215,0,.12),rgba(255,215,0,.04)); }
.lb-silver { background: linear-gradient(90deg,rgba(200,200,220,.08),rgba(200,200,220,.02)); }
.lb-bronze { background: linear-gradient(90deg,rgba(200,130,60,.08),rgba(200,130,60,.02)); }

/* Rank cell */
.lb-rank-cell {
  padding: clamp(8px,1vw,14px) clamp(10px,1.5vw,18px);
  font-family: var(--font-bang);
  font-size: clamp(16px,2vw,26px);
  width: 52px;
  text-align: center;
  vertical-align: middle;
}
.lb-top3 .lb-rank-cell { filter: drop-shadow(0 0 8px currentColor); }
.lb-rank-num {
  font-family: var(--font-bang);
  font-size: clamp(12px,1.4vw,17px);
  color: rgba(255,255,255,.35);
}

/* Name cell */
.lb-name-cell {
  padding: clamp(8px,1vw,14px) clamp(8px,1.2vw,14px);
  vertical-align: middle;
}
.lb-name {
  display: block;
  font-family: var(--font-bang);
  font-size: clamp(13px,1.6vw,20px);
  color: #fff;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(100px,20vw,240px);
}
.lb-gold   .lb-name { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,.4); }
.lb-silver .lb-name { color: #ddeeff; }
.lb-bronze .lb-name { color: #ffcc88; }
.lb-date {
  display: block;
  font-size: clamp(8px,.8vw,10px);
  color: rgba(255,255,255,.25);
  letter-spacing: .06em;
  margin-top: 1px;
}

/* Stages cell */
.lb-stages-cell {
  padding: clamp(8px,1vw,14px) clamp(6px,.9vw,10px);
  font-family: var(--font-hud);
  font-size: clamp(9px,1vw,12px);
  color: rgba(255,255,255,.35);
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
}

/* Score cell — with animated bar */
.lb-score-cell {
  padding: clamp(8px,1vw,14px) clamp(10px,1.5vw,18px) clamp(8px,1vw,14px) clamp(6px,.8vw,10px);
  vertical-align: middle;
  text-align: right;
  min-width: clamp(90px,14vw,180px);
}
.lb-score-bar-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.lb-score-bar {
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  width: var(--bar,0%);
  height: 100%;
  min-height: 28px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,.08));
  border-radius: 3px;
  transition: width .8s cubic-bezier(.2,1,.4,1);
  pointer-events: none;
}
.lb-score-num {
  position: relative; z-index: 1;
  font-family: var(--font-bang);
  font-size: clamp(14px,1.7vw,22px);
  color: var(--green);
  text-shadow: 0 0 10px rgba(0,255,136,.3);
  letter-spacing: .04em;
  white-space: nowrap;
}
.lb-gold   .lb-score-num { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,.4); }

.lb-empty {
  padding: clamp(20px,3vw,40px);
  text-align: center;
  font-family: var(--font-hud);
  font-size: clamp(12px,1.4vw,16px);
  color: rgba(255,255,255,.35);
  font-style: italic;
}

/* My rank banner */
.hof-my-rank {
  font-family: var(--font-bang);
  font-size: clamp(11px,1.3vw,15px);
  color: rgba(0,255,136,.65);
  letter-spacing: .08em;
  text-align: center;
  padding: 6px 16px;
  background: rgba(0,100,40,.2);
  border: 1px solid rgba(0,255,100,.15);
  border-radius: 20px;
}
.hof-my-rank span { color: var(--gold); }
.hof-my-rank b { color: #fff; }

/* Footer */
.hof-footer {
  display: flex; align-items: center; gap: clamp(6px,1vw,12px);
  flex-wrap: wrap; justify-content: center;
}
.hof-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: livePulse 1.2s ease-in-out infinite alternate;
  flex-shrink: 0;
}
.hof-live-dot.hof-loading {
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  animation: liveSpin 1s linear infinite;
}
@keyframes livePulse { from{opacity:.5;transform:scale(.8)} to{opacity:1;transform:scale(1.2)} }
@keyframes liveSpin  { to{transform:rotate(360deg)} }
.hof-live-text {
  font-size: clamp(9px,.95vw,12px);
  color: rgba(255,255,255,.3);
  font-style: italic;
}
.hof-refresh-btn {
  font-size: clamp(11px,1.2vw,14px) !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  letter-spacing: .06em !important;
}

.hof-btn-row {
  display: flex; gap: clamp(8px,1.2vw,16px); flex-wrap: wrap; justify-content: center;
  padding-top: clamp(4px,.5vw,8px);
  border-top: 1px solid rgba(255,255,255,.06);
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════
   FIGHTER PROFILE SCREEN — shown on Story Mode press
   ════════════════════════════════════════════════════════════════════════ */
.profile-screen {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(0,60,25,.95) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 40%, rgba(30,20,0,.9) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(4,16,6,.98) 0%, #000 100%);
}
.profile-canvas {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

/* Rainbow arc decoration at top */
.profile-rainbow-arc {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 480px; pointer-events: none; z-index: 1;
}
.profile-rainbow-arc::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 12px rgba(255,0,0,.12),
    0 0 0 26px rgba(255,150,0,.1),
    0 0 0 40px rgba(255,255,0,.08),
    0 0 0 54px rgba(0,255,80,.08),
    0 0 0 68px rgba(0,120,255,.07),
    0 0 0 82px rgba(140,0,255,.06);
  animation: rainbowGlow 4s ease-in-out infinite alternate;
}
@keyframes rainbowGlow {
  from { opacity:.5; transform:scale(.97); }
  to   { opacity:1;  transform:scale(1.02); }
}

/* Main card */
.profile-card {
  position: relative; z-index: 2;
  display: flex; align-items: stretch;
  gap: 0;
  background: linear-gradient(135deg, rgba(0,25,10,.92) 0%, rgba(10,8,2,.95) 100%);
  border: 1px solid rgba(0,255,100,.14);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,255,100,.05),
    0 20px 60px rgba(0,0,0,.7),
    0 0 80px rgba(0,80,30,.2),
    inset 0 1px 0 rgba(255,255,255,.06);
  max-width: clamp(500px,88vw,960px);
  width: 100%;
  animation: profileCardIn .55s cubic-bezier(.2,1.15,.4,1) both;
}
@keyframes profileCardIn {
  from { transform: scale(.88) translateY(40px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Left column — fighter portrait */
.profile-portrait-col {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: clamp(20px,3vw,36px) clamp(16px,2.5vw,30px);
  background: linear-gradient(180deg, rgba(0,40,16,.6) 0%, rgba(0,20,8,.9) 100%);
  border-right: 1px solid rgba(0,255,100,.08);
  min-width: clamp(150px,22vw,260px);
  position: relative;
  overflow: hidden;
}
/* Subtle shimmer behind fighter */
.profile-portrait-col::before {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,215,0,.15) 0%, transparent 70%);
  pointer-events: none;
}
/* Ground line under fighter */
.profile-portrait-col::after {
  content: '';
  position: absolute; bottom: 80px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,255,100,.3), transparent);
}
.profile-fighter-canvas {
  display: block; width: clamp(110px,18vw,220px); height: auto;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 18px rgba(0,255,100,.25));
  animation: profileFighterIn .7s .1s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes profileFighterIn {
  from { transform: translateY(40px) scale(.8); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.profile-fighter-label {
  font-family: var(--font-bang);
  font-size: clamp(14px,1.8vw,22px);
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255,215,0,.6), 2px 2px 0 rgba(0,0,0,.8);
  letter-spacing: .06em;
  margin-top: 8px;
  text-align: center;
}
.profile-fighter-title {
  font-family: var(--font-hud);
  font-size: clamp(8px,.9vw,11px);
  color: rgba(0,255,100,.55);
  letter-spacing: .1em;
  text-align: center;
  margin-top: 2px;
  font-style: italic;
}

/* Right column — info */
.profile-info-col {
  flex: 1;
  display: flex; flex-direction: column;
  gap: clamp(12px,1.8vw,22px);
  padding: clamp(20px,3vw,36px) clamp(20px,3vw,36px);
}

/* Heading row */
.profile-heading {
  display: flex; align-items: center;
  gap: clamp(8px,1.2vw,16px);
  padding-bottom: clamp(8px,1.2vw,14px);
  border-bottom: 1px solid rgba(255,215,0,.12);
}
.profile-shamrock {
  font-size: clamp(18px,2.5vw,30px);
  filter: drop-shadow(0 0 10px rgba(0,255,100,.5));
  animation: shamrockFloat 3s ease-in-out infinite;
}
.profile-heading-text {
  font-family: var(--font-bang);
  font-size: clamp(20px,3vw,38px);
  background: linear-gradient(180deg, #fff 20%, var(--gold) 70%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.8)) drop-shadow(0 0 20px rgba(255,200,0,.5));
  letter-spacing: .06em; flex: 1; text-align: center;
}

/* Name section */
.profile-name-section {
  display: flex; flex-direction: column; gap: clamp(5px,.7vw,8px);
}
.profile-label {
  font-family: var(--font-bang);
  font-size: clamp(9px,1vw,12px);
  color: rgba(0,255,100,.6);
  letter-spacing: .18em;
}
.profile-input-wrap { position: relative; }
.profile-name-input {
  width: 100%;
  background: rgba(0,15,6,.85);
  border: 2px solid rgba(0,200,80,.3);
  border-radius: 10px;
  padding: clamp(12px,1.5vw,16px) clamp(14px,2vw,20px);
  font-family: var(--font-bang);
  font-size: clamp(18px,2.5vw,30px);
  color: #fff;
  letter-spacing: .06em;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  caret-color: var(--green);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55);
}
.profile-name-input::placeholder { color: rgba(255,255,255,.2); font-style: italic; }
.profile-name-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,255,100,.18), 0 0 24px rgba(0,255,100,.22), inset 0 2px 8px rgba(0,0,0,.5);
}
/* Animated underline glow */
.profile-input-glow {
  position: absolute; bottom: -1px; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.profile-name-input:focus + .profile-input-glow { opacity: 1; }
.profile-name-hint {
  font-size: clamp(8px,.85vw,10px);
  color: rgba(255,255,255,.22);
  font-style: italic;
  letter-spacing: .05em;
}

/* Stats grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(6px,1vw,12px);
}
.profile-stat {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: clamp(8px,1.2vw,14px) clamp(6px,.8vw,10px);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  transition: border-color .2s, background .2s;
  animation: statCardIn .5s calc(var(--i,.1)*0.08s + .2s) cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes statCardIn {
  from { transform:translateY(16px);opacity:0; }
  to   { transform:translateY(0);opacity:1; }
}
.profile-stat:hover { border-color:rgba(255,215,0,.22); background:rgba(255,215,0,.04); }
.profile-stat-icon { font-size: clamp(18px,2.2vw,26px); }
.profile-stat-label {
  font-family: var(--font-bang);
  font-size: clamp(7px,.78vw,10px);
  color: rgba(255,255,255,.38);
  letter-spacing: .12em;
  white-space: nowrap;
}
.profile-stat-val {
  font-family: var(--font-bang);
  font-size: clamp(14px,1.8vw,24px);
  color: var(--green);
  text-shadow: 0 0 10px rgba(0,255,136,.4);
  white-space: nowrap;
}
.profile-stat-val.gold { color:var(--gold); text-shadow:0 0 10px rgba(255,215,0,.4); }

/* First time message */
.profile-first-time {
  display: flex; align-items: center; gap: clamp(10px,1.5vw,18px);
  background: rgba(0,60,20,.35);
  border: 1px solid rgba(0,255,100,.12);
  border-radius: 12px;
  padding: clamp(12px,1.5vw,18px) clamp(14px,2vw,22px);
}
.profile-ft-icon { font-size: clamp(28px,3.5vw,42px); }
.profile-ft-text {
  font-family: var(--font-hud);
  font-size: clamp(11px,1.2vw,15px);
  color: rgba(200,255,220,.7);
  line-height: 1.6;
  font-style: italic;
}

/* Buttons */
.profile-btn-row {
  display: flex; gap: clamp(8px,1.2vw,16px); flex-wrap: wrap;
}
.profile-play-btn {
  flex: 2;
  font-size: clamp(16px,2.2vw,26px) !important;
  padding: clamp(13px,1.8vw,20px) clamp(20px,3vw,36px) !important;
  animation: btnPulse 1.8s ease-in-out infinite alternate;
}
.profile-lb-btn {
  flex: 1;
  font-size: clamp(12px,1.5vw,18px) !important;
}

/* Stage count row */
.profile-stage-count {
  display: flex; align-items: center; gap: clamp(6px,1vw,12px);
  font-family: var(--font-bang);
  font-size: clamp(8px,.85vw,11px);
  color: rgba(255,255,255,.2);
  letter-spacing: .18em;
  justify-content: center;
}
.profile-stage-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,255,100,.35);
  box-shadow: 0 0 6px rgba(0,255,100,.3);
  animation: livePulse 2s ease-in-out infinite alternate;
}

/* Responsive — stack on small screens */
@media(max-width:600px){
  .profile-card { flex-direction: column; }
  .profile-portrait-col { border-right: none; border-bottom: 1px solid rgba(0,255,100,.08); min-width: unset; padding: 16px; }
  .profile-fighter-canvas { width: 140px; }
  .profile-stats-grid { grid-template-columns: repeat(3,1fr); }
}