@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:Inter,Arial,sans-serif;color:#edf4f6;background:#172b3d}*{box-sizing:border-box}body{margin:0;overflow:hidden}#game{width:100vw;height:100vh;display:block;outline:none;touch-action:none}header{position:fixed;top:30px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{font-weight:800;letter-spacing:3px;display:flex;align-items:center;gap:13px}.mark{font-size:35px;color:#ff9751}.brand small{font-size:10px;color:#adc1cb;letter-spacing:2px;margin-left:20px}button{font:600 12px Inter,Arial;cursor:pointer;color:#e4eef3;border:1px solid #ffffff35;background:#122737b8;padding:13px 18px;border-radius:3px}button:hover{background:#29485e}button:disabled{opacity:.5;cursor:wait}button:focus-visible{outline:2px solid #ff9c62;outline-offset:4px}header button{pointer-events:auto;font-size:10px;letter-spacing:1.5px}#status{position:fixed;left:50%;top:36px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;background:#0b1b29b0;padding:13px 19px;font-size:11px;letter-spacing:1.5px;border:1px solid #ffffff18}.live{width:6px;height:6px;border-radius:50%;background:#8ae9bb}.divider{color:#6d8798}#clock{color:#ffac70;font-variant-numeric:tabular-nums}footer{position:fixed;bottom:30px;left:36px;right:36px;display:flex;align-items:flex-end;gap:45px;pointer-events:none;text-shadow:0 2px 8px #001}small,.stat small,.ammo small{font-size:10px;letter-spacing:2px;display:block;color:#b8cbd5}.stat strong,.ammo strong{font-family:'Barlow Condensed',Arial;font-size:43px;font-weight:600;display:block;line-height:1.2}.bar{width:100px;height:3px;background:#fff3;margin-top:4px}.bar i{display:block;height:100%;background:#8ae9bb;width:100%}.ammo{margin-left:auto;text-align:right}.ammo em{font-style:normal;font-size:24px;color:#a8bdca}.ammo>span{font-size:9px;letter-spacing:1.5px;color:#bbcbd5}#crosshair{position:fixed;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none}#crosshair i,#crosshair b{position:absolute;background:#fff;box-shadow:0 0 3px #000}#crosshair i{width:2px;height:18px;left:8px}#crosshair b{height:2px;width:18px;top:8px}#hit{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:42px;color:#ffad6c;opacity:0;pointer-events:none}#damage{position:fixed;inset:0;box-shadow:inset 0 0 110px #e74343;opacity:0;pointer-events:none}#notice{position:fixed;top:65%;left:50%;transform:translateX(-50%);font-size:13px;color:#ffcb9f;letter-spacing:1px;pointer-events:none}#overlay{position:fixed;inset:0;background:linear-gradient(90deg,#0a192bea 0%,#0e2437ba 39%,#0e243700 78%);display:flex;align-items:center;padding:100px 7vw}.panel{width:480px;max-width:100%}.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:#ffb17b;margin-bottom:18px}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(52px,6vw,88px);line-height:.96;letter-spacing:-1px;text-transform:uppercase;margin:0 0 24px}h1 span{color:#ff9b5b}.panel p{font-size:13px;line-height:1.9;color:#bdcbd5;max-width:420px}.features{display:flex;gap:20px;font-size:8px;letter-spacing:1.4px;margin:23px 0 28px;color:#94aebb}.buttons{display:flex;gap:12px}.primary{background:#f38d4d;color:#142635;border:0;padding:17px 24px}.primary:hover{background:#ffb17b}.controls{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:30px 0 24px;font-size:11px;color:#9fb6c6}.controls span{display:flex;align-items:center;gap:10px}kbd{font:9px Inter,Arial;border:1px solid #ffffff30;min-width:54px;padding:6px;text-align:center;color:#e7edf2}.options{display:flex;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid #ffffff20;padding-top:18px}.options label{font-size:10px;display:flex;gap:8px;align-items:center}.options input{width:70px;accent-color:#ff9b5b}.options button{font-size:9px;padding:8px}.panel .fine{font-size:10px;color:#8da8b9;line-height:1.5}.maplabel{position:absolute;right:45px;bottom:115px;font-family:'Barlow Condensed',Arial;font-size:26px;letter-spacing:4px}.maplabel span{display:block;font-family:Inter,Arial;font-size:8px;letter-spacing:2px;color:#acbdc9;margin-top:7px}.hidden{display:none!important}@media(max-width:750px){header{left:18px;right:18px;top:18px}.brand small,#status{display:none}#overlay{padding:85px 24px;background:#0b1f30dd}.panel{width:100%}h1{font-size:55px}.panel p{font-size:12px}.maplabel{display:none}footer{left:20px;right:20px;bottom:18px}.controls{margin:15px 0}.features{gap:12px}.options{gap:8px}} 
footer .stat,footer .ammo{background:#0c2034cc;padding:10px 16px;border:1px solid #ffffff20;border-radius:3px}#notice{background:#10283cdd;padding:9px 14px;border-radius:3px}#notice:empty{display:none}
#fire{position:fixed;right:25px;bottom:155px;z-index:3;background:#dc8246;color:#102334;border:1px solid #ffbc85;font-size:15px;letter-spacing:2px;padding:14px 21px;touch-action:none;user-select:none}#fire small{font-size:8px;color:#273d4c;margin-top:5px;letter-spacing:1px}body:has(#overlay:not(.hidden)) #fire{display:none}#status{pointer-events:none}

#combatEscape{position:fixed;left:36px;top:86px;z-index:3;padding:8px 12px;font-size:11px;letter-spacing:1px;background:#102737e8;touch-action:manipulation}#combatEscape small{font-size:7px;letter-spacing:.8px;margin-top:3px;color:#c4d5df}body:has(#overlay:not(.hidden)) #combatEscape{display:none}

@media(max-width:750px){#combatEscape{left:18px;top:72px}}

/* Keep the menu and live arena preview in separate columns. */
:root{--menu-width:clamp(360px,42vw,560px)}
.level-picker{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:10px;letter-spacing:2px;color:#9fb6c6}.level-picker select{flex:1;background:#193447;color:#edf4f6;border:1px solid #ffffff35;padding:12px;font:600 13px Inter,Arial;border-radius:3px}.level-picker select:focus-visible{outline:2px solid #ff9b5b}
#overlay{width:var(--menu-width);right:auto;background:#0c2032;align-items:flex-start;padding:100px 32px 28px;overflow-y:auto;border-right:1px solid #ffffff20}
.panel{width:100%;max-width:none}
#overlay h1{font-size:clamp(50px,5vw,72px)}
body:has(#overlay:not(.hidden)) #game{position:fixed;right:0;top:0;width:calc(100vw - var(--menu-width));height:100vh}
body:has(#overlay:not(.hidden)) :is(footer,#status,#crosshair,#hit,#damage,#notice,header #pause){display:none}
.maplabel{position:fixed;right:28px;bottom:28px;padding:14px 20px;background:#0c2032e6;border:1px solid #ffffff20;pointer-events:none;font-size:22px}
@media(max-width:750px){
 #overlay{top:36vh;bottom:0;width:100%;padding:26px 24px;display:block;border-right:0;border-top:1px solid #ffffff20}
 body:has(#overlay:not(.hidden)) #game{width:100vw;height:36vh}
 #overlay h1{font-size:48px}
 .maplabel{display:none}
}
#fightResults{background:#16364b;border:1px solid #ff9b5b;padding:20px;margin-bottom:26px}#fightResults h2{margin:0 0 18px;color:#ffad70;text-transform:uppercase}.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 10px}.results-grid strong{display:block;font-size:24px}.results-grid span{display:block;font-size:10px;color:#b8cbd5;margin-top:4px}#overlay:has(#fightResults:not(.hidden)) .panel>h1,#overlay:has(#fightResults:not(.hidden)) .panel>.eyebrow,#overlay:has(#fightResults:not(.hidden)) .panel>p:not(.fine),#overlay:has(#fightResults:not(.hidden)) .features{display:none}

/* Match results float above the menu and keep keyboard focus inside. */
#matchStatsModal{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:28px;border:1px solid #ffad7066;border-radius:14px;background:#102b3f;color:#edf4f6;box-shadow:0 24px 90px #0009;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s ease,transform .22s ease}
#matchStatsModal.visible{opacity:1;transform:translateY(0) scale(1)}
#matchStatsModal::backdrop{background:#04111bcc;opacity:0;transition:opacity .22s ease}
#matchStatsModal.visible::backdrop{opacity:1}
#matchStatsModal #fightResults{border:0;background:none;padding:0;margin:0 0 26px}
#matchStatsModal .results-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 14px}
#matchStatsModal .primary{width:100%}
.panel,.level-picker select{min-width:0}.buttons,.features{flex-wrap:wrap}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.controls span{min-width:0;flex-wrap:wrap}.maplabel{max-width:calc(100vw - var(--menu-width) - 40px);font-size:18px;letter-spacing:2px}
@media(max-width:1050px){body:has(#overlay.hidden) header .brand{display:none}header{left:18px;right:18px;top:16px}header #pause{margin-left:auto}#status{top:16px;left:18px;transform:none;padding:10px;font-size:9px;gap:8px}#combatEscape{left:18px;top:68px}footer{left:18px;right:18px;bottom:18px;gap:20px}.stat strong,.ammo strong{font-size:32px}.brand small{display:none}}
@media(max-width:750px){#overlay{width:100%}.maplabel{display:none}#status{display:flex}.controls{gap:12px}.panel .buttons button{flex:1}}
@media(max-width:460px){#matchStatsModal{padding:22px}#matchStatsModal .results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{grid-template-columns:1fr}footer{gap:12px}.bar{width:70px}.ammo>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){#matchStatsModal,#matchStatsModal::backdrop{transition:none;transform:none}}

/* Borderless game panels and menu controls; retain keyboard focus indicators. */
#overlay,.panel,#matchStatsModal,#fightResults,.maplabel,#status,.options,button,.level-picker select,kbd{border:0}