@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b0f1c;--panel:#151d30;--panel2:#1b263b;--line:#334055;--text:#f2f4f8;--muted:#99aabe;--mint:#a6ffe4;--sun:#ffd498;--pink:#ff929b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:300px;overflow-x:hidden;background:#0b0f1c;color:var(--text);font:14px/1.55 "DM Sans","Malgun Gothic",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.52}
[hidden]{display:none!important}
::selection{color:#142130;background:var(--mint)}
.ambient{position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(100px);opacity:.23}
.ambient-a{width:500px;height:540px;left:-270px;top:-170px;background:#225f71}
.ambient-b{width:460px;height:500px;right:-250px;top:130px;background:#6c465f}
.shell{max-width:1360px;margin:auto;padding:0 28px}
.topbar{min-height:75px;border-bottom:1px solid #f4fbff17;display:flex;gap:20px;align-items:center;justify-content:space-between}
.back{font-size:11px;font-weight:800;letter-spacing:.1em;color:#b8c7d7;white-space:nowrap}
.back:hover{color:var(--mint)}
.back>span{font-size:19px;vertical-align:-1px;margin-right:6px}
.logo{font:900 25px "Barlow Condensed","Malgun Gothic",sans-serif;letter-spacing:.055em;white-space:nowrap}
.logo>span:last-child{color:var(--mint)}
.logo-icon{display:inline-grid;place-items:center;width:37px;height:37px;margin-right:9px;vertical-align:0;border-radius:11px;background:#a6ffe41a;border:1px solid #a6ffe475;color:var(--mint);font-size:27px}
.top-actions{display:flex;gap:8px;align-items:center}
.version{font:800 9px "Barlow Condensed",sans-serif;letter-spacing:.15em;color:#8597ad;margin-right:8px;white-space:nowrap}
.icon-btn{display:grid;place-items:center;width:37px;height:37px;border-radius:10px;background:#1b2b3a;border:1px solid #465869;color:#c6e9e4;font-weight:900;font-size:18px}
.icon-btn:hover,.icon-btn[aria-pressed=false]{color:#fbd5b0;background:#344252}
.heading{padding:40px 0 24px;display:flex;justify-content:space-between;align-items:end;gap:18px}
.eyebrow{font:900 11px "Barlow Condensed","Malgun Gothic",sans-serif;letter-spacing:.19em;color:var(--mint)}
.eyebrow i{display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--mint);border-radius:2px;transform:rotate(45deg)}
.heading h1{font:900 clamp(37px,4.3vw,61px)/1.08 "Barlow Condensed","Malgun Gothic",sans-serif;letter-spacing:-.025em;margin:7px 0 9px;word-break:keep-all}
.heading h1 em{color:var(--mint);font-style:normal}
.heading p:not(.eyebrow){max-width:670px;margin:0;color:#b6c5d7;font-size:13px;word-break:keep-all}
.heading-record{display:grid;gap:0;justify-items:end;min-width:166px;padding:7px 0}
.heading-record small{font:900 10px "Barlow Condensed",sans-serif;letter-spacing:.15em;color:#93a6b7}
.heading-record strong{font:900 35px/1.1 "Barlow Condensed",sans-serif;color:#f8daab;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.heading-record span{font-size:10px;color:#96a9ba;white-space:nowrap}
.game-area{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:17px;align-items:start}
.arena-box{min-width:0;border:1px solid #526277;border-radius:19px;background:linear-gradient(155deg,#172439,#101a2c);
 box-shadow:0 24px 55px #02051086;overflow:hidden}
.arena-hud{min-height:76px;display:flex;align-items:center;gap:19px;padding:13px 19px;border-bottom:1px solid #344457;
 background:linear-gradient(95deg,#253348,#15223a)}
.hud-block{display:grid;gap:2px;min-width:70px}
.hud-block small{font:900 10px "Barlow Condensed",sans-serif;letter-spacing:.14em;color:#93a6b7}
.hud-block strong{font:900 31px/1 "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--text)}
.hud-block strong sup{font-size:13px;color:#96b5bb;margin-left:2px}
.hud-block.score{flex:1}
.hud-block.score strong{color:var(--sun);letter-spacing:.065em}
.hud-block.combo strong{color:var(--mint)}
.hud-block.hp strong{font:800 15px/1.3 "DM Sans",sans-serif;white-space:nowrap;color:#ffadb5;letter-spacing:.04em}
.hud-pause{display:flex;gap:6px;align-items:center;justify-content:center;min-height:39px;
 border:1px solid #607388;background:#1e3042;color:#d8e7f1;border-radius:9px;font-weight:900;padding:9px 12px;font-size:11px}
.hud-pause:hover:not(:disabled){background:#355264}
.timer-track{height:5px;background:#26374e}.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#a5f4de,#ecdf9d);transition:width .12s linear}
.canvas-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#0c1626;overflow:hidden;isolation:isolate}
.canvas-wrap canvas{display:block;width:100%;height:100%;outline:none}
.arena-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;
 text-align:center;padding:25px;background:radial-gradient(ellipse at 50% 40%,#132640de,#080e1af5 88%);backdrop-filter:blur(3px)}
.arena-overlay.is-muted{background:#080e1cef}
.hero-badge{padding:5px 12px;border:1px solid #9de8cf8c;background:#88e9c50c;color:#b3ffeb;border-radius:6px;
 font:900 11px "Barlow Condensed",sans-serif;letter-spacing:.18em}
.arena-overlay h2{font:900 clamp(38px,6.1vw,86px)/1 "Barlow Condensed",sans-serif;letter-spacing:.025em;
 margin:13px 0 9px;color:#f4f6f8;text-shadow:0 7px 12px #000c}
.arena-overlay h2 em{color:var(--mint);font-style:normal}
.arena-overlay>p{max-width:520px;line-height:1.6;color:#bdcddd;margin:5px 0 17px;font-size:13px;word-break:keep-all}
.start-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:49px;padding:12px 19px;
 border-radius:10px;font-weight:900;white-space:nowrap}
.btn-primary{border:1px solid #b8ffe6;background:var(--mint);color:#13332f;font-size:14px;
 box-shadow:0 7px 20px #a6ffe426}
.btn-primary span{font-size:20px}
.btn-primary:hover{background:#d2fff0;transform:translateY(-1px)}
.btn-secondary{border:1px solid #65798e;background:#213448;color:#e3edf3;font-size:12px}
.btn-secondary:hover{background:#2e485d}
.start-detail{display:flex;flex-wrap:wrap;gap:9px;margin-top:19px;color:#aec0ce;font:800 10px "Barlow Condensed",sans-serif;letter-spacing:.07em}
.start-detail span{padding:6px 8px;border:1px solid #ffffff23;border-radius:7px;background:#192a3b9e}
.start-detail b{color:#fff0c6;padding-left:5px}
.end-overlay .end-score{font:900 clamp(36px,7vw,76px)/1.05 "Barlow Condensed",sans-serif;color:var(--sun);letter-spacing:.045em}
.end-overlay h2{font-size:clamp(30px,5vw,58px)}
.end-rank{font:900 14px "Barlow Condensed",sans-serif;letter-spacing:.16em;color:var(--mint);margin-top:6px}
.end-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:12px 0 18px}
.end-stats>div{display:grid;gap:0}
.end-stats small{font:800 9px "Barlow Condensed",sans-serif;letter-spacing:.08em;color:#afc0cb}
.end-stats strong{font:900 24px "Barlow Condensed",sans-serif;color:#fff0d8}
.controls{min-height:112px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(130px,.8fr) minmax(0,1.08fr);
 align-items:stretch;gap:12px;padding:13px 17px 8px;background:linear-gradient(90deg,#162439,#1c2941,#162439)}
.control{display:flex;align-items:center;gap:12px;justify-content:center;min-height:89px;border-radius:13px;
 padding:9px 13px;position:relative;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;
 -webkit-tap-highlight-color:transparent;transition:filter .13s,transform .09s}
.control:active:not(:disabled),.control.is-pressed{transform:translateY(2px) scale(.987);filter:brightness(1.1)}
.attack-control{border:2px solid #e4ffdc;background:linear-gradient(140deg,#9eecc8,#60d8c3);color:#113a32;
 box-shadow:inset 0 3px 5px #ffffff24,0 5px 15px #0004}
.jump-control{border:2px solid #fff3c8;background:linear-gradient(140deg,#f6d89e,#eeae7f);color:#47362c;
 box-shadow:inset 0 3px 5px #ffffff20,0 5px 15px #0004}
.control:disabled{opacity:.5;filter:saturate(.4)}
.control-graphic{position:relative;display:grid;place-items:center;flex:none;width:51px;height:51px;border-radius:14px;
 background:#1226341c;transform:rotate(-7deg)}
.fist{font-size:31px;filter:drop-shadow(0 2px 0 #2c74645e)}
.action-burst{position:absolute;top:-7px;right:-9px;font-size:20px;color:#ffeb9f}
.jump-glyph{font:900 55px/1 "Barlow Condensed",sans-serif;text-shadow:1px 2px 0 #704d3f24}
.control-copy{text-align:left;display:grid;gap:0}
.control-copy strong{font:900 31px/1 "Barlow Condensed",sans-serif;letter-spacing:.035em}
.control-copy small{font-size:10px;font-weight:850;white-space:nowrap}
.control kbd{border:1px solid #25363068;border-radius:3px;margin-left:2px;padding:1px 4px;font:900 10px "Barlow Condensed",sans-serif}
.controls-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.control-status{font-weight:850;color:#cfdfeb;font-size:10px;max-width:160px;line-height:1.35;word-break:keep-all}
.fury-label{color:#b7c7d8;font:900 10px "Barlow Condensed",sans-serif;letter-spacing:.04em;white-space:nowrap}
.fury-label b{color:var(--sun)}
.fury-track{width:100%;max-width:158px;height:9px;border-radius:6px;background:#3d3b4e;border:1px solid #756879;overflow:hidden}
.fury-track div{height:100%;width:0;background:linear-gradient(90deg,#ffb98a,#ffe0a0);transition:width .11s}
.live-status{padding:0 18px 15px;margin:0;background:#152338;min-height:26px;color:#aebfcf;font-size:11px;word-break:keep-all}
.side-panel{border:1px solid #34465b;border-radius:18px;background:linear-gradient(150deg,#1a283d,#111c2f);
 padding:20px;box-shadow:0 18px 38px #01051150}
.side-header h2{margin:4px 0 0;font:900 26px "Barlow Condensed","Malgun Gothic",sans-serif}
.side-rule{height:1px;background:#ffffff23;margin:17px 0}
.side-stat{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid #ffffff0d;padding:9px 0}
.side-stat span{font-size:11px;color:#9db0c6}
.side-stat strong{font:900 16px "Barlow Condensed",sans-serif;color:#f6d4a2;white-space:nowrap}
.side-heading{display:grid;gap:2px}
.side-heading small{font:900 10px "Barlow Condensed",sans-serif;letter-spacing:.15em;color:#8ebcb6}
.side-heading strong{font-size:13px}
.enemy-guide{display:grid;gap:10px;margin:13px 0 19px}
.enemy-guide>div{display:flex;gap:11px;align-items:center}
.enemy-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:19px;flex:none;border:1px solid #ffffff26}
.enemy-icon.grunt{background:#594457;color:#f5adbd}
.enemy-icon.sprinter{background:#665145;color:#ffd1a6}
.enemy-icon.guard{background:#4a4f70;color:#ccceff}
.enemy-icon.flyer{background:#315d69;color:#9debf3}
.enemy-guide p{display:grid;gap:0;margin:0}
.enemy-guide b{font-size:12px}
.enemy-guide small{font-size:10px;color:#9bb1c2}
.tip-box{padding:13px;border:1px solid #a6ffe44a;border-radius:12px;background:#a6ffe409}
.tip-box span{font:900 9px "Barlow Condensed",sans-serif;letter-spacing:.13em;color:var(--mint)}
.tip-box strong{display:block;color:#ddf9ed;font:900 19px "Barlow Condensed",sans-serif;margin:5px 0}
.tip-box p{margin:0;color:#a8c4be;font-size:11px;line-height:1.7;word-break:keep-all}
.side-share{margin-top:13px;width:100%;min-height:40px;background:#223549;border:1px solid #607588;border-radius:9px;color:#d0dce7;font-weight:850;font-size:11px}
.side-share:hover{background:#294b59}
.below{padding:40px 0 45px}
.below-top{display:flex;align-items:end;justify-content:space-between;gap:20px}
.below-top h2{margin:5px 0 0;font:900 32px "Barlow Condensed","Malgun Gothic",sans-serif}
.below-top>span{color:#758da7;font:850 11px "Barlow Condensed",sans-serif;letter-spacing:.1em}
.rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:17px}
.rule-grid>div{padding:19px;border:1px solid #415067;border-radius:14px;background:#162236}
.rule-grid>div>span{color:#a8e8d7;font:900 11px "Barlow Condensed",sans-serif;letter-spacing:.11em}
.rule-grid strong{display:block;font-size:16px;margin:6px 0}
.rule-grid p{margin:0;color:#9fb2c7;font-size:12px;line-height:1.7;word-break:keep-all}
footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff1e;padding:20px 0 30px;
 font:800 10px "Barlow Condensed",sans-serif;letter-spacing:.11em;color:#7991a9;flex-wrap:wrap}
footer a:hover{color:var(--mint)}
.help-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#030812ed;backdrop-filter:blur(8px)}
.help-content{max-height:85vh;overflow:auto;width:min(100%,550px);position:relative;padding:28px;
 border:1px solid #718294;border-radius:18px;background:#1a2b40;box-shadow:0 25px 70px #000a}
.close-help{position:absolute;right:15px;top:15px;display:grid;place-items:center;border:1px solid #5d7488;
 border-radius:50%;width:34px;height:34px;background:#20344b;color:#eaf2f1;font-size:21px}
.help-content h2{font:900 36px "Barlow Condensed","Malgun Gothic",sans-serif;margin:9px 0}
.help-content p{color:#b9c9d8;font-size:13px;line-height:1.85;margin:11px 0}
.help-content b{color:var(--mint)}
.help-content .btn-primary{width:100%;margin-top:13px}
@media(max-width:1090px){.game-area{grid-template-columns:minmax(0,1fr)}.side-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px 25px}.side-header,.side-panel>.side-rule,.side-heading,.enemy-guide,.tip-box,.side-share{grid-column:1/-1}.enemy-guide{grid-template-columns:repeat(4,1fr)}.enemy-guide>div{min-width:0}.side-share{margin-top:0}}
@media(max-width:700px){.shell{padding:0 13px}.topbar{min-height:62px;gap:8px}.back{font-size:9px}.back>span{font-size:14px;margin:0 3px 0 0}.logo{font-size:19px}.logo-icon{width:27px;height:27px;font-size:19px;margin-right:3px;border-radius:8px}.version{display:none}.icon-btn{width:31px;height:31px;font-size:15px}.heading{padding:25px 0 15px;gap:8px}.heading h1{font-size:clamp(29px,7.7vw,42px);margin:5px 0 7px}.heading p:not(.eyebrow){font-size:11px;line-height:1.6}.eyebrow{font-size:9px}.heading-record{min-width:90px}.heading-record small{font-size:9px}.heading-record strong{font-size:27px}.heading-record span{font-size:9px}.arena-box{border-radius:13px}.arena-hud{min-height:57px;gap:9px;padding:10px}.hud-block{min-width:0}.hud-block strong{font-size:23px}.hud-block small{font-size:8px}.hud-block.hp strong{font-size:10px;letter-spacing:-.03em}.hud-block.combo strong{font-size:23px}.hud-pause{font-size:14px;padding:5px 7px;min-height:34px}.hud-pause span{display:none}.arena-overlay{padding:10px}.arena-overlay h2{font-size:clamp(30px,9vw,62px)}.arena-overlay>p{font-size:10px;margin:5px 0 12px;line-height:1.45}.hero-badge{font-size:9px}.start-actions{gap:6px}.btn-primary,.btn-secondary{min-height:40px;padding:8px 13px;font-size:11px}.start-detail{gap:4px;margin-top:10px;font-size:8px;justify-content:center}.start-detail span{padding:3px 5px}.controls{gap:6px;padding:9px 8px 5px;grid-template-columns:minmax(0,1.2fr) minmax(92px,.6fr) minmax(0,1.2fr);min-height:82px}.control{min-height:69px;padding:7px 5px;gap:5px;border-width:1px;border-radius:10px}.control-graphic{width:32px;height:37px;border-radius:9px}.fist{font-size:23px}.jump-glyph{font-size:42px}.control-copy strong{font-size:25px}.control-copy small{font-size:8px}.control kbd{display:none}.control-status{font-size:8px}.fury-label{font-size:8px}.fury-track{height:7px}.live-status{padding:0 10px 10px;font-size:10px}.side-panel{padding:16px}.side-stat{font-size:11px}.enemy-guide{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.below{padding:30px 0}.below-top h2{font-size:27px}.below-top>span{display:none}.rule-grid{grid-template-columns:1fr;gap:10px;margin-top:12px}.rule-grid>div{padding:14px}.rule-grid strong{margin:3px 0;font-size:14px}.rule-grid p{font-size:11px}}
@media(max-width:400px){.shell{padding:0 8px}.topbar{gap:5px}.back{font-size:8px}.logo{font-size:17px}.heading h1{font-size:28px}.heading-record strong{font-size:25px}.heading-record{min-width:80px}.arena-hud{gap:6px}.hud-block strong{font-size:20px}.hud-block.hp strong{font-size:9px}.control-graphic{width:27px}.control-copy strong{font-size:22px}.control-copy small{font-size:7px}.controls{grid-template-columns:minmax(0,1.2fr) minmax(75px,.6fr) minmax(0,1.2fr)}.start-actions .btn-secondary{font-size:9px;padding:7px 9px}.start-detail{display:none}.end-overlay .end-stats{gap:12px;margin:5px 0 9px}.end-overlay h2{font-size:29px}.end-overlay .end-score{font-size:43px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The 16:9 fight scene is deliberately small in portrait; give menus the
   entire viewport so start/pause/results never clip behind the canvas. */
@media(max-width:700px){
 .canvas-wrap>.arena-overlay{
   position:fixed;inset:0;z-index:100;
   min-height:100dvh;max-height:100dvh;overflow-y:auto;
   overscroll-behavior:contain;justify-content:center;
   padding:calc(19px + env(safe-area-inset-top)) 15px
     calc(19px + env(safe-area-inset-bottom));
   background:radial-gradient(ellipse at 50% 36%,#1b3549f8,#080f1bfc 85%);
   backdrop-filter:blur(14px);
 }
 .arena-overlay .start-actions{max-width:360px}
 .arena-overlay .start-detail{justify-content:center}
 .arena-overlay .end-stats{min-width:min(100%,270px)}
}
@media(max-width:700px) and (max-height:490px){
 .canvas-wrap>.arena-overlay{justify-content:flex-start}
 .arena-overlay h2{font-size:32px;margin:7px 0}
 .arena-overlay>p{margin:3px 0 9px}
 .arena-overlay .start-detail{margin-top:6px}
}