*{box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#100e13;color:#fff7df;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;touch-action:none}
canvas{display:block;width:100%;height:100%}button{font:inherit;color:inherit;cursor:pointer;touch-action:none}button:focus-visible{outline:3px solid #fff;outline-offset:3px}[hidden]{display:none!important}
.hud{position:fixed;z-index:5;top:max(9px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none;gap:100px}.fighter{width:36%;max-width:480px}.name{display:flex;justify-content:space-between;gap:8px;font-size:clamp(16px,2.8vw,26px);letter-spacing:.04em;text-shadow:2px 2px #000}.bar{height:15px;border:2px solid #ffefbe;background:#311917;box-shadow:2px 2px #000}.fill{height:100%;background:linear-gradient(90deg,#8cff25,#d6e526,#ec7524);transform-origin:left;transition:transform .15s}.fighter.right{text-align:right}.status{margin-top:4px;color:#ffd76c;font:700 11px/1.2 monospace;text-shadow:1px 1px #000;min-height:25px}
.toolbar{position:fixed;z-index:25;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:6px}.toolbar button{height:36px;padding:0 10px;border:1px solid #c5b792;background:#12131ee8;border-radius:7px;font:700 12px monospace}.toolbar button.active{color:#8cff25}
.select{position:fixed;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:55px 18px 22px;background:radial-gradient(ellipse at center,#392916,#09080b 75%);text-align:center;overflow:auto}.select h1{margin:0;color:#8cff25;font-size:clamp(48px,12vw,110px);line-height:.8;text-shadow:5px 5px #000}.select p{margin:0;color:#dbd0b2;font:700 12px/1.4 monospace;max-width:580px}.roster{display:grid;grid-template-columns:repeat(3,minmax(80px,140px));gap:8px}.roster button{min-height:48px;padding:9px;border:2px solid #6a5837;background:#161311;font-size:19px}.roster button.active{background:#8cff25;color:#172008;border-color:#edffd5}.select #start,.message button{padding:12px 22px;border:3px solid #efac33;background:#151515;font-size:22px}.select button:disabled{opacity:.6}
.controls{position:fixed;z-index:8;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;pointer-events:none}.joystick{width:150px;height:164px;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:4px;pointer-events:auto;color:#fff8;font:700 10px monospace}.joystick-ring{width:142px;height:142px;border-radius:50%;border:3px solid #fff8;background:radial-gradient(circle,#373a46aa 0 23%,#1b1e27bb 24% 100%);box-shadow:inset 0 0 22px #0009,0 3px 0 #0008;position:relative}.joystick-knob{position:absolute;left:50%;top:50%;width:62px;height:62px;border:3px solid #fffc;border-radius:50%;background:#777d91dd;box-shadow:0 5px 12px #0008;transform:translate(-50%,-50%)}.joystick.active .joystick-knob{background:#b7bed2}.button{border:2px solid #fff9;background:#2d303aab;border-radius:13px;font:900 21px monospace;box-shadow:0 3px 0 #0008}.button.active{background:#ffffff75;border-color:#fff}.actions{display:grid;grid-template-columns:repeat(2,70px);gap:9px;pointer-events:auto}.action{width:70px;height:70px;padding:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.action b{font:900 13px Impact,sans-serif}.action small{font:700 10px monospace;color:#ffe8a3;pointer-events:none}.strike{background:#80372299;border-color:#ff9271}.grab{background:#204886bb;border-color:#80b4ff}.evade{background:#563987aa;border-color:#b598ff}.block{background:#2a5926aa;border-color:#9bfa5a}
.grapple-menu{position:fixed;z-index:9;left:50%;top:76px;transform:translateX(-50%);padding:9px;border:1px solid #f3c76c;border-radius:8px;background:#141215eb;text-align:center}.grapple-menu p{margin:0 0 7px;font:700 12px monospace;color:#ffe094}.grapple-menu .choices{display:flex;gap:6px}.grapple-menu button{min-height:40px;padding:6px 10px;border:1px solid #eeb958;background:#342a1e;font:700 12px monospace}.hint{position:fixed;bottom:5px;left:50%;transform:translateX(-50%);color:#ffe7ab;font:700 10px monospace;pointer-events:none;text-shadow:1px 1px #000;text-align:center;max-width:40vw}.loading{position:fixed;z-index:20;bottom:18px;left:50%;transform:translateX(-50%);max-width:88%;text-align:center;color:#b6ff6e;background:#111d;padding:8px 12px;font:700 12px monospace;border-radius:6px;pointer-events:none}.message{position:fixed;z-index:13;inset:0;background:#0b0915c9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.message h1{font-size:clamp(44px,10vw,90px);color:#eabc55;margin:0 0 20px;text-shadow:4px 4px #000}.impact-flash{position:fixed;z-index:4;inset:0;pointer-events:none;background:#fff1;opacity:0;transition:opacity .1s}
@media(orientation:landscape){.hint{bottom:9px;max-width:45vw}.select{padding-top:48px;gap:8px}.select h1{font-size:45px}.select h1 br{display:none}.roster{grid-template-columns:repeat(5,minmax(65px,110px));gap:6px}.roster button{font-size:16px;min-height:39px;padding:6px}.select #start{padding:7px 20px;font-size:19px}.select p{font-size:11px}.actions{grid-template-columns:repeat(2,64px);gap:8px}.action{width:64px;height:64px}.joystick{width:130px;height:138px}.joystick-ring{width:120px;height:120px}.grapple-menu{top:66px}}
@media(max-width:430px){.toolbar{top:65px}.hud{gap:25px}.fighter{width:45%}.joystick{width:132px;height:146px}.joystick-ring{width:126px;height:126px}.actions{grid-template-columns:repeat(2,64px);gap:6px}.action{width:64px;height:64px}.grapple-menu{top:108px;min-width:290px}.grapple-menu .choices{gap:4px}.grapple-menu button{font-size:10px;flex:1;padding:5px}.hint{bottom:218px;max-width:90vw;width:90vw}.select{padding-top:110px}.select p{font-size:11px}}
.run{background:#705819cc;border-color:#ffdb65;grid-column:1 / -1;width:100%;height:43px;border-radius:12px}.action small{font-size:9px}.toolbar{gap:4px}.toolbar button{padding:0 7px;font-size:10px}
.recovery-bar{height:4px;background:#152236;margin-top:4px}.recovery-bar div{height:100%;background:#70d3ff;transform-origin:left}.settings-panel{position:fixed;z-index:30;top:60px;left:50%;transform:translateX(-50%);width:min(92vw,520px);max-height:calc(100dvh - 80px);overflow:auto;padding:18px;background:#171723;border:2px solid #d3c78b;border-radius:10px;font:14px/1.5 system-ui;touch-action:pan-y}.settings-panel h2{margin:0 0 10px}.settings-panel label{display:flex;justify-content:space-between;align-items:center;margin:14px 0}.settings-panel input{width:65%;touch-action:auto}.settings-panel a{color:#adf970}.settings-panel button,.opponent-label select{background:#2c3043;padding:8px;color:white;border:1px solid #a2aac3;border-radius:5px}.opponent-label{font:13px system-ui}.select p{font-size:13px}.select{touch-action:pan-y}.roster{grid-template-columns:repeat(4,minmax(58px,110px))}.roster button{font-size:15px;min-height:40px}.action b{font-size:14px}
@media(orientation:landscape){.fighter{width:30%}.roster{grid-template-columns:repeat(7,minmax(54px,85px))}.select p{font-size:12px}.roster button{font-size:13px}}
@media(max-width:430px){.settings-panel{top:110px;max-height:calc(100dvh - 130px)}.toolbar button{padding:0 5px;font-size:9px}.roster{gap:5px}.select{justify-content:flex-start;padding-top:115px}.select h1{font-size:48px}.status{font-size:10px}}
@media(orientation:landscape) and (max-height:440px){.select{justify-content:flex-start;padding-top:50px}.select h1{font-size:30px}.select p{font-size:10px}.roster button{min-height:30px}.actions{gap:5px}.action{height:57px;width:64px}.run{height:36px;width:100%}.hint{max-width:40vw}}
.mode-switch{display:flex;gap:7px}.mode-switch button,.room-actions button,.room-actions input,.online-lobby button{min-height:38px;padding:7px 12px;border:2px solid #6a5837;background:#171515;color:#fff7df;font:800 13px monospace}.mode-switch button.active{color:#172008;background:#8cff25;border-color:#edffd5}.online-lobby{display:flex;flex-direction:column;gap:8px}.room-actions{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.room-actions span{font:700 11px monospace}.room-actions input{width:125px;text-transform:uppercase;text-align:center;letter-spacing:.12em}.room-actions button,.online-lobby button{border-color:#efac33}.online-lobby strong{display:block;margin-bottom:8px;color:#a9ff61;font:800 14px monospace}.online-lobby button+button{margin-left:6px}.select.online #opponentLabel,.select.online #start{display:none}@media(orientation:landscape) and (max-height:440px){.joystick{width:115px;height:122px}.joystick-ring{width:108px;height:108px}.joystick-knob{width:52px;height:52px}.mode-switch button,.room-actions button,.room-actions input,.online-lobby button{min-height:31px;padding:4px 8px}.online-lobby strong{font-size:12px}.select.online p:last-child{display:none}}
.chat-toggle{position:fixed;z-index:28;right:max(10px,env(safe-area-inset-right));top:52px;padding:7px 10px;border:1px solid #8cff25;background:#111d;color:#b8ff76;font:800 11px monospace}.chat-panel{position:fixed;z-index:29;right:max(10px,env(safe-area-inset-right));top:89px;width:min(330px,88vw);padding:8px;background:#111e;border:1px solid #8cff25;border-radius:7px;font:12px monospace}.chat-log{height:110px;overflow:auto;text-align:left}.chat-log p{margin:4px 0}.chat-log b{color:#8cff25}.chat-panel form{display:flex;gap:5px}.chat-panel input{min-width:0;flex:1;padding:8px;background:#222;color:#fff;border:1px solid #777;user-select:text;-webkit-user-select:text;touch-action:auto}.chat-panel button{padding:7px;background:#8cff25;color:#111;border:0}.message button+button{margin-top:9px;font-size:14px;border-width:1px}@media(orientation:landscape) and (max-height:440px){.chat-toggle{top:45px}.chat-panel{top:77px}.chat-log{height:70px}}