/*
 * Kabb's Auto Battler: the stage's stylesheet (see mods/stage.js).
 *
 * Everything hangs on #arena.stg, the class the stage puts on the arena when it takes a fight
 * over, so the page looks as it always did until then. The page's own arena markup is restyled
 * here, never edited: the heading and the controls are lifted out of their box and placed in the
 * screen's rows, the two team boxes become decks the fighters are placed on by transform.
 * One rule looks outside the arena: while it covers the shop (html.stg-on) the shop holds still.
 *
 * File order
 *   Tokens ............ the colours, type and motion this sheet uses
 *   The screen ........ rows by layout mode (tall, short, land, desk), heading, controls
 *   The backdrop ...... plates, grades, washes
 *   The arena ......... decks, floor, midline, danger tiles
 *   Fighters .......... shadow, sprite, bars, status row, pips, tints, tight rows, the boss
 *   Effects ........... sprites, beams, numbers, words, tags, callouts, banner, spotlight
 *   The ribbon ........ chips, badges, beat ticks
 *   The boss bar ...... face, name, Law, health and pips, the countdown
 *   After the fight ... the result bar docked where the controls were, the report behind DETAILS
 *   Motion ............ keyframes; reduced motion; a slow device; the shop behind the arena
 *
 * Only transform and opacity are animated. Filters are static (one 80 ms hit flash aside).
 */

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────────────
   The names are the layout spec's; they are set here on the arena only, until a shared token
   sheet carries them for the whole page. */
#arena.stg{
  --sf-void:#070810;--sf-0:#0B0D16;--sf-1:#141728;--sf-2:#1B2036;--sf-3:#242A44;--sf-scrim:rgba(5,3,12,.82);
  --ln:rgba(255,205,110,.16);--ln-hi:rgba(255,205,110,.38);
  --tx-hi:#EFE6CF;--tx-mid:#B9B2A0;--tx-low:#8D8A80;--tx-inv:#0A0B13;
  --ac-gold:#FFC23C;--ac-info:#5BC8FF;--ac-good:#7CFFB0;--ac-bad:#FF5E7E;--ac-surge:#A98BFF;
  --side-crew:#5BC8FF;--side-foe:#FF5E7E;
  --fa-volt:#7B2FF0;--fa-pyre:#FF5A2C;--fa-brine:#2BB6C4;--fa-thorn:#5FCF4F;--fa-astra:#FFD76A;
  --f-disp:'Cinzel Decorative','Cinzel',serif;--f-label:'Cinzel',serif;--f-body:'Spectral',Georgia,serif;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-pop:cubic-bezier(.3,1.4,.5,1);
  --stage-ac:#E0913A;
  --hud:48px;--boss:40px;--rib:48px;--ctl:52px;--st:14px;--pip:7px;--hp:5px;--sg:3px;--slide:160ms;
  background:var(--sf-void);backdrop-filter:none;-webkit-backdrop-filter:none;align-items:stretch;justify-content:stretch;
}
#arena.stg[data-ui="short"]{--hud:44px;--boss:36px;--rib:44px;--ctl:48px}
#arena.stg[data-ui="land"]{--hud:44px;--boss:34px;--rib:44px}
#arena.stg[data-ui="desk"]{--boss:44px;--rib:92px;--st:16px;--pip:10px;--hp:6px;--sg:4px}
#arena.stg[data-speed="2"]{--slide:90ms}
#arena.stg[data-speed="4"]{--slide:0ms}
/* A crew's colour for edges, and a lighter one of the same hue for text on the dark field. */
#arena.stg [data-crew="volt"]{--crew:var(--fa-volt);--crew-hi:#B79CFF}
#arena.stg [data-crew="pyre"]{--crew:var(--fa-pyre);--crew-hi:#FF8F66}
#arena.stg [data-crew="brine"]{--crew:var(--fa-brine);--crew-hi:#6FDDE6}
#arena.stg [data-crew="thorn"]{--crew:var(--fa-thorn);--crew-hi:#93E486}
#arena.stg [data-crew="astra"]{--crew:var(--fa-astra);--crew-hi:#FFE08A}
#arena.stg [data-crew="neutral"]{--crew:#C8B79A;--crew-hi:var(--tx-hi)}
#arena.stg .ic{display:block;width:1em;height:1em;fill:currentColor;flex:0 0 auto}
#arena.stg .off{display:none!important}

/* ── The screen ─────────────────────────────────────────────────────────────────────────────── */
#arena.stg .arenaInner{
  position:relative;z-index:1;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;box-sizing:border-box;
  border:0;border-radius:0;box-shadow:none;background:none;overflow:hidden;overflow:clip;
  padding:calc(env(safe-area-inset-top,0px) + 4px) calc(env(safe-area-inset-right,0px) + 8px) calc(env(safe-area-inset-bottom,0px) + 6px) calc(env(safe-area-inset-left,0px) + 8px);
  display:grid;gap:4px;grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--hud) auto var(--rib) minmax(0,1fr) var(--ctl);
  grid-template-areas:"hud" "boss" "ribbon" "arena" "ctl";
}
#arena.stg[data-ui="land"] .arenaInner{
  grid-template-columns:44px minmax(0,1fr);grid-template-rows:var(--hud) auto minmax(0,1fr);
  grid-template-areas:"hud hud" "boss boss" "ribbon arena";
}
#arena.stg[data-ui="desk"] .arenaInner{
  grid-template-columns:minmax(0,1fr) var(--rib) 702px minmax(0,1fr);column-gap:10px;grid-template-rows:var(--hud) auto minmax(0,1fr);
  grid-template-areas:". hud hud ." ". boss boss ." ". ribbon arena .";padding-top:8px;padding-bottom:10px;
}
#arena.stg .arenaHead{display:contents}
#arena.stg .arenaHead .ah,#arena.stg #stageTag,#arena.stg #bossBg,#arena.stg #waveBanner,#arena.stg .teamLbl,#arena.stg .vs{display:none}
#arena.stg .stg-defs{position:absolute;width:0;height:0;overflow:hidden}

#arena.stg .stg-title{grid-area:hud;align-self:center;justify-self:start;display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;
  font-family:var(--f-label);font-weight:700;color:var(--tx-hi);letter-spacing:.06em}
#arena.stg[data-ui="desk"] .stg-title,#arena.stg[data-ui="land"] .stg-title{max-width:calc(100% - 250px)}
/* One line: the glyph, the round, its kind and the Overtime chip keep their width; only the name gives way. */
#arena.stg .stg-title .rk,#arena.stg .stg-title .rn,#arena.stg .stg-title .rkind,#arena.stg .stg-title .rot{flex:0 0 auto;white-space:nowrap}
#arena.stg .stg-title .rk{width:22px;height:22px;color:var(--stage-ac);filter:drop-shadow(0 1px 2px #000)}
#arena.stg .stg-title .rn{font-size:16px;color:var(--ac-gold);font-variant-numeric:tabular-nums lining-nums;text-shadow:0 1px 2px #000}
#arena.stg .stg-title .rkind{font-size:11px;line-height:1;padding:3px 6px;border-radius:4px;color:var(--tx-inv);background:var(--side-foe)}
#arena.stg .stg-title .rkind:empty{display:none}
#arena.stg .stg-title .rot{font-size:11px;line-height:1;padding:3px 6px;border-radius:4px;color:#FFD0D8;box-shadow:inset 0 0 0 1px var(--ac-bad);background:rgba(255,94,126,.16)}
#arena.stg .stg-title .rot:empty{display:none}
#arena.stg .stg-title .rt{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;text-transform:uppercase;color:var(--tx-mid);text-shadow:0 1px 2px #000}

