:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eff4ed;background:#728e98;font-synthesis:none;font-weight:400;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #d3f3ab;outline-offset:5px}[hidden]{display:none!important}#world,canvas,.vignette{position:fixed;inset:0;width:100%;height:100%}canvas{display:block;touch-action:none;outline:none}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(13,29,38,.4),transparent 22%,transparent 67%,rgba(10,23,31,.69))}.topbar{position:fixed;top:30px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;gap:13px;align-items:center}.brand-icon{background:#daf4bf;color:#24382e;width:42px;height:42px;display:grid;place-items:center;font-size:32px;border-radius:11px;font-weight:400}.brand h1{font-size:15px;font-weight:650;letter-spacing:1.8px;margin:0 0 7px}.brand h1 b{color:#d5efbc;font-weight:450}.brand p{font-size:8px;letter-spacing:2px;margin:0;color:#c3d2d3}.brand p span{padding:0 8px;opacity:.4}.toolbar{display:flex;gap:9px;align-items:center;pointer-events:auto}.live{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1px;margin-right:15px}.live i{height:5px;width:5px;background:#d0efa9;border-radius:50%;box-shadow:0 0 8px #d0efa955}.live span{color:#bdcccd;margin-left:4px;font-size:10px;letter-spacing:0}.icon-button{border:1px solid #d5ece329;background:#172d3740;color:#f4f6ef;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:21px;transition:background .2s}.icon-button:hover{background:#24404eb3}.scene-label{position:fixed;top:111px;left:37px;display:flex;align-items:center;gap:11px;font-size:8px;letter-spacing:1.6px;color:#d3dfe0}.small-cross{font-size:18px;font-weight:200}.line{width:25px;height:1px;background:#cadbdb66}#reticle{position:fixed;top:50%;left:50%;width:13px;height:13px;transform:translate(-50%,-50%);border:1px solid #f3fbef48;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s}#reticle i{display:block;width:3px;height:3px;background:#f4f9edb0;border-radius:50%;margin:4px}.playing #reticle{opacity:1}.welcome{position:fixed;bottom:185px;left:50%;transform:translateX(-50%);text-align:center;width:min(500px,90vw);text-shadow:0 2px 20px #142b3866}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:8px;letter-spacing:2px;color:#d7efc0;font-weight:500}.eyebrow span{width:5px;height:5px;border-radius:50%;background:#d7efc0}.welcome h2{font-size:34px;font-weight:450;letter-spacing:-1px;margin:17px 0 10px}.welcome p{font-size:12px;color:#d0dddc;margin:0 0 23px}.primary{border:0;border-radius:8px;background:#d6f0b6;color:#25382b;padding:15px 21px;min-width:209px;font-size:12px;font-weight:650;display:inline-flex;justify-content:space-between;align-items:center;gap:30px;box-shadow:0 3px 30px #101e2220;transition:background .2s,transform .2s}.primary:hover{background:#e4ffca;transform:translateY(-2px)}.primary span{font-size:20px;font-weight:400;line-height:13px}.welcome small{display:block;font-size:9px;color:#c1d1ce;margin-top:13px;letter-spacing:.15px}.hud{position:fixed;left:37px;right:37px;bottom:29px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.hud-label{font-size:8px;color:#bed0d1;letter-spacing:1.8px;display:block;margin-bottom:16px}.control-row{display:flex;gap:20px;align-items:center;font-size:10px;color:#e0e8e3}.control-row>span:not(.keys):not(.divider){display:flex;flex-direction:column;gap:9px;align-items:center}.control-row>span:nth-child(2){margin-left:-9px}.control-row small{font-size:9px;color:#cad8d6}kbd{font-family:inherit;font-size:9px;letter-spacing:.5px;border:1px solid #d6e6df4a;border-bottom:2px solid #d6e6df59;min-width:25px;height:25px;padding:5px 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;background:#142c314a;box-shadow:0 2px 3px #162b3222}.keys{display:flex;flex-direction:column;align-items:center;gap:4px}.keys>span{display:flex;gap:4px}.divider{height:30px;width:1px;background:#d0e4dd33;margin:0 2px}.mouse-key{font-size:16px}.telemetry{text-align:right;min-width:190px}.speed{display:flex;align-items:baseline;justify-content:flex-end;gap:8px}.speed>span{font-size:8px;letter-spacing:1.5px;color:#c8dbce;margin-right:10px}.speed strong{font-size:39px;line-height:1;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-2px}.speed small{font-size:10px;color:#bdd0cd}.coordinates{display:flex;justify-content:flex-end;gap:18px;margin-top:15px;color:#9eb7b8;font-family:ui-monospace,SFMono-Regular,monospace;font-size:9px}.coordinates b{color:#d1dcd5;font-weight:400}.coordinates .fps{border-left:1px solid #bdd1c633;padding-left:15px}.settings{position:fixed;top:85px;right:35px;width:290px;background:#172c32f5;backdrop-filter:blur(15px);border:1px solid #d1e0d229;border-radius:13px;padding:19px 22px;box-shadow:0 15px 50px #0a202d33}.settings-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.settings h2{font-size:15px;font-weight:500;margin:0}.settings-title button{width:26px;height:26px;font-size:21px;background:transparent;border:0}.settings label{font-size:11px;display:flex;justify-content:space-between;align-items:center;gap:10px}.settings output{color:#d5efbc;font-family:monospace}.settings input[type=range]{width:100%;accent-color:#d5efbc;margin:15px 0 18px}.toggle{padding:13px 0;border-top:1px solid #ecf6e813}.toggle input{accent-color:#d5efbc;width:16px;height:16px}.secondary{width:100%;border:1px solid #d4e5d62e;color:#d9e5df;background:#ecf6e808;border-radius:6px;padding:10px;font-size:11px;margin-top:12px}.settings p{font-size:10px;line-height:1.8;color:#9fb6b7;margin:16px 0 0}.modal-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:330px;padding:35px;text-align:center;background:#142a31f2;border:1px solid #d9e7d72e;border-radius:16px;backdrop-filter:blur(16px);box-shadow:0 20px 90px #10222c44}.modal-card h2{font-weight:400;font-size:31px;margin:18px 0 10px}.modal-card p{color:#b9cecb;font-size:12px;margin-bottom:25px}.text-button{display:block;margin:18px auto 0;border:0;background:none;color:#b9cdca;font-size:11px;padding:6px}#toast{position:fixed;top:95px;left:50%;transform:translateX(-50%);border:1px solid #d4e7db25;border-radius:8px;background:#182e36ef;padding:12px 19px;font-size:11px;color:#e3eedc;pointer-events:none;opacity:0;transition:opacity .2s}#toast.visible{opacity:1}#error{position:fixed;inset:0;background:#182c34;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}#error p{max-width:430px;color:#a9c0bd;font-size:14px;line-height:1.7}#error button{padding:12px 24px;background:#d6f0b6;color:#1c322c;border:0;border-radius:7px}#touchControls{position:fixed;inset:0;pointer-events:none}#joystick{position:absolute;bottom:40px;left:30px;width:112px;height:112px;background:#d8eee612;border:1px solid #def5e13d;border-radius:50%;pointer-events:auto;touch-action:none}#stick{position:absolute;width:44px;height:44px;left:33px;top:33px;border:1px solid #e5f3e680;border-radius:50%;background:#e1f1d938}#touchJump,#touchRun{position:absolute;right:32px;bottom:45px;width:58px;height:58px;background:#d7efbd22;border:1px solid #d7efbd55;border-radius:50%;color:#e8f3e1;font-size:24px;pointer-events:auto;touch-action:none}#touchRun{right:105px;bottom:48px;width:51px;height:51px;font-size:9px}#touchRun.active{background:#d7efbd66}
@media(max-width:760px){.topbar{top:20px;left:20px;right:20px}.brand h1{font-size:11px;letter-spacing:1.1px}.brand p{font-size:6px;letter-spacing:1.3px}.brand-icon{width:35px;height:35px;font-size:27px}.toolbar{gap:6px}.live{display:none}.scene-label{left:22px;top:85px;font-size:7px;letter-spacing:1px}.hud{left:22px;right:22px;bottom:22px}.control-row{gap:10px}.escape{display:none!important}.telemetry{min-width:130px}.speed strong{font-size:31px}.speed>span{font-size:7px;margin:0}.coordinates{gap:10px;font-size:8px}.fps{display:none}.welcome{bottom:170px}.welcome h2{font-size:30px}.settings{right:20px;top:70px}.hud-label{font-size:7px}.touch .controls{display:none}.touch .hud{bottom:185px}.touch .telemetry{margin-left:auto}.touch .welcome{bottom:205px}.touch .scene-label{max-width:80vw}.touch .primary{padding:16px 22px}}
@media(max-height:650px){.welcome{bottom:140px}.welcome h2{font-size:28px;margin-top:12px}.welcome p{margin-bottom:15px}.welcome small{margin-top:9px}.topbar{top:20px}.scene-label{top:85px}.hud{bottom:20px}.welcome .eyebrow{font-size:7px}}
/* Shooting range */
.combat-hud{position:fixed;top:145px;left:37px;pointer-events:none;color:#dce8dd}.weapon-name{font-size:9px;letter-spacing:1.5px;display:flex;align-items:center;gap:20px}.weapon-name b{font-size:21px;line-height:1;font-weight:400;color:#dcf1b8}.combat-hud>div{display:flex;gap:22px;margin-top:15px}.combat-hud>div>span{display:flex;flex-direction:column;gap:6px;font-size:7px;letter-spacing:1.1px;color:#c1d5d0}.combat-hud strong{font-family:ui-monospace,monospace;font-size:19px;font-weight:400;color:#f1f4e9;letter-spacing:0}.combat-hud p{font-size:9px;color:#cbdbd5;margin-top:14px}#reticle{border-color:#f6ffe8b3;width:17px;height:17px;transition:opacity .2s;box-shadow:0 0 0 1px #1d343544}#reticle i{margin:6px;background:#f5ffe7}#hitmarker{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:42px;font-weight:200;line-height:1;color:#e9ffbe;text-shadow:0 1px 8px #233731;pointer-events:none;opacity:0}#hitmarker.visible{opacity:1}#touchFire{position:absolute;right:35px;bottom:135px;width:72px;height:72px;background:#d7efbd44;border:1px solid #d7efbd99;border-radius:50%;color:#f0ffd8;font-size:32px;pointer-events:auto;touch-action:none}.settings{z-index:3}.modal-card{z-index:2}.playing .combat-hud{opacity:1}.combat-hud{transition:opacity .3s}.settings:not([hidden])~.hud{opacity:.65}
@media(max-width:760px){.combat-hud{left:22px;top:120px}.combat-hud>div{gap:18px}.combat-hud p{max-width:200px;line-height:1.6}.combat-hud strong{font-size:17px}}
@media(max-height:650px){.combat-hud{top:115px}.combat-hud>div{margin-top:9px}.combat-hud p{margin-top:8px}}
