.range-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.range-top h1{font-size:clamp(28px,4vw,46px);letter-spacing:-1px;margin:10px 0}.range-layout{display:grid;grid-template-columns:1fr;gap:24px}.range-stage{position:relative;background:#10130e;border:1px solid #635339;border-radius:8px;overflow:hidden;box-shadow:0 24px 70px #0005}.range-hud{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:7;display:grid;grid-template-columns:repeat(4,1fr);width:48%;gap:8px;pointer-events:none}.range-hud>div{background:#090c0bc9;border:1px solid #c69d5260;border-radius:4px;padding:9px 4px;text-align:center;backdrop-filter:blur(8px)}.range-hud small{display:block;font-size:9px;letter-spacing:1.5px;color:#b7baa9}.range-hud b{display:block;font-size:clamp(16px,2.5vw,30px);font-variant-numeric:tabular-nums;color:#f6e7bf;margin-top:2px}.range-arena{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;isolation:isolate;cursor:crosshair;touch-action:none;user-select:none;background:#242820}.range-scenery{position:absolute;inset:0;background:url('/range-hangar-v1.webp') center/cover no-repeat;pointer-events:none}.range-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,#050a0780 100%),linear-gradient(#0006,transparent 25%,transparent 78%,#0009)}.range-brand{position:absolute;top:26px;left:24px;font-size:clamp(10px,1.3vw,18px);font-weight:750;letter-spacing:3px;color:#f0e5c8;text-shadow:0 2px 10px #000;pointer-events:none}.range-brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:7px;color:#c8b98e}.range-field{position:absolute;height:76%;aspect-ratio:1;top:10%;left:50%;transform:translateX(-50%);z-index:3}.range-target{position:absolute;box-sizing:border-box;z-index:3;width:15%;height:15%;transform:translate(-50%,-50%);border:2px solid #d7b868;border-radius:3px;padding:0;background:radial-gradient(circle,#b4382c 0 8%,#d9cbb3 9% 11%,#292c24 12% 25%,#b9b09b 26% 27%,#292c24 28% 39%,#b9b09b 40% 41%,#292c24 42% 55%,#b9b09b 56% 57%,#292c24 58% 69%,#d9cbb3 70%);box-shadow:0 0 0 4px #1d221c,0 0 0 5px #dfb65e80,0 4px 14px #000b,0 0 26px #e5bd6440;cursor:crosshair}.range-target::before{content:'';position:absolute;left:43%;bottom:100%;width:14%;height:12%;background:#34382f;border:1px solid #a69c77}.range-target::after{content:'';position:absolute;top:calc(100% + 4px);left:45%;width:10%;height:48%;background:linear-gradient(90deg,#161b16,#756f53,#22281d);box-shadow:0 3px 5px #0009;pointer-events:none}.range-target:focus-visible{outline:3px solid white;outline-offset:8px}.range-target[hidden],.range-impact[hidden],.range-hit-score[hidden]{display:none}.range-impact{position:absolute;z-index:8;transform:translate(-50%,-50%);font-size:38px;color:#fff2c5;pointer-events:none;line-height:1;text-shadow:0 0 10px #f5d480}.range-impact.miss{color:#bdb6a5;font-size:25px}.range-hit-score{position:absolute;transform:translate(30%,-160%);font-size:clamp(15px,2.3vw,28px);font-weight:800;color:#ffd279;text-shadow:0 2px 8px #000;z-index:9;pointer-events:none;white-space:nowrap}.range-weapon{position:absolute;z-index:4;width:48%;bottom:-4%;right:-3%;pointer-events:none;transform-origin:75% 95%;filter:drop-shadow(-4px 2px 9px #0005)}.range-weapon img{display:block;width:100%;height:auto;pointer-events:none}.range-muzzle{position:absolute;left:28%;top:22%;width:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff9d8, #efbc6344 35%,transparent 70%);opacity:0;transform:translate(-50%,-50%);mix-blend-mode:screen}.range-fire{animation:range-recoil .16s ease-out}.range-fire .range-muzzle{animation:range-flash .1s linear}.range-reticle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:21px;font-weight:300;color:#ffffff70;pointer-events:none;z-index:2}.range-lane{position:absolute;z-index:5;bottom:20px;left:25px;font-size:clamp(11px,1.5vw,20px);font-weight:700;letter-spacing:3px;color:#ede4c6;pointer-events:none;text-shadow:0 2px 10px #000}.range-lane small{display:block;margin-top:8px;font-size:8px;letter-spacing:2px;color:#bbb9a7}.range-expand{position:absolute;bottom:14px;right:16px;z-index:12;color:#ead4a5;background:#070d0bb3;border:1px solid #ae8b4b80;font-size:22px;width:42px;height:38px;border-radius:4px;cursor:pointer}.range-overlay{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#07100b55;text-align:center;pointer-events:none}.range-overlay h2{font-size:clamp(32px,5vw,64px);line-height:1.05;letter-spacing:3px;color:#f2dfab;margin:13px 0;text-shadow:0 3px 25px #000}.range-overlay p{color:#f0e6cc;margin:5px;text-shadow:0 2px 8px #000}.range-status{min-height:45px;padding:14px 20px;font-size:12px;color:#bac2ac;border-top:1px solid #635339;box-sizing:border-box}.range-brief{padding:28px}.range-brief h2{font-size:26px;margin:20px 0 12px}.range-brief ul{padding-left:19px;line-height:1.8;color:var(--muted)}.range-record{padding:16px 0;margin:16px 0;border-block:1px solid var(--line)}.range-record small{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted)}.range-record strong{display:block;font-size:34px;color:var(--gold);margin-top:6px}.range-results{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.range-results>div{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}.range-results span{color:var(--muted);font-size:12px}.range-stage:fullscreen,.range-expanded{display:flex;flex-direction:column;justify-content:center;background:#080c09;border:0;border-radius:0}.range-stage:fullscreen .range-arena{width:min(100vw,calc((100dvh - 45px)*16/9));margin:auto}.range-expanded{position:fixed;inset:0;z-index:1000}.range-expanded .range-arena{width:min(100vw,calc((100dvh - 45px)*16/9));margin:auto}.range-stage:fullscreen .range-hud,.range-expanded .range-hud{top:max(16px,calc((100dvh - 100vw*9/16)/2 + 10px))}@keyframes range-recoil{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(8px,12px) rotate(-2deg)}100%{transform:translate(0,0) rotate(0)}}@keyframes range-flash{0%{opacity:.7}65%,100%{opacity:0}}@media(max-width:700px){.range-arena{aspect-ratio:1}.range-hud{top:10px;width:90%;gap:5px}.range-hud>div{padding:6px 3px}.range-hud small{font-size:8px;letter-spacing:.8px}.range-hud b{font-size:18px}.range-brand{display:none}.range-field{height:90%;top:10%}.range-weapon{width:58%;bottom:-2%;right:-5%}.range-lane{left:14px;bottom:12px;font-size:11px;letter-spacing:1px}.range-lane small{font-size:7px;letter-spacing:1px}.range-brief{padding:20px}.range-results{grid-template-columns:repeat(2,1fr)}.range-stage:fullscreen .range-arena,.range-expanded .range-arena{aspect-ratio:16/9}.range-stage:fullscreen .range-field,.range-expanded .range-field{top:10%;height:76%}.range-stage:fullscreen .range-brand,.range-expanded .range-brand{display:none}}@media(prefers-reduced-motion:reduce){.range-fire,.range-fire .range-muzzle{animation:none}}

.range-audio-controls{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.range-audio-controls .text-btn{font-size:12px}

.range-stage{scroll-margin-top:90px}.range-countdown{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#08110bb5;pointer-events:none;text-align:center;padding:20px;color:#f2dfab;box-sizing:border-box}.range-countdown[hidden]{display:none}.range-countdown>span{font-size:12px;letter-spacing:4px}.range-countdown strong{font-size:clamp(72px,12vw,150px);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 40px #d5b66b55}.range-countdown small{max-width:340px;color:#e4dcc7;line-height:1.5;font-size:12px}

/* Floor robots use the entire arena; movement and hit geometry share normalized coordinates. */
.range-robot-field{inset:0!important;width:100%;height:100%!important;aspect-ratio:auto;transform:none;overflow:hidden;pointer-events:none}
.range-robot{position:absolute;transform:translate(-50%,-100%);background:none;border:0;padding:0;cursor:crosshair;pointer-events:auto}
.range-robot[hidden]{display:none}.range-robot img{position:absolute;bottom:12%;left:8%;width:84%;height:88%;object-fit:fill;pointer-events:none;filter:drop-shadow(1px 2px 1px #0009)}
.robot-shadow{position:absolute;bottom:-3%;left:-10%;width:120%;height:10%;background:#0009;border-radius:50%;filter:blur(3px)}
.robot-deck{position:absolute;bottom:4%;left:5%;width:90%;height:10%;background:linear-gradient(155deg,#87926b 0 32%,#4b573c 33% 65%,#252e22 66%);border:1px solid #a0a87b;border-radius:10% 10% 20% 20%;box-shadow:0 2px 2px #000;transform:skewY(-3deg)}
.robot-deck:after{content:'OC';font:bold 8px sans-serif;color:#e9d7a0;position:absolute;left:40%;top:22%}
.robot-wheel{position:absolute;width:23%;height:10%;background:repeating-linear-gradient(0deg,#131914 0 3px,#384033 3px 5px);border:2px solid #101610;border-radius:38%;box-shadow:inset 2px 0 0 #53604c;animation:robot-tread .32s linear infinite}
.robot-wheel.w1{left:0;bottom:8%;z-index:-1}.robot-wheel.w2{right:0;bottom:8%;z-index:-1}.robot-wheel.w3{left:0;bottom:0}.robot-wheel.w4{right:0;bottom:0}
.range-robot:focus-visible{outline:2px solid #f6dc9a;outline-offset:4px}
.range-reload{position:absolute;z-index:12;right:70px;bottom:14px;min-width:132px;min-height:52px;padding:8px 16px;border:1px solid #c6a267;background:#0c140fee;color:#f8e4b9;border-radius:5px;cursor:pointer;touch-action:manipulation}.range-reload b,.range-reload span{display:block}.range-reload b{font-size:20px;font-variant-numeric:tabular-nums}.range-reload span{font-size:10px;letter-spacing:1px;margin-top:4px}.range-reload:disabled{opacity:.75;cursor:default}.range-reloading{transform:translateY(12%) rotate(5deg);opacity:.85;transition:transform .25s,opacity .25s}
.range-stage:has(.range-robot-field) .range-weapon{width:44%;bottom:0;right:0}.range-stage:has(.range-robot-field) .range-arena{aspect-ratio:16/9}.range-stage:has(.range-robot-field) .range-impact,.range-stage:has(.range-robot-field) .range-hit-score{z-index:150}
@keyframes robot-tread{to{background-position:0 10px}}
@media(max-width:700px){.range-stage:has(.range-robot-field) .range-arena{aspect-ratio:4/3}.range-reload{right:58px;bottom:8px;min-width:110px;min-height:44px;padding:5px 8px}.range-reload b{font-size:16px}.range-stage:has(.range-robot-field) .range-lane{font-size:9px;bottom:10px}.range-stage:has(.range-robot-field) .range-lane small{max-width:130px}.range-robot img{left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.robot-wheel{animation:none}.range-reloading{transition:none}}

/* Keep the primary control readable, separate from the foreground weapon. */
.range-stage .range-reload{left:18px;right:auto;bottom:18px;min-width:160px;min-height:58px;background:#e2bd70;color:#151b13;border:2px solid #fff0b9;box-shadow:0 3px 16px #0008;opacity:1}
.range-stage .range-reload span{font-size:13px;font-weight:800;letter-spacing:1px}.range-stage .range-reload:disabled{opacity:1;background:#bfa773;color:#24291d}.range-stage:has(.range-robot-field) .range-lane{display:none}
@media(max-width:700px){.range-stage .range-reload{left:10px;bottom:10px;min-width:128px;min-height:50px;padding:6px 10px}.range-stage .range-reload span{font-size:11px}.range-stage:has(.range-robot-field) .range-weapon{width:48%;bottom:0;right:0}}

/* Aim swivel is separate from the weapon's recoil and reload transforms. */
.range-aim{position:absolute;inset:0;z-index:4;pointer-events:none;transform-origin:88% 96%;transition:transform 90ms ease-out;will-change:transform}
.range-aim .range-weapon{z-index:auto}
.range-reticle{z-index:6;color:#fff9d9;text-shadow:0 1px 3px #000,0 0 4px #000;font-size:24px}
.range-aiming,.range-aiming .range-robot,.range-aiming .range-target{cursor:none}
@media(prefers-reduced-motion:reduce){.range-aim{transition:none}}