/* ==========================================================================
   BATTLE ARENA STYLES
   ==========================================================================
   The battle screen is the most animation-dense surface in the product, so
   every rule here is written for the compositor: transforms and opacity only,
   explicit `will-change` on the handful of elements that actually move, and
   `contain` to stop layout work escaping a card's subtree.
   ========================================================================== */

.arena {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--bg-void);
  overflow: hidden;
  /* Isolate so the shake transform never affects the rest of the app. */
  isolation: isolate;
}

/* The stage canvas sits behind everything and renders all VFX. */
.arena-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Screen-shake wrapper. Driven by a CSS variable the JS updates per frame. */
.arena-shake {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--shake-x, 0), var(--shake-y, 0), 0);
  will-change: transform;
}

/* Full-screen white flash on heavy impacts. */
.arena-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity;
}

/* Speed lines during Rising Rush / Ultimates. */
.speedlines {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg 2deg,
    rgba(255,255,255,.5) 2deg 2.6deg,
    transparent 2.6deg 6deg
  );
  mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 62%);
  will-change: opacity, transform;
}
.speedlines.on { animation: speedPulse .62s var(--e-out); }
@keyframes speedPulse {
  0%   { opacity: 0; transform: scale(1.35) rotate(0deg); }
  35%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1) rotate(9deg); }
}

/* ---------------------------------------------------------------- HUD top */
.hud {
  position: relative;
  z-index: 20;
  padding: var(--s3) var(--s4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.hud-row { display: flex; align-items: center; gap: var(--s3); }
.hud-row.enemy { flex-direction: row-reverse; }

/* Portrait + gauges for the active fighter of each side. */
.combatant {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.combatant.enemy { flex-direction: row-reverse; }

.portrait {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-deep);
  position: relative;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.portrait canvas { width: 100%; height: 100%; }
.portrait.hurt { animation: portraitHurt .34s var(--e-out); }
@keyframes portraitHurt {
  0%,100% { transform: translate3d(0,0,0); border-color: var(--line); }
  25% { transform: translate3d(-4px,0,0); border-color: var(--crimson); }
  75% { transform: translate3d(4px,0,0); border-color: var(--crimson); }
}

.gauges { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gauge-name {
  font-family: var(--f-display);
  font-size: 13px; font-weight: 650;
  letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.gauge-name .el-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto; box-shadow: 0 0 7px currentColor;
}
.hp-row { display: flex; align-items: center; gap: 6px; }
.hp-row .bar { flex: 1; height: 9px; }
.hp-num { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-soft);
  min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.ki-row { display: flex; align-items: center; gap: 6px; }
.ki-row .bar { flex: 1; height: 5px; }

/* Team pips: one per bench member, dimmed when KO'd. */
.team-pips { display: flex; gap: 4px; flex: 0 0 auto; }
.pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 7px currentColor;
  transition: background var(--t-mid), opacity var(--t-mid);
}
.pip.down { background: var(--ink-dim); box-shadow: none; opacity: .45; }

/* Rush Orb tracker */
.orbs { display: flex; gap: 4px; justify-content: center; padding: 2px 0; }
.orb {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1.5px solid var(--line);
  position: relative;
  transition: transform var(--t-mid) var(--e-spring), background var(--t-mid);
}
.orb.lit {
  background: radial-gradient(circle at 35% 30%, #fff4c9, var(--gold) 45%, var(--orange));
  border-color: var(--gold-hot);
  box-shadow: 0 0 12px rgba(255,180,40,.75);
  transform: scale(1.14);
}
.orb.just-lit { animation: ballPop .5s var(--e-spring); }
@keyframes ballPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.55); }
  100% { transform: scale(1.14); }
}

/* ------------------------------------------------------------ stage floor */
/*
 * `.stage` lives inside the absolutely-positioned shake wrapper so it can host
 * screen-space effects (damage numbers, banners, fighter sprites) without
 * participating in the arena's flex flow.
 */
.stage {
  position: absolute;
  /* Confined between the HUD and the card dock so sprites and floating
     numbers can never render underneath the controls. */
  top: 96px;
  left: 0; right: 0;
  bottom: 210px;
  z-index: 10;
  pointer-events: none;
}
@media (max-width: 640px) { .stage { top: 118px; bottom: 196px; } }
@media (min-width: 900px) { .stage { bottom: 240px; } }

/*
 * `.arena-mid` is the in-flow flex spacer that reserves the vertical space
 * between the HUD and the dock. Without it the dock collapses upward and the
 * bottom half of the screen is dead space.
 */
.arena-mid {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 5;
  pointer-events: none;
}

/* Ground plane — gives the fighters something to stand on. */
.arena-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background:
    linear-gradient(180deg, transparent, rgba(80,120,220,.07) 40%, rgba(140,180,255,.13)),
    radial-gradient(120% 70% at 50% 100%, rgba(120,160,255,.16), transparent 70%);
  border-top: 1px solid rgba(150,190,255,.16);
  pointer-events: none;
}
.arena-floor::after {
  /* Perspective grid lines. */
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(150,190,255,.10) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(150,190,255,.07) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(180deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
}

/* ------------------------------------------------------- fighter sprites */
/*
 * The two active combatants rendered large on the stage. These are what the
 * VFX play against, so the fight reads as a fight rather than two health bars.
 */
.sprite {
  position: absolute;
  z-index: 2;
  width: clamp(88px, 18vw, 168px);
  aspect-ratio: 3/4;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, filter;
  pointer-events: none;
  transition: filter var(--t-fast);
}
.sprite canvas {
  width: 100%; height: 100%;
  display: block;
  /*
   * Feather the rectangular canvas into the scene so it reads as a character
   * standing on the stage rather than a portrait card pasted on top. An
   * elliptical mask fades the corners and the outer edge to nothing.
   */
  mask-image:
    radial-gradient(78% 62% at 50% 44%, #000 52%, rgba(0,0,0,.55) 74%, transparent 96%);
  -webkit-mask-image:
    radial-gradient(78% 62% at 50% 44%, #000 52%, rgba(0,0,0,.55) 74%, transparent 96%);
}
/* Shadow lives on the wrapper so it is not clipped by the canvas mask. */
.sprite-inner { filter: drop-shadow(0 16px 26px rgba(0,0,0,.7)); }

/* Ground shadow ellipse. */
.sprite::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -7%;
  width: 62%; height: 11%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
}

/* Idle breathing/float — subtle, and disabled under reduced motion. */
.sprite-inner {
  width: 100%; height: 100%;
  animation: idleFloat 3.4s ease-in-out infinite;
  will-change: transform;
}
.sprite.enemy .sprite-inner { animation-delay: -1.7s; }
@keyframes idleFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -8px, 0) scale(1.014); }
}