#arena.stg .arenaCtrls{grid-area:ctl;align-self:center;justify-self:end;display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
#arena.stg[data-ui="desk"] .arenaCtrls,#arena.stg[data-ui="land"] .arenaCtrls{grid-area:hud}
#arena.stg .spdctrl{display:flex;align-items:center;gap:0;font-size:0;letter-spacing:0;opacity:1;border:1px solid var(--ln-hi);border-radius:10px;overflow:hidden;background:var(--sf-scrim)}
#arena.stg .spdctrl.capped::after{content:none}
#arena.stg .spd{min-width:48px;height:42px;padding:0 8px;border:0;border-radius:0;background:none;color:var(--tx-mid);font:700 14px/1 var(--f-label)}
#arena.stg .spd + .spd{border-left:1px solid var(--ln)}
#arena.stg .spd.on{background:var(--ac-gold);color:var(--tx-inv)}
#arena.stg .skipBtn{min-width:72px;height:44px;margin:0;padding:0 12px;border-radius:10px;border:1px solid var(--ln-hi);background:var(--sf-scrim);color:var(--tx-hi);font:700 12px/1 var(--f-label);letter-spacing:.08em}
#arena.stg[data-ui="land"] .spd{height:36px;min-width:44px}
#arena.stg[data-ui="land"] .skipBtn{height:38px}
#arena.stg .spd:active,#arena.stg .skipBtn:active{transform:scale(.97)}
/* The boss's chat box (the core's) never stands on the boss. It is a strip in the heading's row:
   the boss bar under it says who is speaking, and the heading it covers for a moment is not part
   of the fight. A desktop wide enough has a free column right of the arena, and the box stands
   there, under the Law. Its caret blinks by opacity; nothing here animates a shadow. */
#arena.stg #bossChat{z-index:80;left:calc(env(safe-area-inset-left,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);top:calc(env(safe-area-inset-top,0px) + 4px);
  height:var(--hud);max-width:none;box-sizing:border-box;align-items:center;gap:8px;padding:2px 10px 2px 3px;border-width:1.5px;border-radius:10px;transform:translateY(-6px);
  background:linear-gradient(180deg,#1a1326,#0d0a16)}
#arena.stg #bossChat.show{transform:none}
#arena.stg #bossChat .bcPortrait{width:calc(var(--hud) - 11px);height:calc(var(--hud) - 11px);border-radius:7px}
#arena.stg #bossChat .bcName{display:none}
#arena.stg #bossChat .bcLine{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#arena.stg #bossChat .bcLine.type{animation:bcType .35s steps(1)}
/* Beside the arena the controls share the heading's row: the strip stops short of them. */
#arena.stg[data-ui="land"] #bossChat{right:calc(env(safe-area-inset-right,0px) + 262px)}
#arena.stg[data-ui="desk"] #bossChat{left:calc(50% - 402px);right:calc(50% - 140px);top:8px}
@media (min-width:1340px){
  #arena.stg[data-ui="desk"] #bossChat{left:calc(50% + 412px);right:auto;top:calc(var(--arena-top,116px) + 64px);width:250px;height:auto;align-items:stretch;padding:8px 11px 8px 8px;border-width:2px;border-radius:14px;transform:translateY(-10px)}
  #arena.stg[data-ui="desk"] #bossChat.show{transform:none}
  #arena.stg[data-ui="desk"] #bossChat .bcPortrait{width:46px;height:46px;border-radius:10px}
  #arena.stg[data-ui="desk"] #bossChat .bcName{display:block;white-space:normal;overflow:visible;line-height:1.25}
  #arena.stg[data-ui="desk"] #bossChat .bcLine{font-size:12.5px;line-height:1.3;display:block;overflow:visible}
}

/* ── The backdrop ───────────────────────────────────────────────────────────────────────────────
   The plate fills the whole screen behind the rows. A missing painting leaves the place's own
   gradient. One layer shows; two only while they cross-dissolve. */
#arena.stg .stg-plate{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#1a1626,var(--sf-void) 70%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--stage-ac) 18%,var(--sf-void)),var(--sf-void) 72%)}
#arena.stg .stg-plate .pl{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
#arena.stg .stg-plate .pl.on.ok{opacity:var(--plate-o,.45)}
#arena.stg .stg-plate .pi{position:absolute;left:0;top:0;background-size:100% 100%;background-repeat:no-repeat;transform-origin:50% 50%}
#arena.stg .stg-plate[data-grade="skirmish"] .pl,#arena.stg .stg-plate[data-grade="rival"] .pl{animation:stgDrift 24s ease-in-out infinite alternate}
#arena.stg .stg-plate[data-grade="boss"] .pl{animation:stgPan 17s ease-in-out infinite alternate}
#arena.stg .stg-plate[data-grade="boss"] .pl:nth-child(2){animation-duration:19s;animation-direction:alternate-reverse}
#arena.stg .stg-plate.freed .pl{animation-play-state:paused}
#arena.stg .stg-plate.zoomed{transform:scale(1.3)}
#arena.stg .stg-plate .wash,#arena.stg .stg-plate .storm,#arena.stg .stg-plate .ot,#arena.stg .stg-plate .cut{position:absolute;inset:0}
#arena.stg .stg-plate .wash{background:linear-gradient(180deg,rgba(7,8,16,.55),transparent 22%,transparent 78%,rgba(7,8,16,.6))}
#arena.stg .stg-plate[data-grade="rival"] .wash{background:linear-gradient(180deg,rgba(255,94,126,.10),rgba(255,94,126,.10) 44%,transparent 54%),linear-gradient(180deg,rgba(7,8,16,.55),transparent 22%,transparent 78%,rgba(7,8,16,.6))}
#arena.stg .stg-plate[data-grade="boss"] .wash{background:radial-gradient(120% 95% at 50% 42%,transparent 40%,rgba(5,3,12,.4) 100%)}
#arena.stg .stg-plate .storm{background:linear-gradient(#FFCF3A,#7B2FF0);opacity:var(--storm-o,0)}
#arena.stg .stg-plate .ot{background:radial-gradient(115% 90% at 50% 50%,transparent 38%,var(--ac-bad) 100%);opacity:var(--ot-o,0)}
#arena.stg .stg-plate .cut{background:var(--stage-ac);opacity:0}

/* ── The arena ──────────────────────────────────────────────────────────────────────────────── */
#arena.stg .teams{grid-area:arena;position:relative;display:block;min-height:0;height:auto;gap:0;align-self:stretch;
  --cw:59px;--ch:76px;--sw:59px;--sh:56px;--gap:4px;--mid-y:228px;--grid-x:0px;--grid-w:374px;--rows-a:1;--rows-e:1}
#arena.stg .team{position:static;display:block;flex:none;min-width:0}
#arena.stg .fighters.stg-deck{position:absolute;inset:0;display:block;min-height:0;pointer-events:none}
/* The floor: lanes read as columns, a shelf under every row, a fade toward the outer edge. */
#arena.stg .stg-tiles{position:absolute;inset:0;pointer-events:none}
#arena.stg .stg-tiles .floor{position:absolute;left:var(--grid-x);width:var(--grid-w);pointer-events:none;border-radius:8px;
  background:
    repeating-linear-gradient(90deg,rgba(255,232,190,.05) 0 1px,transparent 1px calc(var(--cw) + var(--gap))),
    repeating-linear-gradient(180deg,transparent 0 calc(var(--ch)*.92 - 1px),rgba(255,232,190,.08) calc(var(--ch)*.92 - 1px) calc(var(--ch)*.92),transparent calc(var(--ch)*.92) var(--ch))}
#arena.stg .stg-tiles .floor.e{top:calc(var(--mid-y) - var(--rows-e)*var(--ch));height:calc(var(--rows-e)*var(--ch))}
#arena.stg .stg-tiles .floor.a{top:calc(var(--mid-y) + 24px);height:calc(var(--rows-a)*var(--ch))}
#arena.stg .stg-tiles .floor::after{content:'';position:absolute;inset:0;border-radius:8px}
#arena.stg .stg-tiles .floor.e::after{background:linear-gradient(0deg,transparent 30%,rgba(7,8,16,.55))}
#arena.stg .stg-tiles .floor.a::after{background:linear-gradient(180deg,transparent 30%,rgba(7,8,16,.55))}
#arena.stg .stg-tiles .tile{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:6px;box-sizing:border-box;border:1.5px solid var(--ac-bad);
  background:repeating-linear-gradient(135deg,rgba(255,94,126,.22) 0 5px,rgba(255,94,126,.08) 5px 10px)}
