/* public/css/arena.css — THE ARENA (Lead chat). On top of money.css + money-card.css: the lobby (pick, challenges, live, ladder) and
   the battle screen (two cards face off, HP bars, a turn clock, the moves, hits that land). Fixed slots: nothing moves the layout. */
.ax { position: relative; z-index: 1; max-width: 1840px; margin: 0 auto; padding: 22px 40px 60px; }
.ax-hero { display: grid; gap: 10px; max-width: 900px; margin: 4px 0 22px; }
.ax-hero h1 { font: 400 64px/0.95 var(--serif); margin: 6px 0 4px; letter-spacing: -0.01em; }
.ax-hero h1 em { color: var(--lime); }
.ax-hero p { color: var(--ink2); font-size: 15.5px; max-width: 760px; margin: 0; }
.ax-hero b { color: var(--ink); }
.ax-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.sec-h { display: flex; align-items: center; gap: 10px; height: 34px; border-bottom: 1px solid var(--line2); margin-bottom: 14px; }
.sec-h .sp, .ax-row .sp, .bt-top .sp { flex: 1; }
.ax-col { min-width: 0; }
.ax-pick .ax-card.big { width: 300px; margin: 0 auto 14px; }
.ax-empty { color: var(--ink3); padding: 22px; border: 1px dashed var(--line2); border-radius: var(--r2); text-align: center; }
.ax-empty.sm { padding: 12px; font-size: 13px; }
.ax-picker { display: grid; gap: 6px; max-height: 236px; overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.ax-chip { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(255, 255, 255, 0.015); transition: border-color .15s, background .15s; }
.ax-chip img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, transparent); }
.ax-chip span { display: grid; min-width: 0; }
.ax-chip b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-chip i { font: 500 11px/1.3 var(--mono); color: var(--ink3); font-style: normal; }
.ax-chip:hover { border-color: var(--line3); }
.ax-chip.on { border-color: var(--lime); background: var(--lime2); }
.ax-actions { display: grid; gap: 8px; margin: 14px 0 12px; }
.ax-actions .pill { justify-content: center; }
.ax-name { display: flex; align-items: center; gap: 10px; }
.ax-name input { flex: 1; background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; color: var(--ink); font: 500 14px var(--sans); padding: 8px 10px; }
.ax-chals { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ax-chal { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 12px; border: 1px solid var(--line2); border-radius: var(--r3); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); }
.ax-chal.card { border-color: rgba(232, 180, 90, .45); background: linear-gradient(180deg, rgba(232, 180, 90, .07), transparent); }
.ax-mini { width: 130px; }
.ax-chal-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ax-by { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ax-by b { font-size: 16px; }
.ax-stake { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.ax-stake.card { color: var(--gold); }
.ax-odds { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); }
.ax-odds b { font-size: 24px; } .ax-odds i { grid-column: 1 / -1; font: 500 11.5px/1.2 var(--sans); color: var(--ink3); font-style: normal; }
.ax-odds.good b { color: var(--lime); } .ax-odds.bad b { color: var(--red); } .ax-odds.even b { color: var(--ink); }
.ax-chal-t .pill { margin-top: auto; justify-content: center; }
.ax-side .sec-h { margin-top: 18px; } .ax-side .sec-h:first-child { margin-top: 0; }
.ax-live, .ax-top, .ax-done { display: grid; gap: 6px; }
.ax-row { all: unset; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); font-size: 13.5px; cursor: default; }
button.ax-row { cursor: pointer; } button.ax-row:hover { border-color: var(--line3); }
.ax-row small { color: var(--ink3); margin: 0 2px 0 1px; }
.ax-bars { display: grid; gap: 3px; width: 70px; margin-left: auto; }
.ax-bars i { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--lime) var(--p), rgba(255, 255, 255, .08) var(--p)); }

/* ───────── the battle */
body.in-battle { overflow: hidden; }
.bt { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; padding: 14px 40px 18px;
  background: radial-gradient(1100px 600px at 50% 40%, rgba(184, 255, 58, .07), transparent 65%), linear-gradient(var(--bg1), var(--bg0)); }
