:root{--ink:#173f3c;--paper:#f6f3e9;--mint:#d8e8d9;--yellow:#f4c945;--coral:#e77860}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',system-ui,sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #e85a33;outline-offset:3px}header{max-width:1440px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px 5%;border-bottom:1px solid #173f3c20}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:1px;color:inherit;text-decoration:none;font-size:17px}.brand small{display:block;font-size:10px;letter-spacing:1.2px;margin-top:2px}.mark{display:grid;place-items:center;background:var(--ink);color:var(--yellow);font-size:29px;width:43px;height:43px;border-radius:12px;transform:rotate(-7deg)}.headright{display:flex;align-items:center;gap:18px}.headright button{background:transparent;font-size:12px;border:1px solid #173f3c44;border-radius:30px;padding:8px 14px}.badge{font-size:10px;letter-spacing:2px}main{max-width:1440px;margin:auto;padding:38px 5%}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px}.titleline{display:flex;align-items:center;justify-content:space-between;margin:8px 0 26px}h1{font-size:clamp(22px,3vw,38px);letter-spacing:-1px;line-height:1.5;margin:0;font-weight:900}h1 span{color:#d76b42}.stamp{font-size:12px;transform:rotate(5deg);border:1px solid #173f3c60;border-radius:50%;padding:18px;text-align:center}.machine{border:8px solid var(--ink);border-radius:19px;overflow:hidden;box-shadow:0 12px 0 #173f3c16}.game{position:relative;aspect-ratio:1200/650;overflow:hidden;background:#e5e9cd}canvas{display:block;width:100%;height:100%}.cabinetbar{padding:11px 20px;background:var(--ink);color:#f2efdb;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1px}.cabinetbar i{display:inline-block;background:#e6bc43;width:7px;height:7px;border-radius:50%;margin-right:8px}.cabinetbar button{background:transparent;color:inherit;font-size:11px}.overlay{position:absolute;inset:0;background:#eff0dfed;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3%}.menutop{text-align:center}.pill{border-radius:20px;border:1px solid #173f3c55;padding:4px 14px;font-size:10px;font-weight:700}.menutop h2{font-size:clamp(30px,5vw,68px);line-height:.9;letter-spacing:-2px;margin:13px 0 6px;font-weight:900}.menutop em{color:#d56745;font-style:normal}.menutop p{font-size:11px;margin:12px 0}.cards{display:flex;gap:14px;width:72%;margin:6px 0 16px}.card{position:relative;flex:1;background:#e3e8d8;border:2px solid transparent;border-radius:14px;padding:10px 8px 9px;transition:transform .15s,border-color .15s}.card.active{border-color:var(--ink);background:#f6d873;transform:translateY(-4px);box-shadow:0 5px 0 #173f3c}.card:nth-child(2):not(.active){background:#bcd8cf}.card:nth-child(3):not(.active){background:#edc9b8}.card img{height:clamp(55px,10vw,145px);width:100%;object-fit:contain;display:block}.card b{display:block;font-size:15px}.card small{font-size:9px;display:block;margin-top:3px}.card .number{position:absolute;top:8px;left:10px;font-weight:900;font-size:11px;opacity:.5}.options{display:flex;align-items:end;gap:10px;width:87%;justify-content:center}.options label{font-size:9px;font-weight:700;display:flex;flex-direction:column;gap:5px;flex:1}.options select{background:#ffffffa8;border:1px solid #173f3c33;border-radius:6px;padding:9px;font-size:11px;width:100%}.start{background:var(--ink);color:#fff5cf;border-radius:7px;padding:13px 20px;font-size:13px;font-weight:800;white-space:nowrap}.start span{margin-left:20px}.menunote{font-size:9px;margin-top:15px;opacity:.7}.hidden{display:none!important}#hud{position:absolute;top:5%;left:4%;right:4%;display:flex;gap:25px;align-items:start}.fighterhud{flex:1}.fighterhud>div:first-child{display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-size:18px;font-weight:900}.fighterhud span{font-size:9px;letter-spacing:1px}.health{height:20px;background:#173f3c40;border:3px solid var(--ink);border-radius:4px;overflow:hidden;margin:5px 0}.health i{display:block;height:100%;width:100%;background:#f3ce4e;transition:width .14s}.meter{height:6px;background:#173f3c26;width:70%;border-radius:5px;overflow:hidden}.meter i{display:block;background:#d36d4a;height:100%;width:0}.right .health i,.right .meter i{float:right}.right .meter{margin-left:auto}.rounds{font-size:15px;letter-spacing:4px;margin-top:4px;color:#c87b32}.right .rounds{text-align:right}.timer{text-align:center;min-width:55px;display:flex;flex-direction:column;align-items:center}.timer small{font-size:8px;letter-spacing:2px}.timer b{font-size:35px;line-height:1.1}.timer button{background:var(--ink);color:white;border-radius:5px;font-size:12px;margin-top:8px;padding:3px 10px}#announcement{pointer-events:none;position:absolute;top:39%;left:0;width:100%;text-align:center;font-size:clamp(22px,5vw,64px);font-weight:900;color:#fff9df;text-shadow:3px 4px 0 #173f3c,-2px -2px 0 #173f3c;white-space:pre-line}.dialog{background:#f4f0e5ed;text-align:center}.dialog>div{max-width:90%}.dialog h2{font-size:clamp(26px,4vw,52px);margin:12px 0 20px}.dialog p{font-weight:700}.dialog button{display:block;margin:10px auto}.secondary{background:transparent;padding:9px 20px;font-size:12px;text-decoration:underline}.touch{display:flex;justify-content:space-between;gap:20px;margin:28px 0 0;touch-action:none;user-select:none}.directions,.actions{display:flex;gap:8px}.touch button{background:#e2e5d7;border:1px solid #173f3c33;border-bottom:4px solid #173f3c33;border-radius:10px;min-width:56px;height:52px;font-weight:800}.touch button.pressed{background:var(--yellow);transform:translateY(2px)}.actions button{padding:0 14px;font-size:12px}.actions small{display:block;font-size:8px;opacity:.5}.actions .special{background:#f3d37a}.guide{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:30px;margin-top:40px;padding-top:25px;border-top:1px solid #173f3c22}.guide h3{font-size:18px;margin:8px 0}.guide p{font-size:11px;line-height:2;color:#5b7166}.playerlabel{font-size:11px}kbd{background:#e8e9de;border:1px solid #173f3c20;border-bottom-width:2px;padding:3px 6px;border-radius:4px;font-size:10px;margin:0 2px}.subtle{opacity:.7;font-size:10px!important}footer{max-width:1440px;margin:auto;padding:25px 5%;border-top:1px solid #173f3c22;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px}@media(max-width:700px){header{padding:17px 4%}.brand{font-size:12px}.brand small{font-size:8px}.badge,.stamp{display:none}main{padding:25px 3%}.titleline{margin-bottom:18px}h1{font-size:24px}h1 span{display:block}.machine{border-width:5px;border-radius:12px}.game{aspect-ratio:0.94}.overlay{padding:12px}.menutop h2{font-size:44px}.cards{width:100%;gap:8px;margin:12px 0 18px}.card img{height:100px}.card b{font-size:13px}.card small{font-size:8px}.options{width:100%;flex-wrap:wrap;gap:8px}.options label{min-width:28%}.options .start{width:100%;padding:13px}.menunote{font-size:8px}.cabinetbar{padding:10px 8px;font-size:8px}.cabinetbar>span:nth-child(2){display:none}#hud{gap:10px;top:4%}.fighterhud>div:first-child{font-size:13px}.fighterhud span{font-size:7px}.timer{min-width:36px}.timer b{font-size:26px}.health{height:15px}.touch{gap:6px;margin-top:20px}.directions,.actions{gap:4px}.touch button{min-width:37px;height:49px}.actions button{padding:0 8px;font-size:10px}.guide{grid-template-columns:1fr;gap:15px;margin-top:25px}.guide p{margin:5px 0}.guide>div:first-child p{display:none}footer{font-size:8px}footer span:last-child{display:none}}@media(max-height:550px) and (orientation:landscape){header,.eyebrow,.titleline,.guide,footer{display:none}main{padding:5px 8%;max-width:1050px}.game{aspect-ratio:1200/650}.touch{margin-top:10px}.menutop h2{font-size:32px}.card img{height:60px}.cards{margin:2px 0 10px}.menunote{margin-top:5px}.menutop p{margin:5px}.stamp{display:none}}

/* Seven-member roster */
#menu{overflow-y:auto;justify-content:flex-start;padding:18px 3%;scrollbar-width:thin}
#menu .menutop h2{font-size:clamp(26px,3.8vw,48px);margin:9px 0 5px}
#menu .menutop h2 br{display:none}
#menu .menutop h2 em{margin-left:.2em}
#menu .menutop p{margin:8px 0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(88%,820px);gap:9px;margin:7px 0 14px}
.card{min-width:0;padding:5px 5px 7px}
.card img{height:clamp(55px,6vw,83px)}
.card b{font-size:12px}.card small{font-size:8px}
.card:nth-child(4n){background:#c1d4e8}.card:nth-child(5){background:#d8cee5}.card:nth-child(6){background:#e9c99f}.card:nth-child(7){background:#e8bfc9}.card.active{background:#f6d873}
.card.active::after{content:'1P';position:absolute;right:7px;top:6px;background:var(--ink);color:#fff3ca;border-radius:4px;padding:2px 5px;font-size:9px;font-weight:800}
@media(max-width:700px){.game{aspect-ratio:.77}#menu{padding:17px 10px}.cards{width:100%;gap:7px;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 0 15px}.card img{height:72px}.card b{font-size:11px}.card small{font-size:7px}#menu .menutop h2{font-size:27px}#menu .menutop .pill{font-size:9px}.menunote{line-height:1.7}.options .start{padding:11px}.options select{padding:7px 4px}}
@media(max-height:550px) and (orientation:landscape){.game{aspect-ratio:1200/650}#menu{padding:6px 3%;justify-content:flex-start}.cards{grid-template-columns:repeat(7,minmax(0,1fr));width:100%;gap:5px}.card img{height:70px}.card small{display:none}#menu .menutop h2{font-size:25px}.menutop .pill,.menutop p{display:none}.options{width:95%}.options .start{width:auto}}

.start:disabled{opacity:.55;cursor:wait}

/* PC and gamepad edition */
main{max-width:1560px}.game{aspect-ratio:16/9!important}.touch{display:none}.pad-status{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:25px 0 0;font-size:11px}.pad-status>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pad-status button,.training-controls button{background:#dbe5d8;border:1px solid #173f3c33;border-radius:6px;padding:8px 13px;white-space:nowrap}.training-controls{display:flex;align-items:center;gap:20px;margin:15px 0;padding:15px;background:#e4eadb;border-radius:9px;font-size:11px}.training-controls select{padding:6px;border:1px solid #173f3c33;background:#f8f7ee;border-radius:4px}#inputDisplay{margin-left:auto;font-weight:800;letter-spacing:1px}.pad-focus{outline:3px solid #df7244!important;outline-offset:3px!important}.controller-panel{position:fixed;inset:0;z-index:100;background:#12352fed;display:grid;place-items:center;padding:24px}.controller-sheet{width:min(980px,96vw);max-height:92vh;overflow:auto;background:var(--paper);padding:28px;border-radius:16px}.settings-header{display:flex;justify-content:space-between;align-items:center}.settings-header h2{margin:7px 0}.settings-header button{background:#dae4d5;padding:10px;border-radius:7px}.controller-sheet p{font-size:11px;line-height:1.8}.pad-config-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px}.pad-config h3{font-size:15px}.pad-config select{width:100%;padding:10px;background:#fffaf0;border:1px solid #173f3c33;border-radius:5px;margin-bottom:10px}.binding-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #173f3c16;padding:6px 0;font-size:11px}.binding-row button{background:#dde6d8;min-width:95px;padding:6px;border-radius:4px;font-size:10px}.binding-row button.listening{background:#f1ce68}.pad-tuning{display:flex;align-items:center;gap:25px;margin-top:25px;font-size:11px}.pad-tuning label{display:flex;align-items:center;gap:10px}.pad-tuning button{margin-left:auto;padding:9px;background:#dfd7c3;border-radius:5px}#bindingStatus{min-height:24px;font-weight:700;color:#b8633f}#menu .secondary{margin-top:9px;font-size:10px;padding:3px 15px}.guide{grid-template-columns:1fr 1fr 1.3fr}.guide p{font-size:10px}.cards{grid-template-columns:repeat(7,minmax(0,1fr));width:96%;margin:16px 0 25px}.card img{height:clamp(75px,8vw,120px)}.card small{font-size:8px}.menutop{margin-top:12px}.options{width:92%}.menunote{margin-top:14px}.machine:fullscreen{width:100vw;height:100vh;background:#122e2b;display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0}.machine:fullscreen .game{height:min(94vh,56.25vw);width:min(100vw,167.1vh);aspect-ratio:16/9;margin:auto}.machine:fullscreen .cabinetbar{flex-shrink:0}.machine:fullscreen .controller-panel{position:fixed}.controller-panel:popover-open{display:grid}
@media(max-width:800px){.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:5px 0 10px}.card img{height:45px}.card small{display:none}.menutop{margin-top:0}#menu{padding:8px}#menu .menutop h2{font-size:25px}.menutop p,.menutop .pill{display:none}.options label{min-width:20%}.options .start{width:auto;padding:8px}.menunote{margin-top:5px;font-size:7px}.guide{grid-template-columns:1fr}.pad-status{font-size:9px}.pad-config-columns{gap:12px}.controller-sheet{padding:18px}.pad-tuning{flex-wrap:wrap}.training-controls{gap:9px;flex-wrap:wrap}}

/* Phaser controls the backing buffer; CSS controls the cabinet size. */
#game{width:100%!important;height:100%!important;object-fit:fill;}

/* Character under the roster follows mouse, keyboard focus and gamepad. */
#menu{padding:12px 3%}
#menu .menutop{margin-top:0}
#menu .menutop h2{font-size:clamp(26px,3vw,40px);margin:7px 0 4px}
#menu .menutop p{margin:6px 0}
#menu .cards{flex-shrink:0;margin:9px 0 10px}
#menu .card img{height:clamp(55px,5.5vw,82px)}
.card:hover:not(.active){border-color:#779b8e}
.character-preview{display:grid;grid-template-columns:minmax(115px,210px) minmax(0,1fr);align-items:center;flex-shrink:0;width:min(92%,730px);height:clamp(144px,13.5vw,190px);margin:0 0 10px;border:1px solid #b8d1c2;border-radius:12px;background:#fafaf1;overflow:hidden}
.preview-stage{height:100%;min-height:0;position:relative;background:radial-gradient(ellipse at 50% 95%,#cadcc8 0%,#edf2e6 52%,#f8faf100 75%)}
.preview-stage img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.preview-info{min-width:0;padding:12px 20px 12px 9px}
.preview-caption{font-size:8px;font-weight:800;letter-spacing:2px;color:#698579}
.preview-info h3{font-size:clamp(20px,2.5vw,30px);line-height:1.25;margin:4px 0}
.preview-info p{font-size:11px;margin:4px 0 10px}
.preview-special{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}
.preview-special>span{font-size:8px;border:1px solid #d8b872;border-radius:4px;padding:3px 5px}
.preview-special b{font-size:12px}
.preview-special small{display:block;width:100%;font-size:12px;letter-spacing:1px}
.character-preview{width:min(94%,940px);grid-template-columns:minmax(110px,185px) minmax(0,1fr) minmax(150px,230px)}
.stage-preview{padding:12px 14px 12px 9px;min-width:0}
.stage-preview img{display:block;width:100%;height:96px;object-fit:cover;border-radius:6px;border:1px solid #173f3c22}
.stage-preview span{display:block;font-size:7px;letter-spacing:1px;color:#6c8378;margin:6px 0 3px}
.stage-preview b{display:block;font-size:11px}
/* The stage remains visible behind names, meters and round markers. */
#hud{top:6px;left:1.2%;right:1.2%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;gap:20px;color:#fff7dc;text-shadow:0 1px 3px #071b28,1px 1px 0 #071b28}
#hud .fighterhud>div:first-child{color:inherit}
#hud .health{background:#10282c99;margin:3px 0 4px}
#hud .meter{background:#10282c99}
#hud .rounds{color:#ffdc75;margin-top:2px}
#hud .timer button{margin-top:3px}
@media(max-width:700px){#hud{top:4px;gap:10px}}
.gimmick-notice{position:absolute;top:25%;left:10%;right:10%;padding:8px 12px;border:1px solid #ffd76b;border-radius:7px;background:#25352de8;color:#ffe9ad;text-align:center;font-size:clamp(9px,1.05vw,14px);font-weight:700;pointer-events:none;z-index:2}
.stage-preview small{display:block;margin-top:4px;font-size:9px;color:#875f36}
#menu .options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:8px;width:96%}
#menu .options label{min-width:0}
@media(max-width:950px){#menu .options{grid-template-columns:repeat(3,minmax(0,1fr))}#menu .options .start{width:100%;padding:9px}.gimmick-notice{left:5%;right:5%;top:27%;padding:5px 8px}.stage-preview small{font-size:8px}}
@media(max-width:480px){#menu .options{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-preview small{font-size:7px}}
#menu .menunote{margin-top:8px}
#menu .secondary{margin-top:5px}
@media(max-width:1100px){#menu .menutop .pill,#menu .menutop p{display:none}#menu .menutop h2{font-size:28px}.preview-info{padding-right:12px}.preview-info p{font-size:10px}.preview-special b{font-size:11px}}
@media(max-width:800px){#menu .cards{grid-template-columns:repeat(7,minmax(0,1fr));width:100%;gap:4px;margin:6px 0 8px}#menu .card{padding:3px 2px 5px}#menu .card img{height:43px}#menu .card b{font-size:9px}#menu .card .number{display:none}.card.active::after{right:2px;top:2px;padding:1px 3px;font-size:7px}.character-preview{height:128px;width:96%;grid-template-columns:120px minmax(0,1fr);margin-bottom:8px}.preview-info h3{font-size:21px}.preview-caption{font-size:7px}.preview-info p{margin-bottom:6px}.preview-special small{font-size:10px}}
@media(max-width:800px){.character-preview{grid-template-columns:95px minmax(0,1fr) 135px}.stage-preview{padding:8px}.stage-preview img{height:65px}.stage-preview b{font-size:9px}.stage-preview span{font-size:6px;letter-spacing:0}.preview-info{padding:8px 4px}.preview-info h3{font-size:18px}.preview-info p{font-size:9px}.preview-special b{font-size:9px}}
@media(max-width:480px){.character-preview{grid-template-columns:75px minmax(0,1fr) 100px}.stage-preview{padding:6px}.stage-preview img{height:55px}.stage-preview span{display:none}.stage-preview b{margin-top:5px}.preview-info h3{font-size:16px}.preview-info p{font-size:8px}.preview-special small{font-size:9px}}

#previewCommand,#commandGuide{white-space:pre-line;line-height:1.8}#previewCommand{font-size:11px} .preview-special{max-height:240px;overflow:auto}