/* The midline: a seam in the place's colour, carrying the wave pips. */
#arena.stg .stg-mid{position:absolute;left:var(--grid-x);width:var(--grid-w);top:var(--mid-y);height:24px;pointer-events:none}
#arena.stg .stg-mid::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--stage-ac) 12%,var(--stage-ac) 88%,transparent)}
#arena.stg[data-ot]:not([data-ot=""]) .stg-mid::before{background:linear-gradient(90deg,transparent,var(--ac-bad) 12%,var(--ac-bad) 88%,transparent)}
#arena.stg .stg-mid::after{content:'';position:absolute;left:8%;right:8%;top:50%;height:10px;margin-top:-5px;background:radial-gradient(closest-side,var(--stage-ac),transparent);opacity:.28}
#arena.stg .stg-mid .wp{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:8px;height:100%}
#arena.stg .stg-mid .p{width:6px;height:6px;transform:rotate(45deg);box-sizing:border-box;border:1px solid var(--stage-ac);background:var(--sf-void)}
#arena.stg .stg-mid .p.done{background:var(--stage-ac)}
#arena.stg .stg-mid .p.now{width:10px;height:10px;background:var(--tx-hi);border-color:var(--stage-ac)}
#arena.stg .stg-dim{position:absolute;inset:-4px;background:#05030c;opacity:0;transition:opacity .18s;z-index:55;pointer-events:none}
#arena.stg .stg-dim.on{opacity:.4}

/* ── Fighters ───────────────────────────────────────────────────────────────────────────────── */
#arena.stg .sf{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);display:block;margin:0;padding:0;border-radius:0;text-align:left;opacity:1;filter:none;transition:none;pointer-events:auto;--fs:1}
#arena.stg .sf .fshadow{position:absolute;left:50%;bottom:calc(var(--ch)*.02);width:calc(var(--cw)*.62*var(--fs));height:calc(var(--ch)*.14);margin-left:calc(var(--cw)*-.31*var(--fs));border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transition:opacity .3s;animation:stgIdleShadow var(--idle,2400ms) ease-in-out var(--idle-at,0ms) infinite alternate}
#arena.stg .sf .fshadow::after{content:'';position:absolute;inset:0;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--ring,var(--side-crew));opacity:.35;transition:opacity .12s,transform .16s var(--ease-out)}
#arena.stg .sf.e .fshadow::after{border-style:dashed;border-color:var(--ring,var(--side-foe))}
#arena.stg .sf.acting .fshadow::after{opacity:1}
#arena.stg .sf.rflash .fshadow::after{opacity:1;border-color:var(--crew-hi,var(--tx-hi));transform:scale(1.3)}
#arena.stg .sf.pulse .fshadow::after{animation:stgRing .3s ease-out 2}

#arena.stg .sf .fbody{position:absolute;left:50%;bottom:calc(var(--ch)*.07);width:calc(var(--sw)*var(--fs));height:calc(var(--sh)*var(--fs));margin-left:calc(var(--sw)*var(--fs)/-2);
  display:block;transform-origin:50% 100%;z-index:1;animation:stgIdle var(--idle,2400ms) ease-in-out var(--idle-at,0ms) infinite alternate;transition:opacity .3s}
#arena.stg .sf .fart{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform:scale(var(--art-s,1));transform-origin:50% 50%;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));transition:transform .12s var(--ease-out);user-select:none;-webkit-user-drag:none}
#arena.stg .sf.acting .fart{transform:scale(calc(var(--art-s,1)*1.06))}
/* No portrait: the fighter's glyph, cut in dark ink on a disc of its crew's colour. */
#arena.stg .sf .fglyph{position:absolute;left:50%;bottom:4%;height:74%;max-width:100%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--crew,#8D8A80);color:var(--tx-inv);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.6)}
#arena.stg .sf .fglyph .ic{width:58%;height:58%}
/* The Shield is a ring on the sprite as well as a strip on the bar; ice is a block over it. */
#arena.stg .sf.shielded .fbody::before{content:'';position:absolute;left:6%;right:6%;top:8%;bottom:-2%;border-radius:46%;box-sizing:border-box;border:1.5px solid #E8F7FF;opacity:.45;
  background:radial-gradient(closest-side,transparent 72%,rgba(232,247,255,.16))}
#arena.stg .sf.t-frozen .fbody::after{content:'';position:absolute;left:10%;right:10%;top:2%;bottom:0;opacity:.55;
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(130,215,255,.5) 55%,rgba(255,255,255,.7));clip-path:polygon(50% 0,100% 26%,90% 100%,10% 100%,0 26%)}

/* Tints: one static filter chain a fighter, the later rule winning. */
#arena.stg .sf.rival .fart{filter:drop-shadow(0 0 2px #FF5E7E) drop-shadow(0 2px 3px rgba(0,0,0,.65))}
#arena.stg .sf.elite .fart{filter:saturate(1.2) contrast(1.1) drop-shadow(0 0 2px #FF5E7E) drop-shadow(0 0 6px rgba(255,94,126,.55))}
#arena.stg .sf.storm .fart{filter:sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 5px #FFCF3A)}
#arena.stg .sf.t-enrage .fart{filter:saturate(1.4) contrast(1.15) drop-shadow(0 0 6px #FF3B3B)}
#arena.stg .sf.t-stun .fart{filter:grayscale(.6) brightness(.9)}
#arena.stg .sf.t-frozen .fart{filter:grayscale(.7) sepia(1) hue-rotate(150deg) saturate(2) brightness(1.15)}
#arena.stg .sf.t-dead .fart{filter:grayscale(1) brightness(.5)}
#arena.stg .sf.hitf .fart{filter:brightness(2.2)}
#arena.stg .sf.t-stun .fbody,#arena.stg .sf.t-frozen .fbody,#arena.stg .sf.t-stun .fshadow,#arena.stg .sf.t-frozen .fshadow{animation-play-state:paused}
/* A clear death: grey, sunk, gone. A routed escort slides off instead. */
#arena.stg .sf.t-dead{pointer-events:none}
#arena.stg .sf.t-dead .fbody{animation:none;opacity:0;transform:translateY(12px);transition:opacity .3s ease-in,transform .3s ease-in}
#arena.stg .sf.t-dead.fled .fbody{transform:translateX(26px)}
#arena.stg .sf.t-dead .fhead,#arena.stg .sf.t-dead .ffoot,#arena.stg .sf.t-dead .fshadow{opacity:0;transition:opacity .3s}

/* Bars: health with its lagging ghost and the Shield strip on top, then Surge, notched every basic attack. */
#arena.stg .sf .fhead{position:absolute;left:4px;right:4px;top:auto;bottom:calc(var(--ch)*.07 + var(--sh)*var(--fs) + 1px);width:auto;z-index:3;display:flex;flex-direction:column;gap:1px;pointer-events:none;transition:opacity .3s}
#arena.stg .sf .hpb{position:relative;height:var(--hp);border-radius:2px;overflow:hidden;background:rgba(0,0,0,.6);box-shadow:0 0 0 1px rgba(0,0,0,.55)}
#arena.stg .sf .hpb::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent calc(25% - .5px),rgba(0,0,0,.6) calc(25% - .5px),rgba(0,0,0,.6) calc(25% + .5px),transparent calc(25% + .5px),transparent calc(50% - .5px),rgba(0,0,0,.6) calc(50% - .5px),rgba(0,0,0,.6) calc(50% + .5px),transparent calc(50% + .5px),transparent calc(75% - .5px),rgba(0,0,0,.6) calc(75% - .5px),rgba(0,0,0,.6) calc(75% + .5px),transparent calc(75% + .5px))}
#arena.stg .sf .hp,#arena.stg .sf .lag,#arena.stg .sf .sh,#arena.stg .sf .sg{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 50%;border-radius:0;opacity:1;box-shadow:none}
#arena.stg .sf .lag{background:#fff;opacity:.9;transition:transform .4s var(--ease-out) .1s}
#arena.stg .sf .hp{background:var(--ac-good);transition:transform .14s var(--ease-out)}
#arena.stg .sf.e .hp{background:var(--side-foe)}
#arena.stg .sf .sh{height:3px;z-index:2;background:repeating-linear-gradient(45deg,#E8F7FF 0 2px,#9fc6dc 2px 4px);transition:transform .14s var(--ease-out)}
#arena.stg .sf.sh-last .sh{animation:stgBlink .5s steps(1,end) infinite}
#arena.stg .sf .sgb{position:relative;height:var(--sg);border-radius:1.5px;background:rgba(0,0,0,.6);box-shadow:0 0 0 1px rgba(0,0,0,.55)}
#arena.stg .sf .sgb::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--notch,33.3%) - 1px),rgba(0,0,0,.7) calc(var(--notch,33.3%) - 1px),rgba(0,0,0,.7) var(--notch,33.3%))}
#arena.stg .sf .sg{transform:scaleX(0);background:var(--ac-surge);transition:transform .14s var(--ease-out)}
#arena.stg .sf.sg-full .sg{background:linear-gradient(180deg,var(--ac-surge),#fff 45%,#fff 55%,var(--ac-surge))}
#arena.stg .sf.sg-full .sgb::before{content:'';position:absolute;left:-2px;right:-2px;top:-3px;bottom:-3px;border-radius:4px;background:radial-gradient(closest-side,rgba(169,139,255,.95),rgba(169,139,255,0));animation:stgGlow .7s ease-in-out infinite alternate}
#arena.stg .sf.sg-hold .sg{background:var(--ac-surge);opacity:.6}
#arena.stg .sf.sg-spent .sgb{background:none;box-shadow:inset 0 0 0 1px var(--ac-surge)}
#arena.stg .sf.sg-off .sg{background:var(--tx-low)}

