.fight-page {
  --fight-left: #55e6f4;
  --fight-left-rgb: 85, 230, 244;
  --fight-right: #ff784f;
  --fight-right-rgb: 255, 120, 79;
  background:
    radial-gradient(circle at 6% 18%, rgba(var(--fight-left-rgb), 0.15), transparent 34rem),
    radial-gradient(circle at 94% 20%, rgba(var(--fight-right-rgb), 0.15), transparent 34rem),
    linear-gradient(180deg, #05070a, #09090d 44%, #050609);
}

.fight-page .cinema-particles { opacity: 0.9; }

.fight-hero {
  position: relative;
  display: grid;
  width: 100%;
  min-height: min(900px, calc(100svh - 103px));
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(88px, 11vh, 130px) max(20px, calc((100vw - 1180px) / 2)) 118px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.fight-hero::before {
  position: absolute;
  inset: 0;
  z-index: -3;
  content: "";
  background:
    linear-gradient(90deg, rgba(var(--fight-left-rgb), 0.065), transparent 35%, transparent 65%, rgba(var(--fight-right-rgb), 0.065)),
    radial-gradient(ellipse at 50% 52%, rgba(214, 174, 92, 0.08), transparent 36%);
}

.fight-cinema { position: absolute; inset: 0; z-index: -2; pointer-events: none; perspective: 700px; }

.fight-cinema__aura {
  position: absolute;
  top: 2%;
  bottom: -8%;
  width: 56%;
  filter: blur(4px);
  opacity: 0.62;
  animation: arenaAura 6s ease-in-out infinite;
}

.fight-cinema__aura--left {
  left: -14%;
  background: conic-gradient(from 70deg at 12% 52%, transparent, rgba(var(--fight-left-rgb), 0.24), transparent 24%);
  clip-path: polygon(0 0, 82% 50%, 0 100%);
}

.fight-cinema__aura--right {
  right: -14%;
  background: conic-gradient(from 250deg at 88% 52%, transparent, rgba(var(--fight-right-rgb), 0.26), transparent 24%);
  clip-path: polygon(100% 0, 18% 50%, 100% 100%);
  animation-delay: -3s;
}

.fight-cinema__grid {
  position: absolute;
  right: -25%;
  bottom: -48%;
  left: -25%;
  height: 76%;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(214, 174, 92, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 174, 92, 0.13) 1px, transparent 1px);
  background-size: 54px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  transform: rotateX(64deg);
  transform-origin: center top;
  animation: arenaGrid 4.8s linear infinite;
}

.fight-cinema__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.fight-cinema__ring--outer {
  width: min(78vw, 860px);
  aspect-ratio: 1;
  border: 1px solid rgba(214, 174, 92, 0.13);
  border-right-color: rgba(var(--fight-right-rgb), 0.32);
  border-left-color: rgba(var(--fight-left-rgb), 0.32);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.28);
  animation: arenaRing 24s linear infinite;
}

.fight-cinema__ring--outer::before,
.fight-cinema__ring--outer::after,
.fight-cinema__ring--inner::before {
  position: absolute;
  content: "";
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}
.fight-cinema__ring--outer::before { top: 8%; left: 21%; width: 7px; height: 7px; color: var(--fight-left); transform: rotate(45deg); }
.fight-cinema__ring--outer::after { right: 8%; bottom: 30%; width: 7px; height: 7px; color: var(--fight-right); transform: rotate(45deg); }

.fight-cinema__ring--inner {
  width: min(45vw, 500px);
  aspect-ratio: 1;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  animation: arenaRingReverse 15s linear infinite;
}
.fight-cinema__ring--inner::before { top: -4px; left: 50%; width: 8px; height: 8px; color: var(--gold-bright); transform: rotate(45deg); }

.fight-cinema__strike {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 50%;
  width: 1px;
  opacity: 0.72;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.2) 28%, var(--gold-bright) 50%, rgba(255, 255, 255, 0.2) 72%, transparent);
  box-shadow: 0 0 24px rgba(214, 174, 92, 0.35);
  transform: rotate(12deg);
  animation: strikeFlash 5.6s ease-in-out infinite;
}