.bt[hidden] { display: none; }
.bt-top { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.bt-top .lbl { color: var(--gold); letter-spacing: .18em; }
.bt-field { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; gap: 20px; min-height: 0; }
.bt-field.mirror .bt-a { order: 3; } .bt-field.mirror .bt-mid { order: 2; } .bt-field.mirror .bt-b { order: 1; }
.bt-side { position: relative; display: grid; justify-items: center; gap: 8px; min-height: 0; }
.bt-who { display: flex; align-items: baseline; gap: 8px; font-size: 18px; height: 26px; }
.bt-who .you { font: 700 10px/1 var(--mono); letter-spacing: .14em; color: #061006; background: var(--lime); padding: 4px 6px; border-radius: 4px; }
.bt-hp { position: relative; width: min(340px, 90%); height: 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bt-hp i { position: absolute; inset: 0 auto 0 0; overflow: hidden; width: 100%; background: linear-gradient(90deg, #6cf06c, var(--lime)); border-radius: 10px; transition: width .55s var(--ease); }
.bt-hp i.mid { background: linear-gradient(90deg, #ffd84a, #f0b75e); } .bt-hp i.lo { background: linear-gradient(90deg, #ff6a4f, #ff8a4c); }
.bt-hp { overflow: visible; margin-bottom: 14px; }
.bt-hp b { position: absolute; right: 0; top: 20px; font-size: 12px; line-height: 1; color: var(--ink2); }
.bt-card { width: min(320px, 26vh * 0.9 + 120px); transition: transform .3s var(--ease), filter .4s; }
.bt-card.lunge { animation: lunge .45s var(--ease); }
.bt-b .bt-card.lunge, .bt-field.mirror .bt-a .bt-card.lunge { animation-name: lungeL; }
.bt-field.mirror .bt-b .bt-card.lunge { animation-name: lunge; }
@keyframes lunge { 40% { transform: translateX(46px) rotate(2deg) scale(1.03); } }
@keyframes lungeL { 40% { transform: translateX(-46px) rotate(-2deg) scale(1.03); } }
.bt-card.shake { animation: shake .42s; } .bt-card.shake2 { animation: shake .6s; filter: brightness(1.6); }
@keyframes shake { 15% { transform: translateX(-9px); filter: brightness(2) saturate(.4); } 35% { transform: translateX(8px); } 55% { transform: translateX(-5px); } 75% { transform: translateX(3px); } }
.bt-card.fainted { filter: grayscale(1) brightness(.55); transform: translateY(18px) rotate(-6deg) scale(.94); }
.bt-card.won { filter: drop-shadow(0 0 30px rgba(184, 255, 58, .55)); transform: scale(1.04); }
.bt-side.fx-guard::after { content: ''; position: absolute; inset: 30px 10%; border: 3px solid var(--sky); border-radius: 22px; box-shadow: 0 0 40px rgba(127, 227, 255, .5), inset 0 0 40px rgba(127, 227, 255, .3); animation: fade 1s forwards; pointer-events: none; }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }
.burst { position: absolute; left: 50%; top: 48%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, var(--c) 40%, transparent 70%); animation: burst .8s ease-out forwards; }
@keyframes burst { from { transform: scale(.3); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.pop { position: absolute; left: 50%; top: 38%; transform: translate(calc(-50% + var(--dx)), 0); font: 800 30px/1 var(--sans); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 18px rgba(0, 0, 0, .6); pointer-events: none; white-space: nowrap; animation: popup 1.3s var(--ease) forwards; }
.pop.dmg { color: #fff; } .pop.eff { color: var(--lime); top: 30%; font-size: 24px; } .pop.weak { color: var(--ink3); top: 30%; font-size: 20px; } .pop.crit { color: var(--gold); top: 24%; font-size: 22px; } .pop.miss { color: var(--ink2); } .pop.guard { color: var(--sky); top: 24%; font-size: 20px; }
@keyframes popup { 0% { opacity: 0; transform: translate(calc(-50% + var(--dx)), 14px) scale(.7); } 15% { opacity: 1; transform: translate(calc(-50% + var(--dx)), 0) scale(1.08); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -46px) scale(1); } }
.bt-mid { display: grid; justify-items: center; gap: 12px; }
.bt-clock { position: relative; width: 96px; height: 96px; }
.bt-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bt-clock .trk { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 7; }
.bt-clock .arc { fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; transition: stroke .3s; } .bt-clock .arc.hurry { stroke: var(--red); }
.bt-clock b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; }
.bt-vs { font: 400 44px/1 var(--serif); font-style: italic; color: var(--ink3); }
.bt-say { min-height: 40px; text-align: center; color: var(--ink2); font-size: 13.5px; max-width: 180px; }
.bt-moves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 1200px; width: 100%; margin: 0 auto; min-height: 72px; }
.mv { all: unset; cursor: pointer; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c, #7fe3ff) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c, #7fe3ff) 16%, transparent), rgba(0, 0, 0, .2)); transition: transform .12s, border-color .15s, opacity .2s; }
.mv:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--c, #7fe3ff); }
.mv:disabled { opacity: .45; cursor: default; } .mv.picked { opacity: 1; outline: 2px solid var(--lime); }
.mv .gc-en { grid-row: 1 / 3; width: 30px; height: 30px; }
.mv-n { display: grid; } .mv-n b { font-size: 15px; } .mv-n i { font: 500 11px/1.3 var(--mono); color: var(--ink3); font-style: normal; }
.mv-x { grid-column: 2; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); min-height: 11px; }
.mv-x.super { color: var(--lime); } .mv-x.weak { color: var(--red); }
.mv.guard { --c: #7fe3ff; } .mv .shield { grid-row: 1 / 3; font-size: 26px; color: var(--sky); width: 30px; text-align: center; }
.bt-log { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; gap: 3px; height: 74px; overflow: hidden; color: var(--ink2); font-size: 13px; }
.bt-log div:first-child { color: var(--ink); }
.bt-end { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4, 10, 7, .72); backdrop-filter: none; z-index: 5; }
.bt-end[hidden] { display: none; }
.be-in { text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 620px; padding: 26px; }
.be-in h2 { font: 400 72px/1 var(--serif); margin: 0; } .be-in h2 em { color: var(--lime); }
.be-in p { color: var(--ink2); font-size: 16px; margin: 0; }
.be-b { display: flex; gap: 10px; margin-top: 8px; }

@media (max-width: 1500px) { .ax-grid { grid-template-columns: 330px minmax(0, 1fr); } .ax-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; } .ax-side .sec-h { margin-top: 0; } }
@media (max-width: 860px) {
  .ax { padding: 14px 16px 50px; } .ax-hero h1 { font-size: 44px; } .ax-grid { grid-template-columns: 1fr; } .ax-side { grid-template-columns: 1fr; }
  .ax-chals { grid-template-columns: 1fr; } .ax-pick .ax-card.big { width: 240px; }
  .bt { padding: 10px 12px 12px; gap: 6px; } .bt-field { grid-template-columns: 1fr 70px 1fr; gap: 6px; } .bt-card { width: 100%; max-width: 168px; }
  .bt-clock { width: 60px; height: 60px; } .bt-clock b { font-size: 18px; } .bt-vs { font-size: 26px; } .bt-say { display: none; } .bt-who { font-size: 13px; height: 18px; }
  .bt-moves { grid-template-columns: 1fr 1fr; gap: 6px; } .mv { padding: 9px 10px; } .mv-n b { font-size: 13px; } .bt-log { height: 40px; font-size: 12px; }
  .be-in h2 { font-size: 48px; }
}

/* five pages in the phone tab row (the money pages' row has four): the arena's own sheet widens it here */
@media (max-width: 860px) { .mnav { grid-template-columns: repeat(5, 1fr) !important; } .mnav a { font-size: 12.5px !important; } }

/* ───────── combat v2 (owner 10-21: "make the combat more epic with more moves") */
.bt-en { width: min(340px, 90%); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; height: 14px; }
.bt-en .lbl { font-size: 9.5px; letter-spacing: .14em; }
.bt-en i { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bt-en i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #f0b75e, #ffd84a); border-radius: 6px; transition: width .5s var(--ease); }
.bt-en i.full::after { background: linear-gradient(90deg, #ffd84a, #fff6c2, #ffd84a); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; box-shadow: 0 0 14px #ffd84a; }
.bt-en .lbl:first-child { color: var(--ink3); } .charged .bt-en .lbl { color: var(--gold); }
@keyframes shimmer { to { background-position: -200% 0; } }
.bt-fx { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 24px; width: min(340px, 90%); }
.bt-fx .st { font: 600 11px/1 var(--mono); padding: 5px 8px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); color: var(--ink2); }
.st.burn { color: #ff9a5c; border-color: rgba(255, 138, 76, .5); } .st.poison { color: #d58bff; border-color: rgba(200, 120, 255, .5); } .st.freeze { color: #9fe6ff; border-color: rgba(159, 230, 255, .5); }
.st.dazzle { color: #ffe17a; border-color: rgba(255, 216, 74, .5); } .st.shield { color: var(--sky); border-color: rgba(127, 227, 255, .5); } .st.boost { color: var(--lime); border-color: rgba(184, 255, 58, .5); }
.charged .bt-card { filter: drop-shadow(0 0 22px rgba(255, 216, 74, .45)); }
/* the move buttons: four moves, then Guard and the ULTIMATE */
.bt-moves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-n em { display: block; font: 400 11px/1.25 var(--sans); color: var(--ink3); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mv.ult { grid-column: span 3; position: relative; overflow: hidden; grid-template-columns: auto 1fr; border-color: rgba(255, 216, 74, .35); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255, 216, 74, .08)); }
.mv.ult .ult-k { grid-row: 1 / 3; font: 800 11px/1 var(--mono); letter-spacing: .16em; color: var(--gold); writing-mode: vertical-rl; transform: rotate(180deg); }
.mv.ult .ult-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p); background: linear-gradient(90deg, #f0b75e, #ffd84a); transition: width .5s var(--ease); }
.mv.ult.ready { border-color: #ffd84a; box-shadow: 0 0 0 1px rgba(255, 216, 74, .4), 0 0 28px rgba(255, 216, 74, .25); animation: ultpulse 1.4s ease-in-out infinite; }
.mv.ult.ready b { color: #fff3c4; }
@keyframes ultpulse { 50% { box-shadow: 0 0 0 1px rgba(255, 216, 74, .7), 0 0 44px rgba(255, 216, 74, .45); } }
.mv.ult:disabled:not(.ready) { opacity: .55; }
/* hits that land */
.burst.big { width: 60px; height: 60px; margin: -30px; animation-duration: 1s; }
.spark { position: absolute; left: 50%; top: 48%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); pointer-events: none; animation: spark .85s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes spark { from { transform: translate(0, 0) scale(var(--s)); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; } }
.bt.quake1 { animation: quake .35s; } .bt.quake2 { animation: quake .6s; }
@keyframes quake { 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); } 45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); } }
.bt-side.fx-heal::after, .bt-side.fx-boost::after, .bt-side.fx-burn::after, .bt-side.fx-poison::after, .bt-side.fx-freeze::after, .bt-side.fx-dazzle::after {
  content: ''; position: absolute; inset: 60px 6%; border-radius: 22px; pointer-events: none; animation: fade 1s forwards; }
.bt-side.fx-heal::after { box-shadow: 0 0 50px rgba(108, 240, 108, .6), inset 0 0 50px rgba(108, 240, 108, .35); }
.bt-side.fx-boost::after { box-shadow: 0 0 50px rgba(184, 255, 58, .6), inset 0 0 40px rgba(184, 255, 58, .3); }
.bt-side.fx-burn::after { box-shadow: 0 0 50px rgba(255, 120, 60, .7), inset 0 0 50px rgba(255, 120, 60, .4); }
.bt-side.fx-poison::after { box-shadow: 0 0 50px rgba(190, 100, 255, .7), inset 0 0 50px rgba(190, 100, 255, .4); }
.bt-side.fx-freeze::after { box-shadow: 0 0 60px rgba(159, 230, 255, .8), inset 0 0 60px rgba(220, 245, 255, .5); background: rgba(200, 240, 255, .08); }
.bt-side.fx-dazzle::after { box-shadow: 0 0 60px rgba(255, 230, 120, .8), inset 0 0 60px rgba(255, 250, 200, .5); }
.pop.heal { color: #8cff8c; } .pop.frz { color: #bff0ff; top: 30%; font-size: 26px; } .pop.dmg.big { font-size: 46px; color: #fff6c2; text-shadow: 0 0 24px rgba(255, 216, 74, .8), 0 3px 0 rgba(0, 0, 0, .5); }
.pop.st-burn { color: #ff9a5c; top: 26%; font-size: 22px; } .pop.st-poison { color: #d58bff; top: 26%; font-size: 22px; } .pop.st-freeze { color: #bff0ff; top: 26%; font-size: 22px; } .pop.st-dazzle { color: #ffe17a; top: 26%; font-size: 22px; }
/* the ULTIMATE cut-in */
.cutin { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; overflow: hidden; animation: ciin .25s ease-out; }
.cutin.out { animation: ciout .26s ease-in forwards; }
.ci-band { position: absolute; left: -10%; right: -10%; top: 30%; height: 40%; transform: skewY(-8deg); background: linear-gradient(90deg, rgba(4, 10, 7, .9), color-mix(in srgb, var(--c) 70%, #000) 30%, var(--c) 50%, color-mix(in srgb, var(--c) 70%, #000) 70%, rgba(4, 10, 7, .9)); box-shadow: 0 0 80px var(--c); }
.ci-lines { position: absolute; inset: 0; background: repeating-linear-gradient(-8deg, transparent 0 22px, rgba(255, 255, 255, .07) 22px 24px); animation: speed .4s linear infinite; mix-blend-mode: screen; }
@keyframes speed { to { background-position: -240px 0; } }
.ci-art { position: absolute; left: 6%; top: 50%; height: 64%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; transform: translateY(-50%) skewY(-8deg); box-shadow: 0 0 60px var(--c), 0 30px 80px rgba(0, 0, 0, .6); animation: ciart 1.5s cubic-bezier(.2, .8, .2, 1); }
.ci-t { position: relative; display: grid; justify-items: start; gap: 6px; margin-left: 34%; transform: skewY(-8deg); }
.ci-t .lbl { color: #fff6c2; letter-spacing: .4em; font-size: 14px; }
.ci-t b { font: 400 96px/0.95 var(--serif); color: #fff; text-shadow: 0 0 40px var(--c), 0 4px 0 rgba(0, 0, 0, .4); animation: cit .5s cubic-bezier(.2, 1.4, .3, 1); }
.ci-t i { font: 600 18px/1 var(--sans); color: rgba(255, 255, 255, .85); font-style: normal; }
@keyframes ciin { from { opacity: 0; } } @keyframes ciout { to { opacity: 0; transform: scale(1.06); } }
@keyframes ciart { from { transform: translate(-60%, -50%) skewY(-8deg) scale(.9); } to { transform: translate(0, -50%) skewY(-8deg) scale(1.04); } }
@keyframes cit { from { transform: translateX(120px) scale(1.6); opacity: 0; } }
@media (max-width: 860px) {
  .bt-moves { grid-template-columns: 1fr 1fr; } .mv.ult { grid-column: span 2; } .mv-n em { display: none; } .bt-en, .bt-fx { width: 100%; } .bt-fx .st { font-size: 9px; padding: 3px 5px; }
  .ci-t { margin-left: 8%; } .ci-t b { font-size: 46px; } .ci-art { left: auto; right: -10%; height: 46%; opacity: .55; }
}

/* ───────── the MAIN EVENT (the lobby always shows a fight live) */
.ax-main { position: relative; margin: 0 0 26px; padding: 16px 20px 18px; border-radius: 22px; border: 1px solid rgba(255, 216, 74, .25); overflow: hidden;
  background: radial-gradient(900px 300px at 50% 0%, rgba(255, 216, 74, .08), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .15)); }
.ax-main[hidden] { display: none; }
.ax-main.enter { animation: amIn .6s var(--ease); } @keyframes amIn { from { opacity: 0; transform: translateY(10px); } }
.ax-main.ultfx::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 240, 180, .35), transparent 60%); animation: fade .9s forwards; pointer-events: none; }
.am-head { display: flex; align-items: center; gap: 14px; height: 36px; margin-bottom: 8px; } .am-head .sp { flex: 1; } .am-head .lbl { color: var(--gold); letter-spacing: .2em; }
.am-field { display: grid; grid-template-columns: 1fr minmax(260px, 420px) 1fr; align-items: center; gap: 22px; }
.am-side { display: grid; justify-items: center; gap: 8px; }
.am-who { font-size: 17px; height: 22px; }
.am-hp { position: relative; width: 220px; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.am-hp i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #6cf06c, var(--lime)); border-radius: 10px; transition: width .5s var(--ease); }
.am-hp i.mid { background: linear-gradient(90deg, #ffd84a, #f0b75e); } .am-hp i.lo { background: linear-gradient(90deg, #ff6a4f, #ff8a4c); }
.am-card { width: 210px; transition: transform .3s var(--ease), filter .4s; }
.am-card.lunge { animation: lunge .4s var(--ease); } #am-b .am-card.lunge { animation-name: lungeL; }
.am-card.shake { animation: shake .4s; } .am-card.fainted { filter: grayscale(1) brightness(.55); transform: translateY(12px) rotate(-5deg) scale(.95); }
.am-card.won { filter: drop-shadow(0 0 26px rgba(184, 255, 58, .55)); transform: scale(1.04); }
.am-mid { display: grid; justify-items: center; gap: 12px; text-align: center; }
.am-vs { font: 400 64px/1 var(--serif); font-style: italic; color: var(--ink3); }
.am-say { min-height: 48px; color: var(--ink2); font-size: 15px; } .am-say b.ult { font: 400 30px/1.1 var(--serif); } .am-say b.win { font: 400 36px/1 var(--serif); color: var(--lime); }
/* ───────── the battle's entrance: the cards fly in, VS slams */
.bt-field.enter .bt-a .bt-card { animation: flyL .7s cubic-bezier(.2, .9, .25, 1.15); } .bt-field.enter .bt-b .bt-card { animation: flyR .7s cubic-bezier(.2, .9, .25, 1.15); }
.bt-field.mirror.enter .bt-a .bt-card { animation-name: flyR; } .bt-field.mirror.enter .bt-b .bt-card { animation-name: flyL; }
.bt-field.enter .bt-vs { animation: slam .6s .35s cubic-bezier(.2, 1.6, .3, 1) both; }
@keyframes flyL { from { transform: translateX(-60vw) rotate(-18deg); } } @keyframes flyR { from { transform: translateX(60vw) rotate(18deg); } }
@keyframes slam { from { transform: scale(4); opacity: 0; } }
/* ───────── the winner: a spotlight and confetti */
.conf { position: absolute; left: 50%; top: 40%; width: 9px; height: 14px; background: var(--c); border-radius: 2px; pointer-events: none; z-index: 6;
  animation: conf 2.4s var(--d) cubic-bezier(.15, .6, .3, 1) forwards; }
@keyframes conf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(calc(var(--x) * .8), var(--y)) rotate(var(--r)); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 520px)) rotate(calc(var(--r) * 2)); opacity: 0; } }
.bt-card.won { filter: drop-shadow(0 0 40px rgba(184, 255, 58, .7)) drop-shadow(0 0 90px rgba(255, 216, 74, .35)); transform: scale(1.06); }
@media (max-width: 1500px) { .am-card { width: 170px; } .am-vs { font-size: 44px; } }
@media (max-width: 860px) { .am-field { grid-template-columns: 1fr 1fr; } .am-mid { grid-column: 1 / -1; order: 3; } .am-card { width: 140px; } .am-hp { width: 140px; } .am-head .pill { padding: 6px 10px; font-size: 12px; } }

/* watching (no moves to pick): the cards take the room */
.bt.spect .bt-moves { display: none; } .bt.spect .bt-card { width: min(400px, 36vh * 0.9 + 140px); } .bt.spect .bt-log { height: 96px; }
@media (max-width: 860px) { .bt.spect .bt-card { max-width: 180px; } }
.am-head .lbl, .am-head .mono { white-space: nowrap; }
@media (max-width: 860px) { .am-head { gap: 8px; } .am-head .lbl { font-size: 9.5px; letter-spacing: .12em; } .am-head .mono { font-size: 11px; } }

/* THE 3D ARENA (js/arena3d.js): the WebGL ring fills the battle screen behind everything; the cards step aside for the 3D fighters,
   names, health, energy and the moves float over the ring */
.bt > canvas.a3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.bt > :not(canvas) { position: relative; z-index: 1; }
.bt > .bt-end { position: absolute; z-index: 5; } .bt > .cutin { position: absolute; z-index: 8; }
.bt:has(> canvas.a3d) { background: #050d09; }
.bt:has(> canvas.a3d) .bt-card { display: none; }
.bt:has(> canvas.a3d) .bt-field { align-items: start; }
.bt:has(> canvas.a3d) .bt-side { align-self: start; justify-self: center; width: min(100%, 420px); padding: 10px 14px 12px; border-radius: 14px; background: rgba(4, 10, 7, .55); backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(214, 255, 190, .1); }
.bt:has(> canvas.a3d) .bt-mid { align-self: start; }
.bt:has(> canvas.a3d) .bt-log { background: linear-gradient(180deg, transparent, rgba(4, 10, 7, .6)); border-radius: 10px; padding: 4px 10px; }