/* The status row: a glyph and its stacks; debuffs underlined in the foe's red, buffs in green. */
#arena.stg .sf .fsts{display:flex;justify-content:center;align-items:flex-start;gap:1px;height:var(--st);margin:0 -4px 3px}
#arena.stg .sf .fst{position:relative;flex:0 0 auto;width:var(--st);height:var(--st);color:var(--tx-hi)}
#arena.stg .sf .fst .ic{width:100%;height:100%;filter:drop-shadow(0 1px 1px #000)}
#arena.stg .sf .fst::before{content:'';position:absolute;left:1px;right:1px;bottom:-2px;height:1.5px;border-radius:1px;background:var(--ac-good)}
#arena.stg .sf .fst.deb::before{background:var(--side-foe)}
#arena.stg .sf .fst::after{content:attr(data-n);position:absolute;right:-3px;bottom:-4px;font:700 11px/1 var(--f-label);font-variant-numeric:tabular-nums lining-nums;color:#fff;
  -webkit-text-stroke:2.5px #05030c;paint-order:stroke fill}
#arena.stg .sf .fmore{flex:0 0 auto;align-self:center;margin-left:1px;font:700 11px/1 var(--f-label);color:var(--tx-hi);-webkit-text-stroke:2.5px #05030c;paint-order:stroke fill}

/* The foot of a fighter, on its shadow: stars (an elite wears a crown and a pip per affix) and,
   where the layout has room for it, its name. A sprite with its bars stands taller than its
   cell, so the bars of the fighter in the next row reach a little into this one: the foot is
   raised by exactly that much and is never under them. */
#arena.stg .sf .ffoot{position:absolute;left:-8px;right:-8px;bottom:0;bottom:max(0px,calc(var(--ch)*.07 + var(--sh) + 3px + var(--hp) + var(--sg) - var(--ch)));z-index:2;display:flex;align-items:center;justify-content:center;gap:2px;height:var(--pip);pointer-events:none;transition:opacity .3s}
#arena.stg .sf .fpips{flex:0 0 auto;height:var(--pip);width:calc(var(--pip)*var(--n,1));color:var(--ac-gold);fill:currentColor;filter:drop-shadow(0 1px 1px #000);overflow:visible}
#arena.stg .sf .fpips.el{color:var(--side-foe);height:calc(var(--pip) + 2px);width:calc((var(--pip) + 2px)*var(--n,1))}
#arena.stg .sf .fpips .p4{color:#C98BFF}
#arena.stg .sf .fname{display:none}
#arena.stg[data-ui="desk"] .sf .fname{display:block;flex:0 1 auto;min-width:0;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 11px/var(--pip) var(--f-label);letter-spacing:.02em;color:var(--tx-hi);
  -webkit-text-stroke:2.5px #05030c;paint-order:stroke fill}
#arena.stg[data-ui="desk"] .sf.e .fname{color:#FFD0D8}

/* Tight rows: bars on the sprite's feet with the stars just over them, two small statuses on its corner.
   The sprite stands 5% of the cell up and keeps inside the rest of it even at the top of its
   idle bob (the geometry's `tightFit`), so nobody's head is on the bars of the fighter in the
   next row. */
#arena.stg[data-tight="1"]{--st:12px;--hp:4px;--sg:2px}
#arena.stg[data-tight="1"] .sf .fhead{top:auto;bottom:1px;left:5px;right:5px}
#arena.stg[data-tight="1"] .sf .fsts{position:absolute;left:-3px;bottom:calc(var(--ch) - 16px);margin:0;justify-content:flex-start}
#arena.stg[data-tight="1"] .sf .ffoot{bottom:10px;z-index:4}
#arena.stg[data-tight="1"] .sf .fname{display:none}
#arena.stg[data-tight="1"] .sf .fbody{bottom:calc(var(--ch)*.05)}

/* The boss stands tall on its cell. Its health is the boss bar's; its statuses ride over its head. */
#arena.stg .sf.boss{width:var(--cw)}
#arena.stg .sf.boss .fbody{height:calc(var(--sw)*var(--fs))}
#arena.stg .sf.boss .fhead{bottom:calc(var(--ch)*.07 + var(--sw)*var(--fs)*.94);left:50%;right:auto;width:calc(var(--cw)*1.6);margin-left:calc(var(--cw)*-.8)}
#arena.stg .sf.boss .fsts{position:static;margin:0}
#arena.stg .sf.boss .fart{filter:drop-shadow(0 0 10px rgba(255,176,32,.55)) drop-shadow(0 4px 5px rgba(0,0,0,.7))}
#arena.stg .sf.boss.storm .fart{filter:sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 8px #FFCF3A) drop-shadow(0 4px 5px rgba(0,0,0,.7))}
#arena.stg .sf.boss.t-enrage .fart{filter:saturate(1.4) contrast(1.15) drop-shadow(0 0 6px #FF3B3B)}
#arena.stg .sf.boss.t-dead .fart{filter:grayscale(1) brightness(.5)}
#arena.stg .sf.boss.hitf .fart{filter:brightness(2.2)}

/* ── Effects ────────────────────────────────────────────────────────────────────────────────── */
#arena.stg .stg-fx{position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden}
#arena.stg .stg-fx .sx{position:absolute;left:0;top:0;z-index:auto;opacity:0;background-repeat:no-repeat;transform-origin:50% 50%;will-change:transform;filter:none;pointer-events:none}
#arena.stg .stg-fx .beam{position:absolute;left:0;top:-1.5px;height:3px;opacity:0;transform-origin:0 50%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--crew-hi,#fff) 15%,#fff 50%,var(--crew-hi,#fff) 85%,transparent)}
#arena.stg .stg-fx .num,#arena.stg .stg-fx .tag,#arena.stg .stg-fx .callout,#arena.stg .stg-fx .word{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;pointer-events:none}
#arena.stg .stg-fx .num{display:flex;align-items:center;gap:1px;font:700 14px/1 var(--f-label);font-variant-numeric:tabular-nums lining-nums;color:var(--tx-hi);
  -webkit-text-stroke:3px #05030c;paint-order:stroke fill;z-index:3}
