:root {
  color-scheme: dark;
  --ink: #07070b;
  --panel: #111119;
  --ivory: #f0e7d7;
  --muted: #9896a0;
  --crimson: #e32639;
  --crimson-deep: #730d1b;
  --blue: #2ba9ff;
  --blue-deep: #073667;
  --gold: #d0a24c;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --app-height: 100dvh;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; }

button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

#app, .screen { width: 100%; height: var(--app-height); touch-action: pan-y; }

/* Mobile browser chrome and fullscreen transitions can leave 100dvh cached at
   its previous value. While fighting, use the measured visual viewport and do
   not inherit the portrait screens' intentionally tall scrolling layout. */
body.in-fight {
  height: var(--app-height);
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
body.in-fight #app,
body.in-fight .fight-screen {
  height: var(--app-height);
  min-height: 0;
  touch-action: none;
}

.screen {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.screen.is-active { display: flex; }

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.72rem, 2vw, .9rem);
  font-weight: 800;
  letter-spacing: .2em;
}

.noise, .scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.start-screen {
  align-items: stretch;
  justify-content: center;
  isolation: isolate;
  background: #020207;
}

.start-backdrop {
  position: absolute;
  z-index: 0;
  inset: -4%;
  background: url("./assets/generated/beef-mode-title-bg-v1.webp") center 42% / cover no-repeat;
  transform-origin: 50% 54%;
  will-change: transform, filter;
  animation: backdrop-cinemagraph 12s ease-in-out infinite alternate;
}

.start-screen::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,25,58,.45), transparent 36%, transparent 64%, rgba(81,5,4,.48)),
    linear-gradient(180deg, rgba(2,2,7,.15), transparent 46%, rgba(2,2,6,.85) 84%, #020205 100%);
}

.start-screen .noise { z-index: 5; animation: analog-noise 1.1s steps(2, end) infinite; }

.start-energy-flash {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(118deg, transparent 0 44%, rgba(122,212,255,.95) 44.25%, transparent 44.65%),
    linear-gradient(64deg, transparent 0 57%, rgba(255,105,71,.72) 57.2%, transparent 57.55%),
    radial-gradient(circle at 50% 38%, rgba(255,245,198,.52), transparent 21%);
  mix-blend-mode: screen;
  filter: blur(.4px);
  animation: energy-lightning 8s linear infinite;
}

