/* The arena follows the existing card's visibility, so skipping, cancellation
   and the next player share the audio introduction's lifecycle. */
#walkon-arena {
    --arena-primary: var(--broadcast-accent, #ef2d91);
    --arena-secondary: var(--broadcast-secondary, #28d7ff);
    --arena-cool: #55cfff;
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5010;
    overflow: hidden;
    isolation: isolate;
    contain: paint;
    pointer-events: none;
    background: #030609;
}
#screen-match:has(> #career-walkon-stage:not([hidden])) > #walkon-arena { display: block; }
#screen-match:has(> #career-walkon-stage:not([hidden])) > :not(#career-walkon-stage):not(#walkon-arena) { visibility: hidden; }
#screen-match:not(.match-tv-mode):not(.walkon-fullscreen):has(> #career-walkon-stage:not([hidden])) {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 540px;
    background: #030609;
}
#screen-match:not(.match-tv-mode):has(> #career-walkon-stage:not([hidden])) > :not(#career-walkon-stage):not(#walkon-arena) { display: none !important; }
#screen-match:not(.match-tv-mode):not(.walkon-fullscreen) > #career-walkon-stage:not([hidden]) {
    position: relative;
    z-index: 5014;
    width: min(920px, calc(100% - 48px));
    margin: clamp(52px, 8svh, 90px) auto;
}
body.walkon-fullscreen-active { overflow: hidden !important; }
#screen-match.walkon-fullscreen {
    position: fixed; inset: 0; z-index: 5000;
    width: 100%; max-width: none; height: 100%; height: 100svh; min-height: 0;
    box-sizing: border-box; margin: 0; padding: 0; overflow: hidden;
    border: 0; border-radius: 0; background: #030609;
}
#screen-match:has(> #career-walkon-stage:not([hidden])) #career-walkon-stage {
    box-shadow: 0 28px 90px #000b, 0 0 0 1px #ffffff15;
}
.walkon-arena-halo {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 18% 24%, color-mix(in srgb, var(--arena-primary) 30%, transparent), transparent 46%),
        radial-gradient(ellipse at 88% 40%, color-mix(in srgb, var(--arena-secondary) 27%, transparent), transparent 50%),
        radial-gradient(ellipse at 50% 90%, #38648433, transparent 60%);
}
.walkon-arena-truss {
    position: absolute; top: 9%; left: 4%; right: 4%; height: 24px;
    border-block: 3px solid #4e5c6488;
    background: repeating-linear-gradient(45deg, transparent 0 15px, #52616c77 16px 18px, transparent 19px 34px);
    box-shadow: 0 4px 14px #000b;
    opacity: .7;
}
.walkon-arena-portal {
    position: absolute; left: 28%; right: 28%; top: 16%; bottom: 17%;
    border: 7px solid #181f27;
    border-bottom: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--arena-secondary) 55%, transparent),
        0 0 34px color-mix(in srgb, var(--arena-secondary) 30%, transparent), inset 0 0 54px #000;
    background: repeating-linear-gradient(0deg, #03060aaa 0 7px, #101c2c55 8px 10px),
        linear-gradient(135deg, color-mix(in srgb, var(--arena-primary) 25%, #070d15), #04070b 60%);
}
.walkon-arena-led {
    position: absolute; top: 17%; bottom: 18%; width: 17%;
    overflow: hidden;
    border: 7px solid #111a24;
    border-radius: 4px;
    background: #091823;
    box-shadow: 0 0 0 1px #94d3eb44, 0 0 50px color-mix(in srgb, var(--arena-primary) 25%, transparent);
}
.walkon-arena-led-left { left: 6%; transform: perspective(650px) rotateY(18deg) skewY(-3deg); }
.walkon-arena-led-right { right: 6%; transform: perspective(650px) rotateY(-18deg) skewY(3deg); --arena-primary: var(--arena-secondary); }
.walkon-arena-led::before {
    content: ''; position: absolute; inset: -45%;
    background: repeating-linear-gradient(125deg, transparent 0 65px, var(--arena-primary) 66px 105px, #ffffffaa 106px 108px, transparent 109px 175px),
        linear-gradient(0deg, #04090f, color-mix(in srgb, var(--arena-primary) 55%, #07101c), #07101c);
    opacity: .75;
    animation: walkon-led-drift 10s linear infinite alternate;
}
.walkon-arena-led::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(circle, transparent 0 1.7px, #030a11b3 2px 3px) 0 0 / 6px 6px;
    box-shadow: inset 0 0 24px #0009;
}
.walkon-arena-led-label {
    position: absolute; z-index: 1; inset: 7% 0;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl;
    font-family: 'Arial Narrow', 'Segoe UI', sans-serif;
    font-size: clamp(26px, 3.6vw, 70px);
    font-weight: 900; line-height: 1; letter-spacing: .035em;
    text-transform: uppercase; white-space: nowrap; color: #e8fbff;
    text-shadow: 0 0 10px #b9e9ff66, 0 3px 14px #000;
    opacity: .8;
}
.walkon-arena-led-label span { display: block; flex: none; letter-spacing: .035em; }
.walkon-arena-led-left .walkon-arena-led-label { transform: rotate(180deg); }
.walkon-arena-floor {
    position: absolute; left: -20%; right: -20%; bottom: -8%; height: 32%;
    transform: perspective(350px) rotateX(45deg);
    transform-origin: 50% 100%;
    border-top: 2px solid #aecde033;
    background:
        radial-gradient(ellipse at 24% 15%, color-mix(in srgb, var(--arena-primary) 45%, transparent), transparent 32%),
        radial-gradient(ellipse at 77% 15%, color-mix(in srgb, var(--arena-secondary) 40%, transparent), transparent 32%),
        repeating-linear-gradient(90deg, transparent 0 89px, #b6c8e018 90px 91px),
        repeating-linear-gradient(0deg, #070b12 0 44px, #a6c5df22 45px 46px);
}
.walkon-arena-spot {
    --beam-from: -24deg; --beam-to: 22deg; --beam-delay: -2s;
    --beam-colour: var(--arena-primary);
    position: absolute; top: calc(9% + 12px); left: 8%; width: 30px; height: 20px;
    border: 4px solid #26323d; border-radius: 9px 9px 50% 50%;
    background: #d7f4ff;
    box-shadow: 0 0 16px var(--beam-colour), 0 0 36px color-mix(in srgb, var(--beam-colour) 60%, transparent);
}
.walkon-arena-spot:nth-of-type(8) { left: 24%; --beam-from: 15deg; --beam-to: -18deg; --beam-delay: -5s; --beam-colour: var(--arena-cool); }
.walkon-arena-spot:nth-of-type(9) { left: 40%; --beam-from: -30deg; --beam-to: 8deg; --beam-delay: -1s; --beam-colour: var(--arena-secondary); }
.walkon-arena-spot:nth-of-type(10) { left: 60%; --beam-from: 28deg; --beam-to: -8deg; --beam-delay: -6s; --beam-colour: var(--arena-cool); }
.walkon-arena-spot:nth-of-type(11) { left: 76%; --beam-from: -16deg; --beam-to: 24deg; --beam-delay: -3s; --beam-colour: var(--arena-secondary); }
.walkon-arena-spot:nth-of-type(12) { left: 92%; --beam-from: 28deg; --beam-to: -24deg; --beam-delay: -7s; }
.walkon-arena-spot i {
    position: absolute; left: 50%; top: 10px; width: clamp(180px, 23vw, 460px); height: 110vh;
    transform-origin: 50% 0;
    clip-path: polygon(49% 0, 51% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #f5fdff66, color-mix(in srgb, var(--beam-colour) 43%, transparent) 16%, transparent 90%);
    mix-blend-mode: screen;
    animation: walkon-arena-sweep 9s ease-in-out infinite alternate;
    animation-delay: var(--beam-delay);
}
.walkon-arena-smoke {
    position: absolute; left: -15%; right: -15%; bottom: -19%; height: 48%;
    filter: blur(18px); opacity: .45;
    background:
        radial-gradient(ellipse at 8% 65%, #c6d9ed66, transparent 34%),
        radial-gradient(ellipse at 38% 55%, #b1c9e65e, transparent 25%),
        radial-gradient(ellipse at 68% 66%, #c8daed70, transparent 35%),
        radial-gradient(ellipse at 94% 50%, #cee2f666, transparent 32%);
    animation: walkon-arena-fog 14s ease-in-out infinite alternate;
}
.walkon-arena-smoke-far { bottom: -6%; opacity: .22; animation-duration: 19s; animation-delay: -9s; animation-direction: alternate-reverse; }
.walkon-arena-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 25%, #0008 100%); }
#walkon-arena-event {
    position: absolute; top: 3%; left: 8%; right: 8%; overflow: hidden;
    color: #d9e6ef; font: 800 clamp(11px, 1.3vw, 21px) 'Segoe UI', sans-serif;
    letter-spacing: .23em; text-align: center; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 0 16px color-mix(in srgb, var(--arena-secondary) 65%, transparent);
}
.walkon-arena-brand {
    position: absolute; bottom: 5%; left: 0; right: 0; text-align: center;
    color: #a6bfd766; font: 800 clamp(10px, 1vw, 15px) 'Segoe UI', sans-serif; letter-spacing: .6em;
}
@keyframes walkon-arena-sweep {
    from { transform: translateX(-50%) rotate(var(--beam-from)); opacity: .48; }
    to { transform: translateX(-50%) rotate(var(--beam-to)); opacity: .8; }
}
@keyframes walkon-led-drift { from { transform: translateY(-6%); } to { transform: translateY(10%); } }
@keyframes walkon-arena-fog { from { transform: translate(-5%, 6%) scale(1); } to { transform: translate(6%, -9%) scale(1.08); } }
@media (max-width: 640px) {
    #screen-match:not(.match-tv-mode):not(.walkon-fullscreen) > #career-walkon-stage:not([hidden]) { width: calc(100% - 24px); margin: 58px auto; }
    .walkon-arena-led { top: 13%; bottom: 12%; width: 24%; border-width: 4px; }
    .walkon-arena-led-left { left: -6%; }
    .walkon-arena-led-right { right: -6%; }
    .walkon-arena-led-label { display: none; }
    .walkon-arena-portal { left: 19%; right: 19%; }
    .walkon-arena-truss { top: 7%; height: 17px; }
    .walkon-arena-spot { top: calc(7% + 12px); width: 20px; height: 13px; border-width: 2px; }
    .walkon-arena-smoke { filter: blur(10px); }
    .walkon-arena-smoke-far { display: none; }
    #walkon-arena-event { top: 2.5%; letter-spacing: .09em; }
    .walkon-arena-brand { bottom: 3%; }
}
@media (prefers-reduced-motion: reduce) {
    #walkon-arena *, #walkon-arena ::before, #walkon-arena ::after { animation: none !important; }
    .walkon-arena-spot i { transform: translateX(-50%) rotate(var(--beam-from)); opacity: .55; }
}
@media (max-height: 540px) and (min-width: 641px) {
    #walkon-arena-event, .walkon-arena-brand { display: none; }
}