#arena.stg .stg-fx .num .ic{width:.9em;height:.9em;filter:drop-shadow(0 1px 1px #000)}
#arena.stg .stg-fx .num.n-skill{color:var(--crew-hi,var(--tx-hi))}
#arena.stg .stg-fx .num.n-crit{color:var(--ac-gold);z-index:4}
#arena.stg .stg-fx .num.n-proc{color:var(--crew-hi,var(--tx-mid));filter:opacity(.85)}
#arena.stg .stg-fx .num.n-burn{color:#FF8A3C}
#arena.stg .stg-fx .num.n-poison{color:#9BE06A}
#arena.stg .stg-fx .num.n-reflect{color:#C8D2E0}
#arena.stg .stg-fx .num.n-true{color:var(--ac-bad)}
#arena.stg .stg-fx .num.n-heal,#arena.stg .stg-fx .num.n-stamp{color:var(--ac-good)}
#arena.stg .stg-fx .num.n-shield,#arena.stg .stg-fx .num.n-soak{color:#E8F7FF}
#arena.stg .stg-fx .num.n-surge{color:var(--ac-surge)}
#arena.stg .stg-fx .num.n-skip{color:var(--tx-mid)}
#arena.stg .stg-fx .word{background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;z-index:6;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
#arena.stg .stg-fx .tag{font:700 11px/1 var(--f-label);letter-spacing:.1em;color:var(--crew-hi,var(--tx-hi));-webkit-text-stroke:3px #05030c;paint-order:stroke fill;z-index:5}
/* The Skill's name: a skewed plate the first time, the bare name after. Gold underline = the rider. */
#arena.stg .stg-fx .callout{display:flex;align-items:center;gap:5px;font-family:var(--f-label);font-weight:700;letter-spacing:.06em;color:var(--tx-hi);z-index:7}
#arena.stg .stg-fx .callout.full{height:22px;padding:0 10px 0 6px;font-size:14px;line-height:22px;background:var(--sf-scrim);border-left:3px solid var(--crew,var(--tx-mid));box-shadow:0 2px 8px rgba(0,0,0,.5)}
#arena.stg .stg-fx .callout.full.foe{border-left-color:var(--side-foe)}
#arena.stg .stg-fx .callout.full .ic{width:14px;height:14px;color:var(--crew-hi,var(--tx-hi))}
#arena.stg .stg-fx .callout.full.foe .ic{color:var(--side-foe)}
#arena.stg .stg-fx .callout.short{font-size:11px;-webkit-text-stroke:3px #05030c;paint-order:stroke fill}
#arena.stg .stg-fx .callout.short .ic{display:none}
#arena.stg .stg-fx .callout.chg::after{content:'';position:absolute;left:6px;right:6px;bottom:-3px;height:2px;border-radius:1px;background:var(--ac-gold)}
#arena.stg .stg-fx .callout.chg::before{content:'';position:absolute;right:-3px;bottom:-6px;width:7px;height:7px;transform:rotate(45deg);background:var(--ac-gold);box-shadow:0 0 0 1.5px #05030c}
#arena.stg[data-ui="desk"] .stg-fx .callout.full{height:26px;line-height:26px;font-size:16px}
#arena.stg[data-ui="desk"] .stg-fx .callout.short{font-size:12px}
/* Banners: a wave, a boss, a phase, Overtime. A band of scrim across the arena, its foot on the
   midline's seam (over the foes' feet, clear of every bar and of a boss in the back row), with
   the line in heavy ink so it reads over any plate. Long lines wrap. */
#arena.stg .stg-banner,#arena.stg .stg-vs{position:absolute;left:0;right:0;top:calc(var(--mid-y) + 12px);transform:translateY(-100%);opacity:0;z-index:8;box-sizing:border-box;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px}
#arena.stg .stg-banner::before,#arena.stg .stg-vs::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,3,12,0),rgba(5,3,12,.86) 16%,rgba(5,3,12,.86) 84%,rgba(5,3,12,0))}
#arena.stg .stg-banner{text-align:center;font:700 26px/1.08 var(--f-disp);letter-spacing:.08em;color:#fff;text-shadow:0 0 16px var(--stage-ac);-webkit-text-stroke:5px #05030c;paint-order:stroke fill}
#arena.stg .stg-banner .bw{flex:0 0 auto;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
#arena.stg .stg-banner .btx{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
#arena.stg .stg-banner .bt{overflow-wrap:anywhere}
#arena.stg .stg-banner .bs{font:700 12px/1.15 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-hi);text-shadow:none;-webkit-text-stroke:3px #05030c}
#arena.stg .stg-banner .bs:empty{display:none}
#arena.stg .stg-banner.wave{font-size:34px}
#arena.stg .stg-banner.boss{color:#FFE07A;text-shadow:0 0 18px #FF7A2C;text-transform:uppercase}
#arena.stg .stg-banner.rival{color:#FFD0D8;text-shadow:0 0 16px var(--side-foe)}
#arena.stg .stg-banner.ot{color:#FFD0D8;text-shadow:0 0 18px var(--ac-bad)}
#arena.stg[data-ui="short"] .stg-banner,#arena.stg[data-ui="tall"] .stg-banner{font-size:20px;letter-spacing:.05em}
#arena.stg[data-ui="short"] .stg-banner.wave,#arena.stg[data-ui="tall"] .stg-banner.wave{font-size:28px}
/* The plate a Rival round opens on: the crew's face, the Rival's mark, the Rival's face, its
   crew's name and who runs it. Sides are told by ring (solid, dashed) as on the field. */
#arena.stg .stg-vs{padding:7px 14px;gap:9px}
#arena.stg .stg-vs::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--side-foe),transparent)}
#arena.stg .stg-vs .vs-face{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;box-sizing:border-box;border:2px solid var(--side-crew);overflow:hidden;
  background:var(--sf-2) 50% 12%/150% no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
#arena.stg .stg-vs .vs-face.e{border:2px dashed var(--side-foe)}
#arena.stg .stg-vs .vs-mark{width:22px;height:22px;color:var(--side-foe);filter:drop-shadow(0 1px 2px #000)}
#arena.stg .stg-vs .vs-text{min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}
#arena.stg .stg-vs .vs-name{font:700 18px/1.08 var(--f-disp);letter-spacing:.05em;text-transform:uppercase;color:#FFD0D8;text-shadow:0 0 14px var(--side-foe);-webkit-text-stroke:4px #05030c;paint-order:stroke fill}
#arena.stg .stg-vs .vs-by{font:700 11px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mid)}
#arena.stg .stg-vs .vs-by:empty{display:none}
#arena.stg[data-ui="desk"] .stg-vs .vs-face{width:56px;height:56px}
#arena.stg[data-ui="desk"] .stg-vs .vs-name{font-size:24px}
/* A face with no portrait (a chip, a plate, the boss bar): its glyph on the crew's colour. */
#arena.stg .cf .ic,#arena.stg .vs-face .ic,#arena.stg .bb-face .ic{display:none}
#arena.stg .noart{background-color:var(--crew,#8D8A80)!important;color:var(--tx-inv)}
#arena.stg .noart .ic{display:block;width:58%;height:58%}
/* The spotlight band. */
#arena.stg .stg-spot{position:absolute;left:-8px;right:-8px;height:120px;margin-top:-60px;z-index:70;display:flex;align-items:center;justify-content:center;gap:14px;overflow:hidden;cursor:pointer;
  background:linear-gradient(90deg,rgba(5,3,12,.55),var(--sf-scrim) 14%,var(--sf-scrim) 86%,rgba(5,3,12,.55));border-top:2px solid var(--crew,var(--ac-surge));border-bottom:2px solid var(--crew,var(--ac-surge));
  animation:stgBandIn .22s var(--ease-out) both}
#arena.stg .stg-spot.foe{border-color:var(--side-foe)}
#arena.stg .stg-spot .sp-art{flex:0 0 auto;width:96px;height:112px;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 0 12px var(--crew,var(--ac-surge)));animation:stgArtIn .32s var(--ease-pop) both}
#arena.stg .stg-spot .sp-text{min-width:0;display:flex;flex-direction:column;gap:4px;animation:stgTextIn .3s var(--ease-out) .06s both}
#arena.stg .stg-spot .sp-who{font:700 12px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--crew-hi,var(--tx-mid))}
#arena.stg .stg-spot.foe .sp-who{color:var(--side-foe)}
#arena.stg .stg-spot .sp-name{font:700 20px/1.1 var(--f-disp);letter-spacing:.04em;color:#fff;text-shadow:0 0 18px var(--crew,var(--ac-surge)),0 2px 6px #000;white-space:normal}
#arena.stg[data-ui="desk"] .stg-spot{height:160px;margin-top:-80px}
#arena.stg[data-ui="desk"] .stg-spot .sp-art{width:140px;height:150px}
#arena.stg[data-ui="desk"] .stg-spot .sp-name{font-size:28px}

