:root{color-scheme:dark;--navy:#081328;--gold:#ffbc38;--muted:#7b8ca9;--line:#263650;--blue:#33c4ff}*{box-sizing:border-box}html{background:#070c16}body{margin:0;color:#e9eef7;font-family:Arial,'Noto Sans JP',sans-serif;background:radial-gradient(ellipse at 50% 24%,#152236 0,#070c16 70%);min-height:100svh}button,select,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button{border:0}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}.cabinet{max-width:1440px;margin:0 auto;padding:22px 36px 10px}.topbar{height:42px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#e9eef7;font-weight:900;letter-spacing:2px;font-size:14px}.brand-mark{display:grid;place-items:center;background:var(--gold);color:#091323;font-size:21px;font-style:italic;width:28px;height:28px;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}.brand-small{color:#6f829f;font:9px monospace;letter-spacing:1.4px;border-left:1px solid #344155;margin-left:6px;padding-left:14px}.utilities{display:flex;gap:8px}.utilities button{height:31px;background:#101b2d;border:1px solid #28364b;border-radius:4px;color:#9badc8;font:11px monospace;padding:0 12px}.utilities button:hover{color:#fff;border-color:#7b8ca9}.utilities #fullscreen{font-size:21px;padding:0 8px}.machine{position:relative;aspect-ratio:16/9;isolation:isolate;background:#000;overflow:hidden;border:2px solid #34445e;border-radius:9px;box-shadow:0 25px 70px #0008,0 0 0 5px #0d1522,0 0 0 6px #253145}.screen{position:absolute;inset:0}.splash{background:#000;overflow:hidden}.title-art{position:absolute;height:100%;width:100%;object-fit:contain;image-rendering:pixelated}.splash-hit{position:absolute;inset:0;background:transparent}.splash-hit:hover{box-shadow:inset 0 0 60px #ffad1d12}.load-status{position:absolute;bottom:4%;left:0;right:0;text-align:center;background:#000c;color:#ffbc38;font:11px monospace;letter-spacing:3px;padding:8px}.loading-dots{animation:blink .8s steps(2,end) infinite}@keyframes blink{50%{opacity:.3}}.selection{background:radial-gradient(ellipse at 50% 35%,#182b44,#070e1c 75%);padding:3% 6% 1%;display:flex;flex-direction:column}.selection::before,.result::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fff0 0 3px,#0001 3px 4px);pointer-events:none;z-index:-1}.selection-heading{text-align:center}.eyebrow{font:bold 11px monospace;letter-spacing:3px;color:#ffc44b}.selection h1{font-size:clamp(18px,2.6vw,38px);letter-spacing:3px;margin:9px 0 5px}.selection-heading p{font-size:12px;color:#8fa1bb;margin:0}.machine-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1;min-height:0;margin:2.2% 0}.machine-card{position:relative;min-height:0;background:linear-gradient(135deg,#1b2a40,#0c182a);border:1px solid #35465d;border-radius:5px;text-align:left;padding:12px 20px;display:flex;flex-direction:column;overflow:hidden;transition:background .2s,border-color .2s}.machine-card::after{content:"";position:absolute;inset:12px;background:linear-gradient(140deg,transparent 60%,#ffffff04 60%,#ffffff04 72%,transparent 72%);pointer-events:none}.machine-card.selected{border:2px solid var(--gold);background:linear-gradient(135deg,#283342,#162035);box-shadow:inset 0 0 22px #ffb72307,0 0 20px #ffb72309}.card-index{font:10px monospace;color:#7285a1;letter-spacing:2px}.machine-preview{width:100%;height:0;flex:1;min-height:65px;object-fit:contain;image-rendering:pixelated}.card-caption{display:flex;align-items:center;gap:20px}.card-caption strong{font:bold clamp(24px,3.8vw,54px) monospace;color:#f4c64f;line-height:1}.card-caption>span{font:bold 11px monospace;letter-spacing:1px}.card-caption small{font:11px Arial,sans-serif;letter-spacing:0;color:#9aabc1;display:block;margin-top:5px}.stats{display:flex;gap:16px;border-top:1px solid #ffffff12;margin-top:9px;padding-top:8px;font:9px Arial,sans-serif;color:#8497b2}.stats b{color:#d6b65e;font:9px monospace;letter-spacing:2px}.selection-badge{display:none;position:absolute;right:0;top:0;background:var(--gold);color:#101726;font:bold 9px monospace;padding:6px 10px}.selected .selection-badge{display:block}.match-settings{display:flex;gap:18px;align-items:center;justify-content:space-between}.match-settings label{display:flex;align-items:center;gap:10px;font-size:11px;color:#8598b3}select{color:#e0e7f2;background:#142236;border:1px solid #3a4c65;font-size:11px;border-radius:3px;padding:8px}.match-settings fieldset{display:flex;border:0;margin:0;padding:0;gap:4px;align-items:center}.match-settings legend{float:left;font:9px monospace;color:#8a9bb2;margin-right:8px;padding:0;letter-spacing:1px}.match-settings fieldset button{background:#152337;border:1px solid #34465f;padding:8px 10px;font:10px monospace;color:#8b9bb2}.match-settings fieldset button.active{color:var(--gold);border-color:var(--gold)}.primary{background:linear-gradient(#ffc74e,#f49b22);box-shadow:0 3px 0 #9b5914;color:#1e1a12;border:1px solid #ffdb75;border-radius:3px;font:bold 17px monospace;padding:11px 26px;letter-spacing:1px}.primary:hover{filter:brightness(1.12)}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #9b5914}.primary span{font:11px Arial,sans-serif;display:inline-block;margin-left:8px;letter-spacing:0}.text-button{background:none;color:#7d91ae;font-size:10px;padding:8px;align-self:center;margin-top:5px}.battle{background:#09162b;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none}#arena{display:block;width:100%;height:75.56%;image-rendering:pixelated;background:#1c3544}.pause{position:absolute;right:1%;top:1.5%;width:3.5%;aspect-ratio:1;background:#0d192cc9;border:1px solid #a2b1c4;color:#e7e8e8;font:bold clamp(10px,1.7vw,23px) monospace}.touch-panel{height:24.44%;display:flex;align-items:center;justify-content:space-between;padding:1.2% 2.4%;border-top:3px solid #3e7aab;background:linear-gradient(#0b1c38,#051329);gap:2%;box-shadow:inset 0 4px 14px #0007}.directions,.attacks{display:flex;gap:9%;height:100%;align-items:center}.directions{width:39%;gap:4%}.directions button{display:flex;justify-content:center;align-items:center;width:28%;height:88%;background:linear-gradient(135deg,#263b50,#0b1828);border:3px solid #a0abb8;box-shadow:inset 0 0 0 3px #394a5d,3px 4px 0 #0008;border-radius:5px}.directions button span{font-size:clamp(18px,4vw,55px);color:#f0e8ce;text-shadow:2px 3px 0 #0008}.directions button.guard{width:30%;height:70%;margin-left:3%;flex-direction:column}.directions .guard span{font:bold clamp(9px,1.5vw,22px) monospace}.directions small{font-size:clamp(7px,.8vw,11px);color:#8fa5bb;margin-top:5px}.attacks{width:35%;gap:5%;justify-content:flex-end}.attack{position:relative;isolation:isolate;width:30%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #96a4b3;outline:2px solid #263748;box-shadow:inset 0 0 0 4px #0004,3px 5px 0 #0009;overflow:hidden}.attack span{font:bold clamp(9px,1.6vw,24px) monospace;z-index:1}.attack small{font-size:clamp(7px,.8vw,12px);z-index:1;margin-top:4px}.light{background:radial-gradient(circle at 35% 25%,#52deff,#0088d7 78%)}.heavy{background:radial-gradient(circle at 35% 25%,#ffd15a,#d57a00 78%)}.skill{background:radial-gradient(circle at 35% 25%,#ff7c6c,#ca172a 78%)}.skill i{position:absolute;inset:0;background:#08152cc4;transform-origin:bottom;transform:scaleY(0);pointer-events:none}.touch-panel button.pressed{filter:brightness(1.35);transform:translateY(3px);box-shadow:inset 0 4px 10px #0008}.stage-label{text-align:center;flex:1;font:bold clamp(8px,1.4vw,19px) monospace;letter-spacing:2px;color:#527cac}.stage-label strong,.stage-label span,.stage-label i{display:block}.stage-label span{font-size:.83em;margin-top:4px}.stage-label i{font:7px monospace;letter-spacing:1px;color:#3a5a83;border-top:1px solid #29456b;padding-top:10px;margin-top:10px}.announce{position:absolute;top:25%;left:0;right:0;text-align:center;pointer-events:none;font:bold clamp(24px,6vw,76px) Impact,monospace;color:#ffe060;text-shadow:4px 4px 0 #7a2713,-2px -2px 0 #1b1921;letter-spacing:3px}.announce small{display:block;font:bold .28em monospace;color:#fff;text-shadow:2px 2px 0 #000;letter-spacing:4px;margin-top:8px}.result{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#29303c,#070f1d 65%)}.result h2{font:bold clamp(32px,6vw,78px) Impact,monospace;letter-spacing:5px;color:#ffce4e;text-shadow:3px 5px #a45413;margin:2% 0 0}.result.lost h2{color:#a5bad2;text-shadow:3px 5px #2d4262}#winner-art{width:46%;height:32%;object-fit:contain;image-rendering:pixelated}.result p{font-size:13px;color:#c0cbdc;margin:0 0 2%}.result-actions{display:flex;gap:12px}.secondary{background:#142137;border:1px solid #435672;border-radius:3px;padding:11px 23px;font-size:12px;color:#c2cfe0}.secondary:hover{background:#23364f}.recruit-link{display:flex;gap:20px;align-items:center;text-decoration:none;color:#92a3bd;font-size:11px;margin-top:3%;border-top:1px solid #334153;padding-top:16px}.recruit-link b{color:#f4c353}.modal-shade{position:absolute;inset:0;z-index:20;background:#000a;backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center}.dialog{text-align:center;padding:30px 45px;background:#0c182b;border:1px solid #4b617e;border-radius:5px;min-width:300px}.dialog h2{font:bold 38px monospace;letter-spacing:4px;margin:14px 0 28px}.dialog button{display:block;width:100%;margin:14px 0 0}.below{display:flex;justify-content:space-between;color:#778aa6;padding:17px 1px;font:10px monospace}.below p{margin:0}.live-dot{display:inline-block;width:5px;height:5px;background:#f7b742;margin-right:6px;box-shadow:0 0 7px #ffb43366}.separator{margin:0 9px;color:#35445d}.desktop-hint span{margin-left:15px;color:#627690}.mobile-hint{display:none}.credit{text-align:center;font-size:9px;color:#465873;margin-top:4px;letter-spacing:.5px}.credit span{padding:0 9px}dialog{color:#ecf1fa;background:#101c30;border:1px solid #50627c;border-radius:7px;max-width:720px;width:90%;padding:35px}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog h2{font-size:22px;margin:15px 0 25px}.close{position:absolute;right:12px;top:8px;color:#9fb0c6;background:none;font-size:27px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px}.help-grid p{margin:0;font-size:12px;color:#96a8c2;line-height:1.7}.help-grid b{display:block;color:#ffc857;margin-bottom:3px}.help-note{color:#7186a6;font-size:11px;line-height:1.7;border-top:1px solid #2c405c;padding-top:16px;margin:20px 0}body:has(.machine:fullscreen){background:#000}.machine:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}.machine:fullscreen #arena{height:75.56%}
@media(min-width:1500px){.cabinet{padding-top:35px}}@media(max-width:1000px){.cabinet{padding:14px 18px}.brand-small{display:none}.selection{padding-top:2%}.selection h1{margin:4px 0}.selection-heading p{font-size:10px}.machine-cards{margin:1.5% 0;gap:12px}.machine-card{padding:9px 13px}.stats{margin-top:6px;padding-top:6px;gap:9px}.match-settings{gap:10px}.match-settings label{gap:5px;font-size:10px}.match-settings legend{display:none}.match-settings .primary{padding:9px 15px;font-size:14px}.match-settings fieldset button{padding:7px}.primary span{font-size:10px}.card-caption small{font-size:10px}.desktop-hint{font-size:9px}.desktop-hint span{margin-left:8px}.directions button{border-width:2px}.attack{border-width:3px}}
@media(pointer:coarse){.desktop-hint{display:none}.mobile-hint{display:block}.touch-panel button{touch-action:none}.attack{min-width:0}.utilities button{min-height:32px}}
@media(max-width:600px) and (orientation:portrait){.cabinet{padding:10px}.topbar{height:35px;margin-bottom:12px}.brand{font-size:11px;gap:5px;letter-spacing:1px}.brand-mark{width:22px;height:22px;font-size:17px}.utilities{gap:4px}.utilities button{font-size:9px;padding:0 7px}.utilities #help span{display:none}.machine{aspect-ratio:3/4;border-radius:6px}.title-art{object-fit:contain}.selection{padding:7% 5% 2%}.selection h1{font-size:25px}.eyebrow{font-size:9px}.selection-heading p{font-size:10px;margin-top:7px}.machine-cards{gap:10px;flex:1;margin:6% 0 4%}.machine-card{padding:10px 9px}.card-index{font-size:7px;letter-spacing:1px}.card-caption{flex-direction:column;align-items:flex-start;gap:8px}.card-caption strong{font-size:36px}.card-caption>span{font-size:8px;letter-spacing:.5px}.card-caption small{font-size:9px;line-height:1.6;max-width:120px}.stats{flex-direction:column;gap:5px;font-size:8px}.stats b{font-size:7px}.selection-badge{font-size:6px;padding:4px}.match-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}.match-settings label{flex-direction:column;align-items:flex-start;gap:5px}.match-settings fieldset{justify-content:flex-end}.match-settings fieldset button{padding:8px 5px;font-size:8px}.match-settings .primary{grid-column:1/-1;width:100%;padding:12px}.text-button{padding:13px}.battle #arena{height:71%;object-fit:contain;background:#030b16}.touch-panel{height:29%;padding:4% 3%;gap:0;flex-wrap:wrap;align-content:center}.directions{width:48%;height:66%;gap:5%}.directions button{width:30%;height:80%;box-shadow:inset 0 0 0 1px #394a5d,2px 3px 0 #0008}.directions button span{font-size:25px}.directions button.guard{width:31%;height:65%;margin-left:0}.directions .guard span{font-size:8px}.directions small{font-size:7px;margin-top:3px}.attacks{width:49%;height:66%;gap:5%}.attack{width:30%;border-width:2px;box-shadow:inset 0 0 0 2px #0004,2px 3px 0 #0009}.attack span{font-size:8px}.attack small{font-size:6px;margin-top:2px}.stage-label{position:absolute;bottom:3%;left:0;right:0;font-size:7px;letter-spacing:1px}.stage-label strong,.stage-label span{display:inline}.stage-label span{margin-left:8px}.stage-label i{display:none}.pause{width:30px;height:30px;top:1%;right:2%;font-size:16px}.announce{top:31%;font-size:30px}.below{gap:8px;flex-direction:column;padding-top:14px;font-size:8px;line-height:1.5}.credit{font-size:7px;line-height:1.8;padding:0 15px}.result h2{font-size:40px;margin:5% 0}.result #winner-art{width:90%;height:27%}.result p{font-size:11px}.result-actions{flex-direction:column;width:75%;gap:10px;margin-top:5%}.recruit-link{flex-direction:column;gap:10px;font-size:10px;margin-top:7%;padding-top:18px}.help-grid{gap:12px;grid-template-columns:1fr}dialog{max-height:88svh;padding:28px 22px}dialog h2{font-size:18px}.dialog{min-width:250px;padding:22px}.dialog h2{font-size:30px}}
@media(max-height:550px) and (orientation:landscape){.cabinet{padding:0;max-width:100vw}.topbar{height:30px;margin:0;padding:0 10px}.topbar .brand{font-size:10px}.brand-mark{width:19px;height:19px;font-size:15px}.utilities button{height:23px;min-height:23px;font-size:9px}.machine{height:calc(100svh - 30px);width:min(100vw,calc((100svh - 30px)*16/9));margin:auto;border-radius:0;border-width:1px}.below,.credit{display:none}.selection h1{font-size:20px}.eyebrow{font-size:8px}.selection-heading p{font-size:9px}.card-index{font-size:7px}.card-caption strong{font-size:30px}.card-caption>span{font-size:8px}.card-caption small{font-size:8px}.stats{font-size:7px;padding-top:4px;margin-top:4px}.stats b{font-size:7px}.match-settings label{font-size:9px}select{padding:5px;font-size:9px}.match-settings fieldset button{padding:5px 8px;font-size:8px}.match-settings .primary{padding:7px 18px;font-size:13px}.primary span{font-size:9px}.text-button{font-size:8px;margin-top:0;padding:5px}.selection-badge{font-size:7px;padding:4px}.card-caption{gap:10px}.directions .guard span{font-size:12px}.attack span{font-size:12px}.attack small{font-size:8px}.directions button span{font-size:30px}.stage-label{font-size:11px}.stage-label i{font-size:5px;margin-top:5px;padding-top:5px}.result h2{font-size:43px}.result p{font-size:10px}.result .primary,.result .secondary{padding:8px 18px;font-size:12px}.recruit-link{font-size:9px;margin-top:2%;padding-top:8px}}