/* arena-stage.css: arena backdrops, crowd and the Emperor (arena-stage.js). Loaded last. */
/* The backdrop is the first child of .arena-scene, 8% larger on every side so the battle camera can scale/shift it (fx owns its transform). */
.arena-scene>.arena-backdrop{position:absolute;inset:-8%;z-index:-2;overflow:hidden;pointer-events:none;contain:strict}
.arena-backdrop>*{position:absolute;display:block;margin:0;pointer-events:none}
.arena-backdrop>.stage-art{inset:0;width:100%;height:100%}
.arena-backdrop>.stage-fans{left:0;width:100%}
.arena-backdrop:not(.crowd-hop)>.stage-fans.is-hop,.arena-backdrop.crowd-all>.stage-fans.is-still{visibility:hidden}
/* Roses and coins thrown to the sand (compositor arcs; they stay where they land). */
.arena-backdrop>.stage-props{inset:0}
.stage-props>.stage-prop{position:absolute;display:block;translate:-50% -50%;background:center/contain no-repeat}
.stage-prop.is-rose{aspect-ratio:20/34;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3E%3Cg stroke='%232b1709' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10v22' stroke-width='4.4'/%3E%3Cpath d='M10 10v22' stroke='%233f7a2a' stroke-width='2.4'/%3E%3Cpath d='M10.5 22q6-5 8.5-1-3 4.5-8.5 1Z' fill='%235aa03a' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='9' r='7.5' fill='%23d8283a' stroke-width='2'/%3E%3Cpath d='M13.6 7.4a4 4 0 1 0-1.2 5' fill='none' stroke='%238a1020' stroke-width='1.6'/%3E%3Cpath d='M6.3 6.2q1.3-2 3.2-2.3' fill='none' stroke='%23ff8a96' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E")}
.stage-prop.is-coin{aspect-ratio:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='%23ffd24a' stroke='%232b1709' stroke-width='2'/%3E%3Ccircle cx='10' cy='10' r='5.2' fill='none' stroke='%23d69211' stroke-width='1.4'/%3E%3Cellipse cx='7.4' cy='6.8' rx='2.2' ry='1.4' fill='%23fff6c0'/%3E%3C/svg%3E")}
.arena-scene.has-stage{background:#24160c}
.arena-scene.has-stage>.crowd-layer{display:none}
.stage-live.has-stage>.scene-shade{background:linear-gradient(180deg,#2b170999 0%,#2b17092e 14%,transparent 24%,transparent 76%,#2b170950 100%)}
.arena-scene.has-stage:not(.stage-live)>.scene-shade{background:linear-gradient(180deg,#281c13b8 0%,#2a1c1233 22%,transparent 38%,transparent 66%,#1f130aa8 100%)}

/* The Emperor's box is a canvas (arena-stage.js bakes its layers and draws him between them). */

/* The Emperor's thumb, zoomed: a medallion over the arena (under the HUD, ticker, bubbles and banners). */
.arena-scene>.stage-thumb{position:absolute;z-index:3;width:var(--sz,72px);height:var(--sz,72px);transform:translate(-50%,-50%);pointer-events:none}
.stage-thumb>svg{display:block;width:100%;height:100%;overflow:visible}
.stage-thumb .tc-ring{fill:#f2c24c}
.stage-thumb.is-up .tc-burst{fill:#4f9e33}.stage-thumb.is-down .tc-burst{fill:#c0392b}
.stage-thumb.is-down .tc-hand{transform:rotate(180deg);transform-origin:40px 40px}

/* Torch and brazier glow (a slow flicker, compositor-only). */
.arena-backdrop>.stage-glow{border-radius:50%;background:radial-gradient(circle,var(--glow) 0,transparent 66%);opacity:.8}
html:not([data-motion="off"]) .arena-backdrop>.stage-glow{animation:stage-flicker 2.1s ease-in-out infinite alternate;will-change:opacity,transform}
@keyframes stage-flicker{0%{opacity:.72;transform:scale(.96)}35%{opacity:.95;transform:scale(1.04)}55%{opacity:.8;transform:scale(.99)}100%{opacity:1;transform:scale(1.06)}}

/* Weather and ambience per theme: tiled layers that loop one tile (transform only); hidden without motion where they only move. */
.arena-backdrop>.stage-weather{left:0;right:0;top:0;bottom:0}
.arena-backdrop>.is-snow{top:-160px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='14' cy='22' r='2.2'/%3E%3Ccircle cx='70' cy='8' r='1.5'/%3E%3Ccircle cx='118' cy='40' r='2.6'/%3E%3Ccircle cx='40' cy='76' r='1.6'/%3E%3Ccircle cx='96' cy='98' r='2'/%3E%3Ccircle cx='146' cy='124' r='1.5'/%3E%3Ccircle cx='24' cy='136' r='2.4'/%3E%3Ccircle cx='70' cy='150' r='1.4'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px;opacity:.85}
.arena-backdrop>.is-rain{top:-120px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='120'%3E%3Cg stroke='%23d6f0f5' stroke-width='1.3' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M12 6l-5 16M54 30l-5 16M80 70l-5 16M30 84l-5 16M68 2l-4 12M40 50l-4 12M86 104l-4 12'/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 120px}
.arena-backdrop>.is-embers,.arena-backdrop>.is-motes{bottom:-200px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200'%3E%3Cg fill='%23ffb040'%3E%3Ccircle cx='20' cy='30' r='1.8'/%3E%3Ccircle cx='96' cy='12' r='1.3'/%3E%3Ccircle cx='150' cy='70' r='2'/%3E%3Ccircle cx='60' cy='110' r='1.4'/%3E%3Ccircle cx='128' cy='150' r='1.8'/%3E%3Ccircle cx='30' cy='180' r='1.2'/%3E%3C/g%3E%3Cg fill='%23fff0b0'%3E%3Ccircle cx='20' cy='30' r='.7'/%3E%3Ccircle cx='150' cy='70' r='.8'/%3E%3Ccircle cx='128' cy='150' r='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 200px;opacity:.9}
.arena-backdrop>.is-motes{filter:hue-rotate(150deg) saturate(.8);opacity:.7}
.arena-backdrop>.is-bolt{background:linear-gradient(180deg,#eaf6ff 0,#c8e4f0cc 45%,#c8e4f033 100%);opacity:0}
.arena-backdrop>.is-bolt::after{content:'';position:absolute;left:33%;top:0;width:11%;height:22%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80' preserveAspectRatio='none'%3E%3Cpath d='M22 0 10 34h9L6 80l25-46h-9L32 0z' fill='%23fffbe0' stroke='%23a8e0ff' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.arena-backdrop>.is-rift{left:51%;right:25%;top:1%;bottom:auto;height:22%;transform:scaleY(.55)}
.arena-backdrop>.is-rift::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#b070f000,#d8a8ff88,#b070f000 30%,#8a40e066 50%,#b070f000 62%,#e8c8ff77 80%,#b070f000);-webkit-mask:radial-gradient(circle,#000 0 30%,#0000 70%);mask:radial-gradient(circle,#000 0 30%,#0000 70%)}
.arena-backdrop>.is-meteor{left:10%;top:4%;right:auto;bottom:auto;width:16%;height:2px;background:linear-gradient(90deg,#fff0,#fff);border-radius:2px;opacity:0;transform:rotate(18deg)}
html:not([data-motion="off"]) .arena-backdrop>.is-snow{animation:stage-fall 9s linear infinite;will-change:transform}
html:not([data-motion="off"]) .arena-backdrop>.is-rain{animation:stage-rain .55s linear infinite;will-change:transform}
html:not([data-motion="off"]) .arena-backdrop>:is(.is-embers,.is-motes){animation:stage-rise 8s linear infinite;will-change:transform}
html:not([data-motion="off"]) .arena-backdrop>.is-bolt{animation:stage-flash 9s linear infinite}
html:not([data-motion="off"]) .arena-backdrop>.is-rift::before{animation:stage-spin 26s linear infinite}
html:not([data-motion="off"]) .arena-backdrop>.is-meteor{animation:stage-meteor 7.5s ease-in infinite}
html[data-motion="off"] .arena-backdrop>:is(.is-rain,.is-bolt,.is-meteor,.is-embers,.is-motes){display:none}
@keyframes stage-fall{to{transform:translateY(160px)}}
@keyframes stage-rain{to{transform:translate(-30px,120px)}}
@keyframes stage-rise{to{transform:translateY(-200px)}}
@keyframes stage-flash{0%,60%{opacity:0}61%{opacity:.5}62.5%{opacity:.08}64%{opacity:.42}67%,100%{opacity:0}}
@keyframes stage-spin{to{transform:rotate(360deg)}}
@keyframes stage-meteor{0%,84%{opacity:0;transform:rotate(18deg) translateX(0)}86%{opacity:1}94%,100%{opacity:0;transform:rotate(18deg) translateX(320%)}}

/* 10.0: the beast gate's portcullis (shown while it opens), the Emperor's decree hanging under his box, a rival's mother in the stands. */
.arena-backdrop>.stage-gate{display:none;overflow:hidden}
.stage-gate>svg,.stage-scroll>svg,.stage-mother>svg{display:block;width:100%;height:100%;overflow:visible}
.arena-backdrop>.stage-scroll{transform:translateX(-50%);transform-origin:50% 0;filter:drop-shadow(0 3px 0 #2b170966)}
.stage-scroll>svg{height:auto}
.arena-backdrop>.stage-mother{transform:translateX(-50%)}
.arena-backdrop>.stage-mother{background:radial-gradient(closest-side,#fff3b0b0,#fff3b000)}
.stage-mother .mom-arm{transform-origin:43px 57px}
/* 10.1: the crowned gladiator in the royal box (a copy of their rig, clipped at the balustrade) and the ex-Emperor sulking in the stands. */
.arena-backdrop>.stage-imperator{position:absolute;overflow:hidden;pointer-events:none}
.stage-imperator>.imp-figure{position:absolute;filter:drop-shadow(0 1px 0 #2b170980)}
.stage-imperator>.imp-figure>svg{display:block;width:100%;height:100%;overflow:visible}
.arena-backdrop>.stage-exemperor{position:absolute;transform:translateX(-50%);pointer-events:none}
.stage-exemperor>svg{display:block;width:100%;height:100%;overflow:visible}
.stage-exemperor .ex-fist,.stage-exemperor .ex-cloud{transform-box:fill-box;transform-origin:50% 50%}