/* ── The ribbon ─────────────────────────────────────────────────────────────────────────────── */
#arena.stg .stg-ribbon{grid-area:ribbon;position:relative;min-width:0;min-height:0;--chip:36px;--now:44px;--ult:72px}
#arena.stg .stg-ribbon.off{display:block!important;visibility:hidden}
#arena.stg .stg-ribbon .rb-track{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
#arena.stg .stg-ribbon::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--ln-hi),transparent)}
#arena.stg[data-ot]:not([data-ot=""]) .stg-ribbon::after{background:linear-gradient(90deg,var(--ac-bad),transparent)}
#arena.stg .stg-ribbon .rb-sweep{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:var(--tx-hi);opacity:0;transform-origin:0 50%;pointer-events:none}
#arena.stg .rchip{position:absolute;left:0;top:50%;width:var(--chip);height:var(--chip);margin-top:calc(var(--chip)/-2);opacity:1;cursor:pointer;
  transition:transform var(--slide) var(--ease-out),opacity .14s linear}
#arena.stg .rchip.now{width:var(--now);height:var(--now);margin-top:calc(var(--now)/-2)}
#arena.stg .rchip.jump{transition:none}
#arena.stg .rchip.off,#arena.stg .tick.off{display:block!important;opacity:0;pointer-events:none}
#arena.stg .rchip.fire{opacity:0;pointer-events:none}
#arena.stg .rchip.fire .cf{transform:scale(.8);transition:transform .14s}
#arena.stg .rchip.dead{opacity:0;pointer-events:none}
#arena.stg .rchip.dead .cf{transform:translateY(12px);transition:transform .14s}
#arena.stg .rchip .cf{position:absolute;inset:0;border-radius:50%;box-sizing:border-box;border:2px solid var(--side-crew);background-color:var(--sf-2);background-repeat:no-repeat;background-size:150%;background-position:50% 12%;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.6)}
#arena.stg .rchip.e .cf{border:2px dashed var(--side-foe)}
#arena.stg .rchip.now .cf{border-width:3px;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.7)}
/* Held back: the foe's red and a shove. Sped up: gold. */
#arena.stg .rchip.late .cf{border-color:var(--side-foe);border-style:solid;box-shadow:0 0 0 2px rgba(255,94,126,.35),0 1px 4px rgba(0,0,0,.6);animation:stgShove .2s var(--ease-out)}
#arena.stg .rchip.early .cf{border-color:var(--ac-gold);border-style:solid;box-shadow:0 0 0 2px rgba(255,194,60,.45),0 1px 4px rgba(0,0,0,.6)}
#arena.stg .rchip .cb{display:none;position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;color:var(--ac-surge);filter:drop-shadow(0 0 1px #05030c) drop-shadow(0 0 1px #05030c) drop-shadow(0 1px 2px #000)}
#arena.stg .rchip.cast .cb{display:block}
#arena.stg .rchip.skip .cb{display:block;color:var(--tx-hi)}
#arena.stg .rchip.skip .cf{filter:grayscale(1) brightness(.55)}
#arena.stg .rchip .cl{display:none}
/* A boss's ultimate: a wide chip with its name under the face and a pulsing edge. */
#arena.stg .rchip.ult{width:var(--ult)}
#arena.stg .rchip.ult .cf{left:50%;right:auto;top:0;bottom:auto;width:calc(var(--chip) - 8px);height:calc(var(--chip) - 8px);margin-left:calc((var(--chip) - 8px)/-2);border:2px solid var(--ac-bad)}
#arena.stg .rchip.ult .cb{display:block;color:var(--ac-bad);right:auto;left:50%;margin-left:calc(var(--chip)/2 - 12px);bottom:auto;top:calc(var(--chip) - 22px)}
/* Its label has a box wide enough for the ribbon's ten characters; a name wider than that is cut once, by the box. */
#arena.stg .rchip.ult .cl{display:block;position:absolute;left:-8px;right:-8px;bottom:-3px;padding:1px 0;overflow:hidden;text-overflow:ellipsis;text-align:center;white-space:nowrap;font:700 11px/1 var(--f-label);letter-spacing:0;color:#FFD0D8;-webkit-text-stroke:2.5px #05030c;paint-order:stroke fill}
#arena.stg .rchip.ult::before{content:'';position:absolute;left:2px;right:2px;top:-3px;bottom:-5px;border-radius:8px;box-sizing:border-box;border:1.5px solid var(--ac-bad);background:rgba(255,94,126,.10);animation:stgGlow .8s ease-in-out infinite alternate}
#arena.stg .tick{position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:1px;background:var(--tx-low);opacity:.9;transition:transform var(--slide) var(--ease-out),opacity .14s linear}
#arena.stg .tick.jump{transition:none}
#arena.stg .tick.ot{top:6%;bottom:6%;width:3px;background:var(--ac-bad);box-shadow:0 0 6px var(--ac-bad)}
#arena.stg .tick.ot::after{content:attr(data-l);position:absolute;left:5px;top:-2px;font:700 11px/1 var(--f-label);letter-spacing:.04em;color:var(--ac-bad);-webkit-text-stroke:2.5px #05030c;paint-order:stroke fill}
/* Beside the arena (desktop, landscape) the ribbon runs downward. */
#arena.stg[data-ui="desk"] .stg-ribbon .rb-track,#arena.stg[data-ui="land"] .stg-ribbon .rb-track{-webkit-mask-image:linear-gradient(180deg,#000 90%,transparent);mask-image:linear-gradient(180deg,#000 90%,transparent)}
#arena.stg[data-ui="desk"] .stg-ribbon::after,#arena.stg[data-ui="land"] .stg-ribbon::after{left:auto;right:0;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--ln-hi),transparent)}
#arena.stg[data-ui="desk"][data-ot]:not([data-ot=""]) .stg-ribbon::after,#arena.stg[data-ui="land"][data-ot]:not([data-ot=""]) .stg-ribbon::after{background:linear-gradient(180deg,var(--ac-bad),transparent)}
#arena.stg[data-ui="desk"] .stg-ribbon .rb-sweep,#arena.stg[data-ui="land"] .stg-ribbon .rb-sweep{left:auto;right:0;top:0;bottom:0;width:2px;height:auto;transform-origin:50% 0}
#arena.stg[data-ui="desk"] .rchip,#arena.stg[data-ui="land"] .rchip{left:50%;top:0;margin-top:0;margin-left:calc(var(--chip)/-2)}
#arena.stg[data-ui="desk"] .rchip.now,#arena.stg[data-ui="land"] .rchip.now{margin-top:0;margin-left:calc(var(--now)/-2)}
#arena.stg[data-ui="desk"] .rchip.ult,#arena.stg[data-ui="land"] .rchip.ult{width:var(--chip);height:var(--ult)}
#arena.stg[data-ui="desk"] .rchip.ult .cl{left:-26px;right:-26px;bottom:1px}
#arena.stg[data-ui="desk"] .rchip.ult::before{left:-26px;right:-26px;top:-3px;bottom:-3px}
/* A phone on its side has no room beside a chip for a name: the framed chip and its mark carry the warning. */
#arena.stg[data-ui="land"] .rchip.ult .cl{display:none}
#arena.stg[data-ui="land"] .rchip.ult::before{left:-3px;right:-3px;top:-3px;bottom:-3px}
#arena.stg[data-ui="desk"] .tick,#arena.stg[data-ui="land"] .tick{left:22%;right:22%;top:0;bottom:auto;width:auto;height:2px}
#arena.stg[data-ui="desk"] .tick.ot,#arena.stg[data-ui="land"] .tick.ot{left:6%;right:6%;height:3px;width:auto}
#arena.stg[data-ui="desk"] .tick.ot::after,#arena.stg[data-ui="land"] .tick.ot::after{left:auto;right:0;top:4px}

/* ── The boss bar ───────────────────────────────────────────────────────────────────────────── */
#arena.stg .stg-boss{grid-area:boss;position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 56px;align-items:center;gap:8px;height:var(--boss);min-width:0;
  padding:0 4px;box-sizing:border-box;border-radius:8px;background:linear-gradient(90deg,var(--sf-scrim),rgba(5,3,12,.55));box-shadow:inset 0 0 0 1px var(--ln)}