/* Player faces right, enemy faces left. */
.sprite.enemy .sprite-inner { transform: scaleX(-1); }
.sprite.enemy .sprite-inner { animation-name: idleFloatFlipped; }
@keyframes idleFloatFlipped {
  0%, 100% { transform: scaleX(-1) translate3d(0, 0, 0) scale(1); }
  50%      { transform: scaleX(-1) translate3d(0, -8px, 0) scale(1.014); }
}

/* Attack lunge toward the opponent. */
.sprite.attacking { animation: lungeRight .42s var(--e-out); }
.sprite.enemy.attacking { animation: lungeLeft .42s var(--e-out); }
@keyframes lungeRight {
  0%   { transform: translate3d(-50%,-50%,0); }
  32%  { transform: translate3d(calc(-50% + 62px), -50%, 0) scale(1.06); }
  100% { transform: translate3d(-50%,-50%,0); }
}
@keyframes lungeLeft {
  0%   { transform: translate3d(-50%,-50%,0); }
  32%  { transform: translate3d(calc(-50% - 62px), -50%, 0) scale(1.06); }
  100% { transform: translate3d(-50%,-50%,0); }
}

/* Recoil + white flash when struck. */
.sprite.hit { animation: spriteHit .34s var(--e-out); }
.sprite.enemy.hit { animation: spriteHitEnemy .34s var(--e-out); }
@keyframes spriteHit {
  0%   { transform: translate3d(-50%,-50%,0); filter: none; }
  18%  { transform: translate3d(calc(-50% - 22px), -50%, 0); filter: brightness(3) saturate(0); }
  55%  { transform: translate3d(calc(-50% + 8px), -50%, 0); filter: brightness(1.3); }
  100% { transform: translate3d(-50%,-50%,0); filter: none; }
}
@keyframes spriteHitEnemy {
  0%   { transform: translate3d(-50%,-50%,0); filter: none; }
  18%  { transform: translate3d(calc(-50% + 22px), -50%, 0); filter: brightness(3) saturate(0); }
  55%  { transform: translate3d(calc(-50% - 8px), -50%, 0); filter: brightness(1.3); }
  100% { transform: translate3d(-50%,-50%,0); filter: none; }
}