.start-embers {
  position: absolute;
  z-index: 2;
  inset: -25% 0 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,184,72,.95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(91,205,255,.82) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,78,48,.78) 0 1.2px, transparent 2px);
  background-position: 8% 95%, 52% 88%, 86% 98%;
  background-size: 113px 151px, 173px 127px, 211px 179px;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.start-embers-near { opacity: .58; filter: drop-shadow(0 0 5px #ff552e); animation: embers-rise 7s linear infinite; }
.start-embers-far { opacity: .32; scale: .72; filter: blur(.5px); animation: embers-rise 11s linear -4s infinite; }

.start-vignette {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 min(18vw, 170px) min(5vw, 55px) rgba(0,0,0,.87);
}

.start-grid {
  position: absolute;
  z-index: 1;
  left: -18%;
  right: -18%;
  bottom: -13%;
  height: 49%;
  opacity: .42;
  background-image:
    linear-gradient(rgba(222,68,255,.36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,187,255,.3) 1px, transparent 1px);
  background-size: 6.5vw 4.3vh;
  transform: perspective(420px) rotateX(57deg);
  transform-origin: bottom;
  mask-image: linear-gradient(transparent 3%, #000 65%);
  animation: grid-drive 4.8s linear infinite;
}

.start-sun {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 20%;
  width: clamp(130px, 20vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, #ffd381 0 8px, #ff4b38 9px 13px);
  box-shadow: 0 0 70px rgba(255,55,42,.74), 0 0 135px rgba(176,35,255,.46);
  opacity: .43;
  animation: sun-reactor 5.4s ease-in-out infinite;
}

.start-fighter {
  position: absolute;
  z-index: 3;
  bottom: -6%;
  width: min(44vw, 72vh);
  height: 102%;
  pointer-events: none;
  animation: title-fighter-in .9s cubic-bezier(.16,.82,.26,1) both;
}
.start-fighter img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: saturate(1.06) contrast(1.05) drop-shadow(0 24px 25px #000); transform-origin: 50% 92%; will-change: transform, filter; animation: fighter-breathe-sky 4.4s ease-in-out 1s infinite; }
.start-fighter .fighter-aura { position: absolute; z-index: 1; inset: 11% 8% 4%; filter: blur(25px); opacity: .7; animation: fighter-aura-pulse 3.2s ease-in-out infinite; }
.start-fighter b { position: absolute; z-index: 5; bottom: 12%; color: rgba(255,255,255,.78); font-family: ui-monospace, monospace; font-size: clamp(.56rem, 1.5vw, .75rem); letter-spacing: .45em; text-shadow: 0 2px 12px #000; }
.start-fighter-sky { left: -3%; transform-origin: bottom left; }
.start-fighter-sky .fighter-aura { background: radial-gradient(circle at 45% 45%, rgba(0,144,255,.58), transparent 62%); }
.start-fighter-sky b { left: 18%; }
.start-fighter-bisakov { right: -3%; transform-origin: bottom right; animation-delay: .08s; }
.start-fighter-bisakov .fighter-aura { background: radial-gradient(circle at 55% 45%, rgba(255,64,26,.52), transparent 62%); }
.start-fighter-bisakov img { animation-name: fighter-breathe-bisakov; animation-delay: -.9s; animation-duration: 4.9s; }
.start-fighter-bisakov .fighter-aura { animation-delay: -1.45s; }
.start-fighter-bisakov b { right: 15%; }

.start-frame {
  position: relative;
  z-index: 6;
  display: flex;
  width: min(92vw, 780px);
  padding: calc(2rem + var(--safe-top)) 0 calc(7.5rem + var(--safe-bottom));
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  pointer-events: none;
}
.start-frame > * { pointer-events: auto; }
.start-eyebrow { margin-bottom: auto; text-shadow: 0 2px 10px #000; }

.title-lockup { display: flex; align-items: center; width: 100%; margin-bottom: .45rem; }
.title-wing { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); box-shadow: 0 0 10px var(--gold); }
.title-wing-right { transform: rotate(180deg); }
.logo {
  display: flex;
  min-width: min(88vw, 760px);
  margin: 0;
  padding: 0 clamp(.45rem, 2vw, 1.2rem);
  flex-direction: column;
  align-items: center;
  font-family: Copperplate, "Copperplate Gothic Bold", "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
  transform: scaleX(.83);
  filter: drop-shadow(0 14px 15px #000);
}
.logo span {
  display: block;
  color: #d7c6a3;
  background: linear-gradient(#fff7dc 5%, #a87a39 40%, #f5db9f 55%, #70451d 82%, #f2d694 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #2f1809;
  paint-order: stroke fill;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255,255,255,.2);
}
.logo-top { font-size: clamp(3.05rem, 10vw, 7.35rem); line-height: .78; }
.logo-bottom { margin-top: .08em; font-size: clamp(2.55rem, 8.25vw, 6.05rem); line-height: .82; }

.versus-slash { display: flex; align-items: center; gap: .65rem; width: min(56vw, 330px); margin: .25rem 0 .75rem; color: #fff1d2; }
.versus-slash i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65)); }
.versus-slash i:last-child { transform: rotate(180deg); }
.versus-slash b { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #8b6332; border-radius: 50%; background: rgba(5,5,9,.78); color: var(--gold); font-size: 1rem; font-style: italic; box-shadow: 0 0 22px #000; }

.primary-cta, .secondary-cta, .share-button {
  border: 0;
  cursor: pointer;
  min-height: 58px;
  padding: .9rem 1.5rem;
  letter-spacing: .08em;
}

.primary-cta {
  position: relative;
  min-width: min(82vw, 320px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(115deg, #991526, var(--crimson) 55%, #f25343);
  border: 1px solid #ff7a75;
  box-shadow: 0 12px 35px rgba(181, 22, 45, .34), inset 0 0 18px rgba(255,255,255,.12);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  font-size: 1.15rem;
}

.primary-cta span, .primary-cta small { display: block; }
.primary-cta small { margin-top: .16rem; font-family: ui-monospace, monospace; font-size: .62rem; opacity: .65; }
.primary-cta.compact { min-width: 220px; min-height: 52px; font-size: 1rem; }
.primary-cta:disabled { filter: grayscale(1); opacity: .38; cursor: default; }
.pulse { animation: pulse 1.8s ease-in-out infinite; }

.start-frame .primary-cta {
  width: min(90vw, 450px);
  min-height: 82px;
  padding: 1.15rem 2.2rem;
  font-size: 1.55rem;
}
.start-frame .primary-cta small { margin-top: .3rem; font-size: .74rem; }

.local-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  color: #8d8b94;
  font-family: ui-monospace, monospace;
  font-size: .8rem;
  letter-spacing: .12em;
}

.local-ticker b { color: var(--ivory); font-size: 1.12rem; }
.local-ticker i { width: 1px; height: 25px; background: #3d3b45; }

.start-legal { display: contents; }

.start-disclaimer {
  position: absolute;
  z-index: 7;
  right: 50%;
  bottom: calc(.4rem + var(--safe-bottom));
  width: min(70vw, 1000px);
  padding: .45rem .7rem;
  transform: translateX(50%);
  color: rgba(238, 235, 229, .72);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.76) 9%, rgba(0,0,0,.76) 91%, transparent);
  font-family: "Cascadia Mono", Consolas, ui-monospace, "Segoe UI", Arial, sans-serif;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: .01em;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.start-disclaimer strong { display: block; margin-bottom: .24rem; color: rgba(255,225,166,.94); font-weight: 800; letter-spacing: .015em; }
.start-disclaimer small { display: inline; margin: 0 .25em 0 0; color: rgba(238,235,229,.6); font: inherit; }

.creator-credit {
  position: absolute;
  z-index: 8;
  left: calc(1rem + var(--safe-left));
  top: calc(1rem + var(--safe-top));
  display: flex;
  min-height: 30px;
  padding: .48rem .78rem;
  align-items: center;
  border: 1px solid rgba(208,162,76,.62);
  border-radius: 999px;
  color: #f0e7d7;
  background: rgba(2,2,6,.9);
  box-shadow: -2px 0 0 rgba(43,169,255,.62), 2px 0 0 rgba(227,38,57,.62), 0 5px 20px rgba(0,0,0,.48), inset 0 0 12px rgba(208,162,76,.08);
  font: 800 .58rem/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .12em;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.creator-credit span { color: rgba(238,235,229,.58); white-space: nowrap; }
.creator-credit strong { color: var(--gold); font: inherit; text-shadow: 0 0 7px rgba(208,162,76,.3); }
.creator-credit:hover { border-color: rgba(255,218,142,.9); color: #fff; background: #09090e; box-shadow: -3px 0 0 var(--blue), 3px 0 0 var(--crimson), 0 7px 25px #000, 0 0 15px rgba(208,162,76,.18); transform: translateY(-2px); }
.creator-credit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.result-credit { display: none; }

.sound-toggle, .pause-button, .icon-button {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(6,6,10,.55);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.sound-toggle {
  position: absolute;
  z-index: 8;
  right: calc(1rem + var(--safe-right));
  top: calc(1rem + var(--safe-top));
  padding: .65rem .8rem;
  color: #bbb8c1;
  font-family: ui-monospace, monospace;
  font-size: .68rem;
}

.select-screen {
  flex-direction: column;
  background:
    linear-gradient(90deg, rgba(17,68,111,.18), transparent 42%, rgba(114,13,29,.2)),
    #09090e;
}

.select-header {
  z-index: 3;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: .8rem;
  padding: calc(.85rem + var(--safe-top)) calc(1rem + var(--safe-right)) .8rem calc(1rem + var(--safe-left));
}

.select-header h2 { margin: .18rem 0 0; font-size: clamp(1.45rem, 5vw, 2.4rem); letter-spacing: .03em; }
.icon-button { width: 46px; height: 46px; font-size: 2rem; }
.step { justify-self: end; color: #77747e; font-family: ui-monospace, monospace; font-size: .72rem; }

.fighter-select-grid {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  min-height: 0;
  padding: 0 calc(.7rem + var(--safe-right)) 0 calc(.7rem + var(--safe-left));
}

.fighter-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #2d2c35;
  padding: 0;
  background: #111119;
  cursor: pointer;
  text-align: left;
  isolation: isolate;
  container-type: size;
  transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}

.fighter-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(4,4,7,.97) 5%, transparent 58%);
}

.fighter-card .selection-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: opacity .14s ease, filter .25s ease;
}

.fighter-card:not(.is-selected) .selection-portrait { filter: saturate(.55) brightness(.7); }
.fighter-card:not(.is-selected):hover .selection-portrait { filter: saturate(1.05) brightness(.98); }
.fighter-card.is-selected { border-color: var(--ivory); }
.fighter-card.is-selected .selection-portrait { opacity: 0; }

.selection-action {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 16px 12px #000);
  transform: translateY(0);
}
.fighter-card.is-selected .selection-action { opacity: 1; }
.fighter-card.is-confirming .selection-action { animation: fighter-combat-reveal .48s cubic-bezier(.18,.84,.26,1) both; }

.card-aura { position: absolute; inset: 0; z-index: -1; }
.sky-card .card-aura { background: radial-gradient(circle at 40% 25%, rgba(43,169,255,.55), transparent 48%); }
.bisakov-card .card-aura { background: radial-gradient(circle at 60% 25%, rgba(227,38,57,.5), transparent 48%); }

.fighter-copy { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 1rem; }
.fighter-copy span, .fighter-copy small { display: block; font-family: ui-monospace, monospace; }
.fighter-copy span { color: var(--gold); font-size: .62rem; letter-spacing: .12em; }
.fighter-copy strong { display: block; font-size: clamp(2.1rem, 8vw, 4.8rem); font-style: italic; line-height: .9; letter-spacing: -.04em; text-shadow: 0 4px 0 #000; }
.fighter-copy small { margin-top: .4rem; color: #c2bec5; font-size: .62rem; letter-spacing: .08em; }

.selected-mark {
  position: absolute;
  z-index: 3;
  right: .7rem;
  top: .7rem;
  padding: .35rem .5rem;
  background: var(--ivory);
  color: #09090d;
  font-family: ui-monospace, monospace;
  font-size: .58rem;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(-5px);
}

.fighter-card.is-selected .selected-mark { opacity: 1; transform: translateY(0); }

.versus-mark {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-8deg);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--gold);
  background: #0a0a10;
  border: 2px solid #5f4a26;
  border-radius: 50%;
  box-shadow: 0 0 30px #000;
  font-size: 1.5rem;
  font-style: italic;
}

.select-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 92px;
  padding: .8rem calc(1rem + var(--safe-right)) calc(.8rem + var(--safe-bottom)) calc(1rem + var(--safe-left));
  background: #0c0c12;
  border-top: 1px solid #272631;
}

.select-footer p { margin: 0; color: #77747e; font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em; }

.fight-screen { align-items: stretch; }
.arena { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #100711; touch-action: none; }

.arena::before {
  content: "";
  position: absolute;
  z-index: 9;
  inset: -18%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.92), transparent 8%),
    conic-gradient(from 20deg at 50% 48%, transparent, rgba(43,169,255,.7), transparent 17%, rgba(227,38,57,.72), transparent 35%);
  mix-blend-mode: screen;
  filter: blur(8px);
}

.arena.is-world-shifting::before { animation: world-rift 1.35s cubic-bezier(.2,.7,.2,1) both; }

.arena-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(224,57,45,.38), transparent 34%),
    linear-gradient(#080711 0%, #221024 46%, #b14230 47%, #120b18 70%, #050509 100%);
  background-size: 112% 112%;
  transition: background 1s ease, filter 1s ease;
  will-change: background-position, filter;
  animation: arena-sky-breathe 8s ease-in-out infinite alternate;
}

.arena-sky::before,
.arena-sky::after { content: ""; position: absolute; pointer-events: none; }
.arena-sky::before {
  inset: -25% 0 0;
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(255,164,64,.92) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(92,201,255,.72) 0 1px, transparent 1.7px);
  background-position: 12% 91%, 71% 97%;
  background-size: 137px 173px, 193px 229px;
  mix-blend-mode: screen;
  animation: arena-embers 7.5s linear infinite;
}
.arena-sky::after {
  left: -25%;
  right: -25%;
  bottom: 16%;
  height: 31%;
  opacity: .3;
  background: radial-gradient(ellipse, rgba(199,88,76,.42), transparent 68%);
  filter: blur(18px);
  animation: arena-mist 9s ease-in-out infinite alternate;
}

.arena[data-round="2"] .arena-sky {
  background:
    radial-gradient(ellipse at 28% 20%, rgba(34,225,255,.36), transparent 31%),
    radial-gradient(ellipse at 78% 34%, rgba(154,58,255,.34), transparent 28%),
    linear-gradient(#020917 0%, #092a3c 43%, #186c73 46%, #10172c 69%, #03050c 100%);
  filter: saturate(1.18) hue-rotate(-4deg);
}
.arena[data-round="2"] .arena-sky::after { background: radial-gradient(ellipse, rgba(50,220,255,.4), transparent 68%); }

.moon { position: absolute; left: 47%; top: 12%; width: 13vh; height: 13vh; border-radius: 50%; background: #efc69a; box-shadow: 0 0 45px #d14438; opacity: .72; transition: left 1s ease, top 1s ease, background 1s ease, box-shadow 1s ease; animation: arena-moon-pulse 5s ease-in-out infinite; }
.arena[data-round="2"] .moon { left: 20%; top: 17%; background: #9deaff; box-shadow: 0 0 38px #31d7ff, 0 0 90px rgba(108,63,255,.72); }

.city { position: absolute; left: -5%; right: -5%; bottom: 24%; height: 34%; opacity: .72; transition: filter 1s ease, opacity 1s ease; }
.city-back { background: repeating-linear-gradient(90deg, transparent 0 6%, rgba(76,39,87,.55) 6% 8%, transparent 8% 13%); filter: blur(4px); transform: perspective(500px) rotateX(-12deg); animation: city-drift-back 13s ease-in-out infinite alternate; }
.city-front { bottom: 18%; height: 22%; opacity: .88; background: repeating-linear-gradient(90deg, rgba(5,5,9,.94) 0 10%, rgba(39,22,43,.9) 10% 11%, rgba(6,6,10,.96) 11% 20%); border-top: 1px solid rgba(208,162,76,.23); animation: city-drift-front 9s ease-in-out infinite alternate; }
.arena[data-round="2"] .city-back { filter: blur(3px) hue-rotate(55deg) brightness(1.35); opacity: .92; }
.arena[data-round="2"] .city-front { filter: hue-rotate(48deg) brightness(1.25); border-top-color: rgba(88,227,255,.42); }

.arena::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -10%; right: -10%; bottom: -12%; height: 47%;
  background:
    linear-gradient(rgba(34,26,34,.08), #08070b 58%),
    repeating-linear-gradient(0deg, transparent 0 10%, rgba(208,162,76,.075) 10.3% 10.8%),
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.055) 9% 9.3%);
  border-top: 2px solid rgba(208,162,76,.38);
  transform: perspective(450px) rotateX(52deg);
  transform-origin: top;
  animation: arena-floor-drive 4.8s linear infinite;
}
.arena[data-round="2"]::after {
  background:
    linear-gradient(rgba(18,68,82,.12), #030812 58%),
    repeating-linear-gradient(0deg, transparent 0 10%, rgba(68,221,255,.11) 10.3% 10.8%),
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(129,101,255,.09) 9% 9.3%);
  border-top-color: rgba(68,221,255,.48);
}

.scanlines { z-index: 30; opacity: .08; background-image: repeating-linear-gradient(to bottom, transparent 0 3px, #fff 3px 4px); }

.fight-hud {
  position: absolute;
  z-index: 12;
  left: calc(2.5rem + var(--safe-left));
  right: calc(2.5rem + var(--safe-right));
  top: calc(.8rem + var(--safe-top));
  display: grid;
  grid-template-columns: 1fr 68px 1fr;
  align-items: start;
  gap: .7rem;
}

.hud-name { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.hud-name span { font-size: clamp(.85rem, 2.4vw, 1.3rem); letter-spacing: .06em; }
.hud-name small { color: var(--gold); font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .1em; }
.hud-portrait {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(208,162,76,.72);
  border-radius: 50%;
  background-color: #09080d;
  background-repeat: no-repeat;
  background-size: 320% auto;
  box-shadow: 0 2px 10px rgba(0,0,0,.58);
}
.hud-portrait-sky { background-image: url("./assets/generated/sky-fighter-v1.webp"); background-position: 65% 2%; }
.hud-portrait-bisakov { background-image: url("./assets/generated/bisakov-fighter-v1.webp"); background-position: 38% 0; }
.round-pips { display: inline-flex; gap: 4px; margin-left: auto; }
.health-bisakov .round-pips { margin-right: auto; margin-left: 0; }
.round-pips b { width: 9px; height: 9px; border: 1px solid rgba(208,162,76,.68); border-radius: 50%; background: rgba(0,0,0,.45); }
.round-pips b.is-won { background: var(--gold); }
.health-track, .hype-track { overflow: hidden; height: 13px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.62); transform: skewX(-9deg); }
.health-track i, .hype-track i { display: block; width: 100%; height: 100%; transform-origin: left; transition: width .18s ease; }
.health-sky .health-track i { background: linear-gradient(90deg, #1b7dce, #57c8ff); }
.health-bisakov .health-track i { background: linear-gradient(90deg, #ff5557, #b4152d); }
.health-bisakov .health-track i { margin-left: auto; }
.damage-track { position: relative; z-index: -1; height: 4px; margin-top: -4px; background: rgba(255,255,255,.08); transform: skewX(-9deg); }
.damage-track i { display: block; width: 100%; height: 100%; background: #f2e1b3; transition: width .62s cubic-bezier(.2,.7,.2,1); }
.health-bisakov .damage-track i { margin-left: auto; }
.hype-track { height: 5px; margin-top: 4px; border: 0; }
.hype-track i { width: 0; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.timer { display: grid; place-items: center; min-height: 56px; color: var(--ivory); background: rgba(8,8,12,.86); border: 2px solid var(--gold); border-radius: 50%; font-size: 1.65rem; box-shadow: 0 0 18px #000; }
.fight-status { position: absolute; z-index: 11; top: calc(4.9rem + var(--safe-top)); left: 50%; transform: translateX(-50%); color: #8d8892; font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .12em; }
.combo-callout { position: absolute; z-index: 22; left: 50%; top: 27%; transform: translate(-50%,-50%); color: var(--ivory); font-size: clamp(1.45rem,4vw,3.3rem); font-style: italic; line-height: .85; text-align: center; text-shadow: 0 3px 0 #000; pointer-events: none; opacity: 0; }
.combo-callout.is-visible { animation: combo-pop .72s cubic-bezier(.17,.84,.24,1) both; }

.fighter {
  --height-scale: 1;
  position: absolute;
  z-index: 8;
  left: 0;
  bottom: 18%;
  width: min(29vw, 48vh);
  aspect-ratio: 3 / 4;
  height: auto;
  transform: translate3d(calc(var(--world-x, 25vw) - 50%), var(--lift, 0), 0) scale(var(--scale, 1)) scaleY(var(--height-scale));
  transform-origin: 50% 100%;
  transition: filter .08s ease;
  pointer-events: none;
  will-change: transform;
}

/* Same camera scale; compensate for atlas padding so the visible bodies read as 204 cm vs 181 cm. */
.fighter-sky { --height-scale: 1.149; }
.fighter-bisakov { --height-scale: 1; }
.fighter-sprite {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: var(--frame-x, 0%) var(--frame-y, 0%);
  scale: var(--sprite-flip, 1) 1;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.9));
}
.fighter:not(.is-attacking):not(.is-hit):not(.is-special):not(.is-finisher):not(.is-jumping):not(.is-knocked-down) .fighter-sprite { animation: combat-idle 1.55s ease-in-out infinite alternate; }
.fighter-sky .fighter-sprite { background-image: url("./assets/generated/sky-action-sheet-v2.webp"); }
.fighter-bisakov .fighter-sprite {
  background-image: url("./assets/generated/bisakov-idle-v5.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-bisakov[data-frame="1"] .fighter-sprite { background-image: url("./assets/generated/bisakov-run-a-v5.webp"); }
.fighter-bisakov[data-frame="2"] .fighter-sprite { background-image: url("./assets/generated/bisakov-run-b-v5.webp"); }
.fighter-bisakov[data-frame="3"] .fighter-sprite { background-image: url("./assets/generated/bisakov-jump-v5.webp"); }
.fighter-bisakov[data-frame="4"] .fighter-sprite { background-image: url("./assets/generated/bisakov-punch-v5.webp"); }
.fighter-bisakov[data-frame="5"] .fighter-sprite { background-image: url("./assets/generated/bisakov-kick-v5.webp"); }
.fighter-bisakov[data-frame="6"] .fighter-sprite { background-image: url("./assets/generated/bisakov-crouch-v5.webp"); }
.fighter-bisakov[data-frame="7"] .fighter-sprite { background-image: url("./assets/generated/bisakov-special-windup-v5.webp"); }
.fighter-bisakov[data-frame="8"] .fighter-sprite { background-image: url("./assets/generated/bisakov-guard-v5.webp"); }
.fighter-sky.is-running .fighter-sprite,
.fighter-bisakov.is-running .fighter-sprite {
  background-size: 600% 100%;
  background-position: var(--run-frame-x, 0%) 50%;
}
.fighter.is-running {
  /* Each generated run frame is 1:2. Matching the element to the source cell
     preserves body proportions while the six-cell strip fills its height. */
  width: min(19.333vw, 32vh);
  aspect-ratio: 1 / 2;
}
.fighter-sky.is-running .fighter-sprite { background-image: url("./assets/generated/sky-run-cycle-v1.webp"); }
.fighter-bisakov.is-running .fighter-sprite { background-image: url("./assets/generated/bisakov-run-cycle-v1.webp"); }
.fighter-shadow { position: absolute; z-index: 1; left: 15%; right: 15%; bottom: 0; height: 7%; background: #000; border-radius: 50%; filter: blur(8px); opacity: .7; }
.fighter.is-player .fighter-sprite { filter: drop-shadow(0 0 10px rgba(255,255,255,.18)) drop-shadow(0 12px 8px rgba(0,0,0,.9)); }
.fighter.is-crouching { --scale: .84; }
/* SKY's crouch cell is touched by the next atlas pose at its far-right edge. */
.fighter-sky.is-crouching .fighter-sprite { clip-path: inset(0 4% 0 0); }
/* BISAKOV's wide low pose uses its own padded cutout so no limb can cross a frame edge. */
.fighter-bisakov.is-crouching { --scale: .94; }
.fighter-bisakov.is-crouching .fighter-sprite {
  background-image: url("./assets/generated/bisakov-crouch-v5.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-sky[data-move="rising"] { --scale: 1; }
.fighter-sky[data-move="rising"] .fighter-sprite {
  background-image: url("./assets/generated/sky-rising-strike-v1.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-sky[data-frame="5"][data-move="kick"],
.fighter-sky[data-frame="5"][data-move="airKick"] {
  --scale: 1;
  width: min(32vw,52vh);
}
.fighter-sky[data-frame="5"][data-move="kick"] .fighter-sprite,
.fighter-sky[data-frame="5"][data-move="airKick"] .fighter-sprite {
  background-image: url("./assets/generated/sky-high-kick-v1.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-sky[data-move="sweep"] {
  --scale: 1;
  width: min(39vw,64vh);
}
.fighter-sky[data-move="sweep"] .fighter-sprite {
  background-image: url("./assets/generated/sky-slide-sweep-v1.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-bisakov[data-move="sweep"] .fighter-sprite {
  background-image: url("./assets/generated/bisakov-crouch-v5.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-bisakov[data-move="shoulder"] {
  --scale: 1;
}
.fighter-bisakov[data-move="shoulder"] .fighter-sprite {
  background-image: url("./assets/generated/bisakov-shoulder-rush-v5.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-sky[data-move="finisher"] .fighter-sprite {
  background-image: url("./assets/generated/sky-phone-play-v1.webp");
  background-size: contain;
  background-position: center bottom;
}
.fighter-bisakov[data-move="finisher"].is-startup .fighter-sprite { background-image: url("./assets/generated/bisakov-special-windup-v5.webp"); }
.fighter-bisakov[data-move="finisher"].is-active .fighter-sprite,
.fighter-bisakov[data-move="finisher"].is-recovery .fighter-sprite { background-image: url("./assets/generated/bisakov-kick-v5.webp"); }
.fighter.is-blocking { filter: brightness(.72) saturate(.7); }
.fighter.is-hit { animation: hit-shake .12s linear 2; filter: brightness(1.8) saturate(.3); }
.fighter.is-attacking.is-startup { animation: attack-anticipation var(--move-duration,.18s) cubic-bezier(.32,.02,.62,1) both; }
.fighter.is-attacking.is-active { animation: attack-lunge var(--move-duration,.16s) cubic-bezier(.08,.82,.18,1) both; }
.fighter[data-move="dashPunch"].is-attacking.is-active,
.fighter[data-move="shoulder"].is-attacking.is-active { animation: dash-strike var(--move-duration,.16s) cubic-bezier(.08,.82,.18,1) both; }
.fighter[data-move="rising"].is-attacking.is-active { animation: rising-strike var(--move-duration,.16s) cubic-bezier(.08,.82,.18,1) both; }
.fighter[data-move="sweep"].is-attacking.is-active { animation: slide-sweep var(--move-duration,.16s) cubic-bezier(.08,.82,.18,1) both; }
.fighter[data-move="airKick"].is-attacking.is-active { animation: air-kick var(--move-duration,.16s) cubic-bezier(.08,.82,.18,1) both; }
.fighter.is-attacking.is-recovery { animation: attack-recover var(--move-duration,.2s) ease-out both; }
.fighter.is-special { animation: special-lunge .38s ease-out; filter: drop-shadow(0 0 25px var(--gold)); }
.fighter.is-finisher { filter: drop-shadow(0 0 24px var(--blue)); }
.fighter-sky.is-finisher { animation: no-look-phone 1.28s cubic-bezier(.18,.76,.18,1) both; }
.fighter-bisakov.is-finisher { animation: hat-trick-rush .96s cubic-bezier(.1,.78,.16,1) both; filter: drop-shadow(0 0 25px var(--crimson)); }
.fighter-sky.is-ankle-bait { animation: ankle-crossover .42s cubic-bezier(.16,.82,.22,1) both; filter: drop-shadow(0 0 18px rgba(43,169,255,.82)); }
.fighter-sky.is-ankle-counter { animation: ankle-counter-arrive .28s cubic-bezier(.1,.88,.2,1) both; filter: drop-shadow(0 0 26px rgba(43,169,255,.96)) brightness(1.18); }
.ankle-afterimage { z-index: 7; opacity: .72; pointer-events: none; mix-blend-mode: screen; filter: saturate(1.8) hue-rotate(-8deg) drop-shadow(0 0 18px #2ba9ff); }
.ankle-afterimage .fighter-shadow { display: none; }
.ankle-afterimage .fighter-sprite { animation: none !important; filter: brightness(1.45) saturate(1.55) drop-shadow(0 0 18px #2ba9ff); }
.ankle-afterimage.is-bait { animation: ankle-bait .56s ease-out forwards; }
.ankle-afterimage.is-shattered { animation: ankle-shatter .28s cubic-bezier(.2,.7,.4,1) forwards; }
.ankle-shard {
  position: absolute;
  z-index: 18;
  left: var(--shard-x);
  bottom: 42%;
  width: 12px;
  height: 3px;
  border-radius: 50%;
  background: #e8fbff;
  box-shadow: 0 0 8px #2ba9ff, 0 0 18px rgba(43,169,255,.9);
  rotate: var(--shard-angle);
  pointer-events: none;
  animation: ankle-shard .36s ease-out forwards;
}
.fighter.is-knocked-down { transform: translate3d(calc(var(--world-x,25vw) - 50%), var(--lift,0), 0) rotate(var(--fall-rotation,82deg)) scale(.9); filter: brightness(.72) saturate(.7); transition: transform .24s ease-out; }
.fighter.is-winner { filter: drop-shadow(0 0 28px var(--gold)) brightness(1.14); animation: winner-pulse .75s ease-in-out infinite alternate; }
.arena.is-impacting { animation: camera-hit var(--shake-duration,.12s) steps(2,end); }
.arena.is-heavy-impact { --shake-distance: 7px; }
.arena.is-hitstop .scanlines { opacity: .17; }
.arena.is-hitstop .fighter, .arena.is-hitstop .fighter-sprite { animation-play-state: paused !important; }
.arena.is-paused *, .arena.is-paused *::before, .arena.is-paused *::after { animation-play-state: paused !important; }

.intro-overlay {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(115,13,27,.14), transparent 36%),
    rgba(0,0,0,.42);
  backdrop-filter: blur(1.5px);
  transition: opacity .28s ease;
}
.intro-overlay.is-hidden { opacity: 0; pointer-events: none; }
.intro-overlay p {
  position: relative;
  z-index: 2;
  margin: 0 0 .5rem;
  color: #d6aa58;
  font-family: ui-monospace, monospace;
  font-size: clamp(.55rem, 1.3vw, .8rem);
  letter-spacing: .28em;
}
.intro-overlay strong {
  position: relative;
  z-index: 2;
  display: block;
  font-style: normal;
  line-height: .82;
  letter-spacing: -.045em;
  text-align: center;
}
.intro-overlay.is-round strong {
  color: #dbad59;
  font-size: clamp(4rem, 13vw, 9rem);
  text-shadow: 0 4px 0 #493017, 0 12px 28px #000;
  animation: intro-round-in .82s cubic-bezier(.17,.84,.24,1) both;
}
.intro-overlay.is-fight {
  background:
    radial-gradient(circle at 50% 50%, rgba(227,38,57,.24), transparent 38%),
    rgba(0,0,0,.3);
}
.intro-overlay.is-fight strong {
  color: #f0a044;
  font-size: clamp(6rem, 22vw, 15rem);
  background: linear-gradient(#ffe09a 0%, #ff9b35 36%, #b81722 78%, #51060d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 #5f0a12) drop-shadow(0 0 22px rgba(255,91,31,.65));
  animation: intro-fight-in .72s cubic-bezier(.13,.86,.22,1) both;
}
.intro-overlay.is-fight::before,
.intro-overlay.is-fight::after {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: clamp(8px, 1.1vw, 18px);
  background: linear-gradient(transparent, #ffbc55 22%, #e32639 70%, transparent);
  box-shadow: 0 0 18px #ff9a3d, 0 0 42px #e32639;
  filter: blur(1px);
  animation: intro-flame-slice .72s ease-out both;
}
.intro-overlay.is-fight::before { left: 41%; transform: rotate(7deg); }
.intro-overlay.is-fight::after { right: 41%; transform: rotate(-7deg); }
.intro-overlay.is-ko { background: rgba(0,0,0,.28); }
.intro-overlay.is-ko strong { color: var(--ivory); font-size: clamp(7rem,25vw,18rem); letter-spacing: -.09em; text-shadow: 0 6px 0 #8c1020, 0 14px 36px #000; animation: ko-slam .72s cubic-bezier(.1,.9,.18,1) both; }

.controls { position: absolute; z-index: 20; inset: auto 0 calc(.6rem + var(--safe-bottom)); display: flex; align-items: end; justify-content: space-between; padding: 0 calc(1rem + var(--safe-right)) 0 calc(1rem + var(--safe-left)); pointer-events: none; }
.arena.controls-mirrored .controls { flex-direction: row-reverse; }
.arena.controls-mirrored .action-cluster { transform-origin: bottom right; }
.arena.controls-mirrored .dpad { transform-origin: bottom left; }
.controls button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.action-cluster { position: relative; width: 190px; height: 128px; }
.action-button { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.36); background: rgba(16,12,19,.62); box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 5px 18px #000; backdrop-filter: blur(6px); }
.action-button .control-key, .action-button small { display: block; }
.action-button .control-key { font-size: 1.3rem; }
.control-icon, .finisher-icon { display: none; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.action-button small { color: #b7b2bc; font-family: ui-monospace, monospace; font-size: .48rem; }
.action-button.punch { left: 62px; top: 0; border-color: rgba(43,169,255,.74); }
.action-button.trait { left: 0; top: 48px; border-color: rgba(208,162,76,.75); }
.action-button.kick { left: 124px; top: 48px; border-color: rgba(227,38,57,.78); }
.action-button.guard { left: 62px; top: 64px; }
.action-button.is-pressed, .dpad button.is-pressed { transform: scale(.9); background: rgba(255,255,255,.25); }
.action-button.trait.is-ready { box-shadow: 0 0 20px var(--gold), inset 0 0 20px rgba(208,162,76,.45); animation: ready 1s infinite; }
.action-button.punch.is-ready, .action-button.kick.is-ready { box-shadow: 0 0 16px rgba(208,162,76,.72), inset 0 0 18px rgba(208,162,76,.25); }
.finisher-button { position: absolute; left: -2px; top: -43px; width: 92px; height: 38px; border: 1px solid rgba(43,169,255,.52); border-radius: 999px; background: rgba(7,18,31,.82); color: var(--ivory); opacity: .48; box-shadow: inset 0 0 14px rgba(43,169,255,.12), 0 4px 14px #000; transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease; }
.finisher-button .control-key { display: inline-grid; place-items: center; width: 26px; height: 19px; margin-right: 3px; border: 1px solid currentColor; border-radius: 999px; font-size: .54rem; letter-spacing: .02em; }
.finisher-button small { color: #8dcfff; font: 700 .46rem ui-monospace,monospace; letter-spacing: .04em; }
.finisher-button.is-ready { opacity: 1; box-shadow: 0 0 22px rgba(43,169,255,.9), inset 0 0 18px rgba(43,169,255,.34); animation: ready 1s infinite; }
.finisher-button.is-pressed { transform: scale(.92); background: rgba(43,169,255,.3); }
.special-button { position: absolute; left: 96px; top: -43px; width: 92px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--ivory); border: 1px solid rgba(208,162,76,.55); border-radius: 999px; background: rgba(24,17,9,.82); font-family: ui-monospace,monospace; opacity: .48; box-shadow: inset 0 0 14px rgba(208,162,76,.12), 0 4px 14px #000; transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease; }
.special-button[hidden], .finisher-button[hidden] { display: none !important; }
.special-button .control-key { display: inline-grid; place-items: center; width: 26px; height: 19px; margin-right: 4px; border: 1px solid currentColor; border-radius: 999px; color: var(--gold); font-size: .54rem; }
.special-button small { color: var(--gold); font: 700 .46rem ui-monospace,monospace; letter-spacing: .04em; }
.special-button.is-ready { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 22px rgba(208,162,76,.86), inset 0 0 18px rgba(208,162,76,.3); animation: ready 1s infinite; }
.special-button.is-pressed { transform: scale(.92); background: rgba(208,162,76,.28); }
.special-button.is-spent { opacity: .28; text-decoration: line-through; box-shadow: none; animation: none; }

@media (hover: none), (pointer: coarse) {
  .action-button .control-key,
  .special-button .control-key,
  .finisher-button .control-key { display: none; }
  .action-button .control-icon { display: block; width: 28px; height: 28px; margin: 0 auto 1px; }
  .action-button.trait .control-icon { color: var(--gold); fill: rgba(208,162,76,.14); }
  .action-button.punch .control-icon { color: #75c8ff; fill: rgba(43,169,255,.12); }
  .action-button.kick .control-icon { color: #ff6674; fill: rgba(227,38,57,.12); }
  .action-button.guard .control-icon { color: #ddd9e2; fill: rgba(255,255,255,.08); }
  .special-button,
  .finisher-button { top: -66px; width: 62px; height: 62px; padding: 0; border-width: 2px; border-radius: 50%; }
  .special-button { left: 115px; }
  .finisher-button { left: 35px; }
  .special-button small,
  .finisher-button small { display: none; }
  .special-button .finisher-icon,
  .finisher-button .finisher-icon { display: block; width: 32px; height: 32px; margin: auto; }
  .special-button .finisher-icon { color: var(--gold); fill: rgba(208,162,76,.12); }
  .finisher-button .finisher-icon { color: #8dcfff; fill: rgba(43,169,255,.12); }
}

.dpad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 46px); gap: 4px; }
.dpad button { border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(12,11,17,.6); box-shadow: inset 0 0 15px rgba(255,255,255,.05), 0 4px 15px #000; backdrop-filter: blur(6px); font-size: 1.05rem; }
.dpad button[data-control="jump"] { grid-column: 2; grid-row: 1; }
.dpad button[data-control="left"] { grid-column: 1; grid-row: 2; }
.dpad > .dpad-center { grid-column: 2; grid-row: 2; border-radius: 50%; background: rgba(255,255,255,.08); }
.dpad button[data-control="right"] { grid-column: 3; grid-row: 2; }
.dpad button[data-control="crouch"] { grid-column: 2; grid-row: 3; }
.virtual-joystick { display: none; }
.virtual-joystick, .virtual-joystick * { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.virtual-joystick {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0 22%, rgba(12,11,17,.42) 23% 57%, rgba(12,11,17,.18) 58% 100%);
  box-shadow: inset 0 0 26px rgba(255,255,255,.08), 0 5px 20px rgba(0,0,0,.46);
  backdrop-filter: blur(4px);
}
.joystick-track { position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.joystick-track::before, .joystick-track::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.1); transform: translate(-50%,-50%); }
.joystick-track::before { width: 70%; height: 1px; }
.joystick-track::after { width: 1px; height: 70%; }
.joystick-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.24), rgba(138,143,154,.3) 42%, rgba(30,31,39,.62) 100%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.5);
  transform: translate(-50%,-50%) translate(var(--stick-x, 0px), var(--stick-y, 0px));
  transition: transform 70ms ease-out, border-color 120ms ease, box-shadow 120ms ease;
  will-change: transform;
}
.virtual-joystick.is-active { border-color: rgba(208,162,76,.52); box-shadow: inset 0 0 30px rgba(208,162,76,.12), 0 5px 22px rgba(0,0,0,.5); }
.virtual-joystick.is-active .joystick-thumb { border-color: rgba(240,207,117,.72); box-shadow: inset 0 0 18px rgba(255,255,255,.16), 0 0 18px rgba(208,162,76,.28), 0 6px 18px rgba(0,0,0,.5); transition: border-color 120ms ease, box-shadow 120ms ease; }

@media (hover: none), (pointer: coarse) {
  .dpad { position: relative; display: block; width: 148px; height: 148px; }
  .dpad > button, .dpad > .dpad-center { display: none; }
  .virtual-joystick { display: block; }
}

.keyboard-legend { display: none; }
@media (hover: hover) and (pointer: fine) {
  .keyboard-legend { position: absolute; z-index: 24; left: 50%; bottom: calc(.75rem + var(--safe-bottom)); display: flex; align-items: center; justify-content: center; gap: .48rem; padding: .38rem .52rem; border: 1px solid rgba(208,162,76,.32); background: rgba(6,6,10,.74); color: #77747e; font: 600 .43rem ui-monospace,monospace; letter-spacing: .04em; transform: translateX(-50%); backdrop-filter: blur(7px); transition: opacity .18s ease; }
  .keyboard-legend span { display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
  .keyboard-legend b { min-width: 22px; padding: .2rem .3rem; border: 1px solid #5a5660; border-bottom-color: #8b8490; border-radius: 3px; background: #17161e; color: var(--ivory); text-align: center; box-shadow: 0 2px 0 #030306; }
  .arena:has(.tutorial-coach:not([hidden])) .keyboard-legend { opacity: 0; }
  .fight-screen:has(.pause-panel:not([hidden])) .keyboard-legend { display: none; }
}

.pause-button { position: absolute; z-index: 25; right: calc(.6rem + var(--safe-right)); top: calc(4.65rem + var(--safe-top)); width: 34px; height: 30px; color: #a7a3ac; font-size: .7rem; }
.pause-panel { position: absolute; z-index: 70; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(5,5,9,.93); }
.pause-panel[hidden] { display: none; }
.pause-panel h2 { margin: 0 0 .7rem; font-size: clamp(2.6rem, 9vw, 5rem); }
.move-list { display: grid; grid-template-columns: repeat(2,minmax(220px,1fr)); gap: .55rem 1.2rem; width: min(92vw,650px); padding: .9rem; border-block: 1px solid rgba(255,255,255,.16); color: #b7b2bc; font-family: ui-monospace,monospace; font-size: .65rem; }
.move-list span { display: flex; align-items: center; gap: .55rem; }
.move-list b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .35rem; border: 1px solid rgba(208,162,76,.68); border-radius: 50%; color: var(--ivory); }
.move-list i { font-style: normal; }
.text-button { border: 0; background: transparent; color: #98959e; text-decoration: underline; cursor: pointer; }
.fullscreen-note { display: none; }

.tutorial-coach { position: absolute; z-index: 32; left: 50%; bottom: calc(1.1rem + var(--safe-bottom)); transform: translateX(-50%); min-width: 220px; padding: .65rem 2.9rem .65rem .9rem; border: 1px solid rgba(208,162,76,.56); background: rgba(6,6,10,.86); text-align: left; backdrop-filter: blur(7px); }
.tutorial-coach[hidden] { display: none; }
.tutorial-coach small { display: block; color: var(--gold); font: .5rem ui-monospace,monospace; letter-spacing: .14em; }
.tutorial-coach strong { font-size: .92rem; }
.tutorial-coach button { position: absolute; right: .45rem; top: 50%; translate: 0 -50%; border: 0; color: #99949f; background: transparent; font: .48rem ui-monospace,monospace; text-decoration: underline; }

.impact { position: absolute; z-index: 15; left: var(--impact-x); bottom: 47%; width: 90px; height: 90px; border-radius: 50%; border: 5px solid var(--impact-color, #fff); box-shadow: 0 0 35px var(--impact-color, #fff); animation: impact .38s ease-out forwards; pointer-events: none; }
.impact-spark { position: absolute; z-index: 16; left: var(--impact-x); bottom: 52%; width: 36px; height: 4px; background: var(--impact-color,#fff); transform-origin: 0 50%; rotate: var(--spark-angle); animation: impact-spark .34s ease-out forwards; pointer-events: none; }
.special-wave { position: absolute; z-index: 14; left: var(--wave-x); bottom: 34%; width: 18vw; height: 24vh; border: 5px solid var(--gold); border-radius: 50%; box-shadow: 0 0 40px var(--gold), inset 0 0 35px var(--crimson); animation: wave .55s ease-out forwards; pointer-events: none; }
.football-projectile { position: absolute; z-index: 19; width: clamp(72px, 13vw, 150px); aspect-ratio: 3 / 2; pointer-events: none; transform: translate(-50%, 50%); filter: drop-shadow(0 0 18px rgba(43,169,255,.8)); }
.football-projectile img { width: 100%; height: 100%; object-fit: contain; transform: scaleX(var(--ball-flip, 1)); animation: ball-spin .16s linear infinite; }
.finisher-sequence { position: absolute; z-index: 18; inset: 0; overflow: hidden; pointer-events: none; }
.no-look-sequence { background: radial-gradient(ellipse at 50% 82%, rgba(43,169,255,.13), transparent 44%); animation: no-look-overlay 1.08s ease-out both; }
.court-lines { position: absolute; left: 4%; right: 4%; bottom: 13%; height: 45%; border: 2px solid rgba(77,195,255,.52); border-radius: 50% 50% 10% 10% / 22% 22% 8% 8%; opacity: .72; transform: perspective(380px) rotateX(58deg); box-shadow: 0 0 18px rgba(43,169,255,.36), inset 0 0 22px rgba(43,169,255,.16); animation: court-scan .72s ease-out both; }
.court-lines::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(255,255,255,.36); }
.court-lines::after { content: ""; position: absolute; left: 38%; right: 38%; top: 16%; bottom: 18%; border: 2px solid rgba(255,255,255,.38); border-radius: 50%; }
.play-x { position: absolute; left: var(--target-x); bottom: 31%; color: #e32639; font: 900 clamp(1.3rem,4vw,2.7rem) ui-monospace,monospace; text-shadow: 0 0 12px #e32639; transform: translate(-50%,50%) rotate(-9deg); animation: play-mark .72s steps(2,end) both; }
.play-route { position: absolute; left: var(--start-x); bottom: 28%; width: max(10vw,80px); height: 18vh; border-top: 3px dashed #63caff; border-right: 3px dashed #63caff; border-radius: 0 70% 0 0; transform: translateX(-15%); filter: drop-shadow(0 0 6px #2ba9ff); animation: route-draw .7s ease-out both; }
.backboard { position: absolute; left: var(--target-x); bottom: 53%; width: clamp(36px,5vw,62px); height: clamp(24px,3.5vw,42px); border: 3px solid rgba(255,255,255,.74); box-shadow: 0 0 14px #2ba9ff; transform: translateX(70%) skewY(-8deg); animation: backboard-flash 1.02s ease-out both; }
.basketball { position: absolute; z-index: 4; left: var(--start-x); bottom: 30%; width: clamp(28px,4.6vw,54px); aspect-ratio: 1; border: 2px solid #1a1010; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffd072 0 8%, #ef8125 23%, #b94016 70%, #46120c 100%); box-shadow: inset 0 0 0 2px rgba(255,202,92,.3), 0 0 14px rgba(255,117,35,.82); }
.basketball::before,
.basketball::after { content: ""; position: absolute; inset: 10% 46%; border-radius: 50%; background: #24100d; }
.basketball::after { inset: 46% 10%; }
.no-look-decoy { z-index: 7; opacity: .68; mix-blend-mode: screen; filter: saturate(1.55) hue-rotate(-7deg) drop-shadow(0 0 18px #2ba9ff); animation: no-look-cut .72s cubic-bezier(.12,.84,.2,1) forwards; }
.no-look-decoy .fighter-shadow { display: none; }
.no-look-decoy .fighter-sprite { animation: none !important; filter: brightness(1.55) saturate(1.5) drop-shadow(0 0 18px #2ba9ff); }
.hat-trick-sequence { animation: hat-trick-sequence .92s ease-out both; }
.football { position: absolute; z-index: 4; left: var(--start-x); bottom: 27%; width: clamp(24px,4.2vw,50px); aspect-ratio: 1; border: 2px solid #17171b; border-radius: 50%; background: conic-gradient(from 18deg, #14151a 0 11%, #f5eee1 11% 27%, #14151a 27% 38%, #f5eee1 38% 62%, #14151a 62% 73%, #f5eee1 73% 91%, #14151a 91%); box-shadow: 0 0 14px rgba(255,255,255,.62); animation: hat-trick-ball .78s cubic-bezier(.13,.74,.14,1) both; }
.goal-net { position: absolute; left: var(--target-x); bottom: 23%; width: clamp(90px,15vw,170px); height: clamp(90px,24vh,170px); border: 4px solid rgba(240,245,255,.82); border-radius: 8px 8px 34% 34%; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.34) 14px 16px), repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,.28) 13px 15px); opacity: 0; filter: drop-shadow(0 0 13px #2ba9ff); transform: translateX(-50%) perspective(260px) rotateY(var(--net-tilt)); animation: goal-net-hit .9s ease-out both; }
.turf-line { position: absolute; left: 10%; right: 10%; bottom: 18%; height: 5px; background: linear-gradient(90deg, transparent, rgba(227,38,57,.8), #fff, rgba(227,38,57,.8), transparent); transform: scaleX(0); box-shadow: 0 0 16px #e32639; animation: turf-burst .86s ease-out both; }

.result-screen {
  --winner-accent: var(--blue);
  --winner-deep: var(--blue-deep);
  --sky-share: 50%;
  --bisakov-share: 50%;
  flex-direction: column;
  isolation: isolate;
  overflow-y: auto;
  padding: calc(.8rem + var(--safe-top)) calc(.9rem + var(--safe-right)) calc(.75rem + var(--safe-bottom)) calc(.9rem + var(--safe-left));
  background: #06060a;
}
.result-screen[data-winner="bisakov"] { --winner-accent: var(--crimson); --winner-deep: var(--crimson-deep); }
.result-cinematic { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 28% 50%, color-mix(in srgb, var(--winner-accent) 28%, transparent), transparent 35%), linear-gradient(112deg, color-mix(in srgb, var(--winner-deep) 38%, #06060a) 0 44%, #08080d 44% 100%); }
.result-cinematic::before { content: ""; position: absolute; inset: -35%; background: repeating-conic-gradient(from 12deg at 30% 52%, color-mix(in srgb, var(--winner-accent) 13%, transparent) 0 4deg, transparent 4deg 15deg); animation: victory-rays 22s linear infinite; }
.result-cinematic::after { content: ""; position: absolute; inset: 0; opacity: .18; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.result-cinematic i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--winner-accent); box-shadow: 9vw -11vh 0 -1px var(--gold), 18vw 5vh 0 var(--winner-accent), 31vw -7vh 0 -1px #fff, 48vw 12vh 0 var(--gold), 61vw -4vh 0 -1px var(--winner-accent), 76vw 9vh 0 var(--gold); filter: drop-shadow(0 0 8px var(--winner-accent)); animation: victory-embers 4.8s linear infinite; }
.result-cinematic i:nth-child(1) { left: 4%; bottom: -6%; }
.result-cinematic i:nth-child(2) { left: 18%; bottom: -18%; animation-delay: -1.7s; animation-duration: 5.8s; }
.result-cinematic i:nth-child(3) { left: 42%; bottom: -10%; animation-delay: -3.1s; animation-duration: 6.4s; }
.result-header { position: relative; z-index: 3; flex: 0 0 auto; text-align: center; }
.result-header .eyebrow { display: flex; justify-content: center; align-items: center; gap: .8rem; font-size: clamp(.55rem,1.2vw,.78rem); }
.result-header .eyebrow span { color: var(--winner-accent); font-size: .45em; filter: drop-shadow(0 0 8px currentColor); }
.result-header h2 { margin: .12rem 0 0; font-size: clamp(3.25rem, 9vw, 7.4rem); font-style: italic; line-height: .78; letter-spacing: -.035em; text-shadow: 4px 5px 0 color-mix(in srgb, var(--winner-deep) 82%, #000), 0 0 36px color-mix(in srgb, var(--winner-accent) 25%, transparent); animation: victory-title .72s cubic-bezier(.12,.82,.16,1) both; }
.result-header > p:last-child { margin: .55rem 0 0; color: #c0bac4; font-family: ui-monospace, monospace; font-size: clamp(.5rem,1vw,.66rem); letter-spacing: .16em; }
.result-main { position: relative; z-index: 2; flex: 1 1 auto; display: grid; grid-template-columns: minmax(260px,.88fr) minmax(430px,1.12fr); gap: clamp(.65rem,2vw,2rem); width: min(1180px,100%); min-height: 0; margin: .35rem auto .55rem; }
.winner-stage { position: relative; min-height: 290px; display: grid; place-items: end center; overflow: hidden; }
.winner-stage::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 2%; height: 12%; border-radius: 50%; background: #000; filter: blur(14px); opacity: .86; }
.winner-aura { position: absolute; z-index: -1; left: 50%; top: 49%; width: min(31vw,370px); aspect-ratio: 1; translate: -50% -50%; border: 1px solid color-mix(in srgb, var(--winner-accent) 48%, transparent); border-radius: 50%; box-shadow: 0 0 60px color-mix(in srgb, var(--winner-accent) 24%, transparent), inset 0 0 55px color-mix(in srgb, var(--winner-accent) 16%, transparent); animation: winner-aura 3.1s ease-in-out infinite; }
.winner-aura::before, .winner-aura::after { content: ""; position: absolute; inset: 10%; border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); border-radius: inherit; animation: victory-orbit 13s linear infinite; }
.winner-aura::after { inset: 24%; border-style: solid; border-color: color-mix(in srgb, var(--winner-accent) 42%, transparent); animation-direction: reverse; animation-duration: 8s; }
.winner-rank { position: absolute; z-index: 3; left: .4rem; top: 46%; margin: 0; padding: .38rem .52rem; border-left: 3px solid var(--winner-accent); background: rgba(5,5,9,.78); color: var(--gold); font: 700 .54rem ui-monospace,monospace; letter-spacing: .15em; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.winner-visual { position: relative; z-index: 1; width: min(34vw,390px); height: 100%; max-height: 510px; transform-origin: 50% 88%; }
.winner-visual img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 20px 20px #000) drop-shadow(0 0 18px color-mix(in srgb, var(--winner-accent) 42%, transparent)); }
.victory-fx { position: absolute; z-index: 3; display: block; pointer-events: none; opacity: 0; }
.result-screen[data-winner="sky"].is-active .winner-visual { animation: sky-victory-laugh 2.75s ease-in-out 1.05s infinite; }
.result-screen[data-winner="sky"].is-active .winner-visual img { animation: sky-victory-in .92s cubic-bezier(.12,.86,.18,1) both; }
.result-screen[data-winner="bisakov"].is-active .winner-visual { animation: bisakov-victory-strut 2.65s cubic-bezier(.42,0,.32,1) 1s infinite; }
.result-screen[data-winner="bisakov"].is-active .winner-visual img { animation: bisakov-victory-in .82s cubic-bezier(.1,.92,.18,1) both; }
.sky-ball-spin { left: 58.5%; top: 1.2%; width: 25%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 18%, rgba(255,255,255,.95) 24%, var(--blue) 29%, transparent 36% 65%, rgba(227,38,57,.9) 72%, transparent 80%); filter: drop-shadow(0 0 9px var(--blue)); -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 64% 72%, transparent 75%); mask: radial-gradient(circle, transparent 0 61%, #000 64% 72%, transparent 75%); }
.sky-ball-spin::after { content: ""; position: absolute; inset: 35% -15%; border: 2px solid rgba(178,222,255,.82); border-left-color: transparent; border-radius: 50%; transform: rotate(-9deg); filter: drop-shadow(0 0 5px var(--blue)); }
.result-screen[data-winner="sky"].is-active .sky-ball-spin { opacity: 1; animation: victory-ball-spin .46s linear infinite; }
.sky-laugh-mark { left: 24%; top: 14%; width: 13%; height: 11%; border-top: 3px solid var(--gold); border-left: 2px solid var(--blue); border-radius: 60% 0 0 0; rotate: -18deg; filter: drop-shadow(0 0 6px rgba(43,169,255,.8)); }
.sky-laugh-mark::before, .sky-laugh-mark::after { content: ""; position: absolute; width: 65%; height: 2px; background: var(--ivory); transform-origin: right center; }
.sky-laugh-mark::before { right: 108%; top: 22%; rotate: -18deg; }
.sky-laugh-mark::after { right: 116%; top: 61%; rotate: 9deg; }
.result-screen[data-winner="sky"].is-active .sky-laugh-mark { animation: victory-laugh-flash 2.75s steps(1,end) 1.05s infinite; }
.bisakov-chest-thump { left: 35%; top: 19%; width: 29%; aspect-ratio: 1.25; border: 3px solid var(--gold); border-radius: 50%; filter: drop-shadow(0 0 10px var(--crimson)); }
.bisakov-chest-thump::before, .bisakov-chest-thump::after { content: ""; position: absolute; inset: 22%; border: 2px solid rgba(255,255,255,.85); border-radius: inherit; }
.bisakov-chest-thump::after { inset: 42%; background: var(--gold); box-shadow: 0 0 18px var(--crimson); }
.result-screen[data-winner="bisakov"].is-active .bisakov-chest-thump { animation: chest-thump-wave 2.65s ease-out 1s infinite; }
.bisakov-step-shock { left: 22%; bottom: -.5%; width: 58%; height: 9%; border-top: 3px solid var(--gold); border-radius: 50%; filter: drop-shadow(0 0 10px var(--crimson)); }
.result-screen[data-winner="bisakov"].is-active .bisakov-step-shock { animation: victory-step-shock 2.65s ease-out 1s infinite; }
.result-stamp { position: absolute; z-index: 4; right: 2%; top: 12%; width: clamp(76px,8vw,104px); aspect-ratio: 1; display: grid; place-content: center; border: 2px solid var(--gold); border-radius: 50%; background: rgba(8,8,13,.9); text-align: center; transform: rotate(7deg); box-shadow: 0 0 0 5px rgba(0,0,0,.26), 0 0 24px rgba(208,162,76,.2); animation: stamp-in .55s cubic-bezier(.18,1.35,.32,1) .55s both; }
.result-stamp span { color: var(--ivory); font-size: clamp(1.3rem,2.2vw,1.85rem); }
.result-stamp small { color: #aaa6ae; font-family: ui-monospace, monospace; font-size: .42rem; letter-spacing: .06em; }
.legacy-scoreboard { align-self: center; overflow: hidden; border: 1px solid #423f49; background: linear-gradient(145deg, rgba(20,19,27,.96), rgba(8,8,13,.94)); box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.05); animation: legacy-board-in .7s cubic-bezier(.17,.78,.2,1) .15s both; }
.legacy-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .78rem .9rem .7rem; border-bottom: 1px solid #35323b; background: linear-gradient(90deg, color-mix(in srgb, var(--winner-deep) 30%, transparent), transparent); }
.stats-label { margin: 0 0 .16rem; color: var(--gold); font: 700 .52rem ui-monospace,monospace; letter-spacing: .18em; }
.legacy-heading h3 { margin: 0; font-size: clamp(1.2rem,2.4vw,2rem); font-style: italic; letter-spacing: .03em; }
.global-note { max-width: 220px; margin: 0; color: #78747e; font: .46rem/1.35 ui-monospace,monospace; text-align: right; letter-spacing: .04em; }
.local-ticker[hidden], .legacy-scoreboard[hidden], #shareGlobalRecord[hidden] { display: none !important; }
.rivalry-score { display: grid; grid-template-columns: 1fr minmax(90px,.7fr) 1fr; align-items: stretch; }
.career-fighter { display: grid; align-content: center; min-width: 0; min-height: 155px; overflow: hidden; padding: .8rem; text-align: center; background: linear-gradient(145deg, rgba(255,255,255,.035), transparent); }
.career-fighter > span { font-size: clamp(1rem,2.3vw,1.65rem); font-style: italic; }
.career-fighter strong { margin: -.06em 0 -.1em; font-size: clamp(3.15rem,5vw,4.6rem); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 28px currentColor; }
.career-fighter small { color: #8b8791; font: .47rem ui-monospace,monospace; letter-spacing: .09em; }
.sky-stat { border-right: 1px solid #302e37; }
.sky-stat > span, .sky-stat strong { color: var(--blue); }
.bisakov-stat { border-left: 1px solid #302e37; }
.bisakov-stat > span, .bisakov-stat strong { color: var(--crimson); }
.career-total { display: grid; place-content: center; text-align: center; background: #0c0c12; }
.career-total span { color: var(--gold); font: 700 .48rem/1.25 ui-monospace,monospace; letter-spacing: .12em; }
.career-total strong { font-size: clamp(1.5rem,2.3vw,2.1rem); line-height: 1; font-variant-numeric: tabular-nums; }
.career-total i { color: #686570; font: normal .42rem ui-monospace,monospace; letter-spacing: .08em; }
.rivalry-meter { position: relative; display: flex; height: 12px; margin: 0 .85rem .85rem; overflow: visible; background: #1c1a22; box-shadow: inset 0 0 0 1px #32303a; }
.rivalry-meter span { height: 100%; transform: scaleX(0); animation: legacy-fill .9s cubic-bezier(.2,.84,.24,1) .72s forwards; }
.sky-legacy-bar { width: var(--sky-share); transform-origin: right; background: linear-gradient(90deg,var(--blue-deep),var(--blue)); box-shadow: 0 0 15px rgba(43,169,255,.65); }
.bisakov-legacy-bar { width: var(--bisakov-share); transform-origin: left; background: linear-gradient(90deg,var(--crimson),var(--crimson-deep)); box-shadow: 0 0 15px rgba(227,38,57,.58); }
.rivalry-meter i { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; width: 30px; height: 30px; place-items: center; translate: -50% -50%; border: 1px solid var(--gold); border-radius: 50%; background: #09090e; color: var(--gold); font: italic 700 .65rem Impact,sans-serif; }
.legacy-footer { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid #35323b; }
.legacy-leader, .streak-stat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .6rem .85rem; }
.legacy-leader span, .streak-stat span { color: #8e8a94; font: .5rem ui-monospace,monospace; letter-spacing: .1em; }
.legacy-leader b { color: var(--gold); font-style: italic; font-size: 1.2rem; }
.streak-stat { border-left: 1px solid #35323b; }
.streak-stat strong { color: var(--ivory); font-size: 1.5rem; }
.legacy-scoreboard strong.is-revealing { animation: stat-reveal .48s cubic-bezier(.16,.86,.2,1) var(--stat-delay, .35s) both; }
.result-actions { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: .55rem; width: min(1180px,100%); margin: 0 auto; }
.result-actions .primary-cta { min-width: 0; }
.secondary-cta { color: var(--ivory); background: #191821; border: 1px solid #44414b; }
.share-button { position: relative; z-index: 4; min-height: 54px; padding: .55rem 1rem; color: #08080d; background: linear-gradient(120deg,#d49f37,#f0cf75); border: 1px solid #ffe4a0; box-shadow: 0 10px 34px rgba(208,162,76,.18); animation: share-pulse 2.6s ease-in-out 1.6s infinite; }
.share-button span { display: inline-block; margin-right: .35rem; }
.share-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.share-sheet { position: fixed; z-index: 80; inset: 0; display: grid; align-items: end; }
.share-sheet[hidden] { display: none; }
.share-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,2,6,.78); backdrop-filter: blur(5px); }
.share-sheet-panel { position: relative; width: min(100%, 620px); margin: 0 auto; padding: 1rem max(1rem,var(--safe-right)) calc(1rem + var(--safe-bottom)) max(1rem,var(--safe-left)); border: 1px solid #4d402c; border-bottom: 0; background: linear-gradient(145deg, rgba(25,24,34,.98), rgba(7,7,12,.99)); box-shadow: 0 -20px 70px #000; animation: share-sheet-in .28s cubic-bezier(.18,.88,.25,1) both; }
.share-sheet-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.share-sheet-header h3 { margin: .22rem 0 0; font-size: clamp(1.8rem,7vw,3rem); font-style: italic; line-height: .9; }
.share-sheet-close { width: 38px; height: 38px; border: 1px solid #4c4852; border-radius: 50%; background: #14131b; color: #aaa6ae; font: 1.45rem/1 ui-monospace,monospace; cursor: pointer; }
.share-result-preview { display: grid; gap: .32rem; margin-bottom: .75rem; padding: .9rem 1rem; border: 1px solid #50452f; background: radial-gradient(circle at 100% 0, rgba(208,162,76,.12), transparent 42%), #0c0b11; }
.share-result-preview small { color: var(--gold); font: 700 .48rem ui-monospace,monospace; letter-spacing: .15em; }
.share-result-preview strong { color: var(--ivory); font-size: clamp(1.15rem,4vw,1.65rem); letter-spacing: .025em; }
.share-result-preview p { margin: 0; color: #d0cbd3; font: 700 .72rem/1.45 ui-monospace,monospace; }
.share-result-preview span { color: #77747e; font: 600 .55rem/1.4 ui-monospace,monospace; letter-spacing: .04em; }
.share-options { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.share-option { display: grid; min-height: 74px; padding: .75rem; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; border: 1px solid #393640; background: #111018; color: var(--ivory); text-decoration: none; transition: transform .16s ease,border-color .16s ease,background .16s ease; }
.share-option:hover { transform: translateY(-2px); border-color: currentColor; background: #191821; }
.share-option span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 800 .8rem ui-monospace,monospace; }
.share-option b { align-self: end; font-size: .92rem; letter-spacing: .04em; }
.share-option small { align-self: start; color: #77747e; font: .47rem ui-monospace,monospace; letter-spacing: .06em; }
.share-option.whatsapp { color: #39d879; }
.share-option.linkedin { color: #54a8e8; }
.share-option.x { color: #f0e7d7; }
.share-option.facebook { color: #7198f5; }
.share-note { margin: .7rem 0 0; color: #68656f; font: .48rem ui-monospace,monospace; letter-spacing: .05em; text-align: center; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(1rem + var(--safe-bottom)); transform: translate(-50%, 20px); padding: .7rem 1rem; background: var(--ivory); color: #08080d; font-family: ui-monospace, monospace; font-size: .68rem; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes pulse { 50% { transform: scale(1.025); box-shadow: 0 12px 48px rgba(227,38,57,.55); } }
@keyframes share-sheet-in { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes backdrop-cinemagraph {
  0% { transform: scale(1.025) translate3d(-.35%, -.2%, 0); filter: saturate(.96) brightness(.9); }
  46% { filter: saturate(1.08) brightness(.98); }
  100% { transform: scale(1.085) translate3d(.45%, .35%, 0); filter: saturate(1.13) brightness(.94); }
}
@keyframes analog-noise {
  0%, 100% { translate: 0; opacity: .12; }
  25% { translate: -.35% .2%; opacity: .17; }
  50% { translate: .25% -.3%; opacity: .13; }
  75% { translate: .15% .25%; opacity: .18; }
}
@keyframes energy-lightning {
  0%, 15%, 18%, 48%, 50%, 73%, 77%, 100% { opacity: 0; }
  16% { opacity: .28; }
  16.8% { opacity: .05; }
  17.4% { opacity: .42; }
  49% { opacity: .18; }
  74% { opacity: .1; }
  75% { opacity: .34; }
  76% { opacity: .04; }
}
@keyframes embers-rise {
  0% { transform: translate3d(0, 13%, 0); opacity: .08; }
  12% { opacity: .5; }
  70% { opacity: .42; }
  100% { transform: translate3d(1.5%, -23%, 0); opacity: 0; }
}
@keyframes grid-drive {
  from { background-position: 0 0, 0 0; opacity: .3; }
  50% { opacity: .48; }
  to { background-position: 0 4.3vh, 6.5vw 0; opacity: .3; }
}
@keyframes sun-reactor {
  0%, 100% { opacity: .32; filter: saturate(.9); scale: .97; }
  50% { opacity: .5; filter: saturate(1.25); scale: 1.035; }
}
@keyframes arena-sky-breathe {
  0% { background-position: 50% 50%; filter: brightness(.9) saturate(.96); }
  100% { background-position: 47% 45%; filter: brightness(1.08) saturate(1.15); }
}
@keyframes arena-embers {
  0% { transform: translate3d(0, 13%, 0); opacity: .08; }
  18% { opacity: .48; }
  78% { opacity: .35; }
  100% { transform: translate3d(1.6%, -22%, 0); opacity: 0; }
}
@keyframes arena-mist {
  from { transform: translate3d(-7%, 1%, 0) scaleX(.88); opacity: .18; }
  to { transform: translate3d(8%, -3%, 0) scaleX(1.12); opacity: .42; }
}
@keyframes arena-moon-pulse {
  0%, 100% { scale: .96; opacity: .62; filter: brightness(.92); }
  50% { scale: 1.045; opacity: .82; filter: brightness(1.14); }
}
@keyframes city-drift-back {
  from { translate: -1.3% 0; }
  to { translate: 1.3% -1%; }
}
@keyframes city-drift-front {
  from { translate: .7% 0; }
  to { translate: -1% .5%; }
}
@keyframes world-rift {
  0% { opacity: 0; transform: scale(.3) rotate(-8deg); }
  38% { opacity: .88; transform: scale(.9) rotate(2deg); }
  58% { opacity: 1; transform: scale(1.12) rotate(0); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes arena-floor-drive {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 44px, 4vw 0; }
}
@keyframes fighter-breathe-sky {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(-.12deg); filter: saturate(1.02) contrast(1.04) drop-shadow(0 24px 25px #000); }
  50% { transform: translate3d(.35%, -1.05%, 0) scale(1.012, 1.018) rotate(.16deg); filter: saturate(1.11) contrast(1.06) drop-shadow(0 27px 27px #000); }
}
@keyframes fighter-breathe-bisakov {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(.1deg); filter: saturate(1.03) contrast(1.04) drop-shadow(0 24px 25px #000); }
  50% { transform: translate3d(-.25%, -.85%, 0) scale(1.009, 1.016) rotate(-.14deg); filter: saturate(1.1) contrast(1.06) drop-shadow(0 27px 27px #000); }
}
@keyframes fighter-aura-pulse {
  0%, 100% { opacity: .46; scale: .94; }
  50% { opacity: .78; scale: 1.055; }
}
@keyframes title-fighter-in {
  from { opacity: 0; scale: .94; translate: 0 4%; filter: brightness(.55); }
  to { opacity: 1; scale: 1; translate: 0; filter: brightness(1); }
}
@keyframes fighter-combat-reveal {
  0% { opacity: 0; transform: translateY(7%); filter: brightness(.58) saturate(.7) drop-shadow(0 16px 12px #000); }
  48% { opacity: 1; transform: translateY(-1.6%); filter: brightness(1.24) saturate(1.22) drop-shadow(0 0 18px currentColor) drop-shadow(0 16px 12px #000); }
  100% { opacity: 1; transform: translateY(0); filter: brightness(1) saturate(1) drop-shadow(0 16px 12px #000); }
}
@keyframes intro-round-in {
  0% { opacity: 0; transform: translateY(16px); letter-spacing: .03em; filter: blur(7px); }
  34% { opacity: 1; transform: translateY(-3px); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); letter-spacing: -.045em; }
}
@keyframes intro-fight-in {
  0% { opacity: 0; transform: scaleX(.62) scaleY(1.15); filter: blur(9px) drop-shadow(0 0 0 transparent); }
  42% { opacity: 1; transform: scaleX(1.08) scaleY(.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes intro-flame-slice {
  0% { opacity: 0; scale: 1 .25; }
  38% { opacity: 1; scale: 1 1.08; }
  100% { opacity: .72; scale: 1 1; }
}
@keyframes hit-shake { 0%,100% { translate: 0; } 50% { translate: var(--hit-direction,10px) 0; } }
@keyframes attack-anticipation { from { translate: 0; scale: 1; } to { translate: calc(var(--lunge,22px) * -.18) 0; scale: .97 1.02; } }
@keyframes attack-lunge { 0% { translate: calc(var(--lunge,22px) * -.14) 0; } 62% { translate: var(--lunge,22px) 0; scale: 1.035 .985; } 100% { translate: calc(var(--lunge,22px) * .82) 0; scale: 1; } }
@keyframes attack-recover { from { translate: calc(var(--lunge,22px) * .72) 0; } to { translate: 0; } }
@keyframes dash-strike { 0% { translate: calc(var(--lunge) * -.12) 0; scale: .96 1.03; } 70% { translate: calc(var(--lunge) * 1.18) -2px; scale: 1.06 .96; } 100% { translate: var(--lunge) 0; scale: 1; } }
@keyframes rising-strike { 0% { translate: 0 4vh; scale: .94 1.04; } 68% { translate: calc(var(--lunge) * .72) -9vh; scale: 1.04 .98; } 100% { translate: var(--lunge) -6vh; scale: 1; } }
@keyframes slide-sweep { 0% { translate: calc(var(--lunge) * -.14) 1vh; scale: .96 1; } 72% { translate: calc(var(--lunge) * 1.22) 0; scale: 1.04 .98; } 100% { translate: var(--lunge) 0; scale: 1; } }
@keyframes air-kick { 0% { translate: calc(var(--lunge) * -.1) 1vh; rotate: -3deg; } 65% { translate: calc(var(--lunge) * 1.08) -2vh; rotate: 4deg; } 100% { translate: var(--lunge) 0; rotate: 0deg; } }
@keyframes special-lunge { 0%,100% { translate: 0; } 45% { translate: var(--lunge, 42px) -8px; scale: 1.05; } }
@keyframes no-look-phone { 0% { translate: 0; scale: .96; } 20%,62% { translate: calc(var(--lunge,24px) * -.18) 0; scale: 1.02; } 100% { translate: 0; scale: 1; } }
@keyframes hat-trick-rush { 0% { translate: calc(var(--lunge,54px) * -.18) 0; scale: .96 1.03; } 38% { translate: calc(var(--lunge,54px) * .72) 0; scale: 1.06 .96; } 66% { translate: calc(var(--lunge,54px) * .5) -2vh; rotate: -2deg; } 82% { translate: var(--lunge,54px) -1vh; rotate: 3deg; } 100% { translate: calc(var(--lunge,54px) * .82) 0; rotate: 0deg; } }
@keyframes no-look-overlay { 0%,100% { opacity: 0; } 12%,76% { opacity: 1; } }
@keyframes court-scan { 0% { opacity: 0; clip-path: inset(100% 0 0); } 36%,72% { opacity: .72; clip-path: inset(0); } 100% { opacity: 0; } }
@keyframes play-mark { 0%,15%,100% { opacity: 0; scale: .5; } 28%,74% { opacity: 1; scale: 1; } }
@keyframes route-draw { 0% { opacity: 0; clip-path: inset(0 100% 100% 0); } 36%,72% { opacity: 1; clip-path: inset(0); } 100% { opacity: 0; } }
@keyframes backboard-flash { 0%,40%,100% { opacity: 0; scale: .7; } 55%,74% { opacity: 1; scale: 1; } }
@keyframes no-look-cut { 0% { opacity: 0; translate: 0; } 18% { opacity: .72; } 68% { opacity: .34; translate: calc(var(--lunge,24px) * 3.6) 0; } 100% { opacity: 0; translate: calc(var(--lunge,24px) * 4.4) 0; filter: blur(5px) brightness(2); } }
@keyframes hat-trick-sequence { 0%,100% { opacity: 0; } 8%,88% { opacity: 1; } }
@keyframes hat-trick-ball { 0% { left: var(--start-x); bottom: 24%; opacity: 0; rotate: 0deg; scale: .55; } 18% { opacity: 1; } 34% { left: var(--target-x); bottom: 20%; rotate: 180deg; scale: .75; } 61% { left: var(--target-x); bottom: 51%; rotate: 360deg; scale: .88; } 100% { left: var(--target-x); bottom: 43%; opacity: 0; rotate: 760deg; scale: 1.15; } }
@keyframes goal-net-hit { 0%,66% { opacity: 0; scale: .55 .9; } 73% { opacity: .9; scale: .82 1.08; } 86% { opacity: .75; scale: 1.12 .9; } 100% { opacity: 0; scale: 1.3 .74; } }
@keyframes turf-burst { 0%,22% { opacity: 0; transform: scaleX(.1); } 38% { opacity: 1; transform: scaleX(.48); } 100% { opacity: 0; transform: scaleX(1.18); } }
@keyframes ankle-crossover { 0% { translate: 0; scale: 1; } 44% { translate: calc(var(--lunge,24px) * -.58) 0; scale: .94 1.04; } 100% { translate: calc(var(--lunge,24px) * .16) 0; scale: 1; } }
@keyframes ankle-counter-arrive { 0% { opacity: .2; translate: calc(var(--lunge,24px) * 1.8) 0; filter: brightness(2.2) blur(5px); } 62% { opacity: 1; translate: calc(var(--lunge,24px) * -.14) 0; filter: brightness(1.35) blur(0); } 100% { opacity: 1; translate: 0; } }
@keyframes ankle-bait { 0% { opacity: 0; scale: .88; } 20%,68% { opacity: .78; scale: 1; } 100% { opacity: 0; scale: 1.04; } }
@keyframes ankle-shatter { 0% { opacity: .9; scale: 1; filter: brightness(1.8) saturate(1.8); } 36% { opacity: 1; scale: 1.09 .92; filter: brightness(3) saturate(0); } 100% { opacity: 0; scale: 1.32 .64; filter: brightness(2) blur(6px); } }
@keyframes ankle-shard { from { opacity: 1; translate: 0; scale: 1; } to { opacity: 0; translate: var(--shard-distance) 0; scale: .2 1; } }
@keyframes impact { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.8); } }
@keyframes impact-spark { from { opacity: 1; scale: .25 1; translate: 0; } to { opacity: 0; scale: 1.4 .35; translate: 42px 0; } }
@keyframes wave { from { opacity: .95; transform: translateX(-50%) scale(.2); } to { opacity: 0; transform: translateX(-50%) scale(2.3); } }
@keyframes ball-spin { to { rotate: 360deg; } }
@keyframes ready { 50% { filter: brightness(1.55); } }
@keyframes winner-in { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes camera-hit { 0%,100% { translate: 0; } 25% { translate: var(--shake-distance,3px) calc(var(--shake-distance,3px) * -.5); } 50% { translate: calc(var(--shake-distance,3px) * -.8) var(--shake-distance,3px); } 75% { translate: calc(var(--shake-distance,3px) * .5) calc(var(--shake-distance,3px) * -.35); } }
@keyframes combo-pop { 0% { opacity: 0; scale: .62; } 24%,72% { opacity: 1; scale: 1.06; } 100% { opacity: 0; scale: .96; translate: 0 -18px; } }
@keyframes ko-slam { 0% { opacity: 0; transform: scale(2.4); filter: blur(8px); } 42% { opacity: 1; transform: scale(.92); filter: blur(0); } 65% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes winner-pulse { from { scale: 1; } to { scale: 1.025; } }
@keyframes victory-title { 0% { opacity: 0; transform: translateY(-28px) scaleX(1.16); filter: blur(7px); } 58% { opacity: 1; transform: translateY(4px) scaleX(.97); filter: blur(0); } 100% { transform: none; } }
@keyframes sky-victory-in { 0% { opacity: 0; transform: translate3d(-22%,5%,0) rotate(-5deg) scale(.88); filter: blur(8px) brightness(2.1); } 62% { opacity: 1; transform: translate3d(2%,-1%,0) rotate(1deg) scale(1.03); filter: blur(0) brightness(1.22); } 100% { transform: none; } }
@keyframes bisakov-victory-in { 0% { opacity: 0; transform: translate3d(18%,-6%,0) scale(1.16); filter: blur(7px) contrast(1.4); } 55% { opacity: 1; transform: translate3d(-2%,2%,0) scale(.98); filter: blur(0) contrast(1.05); } 72% { transform: translateX(1.2%) scale(1.015); } 100% { transform: none; } }
@keyframes sky-victory-laugh { 0%,100% { transform: translateY(0) rotate(0); } 7% { transform: translateY(-5px) rotate(-.7deg); } 13% { transform: translateY(1px) rotate(.65deg); } 19% { transform: translateY(-3px) rotate(-.45deg); } 26% { transform: translateY(0) rotate(.3deg); } 56% { transform: translateY(-2px); } }
@keyframes victory-ball-spin { to { transform: rotate(360deg); } }
@keyframes victory-laugh-flash { 0%,5%,29%,100% { opacity: 0; transform: scale(.65); } 7%,12%,16%,23% { opacity: 1; transform: scale(1); } 10%,19% { opacity: .35; transform: scale(.82); } }
@keyframes bisakov-victory-strut { 0%,100% { transform: translate3d(-3px,0,0) rotate(-.25deg); } 18% { transform: translate3d(0,-5px,0) rotate(.3deg); } 38% { transform: translate3d(4px,0,0) rotate(.5deg); } 58% { transform: translate3d(1px,-4px,0) rotate(-.35deg); } 78% { transform: translate3d(-2px,0,0) rotate(-.4deg); } }
@keyframes chest-thump-wave { 0%,8%,46%,100% { opacity: 0; transform: scale(.22); } 12% { opacity: .95; transform: scale(.38); } 28% { opacity: 0; transform: scale(1.45); } 58% { opacity: .8; transform: scale(.3); } 75% { opacity: 0; transform: scale(1.25); } }
@keyframes victory-step-shock { 0%,31%,100% { opacity: 0; transform: scaleX(.25); } 39% { opacity: .9; transform: scaleX(.45); } 58% { opacity: 0; transform: scaleX(1.25); } 74% { opacity: .75; transform: scaleX(.42); } 92% { opacity: 0; transform: scaleX(1.15); } }
@keyframes winner-aura { 0%,100% { scale: .96; opacity: .58; } 50% { scale: 1.04; opacity: 1; } }
@keyframes victory-orbit { to { rotate: 360deg; } }
@keyframes victory-rays { to { rotate: 360deg; } }
@keyframes victory-embers { from { transform: translateY(18vh); opacity: 0; } 14% { opacity: .75; } to { transform: translateY(-112vh) translateX(4vw); opacity: 0; } }
@keyframes stamp-in { from { opacity: 0; scale: 1.8; rotate: -20deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes legacy-board-in { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes legacy-fill { to { transform: scaleX(1); } }
@keyframes share-pulse { 0%,100% { box-shadow: 0 10px 34px rgba(208,162,76,.16); } 50% { box-shadow: 0 10px 44px rgba(208,162,76,.42), 0 0 0 3px rgba(208,162,76,.08); } }
@keyframes stat-reveal { from { opacity: .15; scale: 1.22; filter: blur(4px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes combat-idle { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-2px) scaleY(1.012); } }
@keyframes fullscreen-glow-prompt {
  0%, 100% { opacity: .45; scale: .82; }
  50% { opacity: 1; scale: 1.08; }
}
@keyframes fullscreen-frame-prompt {
  0%, 100% { transform: scale(.92); filter: brightness(.9); }
  50% { transform: scale(1.04); filter: brightness(1.25); }
}
@keyframes fallback-device-rotate {
  0%, 18% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  52%, 82% { transform: translate(-50%, -50%) rotate(90deg) scale(1.08); }
  100% { transform: translate(-50%, -50%) rotate(90deg) scale(1); }
}
@keyframes fallback-arrow-rotate {
  0%, 16% { opacity: .18; transform: rotate(-38deg) scale(.82); }
  50%, 80% { opacity: 1; transform: rotate(38deg) scale(1.08); }
  100% { opacity: 0; transform: rotate(48deg) scale(.94); }
}

body.in-fight .fullscreen-note:not([aria-hidden="true"]) {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  padding: calc(1.4rem + var(--safe-top)) calc(1.4rem + var(--safe-right)) calc(1.4rem + var(--safe-bottom)) calc(1.4rem + var(--safe-left));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  background: radial-gradient(circle at 50% 40%, rgba(208,162,76,.16), transparent 34%), #08080d;
  text-align: center;
}
.fullscreen-visual { position: relative; width: 158px; height: 92px; margin-bottom: .25rem; }
.fullscreen-visual::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(208,162,76,.22), transparent 66%); transform: translate(-50%, -50%); animation: fullscreen-glow-prompt 2s ease-in-out infinite; }
.fullscreen-frame { position: absolute; inset: 12px 8px; border: 1px solid rgba(208,162,76,.34); background: linear-gradient(145deg, rgba(43,169,255,.13), rgba(227,38,57,.13)); box-shadow: inset 0 0 24px rgba(208,162,76,.08); animation: fullscreen-frame-prompt 2s ease-in-out infinite; }
.fullscreen-frame i { position: absolute; width: 24px; height: 18px; border-color: var(--ivory); filter: drop-shadow(0 0 7px rgba(208,162,76,.48)); }
.fullscreen-frame i:nth-child(1) { left: -5px; top: -5px; border-left: 3px solid; border-top: 3px solid; }
.fullscreen-frame i:nth-child(2) { right: -5px; top: -5px; border-right: 3px solid; border-top: 3px solid; }
.fullscreen-frame i:nth-child(3) { right: -5px; bottom: -5px; border-right: 3px solid; border-bottom: 3px solid; }
.fullscreen-frame i:nth-child(4) { left: -5px; bottom: -5px; border-left: 3px solid; border-bottom: 3px solid; }
.rotate-device, .fallback-rotate-arrow { display: none; }
.fullscreen-note.is-rotate-fallback .fullscreen-frame { display: none; }
.fullscreen-note.is-rotate-fallback .rotate-device {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 48px;
  height: 78px;
  border: 3px solid var(--ivory);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(43,169,255,.14), rgba(227,38,57,.14));
  box-shadow: inset 0 0 0 5px #08080d, inset 0 0 0 6px rgba(208,162,76,.62), 0 0 24px rgba(208,162,76,.2);
  transform-origin: center;
  animation: fallback-device-rotate 2.35s cubic-bezier(.65,0,.25,1) infinite;
}
.fullscreen-note.is-rotate-fallback .fallback-rotate-arrow {
  position: absolute;
  z-index: 2;
  right: 8px;
  top: 4px;
  display: block;
  color: var(--gold);
  font: 700 3rem/1 Arial, sans-serif;
  text-shadow: 0 0 16px rgba(208,162,76,.58);
  animation: fallback-arrow-rotate 2.35s ease-in-out infinite;
}
.fullscreen-note strong { color: var(--ivory); font-size: clamp(2rem, 8vw, 3.2rem); letter-spacing: .04em; text-shadow: 0 4px 0 #000, 0 0 22px rgba(208,162,76,.18); }
.fullscreen-note > span { color: var(--gold); font-family: ui-monospace, monospace; font-size: clamp(.62rem, 2.2vw, .75rem); font-weight: 800; letter-spacing: .14em; }
.fullscreen-note small { color: #88858f; font: 600 .58rem/1.4 ui-monospace, monospace; letter-spacing: .08em; }
.fullscreen-cta { width: min(82vw, 360px); min-height: 58px; margin-top: .35rem; }
.fullscreen-continue { min-height: 36px; color: #aaa6ae; }

@media (orientation: portrait) and (max-width: 900px) {
  html { overflow-x: hidden; overflow-y: auto; }
  body { min-height: max(var(--app-height), 680px); overflow: visible; }
  #app { height: auto; min-height: max(var(--app-height), 680px); }
  .screen { height: max(var(--app-height), 680px); min-height: 680px; }
  .start-screen {
    height: max(var(--app-height), 780px);
    min-height: 780px;
    background-position: 50% center;
  }
  .start-screen::before { background: linear-gradient(180deg, rgba(2,2,7,.06), rgba(2,2,7,.24) 46%, rgba(2,2,6,.95) 83%, #020205); }
  .start-sun { top: 21%; width: 43vw; }
  .start-grid { bottom: 6%; height: 40%; background-size: 14vw 4vh; }
  .start-fighter { bottom: 22%; width: 94vw; height: 88%; }
  .start-fighter-sky { left: -34%; }
  .start-fighter-bisakov { right: -34%; }
  .start-fighter b { display: none; }
  .start-frame { width: 96vw; padding-right: .7rem; padding-bottom: calc(14rem + var(--safe-bottom)); padding-left: .7rem; }
  .start-eyebrow { display: none; }
  .title-lockup { margin-bottom: .2rem; }
  .logo { min-width: 91vw; padding-inline: 0; transform: scaleX(.88); }
  .logo-top { font-size: clamp(2.9rem, 14.5vw, 5.6rem); }
  .logo-bottom { font-size: clamp(2.5rem, 12.5vw, 4.9rem); }
  .versus-slash { margin-bottom: .55rem; }
  .start-frame .primary-cta { width: min(82vw, 390px); min-height: 70px; padding: .88rem 1.7rem; font-size: 1.35rem; }
  .start-frame .primary-cta small { margin-top: .22rem; font-size: .68rem; }
  .start-screen .local-ticker { display: none; }
  .start-legal { position: absolute; z-index: 8; right: 50%; bottom: calc(.35rem + var(--safe-bottom)); display: flex; width: 90%; flex-direction: column; align-items: center; gap: .7rem; transform: translateX(50%); }
  .start-disclaimer { position: static; width: 100%; padding: .4rem .55rem; transform: none; font-size: 10.5px; line-height: 1.35; }
  .creator-credit { position: static; min-height: 30px; padding: .48rem .68rem; font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif; font-size: .64rem; font-weight: 800; line-height: 1; letter-spacing: .09em; }
  .start-screen .creator-credit { position: relative; top: -20px; align-self: center; }
  .sound-toggle { display: block; width: 42px; height: 42px; padding: 0; border-radius: 50%; color: var(--gold); font-size: 0; }
  .sound-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; background: currentColor; transform: translate(-50%, -50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat; }
  .sound-toggle[aria-pressed="false"] { color: #a4a1aa; }
  .sound-toggle[aria-pressed="false"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='m16 9 6 6'/%3E%3Cpath d='m22 9-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='m16 9 6 6'/%3E%3Cpath d='m22 9-6 6'/%3E%3C/svg%3E"); }
  .fighter-select-grid { min-height: 58vh; }
  .fighter-card img { object-position: 50% 10%; }
  .fighter-card .selection-action { object-fit: cover; }
  .select-footer { flex-direction: column; gap: .5rem; }
  .result-header h2 { font-size: clamp(3rem,15vw,5.3rem); }
  .result-main { display: flex; flex-direction: column; margin-top: .65rem; }
  .winner-stage { min-height: 320px; }
  .winner-visual { width: min(82vw,390px); max-height: 390px; }
  .winner-aura { width: min(75vw,340px); }
  .legacy-scoreboard { width: 100%; }
  .career-fighter { min-height: 132px; padding-inline: .3rem; }
  .career-fighter strong { font-size: clamp(3.2rem,18vw,5.4rem); }
  .career-fighter small { font-size: .4rem; }
  .result-actions { grid-template-columns: 1fr 1fr; }
  .share-button { grid-column: 1 / -1; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .start-frame { padding-top: calc(.8rem + var(--safe-top)); padding-bottom: calc(6.2rem + var(--safe-bottom)); }
  .start-fighter { bottom: -15%; height: 116%; }
  .start-eyebrow, .start-screen .local-ticker { display: none; }
  .logo-top { font-size: clamp(2.7rem, 9.2vw, 5.35rem); }
  .logo-bottom { font-size: clamp(2.25rem, 7.6vw, 4.55rem); }
  .versus-slash { margin: .1rem 0 .35rem; }
  .versus-slash b { width: 32px; height: 32px; font-size: .8rem; }
  .start-frame .primary-cta { width: min(66vw, 420px); min-height: 58px; padding: .62rem 1.7rem; font-size: 1.25rem; }
  .start-frame .primary-cta small { margin-top: .16rem; font-size: .62rem; }
  .start-legal { position: absolute; z-index: 8; left: 50%; bottom: calc(.2rem + var(--safe-bottom)); display: flex; width: 95%; flex-direction: column; align-items: flex-start; gap: .3rem; transform: translateX(-50%); }
  .start-disclaimer { position: static; width: 100%; padding: .3rem .5rem; transform: none; font-size: 9.5px; line-height: 1.28; }
  .creator-credit { position: static; min-height: 28px; padding-block: .42rem; font-size: .5rem; }
  .start-screen .creator-credit { position: relative; top: -20px; align-self: center; }
  .select-header { padding-top: calc(.45rem + var(--safe-top)); padding-bottom: .4rem; }
  .select-header h2 { font-size: 1.25rem; }
  .fighter-copy { bottom: .55rem; }
  .fighter-copy strong { font-size: clamp(2rem, 6.5vw, 3.8rem); }
  .select-footer { min-height: 66px; padding-top: .35rem; padding-bottom: calc(.35rem + var(--safe-bottom)); }
  .select-footer p { display: none; }
  .primary-cta.compact { min-height: 46px; }
  .fighter { bottom: 12%; width: min(27vw, 46vh); }
  .controls { bottom: calc(.35rem + var(--safe-bottom)); }
  .action-cluster { transform: scale(.9); transform-origin: bottom left; }
  .dpad { transform: scale(1); transform-origin: bottom right; }
  .result-screen { padding-top: calc(.4rem + var(--safe-top)); padding-bottom: calc(.4rem + var(--safe-bottom)); }
  .result-header { position: absolute; z-index: 5; left: 2%; top: calc(.45rem + var(--safe-top)); width: 42%; text-align: left; }
  .result-header .eyebrow { justify-content: flex-start; }
  .result-header h2 { font-size: clamp(2.5rem,6.2vw,4.3rem); line-height: .82; }
  .result-header > p:last-child { margin-top: .35rem; }
  .result-main { grid-template-columns: minmax(250px,.78fr) minmax(410px,1.22fr); gap: .45rem; width: 100%; margin: 0 0 .38rem; }
  .winner-stage { min-height: 0; height: 100%; padding-top: 3.6rem; }
  .winner-visual { width: min(31vw,330px); max-height: 72vh; }
  .winner-aura { top: 58%; width: min(30vw,270px); }
  .winner-rank { display: none; }
  .result-stamp { right: 0; top: 34%; width: 70px; }
  .legacy-scoreboard { width: 100%; }
  .legacy-heading { padding: .48rem .65rem .4rem; }
  .legacy-heading h3 { font-size: 1.15rem; }
  .global-note { max-width: 190px; font-size: .41rem; }
  .career-fighter { min-height: 108px; padding: .38rem; }
  .career-fighter strong { font-size: clamp(3.15rem,7vw,5rem); }
  .career-total strong { font-size: 2rem; }
  .rivalry-meter { margin-bottom: .45rem; }
  .legacy-leader, .streak-stat { min-height: 37px; padding: .35rem .65rem; }
  .result-actions { grid-template-columns: 1fr 1fr 1.15fr; width: 100%; }
  .result-actions button, .share-button { min-height: 45px; }
}

@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  .fighter-card .selection-portrait { object-position: 50% 0; transform: scale(.94); transform-origin: 50% 0; }
}

@media (orientation: portrait) and (max-width: 900px),
       (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  .result-credit {
    position: static;
    display: flex;
    flex: 0 0 auto;
    align-self: center;
    min-height: 26px;
    margin: .65rem auto .1rem;
    padding: .42rem .58rem;
    font-size: .52rem;
    opacity: .82;
  }
}

/* Mobile result composition: the victory art leads, sharing is the primary action,
   and the record remains a complete, non-shrinking block on short screens. */
@media (orientation: portrait) and (max-width: 900px) {
  .result-screen.is-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto;
    align-content: start;
    gap: .65rem .55rem;
    height: var(--app-height);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: calc(.8rem + var(--safe-bottom));
  }
  .result-header { z-index: 1; grid-column: 1 / -1; grid-row: 1; }
  .result-main, .result-actions { display: contents; }
  .winner-stage {
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: clamp(300px, 40vh, 350px);
    min-height: 300px;
    margin-top: -2.4rem;
    padding-top: 0;
    overflow: visible;
  }
  .result-screen[data-winner="sky"] .result-header h2 { font-size: clamp(4.4rem, 22vw, 6.6rem); letter-spacing: -.055em; }
  .result-screen[data-winner="bisakov"] .result-header h2 { font-size: clamp(3.4rem, 17vw, 5.6rem); letter-spacing: -.05em; }
  .winner-visual { width: min(94vw, 450px); height: clamp(390px, 52vh, 450px); max-height: none; }
  .winner-aura { top: 55%; width: min(82vw, 370px); }
  .result-stamp { right: 1%; top: 22%; }
  .share-button {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 62px;
    margin-top: -2.35rem;
    font-size: 1.12rem;
  }
  .legacy-scoreboard {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: stretch;
    flex: none;
    min-height: 252px;
  }
  .legacy-heading { min-height: 62px; }
  .legacy-heading .global-note { display: none; }
  .career-fighter { min-height: 112px; }
  #rematchButton, #switchButton { grid-row: 5; min-height: 52px; padding-inline: .55rem; font-size: .9rem; }
  #rematchButton { grid-column: 1; }
  #switchButton { grid-column: 2; }
  .result-credit { grid-column: 1 / -1; grid-row: 6; margin-top: 0; }
}

@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  .result-screen.is-active {
    display: grid;
    grid-template-columns: minmax(250px, 42%) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 48px 32px;
    align-content: stretch;
    gap: .4rem .5rem;
    height: var(--app-height);
    min-height: 0;
    overflow: hidden;
    padding: calc(.35rem + var(--safe-top)) calc(.55rem + var(--safe-right)) calc(.3rem + var(--safe-bottom)) calc(.55rem + var(--safe-left));
  }
  .result-header { z-index: 1; left: calc(.55rem + var(--safe-left)); top: calc(.35rem + var(--safe-top)); width: 42%; }
  .result-main, .result-actions { display: contents; }
  .winner-stage {
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    overflow: visible;
  }
  .winner-visual { width: min(43vw, 410px); height: calc(100% + .2rem); max-height: none; }
  .winner-aura { top: 56%; width: min(38vw, 330px); }
  .result-stamp { right: -1%; top: 38%; width: clamp(62px, 8vw, 74px); }
  .legacy-scoreboard { grid-column: 2 / -1; grid-row: 1; align-self: center; width: 100%; min-height: 0; }
  .share-button {
    grid-column: 1;
    grid-row: 2;
    min-height: 48px;
    padding-inline: .45rem;
    font-size: clamp(.82rem, 2.1vw, 1.08rem);
  }
  #rematchButton, #switchButton {
    grid-row: 2;
    min-width: 0;
    min-height: 48px;
    padding: .35rem .45rem;
    font-size: clamp(.68rem, 1.75vw, .9rem);
  }
  #rematchButton { grid-column: 2; }
  #switchButton { grid-column: 3; }
  .result-credit {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 28px;
    margin: 0 auto;
    padding-block: .15rem;
  }
}

@media (min-width: 1001px) {
  .result-screen.is-active {
    display: grid;
    grid-template-columns: minmax(430px, 42%) minmax(250px, 1fr) minmax(250px, 1fr);
    grid-template-rows: minmax(0, 1fr) 60px 36px;
    align-content: stretch;
    gap: .65rem .7rem;
    min-height: 700px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(.75rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(.55rem + var(--safe-bottom)) calc(1rem + var(--safe-left));
  }
  .result-header {
    z-index: 1;
    position: absolute;
    left: calc(1rem + var(--safe-left));
    top: calc(.75rem + var(--safe-top));
    width: calc(42% - 1rem);
  }
  .result-header h2 { font-size: clamp(4.6rem, 7.6vw, 7.2rem); white-space: nowrap; }
  .result-main, .result-actions { display: contents; }
  .winner-stage {
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    overflow: visible;
  }
  .winner-visual { width: min(45vw, 590px); height: 100%; max-height: none; }
  .winner-aura { top: 55%; width: min(38vw, 500px); }
  .winner-rank { left: 2%; }
  .result-stamp { right: 0; top: 27%; }
  .legacy-scoreboard { grid-column: 2 / -1; grid-row: 1; align-self: center; width: 100%; }
  .share-button {
    grid-column: 1;
    grid-row: 2;
    min-height: 60px;
    font-size: 1.18rem;
  }
  #rematchButton, #switchButton {
    grid-row: 2;
    min-width: 0;
    min-height: 60px;
    padding: .55rem .7rem;
    font-size: .95rem;
  }
  #rematchButton { grid-column: 2; }
  #switchButton { grid-column: 3; }
  .result-credit {
    position: static;
    display: flex;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: center;
    justify-self: center;
    min-height: 32px;
    margin: 0;
    padding: .42rem .65rem;
    font-size: .52rem;
    opacity: .82;
  }
}

.quality-lite .action-button,
.quality-lite .dpad button,
.quality-lite .virtual-joystick,
.quality-lite .tutorial-coach,
.quality-lite .keyboard-legend { backdrop-filter: none; }
.quality-lite .arena-sky,
.quality-lite .arena-embers,
.quality-lite .arena-mist,
.quality-lite .arena-moon,
.quality-lite .arena-city-back,
.quality-lite .arena-city-front { animation: none !important; }
.quality-lite .fighter-sprite { filter: drop-shadow(0 7px 5px rgba(0,0,0,.78)); }
.quality-lite .fighter.is-player .fighter-sprite { filter: drop-shadow(0 0 6px rgba(255,255,255,.14)) drop-shadow(0 7px 5px rgba(0,0,0,.78)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .arena-sky,
  .arena-embers,
  .arena-mist,
  .arena-moon,
  .arena-city-back,
  .arena-city-front,
  .scanlines,
  .fighter:not(.is-attacking):not(.is-hit):not(.is-special):not(.is-finisher) .fighter-sprite,
  .arena.is-impacting { animation: none !important; }
  .health-track i,
  .damage-track i,
  .hype-track i,
  .joystick-thumb { transition-duration: .01ms !important; }
}

/* Online is an optional side arena. The cinematic single-player entry remains
   the dominant call to action; this layer only appears after PLAY ONLINE. */
.online-entry {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: min(50vw, 210px);
  min-height: 42px;
  margin: .65rem auto 0;
  padding: .55rem 1rem;
  overflow: hidden;
  border: 1px solid #9d7940;
  color: #fff1d2;
  background: linear-gradient(115deg, #15120f, #2d2418 55%, #594326);
  box-shadow: 0 8px 22px rgba(0,0,0,.42), 0 0 18px rgba(208,162,76,.09), inset 0 0 12px rgba(255,230,168,.08);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  cursor: pointer;
  font: inherit;
  letter-spacing: .08em;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.online-entry i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #43ff9b; box-shadow: 0 0 11px #43ff9b; animation: online-pulse 1.4s ease-in-out infinite; }
.online-entry span { font-size: .8rem; font-weight: 900; }
.online-entry:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 11px 28px rgba(0,0,0,.48), 0 0 22px rgba(208,162,76,.14), inset 0 0 15px rgba(255,230,168,.11); }
.online-entry:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.online-screen, .match-screen {
  isolation: isolate;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 15%, rgba(31,119,170,.2), transparent 35%),
    linear-gradient(145deg, #05070d, #0a0810 54%, #07070c);
}
.online-grid-bg, .match-beam {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .33;
  background-image:
    linear-gradient(rgba(43,169,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,169,255,.12) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(#000, transparent 82%);
  transform: perspective(600px) rotateX(57deg) scale(1.35);
  transform-origin: bottom;
}
.online-screen .noise, .match-screen .noise { z-index: -1; opacity: .08; pointer-events: none; }
.online-header, .match-header {
  z-index: 2;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
  padding: calc(.8rem + var(--safe-top)) calc(1.25rem + var(--safe-right)) .8rem calc(1.25rem + var(--safe-left));
  border-bottom: 1px solid rgba(78,183,238,.2);
  background: rgba(5,6,11,.82);
  backdrop-filter: blur(14px);
}
.online-header h2 { margin: .1rem 0 0; font-size: clamp(1.65rem,4vw,2.5rem); font-style: italic; letter-spacing: .02em; }
.online-live-dot { color: #43ff9b; text-shadow: 0 0 10px #43ff9b; }
.online-season, .match-header > span { color: #747986; font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: .12em; }
.online-season { direction: ltr; }
.online-shell {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1;
  place-items: center;
  width: min(1000px, calc(100% - 2rem));
  margin: auto;
  padding: 1rem 0 calc(1rem + var(--safe-bottom));
}
.online-step-card, .online-waiting {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(18,20,29,.94), rgba(8,9,15,.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
}
.online-step-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0,1fr);
  align-content: center;
  gap: 1.2rem 1.5rem;
  width: min(680px,100%);
  min-height: min(470px, calc(100vh - 140px));
  padding: clamp(1.35rem,4vw,2.8rem);
  overflow: visible;
  animation: online-step-in .32s cubic-bezier(.2,.82,.25,1) both;
}
.online-step-card[hidden] { display: none; }
.online-step-number { grid-row: 1 / span 4; display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid var(--gold); color: var(--gold); background: rgba(208,162,76,.06); font-size: 1.45rem; font-style: italic; transform: skewX(-7deg); }
.online-step-copy { align-self: end; }
.online-step-copy small { color: var(--blue); font: 700 .58rem ui-monospace,monospace; letter-spacing: .16em; }
.online-step-copy h3 { margin: .2rem 0 .35rem; font-size: clamp(1.9rem,5vw,3.1rem); font-style: italic; line-height: .94; }
.online-step-copy p { margin: 0; color: #8c8f99; font-size: .9rem; line-height: 1.55; }
.online-step-copy-centered { text-align: center; }
.online-field { position: relative; display: grid; gap: .45rem; }
.online-step-card > .online-field, .online-city-combobox, .online-flow-next, .online-privacy-note, .online-field-error, .online-code-entry { grid-column: 2; }
.online-field > span { color: #b8bbc3; font-size: .72rem; font-weight: 800; letter-spacing: .05em; }
.online-field input, .online-code-entry input {
  width: 100%;
  min-height: 58px;
  border: 1px solid #333641;
  border-radius: 0;
  padding: .8rem 1rem;
  color: #fff;
  background: #07080d;
  font-family: inherit;
  font-size: max(16px,1rem);
  font-weight: 800;
  outline: 0;
}
.online-field input:focus, .online-code-entry input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(43,169,255,.16); }
.online-field input[aria-invalid="true"] { border-color: #e32639; box-shadow: 0 0 0 2px rgba(227,38,57,.14); }
.online-field input::placeholder, .online-code-entry input::placeholder { color: #555963; }
.online-field-error { margin: -.5rem 0 0; color: #ff7f8b; font-size: .72rem; font-weight: 800; }
.online-field-error[hidden] { display: none; }
.online-flow-next { justify-self: start; min-width: 230px; min-height: 54px; padding: .75rem 1.2rem; border: 1px solid #45bad0; color: #fff; background: linear-gradient(115deg,#114551,#08758a 55%,#21a5b8); clip-path: polygon(6% 0,100% 0,94% 100%,0 100%); cursor: pointer; font: 900 .9rem inherit; }
.online-flow-next i { margin-right: .5rem; font-size: 1.15rem; font-style: normal; }
.online-flow-next:disabled, .online-code-entry button:disabled { filter: grayscale(1); opacity: .34; cursor: default; }
.online-privacy-note, .online-assignment-note { color: #666a74; font-family: ui-monospace,monospace; font-size: .53rem; line-height: 1.6; letter-spacing: .04em; }
.online-privacy-note { margin: -.45rem 0 0; }
.online-city-combobox { position: relative; }
.online-city-suggestions { position: absolute; z-index: 15; top: calc(100% + 4px); right: 0; left: 0; max-height: 220px; overflow-y: auto; border: 1px solid #3d8b9a; background: rgba(7,9,15,.99); box-shadow: 0 18px 40px #000; }
.online-city-suggestions[hidden] { display: none; }
.online-city-option { display: block; width: 100%; min-height: 42px; padding: .6rem .85rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); color: #dfe3e7; background: transparent; text-align: right; cursor: pointer; font: 700 .84rem inherit; }
.online-city-option:hover, .online-city-option.is-active { color: #fff; background: rgba(43,169,255,.16); box-shadow: inset -3px 0 var(--blue); }
.online-fighter-step { grid-template-columns: 1fr; width: min(920px,100%); min-height: min(540px, calc(100vh - 132px)); padding: 1.2rem; overflow: hidden; }
.online-fighter-step .online-step-copy { grid-column: 1; }
.online-fighter-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; min-height: 345px; }
.online-fighter-option { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #32333c; padding: 0; color: #fff; background: #090a10; cursor: pointer; }
.online-fighter-option::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(to top,rgba(4,4,7,.98) 3%,transparent 60%); pointer-events: none; }
.online-fighter-option .selection-portrait, .online-fighter-option .selection-action { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; transition: opacity .15s ease,filter .22s ease; }
.online-fighter-option .selection-portrait { z-index: 0; filter: saturate(.62) brightness(.75); }
.online-fighter-option .selection-action { z-index: 1; opacity: 0; object-position: 50% 100%; filter: drop-shadow(0 16px 12px #000); }
.online-fighter-option:hover .selection-portrait { filter: saturate(1) brightness(.95); }
.online-fighter-option.is-selected { border-color: var(--ivory); }
.online-fighter-option.is-selected .selection-portrait { opacity: 0; }
.online-fighter-option.is-selected .selection-action { opacity: 1; }
.online-fighter-option.is-confirming .selection-action { animation: fighter-combat-reveal .48s cubic-bezier(.18,.84,.26,1) both; }
.online-fighter-step .online-flow-next { grid-column: 1; justify-self: center; }
.online-fighter-copy { position: absolute; z-index: 4; right: 1rem; bottom: .85rem; display: grid; text-align: right; }
.online-fighter-copy b { font-size: clamp(2rem,6vw,4rem); font-style: italic; line-height: .86; }
.online-fighter-copy small { color: #aaa7af; font: 700 .54rem ui-monospace,monospace; letter-spacing: .12em; }
.online-selected-mark { position: absolute; z-index: 5; left: .75rem; top: .75rem; padding: .3rem .48rem; color: #06070b; background: var(--gold); font: 900 .58rem inherit; opacity: 0; transform: translateY(-5px); transition: .18s ease; }
.online-fighter-option.is-selected .online-selected-mark { opacity: 1; transform: none; }
.online-fighter-step .online-assignment-note { grid-column: 1; margin: 0; text-align: center; }
.online-network-step { grid-template-columns: 1fr; width: min(900px,100%); padding: 1.25rem; }
.network-connected-line { display: flex; align-items: center; gap: .55rem; padding: .65rem .8rem; border: 1px solid rgba(67,255,155,.24); color: #43ff9b; background: rgba(67,255,155,.05); font: 700 .6rem ui-monospace,monospace; letter-spacing: .08em; }
.network-connected-line i { width: 8px; height: 8px; border-radius: 50%; background: #43ff9b; box-shadow: 0 0 12px #43ff9b; animation: online-pulse 1.4s ease-in-out infinite; }
.network-connected-line b { margin-right: auto; color: #92969e; font-weight: 600; }
.online-modes { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.online-mode-card { display: grid; grid-template-rows: auto 1fr auto; gap: .65rem; min-height: 190px; padding: 1rem; border: 1px solid rgba(255,255,255,.15); color: #fff; text-align: right; background: #0d0f16; cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.online-mode-card:hover { transform: translateY(-2px); }
.online-mode-card .mode-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid currentColor; color: var(--blue); background: rgba(43,169,255,.08); font-size: 1.5rem; }
.online-mode-card > span:nth-child(2) { display: grid; align-content: end; gap: .2rem; }
.online-mode-card small { color: #8a8d96; font-family: ui-monospace, monospace; font-size: .54rem; letter-spacing: .13em; }
.online-mode-card b { font-size: clamp(1.15rem,2.2vw,1.65rem); font-style: italic; }
.online-mode-card em { color: #737781; font-size: .7rem; font-style: normal; }
.online-mode-card > i { justify-self: end; color: #fff; font-size: 1.4rem; font-style: normal; }
.private-mode:hover { border-color: var(--blue); background: linear-gradient(120deg, rgba(43,169,255,.12), #0d0f16); }
.global-mode:hover { border-color: var(--crimson); background: linear-gradient(120deg, rgba(227,38,57,.14), #0d0f16); }
.global-mode .mode-icon { color: var(--crimson); background: rgba(227,38,57,.08); }
.join-mode:hover { border-color: var(--gold); background: linear-gradient(120deg,rgba(208,162,76,.12),#0d0f16); }
.join-mode .mode-icon { color: var(--gold); background: rgba(208,162,76,.08); }
.online-code-entry { display: grid; grid-template-columns: minmax(0,1fr) 130px; direction: ltr; }
.online-code-entry input { min-height: 64px; text-align: center; font: 900 1.35rem ui-monospace,monospace; letter-spacing: .28em; }
.online-code-entry button, .room-code-display button { border: 0; color: #071016; background: var(--blue); cursor: pointer; font-size: .8rem; font-weight: 900; }
.online-waiting { position: absolute; z-index: 20; inset: 1rem 0 calc(1rem + var(--safe-bottom)); display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 1.2rem; min-height: 260px; padding: 1.5rem; border-color: rgba(43,169,255,.45); direction: rtl; }
.online-waiting[hidden] { display: none; }
.radar { position: relative; width: 100px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(43,169,255,.62); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 19px, rgba(43,169,255,.2) 20px 21px); }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(43,169,255,.24); }
.radar::before { left: 50%; top: 0; width: 1px; height: 100%; }
.radar::after { left: 0; top: 50%; width: 100%; height: 1px; }
.radar i:first-child { position: absolute; inset: 50% 50% 0; background: linear-gradient(35deg, rgba(67,255,155,.45), transparent 60%); transform-origin: 0 0; animation: radar-sweep 1.8s linear infinite; }
.radar b { position: absolute; left: 67%; top: 28%; width: 5px; height: 5px; border-radius: 50%; background: #43ff9b; box-shadow: 0 0 9px #43ff9b; animation: online-pulse 1s ease-in-out infinite; }
.online-waiting-copy { display: grid; gap: .28rem; }
.online-waiting-copy > small { color: var(--blue); font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .15em; }
.online-waiting-copy > strong { font-size: clamp(1.35rem,3.2vw,2.4rem); font-style: italic; }
.online-waiting-copy > p { margin: 0; color: #858891; font-family: ui-monospace, monospace; font-size: .58rem; }
.online-waiting time { color: var(--gold); font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 900; }
.online-waiting > .text-button { grid-column: 2; justify-self: end; }
.room-code-display { display: flex; align-items: center; gap: .8rem; margin-top: .65rem; padding: .6rem .7rem; border: 1px solid rgba(208,162,76,.42); background: rgba(0,0,0,.28); }
.room-code-display[hidden] { display: none; }
.room-code-display span { color: #7f7b71; font-family: ui-monospace, monospace; font-size: .52rem; }
.room-code-display b { color: var(--gold); font-family: ui-monospace, monospace; font-size: 1.55rem; letter-spacing: .2em; }
.room-code-display button { margin-right: auto; padding: .5rem .7rem; background: var(--gold); font-size: .64rem; }
.online-error { position: absolute; z-index: 30; right: 0; bottom: calc(.25rem + var(--safe-bottom)); left: 0; margin: 0; padding: .65rem .8rem; border: 1px solid rgba(227,38,57,.58); color: #ff8a94; background: rgba(103,8,20,.92); font-size: .72rem; text-align: center; }

.match-screen { align-items: center; justify-content: center; gap: .7rem; padding: calc(1rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(1rem + var(--safe-bottom)) calc(1rem + var(--safe-left)); }
.match-beam { opacity: .2; transform: none; mask-image: radial-gradient(circle at center, #000, transparent 75%); animation: grid-drive 5s linear infinite; }
.match-header { position: absolute; left: 0; right: 0; top: 0; grid-template-columns: 1fr auto; min-height: 64px; }
.match-title { z-index: 1; text-align: center; }
.match-title small { color: var(--gold); font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .22em; }
.match-title h2 { margin: .05rem 0; font-size: clamp(2.2rem,6vw,4.4rem); font-style: italic; line-height: .9; }
.match-card-grid { z-index: 1; display: grid; grid-template-columns: minmax(230px, 360px) 90px minmax(230px, 360px); align-items: center; width: min(900px,100%); }
.match-player-card { position: relative; display: grid; grid-template-columns: 43% 1fr; align-items: end; min-height: 245px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg, rgba(18,22,31,.96), rgba(7,8,13,.98)); box-shadow: 0 28px 70px rgba(0,0,0,.5); }
.match-player-card[data-match-fighter="sky"] { border-color: rgba(43,169,255,.6); box-shadow: inset 0 -4px var(--blue), 0 28px 70px rgba(0,0,0,.5); }
.match-player-card[data-match-fighter="bisakov"] { border-color: rgba(227,38,57,.6); box-shadow: inset 0 -4px var(--crimson), 0 28px 70px rgba(0,0,0,.5); }
.match-player-card img { align-self: stretch; width: 100%; height: 245px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 15px 10px #000); }
.match-player-card > div { padding: 1rem .65rem 2.4rem; }
.match-player-card small { color: #8c909a; font-family: ui-monospace, monospace; font-size: .52rem; letter-spacing: .15em; }
.match-player-card h3 { overflow: hidden; margin: .2rem 0; font-size: clamp(1.25rem,2.5vw,2rem); text-overflow: ellipsis; white-space: nowrap; }
.match-player-card strong { color: var(--gold); font-family: ui-monospace, monospace; font-size: .66rem; letter-spacing: .14em; }
.match-player-type { position: absolute; z-index: 2; left: .6rem; top: .6rem; padding: .24rem .4rem; color: #02070a; background: var(--blue); font-family: ui-monospace, monospace; font-size: .52rem; letter-spacing: .11em; }
.opponent-player-card .match-player-type { background: var(--crimson); }
.ready-indicator { position: absolute; right: .7rem; bottom: .7rem; color: #7b7f88; font-family: ui-monospace, monospace; font-size: .54rem; font-style: normal; letter-spacing: .1em; }
.ready-indicator.is-ready { color: #43ff9b; text-shadow: 0 0 8px rgba(67,255,155,.5); }
.match-vs { position: relative; z-index: 4; display: grid; place-items: center; width: 90px; height: 90px; color: var(--gold); background: #05060a; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 35px #000; font-size: 2rem; font-style: italic; transform: rotate(-7deg); }
.match-vs i { position: absolute; width: 150px; height: 2px; z-index: -1; background: linear-gradient(90deg,var(--blue),var(--gold),var(--crimson)); }
.match-ready-panel { z-index: 1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; width: min(810px,100%); }
.match-ready-panel p { margin: 0; color: #858993; font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .1em; }

@keyframes online-pulse { 50% { opacity: .35; scale: .78; } }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes online-step-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }

@media (max-width: 820px) {
  .online-screen { overflow-y: auto; }
  .online-header { position: sticky; top: 0; min-height: 76px; }
  .online-shell { width: min(560px,calc(100% - 1.2rem)); margin: 0 auto; }
  .online-step-card { grid-template-columns: 1fr; min-height: calc(100svh - 100px); padding: 1.15rem; }
  .online-step-number { grid-row: auto; width: 48px; height: 48px; font-size: 1rem; }
  .online-step-card > .online-field, .online-city-combobox, .online-flow-next, .online-privacy-note, .online-field-error, .online-code-entry { grid-column: 1; }
  .online-step-copy h3 { font-size: clamp(1.8rem,10vw,2.65rem); }
  .online-flow-next { width: 100%; justify-self: stretch; }
  .online-fighter-step { min-height: calc(100svh - 90px); }
  .online-fighter-options { min-height: 52svh; }
  .online-fighter-copy { right: .65rem; bottom: .65rem; }
  .online-fighter-copy b { font-size: clamp(1.5rem,9vw,2.6rem); }
  .online-network-step { min-height: auto; padding-block: 1.2rem; }
  .online-modes { grid-template-columns: 1fr; }
  .online-mode-card { grid-template-columns: 54px 1fr 18px; grid-template-rows: 1fr; min-height: 100px; }
  .online-mode-card > i { align-self: center; }
  .online-waiting { position: fixed; z-index: 20; inset: 76px 0 0; grid-template-columns: 80px 1fr; align-content: center; min-height: 0; border: 0; padding: 1.1rem; }
  .radar { width: 74px; }
  .online-waiting time { grid-column: 1; text-align: center; font-size: 1.3rem; }
  .online-waiting > .text-button { grid-column: 2; }
  .room-code-display { align-items: flex-start; flex-wrap: wrap; }
  .room-code-display button { width: 100%; }
  .match-card-grid { grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); }
  .match-player-card { grid-template-columns: 1fr; min-height: 270px; align-content: end; }
  .match-player-card img { position: absolute; inset: 0; height: 205px; opacity: .76; }
  .match-player-card > div { position: relative; z-index: 2; padding: 9.5rem .55rem 2.2rem; background: linear-gradient(transparent,rgba(5,6,10,.96) 48%); }
  .match-player-card h3 { font-size: clamp(.85rem,4vw,1.3rem); }
  .match-vs { width: 58px; height: 58px; font-size: 1.25rem; }
  .match-vs i { width: 75px; }
  .match-ready-panel { grid-template-columns: 1fr 1fr; }
  .match-ready-panel p { grid-column: 1 / -1; text-align: center; }
  .match-ready-panel .primary-cta { min-width: 0; width: 100%; }

  /* The visual viewport shrinks when a mobile keyboard opens. Keep the active
     registration control inside that real height instead of the 100svh card. */
  .online-screen.is-keyboard-mode {
    overflow: hidden;
  }
  .online-screen.is-keyboard-mode .online-header {
    display: none;
  }
  .online-screen.is-keyboard-mode .online-shell {
    place-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0 calc(.6rem + var(--safe-right)) calc(.35rem + var(--safe-bottom)) calc(.6rem + var(--safe-left));
    overflow-y: auto;
    scroll-padding-block: .35rem;
  }
  .online-screen.is-keyboard-mode .online-step-card:not([hidden]) {
    align-content: start;
    gap: .55rem;
    width: 100%;
    min-height: 100%;
    padding: .5rem .7rem;
    border-inline: 0;
    animation: none;
  }
  .online-screen.is-keyboard-mode .online-step-number,
  .online-screen.is-keyboard-mode .online-step-copy small,
  .online-screen.is-keyboard-mode .online-step-copy p,
  .online-screen.is-keyboard-mode .online-privacy-note {
    display: none;
  }
  .online-screen.is-keyboard-mode .online-step-copy {
    align-self: start;
  }
  .online-screen.is-keyboard-mode .online-step-copy h3 {
    margin: 0 0 .1rem;
    font-size: clamp(1.3rem, 7vw, 1.8rem);
    line-height: 1;
  }
  .online-screen.is-keyboard-mode .online-city-suggestions {
    max-height: min(180px, calc(var(--app-height) - 145px));
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .online-header { min-height: 58px; padding-top: calc(.35rem + var(--safe-top)); padding-bottom: .35rem; }
  .online-shell { padding-top: .45rem; padding-bottom: calc(.45rem + var(--safe-bottom)); }
  .online-step-card { min-height: calc(100vh - 72px); padding: .8rem 1.1rem; }
  .online-step-copy h3 { font-size: clamp(1.45rem,6vh,2.3rem); }
  .online-fighter-step { grid-template-columns: 1fr; }
  .online-fighter-options { min-height: 52vh; }
  .online-network-step { min-height: calc(100vh - 72px); }
  .online-mode-card { min-height: 135px; padding: .65rem; }
  .online-mode-card .mode-icon { width: 42px; height: 42px; }
  .match-screen { gap: .32rem; padding-top: calc(3.7rem + var(--safe-top)); }
  .match-title h2 { font-size: clamp(1.8rem,6vh,3rem); }
  .match-player-card, .match-player-card img { min-height: 0; height: min(43vh,220px); }
  .match-ready-panel .primary-cta { min-height: 42px; }
}