#arena.stg .stg-boss .bb-face{width:32px;height:32px;border-radius:8px;box-sizing:border-box;border:1.5px solid var(--ac-gold);background:var(--sf-2) 50% 10%/150% no-repeat}
#arena.stg .stg-boss .bb-main{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
#arena.stg .stg-boss .bb-face{display:flex;align-items:center;justify-content:center;overflow:hidden}
#arena.stg .stg-boss .bb-top{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
/* The name gives way; the LAW button and the percent keep their width. */
#arena.stg .stg-boss .bb-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font:700 12px/1 var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:#FFE07A;text-shadow:0 1px 2px #000}
/* LAW: a small pill inside a full 44 px target. */
#arena.stg .stg-boss .bb-law{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;min-width:44px;height:44px;margin:-16px 0;padding:0 7px;border:0;background:none;cursor:pointer;
  color:var(--tx-hi);font:700 11px/1 var(--f-label);letter-spacing:.06em;white-space:nowrap}
#arena.stg .stg-boss .bb-law::before{content:'';position:absolute;left:0;right:0;top:12px;bottom:12px;z-index:-1;border-radius:6px;background:rgba(5,3,12,.5);box-shadow:inset 0 0 0 1px var(--ln-hi)}
#arena.stg .stg-boss.lawopen .bb-law::before{box-shadow:inset 0 0 0 1px var(--stage-ac);background:rgba(255,205,110,.14)}
#arena.stg .stg-boss .bb-law:active{transform:scale(.97)}
#arena.stg .stg-boss .bb-law .ic{width:12px;height:12px;color:var(--stage-ac)}
#arena.stg .stg-boss .bb-lawbrief{display:none;text-transform:uppercase;color:var(--tx-mid)}
#arena.stg .stg-boss .bb-lawbrief::before{content:'\00B7\00A0'}
#arena.stg[data-ui="desk"] .stg-boss .bb-lawbrief,#arena.stg[data-ui="land"] .stg-boss .bb-lawbrief{display:inline}
/* The narrowest phone: the longest short name (ten letters) stands whole beside LAW and INCOMING. */
#arena.stg[data-ui="short"] .stg-boss{gap:6px}
#arena.stg[data-ui="short"] .stg-boss .bb-top{gap:6px}
#arena.stg[data-ui="short"] .stg-boss .bb-name{letter-spacing:.05em}
#arena.stg[data-ui="short"] .stg-boss .bb-law{padding:0 4px}
/* The Law itself: a plate under the bar that the button opens. */
#arena.stg .stg-boss .bb-lawplate{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:90;padding:8px 10px;border-radius:8px;box-sizing:border-box;
  background:var(--sf-scrim);box-shadow:inset 0 0 0 1px var(--ln-hi),0 6px 18px rgba(0,0,0,.6)}
#arena.stg .stg-boss.lawopen .bb-lawplate{display:block}
#arena.stg .stg-boss .bb-lawname{display:block;font:700 12px/1.15 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--stage-ac)}
#arena.stg .stg-boss .bb-lawtext{display:block;margin-top:4px;font:600 13px/1.3 var(--f-body);letter-spacing:0;color:var(--tx-hi);white-space:normal}
#arena.stg .stg-boss .bb-pct{flex:0 0 auto;margin-left:auto;font:700 12px/1 var(--f-label);font-variant-numeric:tabular-nums lining-nums;color:var(--tx-hi)}
#arena.stg .stg-boss .bb-hp{position:relative;height:9px;border-radius:3px;background:rgba(0,0,0,.65);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
#arena.stg .stg-boss .bb-hp .lag,#arena.stg .stg-boss .bb-hp .hp,#arena.stg .stg-boss .bb-hp .sh{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:3px;transform-origin:0 50%}
#arena.stg .stg-boss .bb-hp .lag{background:#fff;opacity:.9;transition:transform .4s var(--ease-out) .1s}
#arena.stg .stg-boss .bb-hp .hp{background:linear-gradient(180deg,#FF8A9E,var(--side-foe));transition:transform .14s var(--ease-out)}
#arena.stg .stg-boss .bb-hp .sh{height:3px;transform:scaleX(0);background:repeating-linear-gradient(45deg,#E8F7FF 0 2px,#9fc6dc 2px 4px);transition:transform .14s var(--ease-out)}
#arena.stg .stg-boss .bb-pips{position:absolute;inset:0}
#arena.stg .stg-boss .pip{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;transform:rotate(45deg);box-sizing:border-box;border:1.5px solid var(--tx-hi);background:var(--sf-void)}
#arena.stg .stg-boss .pip.lit{background:var(--ac-gold);border-color:#fff;box-shadow:0 0 6px var(--ac-gold)}
#arena.stg .stg-boss .bb-ult{justify-self:stretch;height:30px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:7px;box-sizing:border-box;border:1px solid var(--ln-hi);background:rgba(5,3,12,.6);color:var(--tx-hi);font:700 11px/1 var(--f-label);letter-spacing:.04em;white-space:nowrap}
#arena.stg .stg-boss .bb-ult .ic{width:14px;height:14px;color:var(--ac-bad)}
#arena.stg .stg-boss .bb-ult.off{display:flex!important;visibility:hidden}
#arena.stg .stg-boss .bb-ult.hot{border-color:var(--ac-bad);color:#FFD0D8;background:rgba(255,94,126,.16)}
#arena.stg .stg-boss.incoming .bb-face,#arena.stg .stg-boss.incoming .bb-hp{filter:grayscale(1) brightness(.6)}
#arena.stg .stg-boss.down .bb-face{filter:grayscale(1) brightness(.6)}
/* A desktop wide enough has a free column right of the arena: the Law stands open there for the whole fight. */
@media (min-width:1340px){
  #arena.stg[data-ui="desk"] .stg-boss .bb-lawplate{display:block;left:calc(100% + 10px);right:auto;top:0;width:250px}
  #arena.stg[data-ui="desk"] .stg-boss .bb-law{cursor:default}
  #arena.stg[data-ui="desk"] .stg-boss .bb-law::before{display:none}
}

/* ── After the fight ────────────────────────────────────────────────────────────────────────────
   The arena keeps its place and its size and nothing scrolls: the fight's last frame stays on
   screen. The result bar docks where the controls were (it may grow upward over the arena's foot)
   and the report opens over the arena from its DETAILS button. On a wide desktop the report and
   the result stand in the free column right of the arena instead. */