/* Vanishing Step — blink out and back. */
.sprite.vanishing { animation: spriteVanish .5s var(--e-in-out); }
@keyframes spriteVanish {
  0%, 100% { opacity: 1; }
  25%      { opacity: .08; transform: translate3d(calc(-50% + 40px), -50%, 0) scale(.9); }
  60%      { opacity: .08; }
}

/* Knocked out — fade to greyscale and drop. */
.sprite.downed {
  animation: spriteKO .6s var(--e-in-out) forwards;
}
@keyframes spriteKO {
  to { opacity: .18; filter: grayscale(1) brightness(.4); transform: translate3d(-50%, -38%, 0) rotate(8deg) scale(.9); }
}

/* Charging aura pulse. */
.sprite.charging .sprite-inner { animation: chargePulse .6s ease-in-out 2; }
@keyframes chargePulse {
  50% { filter: drop-shadow(0 0 26px var(--gold)) brightness(1.35); }
}

body.reduced-motion .sprite-inner { animation: none !important; }

/* Floating combat text. */
.dmg-num {
  position: absolute;
  z-index: 40;              /* above sprites */
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 0 #7a1200, 0 0 16px rgba(255,120,0,.85);
  pointer-events: none;
  will-change: transform, opacity;
  animation: dmgFloat 1.1s var(--e-out) forwards;
}
.dmg-num.crit {
  font-size: 48px;
  color: #fff3b0;
  text-shadow: 0 2px 0 #a02800, 0 0 26px rgba(255,190,40,1);
}
.dmg-num.weak { font-size: 26px; color: #b9c4e6; text-shadow: 0 2px 0 #1a2440; }
@keyframes dmgFloat {
  0%   { opacity: 0; transform: translate3d(-50%,10px,0) scale(.5); }
  18%  { opacity: 1; transform: translate3d(-50%,-14px,0) scale(1.22); }
  32%  { transform: translate3d(-50%,-20px,0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%,-78px,0) scale(.92); }
}

/* Move-name banner that sweeps in on Specials/Ultimates. */
.move-banner {
  position: absolute;
  top: 34%;
  left: 0; right: 0;
  text-align: center;
  z-index: 27;
  pointer-events: none;
}
.move-banner-inner {
  display: inline-block;
  padding: 9px 34px;
  font-family: var(--f-display);
  font-size: clamp(21px, 4.6vw, 40px);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(96deg, rgba(255,60,0,.94), rgba(255,170,20,.94));
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  box-shadow: 0 0 44px rgba(255,140,20,.65);
  animation: bannerSweep 1.5s var(--e-out) forwards;
  will-change: transform, opacity;
}
@keyframes bannerSweep {
  0%   { opacity: 0; transform: translate3d(-130%,0,0) skewX(-13deg); }
  17%  { opacity: 1; transform: translate3d(0,0,0) skewX(-13deg); }
  76%  { opacity: 1; transform: translate3d(0,0,0) skewX(-13deg); }
  100% { opacity: 0; transform: translate3d(130%,0,0) skewX(-13deg); }
}

/* Ability-proc ticker. */
.proc {
  position: absolute;
  left: 50%;
  z-index: 38;
  transform: translateX(-50%);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: rgba(10,13,26,.9);
  border: 1px solid var(--gold);
  font-size: 11.5px; font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  animation: procRise 1.6s var(--e-out) forwards;
  will-change: transform, opacity;
}
/*
 * Procs are offset vertically by --proc-row so simultaneous ability triggers
 * stack into a readable list instead of printing on top of each other.
 */
@keyframes procRise {
  0%   { opacity: 0; transform: translate3d(-50%, calc(var(--proc-row, 0) * 30px + 14px), 0) scale(.86); }
  16%  { opacity: 1; transform: translate3d(-50%, calc(var(--proc-row, 0) * 30px), 0) scale(1); }
  74%  { opacity: 1; transform: translate3d(-50%, calc(var(--proc-row, 0) * 30px), 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, calc(var(--proc-row, 0) * 30px - 30px), 0); }
}

/* ------------------------------------------------------------ card dock */
.dock {
  position: relative;
  z-index: 20;
  padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(6,8,17,.97) 62%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.dock-actions { display: flex; gap: var(--s2); justify-content: center; }

.act-btn {
  flex: 1;
  max-width: 132px;
  padding: 9px 6px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-fast),
              background var(--t-fast), color var(--t-fast);
  will-change: transform;
}
.act-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ink-mute); color: var(--ink); }
.act-btn:active:not(:disabled) { transform: scale(.95); }
.act-btn:disabled { opacity: .34; cursor: not-allowed; }
.act-btn .sub { font-family: var(--f-mono); font-size: 9px; opacity: .75; letter-spacing: 0; }

