:root{font-family:Inter,Arial,'Noto Sans KR',system-ui,sans-serif;color:#f4f5eb;background:#080d0e;color-scheme:dark;--lime:#d7ff5f;--muted:#8e9b98;--red:#ff6647}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#182827,#080d0e 70%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:none;user-select:none;color:inherit}button:disabled{cursor:default;opacity:.4}button:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button:active{transform:translateY(2px)}[hidden]{display:none!important}.game{width:min(1440px,100%);padding:0 34px}.topbar{height:80px;display:flex;align-items:center;gap:27px}.logo{color:#fff;text-decoration:none;font-weight:1000;font-size:26px;letter-spacing:-1.6px;font-style:italic}.logo span{font-size:16px;color:var(--lime);margin-left:8px}.edition{font:10px ui-monospace,monospace;letter-spacing:.13em;color:#8a9c97}.tools{margin-left:auto;display:flex;gap:8px}.tools button{background:transparent;border:1px solid #ffffff1c;border-radius:5px;padding:8px 11px;font-size:11px;color:#b3c1ba}.arena{position:relative;aspect-ratio:16/9;max-height:calc(100svh - 128px);margin:auto;isolation:isolate;overflow:hidden;border:1px solid #ffffff17;box-shadow:0 20px 90px #0008;background:#0d151a}canvas{width:100%;height:100%;display:block;object-fit:contain;image-rendering:pixelated}.hud{position:absolute;inset:28px 36px auto;display:grid;grid-template-columns:1fr 78px 1fr;gap:22px;pointer-events:none}.fighter-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;gap:10px}.fighter-name b{font-size:clamp(12px,1.6vw,21px);letter-spacing:-.07em;text-shadow:0 2px 3px #000}.fighter-name span{font:10px ui-monospace,monospace;color:#e1eecc;letter-spacing:.1em}.health{height:14px;background:#0008;border:1px solid #ffffff35;padding:2px;transform:skewX(-12deg)}.health i{display:block;background:var(--lime);height:100%;width:100%;box-shadow:0 0 16px #d7ff5f28;transition:width .14s linear}.boss .health i{background:var(--red);margin-left:auto}.fighter-card small{display:block;color:#ccd9cf;font:10px ui-monospace,monospace;margin-top:7px}.boss small{text-align:right}.round{display:flex;flex-direction:column;align-items:center;line-height:1}.round small{font:9px ui-monospace,monospace;letter-spacing:.1em;color:#839d91}.round b{font-size:38px;font-style:italic;line-height:1.1}.round>span{font:10px ui-monospace,monospace;color:#9cacaa}.controls{position:absolute;inset:auto 24px 18px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}.controls button{pointer-events:auto;position:relative;background:#111c24d9;border:1px solid #c9e7cf45;border-bottom:4px solid #0007;box-shadow:0 4px 0 #0005,inset 0 1px #ffffff12;border-radius:12px;min-width:64px;height:62px;backdrop-filter:blur(7px)}.controls button.active{background:#52682ce8;border-color:var(--lime);transform:translateY(3px)}.move-pad{display:flex;gap:8px}.move-pad button{font-size:21px;width:62px}.actions{display:flex;align-items:end;gap:8px}.actions button>span{font:8px ui-monospace,monospace;display:block;color:#9facaf;margin-bottom:6px}.actions b{font-size:14px;display:block;font-weight:750;line-height:1.2}.actions .jab{background:#d7ff5f;color:#182011;border-color:#d7ff5f;min-width:76px}.jab>span{color:#52682c!important}.actions .special{min-width:96px;height:78px;margin-right:14px;border-color:#e7b7ff6b;background:#382146ed}.special b{font-size:12px;color:#f1d4ff}.special small{display:block;font-size:8px;color:#d3a7e6;margin-top:4px}.front{position:absolute;inset:0;background:linear-gradient(90deg,#08100eed 0%,#08100ed6 35%,#08100e20 72%),linear-gradient(0deg,#050b0b70,transparent 70%);padding:9% 6%;display:flex;align-items:center;justify-content:space-between;z-index:5}.intro-copy{width:64%;max-width:610px}.eyebrow{color:var(--lime);font:11px ui-monospace,monospace;letter-spacing:.18em}.front h1{font-size:clamp(28px,4.7vw,68px);font-weight:900;letter-spacing:-.085em;line-height:1.15;margin:15px 0 20px}.front h1 em{color:var(--lime);font-style:normal}.front p{font-size:clamp(11px,1.2vw,16px);line-height:1.8;color:#bdc9c5;margin:0 0 25px}.start-row{display:flex;gap:10px}.primary,.resume{border:0;padding:17px 20px;background:var(--lime);color:#1b2718;border-radius:5px;font-size:15px;font-weight:800;min-width:245px;display:flex;justify-content:space-between;gap:20px}.resume{background:#ffffff19;color:#e8efde;min-width:0}.demo-buttons{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:21px}.demo-buttons>span{font-size:10px;color:#7f938b}.demo-buttons button{font-size:11px;border:0;border-bottom:1px solid #b0c7b74d;padding:0 0 5px;background:transparent;color:#bccfbc}.front p.rule{font-size:10px;color:#8d9b94;margin-top:15px;margin-bottom:0}.intro-stamp{align-self:flex-start;display:flex;gap:9px;align-items:center;color:#e0e9cc;margin-top:3%;border-top:1px solid #a3b08766;padding-top:9px;transform:rotate(4deg)}.intro-stamp>span{font:italic 700 43px/1 ui-monospace,monospace}.intro-stamp small{font:8px/1.7 ui-monospace,monospace;letter-spacing:.09em}.telegraph{position:absolute;left:50%;top:24%;transform:translateX(-50%);max-width:85%;text-align:center;background:#250c06ec;border:1px solid #ffbd614d;color:#ffdb92;padding:9px 20px;font-size:clamp(11px,1.3vw,17px);font-weight:700;box-shadow:0 7px 30px #0007;border-radius:4px;pointer-events:none}.escape{position:absolute;top:31%;left:50%;transform:translateX(-50%);font-size:12px;text-align:center;background:#101718e8;padding:12px 25px;border-radius:5px}.escape>div{display:flex;gap:7px;justify-content:center;margin-top:8px}.escape i{width:25px;height:5px;background:#566257}.escape i.filled{background:var(--lime)}.ko{position:absolute;z-index:4;inset:19% 0 auto;text-align:center;pointer-events:none;filter:drop-shadow(0 7px 0 #0008)}.ko>span{font:10px ui-monospace,monospace;letter-spacing:.4em;color:#fff0d0}.ko strong{display:block;font-size:clamp(65px,12vw,174px);line-height:.98;font-weight:1000;letter-spacing:-.11em;font-style:italic;color:#ffe995;-webkit-text-stroke:2px #794929;text-shadow:5px 5px 0 #5c291e}.ko strong span{color:#ff9c58}.ko p{color:#f1d5b3;font-size:clamp(12px,1.5vw,19px);font-weight:700;margin:14px 0 0;letter-spacing:-.04em}.victory{position:absolute;z-index:4;left:0;right:0;top:20%;text-align:center;pointer-events:none;text-shadow:0 3px 10px #000}.victory small{font:10px ui-monospace,monospace;letter-spacing:.3em;color:var(--lime)}.victory h2{font-size:clamp(21px,3vw,40px);letter-spacing:-.05em;margin:9px 0;color:#fff7da}.result-actions{position:absolute;z-index:5;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:10px}.result-actions button{border:1px solid #cde39742;border-radius:5px;padding:12px 23px;background:#d7ff5f;color:#172213;font-weight:800;font-size:12px;white-space:nowrap}.result-actions button+button{color:#d6e3cc;background:#192222ef}.load-error{position:absolute;inset:25%;z-index:20;background:#142220;display:grid;place-content:center;gap:20px;text-align:center}.load-error button{padding:10px;background:var(--lime);color:#172213;border:0}footer{height:48px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:#8b9d94}footer #status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keyboard{font:9px ui-monospace,monospace;white-space:nowrap;color:#71837a}.keyboard i{font-style:normal;margin:0 7px;color:#304d3e}.rotate{display:none;position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse,#243527,#0a1110 75%);text-align:center;align-content:center;padding:30px}.phone-icon{border:3px solid var(--lime);border-radius:15px;transform:rotate(-90deg);font-size:55px;width:90px;height:145px;margin:0 auto 55px;color:var(--lime);display:grid;place-content:center}.rotate h2{font-size:27px;letter-spacing:-.07em}.rotate p{font-size:14px;line-height:1.8;color:#92a894}.game[data-phase=ready] .hud,.game[data-phase=loading] .hud{opacity:.35}
@media(max-height:600px) and (orientation:landscape){body{height:100svh;overflow:hidden}.game{padding:0;width:100%;height:100svh}.topbar{position:absolute;top:0;right:0;height:30px;z-index:8}.logo,.edition,#sound{display:none}.tools{margin-right:9px}.tools button{padding:5px 8px;font-size:9px;background:#071317c9}.arena{width:min(100vw,calc(100svh * 16 / 9));height:100svh;max-height:none;border:0}.hud{inset:12px 24px auto;grid-template-columns:1fr 54px 1fr;gap:14px}.fighter-name{margin-bottom:6px}.fighter-name b{font-size:13px}.fighter-name span{font-size:8px}.health{height:10px}.fighter-card small{font-size:8px;margin-top:4px}.round b{font-size:26px}.round small{font-size:7px}.round>span{font-size:8px}.controls{inset:auto 12px 8px}.controls button{height:48px;min-width:50px;border-radius:9px}.move-pad button{width:50px}.actions{gap:6px}.actions .jab{min-width:53px}.actions .special{min-width:76px;height:60px;margin-right:4px}.actions .special b{font-size:10px}.actions .special small{font-size:7px}.actions button>span{font-size:7px;margin-bottom:3px}.actions b{font-size:12px}.front{padding:4% 6%}.front h1{font-size:36px;margin:10px 0 12px}.front p{font-size:11px;margin-bottom:14px}.eyebrow{font-size:8px}.primary,.resume{padding:11px 13px;font-size:12px;min-width:200px}.resume{min-width:0}.demo-buttons{gap:10px;margin-top:13px}.demo-buttons>span{display:none}.demo-buttons button{font-size:9px}.front p.rule{font-size:8px;margin-top:10px}.intro-stamp>span{font-size:33px}.intro-stamp small{font-size:6px}.telegraph{padding:5px 11px;font-size:11px;top:23%}.escape{font-size:10px;padding:7px 18px}.ko{top:21%}.ko strong{font-size:108px}.ko p{font-size:12px;margin-top:6px}.ko>span{font-size:8px}.result-actions{bottom:14px}.result-actions button{padding:10px 15px;font-size:11px}.victory{top:23%}.victory h2{font-size:25px}.victory small{font-size:8px}footer{display:none}}
@media(orientation:portrait) and (max-width:900px){.rotate{display:block}.game{visibility:hidden}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}.ko{filter:none}}
.victory{top:16%}.victory h2{font-size:clamp(21px,2.6vw,34px)}
@media(max-height:600px) and (orientation:landscape){.victory{top:18%}.victory h2{font-size:23px}}
@media(orientation:portrait) and (max-width:900px){body{overflow:hidden}.game{display:none}}

/* Keep fullscreen and menu controls reachable in both native and expanded views. */
.game[data-phase=ready] #fullscreen,.game[data-phase=loading] #fullscreen,
.game[data-phase=ready] #pause,.game[data-phase=loading] #pause{visibility:hidden}
.is-immersive body{overflow:hidden}
.is-immersive .game{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;padding:0;display:grid;place-items:center;background:#080d0e}
.is-immersive .arena{width:min(100vw,calc(100dvh * 16 / 9));height:auto;max-height:100dvh;border:0;margin:0}
.is-immersive .topbar{display:flex;position:absolute;z-index:8;right:max(14px,env(safe-area-inset-right));top:calc(max(0px,(100dvh - 100vw * 9 / 16) / 2) + 104px);height:auto}
.is-immersive .logo,.is-immersive .edition,.is-immersive #sound,.is-immersive footer{display:none}
.is-immersive .tools{margin:0}
.is-immersive .tools button{background:#0b171ced;min-height:40px}
.rotate button{margin-top:16px;border:1px solid #d7ff5f75;border-radius:7px;padding:13px 22px;background:#d7ff5f;color:#182011;font-weight:750}
.screen-notice{position:fixed;z-index:110;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:88vw;padding:12px 18px;border:1px solid #d7ff5f55;border-radius:6px;background:#0c1719f2;color:#e5efdc;font-size:12px;line-height:1.6;text-align:center;pointer-events:none}
@media(max-height:600px) and (orientation:landscape){
 .topbar,.is-immersive .topbar{top:calc(max(0px,(100dvh - 100vw * 9 / 16) / 2) + 65px);right:max(8px,env(safe-area-inset-right));height:auto}
 .tools{margin-right:0;gap:5px}.tools button{min-height:40px;padding:7px 10px;font-size:10px}
}
@media(orientation:portrait) and (max-width:900px){.is-immersive .game{display:none}}

.move-pad{
 --pad-size:168px;--pad-key:48px;
 position:relative;isolation:isolate;flex:none;display:grid;
 grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;
 width:var(--pad-size);height:var(--pad-size);padding:7px;border:1px solid #9da9ac68;border-radius:50%;
 background:radial-gradient(circle at 40% 28%,#7a8487e8 0%,#485255ed 48%,#202b30f5 74%);
 box-shadow:0 6px 0 #0208099e,0 8px 20px #0006,inset 0 2px 2px #eaf3f04d,inset 0 -4px 7px #020809b3;
}
.move-pad::before{
 content:"";position:absolute;inset:5px;z-index:-1;border:1px solid #121b20a6;border-radius:50%;
 box-shadow:inset 0 2px 5px #0610149e,0 1px 0 #c0cdc82b;pointer-events:none;
}
.move-pad::after{
 content:"";grid-area:2/2;place-self:center;width:23px;height:23px;border-radius:50%;
 background:radial-gradient(circle at 55% 68%,#465559,#0b1418 64%);
 box-shadow:inset 0 3px 5px #0009,0 1px 1px #dde9e354;pointer-events:none;
}
.controls .move-pad button{
 place-self:center;width:var(--pad-key);height:var(--pad-key);min-width:0;padding:0;
 border:2px solid #1c292ddd;border-top-color:#c3cfcc9e;border-radius:50%;
 background:radial-gradient(circle at 38% 28%,#c0c9c5,#7d8989 44%,#4b595f 78%);
 box-shadow:0 4px 0 #081317,0 5px 7px #0009,inset 0 1px 2px #f3fff28c,inset 0 -3px 3px #1b2b3180;
 font-size:15px;line-height:1;color:#1b2a2f;text-shadow:0 1px 0 #e8f5e45e;backdrop-filter:none;
 transition:background .07s,box-shadow .07s,transform .07s;
}
.controls .move-pad button.active,.controls .move-pad button:active{
 background:radial-gradient(circle at 40% 30%,#e9ffac,#bad863 58%,#698a39);
 color:#243413;border-color:#d7ff5f9c;transform:translateY(3px);
 box-shadow:0 1px 0 #081317,0 0 13px #d7ff5f45,inset 0 2px 4px #2439114d;
}
.move-pad [data-hold=up]{grid-column:2;grid-row:1}
.move-pad [data-hold=left]{grid-column:1;grid-row:2}
.move-pad [data-hold=down]{grid-column:2;grid-row:3}
.move-pad [data-hold=right]{grid-column:3;grid-row:2}
/* The four face buttons mirror the controller's circular directional cluster. */
.actions{
 --action-size:168px;--action-key:48px;--key-color:#d7ff5f;
 position:relative;isolation:isolate;flex:none;display:grid;
 grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;
 width:var(--action-size);height:var(--action-size);padding:7px;
 border:1px solid #9da9ac68;border-radius:50%;
 background:radial-gradient(circle at 40% 28%,#7a8487e8 0%,#485255ed 48%,#202b30f5 74%);
 box-shadow:0 6px 0 #0208099e,0 8px 20px #0006,inset 0 2px 2px #eaf3f04d,inset 0 -4px 7px #020809b3;
}
.actions::before{
 content:"";position:absolute;inset:5px;z-index:-1;border:1px solid #121b20a6;border-radius:50%;
 box-shadow:inset 0 2px 5px #0610149e,0 1px 0 #c0cdc82b;pointer-events:none;
}
.actions::after{
 content:"";grid-area:2/2;place-self:center;width:22px;height:22px;border-radius:50%;
 background:radial-gradient(circle at 55% 68%,#3e5057,#0b1418 64%);
 box-shadow:inset 0 3px 5px #0009,0 1px 1px #dde9e32b;pointer-events:none;
}
.controls .actions button{
 place-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
 width:var(--action-key);height:var(--action-key);min-width:0;margin:0;padding:0;
 border:2px solid #1c292ddd;border-top-color:#c3cfcc9e;border-radius:50%;
 background:radial-gradient(circle at 38% 28%,#c0c9c5,#7d8989 44%,#4b595f 78%);
 color:#1b2a2f;text-shadow:0 1px 0 #e8f5e45e;backdrop-filter:none;
 box-shadow:0 4px 0 #081317,0 5px 7px #0009,inset 0 1px 2px #f3fff28c,inset 0 -3px 3px #1b2b3180;
 transition:background .07s,box-shadow .07s,transform .07s;
}
.controls .actions button>span{font:7px/1 ui-monospace,monospace;color:var(--key-color)!important;opacity:.65;margin:0}
.controls .actions button b{font-size:12px;line-height:1.15;color:inherit;font-weight:800}
.controls .actions button small{font:7px/1.1 ui-monospace,monospace;color:inherit;opacity:.7;margin:0}
.actions [data-hold=guard]{grid-area:1/2}
.actions [data-action=evade]{grid-area:2/1;--key-color:#b8cfff}
.actions [data-action=jab]{grid-area:3/2}
.actions [data-action=rescue]{grid-area:2/3;--key-color:#e9c3ff}
.controls .actions button.active,.controls .actions button:active{
 background:var(--key-color);color:#132026;text-shadow:none;transform:translateY(3px);
 border-color:var(--key-color);box-shadow:0 1px 0 #060d11,0 0 13px #e4f7f838,inset 0 2px 4px #11251555;
}
.controls .actions button.active>span,.controls .actions button:active>span{color:inherit!important}
.controls .actions button:disabled{opacity:.4;filter:saturate(.35)}
.game[data-phase=intro] .hud{opacity:.45}
.intro-stage{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,#07141744,transparent 45%,#06111133)}
.intro-fighter{position:absolute;top:18%;width:34%;text-align:center;text-shadow:0 4px 14px #000;transition:opacity .25s,transform .25s}
.intro-ms{left:16%;color:var(--lime)}.intro-mak{right:13%;color:#ff9576}
.intro-fighter small{font:9px ui-monospace,monospace;letter-spacing:.18em}
.intro-fighter h2{margin:8px 0 5px;font-size:clamp(27px,3vw,45px);font-weight:900;letter-spacing:-.07em}
.intro-ms h2{font-size:clamp(40px,4.3vw,62px);letter-spacing:-.05em}
.intro-fighter p{font-size:11px;color:#c3cebf;margin:0}
.intro-stage[data-beat=ms] .intro-mak{opacity:0;transform:translateX(15px)}
.intro-stage[data-beat=mak] .intro-ms{opacity:.35}
.intro-stage[data-beat=round] .intro-fighter,.intro-stage[data-beat=fight] .intro-fighter{opacity:.2}
.intro-callout{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) skew(-9deg);font-size:clamp(36px,5vw,78px);white-space:nowrap;color:#fff2b7;text-shadow:4px 4px #58492e,0 8px 40px #000;font-weight:1000;letter-spacing:-.06em}
.intro-stage[data-beat=versus] .intro-callout{top:50%;font-size:clamp(32px,4vw,62px);color:#f0f4dc}
.intro-stage[data-beat=fight] .intro-callout{color:var(--lime);font-size:clamp(55px,7vw,104px)}
#skipIntro{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);pointer-events:auto;background:#0b1a20bb;border:1px solid #d6e5c629;border-radius:5px;padding:10px 15px;font-size:10px;color:#bacab6}
@media(max-height:600px) and (orientation:landscape){
 .intro-fighter{top:19%}.intro-fighter small{font-size:7px;letter-spacing:.08em}.intro-fighter h2{font-size:22px;margin:5px 0}.intro-ms h2{font-size:36px}.intro-fighter p{font-size:9px}
 #skipIntro{bottom:14px;padding:10px 14px;font-size:9px}
}
@media(max-height:600px) and (orientation:landscape){
 .move-pad{--pad-size:150px;--pad-key:44px;padding:5px}
 .controls .move-pad button{font-size:13px}
 .actions{--action-size:150px;--action-key:44px;padding:5px;gap:0}
 .controls .actions button b{font-size:11px}
}
@media(max-height:350px) and (orientation:landscape){
 .move-pad{--pad-size:140px;padding:2px}
 .actions{--action-size:140px;padding:2px}
}
/* A retry remains usable in the short landscape viewport. */
.load-error{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(88%,420px);padding:20px;gap:12px;border:1px solid #a3b08766;border-radius:8px}
.load-error p{margin:0;color:#bdc9c5;font-size:12px;line-height:1.6}
.load-error button{min-height:44px;border-radius:4px}