#opening{position:fixed;inset:0;z-index:20;display:grid;place-content:center;text-align:center;padding:24px;background:linear-gradient(#04060988,#040609ee),url('arena.png') center/cover;isolation:isolate}
#opening .opening-title{font:clamp(60px,13vw,164px)/.88 var(--display);letter-spacing:-.03em;margin:0;text-shadow:0 5px 30px #000;animation:title-reveal 900ms ease-out both}
#opening .opening-title b{display:block;color:var(--gold);font-weight:inherit}
#opening p{font:14px/1.6 Arial;letter-spacing:5px;color:#e4d4bd;margin:28px 0}
#opening button{min-width:240px;margin:auto}
#opening .opening-rule{height:2px;background:var(--gold);width:100%;margin:30px 0;transform-origin:left;animation:rule-reveal 1s ease-out both}
#faceoff{position:absolute;inset:0;z-index:7;overflow:hidden;background:linear-gradient(120deg,#070d17e8,#17100be8);display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;padding:5vh max(6vw,env(safe-area-inset-left));gap:12px}
.versus-fighter{height:75%;min-height:170px;max-height:550px;position:relative;background:#fff;overflow:hidden;border-bottom:4px solid var(--gold);animation:face-in 380ms ease-out both}
.versus-fighter:last-of-type{animation-name:face-in-right}
.versus-fighter img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.versus-caption{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#06090df5 35%);padding:50px 18px 18px}
.versus-caption strong{font:clamp(20px,4vw,52px)/1.05 var(--display);display:block;color:#fff;overflow-wrap:anywhere}
.versus-caption small{display:block;font-size:12px;letter-spacing:2px;color:var(--gold);margin-top:8px}
.versus-mark{font:clamp(40px,8vw,92px)/1 var(--display);color:var(--gold);text-align:center;text-shadow:0 0 35px #dfb27150}
#versusStage{position:absolute;top:5%;left:0;right:0;text-align:center;letter-spacing:4px;font-size:12px;color:#eadac3}
#skipIntro{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:14px;padding:10px 20px;min-height:44px;background:#080b10bb}
#game[data-phase="intro"] .controls,#game[data-phase="intro"] .quick-specials,#game[data-phase="intro"] #controlLegend,#game[data-phase="fatality"] .controls,#game[data-phase="fatality"] .quick-specials,#game[data-phase="fatality"] #controlLegend,#game[data-phase="complete"] .controls,#game[data-phase="complete"] .quick-specials{opacity:0;pointer-events:none}
#game[data-phase="fatality"] #hud{opacity:.45;transition:opacity 200ms}
#game[data-phase="fatality"] #announcement{top:15%;color:#edc385;font-size:clamp(30px,6vw,78px)}
#game[data-phase="fatality"] #subAnnouncement{top:29%;font-weight:bold}
#announcement[data-cue]:not(:empty){animation:combat-cue 230ms ease-out both}
.health-track{position:relative;overflow:hidden}
.health-track .damage-trail{position:absolute;inset:0 auto 0 0;width:100%;background:#fff3bd;transition:width 550ms 160ms ease-out;opacity:.7}
.health-track>div:not(.damage-trail){position:relative;z-index:1}
#hitCallout{position:absolute;top:43%;left:50%;transform:translateX(-50%);font:clamp(14px,2vw,22px) var(--display);letter-spacing:2px;color:#fff0d8;text-shadow:0 2px 6px #000;pointer-events:none;white-space:nowrap}
#hitCallout:empty{display:none}
.rung img{width:48px;height:60px;object-fit:cover;object-position:center 12%;background:#fff;flex-shrink:0}
.rung.current{box-shadow:inset 3px 0 var(--gold)}
.result-portrait{float:right;width:32%;max-width:150px;max-height:180px;object-fit:cover;object-position:center 14%;margin:0 0 16px 18px;border-bottom:3px solid var(--gold);background:#fff}
#modalBody:after{content:'';display:block;clear:both}
@keyframes title-reveal{from{opacity:0;transform:scale(1.07);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes rule-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes face-in{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes face-in-right{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes combat-cue{from{opacity:0;translate:0 -8px;scale:1.12}to{opacity:1;translate:0 0;scale:1}}
@media(max-height:520px) and (orientation:landscape){#faceoff{padding:3vh 12vw;grid-template-columns:1fr 66px 1fr}.versus-fighter{height:77%;min-height:130px}.versus-caption{padding:35px 12px 12px}.versus-caption strong{font-size:28px}.versus-caption small{font-size:11px}#versusStage{top:2%;font-size:11px}.rung img{width:34px;height:44px}.rung{gap:8px}}
@media(orientation:portrait){#faceoff{grid-template-columns:1fr 40px 1fr;padding:6vh 16px;gap:6px}.versus-fighter{height:49%;min-height:190px}.versus-caption{padding:40px 8px 14px}.versus-caption strong{font-size:22px}.versus-caption small{font-size:10px;letter-spacing:.5px}.versus-mark{font-size:40px}.rung img{width:32px;height:46px}.rung{gap:6px}.rung strong{font-size:16px}#hitCallout{top:47%;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.health-track .damage-trail{transition:none}}