.battle-stage{
  --stage-rarity:#b7ff38;
  --stage-soft:rgba(183,255,56,.2);
  position:fixed;
  inset:0;
  z-index:105;
  display:none;
  overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#152015 0,#090d0b 46%,#050607 78%);
  color:#f3f6f1
}

.battle-stage.open{display:block}

.battle-stage:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(183,255,56,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(183,255,56,.045) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(circle at 50% 45%,#000,transparent 70%);
  pointer-events:none
}

.battle-stage-top{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px clamp(18px,4vw,52px)
}

.battle-stage-top .brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;color:#fff}
.battle-stage-top .brand em{color:#b7ff38;font-style:normal}
.battle-stage-top .brand-mark{width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#b7ff38}
.battle-stage-top .brand-mark img{width:100%;height:100%;object-fit:cover}
.battle-stage-tools{display:flex;align-items:center;gap:9px}
.battle-stage-tools button{height:36px;padding:0 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(8,11,9,.72);color:#dce3dc;font:800 9px/1 monospace;letter-spacing:.12em;cursor:pointer}
.battle-stage-tools button:hover{border-color:rgba(183,255,56,.45);color:#b7ff38}
.battle-stage-tools .battle-stage-close{width:36px;padding:0;font-size:20px;font-family:sans-serif;letter-spacing:0}

.battle-stage-heading{
  position:absolute;
  z-index:4;
  top:clamp(70px,10vh,96px);
  left:50%;
  width:min(720px,calc(100% - 40px));
  text-align:center;
  transform:translateX(-50%)
}

.battle-stage-heading .kicker{display:block;color:var(--stage-rarity);font:800 9px monospace;letter-spacing:.18em;text-transform:uppercase}
.battle-stage-heading h2{margin:8px 0 6px;font-size:clamp(26px,3.6vw,44px);line-height:.98;letter-spacing:-.045em}
.battle-stage-heading p{margin:0;color:#98a299;font-size:12px}
.battle-stage-heading p b{color:#fff}

.battle-stage-row{
  position:absolute;
  z-index:3;
  left:50%;
  top:52%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(12px,2vw,30px);
  width:min(1500px,calc(100% - 30px));
  transform:translate(-50%,-50%)
}

.stage-seat{
  --seat-width:clamp(150px,calc((100vw - 220px) / var(--seats,2)),300px);
  width:var(--seat-width);
  flex:0 0 auto;
  display:grid;
  gap:12px;
  justify-items:center;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)
}

.battle-stage.live .stage-seat{opacity:1;transform:none}
.stage-seat:nth-child(2){transition-delay:.08s}
.stage-seat:nth-child(3){transition-delay:.16s}
.stage-seat:nth-child(4){transition-delay:.24s}

.stage-player{
  display:grid;
  gap:3px;
  text-align:center
}

.stage-player strong{font-size:13px}
.stage-player span{color:#7f8a80;font:700 8px monospace;letter-spacing:.12em;text-transform:uppercase}

.stage-card{
  position:relative;
  width:100%;
  aspect-ratio:3/4.6;
  perspective:1400px
}

.stage-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 1.5s cubic-bezier(.34,.7,.18,1)
}

.stage-seat.flipped .stage-card-inner{transform:rotateY(180deg)}

.battle-stage[data-phase=ripping] .stage-card-inner{animation:stageShake .5s ease-in-out infinite}

.stage-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:linear-gradient(160deg,#151b16,#0a0e0b 62%);
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04)
}

.stage-back{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  padding:16px
}

.stage-back:before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-130px;
  top:-110px;
  border:1px solid var(--stage-soft);
  border-radius:50%;
  box-shadow:0 0 80px var(--stage-soft);
  pointer-events:none
}

.stage-back-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font:800 8px/1 monospace;
  letter-spacing:.15em;
  color:#c9d1c8
}

.stage-back-head strong{padding:6px 8px;border:1px solid var(--stage-rarity);border-radius:999px;color:var(--stage-rarity);box-shadow:0 0 16px var(--stage-soft)}

.stage-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:0
}

.stage-logo img{width:min(72px,32%);height:auto;object-fit:contain;filter:drop-shadow(0 0 22px var(--stage-soft))}
.stage-logo b{font-size:clamp(15px,1.5vw,22px);letter-spacing:-.04em}
.stage-logo small{font:700 7px/1.2 monospace;letter-spacing:.14em;color:#8d978f}

.stage-data{
  display:grid;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  overflow:hidden
}

.stage-data>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  padding:9px 11px;
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:.14;
  transform:translateY(5px);
  transition:opacity .22s ease,transform .22s ease,background .22s ease
}

.stage-data>div:last-child{border-bottom:0}

.stage-data>div.released{
  opacity:1;
  transform:none;
  background:linear-gradient(135deg,var(--stage-soft),transparent);
  animation:stageLock .38s cubic-bezier(.2,.9,.2,1)
}

.stage-data span{font:700 7px/1 monospace;letter-spacing:.14em;color:#7d877f}
.stage-data b{overflow:hidden;font-size:clamp(10px,1vw,13px);text-overflow:ellipsis;white-space:nowrap}

.stage-front{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:10px;
  padding:12px;
  transform:rotateY(180deg)
}

.stage-front-image{
  position:relative;
  display:grid;
  place-items:center;
  min-height:0;
  overflow:hidden;
  border-radius:12px;
  background:radial-gradient(circle at 50% 40%,var(--stage-soft),transparent 62%),#070a08
}

.stage-front-image img{width:100%;height:100%;object-fit:contain;padding:6px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.6))}

.stage-front-copy{
  display:grid;
  gap:4px;
  text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease
}

.stage-seat.valued .stage-front-copy{opacity:1;transform:none}
.stage-front-copy small{color:var(--stage-rarity);font:800 7px/1 monospace;letter-spacing:.15em}
.stage-front-copy strong{overflow:hidden;font-size:clamp(11px,1.05vw,14px);line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.stage-front-copy b{color:#ffcf4a;font-size:clamp(15px,1.5vw,22px);letter-spacing:-.03em;text-shadow:0 0 16px rgba(255,207,74,.35)}

.stage-seat.winner .stage-face{border-color:#b7ff38;box-shadow:0 0 0 1px rgba(183,255,56,.4),0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(183,255,56,.35)}
.stage-seat.winner{animation:stageWinner 1s cubic-bezier(.16,.82,.24,1) both}
.stage-seat.lost{opacity:.42;filter:saturate(.6)}
.stage-seat.lost .stage-card-inner{transform:rotateY(180deg) scale(.94)}

.stage-badge{
  position:absolute;
  z-index:4;
  top:-12px;
  left:50%;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:#171d18;
  color:#8a938b;
  font:800 7px monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  transform:translateX(-50%)
}

.stage-seat.winner .stage-badge{background:#b7ff38;color:#091008;box-shadow:0 0 22px rgba(183,255,56,.5)}

.battle-stage-result{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:clamp(20px,6vh,60px);
  width:min(640px,calc(100% - 30px));
  padding:18px 22px;
  border:1px solid rgba(183,255,56,.3);
  border-radius:16px;
  background:radial-gradient(circle at 12% 0,rgba(183,255,56,.16),transparent 40%),rgba(9,13,10,.9);
  box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 40px rgba(183,255,56,.12);
  text-align:center;
  opacity:0;
  transform:translate(-50%,16px);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none
}

.battle-stage-result.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.battle-stage-result .kicker{display:block;color:#b7ff38;font:800 8px monospace;letter-spacing:.16em;text-transform:uppercase}
.battle-stage-result h3{margin:7px 0 4px;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.04em}
.battle-stage-result p{margin:0 0 12px;color:#98a299;font-size:12px}
.battle-stage-result .button{min-height:40px;padding:0 18px;border-radius:10px}

.battle-stage-status{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:clamp(18px,5vh,48px);
  color:#98a299;
  font:700 9px monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  transform:translateX(-50%);
  transition:opacity .3s ease
}

.battle-stage.settled .battle-stage-status{opacity:0}

@keyframes stageShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-2px,1px) rotate(-1.2deg)}
  75%{transform:translate(2px,-1px) rotate(1.2deg)}
}

@keyframes stageLock{
  0%{transform:translateY(8px) scale(.96)}
  55%{transform:translateY(-2px) scale(1.02)}
  100%{transform:none}
}

@keyframes stageWinner{
  0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-16px) scale(1.06)}
  100%{transform:translateY(-8px) scale(1.04)}
}

@media(max-width:760px){
  .battle-stage-heading{top:66px}
  .battle-stage-heading h2{font-size:24px}
  .battle-stage-row{top:50%;flex-wrap:wrap;gap:12px;width:calc(100% - 20px)}
  .stage-seat{--seat-width:calc(50% - 6px)}
  .stage-card{aspect-ratio:3/4.4}
  .stage-back{padding:11px;gap:6px}
  .stage-logo img{width:40px}
  .stage-data>div{min-height:34px;padding:6px 8px}
  .battle-stage-result{padding:14px}
}

@media(prefers-reduced-motion:reduce){
  .stage-seat,.stage-card-inner,.stage-data>div,.stage-front-copy,.battle-stage-result{transition:none}
  .battle-stage[data-phase=ripping] .stage-card-inner,.stage-data>div.released,.stage-seat.winner{animation:none}
}

.battle-stage.settled .battle-stage-row{transform:translate(-50%,-60%)}
.battle-stage-row{transition:transform .6s cubic-bezier(.2,.8,.2,1)}

.battle-stage-countdown{
  position:absolute;
  z-index:7;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#b7ff38;
  font:900 clamp(80px,16vw,190px)/1 sans-serif;
  letter-spacing:-.06em;
  text-shadow:0 0 60px rgba(183,255,56,.55);
  opacity:0;
  transition:opacity .2s ease
}

.battle-stage-countdown.show{opacity:1;animation:stageCountPop .8s cubic-bezier(.2,.9,.3,1.2)}

@keyframes stageCountPop{
  0%{transform:scale(.5)}
  55%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

.stage-seat.stage-unfilled .stage-face{border-style:dashed;border-color:rgba(183,255,56,.28);background:rgba(10,14,11,.5);box-shadow:none}
.stage-seat.stage-unfilled .stage-logo img{opacity:.4}
.stage-seat.stage-unfilled .stage-data{opacity:.5}
.stage-seat.stage-unfilled .stage-player strong{color:#7f8a80}
.stage-seat.stage-waiting .stage-face{border-color:rgba(183,255,56,.22)}
.battle-stage[data-phase=lobby] .stage-seat:not(.stage-unfilled) .stage-card-inner{animation:stageIdle 3.4s ease-in-out infinite}
.battle-stage[data-phase=settling] .stage-card-inner{animation:stageShake .5s ease-in-out infinite}

@keyframes stageIdle{
  0%,100%{transform:translateY(0) rotateY(0)}
  50%{transform:translateY(-6px) rotateY(3deg)}
}

@media(prefers-reduced-motion:reduce){
  .battle-stage-countdown.show,.battle-stage[data-phase=lobby] .stage-seat:not(.stage-unfilled) .stage-card-inner,.battle-stage[data-phase=settling] .stage-card-inner{animation:none}
}

/* seat beats stay sealed until the shared beat fires */
.stage-data>div{position:relative;opacity:.58;transform:none}
.stage-data>div b{transition:opacity .28s ease,filter .28s ease,transform .28s ease}
.stage-data>div:not(.released) b{opacity:0;filter:blur(8px);transform:translateY(4px);user-select:none}
.stage-data>div:not(.released):after{content:"SEALED";position:absolute;right:11px;top:50%;transform:translateY(-50%);font:800 7px/1 monospace;letter-spacing:.18em;color:rgba(255,255,255,.3)}
.stage-data>div.released{opacity:1}