:root{color-scheme:dark;--ink:#101716;--panel:#17201e;--line:#34413d;--cream:#f3f2e5;--muted:#b1beb6;--lime:#d5f776;--orange:#ffae7c;--mint:#96f0cf}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--cream);font:15px/1.4 "Segoe UI",Sylfaen,Arial,sans-serif}
main{width:min(1360px,100%);margin:auto;padding:0 clamp(14px,3vw,46px) 24px}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
button:disabled{cursor:default}
.mast,.heading,.audio-tools,.metrics,.wordmark,.brief{display:flex;align-items:center}
.mast,.heading,.brief{justify-content:space-between;gap:16px}
.mast{height:59px;border-bottom:1px solid var(--line)}
.wordmark{gap:6px;font:700 16px/1 Arial,sans-serif;letter-spacing:.06em}
.wordmark strong{font-weight:900}.mark{background:var(--lime);color:#13211a;width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;gap:2px;margin-right:6px;transform:skew(-9deg)}
.mark b{background:currentColor;width:3px;height:9px}.mark b:nth-child(2){height:17px}.mark b:nth-child(3){height:13px}.mark b:nth-child(4){height:6px}
.audio-tools{gap:18px}.bpm,.metrics b,.round,kbd,.lane{font-family:Consolas,monospace}.bpm{font-size:12px;letter-spacing:.06em;color:var(--muted)}
#mute,#listen{border:1px solid var(--line);border-radius:20px;padding:6px 11px;background:transparent;color:var(--cream);font-size:12px;white-space:nowrap}
#listen{color:var(--lime)}#listen[aria-pressed=true]{border-color:var(--lime)}
.audio-tools label{color:var(--muted);font-size:12px}
#music-track{background:#1c2623;color:var(--cream);font:inherit;font-size:13px;border:1px solid var(--line);border-radius:6px;padding:5px}
.online-link{color:var(--lime);font-size:13px;text-decoration:none;padding:6px 9px;white-space:nowrap}
.net-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:10px 0}
.net-controls label{display:grid;gap:3px;color:var(--muted);font-size:12px}
.net-controls input,.net-controls select,.net-controls button{font:inherit;color:var(--cream);border:1px solid var(--line);border-radius:6px;background:#202c28;padding:7px 10px}
.net-controls button{color:var(--lime);font-weight:700}.net-controls input{max-width:15ch}
.net-controls [hidden],.network [hidden]{display:none!important}.network .arena{position:relative;top:auto}
.network .fighter:disabled{opacity:1}.network #judgment{white-space:normal}
@media(max-width:740px){.mast:has(#music-track){height:auto;flex-wrap:wrap;padding:8px 0;gap:8px}.mast .audio-tools{gap:7px;flex-wrap:wrap}}
@media(max-width:530px){.mast:has(#listen){height:auto;min-height:46px;padding:7px 0;flex-wrap:wrap;gap:6px 14px}.mast .audio-tools{flex-wrap:wrap;gap:6px}}
.heading{padding:15px 0}.heading h1{font-size:clamp(25px,3.25vw,47px);letter-spacing:-.045em;line-height:1.16;margin:0;font-weight:750}
.metrics{gap:22px}.metrics div{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:8px}.metrics small{color:var(--muted);font-size:12px}.metrics b{font-size:23px;color:var(--lime)}
.arena{position:relative;isolation:isolate;overflow:hidden;height:clamp(240px,46vh,510px);background:#1c2524;border:1px solid var(--line);border-radius:14px 14px 0 0}
#stage,#stage canvas{display:block;width:100%;height:100%}
.status,.round,.tag{position:absolute;pointer-events:none;background:rgba(16,23,22,.89);border:1px solid #ffffff37;border-radius:20px;white-space:nowrap}
.status,.round{top:13px;padding:6px 12px;font-size:12px}.status{left:14px;display:flex;align-items:center;gap:7px}.status i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.round{right:14px}.tag{font-size:11px;padding:3px 11px;transform:translate(-50%,0)}.tag.rival{color:var(--orange)}.tag.player{color:var(--mint)}
#count,#judgment{position:absolute;left:50%;transform:translateX(-50%);text-shadow:0 2px 12px #000}
#count{top:21%;font:900 clamp(40px,7vw,88px)/1 Arial;color:var(--cream)}
#judgment{bottom:9%;font:800 clamp(18px,2.8vw,35px) Arial;color:var(--lime);padding:2px 8px}#judgment[data-grade="Miss"]{color:#ffad96}#judgment[data-grade="Good"]{color:var(--mint)}
.desk{border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:16px clamp(12px,2vw,28px) 18px;background:var(--panel)}
.brief h2{margin:0;font-size:clamp(16px,1.6vw,23px);letter-spacing:-.025em}.brief p{margin:3px 0 0;color:var(--muted);font-size:13px}
#start{flex:none;background:var(--lime);color:#16220e;border:0;border-radius:7px;font-weight:750;padding:10px 19px}
#start:disabled{opacity:.5}#start[hidden]{display:none}
.lane{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:15px 0 7px}
.lane span{position:relative;text-align:center;padding:5px;border-radius:4px;border:1px solid var(--line);color:#a2afa7;font-weight:bold;font-size:13px}
.lane span.target{border-bottom:3px solid var(--lime);padding-bottom:3px;color:var(--cream)}.lane span.active{background:var(--lime);color:#172215;border-color:var(--lime)}
.cues{display:flex;flex-wrap:wrap;gap:7px;min-height:21px;align-items:center;font-size:12px;color:var(--muted)}.cues b{color:var(--cream);font-weight:650}.cues span+span:before{content:"→";margin-right:7px;color:var(--muted)}
.pads{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px}.pads button{display:flex;align-items:center;gap:9px;background:#202c28;color:var(--cream);border:1px solid #405048;border-radius:7px;min-height:46px;padding:6px 12px;font:700 clamp(13px,1.25vw,18px)/1.1 Arial,sans-serif}.pads button:disabled{opacity:.62}
kbd{display:inline-grid;place-items:center;min-width:24px;height:25px;border:1px solid #66776e;border-radius:4px;font-size:13px}.pads button.next{border-color:var(--lime)}.pads button:active{background:#475f42}
[hidden]{display:none!important}
@media(max-width:650px){main{padding-bottom:12px}.mast{height:46px}.heading{padding:11px 0}.wordmark{font-size:13px}.metrics{gap:12px}.metrics div{display:flex;flex-direction:column;gap:0}.metrics b{font-size:17px}.metrics small{font-size:10px}.audio-tools{gap:8px}.bpm{font-size:10px}.arena{height:clamp(210px,33svh,330px)}.status,.round{font-size:10px;top:7px;padding:4px 8px}.status{left:7px}.round{right:7px}.brief{align-items:flex-start;gap:8px}.brief p{font-size:12px}#start{font-size:13px;padding:9px}.desk{padding:12px 9px}.pads{grid-template-columns:repeat(3,1fr)}.pads button{padding:5px 6px;gap:5px;min-height:42px;font-size:13px}.lane{margin-top:10px}.tag{font-size:10px}.cues{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 10px;pointer-events:auto}
.tag span{opacity:.88}
.tag select{font:700 12px/1.2 "Segoe UI",Sylfaen,Arial,sans-serif;background:transparent;color:inherit;border:0;border-left:1px solid #ffffff45;padding:3px 0 3px 4px;cursor:pointer}
.tag option{background:#17201e;color:#f5f3e7}
.tag select:focus-visible{outline:2px solid var(--lime);border-radius:3px}
.tag select:disabled{appearance:none;opacity:1;cursor:default;padding-right:3px}
@media(max-width:650px){.tag{gap:3px;padding:3px 4px 3px 6px}.tag select{font-size:11px}}
.options,.preview-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
.options{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.options label,.preview-tools label{display:flex;align-items:center;gap:6px}
.options select,.preview-tools select,#zoom{font:inherit;background:#222e29;color:var(--cream);border:1px solid #46574e;border-radius:6px;padding:5px 8px}
#zoom[aria-pressed=true],.pads button.previewing{border-color:var(--lime);color:var(--lime)}
.preview-tools{margin-top:12px}.pads{grid-template-columns:repeat(auto-fit,minmax(126px,1fr));margin-top:8px}
.arena.close-view{height:clamp(290px,58vh,620px)}
@media(max-width:650px){.pads{grid-template-columns:repeat(3,minmax(0,1fr))}.arena{position:sticky;top:0;z-index:2}.arena.close-view{height:clamp(265px,43svh,410px)}}

/* The matchup strip is also the local character-select entry point. */
.heading{padding:12px 0}.heading h1{font-size:clamp(25px,2.9vw,41px)}
.matchup{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:3px;margin:0 0 5px}
.fighter{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;min-height:54px;border:0;color:var(--cream);text-align:left;padding:0 15px 0 0;background:#24322c}
.fighter.rival{background:linear-gradient(110deg,#574038,#2b2925);border-left:3px solid var(--orange)}
.fighter.player{background:linear-gradient(110deg,#28342a,#405138);border-right:3px solid var(--lime);flex-direction:row-reverse;padding:0 0 0 15px;text-align:right}
.fighter img{display:block;align-self:stretch;width:54px;height:56px;object-fit:cover;object-position:50% 26%}
.fighter small{display:block;font-size:10px;color:#e0d8c7}.fighter strong{display:block;font-size:17px;line-height:1.2;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fighter .edit-mark{margin-left:auto;font-size:15px}.fighter.player .edit-mark{margin:0 auto 0 0}.fighter:disabled .edit-mark{visibility:hidden}
.versus{display:grid;place-items:center;min-width:48px;color:var(--lime);font:italic 900 22px Arial;background:#222b25}
.arena{border-radius:7px 7px 0 0}.mode-switch,.role-switch{display:inline-flex;align-items:center;padding:3px;background:#101814;border-radius:7px;border:1px solid var(--line)}
.mode-switch button,.role-switch button{border:0;border-radius:4px;padding:7px 11px;background:transparent;color:var(--muted);font-size:12px}
.mode-switch button[aria-pressed=true],.role-switch button[aria-pressed=true]{background:#3c4b35;color:#e6f6cb}
.options{flex-wrap:wrap}.options #zoom{margin-left:auto}.combo-line{display:flex;align-items:center;gap:10px;border-left:3px solid var(--lime);padding:6px 10px;background:#202b23;min-height:36px;border-radius:3px;font-size:13px}
.combo-line>span:first-child{font-size:11px;color:var(--muted)}#combo-history{font-family:Arial,sans-serif;color:var(--cream)}#pending{color:var(--lime);font-size:11px}#versus-score{margin-left:auto;color:var(--orange);font-size:12px}
.pads button{transition:background-color .08s,border-color .08s;min-height:42px}.pads button.previewing{background:#374635;box-shadow:inset 0 -2px var(--lime)}
.intro{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:1fr 1fr;background:#131a18;isolation:isolate;overflow:hidden}
.intro-side{position:relative;overflow:hidden}.intro-side.left{background:linear-gradient(117deg,#604740,#35271f)}.intro-side.right{background:linear-gradient(64deg,#2a392d,#748650)}
.intro-side img{position:absolute;bottom:-9%;height:106%;width:100%;object-fit:contain;filter:drop-shadow(0 14px 15px #0005);animation:face-in .42s ease-out}
.intro-side.right img{transform:scaleX(-1);animation:face-right .42s ease-out}
.intro-side strong{position:absolute;bottom:12%;left:8%;font-size:clamp(18px,3vw,44px);color:#fff9de;text-shadow:1px 2px 12px #111;max-width:86%;overflow-wrap:anywhere}
.intro-side.right strong{left:auto;right:8%}.intro-vs{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-6deg);font:italic 900 clamp(42px,8vw,100px)/1 Arial;color:#d7f985;text-shadow:4px 5px #17231e}
#skip-intro{position:absolute;right:12px;bottom:9px;border:1px solid #fff5;border-radius:5px;color:#fff;background:#111a;padding:5px 10px;font-size:12px}
@keyframes face-in{from{opacity:.1;transform:translateX(-9%)}to{opacity:1;transform:translateX(0)}}
@keyframes face-right{from{opacity:.1;transform:translateX(9%) scaleX(-1)}to{opacity:1;transform:translateX(0) scaleX(-1)}}
#cast-dialog{width:min(760px,94vw);max-height:90svh;overflow:auto;color:var(--cream);background:#19221e;border:1px solid #66785c;border-radius:13px;padding:clamp(14px,3vw,27px);box-shadow:0 15px 90px #0009}
#cast-dialog::backdrop{background:#09110eaf;backdrop-filter:blur(5px)}
.cast-head,.cast-footer,.cast-fields{display:flex;align-items:center;gap:12px}.cast-head{justify-content:space-between}.cast-head h2{margin:0;font-size:clamp(20px,2.4vw,30px)}
.cast-head button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--cream);font-size:22px;line-height:1}
.cast-fields{margin:15px 0;flex-wrap:wrap}.cast-fields label{margin-left:auto;color:var(--muted);font-size:12px}
.cast-fields input{max-width:42%;min-width:0;background:#101713;color:var(--cream);border:1px solid #556451;border-radius:5px;font:inherit;padding:6px 9px}
.cast-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cast-grid button{position:relative;overflow:hidden;aspect-ratio:4/4.7;border:1px solid #445147;border-radius:7px;padding:0;background:linear-gradient(160deg,color-mix(in srgb,var(--look) 72%,#34382f),#242b27);color:var(--cream)}
.cast-grid img{width:100%;height:100%;object-fit:cover;display:block}.cast-grid strong{position:absolute;inset:auto 0 0;text-align:left;padding:15px 8px 5px;background:linear-gradient(transparent,#101410e8);font-size:13px}
.cast-grid button[aria-pressed=true]{border:2px solid var(--lime)}.cast-grid button[aria-pressed=true]::after{content:'✓';position:absolute;right:4px;top:3px;border-radius:50%;background:var(--lime);color:#15200e;width:19px;font:700 14px/19px Arial}
.cast-footer{justify-content:flex-end;margin-top:16px}.confirm{background:var(--lime);color:#18240e;font-weight:bold;border:0;border-radius:6px;padding:8px 21px}
.is-live .preview-tools,.is-live .mode-switch{display:none}
@media(max-width:650px){.matchup{gap:2px}.fighter{min-height:40px;gap:5px;padding-right:5px}.fighter.player{padding-left:5px}.fighter img{width:35px;height:40px}.fighter strong{font-size:13px}.fighter small{font-size:9px}.versus{min-width:28px;font-size:16px}.combo-line{gap:5px;font-size:11px;flex-wrap:wrap}#pending,#versus-score{font-size:10px}.cast-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.cast-grid strong{font-size:10px;padding:7px 3px 3px}.cast-fields{gap:4px}.cast-fields label{font-size:10px}.cast-fields input{font-size:13px;width:36%}.role-switch button,.mode-switch button{padding:6px 7px;font-size:11px}.is-live .options{margin:0;padding:0;border:0}.is-live .brief{margin-top:5px}.is-live .brief p{font-size:11px}.is-live .pads{gap:4px}.is-live .pads button{min-height:42px}.is-live .combo-line{min-height:27px}}
@media(prefers-reduced-motion:reduce){.intro-side img,.intro-side.right img{animation:none}.pads button{transition:none}}
.is-live .combo-line{height:36px;flex-wrap:nowrap}
#combo-history,#pending{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#versus-score{flex:none}
.tag select{display:none}.tag{padding:3px 10px}
.fighter .edit-mark{color:#e4e6d8;font-size:11px;white-space:nowrap}.fighter.scored .edit-mark{display:none}
.fighter-points{font:700 18px/1 Consolas,monospace;margin-left:auto;color:var(--orange)}
.fighter.player .fighter-points{margin:0 auto 0 0;color:var(--lime)}
.fighter.scored::after{content:'';position:absolute;bottom:0;left:0;width:var(--share,50%);height:3px;background:var(--orange);transition:width .16s ease-out}
.fighter.player.scored::after{left:auto;right:0;background:var(--lime)}
#load-art{position:absolute;inset:0;background:linear-gradient(110deg,#10181638,#17201812),url('./studio/thhf-dance-battle.svg') center/contain no-repeat,#202d29}
#load-art i{position:absolute;bottom:0;left:0;width:33%;height:2px;background:var(--lime);animation:load-pulse 1.6s ease-in-out infinite alternate}
@keyframes load-pulse{to{transform:translateX(200%)}}
@media(max-width:650px){.fighter .edit-mark{font-size:9px}.fighter-points{font-size:14px}}
@media(prefers-reduced-motion:reduce){#load-art i,.fighter.scored::after{animation:none;transition:none}}