@font-face{font-family:Moji;src:url('./fonts/mplus1-medium.ttf') format('truetype');font-display:swap;font-weight:500}@font-face{font-family:Brand;src:url('../../assets/fonts/wdxl-lubrifont-jp-n.woff2') format('woff2');font-display:swap}
:root{font-family:Moji,'Hiragino Kaku Gothic ProN',sans-serif;color:#273546;background:#edf0f2;font-weight:500;font-synthesis:none;--glyph-font:Moji;--blue:#2869dc;--red:#cc4735;--line:#cbd3dc}*{box-sizing:border-box}body{margin:0;padding-top:60px}button,input,textarea{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:#f9fbfc;color:inherit;border-radius:8px;padding:11px 15px;transition:background .15s,transform .15s}button:hover{background:#e4ebf3}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #6797ef;outline-offset:4px}[hidden]{display:none!important}a{color:inherit;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 4.5%;background:#080808;color:#f1f1eb;font:16px/1.9 Brand,sans-serif;border-bottom:1px solid #30322b}.brand{display:flex;align-items:center;gap:14px;letter-spacing:-.055em}.brand svg{width:24px;height:24px;fill:#c5ff45}.game-title{position:absolute;left:50%;max-width:36%;margin:0;overflow:hidden;transform:translateX(-50%);font-size:18px;letter-spacing:.025em;text-align:center;text-overflow:ellipsis;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:12px}.back{border:1px solid #30322b;border-radius:99px;padding:7px 18px;min-height:44px;font-size:15px}.back:hover{color:#c5ff45;border-color:#c5ff45}.sound-button{display:grid;place-items:center;width:42px;height:42px;padding:10px;background:transparent;border:0;border-radius:50%;color:#cbd0d6}.sound-button:hover{background:#252525}.sound-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sound-muted,.is-muted .sound-waves{display:none}.is-muted .sound-muted{display:block}
main{width:min(1320px,92%);margin:0 auto;padding:32px 0}.game-layout{display:block;max-width:1000px;margin:0 auto}body:is([data-phase=loading],[data-phase=setup],[data-phase=generating]) .game-layout{display:block;max-width:480px;margin:0 auto}fieldset{margin:0;padding:0;border:0;min-width:0}.controls{min-width:0}.segments{display:flex;gap:6px}.segments button{flex:1;white-space:nowrap;padding:10px 12px;font-size:13px;min-height:44px;background:transparent;border-color:transparent}.segments button[aria-pressed=true]{color:var(--blue);background:#e0e9f8;border-color:#b8cdec}.segments button:hover{background:#e1e7ed}.font-choice{border-bottom:1px solid var(--line);padding-bottom:14px}.font-choice button{font-size:14px}.character-preview{display:flex;justify-content:center;align-items:center;gap:38px;min-height:245px;padding:19px 0}.character-preview output{display:block;min-width:170px;text-align:center;font:500 172px/1.15 var(--glyph-font),sans-serif;color:var(--blue)}.character-preview output.invalid{color:#9aa8b8}.gauge-stack{display:flex;flex-direction:column;gap:21px;width:116px;flex:none}.gauge-stack meter{display:block;width:100%;height:10px;appearance:none;border:0;border-radius:8px;background:#d6dee7;overflow:hidden}.gauge-stack meter::-webkit-meter-bar{background:#d6dee7;border:0;height:10px}.gauge-stack meter::-webkit-meter-optimum-value{background:#427be0;border-radius:8px}.gauge-stack meter::-moz-meter-bar{background:#427be0;border-radius:8px}.character-entry label,.opponent-controls label,.difficulty-controls>span{display:block;font-size:12px;color:#657587;margin-bottom:9px}.character-entry textarea{display:block;width:100%;height:45px;min-height:45px;max-height:90px;resize:vertical;border:1px solid #b7c5d5;border-radius:8px;background:#fff;padding:10px 13px;font-size:16px;line-height:23px;color:#34465c}.com-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:25px}.opponent-controls{width:214px;min-width:0}.opponent-controls>div{display:flex;gap:7px}.opponent-controls input{min-width:0;width:100%;height:44px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:#f9fbfc;color:var(--red);font-size:16px}.opponent-controls input::placeholder{font-size:13px;color:#93a0af}.opponent-controls button{font-size:24px;padding:4px 11px;min-width:44px}.difficulty-controls{width:169px;flex:none}.difficulty-controls .segments{gap:3px}.difficulty-controls .segments button{font-size:15px;border:1px solid var(--line);padding:8px 9px}.difficulty-controls .segments button[aria-pressed=true]{border-color:#b8cdec}.error{min-height:19px;font-size:11px;line-height:1.7;color:#b23b2c;margin:12px 0}.primary{width:100%;background:var(--blue);color:white;border-color:var(--blue);padding:15px 14px;font-size:14px;min-height:49px;box-shadow:0 3px 0 #1b4ca4}.primary:hover{background:#1e59bc}.primary:disabled{box-shadow:none;background:#869bb7;border-color:#869bb7;color:#fff;opacity:.65}.plain{background:transparent;border-color:transparent;width:100%;font-size:12px;margin-top:11px}
.arena-section{min-width:0;transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1),filter .24s ease}.arena-section.is-changing{opacity:0;transform:scale(.985);filter:blur(4px);pointer-events:none}.scoreboard{display:flex;align-items:center;justify-content:space-between;padding:0 18px 14px}.score{display:grid;grid-template-columns:auto auto;gap:3px 13px;align-items:center;min-width:98px}.score>span{font-size:10px;line-height:1.35;white-space:pre-line}.score strong{font-family:var(--glyph-font),sans-serif;font-size:32px;grid-column:2;grid-row:1/3;line-height:1.2}.score meter{width:61px;height:7px;appearance:none;border:0;background:#d5dde5;border-radius:4px;overflow:hidden}.score meter::-webkit-meter-bar{background:#d5dde5;border:0;height:7px}.score meter::-webkit-meter-optimum-value{background:var(--blue)}.opponent meter::-webkit-meter-optimum-value{background:#eb624e}.player{color:var(--blue)}.opponent{color:var(--red)}.clock{text-align:center}.clock span{display:block;font-size:11px;color:#788797}.clock time{font-size:22px;font-variant-numeric:tabular-nums}.viewport{position:relative;height:520px;overflow:hidden;border-radius:20px;background:#e4e8ec;box-shadow:0 22px 45px -28px #8292a8}canvas{display:block;width:100%;height:100%;touch-action:pan-y}canvas[data-phase=ready]{cursor:grab;touch-action:none}canvas[data-phase=ready]:active{cursor:grabbing}.stage-message,.loading-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#edf0f2ed;text-align:center;padding:25px;z-index:5}.loading-status{position:fixed;z-index:30;font-size:13px}.loader{width:28px;height:28px;border:2px solid #aebccb;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
h2{font-size:20px;letter-spacing:-.04em;margin:0 0 19px}.guide{margin:28px 0 0;border-top:1px solid var(--line);padding-top:19px;font-size:12px;color:#607084}.guide summary{cursor:pointer;width:fit-content}.guide>div{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;line-height:1.9}.guide b{display:block;color:#3b4c61}body:is([data-phase=setup],[data-phase=loading],[data-phase=generating]) .guide{max-width:480px;margin-inline:auto}body:is([data-phase=setup],[data-phase=loading],[data-phase=generating]) .guide>div{grid-template-columns:1fr;gap:0}.result{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--game-header-height) + 60px) 16px max(24px,env(safe-area-inset-bottom));text-align:center;pointer-events:none}
.release-notes{max-width:480px;margin:22px auto 0;border-top:1px solid var(--line);padding-top:18px;color:#607084;font-size:12px}.release-notes summary{cursor:pointer;width:fit-content}.release-notes summary span{margin-left:5px;color:#8793a0;font-variant-numeric:tabular-nums}.release-list{display:grid;gap:10px;margin-top:15px}.release-notes article{padding:15px 17px;border:1px solid #d5dce3;border-radius:10px;background:#f7f9fa;line-height:1.75}.release-notes header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:#34465c}.release-notes header strong{padding:1px 7px;border-radius:99px;background:#34465c;color:#fff;font-size:10px;font-variant-numeric:tabular-nums}.release-notes header time{color:#7b8896;font-variant-numeric:tabular-nums}.release-notes ul{margin:10px 0 0;padding-left:1.35em}.release-notes li+li{margin-top:4px}
.result-heading{display:grid;justify-items:center;gap:12px;width:100%}.result h2{font:900 clamp(38px,7vw,76px)/1.05 var(--winner-font,system-ui),sans-serif;letter-spacing:-.04em;margin:0;text-shadow:0 2px 0 #fff,0 0 16px #ffffffa0}
.result-bottom{display:grid;justify-items:center;gap:8px;width:100%;pointer-events:none}.result-ranking-status{display:grid;justify-items:center;gap:6px;min-height:42px;margin:0;color:#42546a;font-size:12px;font-weight:700;text-shadow:0 1px #fff;font-variant-numeric:tabular-nums}.result-ranking-status:empty{min-height:0}.result-ranking-status.is-pending{align-items:center;color:#657587;font-size:11px;font-weight:600}.rating-flow{display:flex;align-items:center;gap:10px;font:500 clamp(28px,6vw,44px)/1 Moji,sans-serif;letter-spacing:.01em}.rating-flow strong{font-size:1.08em;font-weight:500}.rating-arrow{color:#263547;font-size:.82em;font-weight:900;line-height:1}.rating-delta{padding:4px 12px;border-radius:999px;font:500 17px/1.25 Moji,sans-serif;line-height:1.25;background:#e4e9ee}.rating-change.is-positive .rating-delta{background:#d9f4ed;color:#087f6c}.rating-change.is-negative .rating-delta{background:#fae0de;color:#bd3b35}.rating-change.is-neutral .rating-delta{background:#e5e9ed;color:#63707e}.rating-change.is-complete .rating-delta{animation:rating-delta-pop .32s cubic-bezier(.2,.9,.25,1.35)}@keyframes rating-delta-pop{50%{transform:scale(1.13)}}.result-bottom .result-actions{pointer-events:auto}
.result-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:12px;width:min(440px,100%);pointer-events:auto}
.result-actions.challenge-ended{grid-template-columns:1fr 1fr;grid-template-areas:"icons icons" "edit retry"}
.result-actions button{font-size:14px;min-height:50px}
.result-actions #edit-character{order:1}.result-actions .primary{order:2}.result-actions #save-result{order:3}.result-actions #share-result{order:4}
.result-actions.challenge-ended #save-result{grid-area:icons;justify-self:center;transform:translateX(-31px)}.result-actions.challenge-ended #share-result{grid-area:icons;justify-self:center;transform:translateX(31px)}.result-actions.challenge-ended #edit-character{grid-area:edit}.result-actions.challenge-ended #replay{grid-area:retry}
.result-actions .result-icon-button{display:grid;place-items:center;width:46px;height:46px;min-height:46px;padding:11px;border:1.5px solid #657587;border-radius:50%;background:#f9fbfccc;color:#263547;box-shadow:0 5px 15px #26354720}.result-actions .result-icon-button:hover{background:#fff;border-color:#263547}.result-icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.result-icon-button svg .x-mark{fill:currentColor;stroke:none}
.round-intro{position:absolute;z-index:2;top:27%;left:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);color:#17202a;font:900 clamp(42px,9vw,88px)/1.1 var(--com-glyph-font,Moji),sans-serif;letter-spacing:-.05em;white-space:nowrap;text-shadow:0 2px 0 #fff,0 0 16px #ffffffb8}
.round-intro.is-visible{animation:round-intro 1.25s cubic-bezier(.16,.8,.25,1) both}@keyframes round-intro{0%{opacity:0;transform:translate(-50%,-45%) scale(.82)}14%,58%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.08)}}
body[data-phase=result] .scoreboard{visibility:hidden}
#storage-note{font-size:11px;color:#886825}
.game-footer{width:min(480px,calc(100% - 28px));margin:34px auto 0;padding:23px 0 34px;border-top:1px solid var(--line);color:#667586;font-size:11px;line-height:1.8;text-align:center}.game-footer p{margin:0}.game-footer .copyright{margin-bottom:8px;color:#445365;font-size:12px}
@media(min-width:1500px){.viewport{height:600px}}@media(max-width:850px){main{width:94%;padding-top:22px}.viewport{height:470px}.scoreboard{padding-inline:9px}.score{min-width:85px;gap:3px 8px}}
@media(max-width:650px){body{padding-top:52px}.site-header{height:52px;padding-inline:6%;font-size:14px}.brand{gap:10px}.brand svg{width:20px;height:20px}.game-title{max-width:29%;font-size:13px}.header-actions{gap:6px}.back{font-size:14px;padding:7px 14px}main{width:calc(100% - 28px);padding-top:20px}.font-choice{gap:2px;padding-bottom:11px}.font-choice button{font-size:12px;padding:9px 6px}.character-preview{min-height:229px;gap:25px;padding:22px 0}.character-preview output{font-size:149px;min-width:154px}.gauge-stack{width:92px;gap:20px}.com-row{gap:16px;margin-top:22px}.opponent-controls{flex:1;width:auto}.difficulty-controls{width:141px}.difficulty-controls .segments button{padding:8px 6px}.game-layout{display:flex;flex-direction:column;gap:24px}.arena-section,.controls{width:100%}.viewport{height:clamp(300px,84vw,420px);border-radius:15px}.scoreboard{padding:0 10px 9px}.score strong{font-size:27px}.clock time{font-size:18px}.clock span{font-size:10px}.guide>div{grid-template-columns:1fr;gap:0}}
@media(max-width:500px){.start-actions .primary{padding-inline:3px;font-size:12px}}
.start-actions .adjustment-label,.start-actions .ranked-primary .adjustment-label{font-size:8px;font-weight:700;letter-spacing:-.06em;opacity:.9}
@media(max-width:360px){.character-preview{gap:20px}.character-preview output{font-size:136px;min-width:136px}.gauge-stack{width:80px}.com-row{gap:10px}.difficulty-controls{width:126px}.opponent-controls button{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.ranked-eligibility-note{min-height:27px;line-height:1.35}.ranked-eligibility-note[hidden]{display:block;visibility:hidden}.ranked-eligibility-note span{display:block}

.stat-gauge{display:grid;gap:7px}.stat-gauge>span{font-size:11px;color:#657587;line-height:1.3}

.font-choice{margin-bottom:16px}.player-entry-row{display:flex;align-items:start;gap:8px}.player-entry-row textarea{flex:1;min-width:0}.player-entry-row button{flex:none;width:45px;height:45px;padding:4px;font-size:24px}
.ranked-eligibility-note{margin:-7px 0 5px;color:#c73535;font-size:10px;font-weight:700;line-height:1.4;text-align:center}.start-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.start-actions .primary{padding-inline:7px;white-space:nowrap}.challenge-primary{background:#35a85a;border-color:#35a85a;box-shadow:0 3px 0 #23733d}.challenge-primary:hover{background:#2c914c}.challenge-primary:disabled{background:#7ca98a;border-color:#7ca98a}.ranked-primary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-block:7px;background:#d94343;border-color:#d94343;box-shadow:0 3px 0 #922e2e}.ranked-primary small{font-size:10px;line-height:1;font-weight:500;opacity:.85}.ranked-primary:hover{background:#bd3535}.ranked-primary:disabled{background:#ad8585;border-color:#ad8585;box-shadow:none}.room-primary{background:#ed8a25;border-color:#ed8a25;box-shadow:0 3px 0 #a9530e}.room-primary:hover{background:#d97817}.room-primary:disabled{background:#c9a27f;border-color:#c9a27f;box-shadow:none}.start-actions>.room-primary{grid-column:2;height:49px}
.room-dialog{width:min(420px,calc(100% - 28px));padding:0;border:0;border-radius:18px;background:#f6f8fa;color:#273546;box-shadow:0 25px 80px #13223555}.room-dialog::backdrop{background:#172130a6;backdrop-filter:blur(4px)}.room-panel{padding:24px}.room-panel>header{display:flex;align-items:center;justify-content:space-between;gap:20px}.room-panel h2{margin:0;font-size:28px}.room-panel>p{margin:10px 0 20px;color:#657587;font-size:13px}.room-mode-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.room-mode-actions .primary{height:49px;padding-inline:5px}.room-panel>label{display:block;margin-bottom:6px;color:#657587;font-size:11px}.room-code-input{display:grid;grid-template-columns:minmax(0,1fr) 45px;overflow:hidden;border:1px solid #b7c5d5;border-radius:8px;background:#fff}.room-code-input>#room-code{min-width:0;width:100%;height:49px;padding:8px 4px 8px 12px;border:0;background:transparent;color:#273546;font-size:24px;font-weight:800;letter-spacing:.22em;text-align:center;font-variant-numeric:tabular-nums}.room-code-input>#room-code:focus{outline:2px solid var(--blue);outline-offset:-2px}.room-code-input>#room-copy{display:grid;place-items:center;width:45px;height:49px;padding:0;border:0;border-left:1px solid #d8e0e8;border-radius:0;background:#eef2f5;color:#526376}.room-code-input>#room-copy:active{background:#dce5ec}.room-code-input>#room-copy svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.8}.room-panel .error{min-height:20px;margin:8px 0 0}.room-code-display{font-size:clamp(42px,12vw,70px)!important;letter-spacing:.15em;font-variant-numeric:tabular-nums}
.ranking-entry{display:grid;grid-template-columns:calc((100% - 8px)/3) 54px minmax(0,1fr);gap:8px;align-items:end;margin-top:13px}.ranking-entry>button{height:49px;background:#34465c;color:#fff;border-color:#34465c}.ranking-entry>button:hover{background:#26384e}.ranking-opt-in-field,.ranking-entry>label{display:grid;gap:5px}.ranking-opt-in-field>span,.ranking-entry>label>span{font-size:11px;color:#657587}.ranking-checkbox-shell{display:grid;place-items:center;width:100%;height:49px;border:1px solid #b7c5d5;border-radius:8px;background:#fff;cursor:pointer}.ranking-entry .ranking-checkbox-shell #ranking-opt-in{width:22px;height:22px;margin:0;padding:0;accent-color:#2f9b59;cursor:pointer}.ranking-entry>label>input{width:100%;height:49px;min-width:0;padding:10px 13px;border:1px solid #b7c5d5;border-radius:8px;background:#fff;color:#34465c}.ranking-entry>label>input::placeholder{color:#a5afb9;opacity:1}.ranking-note{min-height:17px;margin:7px 0 0;font-size:10px;line-height:1.6;color:#748394}
.ranking-dialog{width:min(680px,calc(100% - 28px));max-height:min(760px,calc(100dvh - 28px));padding:0;border:0;border-radius:18px;background:#f6f8fa;color:#273546;box-shadow:0 25px 80px #13223555}.ranking-dialog::backdrop{background:#172130a6;backdrop-filter:blur(4px)}.ranking-panel{padding:24px}.ranking-panel>header{display:flex;align-items:start;justify-content:space-between;gap:20px}.ranking-panel h2{margin:0;font-size:28px}.ranking-kicker{margin:0 0 2px;color:#d94343;font-size:11px;font-weight:700}.ranking-close{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:#e6ebf0}.ranking-close svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.ranking-tabs{display:flex;margin:20px 0 15px;border-bottom:1px solid #cbd3dc}.ranking-tabs button{border:0;border-radius:0;border-bottom:3px solid var(--blue);background:transparent;color:var(--blue);padding:9px 22px}.ranking-loading,.ranking-empty{padding:34px 0;text-align:center;color:#748394;font-size:13px}.ranking-table-wrap{max-height:min(470px,55dvh);overflow-y:auto;border:1px solid #d4dce4;border-radius:10px 10px 0 0;background:#fff}.ranking-table-wrap table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}.ranking-table-wrap .rank-col{width:50px}.ranking-table-wrap .glyph-col{width:50px}.ranking-table-wrap .font-col{width:64px}.ranking-table-wrap .wins-col{width:94px}.ranking-table-wrap th{position:sticky;top:0;z-index:2;padding:10px 8px;background:#e9edf1;color:#657587;font-size:10px;text-align:left}.ranking-table-wrap td{padding:10px 8px;border-top:1px solid #e2e7ec;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-table-wrap th:first-child,.ranking-table-wrap td:first-child{text-align:center;font-variant-numeric:tabular-nums}.ranking-table-wrap th:last-child,.ranking-table-wrap td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;overflow:visible}.ranking-glyph{font-size:24px;line-height:1;text-align:center}.ranking-rank-1{background:linear-gradient(90deg,#fff5bd,#f0ce58)}.ranking-rank-2{background:linear-gradient(90deg,#f5f7f9,#c7d0d8)}.ranking-rank-3{background:linear-gradient(90deg,#f4dfce,#c98e5e)}.ranking-own{background:#d9e6f5;box-shadow:inset 4px 0 var(--blue)}.ranking-rank-1.ranking-own{background:linear-gradient(90deg,#fff5bd,#f0ce58)}.ranking-rank-2.ranking-own{background:linear-gradient(90deg,#f5f7f9,#c7d0d8)}.ranking-rank-3.ranking-own{background:linear-gradient(90deg,#f4dfce,#c98e5e)}.ranking-empty{margin:0}.ranking-font{color:#667586;font-size:11px}.my-ranking{display:grid;grid-template-columns:50px minmax(0,1fr) 50px 64px 94px;align-items:center;min-height:52px;border:1px solid #aeb9c5;border-top:0;border-radius:0 0 10px 10px;background:#cbd3dc;color:#263547;font-size:13px;box-shadow:0 -5px 14px #26354718}.my-ranking>span{padding:10px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.my-ranking>span:first-child{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}.my-ranking .ranking-wins{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;overflow:visible}.my-ranking-empty{grid-column:1/-1;text-align:center;color:#566678}.my-ranking.ranking-rank-1{background:linear-gradient(90deg,#fff5bd,#f0ce58)}.my-ranking.ranking-rank-2{background:linear-gradient(90deg,#f5f7f9,#c7d0d8)}.my-ranking.ranking-rank-3{background:linear-gradient(90deg,#f4dfce,#c98e5e)}
.ranking-tabs button{border-bottom-color:transparent;color:#657587}.ranking-tabs button[aria-selected=true]{border-bottom-color:var(--blue);color:var(--blue)}.ranking-table-wrap table.rating-mode .rating-col{width:112px}.ranking-table-wrap table.rating-mode td:last-child{font-size:16px}.my-ranking.rating-mode{grid-template-columns:50px minmax(0,1fr) 112px}.ranked-overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:25px;background:#edf0f2eb;text-align:center;backdrop-filter:blur(5px)}.ranked-overlay .loader{position:static;margin-bottom:5px}.ranked-overlay strong{font-size:21px}.ranked-overlay p{min-height:20px;margin:0;color:#657587;font-size:13px}.ranked-overlay time{min-height:42px;color:#d94343;font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}.ranked-overlay button{min-width:140px;margin-top:7px;background:#fff}.ranked-overlay.is-aiming{inset:auto 12px 12px auto;align-items:flex-end;gap:2px;width:auto;padding:10px 13px;border-radius:10px;background:#182536d9;color:#fff;backdrop-filter:none}.ranked-overlay.is-aiming .loader,.ranked-overlay.is-aiming button,.ranked-overlay.is-aiming p{display:none}.ranked-overlay.is-aiming strong{font-size:11px}.ranked-overlay.is-aiming time{min-height:0;color:#fff;font-size:24px}.ranked-overlay.is-practice{inset:calc(var(--game-header-height) + 88px) 12px auto auto;display:grid;grid-template-columns:18px 24px auto auto;align-items:center;gap:7px;width:auto;padding:8px 9px;border-radius:10px;background:#182536df;color:#fff;backdrop-filter:none;pointer-events:none}.ranked-overlay.is-practice .loader{grid-column:1;width:16px;height:16px;margin:0;border-width:2px}.ranked-overlay.is-practice time{grid-column:2;grid-row:1;display:block;min-height:0;color:#fff;font-size:13px;font-weight:900;line-height:1;text-align:center}.ranked-overlay.is-practice strong{grid-column:3;grid-row:1;font-size:11px}.ranked-overlay.is-practice p{display:none}.ranked-overlay.is-practice button{grid-column:4;grid-row:1;min-width:auto;margin:0;padding:5px 8px;border:0;background:#fff;color:#263547;font-size:10px;pointer-events:auto}
.ranked-overlay.is-failed{inset:auto 0 max(26px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;place-content:center;justify-items:center;gap:12px 10px;padding:16px;background:transparent;color:#17202a;text-align:center;backdrop-filter:none;pointer-events:none}.ranked-overlay.is-failed .loader,.ranked-overlay.is-failed p,.ranked-overlay.is-failed time{display:none}.ranked-overlay.is-failed strong{grid-column:1/-1;white-space:pre-line;font-size:clamp(25px,6vw,38px);line-height:1.35;text-shadow:0 2px 0 #fff,0 0 14px #fff}.ranked-overlay.is-failed button{min-width:128px;margin:4px 0 0;background:#fffffff0;pointer-events:auto}.ranked-overlay.is-failed #ranked-retry{background:var(--blue);color:#fff}
.ranked-practice-label{position:absolute;z-index:3;left:50%;bottom:max(72px,10dvh);transform:translateX(-50%);color:#2869dc;font:900 clamp(22px,5vw,34px)/1 var(--glyph-font);letter-spacing:.06em;white-space:nowrap;text-shadow:0 2px 0 #fff,0 0 16px #fff}
.ranked-overlay:is(.is-aiming,.is-submitted){inset:calc(var(--game-header-height) + 22px) auto auto 50%;display:grid;place-items:center;width:auto;height:38px;padding:4px 13px;transform:translateX(-50%);border-radius:9px;background:#182536e8;color:#fff;text-align:center;backdrop-filter:none}
.ranked-overlay:is(.is-aiming,.is-submitted) .loader,.ranked-overlay:is(.is-aiming,.is-submitted) button,.ranked-overlay:is(.is-aiming,.is-submitted) p,.ranked-overlay:is(.is-aiming,.is-submitted) strong{display:none}
.ranked-overlay:is(.is-aiming,.is-submitted) time{display:block;min-width:70px;min-height:0;color:#fff;font-size:27px;line-height:1;font-weight:900}
body[data-phase=ranked-wait] .clock span{visibility:hidden}
#result-title:focus{outline:none}
.ranked-versus{position:absolute;inset:0;z-index:7;display:grid;grid-template-rows:1fr auto 1fr;place-items:center;gap:8px;padding:calc(var(--game-header-height) + 44px) 20px 34px;overflow:hidden;background:linear-gradient(180deg,#eaf0f4ee,#dce4eaea);color:#203044;text-align:center;pointer-events:none;backdrop-filter:blur(8px)}.ranked-versus.is-visible{animation:ranked-versus-fade 2.5s ease both}.versus-player{display:grid;justify-items:center;align-content:center;gap:2px;min-width:0;width:min(440px,100%)}.versus-player strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(18px,4vw,30px);line-height:1.2}.versus-player small{font-size:clamp(17px,3.2vw,22px);font-weight:800;font-variant-numeric:tabular-nums}.versus-glyph{display:block;max-width:100%;font-size:clamp(62px,14vw,116px);font-weight:700;line-height:.96}.versus-opponent{color:var(--red);animation:versus-opponent-enter 2.5s cubic-bezier(.16,.8,.25,1) both}.versus-local{color:var(--blue);animation:versus-local-enter 2.5s cubic-bezier(.16,.8,.25,1) both}.versus-mark{position:relative;color:#172535;font:900 clamp(48px,10vw,86px)/.8 system-ui,sans-serif;font-style:italic;letter-spacing:-.1em;text-shadow:0 3px 0 #fff,0 8px 25px #16283c3d;animation:versus-mark-enter 2.5s cubic-bezier(.16,.8,.25,1) both}@keyframes ranked-versus-fade{0%{opacity:0}12%,76%{opacity:1}100%{opacity:0}}@keyframes versus-opponent-enter{0%{opacity:0;transform:translateY(-48px)}18%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}@keyframes versus-local-enter{0%{opacity:0;transform:translateY(48px)}18%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}@keyframes versus-mark-enter{0%,8%{opacity:0;transform:scale(.35) rotate(-8deg)}25%,78%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1.08) rotate(-3deg)}}
@media(max-width:500px){.ranking-panel{padding:19px 14px}.ranking-entry{grid-template-columns:calc((100% - 8px)/3) 50px minmax(0,1fr);gap:6px}.ranking-dialog{max-height:calc(100dvh - 18px)}.ranking-table-wrap{max-height:55dvh}.ranking-table-wrap .rank-col{width:42px}.ranking-table-wrap .glyph-col{width:42px}.ranking-table-wrap .font-col{width:52px}.ranking-table-wrap .wins-col{width:82px}.ranking-table-wrap th,.ranking-table-wrap td{padding-inline:5px}.ranking-font{font-size:9px}.my-ranking{grid-template-columns:42px minmax(0,1fr) 42px 52px 82px}.my-ranking>span{padding-inline:5px}.ranking-panel h2{font-size:24px}}

/* Connected font selectors sit directly above each character's input. */
.font-choice{gap:0;padding:0;margin-bottom:12px;border:1px solid #b7c5d5;border-radius:8px;overflow:hidden;background:#f9fbfc}
.font-choice button{border:0;border-right:1px solid #b7c5d5;border-radius:0;padding:9px 5px;min-width:0;font-size:12px;transform:none}
.font-choice button:last-child{border-right:0}
.font-choice button[aria-pressed=true]{background:#d9e6fb;color:#205ec7}
.font-choice button:focus-visible{outline-offset:-3px;position:relative}
.com-font-choice{margin-top:24px}
.com-font-choice button[aria-pressed=true]{background:#f7e2dc;color:#b33e2e}
.com-row{margin-top:0}
.opponent-controls input,.score.opponent strong{font-family:var(--com-glyph-font,Moji),sans-serif}
.opponent-controls input::placeholder{font-family:Moji,sans-serif}

/* Match the two setup sections to the blue and red tops in the stadium. */
.contestant{padding:18px 20px 20px;border:1px solid #c3d3e8;border-top:4px solid var(--blue);border-radius:12px;background:#fff}
.contestant>h2{margin:0;font-size:15px;line-height:1.4;letter-spacing:0;color:var(--blue)}
.contestant .character-preview{min-height:190px;padding:0 0 8px;gap:30px}
.com-setup{margin-top:20px;border-color:#e4ccc5;border-top-color:var(--red);background:#fffaf8}
.com-setup>h2{color:var(--red);margin-bottom:17px}
.com-setup .com-font-choice{margin-top:0}
.com-setup .difficulty-controls .segments button[aria-pressed=true]{color:#b33e2e;background:#f7e2dc;border-color:#e3bdb3}
.contestant .com-row{gap:14px}
.contestant .opponent-controls{flex:1;min-width:0}
@media(max-width:650px){
 .contestant{padding:14px 13px 16px}
 .contestant .character-preview{min-height:175px;gap:20px}
 .contestant .character-preview output{min-width:134px;font-size:138px}
 .contestant .gauge-stack{width:88px}
 .contestant .difficulty-controls{width:126px}
 .com-setup{margin-top:18px}
}
@media(max-width:360px){
 .contestant .character-preview{gap:14px}
 .contestant .character-preview output{min-width:120px;font-size:126px}
 .contestant .gauge-stack{width:76px}
 .contestant .com-row{gap:9px}
 .contestant .difficulty-controls{width:114px}
 .contestant .difficulty-controls .segments button{padding-inline:3px}
}

/* The stadium fills the viewport; match information floats over the scene. */
body{--game-header-height:60px}
body:is([data-phase=ready],[data-phase=ranked-intro],[data-phase=ranked-wait],[data-phase=battle],[data-phase=finishing],[data-phase=result]){overflow:hidden}
.arena-section{position:fixed;inset:0;z-index:1}
.arena-section .viewport{position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none}
.arena-section .scoreboard{position:absolute;z-index:2;top:calc(var(--game-header-height) + 16px);left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 32px));padding:12px 18px;background:#f8fafbe8;border:1px solid #ffffffb8;border-radius:12px;pointer-events:none}
@media(max-width:650px){
 body{--game-header-height:52px}
 .arena-section .scoreboard{top:calc(var(--game-header-height) + 10px);width:calc(100% - 24px);padding:10px 12px}
}

/* Native inputs retain selection and IME; a non-interactive mirror colors text. */
.highlight-input{position:relative;flex:1;min-width:0;background:#fff;border-radius:8px}
.input-highlight{position:absolute;inset:1px;overflow:hidden;pointer-events:none;white-space:pre-wrap;overflow-wrap:break-word;padding:10px 13px;font-size:16px;line-height:23px;color:#9099a5}
.input-highlight .active-character{color:var(--blue)}
.highlight-input textarea,.highlight-input input{position:relative;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--blue);background:transparent;line-height:23px}
.highlight-input textarea::selection,.highlight-input input::selection{background:#6797ef66}
.opponent-controls .input-highlight{white-space:pre;padding:8px 11px;font-family:var(--com-glyph-font,Moji),sans-serif}
.opponent-controls .active-character{color:var(--red)}
.opponent-controls .highlight-input input{caret-color:var(--red)}
.opponent-controls input::placeholder{-webkit-text-fill-color:#93a0af}

@font-face{font-family:MojiTitleGothic;src:url('./fonts/title-gothic.woff') format('woff');font-display:swap}
@font-face{font-family:MojiTitleMincho;src:url('./fonts/title-mincho.woff') format('woff');font-display:swap}
@font-face{font-family:MojiTitlePop;src:url('./fonts/title-pop.woff') format('woff');font-display:swap}
@font-face{font-family:MojiTitleBrush;src:url('./fonts/title-brush.woff') format('woff');font-display:swap}
.selection-title{display:flex;align-items:baseline;justify-content:center;gap:0;margin:0 0 26px;font-size:clamp(38px,10.5vw,58px);line-height:1.3;font-weight:400;white-space:nowrap;color:#273546}
.title-gothic{font-family:MojiTitleGothic,sans-serif;color:var(--blue)}
.title-mincho{font-family:MojiTitleMincho,serif}
.title-pop{font-family:MojiTitlePop,sans-serif}
.title-brush{position:relative;top:.06em;margin-left:-.15em!important;margin-right:-.1em;font-family:MojiTitleBrush,serif;font-size:1.45em;line-height:1}
.selection-title>span+span{margin-left:-.08em}
.selection-title span:last-child{color:var(--red)}
@media(max-width:650px){.selection-title{margin-bottom:20px}}

@media(max-width:500px){.ranked-versus{gap:2px;padding:calc(var(--game-header-height) + 54px) 16px 24px}.versus-player{gap:0}.versus-glyph{font-size:clamp(58px,21vw,92px)}.versus-mark{font-size:54px}.result-heading{gap:9px}.result-ranking-status{min-height:38px}}
@media(prefers-reduced-motion:reduce){.ranked-versus.is-visible{animation:ranked-versus-fade 2.5s ease both!important}.ranked-versus .versus-player,.ranked-versus .versus-mark{animation:none!important}.rating-change.is-complete .rating-delta{animation:none!important}}

#shuffle-player,#shuffle{display:grid;place-items:center}.dice-icon{display:block;width:24px;height:24px}

/* Keep the exact personal rank legible beyond the top 100. */
.ranking-table-wrap .rank-col{width:64px}
.my-ranking{grid-template-columns:64px minmax(0,1fr) 50px 64px 94px}
.my-ranking.rating-mode{grid-template-columns:64px minmax(0,1fr) 112px}
.my-ranking>span:first-child{overflow:visible;text-overflow:clip;font-size:12px}
@media(max-width:500px){
 .ranking-table-wrap .rank-col{width:54px}
 .ranking-table-wrap .glyph-col{width:36px}
 .ranking-table-wrap .font-col{width:48px}
 .ranking-table-wrap .wins-col{width:70px}
 .my-ranking{grid-template-columns:54px minmax(0,1fr) 36px 48px 70px}
 .my-ranking.rating-mode{grid-template-columns:54px minmax(0,1fr) 112px}
 .my-ranking>span:first-child{padding-inline:3px;font-size:11px}
}

/* A visible preparation state before the shared launch countdown starts. */
.ranked-overlay.is-preparing{inset:calc(var(--game-header-height) + 25px) auto auto 50%;width:max-content;max-width:calc(100% - 24px);padding:5px 12px;transform:translateX(-50%);background:transparent;backdrop-filter:none;pointer-events:none}
.ranked-overlay.is-preparing strong{font-family:Moji,sans-serif;font-size:19px;color:#263547}
.ranked-overlay.is-preparing :is(.loader,time,p,button){display:none}
.start-actions .adjustment-note{display:inline;font-size:9px;line-height:1;margin-left:2px;font-weight:500;opacity:1}

/* HUD status is positioned against the actual scoreboard, including mobile. */
.scoreboard > .ranked-overlay:is(.is-aiming,.is-submitted,.is-preparing){inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;pointer-events:none}
.scoreboard > .ranked-overlay.is-preparing{padding:0;max-width:40%;gap:0}
.scoreboard > .ranked-overlay.is-preparing strong{font-size:clamp(14px,3.8vw,19px);line-height:1.2}
.scoreboard > .ranked-overlay:is(.is-aiming,.is-submitted){height:36px;padding:4px 10px}
.scoreboard > .ranked-overlay:is(.is-aiming,.is-submitted) time{min-width:56px;font-family:Moji,sans-serif;line-height:28px}
.rating-save-note{display:block;min-height:1.4em;margin-top:4px;font:12px/1.4 Moji,sans-serif;color:#627080}
.scoreboard:has(> .ranked-overlay:not([hidden])) > .clock{visibility:hidden}