.fight-cinema__particles { position: absolute; inset: 0; }
.fight-spark {
  --spark-x: 50%;
  --spark-size: 2px;
  --spark-color: var(--fight-left);
  --spark-angle: 0deg;
  --spark-speed: 7s;
  --spark-delay: 0s;
  --spark-drift: 10px;
  position: absolute;
  left: var(--spark-x);
  bottom: -12px;
  width: var(--spark-size);
  height: calc(var(--spark-size) * 5);
  border-radius: 50%;
  opacity: 0;
  background: var(--spark-color);
  box-shadow: 0 0 13px var(--spark-color);
  transform: rotate(var(--spark-angle));
  animation: sparkRise var(--spark-speed) linear infinite var(--spark-delay);
}
.fight-spark:nth-child(1) { --spark-x: 4%; --spark-size: 1px; --spark-speed: 6.2s; --spark-delay: -4s; --spark-drift: 24px; }
.fight-spark:nth-child(2) { --spark-x: 9%; --spark-color: var(--fight-right); --spark-speed: 8.1s; --spark-delay: -2s; --spark-drift: -18px; }
.fight-spark:nth-child(3) { --spark-x: 15%; --spark-size: 3px; --spark-speed: 7.4s; --spark-delay: -6s; --spark-angle: 9deg; }
.fight-spark:nth-child(4) { --spark-x: 21%; --spark-color: var(--fight-right); --spark-speed: 5.9s; --spark-delay: -1s; --spark-drift: 34px; }
.fight-spark:nth-child(5) { --spark-x: 27%; --spark-size: 1px; --spark-speed: 8.7s; --spark-delay: -7s; --spark-drift: -25px; }
.fight-spark:nth-child(6) { --spark-x: 32%; --spark-color: var(--fight-right); --spark-speed: 6.8s; --spark-delay: -3s; --spark-angle: -12deg; }
.fight-spark:nth-child(7) { --spark-x: 37%; --spark-speed: 9.2s; --spark-delay: -5s; --spark-drift: 18px; }
.fight-spark:nth-child(8) { --spark-x: 42%; --spark-size: 3px; --spark-color: var(--fight-right); --spark-speed: 7.7s; --spark-delay: -8s; }
.fight-spark:nth-child(9) { --spark-x: 47%; --spark-speed: 6.1s; --spark-delay: -2.5s; --spark-drift: -30px; }
.fight-spark:nth-child(10) { --spark-x: 52%; --spark-color: var(--fight-right); --spark-speed: 8.4s; --spark-delay: -6.5s; --spark-angle: 14deg; }
.fight-spark:nth-child(11) { --spark-x: 57%; --spark-size: 1px; --spark-speed: 5.7s; --spark-delay: -1.5s; --spark-drift: 22px; }
.fight-spark:nth-child(12) { --spark-x: 62%; --spark-color: var(--fight-right); --spark-speed: 9s; --spark-delay: -4.5s; --spark-drift: -16px; }
.fight-spark:nth-child(13) { --spark-x: 67%; --spark-size: 3px; --spark-speed: 7.1s; --spark-delay: -7.2s; }
.fight-spark:nth-child(14) { --spark-x: 72%; --spark-color: var(--fight-right); --spark-speed: 6.5s; --spark-delay: -3.4s; --spark-drift: 28px; }
.fight-spark:nth-child(15) { --spark-x: 77%; --spark-size: 1px; --spark-speed: 8.9s; --spark-delay: -5.4s; --spark-angle: -9deg; }
.fight-spark:nth-child(16) { --spark-x: 82%; --spark-color: var(--fight-right); --spark-speed: 5.8s; --spark-delay: -0.7s; --spark-drift: -24px; }
.fight-spark:nth-child(17) { --spark-x: 87%; --spark-speed: 7.9s; --spark-delay: -6.7s; --spark-drift: 20px; }
.fight-spark:nth-child(18) { --spark-x: 91%; --spark-size: 3px; --spark-color: var(--fight-right); --spark-speed: 9.4s; --spark-delay: -2.8s; }
.fight-spark:nth-child(19) { --spark-x: 95%; --spark-speed: 6.9s; --spark-delay: -4.9s; --spark-drift: -32px; }
.fight-spark:nth-child(20) { --spark-x: 98%; --spark-color: var(--fight-right); --spark-speed: 8.3s; --spark-delay: -7.8s; --spark-angle: 11deg; }

