/* =====================================================================
   v5: анимированная арена — фон экрана VS и самой игры
   ===================================================================== */
.g-bg { --ac: var(--c); }
.g-bg.arena-street { --ac: #8fa2ff; } .g-bg.arena-pro { --ac: #3dd6ff; }
.g-bg.arena-elite { --ac: #ffc83d; } .g-bg.arena-legend { --ac: #ff5fd2; }
.ab-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }

.ab-sky { position: absolute; inset: 0; background:
  radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 70%),
  radial-gradient(ellipse 60% 40% at 50% 78%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%),
  #06060c; }

/* прожекторы: конусы света качаются над рингом */
.ab-beams { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen; }
.ab-beams i { position: absolute; top: -12%; width: 26vw; min-width: 220px; height: 110vh; transform-origin: 50% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 55%, transparent), transparent 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(8px); opacity: .32;
  animation: beam 7s ease-in-out infinite alternate; }
.ab-beams i:nth-child(1) { left: 2%; animation-duration: 6.5s; --a: -28deg; --b: 8deg; }
.ab-beams i:nth-child(2) { left: 22%; animation-duration: 8s; --a: 18deg; --b: -14deg; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 80%); }
.ab-beams i:nth-child(3) { left: 40%; animation-duration: 5.5s; --a: -10deg; --b: 12deg; }
.ab-beams i:nth-child(4) { left: 58%; animation-duration: 7.5s; --a: 14deg; --b: -20deg; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 80%); }
.ab-beams i:nth-child(5) { left: 76%; animation-duration: 6s; --a: 26deg; --b: -6deg; }
@keyframes beam { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }

/* трибуны: силуэты болельщиков и мерцающие телефоны */
.ab-stands { position: absolute; left: -5%; right: -5%; bottom: 30%; height: 30vh; }
.ab-crowd { position: absolute; left: 0; right: 0; bottom: 0; height: 15vh;
  background-image:
    radial-gradient(circle at 22px 18px, #0a0a14 11px, transparent 12px),
    radial-gradient(ellipse 22px 20px at 22px 46px, #0a0a14 98%, transparent 100%);
  background-size: 44px 60px; background-repeat: repeat-x; background-position: 0 100%;
  animation: crowdBob 1.6s ease-in-out infinite; }
.ab-crowd.back { bottom: 9vh; opacity: .75; transform: scale(.8); background-size: 34px 48px; animation-duration: 2.1s; animation-delay: -.6s; }
@keyframes crowdBob { 50% { background-position: 0 calc(100% - 4px), 0 calc(100% - 4px); } }
.ab-lights { position: absolute; left: 0; right: 0; bottom: 4vh; height: 22vh; opacity: .9;
  background-image:
    radial-gradient(circle at 15% 40%, #fff 1.2px, transparent 2.4px),
    radial-gradient(circle at 63% 70%, var(--ac) 1.4px, transparent 2.6px),
    radial-gradient(circle at 38% 20%, #fff 1px, transparent 2px),
    radial-gradient(circle at 85% 55%, #fff6c8 1.2px, transparent 2.4px);
  background-size: 70px 40px, 90px 50px, 55px 35px, 120px 60px;
  animation: twinkle 2.4s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .45; background-position: 7px 0, -9px 3px, 4px -2px, -6px 0; } }

/* пол арены: светящаяся сетка уходит в перспективу */
.ab-floor { position: absolute; left: -30%; right: -30%; bottom: -8%; height: 46%;
  background-image: linear-gradient(color-mix(in srgb, var(--ac) 45%, transparent) 2px, transparent 2px), linear-gradient(90deg, color-mix(in srgb, var(--ac) 45%, transparent) 2px, transparent 2px);
  background-size: 70px 70px; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
  animation: floorRun 3s linear infinite; opacity: .55; }
@keyframes floorRun { to { background-position: 0 70px, 0 0; } }
.ab-ring { position: absolute; left: 50%; bottom: 14%; width: 70vmin; height: 16vmin; transform: translateX(-50%); border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ac) 70%, transparent); box-shadow: 0 0 40px var(--ac), inset 0 0 40px color-mix(in srgb, var(--ac) 50%, transparent);
  animation: ringPulse 2.2s ease-in-out infinite; opacity: .55; }
@keyframes ringPulse { 50% { opacity: .9; transform: translateX(-50%) scale(1.04); } }

/* на экране VS арена ярче, в самой игре — приглушена, чтобы не мешать */
#game .vs { position: relative; z-index: 1; }
#game .g-shell .g-wrap, #game .g-side { position: relative; z-index: 1; }
#game:has(.g-shell) .g-bg .ab-beams { opacity: .8; }
#game:has(.g-shell) .g-bg .ab-stands, #game:has(.g-shell) .g-bg .ab-floor { opacity: .65; }

/* «Шульте»: новое число вспыхивает */
#scn.flash { display: inline-block; animation: bump .35s var(--ease); }
@media (prefers-reduced-motion: reduce) { .ab-beams i, .ab-crowd, .ab-lights, .ab-floor, .ab-ring { animation: none; } }

.g-bg .ab-video { inset: 0; width: 100%; height: 100%; filter: none; opacity: .45; }

.same-dev { margin: 10px 0 4px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: var(--mut, #aab); background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.15); }