.act-vanish.ready { border-color: var(--violet); color: #d8b4fe; }
.act-rush.ready {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255,160,20,.28), rgba(255,60,90,.22));
  color: #ffe082;
  animation: rushGlow 1.25s ease-in-out infinite;
}
@keyframes rushGlow {
  0%,100% { box-shadow: 0 0 0 rgba(255,197,49,0); }
  50%     { box-shadow: 0 0 22px rgba(255,197,49,.6); }
}

/* Arts card hand */
.hand {
  display: flex;
  gap: var(--s2);
  justify-content: center;
  align-items: flex-end;
  min-height: 104px;
  perspective: 900px;
}

.acard {
  position: relative;
  width: 78px; height: 100px;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--bg-float), var(--bg-panel));
  border: 1.5px solid var(--line);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--e-spring), box-shadow var(--t-mid),
              border-color var(--t-fast), opacity var(--t-fast);
  will-change: transform;
  contain: layout paint;
  animation: cardDeal .34s var(--e-spring) backwards;
}
@keyframes cardDeal {
  from { opacity: 0; transform: translate3d(0,34px,0) rotateX(-38deg) scale(.84); }
}
.acard:hover:not(.locked) { transform: translate3d(0,-14px,0) scale(1.06); box-shadow: var(--sh-3); z-index: 3; }
.acard:active:not(.locked) { transform: translate3d(0,-6px,0) scale(1.01); }
.acard.locked { opacity: .38; cursor: not-allowed; filter: grayscale(.65); }
.acard.playing { animation: cardPlay .42s var(--e-in-out) forwards; }
@keyframes cardPlay {
  to { opacity: 0; transform: translate3d(0,-150px,0) scale(1.35) rotateY(180deg); }
}