.fight-frame { position: absolute; inset: 34px max(18px, calc((100vw - 1320px) / 2)); z-index: 2; pointer-events: none; }
.fight-frame i { position: absolute; width: 42px; height: 42px; opacity: 0.58; }
.fight-frame i:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--fight-left); border-left: 1px solid var(--fight-left); }
.fight-frame i:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--fight-right); border-right: 1px solid var(--fight-right); }
.fight-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--fight-left); border-left: 1px solid var(--fight-left); }
.fight-frame i:nth-child(4) { right: 0; bottom: 0; border-right: 1px solid var(--fight-right); border-bottom: 1px solid var(--fight-right); }

.fight-hero__content {
  position: relative;
  z-index: 3;
  width: min(1020px, 100%);
  animation: fightHeroIn 1.1s cubic-bezier(.16,1,.3,1) both;
}

.fight-hero__hud { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.fight-hero .eyebrow { justify-content: center; margin-bottom: 24px; }

.fight-hero h1 {
  position: relative;
  margin-inline: auto;
  font-size: clamp(5rem, 12.5vw, 11.6rem);
  line-height: 0.72;
  letter-spacing: -0.065em;
  text-shadow: 0 24px 90px rgba(0, 0, 0, 0.7);
}

.fight-hero h1::before {
  position: absolute;
  top: 38%;
  right: 4%;
  left: 4%;
  z-index: -1;
  height: 18%;
  content: "";
  opacity: 0.34;
  background: linear-gradient(90deg, rgba(var(--fight-left-rgb), 0.65), rgba(214, 174, 92, 0.28), rgba(var(--fight-right-rgb), 0.65));
  filter: blur(28px);
}

.fight-hero h1 em {
  display: block;
  position: relative;
  margin-top: 0.27em;
  padding-bottom: 0.08em;
  color: transparent;
  background: linear-gradient(95deg, var(--fight-left) 3%, #e7f8f8 34%, var(--gold-bright) 50%, #fff0df 66%, var(--fight-right) 97%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.44));
}

.fight-hero h1 em::after {
  position: absolute;
  right: 15%;
  bottom: -6px;
  left: 15%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--fight-left), transparent 42% 58%, var(--fight-right));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
  animation: titleBar 3.4s ease-in-out infinite;
}

.fight-hero__match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: min(620px, 100%);
  margin: 34px auto 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.fight-hero__match span:first-child { color: var(--fight-left); text-align: right; }
.fight-hero__match span:last-child { color: var(--fight-right); text-align: left; }
.fight-hero__match b { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-bright); background: rgba(8, 9, 13, 0.86); font-family: var(--font-display); font-size: 0.85rem; box-shadow: 0 0 24px rgba(214, 174, 92, 0.13); }
.fight-hero .lede { margin: 25px auto 0; max-width: 730px; }
.fight-hero .button-row { justify-content: center; }

.fight-ticker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 10, 0.76);
  backdrop-filter: blur(12px);
}
.fight-ticker > div { display: flex; width: max-content; align-items: center; gap: 25px; padding: 10px 0; color: rgba(255, 255, 255, 0.42); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.17em; white-space: nowrap; animation: fightTicker 26s linear infinite; }
.fight-ticker i { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

.fight-console { position: relative; width: var(--content); margin: clamp(70px, 9vw, 120px) auto 90px; }
.fight-console::before { position: absolute; inset: -18px; z-index: -1; content: ""; opacity: 0.21; background: linear-gradient(90deg, rgba(var(--fight-left-rgb), 0.45), transparent 34%, transparent 66%, rgba(var(--fight-right-rgb), 0.45)); filter: blur(32px); }

.fight-setup { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.24fr); gap: 16px; align-items: stretch; }
.fight-setup .panel { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(17, 21, 28, 0.94), rgba(8, 10, 14, 0.9)); }
.fight-setup .panel::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(115deg, rgba(255, 255, 255, 0.025), transparent 36%); }

