@font-face{font-family:Campus;src:local('Arial');font-display:swap}
:root{font-family:Campus,Arial,sans-serif;color:#ecf1e7;background:#142923;font-synthesis:none;--mint:#cae0c8;--yellow:#eed676;--dark:#142923;--line:rgba(214,235,218,.17)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,a,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;border:1px solid var(--line);border-radius:13px;background:#18312bdc;min-height:48px;padding:12px 17px;font-weight:600}button:disabled{opacity:.45;cursor:wait}button:hover{filter:brightness(1.1)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
#scene{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}#shade{position:fixed;inset:0;background:linear-gradient(90deg,#102923d4,transparent 70%);pointer-events:none}.playing #shade{background:linear-gradient(0deg,#10292362,transparent 25%)}
.top{position:fixed;top:calc(24px + env(safe-area-inset-top));left:calc(28px + env(safe-area-inset-left));right:calc(28px + env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:15px;z-index:8;pointer-events:none}.top>*{pointer-events:auto}.brand{font-size:24px;font-weight:900;letter-spacing:-1px;display:flex;align-items:center;border:1px solid var(--line);padding:13px 16px;border-radius:13px;background:#142923d9}.brand>span{color:var(--yellow)}.brand small{font-size:9px;letter-spacing:1.5px;margin-left:17px;padding-left:17px;border-left:1px solid var(--line);font-weight:500}
.square{font-size:20px;padding:12px 17px}#matchInfo{display:flex;align-items:center;gap:19px;letter-spacing:1px;border:1px solid var(--line);border-radius:13px;background:#142923d9;padding:0 16px 0 0;font-size:12px}#copyCode{border:0;border-right:1px solid var(--line);border-radius:13px 0 0 13px;background:transparent;letter-spacing:2px}#copyCode span{font-size:9px;font-weight:400;color:var(--mint);margin-right:10px}#roomCode{color:var(--yellow);font-size:16px}#timer{font-variant-numeric:tabular-nums}
.panel{position:absolute;top:50%;transform:translateY(-45%);left:max(6vw,calc(24px + env(safe-area-inset-left)));width:390px;max-width:calc(100% - 48px);z-index:3}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--mint);font-weight:600;display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;background:var(--yellow);border-radius:50%}h1{font-size:clamp(40px,5vw,66px);letter-spacing:-3px;line-height:1.04;margin:20px 0}h1 em{font-style:normal;color:var(--yellow)}.lead{color:#d8e5d6;font-size:15px;line-height:1.65;margin:0 0 22px}.field{font-size:10px;letter-spacing:1px;color:var(--mint);display:block;line-height:1.5}.field input{display:block;letter-spacing:0;font-size:14px;margin-top:6px;padding:12px 15px;width:100%;height:47px;border:1px solid var(--line);background:#122b25b3;color:#f0f2ea;border-radius:10px;touch-action:auto;-webkit-user-select:text;user-select:text}.primary{display:flex;justify-content:space-between;align-items:center;color:var(--dark);background:var(--yellow);width:100%;border:0;margin-top:12px;padding:17px 20px}.primary span{font-size:19px}.join{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;margin-top:17px}.join input{font-family:monospace;letter-spacing:4px;text-transform:uppercase}.join button{height:47px}.join button span{margin-left:13px}#lobbyStatus{font-size:11px;line-height:1.5;color:#c2d2c4;margin:13px 0 0;min-height:33px}.hints{display:flex;justify-content:space-between;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:10px;color:#c2d2c4}.tour-link{display:flex;justify-content:space-between;margin-top:22px;font-size:12px;color:var(--mint)}
#hud{position:fixed;inset:0;pointer-events:none}.pill{position:absolute;top:calc(97px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:10px 19px;max-width:75%;text-align:center;border-radius:50px;background:#142923d6;border:1px solid var(--line);font-size:11px;line-height:1.5}.vitals{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:calc(28px + env(safe-area-inset-left));display:flex;gap:18px;align-items:center}.health,.ammo{border:1px solid var(--line);border-radius:12px;background:#142923d9;padding:12px 17px}.health{min-width:130px}.health>span{font-size:10px;color:var(--mint);margin-right:8px}.health b,.ammo>b{font-size:27px;font-variant-numeric:tabular-nums}.health>div{height:3px;background:#e8f1df29;margin-top:9px;width:100%}.health i{display:block;height:3px;background:var(--mint);width:100%}.ammo>span{font-size:11px;color:var(--mint);margin-left:5px}.ammo small{display:block;font-size:8px;letter-spacing:1.4px;color:var(--mint);margin-top:4px;min-width:81px}
#scores{position:absolute;right:calc(28px + env(safe-area-inset-right));top:calc(100px + env(safe-area-inset-top));width:208px;border-radius:13px;background:#142923d9;border:1px solid var(--line);padding:14px}.score-title{font-size:8px;letter-spacing:1px;color:var(--mint);display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line)}.score-row{display:grid;grid-template-columns:12px 1fr 20px;align-items:center;gap:6px;font-size:11px;margin-top:10px}.score-row>i{width:5px;height:5px;border-radius:50%;background:var(--mint)}.score-row.self{color:var(--yellow)}.score-row.self>i{background:var(--yellow)}.score-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-row>b{text-align:right;font-variant-numeric:tabular-nums}
#crosshair{position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 2px #142923)}#crosshair i{position:absolute;background:#f4f4e9;border-radius:1px}#crosshair i:nth-child(1){top:0;left:13px;width:2px;height:7px}#crosshair i:nth-child(2){bottom:0;left:13px;width:2px;height:7px}#crosshair i:nth-child(3){top:13px;left:0;width:7px;height:2px}#crosshair i:nth-child(4){top:13px;right:0;width:7px;height:2px}#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:48px;color:var(--yellow);opacity:0;transition:opacity .08s}#combatNotice{position:absolute;left:50%;top:calc(50% + 45px);transform:translateX(-50%);font-size:11px;color:var(--yellow);text-shadow:0 1px 3px #142923}#damage{position:fixed;inset:0;box-shadow:inset 0 0 90px #a83234;opacity:0;pointer-events:none;transition:opacity .15s;z-index:4}#desktopHelp{position:absolute;bottom:36px;right:30px;font-size:10px;color:#eaf1e0;text-shadow:0 1px 3px #142923}
#touchControls{display:none;position:absolute;inset:0;pointer-events:none}.touch #touchControls{display:block}.touch #desktopHelp{display:none}#lookZone{position:absolute;inset:80px 0 0 40%;pointer-events:auto;touch-action:none}#joystick{position:absolute;left:calc(35px + env(safe-area-inset-left));bottom:calc(65px + env(safe-area-inset-bottom));width:140px;height:140px;border-radius:50%;border:1px solid #f2f5e46b;background:#1429236b;pointer-events:auto;touch-action:none}#stick{position:absolute;left:43px;top:43px;width:54px;height:54px;background:#e6ecda9e;border:2px solid #ecf2e3;border-radius:50%;pointer-events:none}#joystick>span{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:2px}.actions{position:absolute;bottom:calc(63px + env(safe-area-inset-bottom));right:calc(32px + env(safe-area-inset-right));display:flex;align-items:end;gap:14px;pointer-events:auto}.actions button{border-radius:50%;width:65px;height:65px;font-size:26px;padding:5px;background:#142923b5;border:1px solid #f2f5e470;touch-action:none}.actions small{display:block;font-size:7px;letter-spacing:1px;margin-top:2px}#fire{width:98px;height:98px;background:#ecd679d9;color:#142923;font-size:40px;border:2px solid #f5e7ae}#fire small{font-size:8px}#sprint{position:absolute;bottom:calc(220px + env(safe-area-inset-bottom));left:calc(68px + env(safe-area-inset-left));width:75px;font-size:8px;letter-spacing:1px;pointer-events:auto;touch-action:none}.touch .vitals{bottom:auto;top:calc(100px + env(safe-area-inset-top));left:calc(28px + env(safe-area-inset-left));gap:10px}.touch .health,.touch .ammo{padding:8px 12px}.touch .health{min-width:102px}.touch .health b,.touch .ammo>b{font-size:22px}.touch #waiting{top:auto;bottom:calc(19px + env(safe-area-inset-bottom));max-width:68%;font-size:10px}.left-hand #joystick{left:auto;right:calc(35px + env(safe-area-inset-right))}.left-hand #sprint{left:auto;right:calc(68px + env(safe-area-inset-right))}.left-hand .actions{right:auto;left:calc(32px + env(safe-area-inset-left))}.left-hand #lookZone{inset:80px 40% 0 0}
.center-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:340px;max-width:calc(100% - 36px);padding:28px;border-radius:20px;border:1px solid var(--line);background:#142923f2;z-index:10;box-shadow:0 25px 100px #08171444;max-height:calc(100% - 28px);overflow:auto;touch-action:pan-y}.center-card h2{font-size:31px;letter-spacing:-1px;margin:14px 0 8px}.center-card p{font-size:12px;line-height:1.5;color:var(--mint)}.setting{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px;color:var(--mint);font-size:11px}.setting input[type=range]{max-width:120px;accent-color:var(--yellow);touch-action:auto}.setting input[type=checkbox]{accent-color:var(--yellow);width:18px;height:18px}.setting select{font-size:11px;padding:6px;background:#1c3830;color:var(--mint);border:1px solid var(--line);border-radius:7px}.secondary{width:100%;margin-top:12px;font-size:11px;padding:8px;min-height:37px}#respawn{text-align:center;pointer-events:none}#respawn .eyebrow{justify-content:center}#respawnTime{color:var(--yellow)}#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;font-size:11px;line-height:1.5;max-width:80%;padding:12px 19px;background:#142923ed;border:1px solid var(--line);border-radius:13px;opacity:0;pointer-events:none}#toast.visible{opacity:1}
@media(max-height:730px){.panel{width:345px;transform:translateY(-41%)}h1{font-size:45px;margin:14px 0}.lead{font-size:12px;margin-bottom:14px}.hints{margin-top:10px;padding-top:10px}.tour-link{margin-top:12px}.join{margin-top:10px}#lobbyStatus{margin-top:8px;min-height:27px}.top{top:calc(17px + env(safe-area-inset-top))}.center-card{padding:23px}.center-card .setting{margin-top:12px}}
@media(max-width:650px){.brand small{display:none}.top{left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right));gap:8px}#matchInfo{gap:10px;padding-right:10px}#copyCode{padding:12px 10px}#copyCode span{display:none}#roomCode{font-size:13px}#population{font-size:10px}#scores{width:155px;right:18px;padding:10px}#round{display:none}.panel{left:24px}#joystick{width:116px;height:116px;left:22px}#stick{left:31px;top:31px}.actions{right:18px;gap:8px}.actions button{width:51px;height:51px;font-size:23px}#fire{width:76px;height:76px;font-size:34px}#sprint{left:41px;bottom:195px}.touch .vitals{left:18px}.touch .health{min-width:85px}.ammo small{min-width:61px}.left-hand #joystick{right:22px}.left-hand #sprint{right:41px}.left-hand .actions{left:18px}}
@media(max-height:520px){.panel{width:360px;top:58%;transform:translateY(-50%)}.eyebrow{font-size:8px}h1{font-size:32px;margin:8px 0;line-height:1.02}.lead{font-size:11px;line-height:1.4;margin-bottom:8px}.field{font-size:8px}.field input{height:38px;padding:8px 12px}.primary{padding:10px 15px;min-height:38px;margin-top:8px}.join button{height:38px;min-height:38px}.join{margin-top:7px}#lobbyStatus{font-size:9px;min-height:17px}.hints{display:none}.tour-link{font-size:10px}.top{top:10px}.brand{padding:10px;font-size:18px}.brand small{font-size:7px}.pill{font-size:9px}.touch .vitals,#scores{top:70px}#joystick,.actions{bottom:38px}#sprint{bottom:194px}#scores{width:165px}.center-card{padding:15px}.center-card h2{font-size:25px}.setting{margin-top:8px!important}#pauseMenu{max-height:95%;width:380px}.secondary{display:inline-block;width:48%;margin-top:8px}.touch #waiting{bottom:8px}}
/* Stop WebKit long-press selection on inherited child text and touch buttons. */
body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.field input{-webkit-user-select:text;user-select:text;font-size:16px;touch-action:manipulation}
body.playing,body.playing *{touch-action:none}
body.playing .center-card,body.playing .center-card *{touch-action:pan-y}
body.playing .center-card input,body.playing .center-card select{touch-action:manipulation}
#scene,#touchControls,.actions button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(pointer:coarse) and (min-width:800px){#joystick{width:154px;height:154px}#stick{left:50px;top:50px}.actions{gap:18px}.actions button{width:74px;height:74px}#fire{width:108px;height:108px}#sprint{left:75px;bottom:235px}.left-hand #sprint{right:75px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.lobby-name{margin-top:12px}#lobbyBrowser{position:absolute;left:calc(100% + 70px);top:30px;width:360px;max-height:70vh;padding:22px;border:1px solid var(--line);border-radius:18px;background:#142923ed;box-shadow:0 20px 70px #071d2240}.lobby-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.lobby-heading h2{margin:9px 0 0;font-size:25px;letter-spacing:-.7px}.lobby-heading button{font-size:24px;padding:5px 14px}#lobbyListStatus,.lobby-note{font-size:11px;line-height:1.6;color:var(--mint)}#lobbyRows{max-height:calc(70vh - 175px);overflow:auto;touch-action:pan-y}.lobby-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.lobby-row>div{min-width:0}.lobby-row b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-row span{display:block;font-size:10px;margin-top:6px;color:var(--mint)}.lobby-row button{font-size:11px;padding:10px 13px;flex-shrink:0;background:#d3e4d1;color:var(--dark)}.lobby-note{margin-bottom:0;color:#9db6a9}
@media(max-width:950px){#lobby{top:100px;bottom:24px;transform:none;overflow:auto;max-height:calc(100% - 124px);padding:0 5px 12px;touch-action:pan-y}#lobby *{touch-action:pan-y}#lobby button,#lobby input{touch-action:manipulation}#lobbyBrowser{position:static;width:100%;margin-top:24px;max-height:none;padding:18px}#lobbyRows{max-height:240px}#lobby h1{font-size:44px;margin:14px 0}}
@media(max-height:600px) and (min-width:951px){#lobby{top:94px;bottom:18px;transform:none;overflow:auto;max-height:calc(100% - 112px);width:850px;max-width:calc(100% - 90px);padding-right:460px;touch-action:pan-y}#lobbyBrowser{left:auto;right:0;top:0;max-height:calc(100% - 5px)}#lobbyRows{max-height:180px}}

#sprint[aria-pressed="true"]{background:#ecd679;color:#142923;border-color:#fff0a4}