.acard-cost {
  position: absolute; top: 5px; right: 6px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  color: var(--azure);
}
.acard-ico { width: 30px; height: 30px; }
.acard-label {
  font-family: var(--f-display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.acard-move {
  font-size: 7.5px; color: var(--ink-mute);
  text-align: center; padding: 0 4px; line-height: 1.2;
  max-height: 18px; overflow: hidden;
}

/* Per-Arts colour treatment */
.acard[data-arts="STRIKE"]   { border-color: rgba(255,93,93,.55); }
.acard[data-arts="STRIKE"] .acard-label { color: #ff8f8f; }
.acard[data-arts="BLAST"]    { border-color: rgba(77,171,255,.55); }
.acard[data-arts="BLAST"] .acard-label { color: #8ecbff; }
.acard[data-arts="SPECIAL"]  { border-color: rgba(255,210,63,.6);
  background: linear-gradient(160deg, rgba(90,66,10,.6), var(--bg-panel)); }
.acard[data-arts="SPECIAL"] .acard-label { color: #ffe082; }
.acard[data-arts="ULTIMATE"] { border-color: rgba(192,132,252,.7);
  background: linear-gradient(160deg, rgba(72,40,110,.65), var(--bg-panel));
  box-shadow: 0 0 16px rgba(168,85,247,.28); }
.acard[data-arts="ULTIMATE"] .acard-label { color: #d8b4fe; }
.acard[data-arts="AWAKEN"]   { border-color: rgba(52,211,153,.6); }
.acard[data-arts="AWAKEN"] .acard-label { color: #6ee7b7; }

/* Bench switcher */
.bench { display: flex; gap: var(--s2); justify-content: center; }
.bench-slot {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: var(--bg-deep);
  position: relative;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-fast);
}
.bench-slot:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); }
.bench-slot:disabled { opacity: .34; cursor: not-allowed; }
.bench-slot.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,197,49,.35); }
.bench-slot canvas { width: 100%; height: 100%; }
.bench-hp {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(0,0,0,.55);
}
.bench-hp i { display: block; height: 100%; background: var(--jade); transition: width var(--t-mid); }

/* ----------------------------------------------------- rising rush cut-in */
.rush-cutin {
  position: fixed; inset: 0;
  z-index: 150;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(255,170,20,.28), rgba(3,5,12,.96) 70%);
  animation: cutinFade 2.6s forwards;
  pointer-events: none;
}
@keyframes cutinFade {
  0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; }
}
.rush-team { display: flex; gap: var(--s4); align-items: center; }
.rush-face {
  width: clamp(78px, 20vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 0 40px rgba(255,180,40,.85);
  animation: rushFaceIn .55s var(--e-spring) backwards;
}
.rush-face:nth-child(2) { animation-delay: .13s; }
.rush-face:nth-child(3) { animation-delay: .26s; }
@keyframes rushFaceIn {
  from { opacity: 0; transform: scale(.3) rotate(-24deg); }
}
.rush-title {
  margin-top: var(--s5);
  font-family: var(--f-display);
  font-size: clamp(34px, 9vw, 82px);
  font-weight: 800;
  letter-spacing: .12em;
  background: linear-gradient(94deg, #fff, var(--gold) 42%, var(--orange) 72%, var(--crimson));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(255,160,20,.75);
  animation: rushTitle .7s var(--e-spring) .35s backwards;
}
@keyframes rushTitle {
  from { opacity: 0; transform: scale(2.4) translateY(24px); filter: blur(9px); }
}

/* --------------------------------------------------------- result overlay */
.result {
  position: fixed; inset: 0;
  z-index: 160;
  display: grid; place-items: center;
  background: rgba(3,5,12,.9);
  backdrop-filter: blur(9px);
  animation: fadeIn var(--t-mid) ease;
  padding: var(--s4);
}
.result-card {
  width: min(480px, 100%);
  text-align: center;
  padding: var(--s7) var(--s5) var(--s5);
  background: linear-gradient(165deg, var(--bg-panel), var(--bg-deep));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  animation: modalIn var(--t-slow) var(--e-spring);
}
.result-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 10vw, 66px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}
.result-title.win {
  background: linear-gradient(94deg, var(--gold), var(--orange), var(--crimson));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,160,20,.55));
}
.result-title.lose { color: var(--ink-mute); }
.reward-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px;
  background: var(--bg-deep);
  border-radius: var(--r-md);
  margin-top: var(--s2);
  animation: rewardIn .42s var(--e-out) backwards;
}
.reward-row:nth-child(1) { animation-delay: .18s; }
.reward-row:nth-child(2) { animation-delay: .28s; }
.reward-row:nth-child(3) { animation-delay: .38s; }
.reward-row:nth-child(4) { animation-delay: .48s; }
@keyframes rewardIn {
  from { opacity: 0; transform: translate3d(-16px,0,0); }
}
.reward-val { font-family: var(--f-mono); font-weight: 700; color: var(--gold); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 400px) {
  .acard { width: 66px; height: 88px; }
  .portrait { width: 46px; height: 46px; }
  .hp-num { min-width: 62px; font-size: 9.5px; }
}
@media (min-width: 900px) {
  .hand { min-height: 128px; }
  .acard { width: 94px; height: 122px; }
  .acard-ico { width: 36px; height: 36px; }
  .acard-label { font-size: 11.5px; }
  .acard-move { font-size: 8.5px; }
  .portrait { width: 68px; height: 68px; }
}