/* Arena stage: the HTML that stage3d.js lays over its canvas (name plates, bars, floating numbers, vignette, messages).
   Every class starts with as-. A page gives the stage a box (any element with a size; the stage makes a static box
   position: relative itself and never overrides a position the page chose); the stage fills it.
   Sizes follow the STAGE, not the window: stage3d.js sets --as-u (a unit that grows with the stage's height) and the
   classes as-small / as-large from the box's own size, so a small stage inside a wide page gets the small layout.
   Self-contained: the site's own fonts, nothing from outside. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('../fonts/sora-latin.woff2') format('woff2'); }

.as-stage { --as-u: 1; overflow: hidden; background: #05050b; isolation: isolate; color: #f2f0f8; font: 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none; }
.as-stage [hidden] { display: none !important; }
.as-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.as-shade, .as-vignette, .as-flash, .as-float { position: absolute; inset: 0; pointer-events: none; }
/* a standing vignette and a little dark under the name plates: the pit falls to black at the edges */
.as-shade { background: radial-gradient(ellipse 80% 76% at 50% 58%, transparent 50%, rgba(0, 0, 0, .58) 100%), linear-gradient(180deg, rgba(3, 3, 8, .7), rgba(3, 3, 8, 0) 24%); }
/* the vignette that closes on the finishing blow */
.as-vignette { opacity: 0; background: radial-gradient(ellipse 58% 60% at 50% 52%, transparent 26%, rgba(0, 0, 0, .94) 100%); }
.as-flash { opacity: 0; background: #fff; }
.as-float { overflow: hidden; }
/* what the page hangs on the fighters (ArenaStage.attach): its own layer, under the floating numbers; each thing is placed by a transform */
.as-own { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.as-own > * { position: absolute; left: 0; top: 0; }

/* ---------- floating numbers and words: sized by the stage (--as-u), outlined so they hold on any background ---------- */
.as-label { position: absolute; left: 0; top: 0; white-space: nowrap; font: 800 calc(36px * var(--as-u))/1 Sora, Inter, system-ui, sans-serif; color: #fff; letter-spacing: .01em;
  --as-o: calc(1.5px + 1px * var(--as-u)); --as-oc: #0b0812;
  text-shadow: var(--as-o) 0 0 var(--as-oc), calc(-1 * var(--as-o)) 0 0 var(--as-oc), 0 var(--as-o) 0 var(--as-oc), 0 calc(-1 * var(--as-o)) 0 var(--as-oc), var(--as-o) var(--as-o) 0 var(--as-oc), calc(-1 * var(--as-o)) var(--as-o) 0 var(--as-oc), var(--as-o) calc(-1 * var(--as-o)) 0 var(--as-oc), calc(-1 * var(--as-o)) calc(-1 * var(--as-o)) 0 var(--as-oc), 0 calc(3px * var(--as-u)) 0 rgba(0, 0, 0, .7), 0 0 calc(14px * var(--as-u)) var(--as-g, rgba(0, 0, 0, .85));
  will-change: transform, opacity; font-variant-numeric: tabular-nums; }
.as-big { font-size: calc(52px * var(--as-u)); }
.as-crit { font-size: calc(62px * var(--as-u)); color: #ffd45a; --as-oc: #4a2200; --as-g: rgba(255, 150, 30, .85); }
.as-graze { font-size: calc(24px * var(--as-u)); color: #b9bdcb; }
.as-heal { color: #7dffa0; --as-oc: #06331a; --as-g: rgba(60, 255, 130, .6); }
.as-tick { font-size: calc(28px * var(--as-u)); }
.as-word, .as-bad, .as-status, .as-spell { font-size: min(calc(22px * var(--as-u)), calc(var(--as-w, 1000px) * .05)); letter-spacing: .08em; text-transform: uppercase; }
.as-word { color: #e6ecff; }
.as-bad { color: #ff6272; --as-oc: #36050b; --as-g: rgba(255, 60, 80, .6); }
.as-win { font-size: min(calc(74px * var(--as-u)), calc(var(--as-w, 1000px) * .125)); letter-spacing: .08em; text-transform: uppercase; color: #ffd45a; --as-oc: #4a2200; --as-g: rgba(255, 170, 40, .9); }
.as-end { font-size: min(calc(60px * var(--as-u)), calc(var(--as-w, 1000px) * .11)); letter-spacing: .1em; text-transform: uppercase; color: #dfe7ff; --as-g: rgba(120, 150, 255, .6); }

/* ---------- name plates: crest, name, health and energy ---------- */
.as-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 7%; padding: 14px 18px 0; pointer-events: none; }
.as-float { z-index: 2; }
.as-plate { flex: 1 1 0; min-width: 0; max-width: min(36%, 620px); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "crest body" "tags tags"; column-gap: 10px; row-gap: 5px; align-items: center; --as-c: #fff; }
.as-plate.as-right { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body crest" "tags tags"; text-align: right; }
.as-crest { grid-area: crest; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #14101c; background: var(--as-c); background: radial-gradient(circle at 35% 30%, #fff 0, var(--as-c) 38%, color-mix(in srgb, var(--as-c) 55%, #000) 100%); box-shadow: 0 0 0 2px #0b0912, 0 0 0 3px rgba(255, 226, 160, .6), 0 4px 14px rgba(0, 0, 0, .6); }
.as-crest svg { width: 62%; height: 62%; fill: currentColor; display: block; }
.as-plate-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.as-right .as-plate-body { align-items: flex-end; }
.as-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.15 Sora, Inter, system-ui, sans-serif; color: var(--as-c); text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .8); }
.as-hp { position: relative; width: 100%; height: 20px; border-radius: 5px; overflow: hidden; background: rgba(10, 9, 16, .86); box-shadow: 0 0 0 1px rgba(255, 226, 160, .34), 0 5px 16px rgba(0, 0, 0, .55); }
.as-hp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -5px 7px rgba(0, 0, 0, .28); pointer-events: none; }
.as-hp i, .as-en i { position: absolute; inset: 0; transform-origin: left center; }
.as-right .as-hp i, .as-right .as-en i { transform-origin: right center; }
.as-hp-fill { background: linear-gradient(180deg, #ff8a6e, #dc2734 50%, #8e0f1c); transition: transform .14s ease-out; }
/* the pale chunk that stays behind for a moment and then drains after the bar */
.as-hp-ghost { background: #ffe9d6; opacity: .9; transition: transform .7s cubic-bezier(.3, .7, .2, 1) .34s; }
.as-jump i { transition: none !important; }
.as-hp-text { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font: 700 11px/1 Inter, system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .95); font-variant-numeric: tabular-nums; }
.as-en { position: relative; width: 70%; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(10, 9, 16, .86); box-shadow: 0 0 0 1px rgba(255, 255, 255, .13); }
.as-en-fill { background: linear-gradient(180deg, #ffe680, #e89a14); transition: transform .28s ease-out; }
.as-low .as-hp-fill { animation: as-low .9s ease-in-out infinite; }
@keyframes as-low { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
.as-calm .as-low .as-hp-fill { animation: none; filter: brightness(1.25); }
/* the name and, beside it, the word an Elite carries */
.as-title { display: flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; }
.as-right .as-title { flex-direction: row-reverse; }
.as-title .as-name { flex: 0 1 auto; min-width: 0; }
.as-mark { flex: none; padding: 2px 6px 2px 5px; border-radius: 4px; font: 800 10px/1.1 Sora, Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #1c1002; background: linear-gradient(180deg, #ffe9a0, #f0a82a); box-shadow: 0 0 0 1px #0b0912, 0 0 9px rgba(255, 180, 60, .7); }
.as-mark::before { content: '\2605\00a0'; }
/* an Elite: a gold ring on the crest. A gatekeeper: a heavier frame in his own colour round the crest and the bar */
.as-elite .as-crest { box-shadow: 0 0 0 2px #0b0912, 0 0 0 4px #f0a82a, 0 0 14px rgba(255, 180, 60, .7); }
.as-boss .as-crest { box-shadow: 0 0 0 2px #0b0912, 0 0 0 4px var(--as-c), 0 0 18px var(--as-c); }
.as-boss .as-hp { box-shadow: 0 0 0 1px #0b0912, 0 0 0 2.5px var(--as-c), 0 0 16px color-mix(in srgb, var(--as-c) 55%, transparent), 0 5px 16px rgba(0, 0, 0, .55); }
.as-boss .as-name { letter-spacing: .03em; text-shadow: 0 1px 2px #000, 0 0 12px color-mix(in srgb, var(--as-c) 60%, transparent); }
.as-dead .as-name, .as-dead .as-crest { opacity: .5; }
.as-dead .as-crest { filter: grayscale(1); }
.as-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; min-height: 19px; }
.as-right .as-tags { justify-content: flex-end; }
.as-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 99px; font: 600 10.5px/1.1 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #f2f0f8; background: rgba(10, 9, 16, .84); box-shadow: inset 0 0 0 1px var(--as-s, #fff); }
.as-tag::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--as-s, #fff); box-shadow: 0 0 6px var(--as-s, #fff); }
.as-tag b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* a wide stage (1200 px and up): everything on the plates a size larger */
.as-large .as-hud { padding: 18px 24px 0; }
.as-large .as-crest { width: 52px; height: 52px; }
.as-large .as-plate { column-gap: 12px; row-gap: 7px; }
.as-large .as-name { font-size: 22px; }
.as-large .as-mark { font-size: 12px; padding: 3px 8px 3px 6px; }
.as-large .as-hp { height: 26px; border-radius: 6px; }
.as-large .as-hp-text { font-size: 14px; }
.as-large .as-en { height: 9px; }
.as-large .as-tag { font-size: 12.5px; padding: 4px 10px 4px 7px; }
.as-large .as-tag::before { width: 7px; height: 7px; }

/* a small stage (narrower than 620 px or lower than 330 px): tight plates, and the statuses as dots in ONE row with
   the word only on the newest, so the plates never grow down over the fighters */
.as-small .as-hud { padding: 8px 9px 0; gap: 5%; }
.as-small .as-plate { max-width: 46%; column-gap: 6px; row-gap: 4px; }
.as-small .as-crest { width: 26px; height: 26px; box-shadow: 0 0 0 1px #0b0912, 0 0 0 2px rgba(255, 226, 160, .55); }
.as-small .as-plate-body { gap: 3px; }
.as-small .as-name { font-size: 12.5px; }
.as-small .as-title { gap: 4px; }
.as-small .as-mark { font-size: 8px; padding: 1px 4px 1px 3px; letter-spacing: .06em; }
.as-small .as-elite .as-crest { box-shadow: 0 0 0 1px #0b0912, 0 0 0 2.5px #f0a82a; }
.as-small .as-boss .as-crest { box-shadow: 0 0 0 1px #0b0912, 0 0 0 2.5px var(--as-c), 0 0 9px var(--as-c); }
.as-small .as-boss .as-hp { box-shadow: 0 0 0 1px #0b0912, 0 0 0 2px var(--as-c); }
.as-small .as-hp { height: 14px; border-radius: 4px; }
.as-small .as-hp-text { font-size: 9.5px; }
.as-small .as-en { height: 4px; }
.as-small .as-tags { flex-wrap: nowrap; min-height: 14px; gap: 3px; overflow: hidden; }
.as-small .as-tag { flex: none; font-size: 8.5px; padding: 2px 5px 2px 4px; gap: 3px; }
.as-small .as-tag:not(:last-child) { padding: 4px; }
.as-small .as-tag:not(:last-child) > span { display: none; }
.as-small .as-tag:not(:last-child) b { margin-left: 2px; }
.as-small .as-msg { font-size: 13px; padding-top: 70px; }

/* ---------- messages: loading, a lost 3D view, no WebGL at all. They lie UNDER the plates and the numbers. ---------- */
.as-msg { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 96px 24px 24px; text-align: center; font: 500 15px/1.5 Inter, system-ui, sans-serif; color: #cfcbe0; background: rgba(5, 5, 11, .62); }
.as-flat .as-msg { background: radial-gradient(ellipse at 50% 60%, #1a1626, #07060c 75%); }
.as-fps { position: absolute; left: 8px; bottom: 8px; z-index: 5; padding: 4px 7px; border-radius: 6px; font: 11px/1.35 ui-monospace, Consolas, monospace; color: #9ff3e6; background: rgba(0, 0, 0, .64); white-space: pre; pointer-events: none; }

/* something of the page's that hangs over a head (attach) steps aside for a close shot */
.as-shy { opacity: 0 !important; transition: opacity .16s linear; }