#arena.stg .arenaInner.ended{overflow:hidden;overflow:clip}
#arena.stg .arenaInner.ended .arenaCtrls{display:none}
#arena.stg .arenaInner.ended .stg-ribbon{visibility:hidden}
#arena.stg .arenaInner .resultBox{grid-area:ctl;align-self:end;position:relative;z-index:86;box-sizing:border-box;width:auto;max-width:none;min-height:var(--ctl);margin:0;padding:3px 5px 3px 12px;gap:4px 6px;flex-wrap:wrap;border-radius:12px;animation:none}
#arena.stg .arenaInner .resultBox .resultText{flex:1 1 96px;min-width:0}
#arena.stg .arenaInner .resultBox #resultTitle{font-size:15px;line-height:1.15;letter-spacing:.04em}
#arena.stg .arenaInner .resultBox #resultSub{margin:1px 0 0;font-size:11px;line-height:1.2;opacity:1;color:var(--tx-mid)}
#arena.stg .arenaInner .resultBox #continueBtn{flex:0 0 auto;min-height:44px;margin:0 0 0 auto;padding:0 11px;font-size:12px}
#arena.stg .arenaInner .resultBox .shareBtn{flex:0 0 auto;min-height:44px;margin:0;padding:0 11px;font-size:12px}
#arena.stg .stg-details{flex:0 0 auto;min-width:44px;min-height:44px;padding:0 9px;border-radius:10px;border:1px solid var(--ln-hi);background:var(--sf-scrim);color:var(--tx-hi);cursor:pointer;font:700 11px/1 var(--f-label);letter-spacing:.08em}
#arena.stg .stg-details:active{transform:scale(.97)}
#arena.stg[data-ui="land"] .arenaInner .resultBox,#arena.stg[data-ui="desk"] .arenaInner .resultBox{grid-area:hud;justify-self:end;align-self:start;flex-wrap:nowrap;max-width:58%;min-height:var(--hud);padding:2px 5px 2px 10px;gap:8px}
#arena.stg[data-ui="land"] .arenaInner .resultBox #resultTitle,#arena.stg[data-ui="desk"] .arenaInner .resultBox #resultTitle{font-size:14px;line-height:1.1}
#arena.stg[data-ui="land"] .arenaInner .resultBox #resultSub,#arena.stg[data-ui="desk"] .arenaInner .resultBox #resultSub{margin:0;line-height:1.1}
#arena.stg[data-ui="land"] .arenaInner .resultBox #continueBtn,#arena.stg[data-ui="land"] .arenaInner .resultBox .stg-details,#arena.stg[data-ui="land"] .arenaInner .resultBox .shareBtn{min-height:38px}
#arena.stg[data-ui="land"] .arenaInner.ended .stg-title,#arena.stg[data-ui="desk"] .arenaInner.ended .stg-title{max-width:40%}
/* The report: hidden until asked for, then a sheet over the arena (the log above the meter on a phone). */
#arena.stg .arenaInner .reportLbl{display:none}
#arena.stg .arenaInner.ended .battleinfo{display:none}
#arena.stg .arenaInner.ended.stg-report .battleinfo{display:grid;grid-area:arena;align-self:stretch;position:relative;z-index:84;min-height:0;margin:0;padding:8px;gap:8px;box-sizing:border-box;border-radius:12px;animation:none;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,3fr) minmax(0,2fr);background:rgba(5,3,12,.93);box-shadow:inset 0 0 0 1px var(--ln-hi)}
#arena.stg[data-ui="land"] .arenaInner.ended.stg-report .battleinfo,#arena.stg[data-ui="desk"] .arenaInner.ended.stg-report .battleinfo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#arena.stg .arenaInner.ended .battleinfo .logwrap,#arena.stg .arenaInner.ended .battleinfo .meter{min-height:0;display:flex;flex-direction:column}
#arena.stg .arenaInner.ended .battleinfo #combatLog,#arena.stg .arenaInner.ended .battleinfo .meterBody{flex:1 1 0;min-height:0;height:auto;max-height:none;overflow-y:auto}
@media (min-width:1340px){
  #arena.stg[data-ui="desk"] .arenaInner.ended .battleinfo,#arena.stg[data-ui="desk"] .arenaInner.ended.stg-report .battleinfo{display:flex;flex-direction:column;gap:10px;grid-area:auto;grid-column:4;grid-row:2 / 4;align-self:stretch;
    position:relative;z-index:5;margin:0 0 76px;padding:0;background:none;box-shadow:none}
  #arena.stg[data-ui="desk"] .arenaInner.ended .battleinfo .logwrap,#arena.stg[data-ui="desk"] .arenaInner.ended .battleinfo .meter{flex:1 1 0}
  #arena.stg[data-ui="desk"] .arenaInner .resultBox{grid-area:auto;grid-column:4;grid-row:3;align-self:end;justify-self:stretch;max-width:none;flex-wrap:wrap;min-height:64px;padding:8px 10px 8px 14px}
  #arena.stg[data-ui="desk"] .arenaInner .resultBox .resultText{flex:1 1 100%}
  #arena.stg[data-ui="desk"] .arenaInner .resultBox #resultTitle{font-size:17px;line-height:1.15;white-space:nowrap}
  #arena.stg[data-ui="desk"] .arenaInner .resultBox #resultSub{line-height:1.2}
  #arena.stg[data-ui="desk"] .arenaInner .resultBox #continueBtn{flex:1 1 auto}
  #arena.stg[data-ui="desk"] .arenaInner.ended .stg-title{max-width:calc(100% - 250px)}
  #arena.stg[data-ui="desk"] .arenaInner.ended .stg-details{display:none}
  #arena.stg[data-ui="desk"] .arenaInner.ended .stg-boss .bb-lawplate{display:none}
}
/* The run-over bar shown without a fight keeps the page's own look. */
#arena.stg .arenaInner.bare{display:flex;flex-direction:column;justify-content:center;align-items:stretch}
#arena.stg .arenaInner.bare .stg-title,#arena.stg .arenaInner.bare .stg-boss,#arena.stg .arenaInner.bare .stg-ribbon,#arena.stg .arenaInner.bare .stg-details{display:none}
#arena.stg .arenaInner.bare .resultBox{align-self:stretch;max-width:none}

/* ── Motion ─────────────────────────────────────────────────────────────────────────────────── */
@keyframes stgIdle{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-3%) scaleY(1.02)}}
@keyframes stgIdleShadow{from{transform:scale(1)}to{transform:scale(.94)}}
@keyframes stgDrift{from{transform:scale(1.05) translateX(-1.5%)}to{transform:scale(1.05) translateX(1.5%)}}
@keyframes stgPan{from{transform:scale(1.16) translate(-6%,-2%)}to{transform:scale(1.16) translate(6%,2%)}}
@keyframes stgGlow{from{opacity:.25}to{opacity:.9}}
@keyframes stgBlink{0%{opacity:1}50%{opacity:.25}}
@keyframes stgRing{from{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes stgShove{0%{transform:translateX(0)}50%{transform:translateX(6px)}100%{transform:translateX(0)}}
@keyframes stgBandIn{from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:scaleY(1)}}
@keyframes stgArtIn{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes stgTextIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* Reduced motion: nothing loops, nothing travels; state changes without transitions. */
#arena.stg[data-motion="reduce"] .stg-plate .pl{animation:none;transition:opacity .12s linear}
#arena.stg[data-motion="reduce"] .sf .fbody,#arena.stg[data-motion="reduce"] .sf .fshadow,#arena.stg[data-motion="reduce"] .sf .fshadow::after,#arena.stg[data-motion="reduce"] .sf.sh-last .sh{animation:none}
#arena.stg[data-motion="reduce"] .sf.sg-full .sgb::before,#arena.stg[data-motion="reduce"] .rchip.ult::before{animation:none;opacity:.8}
#arena.stg[data-motion="reduce"] .sf .hp,#arena.stg[data-motion="reduce"] .sf .lag,#arena.stg[data-motion="reduce"] .sf .sh,#arena.stg[data-motion="reduce"] .sf .sg,#arena.stg[data-motion="reduce"] .sf .fart,
#arena.stg[data-motion="reduce"] .stg-boss .lag,#arena.stg[data-motion="reduce"] .stg-boss .hp,#arena.stg[data-motion="reduce"] .stg-boss .sh{transition:none}
#arena.stg[data-motion="reduce"] .sf.t-dead .fbody{transform:none;transition:opacity .12s linear}
#arena.stg[data-motion="reduce"] .rchip,#arena.stg[data-motion="reduce"] .tick{transition:opacity .12s linear}
#arena.stg[data-motion="reduce"] .rchip.late .cf{animation:none}
#arena.stg[data-motion="reduce"] #bossChat .bcLine.type,#arena.stg[data-motion="reduce"] #bossChat .bcLine.type::after{animation:none}
/* At 4x steps arrive faster than a fade or a shove lasts: chips swap in place. */
#arena.stg[data-speed="4"] .rchip,#arena.stg[data-speed="4"] .tick,#arena.stg[data-speed="4"] .rchip.fire .cf,#arena.stg[data-speed="4"] .rchip.dead .cf{transition:none}
#arena.stg[data-speed="4"] .rchip.late .cf{animation:none}
#arena.stg[data-motion="reduce"] .rchip.fire .cf,#arena.stg[data-motion="reduce"] .rchip.dead .cf{transform:none}
#arena.stg[data-motion="reduce"] .stg-spot,#arena.stg[data-motion="reduce"] .stg-spot .sp-art,#arena.stg[data-motion="reduce"] .stg-spot .sp-text{animation:none}
/* A device that cannot keep up loses the idle loops for the session. */
#arena.stg.stg-slow .sf .fbody,#arena.stg.stg-slow .sf .fshadow,#arena.stg.stg-slow .stg-plate .pl{animation:none}
/* While the arena covers the shop, nothing behind it keeps animating (the shop's pulses move box-shadows). */
html.stg-on .wrap,html.stg-on .wrap *,html.stg-on .wrap *::before,html.stg-on .wrap *::after,html.stg-on .bg-grid,html.stg-on .bg-sun{animation-play-state:paused!important}