/* Champion-only composition. Scene coordinates use the full 1376 x 768 artwork. */
#championArena.gladiatorView{
 --duel-width:min(100%,calc((100dvh - 230px)*1.791667));
 display:block!important;max-width:1440px;padding:4px 0 12px;
}
#championArena.gladiatorView>.gladiatorHeading,
#championArena.gladiatorView>.gladiatorHud,
#championArena.gladiatorView>.gladiatorControls,
#championArena.gladiatorView>.gladiatorJournal{width:var(--duel-width);max-width:100%;box-sizing:border-box;margin-inline:auto}
#championArena.gladiatorView .gladiatorHeading{background:transparent;border:0;padding:4px 0!important;min-height:40px!important}
#championArena.gladiatorView .gladiatorHeading>div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px}
#championArena.gladiatorView .gladiatorHeading h1{font-size:clamp(18px,2vw,23px)!important}
#championArena .gladiatorSceneName{font:12px/1.4 system-ui,sans-serif;color:#b8b8aa}
#championArena.gladiatorView .gladiatorHud{margin-block:4px 8px}
#championArena.gladiatorView .gladiatorVitals{background:transparent;padding:2px 0;border:0}
#championArena.gladiatorView .gladiatorStage{
 width:var(--duel-width);min-width:0;max-width:100%;height:auto;min-height:0;max-height:none;
 margin:0 auto;aspect-ratio:1376/768;background-size:100% 100%;background-position:center;
 border:1px solid #ac95634d;border-radius:14px;box-shadow:0 10px 35px #0005;
}
#championArena.gladiatorView .gladiatorStage .championActor{
 top:auto;bottom:calc(100% - var(--arena-floor));height:var(--arena-body);width:31%;max-width:none;
 transition:none;will-change:left;
}
#championArena.gladiatorView .gladiatorStage .championActor::after{display:none}
#championArena.gladiatorView .gladiatorStage .championActorName{
 bottom:-20px;font:600 11px/1.25 system-ui,sans-serif;letter-spacing:0;border-radius:12px;
 padding:3px 9px;background:#091418b8;color:#f1e6cb;white-space:nowrap;
}
#championArena.gladiatorView .gladiatorStage .championTelegraph{
 top:-4%;max-width:180px;white-space:normal;min-width:66px;padding:4px 8px;
 border-color:#cab78070;background:#10191de6;border-radius:8px;font-size:11px;
}
#championArena.gladiatorView .gladiatorStage .championDamage{top:32%;font-size:clamp(16px,2.6vw,28px)}
#championArena.gladiatorView .gladiatorGround{display:none}
/* Telegraph the exact dangerous width on the floor, beneath the fighters. */
#championArena.gladiatorView .gladiatorHazard{
 top:auto;bottom:calc(100% - var(--arena-floor) - 3%);height:6%;min-height:10px;
 box-sizing:border-box;border:2px solid var(--hazard-color);border-radius:50%;
 background:radial-gradient(ellipse,transparent 25%,color-mix(in srgb,var(--hazard-color) 38%,transparent) 78%,transparent);
 box-shadow:0 0 16px color-mix(in srgb,var(--hazard-color) 35%,transparent),inset 0 0 14px #0005;
 opacity:calc(.5 + var(--hazard-charge,0)*.45);animation:none;pointer-events:none;z-index:1;
}
#championArena.gladiatorView .gladiatorHazard::before{
 content:'';position:absolute;inset:18% 5%;border:1px solid var(--hazard-color);border-radius:50%;
 transform:scaleX(calc(.25 + var(--hazard-charge,0)*.75));opacity:.65;
}
#championArena.gladiatorView .gladiatorHazard[data-imminent=true]{box-shadow:0 0 22px var(--hazard-color),inset 0 0 20px var(--hazard-color)}
#championArena.gladiatorView .gladiatorWarning{
 top:3%;font-size:12px;background:#141b20e8;border-color:var(--hazard-color);padding:6px 12px;border-radius:16px;
}
#championArena.gladiatorView .gladiatorWarning[data-threatened=true]{color:#fff0d0;background:#50291ee8}
#championArena.gladiatorView .gladiatorBanner{bottom:3%;max-width:85%;width:auto;font-size:12px;background:#071219c9;padding:6px 12px}
#championArena.gladiatorView .gladiatorControls{
 display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,2fr) 115px;
 grid-template-areas:'movement actions stance' 'automation automation automation';
 gap:6px 9px;margin-top:8px;padding:8px;background:#101819d9;border:1px solid #c2ac7333;border-radius:12px;
 align-items:center;max-height:none;overflow:visible;
}
#championArena.gladiatorView .gladiatorControls .gladiatorMovement{grid-area:movement;display:grid;grid-template-columns:1fr 1fr;gap:6px}
#championArena.gladiatorView .gladiatorControls .gladiatorMovement small{display:none}
#championArena.gladiatorView .gladiatorControls .gladiatorActions{grid-area:actions;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}
#championArena.gladiatorView .gladiatorActions .battleCommand{
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;
 min-height:48px!important;padding:5px 7px!important;gap:2px;text-align:center;border-radius:9px!important;
}
#championArena.gladiatorView .gladiatorActions .commandSymbol{display:none}
#championArena.gladiatorView .gladiatorActions .battleCardCopy{grid-column:1!important;grid-row:1!important;text-align:center;gap:0}
#championArena.gladiatorView .gladiatorActions .battleCardCopy b{font-size:12px;line-height:1.3;overflow-wrap:normal}
#championArena.gladiatorView .gladiatorActions .battleCardCopy small{display:none}
#championArena.gladiatorView .gladiatorActions .battleCardCost{grid-column:1!important;grid-row:2!important;font-size:10px;text-align:center!important}
#championArena.gladiatorView .gladiatorControls .gladiatorStyle{grid-area:stance;width:100%;max-width:none;min-height:44px!important}
#championArena.gladiatorView .gladiatorControls .autoCombat{grid-area:automation;justify-content:center;padding:0;margin:0}
#championArena.gladiatorView .gladiatorControls .autoCombat small{display:none}
#championArena.gladiatorView .gladiatorJournal{margin-top:8px;background:transparent;padding:4px 0}
#championArena.gladiatorView .gladiatorJournal summary{font-size:12px;min-height:32px}
#championArena.gladiatorView .gladiatorResult{z-index:8}
#championArena.gladiatorView .gladiatorControls button:disabled{opacity:.65}
#championArena.gladiatorView .gladiatorControls button:not(:disabled):focus-visible{outline:2px solid #f1d6a0;outline-offset:2px}
@media(max-width:760px){
 #championArena.gladiatorView{--duel-width:100%}
 #championArena.gladiatorView .gladiatorSceneName{font-size:11px}
 #championArena.gladiatorView .gladiatorControls{grid-template-columns:minmax(0,1fr) 110px;grid-template-areas:'actions actions' 'movement stance' 'automation automation';padding:7px}
 #championArena.gladiatorView .gladiatorActions .battleCommand{min-height:48px!important}
 #championArena.gladiatorView .gladiatorStage .championTelegraph{font-size:9px;padding:3px 5px}
 #championArena.gladiatorView .gladiatorStage .championActorName{font-size:9px;bottom:-16px;padding:2px 6px}
 #championArena.gladiatorView .gladiatorWarning{font-size:10px;padding:4px 7px;top:2%}
 #championArena.gladiatorView .gladiatorBanner{font-size:10px;padding:4px 7px;bottom:2%}
}
@media(orientation:landscape) and (max-height:600px) and (min-width:650px){
 #championArena.gladiatorView:not([data-phase=champion-ready]){display:grid!important;grid-template-columns:minmax(0,1fr) 185px;gap:4px 8px;--duel-width:100%}
 #championArena.gladiatorView>.gladiatorHeading{grid-column:1/-1}
 #championArena.gladiatorView>.gladiatorHud{grid-column:1;grid-row:2;margin:0}
 #championArena.gladiatorView>.gladiatorStage{grid-column:1;grid-row:3;max-width:calc((100dvh - 125px)*1.791667)}
 #championArena.gladiatorView>.gladiatorControls{grid-column:2;grid-row:2/4;align-self:start;display:flex;flex-direction:column;max-height:calc(100dvh - 65px);overflow:auto;margin:0}
 #championArena.gladiatorView .gladiatorControls .gladiatorActions{grid-template-columns:1fr;order:0}
 #championArena.gladiatorView .gladiatorControls .gladiatorMovement{order:1;width:100%}
 #championArena.gladiatorView .gladiatorControls .gladiatorStyle{order:2}
 #championArena.gladiatorView .gladiatorControls .autoCombat{order:3}
 #championArena.gladiatorView>.gladiatorJournal{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
 #championArena.gladiatorView .gladiatorHazard,#championArena.gladiatorView .gladiatorHazard::before{animation:none;transition:none}
}