.fighter-picker { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.fighter-option {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  min-height: 134px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  color: var(--text);
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(80, 215, 232, 0.11), transparent 42%),
    linear-gradient(145deg, #0c0f15, #07090d);
  text-align: left;
  cursor: pointer;
  transform: perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: border-color 220ms ease, background 220ms ease, transform 180ms ease, box-shadow 220ms ease;
}
.fighter-option::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; content: ""; opacity: 0; background: var(--fight-left); box-shadow: 0 0 16px var(--fight-left); transition: opacity 220ms ease; }
.fighter-option:hover { border-color: rgba(242, 205, 121, 0.58); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3); }
.fighter-option[aria-pressed="true"] { border-color: rgba(var(--fight-left-rgb), 0.72); background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(var(--fight-left-rgb), 0.2), transparent 45%), #0a1015; box-shadow: inset 0 0 0 1px rgba(var(--fight-left-rgb), 0.14), 0 0 24px rgba(var(--fight-left-rgb), 0.075); }
.fighter-option[aria-pressed="true"]::before { opacity: 1; }
.fighter-option[aria-pressed="true"]::after { position: absolute; top: 10px; right: 10px; color: var(--fight-left); content: "LOCKED"; font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.12em; }
.fighter-option strong { display: block; padding-right: 44px; font-family: var(--font-display); font-size: 1.17rem; letter-spacing: 0.02em; text-transform: uppercase; transform: translateZ(13px); }
.fighter-option span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.76rem; transform: translateZ(9px); }
.fighter-option small { display: block; margin-top: 13px; color: var(--gold-bright); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; transform: translateZ(10px); }
.fighter-option[data-selection-flash="true"] { animation: selectionFlash 400ms ease; }

.prompt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.prompt-chip { position: relative; padding: 8px 10px; border: 1px solid var(--line); color: var(--muted); background: rgba(0, 0, 0, 0.18); font-family: var(--font-mono); font-size: 0.62rem; cursor: pointer; transition: color 180ms ease, border-color 180ms ease, translate 180ms ease; }
.prompt-chip:hover { border-color: var(--gold); color: var(--gold-bright); translate: 0 -2px; }

.fight-stage {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 18% 42%, rgba(var(--fight-left-rgb), 0.09), transparent 32%),
    radial-gradient(circle at 82% 42%, rgba(var(--fight-right-rgb), 0.09), transparent 32%),
    #07090d;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.46);
}
.fight-stage[hidden] { display: none; }
.fight-stage::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: 0.65; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 255, 255, 0.018) 7px), linear-gradient(90deg, transparent 49.8%, rgba(214, 174, 92, 0.18) 50%, transparent 50.2%); }
.fight-stage::after { position: absolute; top: -20%; right: 0; left: 0; height: 20%; pointer-events: none; content: ""; opacity: 0; background: linear-gradient(transparent, rgba(80, 215, 232, 0.12), transparent); }
.fight-stage[data-phase="connecting"]::after { opacity: 1; animation: stageScan 2s linear infinite; }
.fight-stage[data-phase="complete"] { border-color: rgba(214, 174, 92, 0.38); box-shadow: 0 38px 100px rgba(0, 0, 0, 0.46), 0 0 45px rgba(214, 174, 92, 0.07); }
.fight-stage[data-phase="error"] { border-color: rgba(255, 104, 104, 0.34); }
.fight-stage[data-entering="true"] { animation: stageEntrance 700ms cubic-bezier(.16,1,.3,1) both; }

.fight-stage__bar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 9px 15px; border-bottom: 1px solid var(--line); color: var(--muted); background: rgba(8, 10, 14, 0.78); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; backdrop-filter: blur(12px); }
.fight-stage__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); min-height: 590px; }

