*{box-sizing:border-box}html{background:#071020;color-scheme:dark}body{margin:0;color:#f2f7ff;font:16px Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 50% 0,#123d63,#071020 65%);min-height:100dvh}button,select{font:800 14px Arial;color:#f2f7ff;background:#152b47;border:1px solid #456181;border-radius:5px;padding:11px 16px;cursor:pointer}button:hover{background:#254665}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ffe443;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.primary{background:#ffdb2e;color:#141526;border:2px solid #fff09a;box-shadow:0 4px #946817;font-weight:900}.primary:hover{background:#ffe966}#app{max-width:1500px;margin:auto;padding:12px 20px calc(10px + env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;height:40px}.brand{font-weight:1000;font-size:26px;letter-spacing:-.04em;color:#fff;text-decoration:none;font-style:italic;white-space:nowrap}.brand b{color:#ffdf32;text-shadow:2px 2px #a83c17}nav{display:flex;gap:7px}nav button{padding:8px 12px;font-size:12px}#gameLayout{position:relative}.game-layout{display:grid;grid-template-columns:168px minmax(0,1fr) 190px;align-items:center;gap:15px}.arena{grid-column:2;grid-row:1;position:relative;width:100%;aspect-ratio:16/9;border:3px solid #6581b2;outline:2px solid #010815;background:#153250;overflow:hidden;box-shadow:0 15px 40px #0007}canvas{display:block;width:100%;height:100%;touch-action:none}.loading{position:absolute;inset:0;background:#0d2542;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;letter-spacing:.1em;font-weight:900;text-align:center}#loadProgress{color:#ffde37}.controls{user-select:none;-webkit-user-select:none;touch-action:none}.left-controls{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:14px}.dpad{width:156px;height:156px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);filter:drop-shadow(0 6px 0 #020a16);touch-action:none}.dpad button{padding:0;border:2px solid #6689af;font-size:24px;border-radius:9px;background:linear-gradient(#284868,#112740);touch-action:none}.dpad button[data-dir=up]{grid-column:2;grid-row:1}.dpad button[data-dir=down]{grid-column:2;grid-row:3}.dpad button[data-dir=left]{grid-column:1;grid-row:2}.dpad button[data-dir=right]{grid-column:3;grid-row:2}.dpad-center{grid-column:2;grid-row:2;background:#203e5d;display:grid;place-items:center;color:#86acda;font-size:26px}.dpad button.pressed{background:#527aa3;border-color:#ffeb70}.control-caption{font-size:10px;color:#8ba6c6;font-weight:800;letter-spacing:.1em}.right-controls{grid-column:3;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}.attack{position:relative;min-height:78px;border:3px solid #fff8;border-radius:50%;padding:12px 4px;background:radial-gradient(circle at 35% 25%,#62c7ff,#15418d);box-shadow:0 7px #08244a;overflow:hidden;touch-action:none}.attack b,.attack small{position:relative;z-index:1;display:block}.attack b{font-size:14px}.attack small{font-size:10px;opacity:.85;margin-top:5px}.kick{background:radial-gradient(circle at 35% 25%,#ffb775,#c44325);box-shadow:0 7px #632418}.power{grid-column:1/-1;min-height:65px;border-radius:16px;background:#3b2960;box-shadow:0 6px #1a1230}.power.ready{background:#8850c4;border-color:#f9d3ff;box-shadow:0 6px #3c175b,0 0 18px #a468ba77}.power>span{position:absolute;inset:0 auto 0 0;width:40%;background:#d29bff44;pointer-events:none}.attack:active,.attack.pressed{transform:translateY(4px);box-shadow:0 2px #071426}.underbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:18px;min-height:40px}.underbar>div{display:flex;gap:7px}.underbar button{font-size:12px;padding:10px}#status{font-size:14px;color:#a9c0dc}.rotate-hint{display:none}footer{font-size:10px;letter-spacing:.08em;color:#5f7c9b;text-align:center;margin-top:18px}.selection,.pause-panel{position:absolute;inset:0;z-index:4;background:linear-gradient(160deg,#082a52f8,#0c4973f5 65%,#071a37fa);border:2px solid #456e9e;padding:15px 28px;display:flex;flex-direction:column;gap:10px;align-items:center}.selection h1{font-size:clamp(28px,4vw,54px);font-style:italic;color:#ffdb26;text-shadow:3px 4px #f05523,5px 6px #010915;margin:0;letter-spacing:-.05em}.slots{display:flex;align-items:center;justify-content:center;gap:20px;width:100%}.slots button{min-width:30%;padding:10px;border:2px solid #6989b7;background:#081b39}.slots .active{border-color:#ffda24;box-shadow:0 0 0 2px #fff1a4}.slots>span{font-weight:900;color:#ffda24;font-style:italic}.fighters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;flex:1;min-height:0}.fighter{position:relative;padding:5px;background:linear-gradient(#2675a2,#0b254c);border:2px solid #6198c6;display:flex;flex-direction:column;align-items:center;min-height:0;overflow:hidden}.fighter img{width:100%;flex:1;min-height:0;object-fit:contain}.fighter strong{font-size:clamp(11px,1.4vw,18px);text-align:center;line-height:1.2}.fighter .number{position:absolute;top:6px;left:8px;font-size:36px;font-weight:900;font-style:italic;color:var(--color);text-shadow:2px 2px #07172e}.badges{position:absolute;right:5px;top:5px;display:flex;gap:3px}.badges small{background:#ffdf2b;color:#122035;padding:4px;font-size:11px;font-weight:900}.badges small.p2{background:#4ecbff}.selection-actions{display:flex;align-items:center;gap:24px}.selection-actions label{display:flex;align-items:center;gap:8px;font-weight:800;font-size:11px}.selection-actions button{font-size:22px;min-width:160px;padding:10px}.selection p{font-size:12px;margin:0;color:#a8c8e4}.pause-panel{justify-content:center;gap:15px;background:#06162dec}.pause-panel h2{font-size:40px;color:#ffdc35;margin:0 0 12px}.pause-panel button{min-width:230px}dialog{max-width:620px;width:calc(100% - 30px);max-height:90dvh;border:2px solid #6b8bad;border-radius:8px;background:#0c213d;color:#e4effb;padding:24px;line-height:1.5}dialog::backdrop{background:#010610c9}dialog p{font-size:14px}dialog h2{color:#ffda2c}dialog button{width:100%}#shareFallback{padding:15px;background:#182f4c;margin-top:10px}#shareFallback label{display:grid;gap:8px}#shareUrl{width:100%;padding:12px;font-size:16px}body:has(.selection:not([hidden])) .game-layout{min-height:min(650px,78dvh)}
@media(min-width:1100px){.game-layout{grid-template-columns:170px minmax(0,1fr) 200px}.selection{padding:20px 55px}.fighters{gap:22px}}
@media(max-width:950px) and (orientation:landscape){html,body{height:100%;overflow:hidden}#app{height:100dvh;max-width:none;padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));display:flex;flex-direction:column}header{height:30px;min-height:30px;margin-bottom:4px}.brand{font-size:21px}nav{gap:5px}nav button{font-size:10px;padding:6px 9px}.game-layout{flex:1;min-height:0!important;grid-template-columns:136px minmax(0,1fr) 154px;gap:8px}.arena{max-height:100%;width:100%;aspect-ratio:16/9;justify-self:center;align-self:center}.dpad{width:132px;height:132px}.left-controls{gap:5px}.dpad button{font-size:21px}.right-controls{gap:10px}.attack{min-height:67px}.attack b{font-size:12px}.attack small{display:none}.power{min-height:54px}.power small{display:block;font-size:9px}.control-caption{font-size:9px}.underbar{height:26px;min-height:26px;margin-top:4px}.underbar button{font-size:9px;padding:5px 7px}#status{font-size:10px;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}footer{display:none}.selection{padding:6px 16px;gap:5px}.selection h1{font-size:28px}.slots{gap:12px}.slots button{padding:5px 9px;font-size:12px}.fighters{gap:9px}.fighter strong{font-size:11px}.fighter .number{font-size:25px}.badges small{font-size:9px;padding:2px}.selection-actions{gap:15px}.selection-actions button{padding:6px;min-width:125px;font-size:17px}.selection-actions select{padding:5px;font-size:10px}.selection-actions label{font-size:9px}.selection p{display:none}}
@media(max-width:700px) and (orientation:landscape){.game-layout{grid-template-columns:136px minmax(0,1fr) 136px;gap:5px}.dpad{width:132px;height:132px}.attack{min-height:58px}.power{min-height:48px}.right-controls{gap:9px}.brand{font-size:19px}nav button{padding:5px 7px}.selection h1{font-size:24px}}
@media(orientation:portrait) and (max-width:950px){#app{padding:10px 10px max(12px,env(safe-area-inset-bottom))}header{flex-wrap:wrap;height:auto;min-height:65px;gap:8px;margin-bottom:8px}.brand{font-size:25px}nav{gap:5px;margin-left:auto}nav button{font-size:10px;padding:8px}.game-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto 180px;gap:18px 30px}.arena{grid-column:1/-1;grid-row:1}.left-controls{grid-column:1;grid-row:2}.right-controls{grid-column:2;grid-row:2;margin-right:8px}.dpad{width:150px;height:150px}.attack{min-height:72px}.power{min-height:60px}.underbar{flex-direction:column;align-items:flex-start;gap:10px;margin-top:8px}.underbar>div{width:100%;justify-content:flex-end}#status{font-size:12px;line-height:1.4}.rotate-hint{display:block;text-align:center;color:#9db7d2;font-size:12px;line-height:1.4;margin:12px 0 0}.selection{padding:12px;gap:10px}.selection h1{font-size:32px}.slots{gap:10px}.slots button{padding:8px;font-size:11px;min-width:40%}.fighters{gap:6px}.fighter strong{font-size:10px}.fighter .number{font-size:25px;left:4px}.selection-actions{gap:10px;width:100%;justify-content:space-between}.selection-actions label{flex-direction:column;align-items:flex-start;gap:4px}.selection-actions select{font-size:10px;padding:8px;max-width:170px}.selection-actions button{min-width:100px;font-size:20px}.selection p{font-size:11px}.selection .fighter img{max-height:240px}.badges small{padding:2px;font-size:9px}body:has(.selection:not([hidden])) .game-layout{min-height:450px}}

.opening{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:auto;background:radial-gradient(ellipse at 50% 40%,#123c70 0%,#061327 60%,#02060e 100%);padding:20px;text-align:center}.opening[hidden]{display:none}.opening-emblem{width:min(32vh,250px);height:min(32vh,250px);object-fit:contain;filter:drop-shadow(0 0 20px #007aff66)}.opening-title{margin:0;font-family:Impact,'Arial Black',sans-serif;font-style:italic;font-size:clamp(46px,8vw,106px);line-height:.92;letter-spacing:-2px;transform:skew(-8deg) rotate(-3deg);color:#ffdc29;text-shadow:3px 3px #f15a16,6px 6px #891b18,9px 9px #010611;-webkit-text-stroke:1px #ffed8a}.opening-title span{display:block;color:#ffad17;font-size:1.18em}.opening #playNow{margin-top:14px;font-size:clamp(22px,3vw,32px);min-height:62px;min-width:min(300px,85vw);padding:14px 28px;border:2px solid #fff3a6;box-shadow:0 5px 0 #873015,0 0 25px #ffb10033}.opening #playNow:disabled{opacity:.65}.opening p{color:#96b1cf;font-size:12px;letter-spacing:2px;margin:4px 0}.opening #playNow:focus-visible{outline:4px solid #fff;outline-offset:6px}@media(orientation:landscape) and (max-height:500px){.opening{gap:8px;padding:10px}.opening-emblem{position:absolute;left:7vw;top:50%;transform:translateY(-50%);width:30vw;height:70vh}.opening-title{font-size:clamp(40px,7vw,65px)}.opening-title,.opening #playNow,.opening p{margin-left:32vw}.opening #playNow{min-height:52px;margin-top:10px;padding:10px 24px}.opening p{font-size:10px;letter-spacing:1px}}

.opening-emblem{mix-blend-mode:normal}