/* Vstup do zápasu (arena-entry.js): pozadí z úvodní obrazovky, tunel ze zlatých kruhů a průlet na desku. */
/* Deska svítí na konci tunelu, a tak je během příletu nad vrstvou s tunelem. */
#stage.arena-arriving { z-index: 95; pointer-events: none; transform-origin: 50% 46%; will-change: transform, opacity; }

/* Stejné barvy jako #hub-bg v hub.css. Pod obrazovkou (z-index 90), aby se odkryla, až se obrazovka rozestoupí. */
.arena-warp { position: fixed; inset: 0; height: var(--app-h, 100%); z-index: 89; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 115%, rgba(255, 46, 136, .14), transparent 60%),
    radial-gradient(90% 55% at 50% -10%, rgba(126, 92, 255, .2), transparent 65%),
    linear-gradient(180deg, #0b0816 0%, #06040c 55%, #0a0611 100%); }
.arena-warp::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 46%, transparent 45%, rgba(0, 0, 0, .7)); }
.arena-warp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.warp-aurora { position: absolute; left: 50%; top: 46%; width: 110vmax; aspect-ratio: 1; margin: -55vmax 0 0 -55vmax; border-radius: 50%; opacity: .7; }
.warp-aurora.a { background: radial-gradient(circle at 34% 38%, rgba(181, 76, 245, .42), transparent 55%); }
.warp-aurora.b { background: radial-gradient(circle at 66% 64%, rgba(255, 46, 136, .3), transparent 55%); }

/* Místo zápasu uprostřed, než kamera vyrazí: pak proletí kolem ní */
.warp-place { position: absolute; left: 50%; top: 46%; z-index: 1; margin: 0; translate: -50% -50%; opacity: 0; display: grid; justify-items: center; gap: 8px;
  max-width: 90vw; text-align: center; text-wrap: balance; }
.warp-place small { font: 800 11px/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: #ffd1e6; }
.warp-place b { font: 900 clamp(20px, 6vw, 34px)/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff1b0;
  text-shadow: 0 0 18px rgba(255, 204, 77, .85), 0 3px 0 #3a0020; }

.warp-flash { position: fixed; inset: 0; z-index: 96; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fff8e6, rgba(255, 236, 190, .5) 45%, transparent 75%); }