.fighter-screen { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: clamp(24px, 3.2vw, 42px); transition: filter 400ms ease, opacity 400ms ease; }
.fighter-screen::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: 0.44; }
.fighter-screen--left { border-right: 1px solid rgba(var(--fight-left-rgb), 0.14); }
.fighter-screen--left::before { background: linear-gradient(120deg, rgba(var(--fight-left-rgb), 0.06), transparent 42%); }
.fighter-screen--right { border-left: 1px solid rgba(var(--fight-right-rgb), 0.14); }
.fighter-screen--right::before { background: linear-gradient(240deg, rgba(var(--fight-right-rgb), 0.06), transparent 42%); }
.fight-stage[data-entering="true"] .fighter-screen--left { animation: cornerLeft 750ms cubic-bezier(.16,1,.3,1) both 80ms; }
.fight-stage[data-entering="true"] .fighter-screen--right { animation: cornerRight 750ms cubic-bezier(.16,1,.3,1) both 80ms; }
.fighter-screen__tag { color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; }
.fighter-screen__name { margin-top: 9px; font-size: clamp(2.2rem, 4.2vw, 4.3rem); font-weight: 900; line-height: 0.9; text-transform: uppercase; }
.fighter-screen--left .fighter-screen__name { color: var(--fight-left); text-shadow: 0 0 30px rgba(var(--fight-left-rgb), 0.18); }
.fighter-screen--right .fighter-screen__name { color: var(--fight-right); text-shadow: 0 0 30px rgba(var(--fight-right-rgb), 0.18); }
.fighter-screen__output { position: relative; min-height: 310px; max-height: 480px; overflow: auto; margin-top: 28px; padding: 20px; border: 1px solid var(--line); color: #d8dcdb; background: rgba(1, 3, 6, 0.48); font-size: 0.92rem; line-height: 1.72; white-space: pre-wrap; scrollbar-color: var(--line-strong) transparent; box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.22); }
.fighter-screen__output[data-state="loading"] { color: var(--muted); font-family: var(--font-mono); }
.fighter-screen__output[data-state="loading"]::after { display: inline-block; margin-left: 5px; content: "···"; animation: fightBlink 1.1s steps(3) infinite; }
.fighter-screen__output[data-state="complete"] { animation: outputReveal 520ms cubic-bezier(.16,1,.3,1) both; }
.fighter-screen__output[data-state="error"] { border-color: rgba(255, 104, 104, 0.3); color: #e4b9b9; }
.fighter-screen__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.versus-core { position: relative; z-index: 4; display: grid; place-items: center; align-content: center; gap: 18px; }
.versus-core__ring { position: relative; display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-bright); background: #080a0e; font-family: var(--font-display); font-size: 1.55rem; font-weight: 900; box-shadow: inset 0 0 24px rgba(214, 174, 92, 0.09), 0 0 46px rgba(214, 174, 92, 0.22); animation: versusPulse 2.8s ease-in-out infinite; }
.versus-core__ring::before, .versus-core__ring::after { position: absolute; inset: -9px; border: 1px solid rgba(214, 174, 92, 0.17); border-radius: 50%; content: ""; animation: versusOrbit 8s linear infinite; }
.versus-core__ring::after { inset: -18px; border-style: dashed; border-color: rgba(80, 215, 232, 0.13); animation-direction: reverse; animation-duration: 13s; }
.versus-core__line { width: 1px; height: 90px; background: linear-gradient(transparent, var(--gold), transparent); }

.fight-progress { display: flex; gap: 7px; }
.fight-progress i { position: relative; width: 25px; height: 3px; overflow: hidden; background: var(--line); }
.fight-progress i[data-active="true"] { background: rgba(214, 174, 92, 0.35); }
.fight-progress i[data-active="true"]::after { position: absolute; inset: 0; content: ""; background: var(--gold-bright); box-shadow: 0 0 10px rgba(214, 174, 92, 0.6); animation: progressFill 420ms ease both; transform-origin: left; }

.judge-deck { display: none; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 24px; border: 1px solid var(--line); border-top: 0; background: linear-gradient(90deg, rgba(var(--fight-left-rgb), 0.045), #0d1016 34% 66%, rgba(var(--fight-right-rgb), 0.045)); }
.judge-deck[data-open="true"] { display: grid; animation: judgeEntrance 520ms cubic-bezier(.16,1,.3,1) both; }
.judge-deck p { color: var(--muted); text-align: center; }
.judge-deck__choice { min-height: 60px; }
.judge-deck__choice:first-child { border-color: var(--fight-left); }
.judge-deck__choice:nth-of-type(2) { border-color: var(--fight-right); }
.fight-result { grid-column: 1 / -1; min-height: 24px; color: var(--gold-bright); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.fight-result[data-flash="true"] { animation: resultFlash 560ms ease both; }

.fight-fallback { display: none; margin-top: 12px; }
.fight-fallback[data-visible="true"] { display: flex; animation: judgeEntrance 320ms ease both; }

@keyframes fightHeroIn { from { opacity: 0; transform: scale(0.94) translateY(38px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes arenaAura { 50% { opacity: 0.9; filter: blur(10px); transform: scale(1.06); } }
@keyframes arenaGrid { to { background-position: 0 34px, 54px 0; } }
@keyframes arenaRing { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes arenaRingReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes strikeFlash { 0%, 44%, 56%, 100% { opacity: 0.28; } 49% { opacity: 0.8; } 50% { opacity: 1; } 51% { opacity: 0.46; } }
@keyframes sparkRise { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 0.8; } 80% { opacity: 0.2; } 100% { opacity: 0; translate: var(--spark-drift) -105vh; } }
@keyframes titleBar { 50% { opacity: 0.42; transform: scaleX(0.76); } }
@keyframes fightTicker { to { transform: translateX(-50%); } }
@keyframes selectionFlash { 0% { box-shadow: 0 0 0 rgba(var(--fight-left-rgb), 0); } 45% { box-shadow: 0 0 38px rgba(var(--fight-left-rgb), 0.35); } }
@keyframes stageEntrance { from { opacity: 0; transform: scale(0.97) translateY(30px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes stageScan { to { transform: translateY(700%); } }
@keyframes cornerLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes cornerRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes fightBlink { 0% { opacity: 0.15; } 70% { opacity: 1; } }
@keyframes outputReveal { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes versusPulse { 50% { transform: scale(1.06); box-shadow: inset 0 0 30px rgba(214, 174, 92, 0.14), 0 0 65px rgba(214, 174, 92, 0.3); } }
@keyframes versusOrbit { to { transform: rotate(360deg); } }
@keyframes progressFill { from { transform: scaleX(0); } }
@keyframes judgeEntrance { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes resultFlash { from { opacity: 0; letter-spacing: 0.22em; } to { opacity: 1; letter-spacing: 0.08em; } }

@media (max-width: 920px) {
  .fight-hero { min-height: 780px; }
  .fight-setup { grid-template-columns: 1fr; }
  .fight-stage__grid { grid-template-columns: 1fr; }
  .versus-core { grid-template-columns: 1fr auto 1fr; padding: 19px 28px; border-block: 1px solid var(--line); }
  .versus-core__line { width: 100%; height: 1px; }
  .fighter-screen--left, .fighter-screen--right { border: 0; }
  .judge-deck { grid-template-columns: 1fr 1fr; }
  .judge-deck p { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 600px) {
  .fight-hero { min-height: 690px; padding: 76px 14px 100px; }
  .fight-frame { inset: 18px 14px 52px; }
  .fight-hero__hud { display: none; }
  .fight-hero h1 { font-size: clamp(4rem, 21vw, 6.8rem); }
  .fight-hero h1 em { margin-top: 0.32em; }
  .fight-hero__match { gap: 10px; margin-top: 28px; font-size: 0.52rem; }
  .fight-hero__match b { width: 32px; height: 32px; }
  .fight-hero .lede { font-size: 0.98rem; line-height: 1.62; }
  .fight-cinema__ring--outer { width: 130vw; }
  .fight-cinema__ring--inner { width: 78vw; }
  .fight-cinema__grid { bottom: -35%; }
  .fight-ticker > div { font-size: 0.52rem; }
  .fight-console { margin-top: 58px; }
  .fighter-picker { grid-template-columns: 1fr; }
  .fighter-option { min-height: 116px; }
  .fighter-screen { padding: 24px 14px; }
  .fighter-screen__output { min-height: 240px; padding: 15px; }
  .judge-deck { grid-template-columns: 1fr; }
  .judge-deck p, .fight-result { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .fight-cinema__grid, .fight-cinema__ring, .fight-cinema__strike, .fight-spark, .fight-ticker > div { animation: none !important; }
  .fight-spark { display: none; }
  .fight-hero__content, .fight-stage, .fighter-screen, .judge-deck { opacity: 1 !important; transform: none !important; filter: none !important; }
}