:root{font-family:"Malgun Gothic",sans-serif;color:#3c3b4b;background:#faf8ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:76px;border-bottom:1px solid #e4e1d6;display:flex;align-items:center;gap:24px;padding:0 5vw;background:#fffdf7}header a{color:#3c3b4b;text-decoration:none;font-weight:900;letter-spacing:2px}header small{letter-spacing:0;font-weight:500;margin-left:12px}header span{margin-left:auto;font-size:11px;letter-spacing:2px;color:#7e807d}button,select{font:inherit;border:1px solid #d9d9cf;border-radius:14px;background:#fffdf8;color:#3c3b4b;padding:12px 20px;cursor:pointer}button:hover{transform:translateY(-2px);border-color:#78a797}button:focus-visible{outline:3px solid #487cbd;outline-offset:3px}.primary{background:#345d51;color:white;border-color:#345d51}main{max-width:1060px;padding:45px 30px;margin:auto}.eyebrow{font-size:13px;color:#648b79;letter-spacing:3px}h1{font-size:42px;margin:14px 0;letter-spacing:-2px}.intro{color:#858579}nav{display:flex;gap:10px;margin:28px 0}section{background:#fffdf8;border:1px solid #e4e1d6;border-radius:24px;padding:26px;box-shadow:0 8px 24px #4f554908}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}h2{font-size:20px;margin:0}.section-title span{font-size:12px;color:#8b8b80}#roster{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.character{padding:12px 8px;background:var(--wash);border:2px solid transparent;position:relative}.character.selected{border-color:#375e50;box-shadow:0 0 0 3px #375e5017}.character canvas{display:block;width:100%;max-width:150px;margin:auto}.character b{display:block;margin:5px}.character small{color:#777;font-size:10px;letter-spacing:1px}.match-settings{display:flex;justify-content:space-between;align-items:center;margin-top:24px}select{margin-left:12px;padding:8px 14px}.scoreboard{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.scoreboard>div{width:30%}.scoreboard>div:last-child{text-align:right}.scoreboard strong{font-size:34px;color:#375e50}.meter{font-size:11px;color:#869381;white-space:nowrap;margin-top:5px}.meter.ready{color:#c46b35;font-weight:bold}#court{display:block;width:100%;border-radius:16px;background:#ddf0ed;outline:none}.arena-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px;font-size:13px}#result{text-align:center;padding:26px}#result button{margin-top:18px}aside{margin-top:24px;font-size:12px;line-height:1.8;color:#87867d}aside b{color:#4b655b}footer{padding-top:26px;text-align:center;font-size:10px;color:#aaa69a;letter-spacing:1px}[hidden]{display:none!important}#ending{text-align:center;overflow:hidden;background:linear-gradient(#dceef5,#fff6dd)}.credits{height:300px;overflow:hidden;margin:24px 0}.credits>div{animation:roll 35s linear forwards}.credits p{line-height:2;margin:40px 0}@keyframes roll{from{transform:translateY(200px)}to{transform:translateY(-850px)}}@media(max-width:640px){header{gap:8px;padding:0 16px}header span,header small{display:none}header button{margin-left:auto;padding:8px}main{padding:25px 14px}h1{font-size:30px}nav{flex-wrap:wrap}nav button{font-size:12px;padding:10px}section{padding:14px}#roster{grid-template-columns:repeat(2,1fr)}.section-title{align-items:start;gap:8px}.section-title span{max-width:80px}h2{font-size:16px}.meter{font-size:9px}}

#stage-picker{font-size:12px}#selection-note{font-size:12px;color:#7b877c}.character small{display:block;min-height:25px;line-height:1.5}#achievements{margin-top:24px;background:#fffdf7;border:1px solid #e4e1d6;border-radius:20px;padding:22px}summary{cursor:pointer;font-weight:bold}#achievements>p{font-size:12px;color:#858579;line-height:1.8}#goals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.goal{padding:16px;border:1px solid #e4e1d6;border-radius:12px}.goal b{font-size:13px}.goal p,.goal small{font-size:11px;color:#87867d}.goal progress{width:70%;height:8px;accent-color:#50886b;margin-right:10px}.goal.complete{background:#edf5eb}.goal.complete b{color:#36775a}#touch{display:flex;gap:6px;margin:14px 0;justify-content:center;touch-action:none}#touch button{padding:12px;user-select:none}#live{font-size:13px;color:#36775a}@media(max-width:640px){#goals{grid-template-columns:1fr}#touch button{font-size:11px;padding:12px 8px}.section-title span{max-width:110px}}
#network{margin-bottom:24px}#network p{font-size:12px;line-height:1.8;color:#7d8079}#network label{font-size:12px}#network textarea{display:block;width:100%;margin:8px 0 18px;border:1px solid #d9d9cf;border-radius:10px;padding:12px;font-size:11px;resize:vertical}.net-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.net-actions button{font-size:12px}
.effect-controls{flex-wrap:wrap;align-items:center}.effect-controls button{font-size:12px;padding:12px 15px}.effect-controls label{font-size:12px}.effect-controls select{max-width:150px}header{gap:12px}header button{font-size:12px;padding:10px 12px}
/* Menu layout uses existing raster world/character art. */
body.title-open{background:#c7e6df}body.title-open>header,body.title-open>#game-main{display:none}
#title-screen{position:relative;width:min(1120px,100%);aspect-ratio:864/608;min-height:560px;margin:3vh auto;padding:0;overflow:hidden;border:8px solid #fff9e9;border-radius:28px;box-shadow:0 22px 70px #395c5633;background:#d8ece1;text-align:center}
#title-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.title-copy{position:absolute;top:7%;left:0;right:0;color:#3e5f62;text-shadow:0 3px #fff9e9,2px 0 #fff9e9,-2px 0 #fff9e9}.title-copy p{font-size:15px;letter-spacing:6px;font-weight:bold}.title-copy h1{font-size:clamp(48px,7vw,88px);line-height:1.02;letter-spacing:-5px;margin:12px 0}.title-copy h1 span{display:block;color:#d88070;font-size:1.08em;letter-spacing:18px;padding-left:18px}.title-sub{margin-top:16px;font-weight:bold;font-size:15px}
.title-actions{position:absolute;left:0;right:0;bottom:5%}.title-actions button{background:#fff9e9;color:#35545b;border:3px solid #547a75;border-radius:40px;box-shadow:0 5px #547a75;padding:13px 40px;font-weight:900;font-size:20px}.title-actions button span{font-size:10px;margin-left:20px;letter-spacing:1px}.title-actions p{font-size:11px;color:#345952;font-weight:bold;text-shadow:0 1px #fff}.title-credit{position:absolute;bottom:9px;right:15px;color:#4f6c65;font-size:9px}
#selection{background:radial-gradient(ellipse at 50% 0,#3c536d,#202d44 70%);color:#fff9e9;border:3px solid #ead6a5;box-shadow:0 8px 0 #263448,0 20px 40px #26344820;overflow:hidden}
#selection .section-title{margin-bottom:16px}#selection .section-title span{color:#c4cdd7}#selection h2{font-size:19px}.selection-banner{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #718099;border-bottom:1px solid #718099;padding:10px 0;color:#f9d880;letter-spacing:3px;font-size:13px;font-weight:900}.selection-banner b{color:#9edbff;letter-spacing:1px}#selection[data-turn="2"] .selection-banner b{color:#ffb4b5}
.versus-portraits{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;margin:12px 0 18px;gap:12px}.fighter{position:relative;min-width:0;text-align:center;background:linear-gradient(135deg,#586e8666,#1b293d66);border-bottom:3px solid #8cc6ef;border-radius:8px 8px 0 0;padding-bottom:12px}.fighter-two{border-color:#e89194;background:linear-gradient(225deg,#86646f66,#1b293d66)}.fighter canvas{display:block;width:100%;height:235px;object-fit:contain}.fighter strong{display:block;font-size:24px;letter-spacing:-1px}.fighter small{display:block;color:#c1ced9;font-size:10px;margin-top:5px;min-height:15px}.player-tag{position:absolute;top:10px;left:12px;color:#9edbff;font-weight:900;font-size:20px;font-style:italic}.fighter-two .player-tag{left:auto;right:12px;color:#ffb4b5}.versus-center{text-align:center}.versus-center>b{font-size:56px;font-style:italic;color:#f6ce78;text-shadow:3px 4px #9a5147;letter-spacing:-6px}.versus-center>span{display:block;font-size:10px;line-height:1.8;color:#d4dce5;margin-top:12px}
#selection #roster{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}#selection .character{border-radius:5px;border:2px solid #738095;padding:0 0 7px;color:#f5f2e9;background:linear-gradient(#6b7a8c,#354358);min-width:0;transition:border-color .12s,box-shadow .12s}#selection .character canvas{height:auto;width:100%;max-width:120px;aspect-ratio:1.2;object-fit:contain}#selection .character b{font-size:10px;white-space:nowrap;margin:0;letter-spacing:-.5px}#selection .character small{display:none}#selection .character[aria-disabled="true"]{background:#273346;color:#a6aeb9}#selection .character.selected{border-color:#8bdaff;box-shadow:0 0 0 2px #8bdaff,0 0 15px #72caff77;z-index:1}#selection[data-turn="2"] .character.selected{border-color:#ffaaa9;box-shadow:0 0 0 2px #ffaaa9,0 0 15px #ffaaa955}.cursor-tag{position:absolute;top:2px;left:3px;font-size:10px;font-weight:900;color:#fff;background:#2d5686;padding:2px 4px;border-radius:2px}#selection[data-turn="2"] .cursor-tag{background:#8e4653}#selection .character:focus-visible{outline:3px solid #ffe5a0;outline-offset:2px}#selection #selection-note{min-height:36px;background:#15223780;padding:10px 14px;border-left:3px solid #f6ce78;color:#f5dfaa;line-height:1.6;margin:12px 0;font-size:12px}#selection #stage-picker{color:#d0dae5}#selection select{background:#24364e;color:#fff4d7;border-color:#66758c;border-radius:6px}#selection select:disabled{opacity:.65}.selection-keys{font-size:10px;color:#aebdcd;margin:12px 0}.match-settings{gap:12px}#selection .match-settings{border-top:1px solid #718099;padding-top:18px;margin-top:16px;font-size:12px}#selection #start{background:#f1cc7e;color:#29364a;border:0;border-radius:7px;font-weight:900;padding:14px 22px}#selection #start:hover{background:#ffe3a7}
@media(max-width:640px){#title-screen{margin:0;border-radius:0;border-width:0;min-height:650px;height:100svh;max-height:900px}.title-copy{top:12%}.title-copy h1{font-size:65px}.title-copy p{letter-spacing:3px;font-size:12px}.title-actions{bottom:9%}.title-actions button{padding:13px 30px}.title-sub{font-size:12px}#selection h2{font-size:14px}#selection .section-title span{font-size:9px}.selection-banner{font-size:10px;letter-spacing:1px}.versus-portraits{grid-template-columns:1fr 58px 1fr;gap:4px}.fighter canvas{height:175px}.fighter strong{font-size:17px}.fighter small{font-size:8px}.versus-center>b{font-size:38px}.versus-center>span{font-size:8px}.player-tag{font-size:15px}#selection #roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#selection .character b{font-size:10px}#selection .match-settings{align-items:stretch;flex-direction:column}.selection-keys{line-height:1.8}#selection .match-settings select{margin-left:8px}}
#game-main{padding-top:18px}#game-main>.eyebrow,#game-main>h1,#game-main>.intro{display:none}#game-main>nav{margin:0 0 18px;flex-wrap:wrap}#game-main #touch{display:none}#game-main:has(#arena:not([hidden])) #touch{display:flex}#selection .fighter canvas{height:200px}@media(min-width:641px){#selection .character canvas{max-width:92px}#selection .section-title{margin-bottom:10px}}
@media(min-width:641px){#title-screen{width:min(1120px,calc((100svh - 40px)*1.421),100%);min-height:0;margin:20px auto}.title-copy h1{font-size:clamp(48px,10vh,88px)}}
@media(min-width:641px){.title-actions{bottom:1.5%}.title-actions button{padding:10px 30px;font-size:18px}}
@font-face{font-family:PocketKO;src:url('assets/fonts/pocket-ko.ttf') format('truetype');font-display:swap;font-weight:100 900}
@font-face{font-family:PocketRound;src:url('assets/fonts/pocket-round.otf') format('opentype');font-display:swap;font-weight:100 900}
:root{font-family:PocketKO,PocketRound,'Malgun Gothic',sans-serif}button,select,textarea{font-family:inherit}
#title-screen{padding-bottom:92px;background:#fff9e9;min-height:0}#title-art{height:calc(100% - 92px);object-fit:fill}.title-copy{top:3%;height:43%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:none}.title-copy>p,.title-sub{display:none}.title-copy h1{margin:0;width:65%;height:100%;font-size:0;padding:0;letter-spacing:0}.title-copy h1 img{width:100%;height:100%;object-fit:contain}.title-actions{bottom:13px;height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.title-actions button{border-radius:8px;box-shadow:0 3px #658b7e;border:2px solid #658b7e;font-size:19px;padding:8px 40px;background:#f0f7e5}.title-actions p{margin:2px 0;font-size:10px}.title-credit{bottom:3px;font-size:8px}#title-screen{aspect-ratio:864/700}
.scoreboard{gap:14px;padding:10px 4px 20px;align-items:start}.scoreboard>div{width:34%;min-width:0}.scoreboard>div>b{font-family:PocketKO,sans-serif;display:block;font-size:26px;color:#335965;line-height:1.4;padding-bottom:9px;overflow-wrap:anywhere}.scoreboard>div:last-child>b{color:#ad626a}.scoreboard strong{font-family:PocketRound,PocketKO,sans-serif;font-size:64px;color:#f3a36f;white-space:nowrap;-webkit-text-stroke:1.5px #805a4e;text-shadow:0 4px #fff0ce;line-height:1.3;padding-top:4px;letter-spacing:3px}
.charge-meter{padding:10px;background:#233249;border:2px solid #61718a;border-radius:7px;color:#dceaf2;white-space:normal;min-height:88px;text-align:left!important}.charge-caption{display:flex;justify-content:space-between;align-items:center;letter-spacing:1px;font-size:10px}.charge-caption b{font-family:PocketRound,sans-serif;font-style:italic;color:var(--charge-color)}.charge-count{font-family:PocketRound,sans-serif;font-size:10px}.charge-track{height:18px;position:relative;background:#101c2b;border:1px solid #a8b6c5;margin-top:7px;overflow:hidden;transform:skewX(-9deg);isolation:isolate}.charge-fill{position:absolute;inset:0 auto 0 0;width:var(--charge);background:linear-gradient(0deg,#548ac6,var(--charge-color),#edfcff);transition:width .18s ease-out;box-shadow:0 0 10px var(--charge-color)}.charge-segments{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#14233399 calc(10% - 1px),#14233399 10%)}.charge-state{font-size:9px;letter-spacing:.3px;margin-top:7px;color:#d2dde7;min-height:14px}.charge-meter.ready{border-color:#f4cf71;box-shadow:0 0 12px #f2c77744}.charge-meter.ready .charge-fill{background:linear-gradient(0deg,#ec904e,#ffe08d,#fff9dc);animation:maximum-glow .75s ease-in-out infinite alternate}.charge-meter.ready .charge-state{color:#ffe39b;font-family:PocketRound,PocketKO,sans-serif;font-size:10px}.charge-meter.armed .charge-state{color:#ffb7a6}@keyframes maximum-glow{from{filter:brightness(1)}to{filter:brightness(1.45)}}
@media(max-width:640px){#title-screen{height:auto;min-height:0;max-height:none;width:100%;margin:0;aspect-ratio:864/800;border-radius:0;padding-bottom:92px}#title-art{height:calc(100% - 92px)}.title-copy{height:40%;top:1%}.title-copy h1{width:77%;font-size:0}.title-actions{bottom:13px}.title-actions button{padding:6px 30px;font-size:16px}.title-credit{display:none}.scoreboard{gap:6px;padding-bottom:14px}.scoreboard>div{width:35%}.scoreboard>div>b{font-size:18px;min-height:34px}.scoreboard strong{font-size:38px;letter-spacing:0;padding-top:8px}.charge-meter{padding:7px 5px;min-height:84px}.charge-caption{font-size:8px}.charge-count{font-size:8px}.charge-state{font-size:8px}.charge-meter.ready .charge-state{font-size:8px}.charge-track{height:14px}}
@media(prefers-reduced-motion:reduce){.charge-meter.ready .charge-fill{animation:none}}
#versus-context{white-space:pre-line;word-break:keep-all;overflow-wrap:normal}
.charge-segments{display:none}.charge-meter,.charge-track{border:0}.charge-meter.ready{border:0;box-shadow:none}.charge-track{border-radius:3px;transform:none}.scoreboard strong{padding-top:22px}@media(max-width:640px){.scoreboard strong{padding-top:24px}}
.title-actions{height:82px;bottom:7px;gap:3px}.title-actions .title-music{border:0;box-shadow:none;padding:2px 10px;background:transparent;font-size:11px;color:#47695c;border-radius:3px}.title-actions .title-music:hover{transform:none;text-decoration:underline}.title-credit{bottom:2px}
.charge-meter,.charge-meter.ready{background:transparent;border:0;box-shadow:none;padding:5px 0;min-height:72px;color:#786c5c}.charge-track{background:#e8e5d9;border:0;box-shadow:none}.charge-caption b{color:#578c97}.scoreboard>div:last-child .charge-caption b{color:#b47b83}.charge-count{color:#8b7b67}.charge-state{color:#8a8d7b}.charge-meter.ready .charge-state{color:#c18b43}.charge-meter.armed .charge-state{color:#ba745d}@media(max-width:640px){.charge-meter{padding:5px 0;min-height:72px}}
#game-main:has(#arena:not([hidden])) #touch{display:none}@media(any-pointer:coarse){#game-main:has(#arena:not([hidden])) #touch{display:flex}}

.language-picker{position:absolute;top:16px;right:18px;z-index:10;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:12px;background:#fffdf3ed;color:#65594e;box-shadow:0 2px 8px #79624a22}.language-picker select{font:inherit;font-size:14px;color:inherit;background:transparent;border:0;padding:4px;cursor:pointer;min-width:90px}.language-picker:focus-within{outline:3px solid #e8ba7d}.english-title{display:none;font-family:"PocketKO",sans-serif;color:#fff9ea;font-size:clamp(30px,6vw,58px);line-height:1.02;text-shadow:2px 2px #966d4b,-2px -2px #966d4b,2px -2px #966d4b,-2px 2px #966d4b}.english-title>span{display:block;color:#f8ce80;letter-spacing:.10em;font-size:.63em;margin-top:7px}html[lang=en] #title-logo{display:none}html[lang=en] .english-title{display:block}html[lang=en] .character b{font-size:14px}html[lang=en] .character small{font-size:10px}html[lang=en] .fighter strong{font-size:clamp(16px,2.5vw,26px)}

#title-logo-en{display:none}html[lang=en] #title-logo-en{display:block}html[lang=en] #title-logo{display:none}

/* One fixed row for both names, independently fitted to each side. */
.scoreboard>div{flex:1 1 0;width:0;min-width:0}.scoreboard>strong{flex:0 0 auto}.scoreboard>div>b{--name-font-max:26;box-sizing:border-box;height:46px;min-height:46px;max-height:46px;line-height:36px;padding:0 0 10px;white-space:nowrap;overflow-wrap:normal;word-break:keep-all;overflow:hidden;font-size:26px}.scoreboard>div>.meter{margin-top:5px}@media(max-width:640px){.scoreboard>div>b{--name-font-max:18;height:36px;min-height:36px;max-height:36px;line-height:26px;font-size:18px}}

/* Player-facing game shell. Development previews have no entry points here. */
.game-header{height:68px;max-width:1060px;margin:auto;padding:0 30px;border:0;background:transparent;gap:18px}.game-brand{font-family:PocketRound,PocketKO,sans-serif;font-size:19px;letter-spacing:1px;color:#456958}.game-header .header-home{font-size:13px;padding:7px 12px;background:transparent;border-color:transparent}.audio-settings{display:flex;gap:7px;margin-left:auto}.audio-settings button{font-size:12px;padding:7px 12px;background:#fffdf5;border:1px solid #e4e4d7;border-radius:10px}#game-main{padding-top:6px}#game-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;margin:0 0 20px;background:#e9eee3;border:1px solid #dce5d7;border-radius:17px}#game-nav .mode-button{padding:13px 10px;border:0;background:transparent;border-radius:11px;font-size:17px;color:#708476;box-shadow:none}#game-nav .mode-button.active{background:#fffdf5;color:#365f4a;box-shadow:0 2px 6px #52644a16}#game-nav .mode-button:hover{transform:none;background:#f5f8ed}.arena-foot{gap:12px}.match-actions{display:flex;gap:7px}.match-actions button{font-size:12px;padding:8px 13px;border-radius:10px}.match-actions #home{background:transparent;color:#72806c;border-color:#e2e5d7}#achievements,#controls-help{margin:16px 0 0;padding:0;border:1px solid #e1e5d8;border-radius:14px;background:#fffdf6}#achievements>summary,#controls-help>summary{padding:15px 18px;cursor:pointer;font-size:14px;color:#62795e}#achievements>*:not(summary),.controls-body{margin:0 18px 16px}.controls-body{font-size:13px;line-height:1.8;color:#7b806e}footer{padding:22px 0 14px;color:#93917e;font-size:11px;letter-spacing:0}#live:empty{display:none}
#title-screen{padding-bottom:122px;aspect-ratio:864/730}#title-art{height:calc(100% - 122px)}.title-actions{bottom:40px;height:78px}.title-credits{position:absolute;bottom:19px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#7f806e}.title-credits small{font-size:11px}.title-credits .title-credit{position:static;display:block;letter-spacing:0}.title-fan-note{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;color:#a39b88}
@media(max-width:640px){.game-header{height:60px;padding:0 14px;gap:6px}.game-brand{font-size:15px}.game-header .header-home{font-size:11px;padding:6px}.audio-settings{gap:4px}.audio-settings button{font-size:10px;padding:6px 7px}#game-nav{gap:4px;padding:4px;margin-bottom:14px}#game-nav .mode-button{font-size:14px;padding:12px 6px}.arena-foot{flex-wrap:wrap}.match-actions{margin-left:auto}.title-credits{left:12px;right:12px}.title-credits small{font-size:9px}.title-credits .title-credit{display:block}#title-screen{padding-bottom:122px;aspect-ratio:864/830}.title-actions{bottom:40px;height:78px}.controls-body{font-size:11px}}
@media(min-width:641px){#title-screen{width:min(1120px,calc((100svh - 40px)*1.18356),100%)}}
#ending .credits{height:300px}#ending .credits>div{animation:ending-staff-roll 45s linear forwards}@keyframes ending-staff-roll{from{transform:translateY(300px)}to{transform:translateY(calc(150px - 100%))}}
/* Four-digit rooms. */
.room-options{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0}.room-options>span{font-size:12px;color:#9b9b87}#room-join-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#room-code{width:124px;text-align:center;font:700 27px PocketRound,PocketKO,sans-serif;letter-spacing:7px;border:1px solid #c5d9c9;border-radius:12px;padding:11px;background:#fffdf6;color:#456957}#room-display{padding:20px;border-radius:18px;background:#f1f6e6;text-align:center;display:flex;flex-direction:column;gap:8px}#room-number{font:700 48px PocketRound,PocketKO,sans-serif;letter-spacing:10px;color:#3a7558}#room-display small,#room-display span,.online-help{font-size:12px;color:#7c8973}#net-status{min-height:28px;font-size:14px;color:#5d7c69}#net-start:disabled{opacity:.5;cursor:default}
/* Shared controller appearance; touch layout is defined in mobile-layout.css. */
#touch,#rotate-hint,#mobile-fullscreen{display:none}
.court-stage{display:contents}
.fullscreen-toggle{font-size:12px;padding:7px 12px;white-space:nowrap}
.title-fullscreen{position:absolute;top:12px;left:12px;z-index:5;background:#fffdf0eb;border-color:#95ad93}
.selection-banner{gap:10px;flex-wrap:wrap}
:root:fullscreen{overflow:auto;background:#faf8ee}
.touch-side{display:flex;gap:10px;align-items:center;justify-content:center}
.touch-side button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;min-width:56px;min-height:56px;font-size:20px;border:2px solid #b9cdb1;background:#f2f7e8;border-radius:18px;color:#52734f;box-shadow:0 4px #a6b6a1}
.touch-side button.held{transform:translateY(3px);box-shadow:0 1px #a6b6a1;background:#d4e7c7}
.touch-side .touch-spike{background:#fff0c4;border-color:#e5c78c;color:#97704c;border-radius:50%}
.touch-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:6px}
.touch-left .touch-jump{grid-column:1/-1;grid-row:1;justify-self:center}
.touch-left .touch-move-left{grid-column:1;grid-row:2}
.touch-left .touch-move-right{grid-column:2;grid-row:2}
@media(orientation:landscape) and (max-height:600px){
 body.title-open{overflow:auto}
 #title-screen{width:min(100%,calc(var(--play-height,100dvh)*1.65));height:var(--play-height,100dvh);min-height:0;max-height:none;aspect-ratio:auto;margin:0 auto;padding-bottom:78px;border-width:0;border-radius:0}
 #title-art{height:calc(100% - 78px);object-fit:contain}
 .title-copy{top:0;height:37%}.title-copy h1{width:52%}
 .title-actions{bottom:26px;height:48px;gap:2px}.title-actions button{font-size:15px;padding:5px 24px}.title-actions button span{font-size:8px}.title-actions p{font-size:9px;margin:0}.title-actions .title-music{font-size:9px;padding:0 8px}
 .title-credits{bottom:13px}.title-credits small{font-size:8px}.title-fan-note{bottom:1px;font-size:8px}
 .language-picker{top:8px;right:8px}.title-fullscreen{top:8px;left:8px;padding:5px 9px;font-size:11px}
}

/* Keep the portrait logo below the two top controls. */
@media(orientation:portrait){
 #title-screen .title-copy{top:64px;height:calc(40% - 40px)}
 #title-screen .title-fullscreen{top:12px;left:12px}
 #title-screen .language-picker{top:12px;right:12px}
}
@media(max-width:420px){.audio-settings{flex-wrap:wrap;justify-content:flex-end}.audio-settings button{font-size:9px;padding:5px}.game-header{gap:5px}}

/* Move the portrait composition together, leaving a dedicated control strip. */
@media(orientation:portrait){
 #title-screen{--title-top:64px; height:auto;aspect-ratio:auto;padding-top:var(--title-top);padding-bottom:122px}
 #title-screen #title-art{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:864/608;object-fit:contain}
 #title-screen .title-copy{top:var(--title-top);height:auto;aspect-ratio:864/243}
 #title-screen .title-copy h1{height:100%;width:77%}
}

/* Desktop layouts use the available height in either window orientation. */
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)){
 .game-header{height:52px}
 #game-main{padding:4px 20px 8px}
 #game-nav{margin-bottom:10px}
 #game-nav .mode-button{padding:9px 8px}
 #selection{margin-inline:auto;transform-origin:top center;padding:16px 22px}
 #selection .versus-portraits{margin:8px 0;gap:8px}
 #selection .fighter canvas{height:clamp(60px,14dvh,160px)}
 #selection .fighter{padding-bottom:6px}
 #selection .fighter strong{font-size:20px}
 #selection .character canvas{max-width:78px;height:clamp(30px,6dvh,65px);max-height:65px;object-fit:contain}
 #selection .section-title{margin-bottom:6px}
 #selection .selection-banner{padding:6px 0}
 #selection .fullscreen-toggle{font-size:11px;padding:4px 9px}
 #selection #selection-note{margin:8px 0;padding:7px 10px;min-height:0}
 #selection .selection-keys{margin:8px 0}
 #selection .match-settings{margin-top:8px;padding-top:8px;flex-direction:row;align-items:center}
 #selection #start{padding:10px 16px}
 #achievements>summary,#controls-help>summary{padding:9px 14px}
 #achievements,#controls-help{margin-top:8px}
 footer{padding:10px 0 4px}
 body:has(#arena:not([hidden])) #game-nav,
 body:has(#arena:not([hidden])) #achievements,
 body:has(#arena:not([hidden])) #controls-help,
 body:has(#arena:not([hidden])) #live,
 body:has(#arena:not([hidden])) #game-main>footer{display:none}
 #arena{position:relative;padding:8px;border-radius:16px}
 #arena .court-stage{display:block;position:relative;width:min(100%,calc((var(--play-height,100dvh) - 132px)*864/608));aspect-ratio:864/608;margin:auto;overflow:hidden;border-radius:10px}
 #arena .court-stage #court{width:100%;height:100%;object-fit:contain}
 #arena .court-stage .scoreboard{position:absolute;inset:0 0 auto;z-index:2;margin:0;padding:6px 12px 10px;gap:10px;background:linear-gradient(#fff9e9e8,#fff9e999,transparent);pointer-events:none}
 #arena .scoreboard>div>b{--name-font-max:18;font-size:18px;height:26px;min-height:26px;max-height:26px;line-height:26px;padding:0;text-shadow:0 1px 2px #fff}
 #arena .scoreboard strong{font-size:36px;line-height:1.2;padding:0;letter-spacing:0;-webkit-text-stroke:1px #805a4e}
 #arena .scoreboard>div>.meter{margin-top:0}
 #arena .charge-meter{min-height:30px;padding:0}
 #arena .charge-caption,#arena .charge-count{font-size:9px}
 #arena .charge-track{height:10px;margin-top:3px}
 #arena .charge-state{display:none}
 #arena .arena-foot{padding:6px 4px 0;flex-wrap:nowrap}
 #arena #rotate-hint{display:none}
 #arena #result{position:absolute;z-index:3;left:15%;right:15%;top:25%;background:#fffdf1f5;border-radius:20px;box-shadow:0 8px 32px #405b4530}
}

/* Desktop selection gives the portraits and roster the full viewport height. */
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)) and (orientation:landscape){
 body:not(.title-open):has(#arena[hidden]) #game-main{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;width:100%;max-width:1540px;height:var(--play-height,100dvh);padding:16px;margin:auto;align-items:stretch}
 .selection-sidebar{min-width:0;display:flex;flex-direction:column;gap:12px;overflow:auto}
 .selection-sidebar .game-header{display:flex;flex-direction:column;align-items:stretch;justify-content:start;gap:10px;width:100%;height:auto;padding:8px 0;margin:0}
 .selection-sidebar .game-brand{text-align:center;font-size:18px}
 .selection-sidebar .audio-settings{display:flex;flex-direction:column;margin:0;gap:7px}
 .selection-sidebar #game-nav{display:flex;flex-direction:column;margin:0;padding:5px;gap:5px}
 .selection-sidebar #game-nav .mode-button{font-size:16px;padding:12px 8px}
 .selection-sidebar #achievements,.selection-sidebar #controls-help{margin:0}
 .selection-sidebar footer{margin-top:auto;font-size:10px}
 .selection-sidebar #goals{grid-template-columns:1fr}
 #selection{display:grid;grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:18px;row-gap:10px;width:100%;height:100%;min-height:0;padding:18px;margin:0}
 #selection .section-title{grid-column:1/-1;margin:0}
 #selection .selection-banner{grid-column:1;grid-row:2;margin:0;padding:6px 0}
 #selection .versus-portraits{grid-column:1;grid-row:3;min-height:0;margin:0;grid-template-columns:1fr 70px 1fr;align-items:stretch}
 #selection .fighter{display:flex;flex-direction:column;justify-content:flex-end;min-height:0;padding-bottom:10px}
 #selection .fighter canvas{flex:1;min-height:0;height:0;max-height:360px;width:100%;object-fit:contain}
 #selection .fighter strong{font-size:24px;flex-shrink:0}
 #selection .versus-center{align-self:center}
 #selection .versus-center>b{font-size:46px}
 #selection #roster{grid-column:1;grid-row:4;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;min-height:0}
 #selection .character{padding:4px 2px 8px}
 #selection .character canvas{width:100%;max-width:120px;height:clamp(56px,11dvh,112px);max-height:none;object-fit:contain}
 #selection .character b,html[lang=en] #selection .character b{font-size:12px;white-space:normal;line-height:1.2;min-height:15px}
 .selection-settings-side{grid-column:2;grid-row:2/5;display:flex;flex-direction:column;gap:16px;min-width:0;border-left:1px solid #718099;padding-left:16px;overflow:auto}
 #selection #stage-picker{font-size:13px;line-height:1.7}
 #selection #stage-picker select{display:block;width:100%;margin:8px 0 0;padding:8px}
 #selection #selection-note{font-size:13px;line-height:1.7;margin:0;padding:10px;min-height:0}
 #selection .selection-keys{font-size:12px;line-height:1.8;margin:0}
 #selection .match-settings{flex-direction:column;align-items:stretch;margin-top:auto;padding-top:16px;gap:16px;font-size:14px}
 #selection .match-settings select{margin-left:8px}
 #selection #start{font-size:15px;line-height:1.5;padding:12px 8px;white-space:normal}
 body:has(#arena:not([hidden])) .selection-sidebar{display:contents}
 body:has(#arena:not([hidden])) .selection-sidebar .game-header{height:52px;flex-direction:row;align-items:center;padding:0 10px;gap:14px}
 body:has(#arena:not([hidden])) .selection-sidebar .audio-settings{flex-direction:row;margin-left:auto}
 body:has(#arena:not([hidden])) #game-main{padding-top:0}
 #arena .court-stage{width:min(100%,calc((var(--play-height,100dvh) - 132px)*864/608))}
 #arena .scoreboard>div>b{--name-font-max:26;font-size:26px;height:36px;min-height:36px;max-height:36px;line-height:36px}
 #arena .scoreboard strong{font-size:52px;line-height:1.15;-webkit-text-stroke:1.5px #805a4e}
 #arena .charge-caption,#arena .charge-count{font-size:12px}
 #arena .charge-track{height:18px;margin-top:5px}
 #arena .court-stage .scoreboard{padding:8px 14px 14px;gap:14px}
}
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)) and (orientation:landscape) and (max-width:1050px){
 body:not(.title-open):has(#arena[hidden]) #game-main{grid-template-columns:132px minmax(0,1fr);gap:10px;padding:10px}
 #selection{grid-template-columns:minmax(0,1fr) 145px;gap:10px;padding:12px}
 #selection .versus-portraits{grid-template-columns:1fr 44px 1fr;gap:4px}
 #selection .versus-center>b{font-size:32px}
 #selection .fighter strong{font-size:20px}
 #selection #roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 #selection .character canvas{height:clamp(48px,8dvh,82px)}
 .selection-settings-side{padding-left:10px;gap:12px}
 .selection-sidebar .game-brand{font-size:15px}
}
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)) and (orientation:landscape){body:has(#arena:not([hidden])) .selection-sidebar footer{display:none}}
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)) and (orientation:landscape){
 #network,#ending{grid-column:2;min-width:0;min-height:0;overflow:auto;margin:0}
}

/* Portrait keeps full-width artwork and a vertical flow; never side columns. */
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)) and (orientation:portrait){
 body:not(.title-open):has(#selection:not([hidden])) #game-main{display:flex;flex-direction:column;height:calc(var(--play-height,100dvh) - 52px);padding:4px 12px 8px;gap:6px}
 #game-main>#game-nav{flex-shrink:0;margin:0;padding:4px}
 #selection{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto minmax(120px,1fr) auto auto auto auto auto;gap:6px;flex:1;min-height:0;margin:0;padding:12px;width:100%;overflow:visible}
 #selection .section-title{margin:0;gap:8px;flex-wrap:wrap}
 #selection .section-title h2{font-size:17px}
 #selection .section-title span{font-size:10px;max-width:none}
 #selection .selection-banner{padding:4px 0;gap:5px;flex-wrap:nowrap}
 #selection .versus-portraits{min-height:0;align-items:stretch;grid-template-columns:1fr 58px 1fr;margin:0;gap:5px}
 #selection .fighter{display:flex;flex-direction:column;min-height:0;padding-bottom:4px}
 #selection .fighter canvas{flex:1;min-height:0;height:0;width:100%;object-fit:contain}
 #selection .fighter strong{font-size:20px;flex-shrink:0}
 #selection .fighter small{font-size:9px;flex-shrink:0;margin-top:2px}
 #selection .versus-center{align-self:center}
 #selection .versus-center>b{font-size:36px}
 #selection #stage-picker{font-size:12px}
 #selection #stage-picker select{padding:4px 8px}
 #selection #selection-note{font-size:12px;min-height:0;margin:0;padding:5px 8px;line-height:1.4}
 #selection #roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 #selection .character{padding:2px 2px 5px}
 #selection .character canvas{height:clamp(42px,5.7dvh,66px);max-height:none;max-width:100px;width:100%;object-fit:contain}
 #selection .character b,html[lang=en] #selection .character b{font-size:12px;line-height:1.2;white-space:normal}
 #selection .selection-keys{font-size:10px;line-height:1.4;margin:0}
 #selection .match-settings{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin:0;padding-top:5px}
 #selection .match-settings select{padding:4px 8px}
 #selection #start{padding:8px 12px;font-size:13px}
 #game-main>#achievements,#game-main>#controls-help{flex-shrink:0;margin:0}
 #achievements>summary,#controls-help>summary{padding:7px 12px}
 #game-main>footer{flex-shrink:0;padding:0;font-size:10px}
}
@media(hover:hover) and (pointer:fine) and (not (any-pointer:coarse)){
 #arena .scoreboard>div>b{--name-font-max:26;font-size:26px;height:36px;min-height:36px;max-height:36px;line-height:36px}
 #arena .scoreboard strong{font-size:52px;line-height:1.15;-webkit-text-stroke:1.5px #805a4e}
 #arena .charge-caption,#arena .charge-count{font-size:12px}
 #arena .charge-track{height:18px;margin-top:5px}
 #arena .court-stage .scoreboard{padding:8px 14px 14px;gap:14px}
}
/* Intentional breaks separate the character, action and key instructions. */
#selection #selection-note,#selection .selection-keys{white-space:pre-line;word-break:keep-all;overflow-wrap:break-word}

/* Keep the whole start button inside the artwork, above its lower edge. */
.title-actions{transform:none}
#title-start{position:absolute;top:auto;bottom:calc(100% + 12px);left:0;right:0;width:max-content;max-width:calc(100% - 24px);margin-inline:auto}

@media(orientation:landscape) and (max-height:340px){#title-start{font-size:13px;padding:4px 24px}}
/* Bring all lower copy closer while keeping the start button anchored in the art. */
#title-screen{--footer-lift:-16px}
.title-actions>p,.title-actions>.title-music{position:relative;top:var(--footer-lift)}
.title-credits,.title-fan-note{transform:translateY(var(--footer-lift))}
@media(orientation:landscape) and (max-height:600px){#title-screen{--footer-lift:-8px}}

/* Help and unlock progress open in the center, independent of sidebar width. */
.info-dialog{width:min(900px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:22px;border:1px solid #c5d3bf;border-radius:22px;background:#fffdf6;color:#3c3b4b;box-shadow:0 20px 80px #21382c44}
.info-dialog[open]{display:flex;flex-direction:column;gap:16px}
.info-dialog::backdrop{background:#182b35a6}
.info-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;padding-bottom:12px;border-bottom:1px solid #dde4d6}
.info-dialog-header h2{font-size:21px;color:#456958;line-height:1.4}
.info-dialog-header button{font-size:14px;padding:8px 18px;flex-shrink:0}
.info-dialog-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 4px 4px;line-height:1.8;font-size:14px}
.info-dialog-content>p{color:#6e7868;margin:0 0 16px}
.info-dialog-content #goals{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.info-dialog-content .goal b{font-size:15px}
.info-dialog-content .goal p,.info-dialog-content .goal small{font-size:13px}
.info-dialog-content .controls-body{margin:0;font-size:15px;color:#58694f;line-height:1.9}
body:has(.info-dialog[open]){overflow:hidden}
@media(max-width:600px){
 .info-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:16px;border-radius:16px}
 .info-dialog-header h2{font-size:18px}
 .info-dialog-content #goals{grid-template-columns:1fr}
 .info-dialog-content .controls-body{font-size:14px}
}

/* Both super meters fill from the outer edge toward the center score. */
#meter1 .charge-fill{left:0;right:auto}
#meter2 .charge-fill{left:auto;right:0}

.info-dialog-content .save-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.info-dialog-content .save-actions button{font-size:14px;padding:9px 14px}
.info-dialog-content .reset-progress{color:#9b453f;border-color:#d9aaa3;background:#fff5ef}
.info-dialog-content #save-note{font-size:12px;line-height:1.6}

/* The title and its opening share one centered composition. */
body.title-open{min-height:var(--play-height,100dvh);display:grid;place-items:center}
body.title-open #title-screen{margin:0 auto}
body.opening-active #title-screen .title-copy{visibility:hidden}