body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1a1a1a;
    font-family: sans-serif;
    touch-action: none;
}
#ui {
    display: none;
}

/* WEAPON HUD (BOTTOM CENTER) */
#weapon-hud {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 25;
    user-select: none;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    height: 70px;
    align-items: center;
}
#hud-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 15px;
    border-right: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.3;
    margin-right: 10px;
    white-space: nowrap;
}
.stat-val { color: #00e5ff; }
.weapon-slot {
    background: rgba(20, 25, 35, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 10px 18px;
    min-width: 160px;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    opacity: 0.9;
}
.weapon-slot.active-weapon {
    border-color: #ffd700;
    background: rgba(40, 50, 70, 0.95);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    transform: translateY(-8px) scale(1.05);
    opacity: 1;
}
.weapon-slot.locked {
    opacity: 0.3;
    filter: grayscale(1);
}
.weapon-icon {
    font-size: 28px;
    margin-right: 14px;
}
.weapon-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.weapon-name {
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.5px;
}
.weapon-level {
    font-size: 12px;
    color: #00e5ff;
    font-weight: bold;
    margin-top: 2px;
}
.weapon-ammo {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    margin-left: 14px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

#stamina-container {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(180px, 40vw, 320px);
    pointer-events: none;
    z-index: 80;
    text-align: center;
    transition: opacity 0.3s ease;
    opacity: 0;
}
/* Keep stamina visible above the dock + touch buttons on phones */
@media (max-width: 768px) {
    #stamina-container {
        bottom: 200px;
    }
}
#stamina-label {
    font-size: 12px;
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px black;
}
#stamina-bar-bg {
    width: 100%;
    height: 12px;
    background: rgba(0,0,0,0.5);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    overflow: hidden;
}
#stamina-bar-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffd700, #fff);
    transition: width 0.1s linear;
}

/* Shield stacks: same idiom as the stamina bar, one slot above it. Measured in a 622px-tall
   viewport: the stamina container occupies 448-482px and its label sits at the top, so 186px
   (bottom edge at 436px) leaves a 12px gap rather than the 4px that 178px gave. */
#shield-stack-container {
    position: absolute;
    bottom: 186px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 80;
    text-align: center;
    transition: opacity 0.3s ease;
    opacity: 0;
}
@media (max-width: 768px) {
    #shield-stack-container {
        bottom: 246px;
    }
}
#shield-stack-label {
    font-size: 12px;
    color: #00e5ff;
    font-weight: bold;
    margin-bottom: 3px;
    text-shadow: 1px 1px 2px black;
}
#shield-stack-pips {
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

#top-btn-container {
    position: absolute;
    top: 15px;
    left: 245px;
    display: flex;
    gap: 8px;
    z-index: 40;
}
.top-action-btn {
    background: #2a82e4;
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}
.top-action-btn:hover { background: #3992f5; }

#wave-banner {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffcc6e;
    font-size: clamp(20px, 5vw, 38px);
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 204, 110, 0.8);
    pointer-events: none;
    display: none;
    z-index: 25;
    text-align: center;
}
.animate-banner { animation: bannerPop 1.8s ease-out forwards; }
@keyframes bannerPop {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

#pickup-prompt {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #ffd700;
    color: #ffd700;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.5px;
    pointer-events: none;
    display: none;
    z-index: 25;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

#game-over-modal {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(10, 12, 16, 0.92);
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}
#game-over-modal h1 {
    color: #ff4444;
    font-size: clamp(28px, 7vw, 48px);
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}
#restart-btn {
    margin-top: 20px;
    padding: 14px 32px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.6);
    transition: transform 0.1s;
}
#restart-btn:hover { background: #34c759; }

#menu-modal {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* dynamic viewport: mobile browser chrome doesn't clip the bottom */
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    background: rgba(18, 22, 28, 0.96);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 0; /* full-bleed: no rounded corners at screen edge */
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.8);
    z-index: 100;
    display: none;
    flex-direction: column;
    color: white;
    overflow: hidden;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.modal-tabs { display: flex; gap: 8px; }
.modal-tab-btn {
    background: #2a3b4c;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ddd;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}
.modal-tab-btn.active { background: #2a82e4; color: white; border-color: #55a3ff; }
.modal-close-btn {
    background: #d9534f;
    border: none;
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.modal-body { flex: 1; display: flex; overflow: hidden; position: relative; }
.tab-content { flex: 1; display: none; width: 100%; height: 100%; }
.tab-content.active { display: flex; }

#weapon-view-container { display: flex; width: 100%; height: 100%; }
#weapon-list {
    width: 220px;
    background: rgba(0, 0, 0, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.weapon-card-btn {
    background: #1c2633;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
}
.weapon-card-btn.active { border-color: #2a82e4; background: #2a3e55; }
.weapon-card-btn.locked { opacity: 0.55; }
.weapon-card-btn small { display: block; color: #8fa0b5; margin-top: 3px; font-size: 10px; }
#weapon-viewport-container {
    flex: 1; position: relative;
    background: radial-gradient(circle, #253342 0%, #0d1217 100%);
    display: flex; align-items: center; justify-content: center;
}
#weapon-canvas { width: 100%; height: 100%; cursor: grab; }
#weapon-canvas:active { cursor: grabbing; }
#weapon-meta {
    position: absolute; bottom: 15px; left: 20px;
    pointer-events: none; background: rgba(0,0,0,0.65);
    padding: 10px 15px; border-radius: 6px; font-size: 12px; line-height: 1.4;
}
#equip-selected-btn {
    position: absolute; bottom: 15px; right: 20px;
    background: #28a745; border: none; color: white;
    padding: 10px 20px; font-weight: bold; border-radius: 6px;
    cursor: pointer; box-shadow: 0 0 10px rgba(40,167,69,0.5);
}
#equip-selected-btn:disabled { background: #555 !important; cursor: not-allowed !important; box-shadow: none !important; }

.settings-container-flex { display: flex; width: 100%; height: 100%; padding: 20px; gap: 25px; overflow-y: auto; }
.settings-col { flex: 1; background: rgba(0, 0, 0, 0.4); padding: 15px 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); }
.setting-checkbox { margin: 8px 0; display: flex; align-items: center; cursor: pointer; user-select: none; font-size: 13px; }
.setting-checkbox input { margin-right: 8px; }
.setting-slider-row { margin: 10px 0; display: flex; flex-direction: column; font-size: 12px; }
.setting-slider-row label { display: flex; justify-content: space-between; margin-bottom: 3px; }
.setting-slider-row input[type="range"] { width: 100%; }

.save-settings-btn {
    width: 100%; margin-top: 12px; padding: 10px 0;
    background: #2a82e4; color: #fff; border: none;
    border-radius: 6px; font-weight: bold; font-size: 12px; cursor: pointer;
}

.theme-btn.active, .app-weapon-btn.active { background: #2a9d8f; color: #fff; }
.theme-btn:hover, .app-weapon-btn:hover { filter: brightness(1.15); }

/* Zoom in/out overlay buttons for the 3D preview viewports (menu tabs) */
.viewport-zoom-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}
.viewport-zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(18, 22, 28, 0.75);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.viewport-zoom-btn:hover { filter: brightness(1.4); background: rgba(42, 130, 228, 0.75); }
.viewport-zoom-btn:active { filter: brightness(0.9); }

#crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 30;
    display: none;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.9));
}

#crosshair.crosshair-pistol { width: 18px; height: 18px; }
#crosshair.crosshair-pistol::before, #crosshair.crosshair-pistol::after {
    content: ''; position: absolute; background: rgba(255, 255, 255, 0.95);
}
#crosshair.crosshair-pistol::before { top: 8px; left: 0; width: 18px; height: 2px; }
#crosshair.crosshair-pistol::after { top: 0; left: 8px; width: 2px; height: 18px; }

#crosshair.crosshair-shotgun {
    width: 36px; height: 36px; border: 2px dashed rgba(255, 255, 255, 0.9); border-radius: 50%;
}
#crosshair.crosshair-shotgun::before {
    content: ''; position: absolute; top: 16px; left: 16px; width: 4px; height: 4px;
    background: #ffffff; border-radius: 50%;
}

#crosshair.crosshair-machinegun { width: 24px; height: 24px; }
#crosshair.crosshair-machinegun::before {
    content: ''; position: absolute; top: 11px; left: 0; width: 7px; height: 2px; background: rgba(255,255,255,0.95);
    box-shadow: 17px 0 0 rgba(255,255,255,0.95);
}
#crosshair.crosshair-machinegun::after {
    content: ''; position: absolute; top: 0; left: 11px; width: 2px; height: 7px; background: rgba(255,255,255,0.95);
    box-shadow: 0 17px 0 rgba(255,255,255,0.95);
}

#crosshair.crosshair-minigun {
    width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; border-style: double;
}
#crosshair.crosshair-minigun::before {
    content: ''; position: absolute; top: 13px; left: 13px; width: 4px; height: 4px;
    background: #ffffff; border-radius: 50%;
}

/* Precision optic: fine crosshair with a centre gap inside a faint ring */
#crosshair.crosshair-sniper {
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}
#crosshair.crosshair-sniper::before {
    content: ''; position: absolute; top: 19.5px; left: 0; width: 40px; height: 1px;
    background: linear-gradient(to right,
        rgba(255,255,255,0.95) 0 15px, transparent 15px 25px, rgba(255,255,255,0.95) 25px 40px);
}
#crosshair.crosshair-sniper::after {
    content: ''; position: absolute; top: 0; left: 19.5px; width: 1px; height: 40px;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.95) 0 15px, transparent 15px 25px, rgba(255,255,255,0.95) 25px 40px);
}

/* Launcher sight: a wide mil bracket with corner ticks, sized for a blast
   weapon — the reticle is deliberately loose because the round is slow and the
   damage comes from the 7.5u splash, not from pinpoint placement. */
#crosshair.crosshair-rocket {
    width: 46px; height: 46px;
    border: 1px solid rgba(255, 152, 0, 0.55);
    border-radius: 4px;
}
#crosshair.crosshair-rocket::before {
    content: ''; position: absolute; top: 22.5px; left: 8px; width: 30px; height: 1px;
    background: linear-gradient(to right,
        rgba(255,255,255,0.9) 0 12px, transparent 12px 18px, rgba(255,255,255,0.9) 18px 30px);
}
#crosshair.crosshair-rocket::after {
    content: ''; position: absolute; top: 8px; left: 22.5px; width: 1px; height: 30px;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.9) 0 12px, transparent 12px 18px, rgba(255,255,255,0.9) 18px 30px);
}

/* Arc-Caster: a cyan charged ring with a hairline cross inside it. The ring is the
   CHAIN RADIUS cue, not decoration — it is deliberately wider than the pistol's
   crosshair because the arc's job is a line of targets, not a pinpoint shot. */
#crosshair.crosshair-lightning {
    width: 40px; height: 40px;
    border: 1px solid rgba(103, 232, 249, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(103, 232, 249, 0.45), inset 0 0 6px rgba(103, 232, 249, 0.3);
}
#crosshair.crosshair-lightning::before {
    content: ''; position: absolute; top: 19.5px; left: 9px; width: 22px; height: 1px;
    background: linear-gradient(to right,
        rgba(103,232,249,0.95) 0 8px, transparent 8px 14px, rgba(103,232,249,0.95) 14px 22px);
}
#crosshair.crosshair-lightning::after {
    content: ''; position: absolute; top: 9px; left: 19.5px; width: 1px; height: 22px;
    background: linear-gradient(to bottom,
        rgba(103,232,249,0.95) 0 8px, transparent 8px 14px, rgba(103,232,249,0.95) 14px 22px);
}

/* =================================================================
   CHAMBER RING (sniper / rocket reload readout)
   A ring that closes as the shot comes back — deliberately unnumbered.
   Track and fill share a 40x40 viewBox with r=17, so the dash pattern is
   exactly one circumference (106.81); js/main.js drives stroke-dashoffset
   from 106.81 (empty) down to 0 (ready) and toggles the opacity. The
   -90deg turn starts the arc at 12 o'clock so it grows clockwise.
   Sits just under the reticle so it never covers the aim point, and at
   z-index 32 it clears the scope mask (24) and the dock (25) while staying
   under the damage floaters (50+) — a reload readout must never cover one.
   ================================================================= */
#reload-ring {
    position: absolute;
    top: calc(50% + 46px);
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 32;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#reload-ring svg {
    display: block;
    width: 40px;
    height: 40px;
    transform: rotate(-90deg);
    /* Dark halo so the ring reads over the bright floor and walls as well as the sky. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}
#reload-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.30);
    stroke-width: 3;
}
#reload-ring-fill {
    fill: none;
    stroke: #a5f3fc;                 /* overridden per weapon by js/main.js */
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 106.81;        /* 2 * PI * 17 */
    stroke-dashoffset: 106.81;       /* empty until the first reload arms it */
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.65));
}

/* =================================================================
   SNIPER SCOPE OVERLAY (ADS)
   display/opacity are driven each frame from the ADS blend in js/main.js.
   z-index 24 keeps it under the HUD dock (25) and corner HUD (30) so the
   readouts stay legible while scoped.
   ================================================================= */
#scope-overlay {
    --scope-r: min(33vh, 33vw);   /* aperture radius */
    position: absolute;
    inset: 0;
    z-index: 24;
    display: none;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Black surround with a clean circular aperture */
#scope-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(0, 0, 0, 0) 0 var(--scope-r),
        rgba(0, 0, 0, 0.82) calc(var(--scope-r) + 0.3vh),
        #000 calc(var(--scope-r) + 1vh));
}

/* Optic tube depth: inner shadow plus a faint cyan rim, matching the palette */
#scope-tube {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--scope-r) * 2);
    height: calc(var(--scope-r) * 2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: inset 0 0 70px 26px rgba(0, 0, 0, 0.9),
                inset 0 0 0 2px rgba(170, 200, 220, 0.16),
                inset 0 0 34px 8px rgba(0, 229, 255, 0.05);
}

/* Mil-dot reticle */
#scope-reticle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--scope-r) * 2);
    height: calc(var(--scope-r) * 2);
    transform: translate(-50%, -50%);
}
/* Full-span crosshair with a centre gap */
#scope-reticle::before {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 45%,
        rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0) 55%,
        rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0.7) 100%);
}
#scope-reticle::after {
    content: '';
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 45%,
        rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0) 55%,
        rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0.7) 100%);
}

/* Centre aiming dot (cyan, matching the optic's reticle LED in the 3D model) */
.scope-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 7px rgba(0, 229, 255, 0.95);
}

/* Mil-dot holdover marks along both axes */
.scope-md {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.md-n  { transform: translateY(-18px); }
.md-nn { transform: translateY(-36px); }
.md-s  { transform: translateY(18px); }
.md-ss { transform: translateY(36px); }
.md-w  { transform: translateX(-18px); }
.md-e  { transform: translateX(18px); }

#click-to-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(0,0,0,0.9);
    background: radial-gradient(circle, rgba(10, 14, 20, 0.25) 0%, rgba(10, 14, 20, 0.75) 100%);
    z-index: 90;
    pointer-events: none;
    user-select: none;
}
#click-to-play-box {
    pointer-events: auto;
    cursor: pointer;
    background: rgba(10, 18, 28, 0.85);
    border: 3px solid #ffd700;
    border-radius: 14px;
    padding: 30px 50px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.45), 0 8px 30px rgba(0,0,0,0.6);
    animation: play-box-pulse 1.6s ease-in-out infinite alternate;
    transition: background 0.15s, border-color 0.15s;
}
#click-to-play-box:hover {
    background: rgba(30, 48, 68, 0.9);
    border-color: #ffffff;
}
@keyframes play-box-pulse {
    from { transform: scale(1.0); }
    to { transform: scale(1.05); }
}
#click-to-play-box small {
    display: block;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: #b8c8d8;
    margin-top: 10px;
}
#keybind-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 4px 12px;
}
.keybind-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.keybind-label { color: #cfd8e3; font-size: 12px; }
.keybind-btn {
    background: rgba(42, 130, 228, 0.35);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    min-width: 72px;
    text-align: center;
}
.keybind-btn:hover { background: rgba(42, 130, 228, 0.6); }
.keybind-btn.waiting { background: #e4a02a; border-color: #ffd700; color: #111; }
.keybind-col { flex-basis: 100%; }
#controls-hint {
    color: #55a3ff;
    font-size: 11px;
    font-weight: bold;
    margin-top: 8px;
}

#touch-joystick-zone {
    position: absolute; bottom: 40px; left: 40px;
    width: clamp(96px, 14vw, 130px); height: clamp(96px, 14vw, 130px); background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
    touch-action: none; z-index: 15; pointer-events: none;
    display: none;
}
#touch-stick {
    position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.5); border-radius: 50%;
    pointer-events: none; transform: translate(0px, 0px);
}

#touch-right-stick-zone {
    position: absolute; bottom: 40px; right: 40px;
    width: clamp(96px, 14vw, 130px); height: clamp(96px, 14vw, 130px); background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
    touch-action: none; z-index: 15; pointer-events: none;
    display: none;
}
#touch-right-stick {
    position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.5); border-radius: 50%;
    pointer-events: none; transform: translate(0px, 0px);
}

#aim-touch-zone {
    position: absolute; top: 0; right: 0;
    width: 50%; height: calc(100% - 190px);
    touch-action: none; z-index: 5;
}
.touch-action-btn {
    position: absolute; width: clamp(54px, 8vw, 60px); height: clamp(54px, 8vw, 60px);
    border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4);
    color: white; font-weight: bold; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    user-select: none; z-index: 20; touch-action: none;
}
#touch-jump-btn { right: 185px; bottom: 45px; background: rgba(50, 150, 220, 0.65); }
#touch-shoot-btn { right: 40px; bottom: 185px; background: rgba(220, 150, 50, 0.65); }
#runner-warning-ui {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff3333;
    font-size: clamp(20px, 5vw, 32px);
    font-weight: 900;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 2px 2px 4px black;
    z-index: 100;
    display: none;
    pointer-events: none;
    animation: warning-pulse 0.5s infinite alternate;
}
@keyframes warning-pulse {
    from { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
    to { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
}
#hud-bottom-left {
    position: absolute; bottom: 20px; left: 20px;
}
#hud-top-right {
    position: absolute; top: 20px; right: 20px;
}
#hud-weapon-container {
    position: absolute; bottom: 20px; left: 20px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 20;
}
.hud-panel {
    background: rgba(20, 25, 35, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    pointer-events: none !important;
    z-index: 25 !important;
}


/* GAMEPAD TAB */
.gp-status { color: #8fa3b8; font-size: 12px; font-weight: bold; margin-bottom: 10px; text-align: center; }
#gp-svg { width: 100%; max-width: 430px; display: block; margin: 0 auto; }
.gp-body { fill: #262c38; stroke: rgba(255,255,255,0.35); stroke-width: 2; }
.gp-well { fill: rgba(0,0,0,0.45); stroke: rgba(255,255,255,0.25); stroke-width: 1.5; }
.gp-stick { fill: #4a5568; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
.gp-btn { fill: #3a4152; stroke: rgba(255,255,255,0.3); stroke-width: 1.5; transition: fill 0.06s linear; }
#gp-svg g.gp-active .gp-btn { fill: #ffd700; }
#gp-svg g.gp-active .gp-label { fill: #111; }
.gp-ring { fill: rgba(0,0,0,0.25); stroke: rgba(255,255,255,0.18); stroke-width: 2; transition: stroke 0.06s linear; }
.gp-ring.gp-active { stroke: #ffd700; stroke-width: 3.5; }
.gp-label { fill: #aab4c4; font-size: 10px; font-weight: bold; pointer-events: none; }
.gp-trig-bg { fill: rgba(0,0,0,0.45); stroke: rgba(255,255,255,0.25); stroke-width: 1.5; }
.gp-trig-fill { fill: #ffd700; }
.gp-rebind-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; color: #fff; font-size: 12px; font-weight: bold; }
.gamepad-viz-col { flex: 1 1 380px; }
#main-menu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.mm-selected {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
}

/* =================================================================
   ROCKET LAUNCHER STADIA SIGHT (ADS)
   Same contract as the scope above: display/opacity are written each frame from
   the ADS blend in js/main.js. A RECTANGULAR aperture rather than a circular one,
   so the two optics read as completely different devices at a glance.
   ================================================================= */
#launcher-overlay {
    --sight-w: min(46vh, 46vw);
    --sight-h: min(34vh, 34vw);
    position: absolute;
    inset: 0;
    z-index: 24;
    display: none;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Black surround with a rectangular aperture */
#launcher-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(0, 0, 0, 0) 0 55%,
        rgba(0, 0, 0, 0.78) 72%,
        #000 100%);
}

/* Optic body: interior shadow plus a faint orange rim, the launcher's hazard colour */
#launcher-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sight-w);
    height: var(--sight-h);
    transform: translate(-50%, -50%);
    border-radius: 6px;
    box-shadow: inset 0 0 80px 30px rgba(0, 0, 0, 0.92),
                inset 0 0 0 2px rgba(255, 152, 0, 0.20),
                inset 0 0 40px 10px rgba(255, 152, 0, 0.05);
}

/* Stadia rangefinder reticle */
#launcher-stadia {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sight-w);
    height: var(--sight-h);
    transform: translate(-50%, -50%);
}
#launcher-stadia::before {    /* horizontal stadia line with a centre gap */
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.75) 46%,
        rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 54%,
        rgba(255, 255, 255, 0.75) 54%, rgba(255, 255, 255, 0.75) 100%);
}
#launcher-stadia::after {     /* vertical stadia line, upper half only */
    content: '';
    position: absolute;
    left: 50%;
    top: 10%;
    width: 1px;
    height: 34%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 88%,
        rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
}

/* Range ticks hanging below the centreline */
.stadia-tick {
    position: absolute;
    width: 1px;
    background: rgba(255, 255, 255, 0.6);
}
.st-1 { left: 20%; top: 50%; height: 3%; }
.st-2 { left: 30%; top: 50%; height: 5%; }
.st-3 { left: 40%; top: 50%; height: 7%; }
.st-4 { left: 60%; top: 50%; height: 7%; }
.st-5 { left: 70%; top: 50%; height: 5%; }
.st-6 { left: 80%; top: 50%; height: 3%; }

/* Aim point: a bracket over a dot — the launcher's "put it here" mark */
.stadia-chevron {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 14px;
    height: 8px;
    transform: translate(-50%, -50%);
    border-left: 1.5px solid rgba(255, 152, 0, 0.9);
    border-bottom: 1.5px solid rgba(255, 152, 0, 0.9);
    border-right: 1.5px solid rgba(255, 152, 0, 0.9);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.stadia-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    transform: translate(-50%, -50%);
    background: rgba(255, 152, 0, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 152, 0, 0.8);
}

/* =================================================================
   MODEL ADJUSTMENT LAB (Soldier Studio) TAB
   Control styles ported from the standalone Soldier Studio tool.
   ================================================================= */
#lab-panel {
    width: 360px;
    background: rgba(0, 0, 0, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #e5e7eb;
    font-size: 11px;
}
#lab-panel::-webkit-scrollbar { width: 6px; }
#lab-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }

.lab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 6px;
}
.lab-header strong { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #e59a44; }
.lab-header-actions { display: flex; gap: 5px; }

.lab-action-btn {
    background: #2a313c;
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.lab-action-btn:hover { filter: brightness(1.25); }
.lab-copy-btn { background: #e59a44; color: #1a1a18; }
.lab-apply-btn { background: #28a745; color: #ffffff; }
.lab-reset-btn { background: #d9534f; color: #ffffff; }

.lab-pose-btn, .lab-weapon-btn {
    background: #2a313c;
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 7px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.lab-pose-btn:hover, .lab-weapon-btn:hover { background: #3e4856; border-color: #e59a44; }
.lab-pose-btn.active, .lab-weapon-btn.active {
    background: #e59a44;
    color: #1a1a18;
    border-color: #f0e7cb;
    font-weight: 700;
}

.lab-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    margin-top: 6px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 3px;
}

.lab-ctrl-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 3px; }
.lab-ctrl-label { display: flex; justify-content: space-between; align-items: center; color: #d1d5db; }
.lab-right-controls { display: inline-flex; align-items: center; gap: 8px; }
.lab-inv { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #9ca3af; cursor: pointer; }
.lab-inv input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: #e59a44; }
.lab-val {
    font-family: monospace;
    color: #e59a44;
    font-weight: bold;
    min-width: 44px;
    text-align: right;
}

#lab-panel input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    margin: 4px 0;
}
#lab-panel input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #e59a44;
    cursor: pointer;
}
#lab-panel input[type=range]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 50%;
    background: #e59a44;
    cursor: pointer;
}

/* =================================================================
   START-OF-GAME LOADOUT POPUP
   ================================================================= */
#loadout-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(4, 8, 14, 0.88);
    backdrop-filter: blur(6px);
}
#loadout-modal h1 {
    font-size: 34px;
    letter-spacing: 2px;
    color: #e59a44;
    text-shadow: 0 0 24px rgba(229, 154, 68, 0.45);
    margin-bottom: 6px;
}
#loadout-modal .loadout-sub {
    color: #8fa3b8;
    font-size: 13px;
    margin-bottom: 22px;
}
#loadout-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 190px));
    gap: 12px;
    margin-bottom: 24px;
}
.loadout-weapon-btn {
    background: #1c2633;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 16px 10px;
    color: #e2e8f0;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.loadout-weapon-btn strong { font-size: 14px; display: block; }
.loadout-weapon-btn small { display: block; color: #8fa0b5; font-size: 10px; margin-top: 5px; }
.loadout-weapon-btn:hover { border-color: #2a82e4; transform: translateY(-2px); }
.loadout-weapon-btn.selected {
    border-color: #28a745;
    background: #1d3a28;
    box-shadow: 0 0 16px rgba(40, 167, 69, 0.45);
}
.loadout-weapon-btn.selected strong { color: #6fff9a; }

/* Dock is already full (4 picks): can't add more, deselect one first */
.loadout-weapon-btn.at-cap {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.7);
}
.loadout-weapon-btn.at-cap:hover { transform: none; border-color: rgba(255, 255, 255, 0.15); }
.loadout-placeholder {
    background: #131a24;
    border: 2px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 16px 10px;
    color: #5c6b7d;
    text-align: center;
    cursor: default;
    user-select: none;
}
.loadout-placeholder strong { font-size: 13px; display: block; }
.loadout-placeholder small { display: block; font-size: 10px; margin-top: 5px; }
#loadout-confirm {
    padding: 14px 34px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: #28a745;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
#loadout-confirm:hover:not(:disabled) { background: #34c759; transform: translateY(-1px); }
#loadout-confirm:disabled { background: #3a4350; color: #8a94a2; cursor: not-allowed; }

/* =================================================================
   DEPTH FRAMING FOR THE 3D VIEW
   Two fixed overlays painted over the WebGL canvas (which carries the
   #game-canvas id, set in js/main.js). Both are pure CSS: no draw call,
   no shader, nothing added to the render loop.
   z-index 14 is deliberate — above the canvas, below the scope mask (24),
   the HUD dock (25) and the corner HUD (30), so no HUD is dimmed and the
   scope stays crisp while scoped.
   They do the cheap half of what a post-processing stack would do: the
   vignette gives the frame edges falloff and pulls the eye to the centre,
   and the scanline layer keeps large flat areas (sky, floor) from reading
   as untouched gradients.
   ================================================================= */
#depth-vignette {
    position: fixed;
    inset: 0;
    z-index: 14;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0) 42%,
        rgba(4, 8, 16, 0.16) 72%,
        rgba(4, 8, 16, 0.46) 100%);
}

#depth-scanline {
    position: fixed;
    inset: 0;
    z-index: 14;
    pointer-events: none;
    opacity: 0.5;
    /* Meant to be felt rather than seen. Raise the opacity to make it obvious,
       or drop the element entirely if the look is too retro. */
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.020) 0px,
        rgba(255, 255, 255, 0.020) 1px,
        rgba(0, 0, 0, 0.035) 1px,
        rgba(0, 0, 0, 0.035) 3px);
}

/* A touch of grade on the canvas itself. This is compositor work rather than a render
   pass, but it is also the first thing to remove if a weak GPU shows it in the frame
   time: a filter puts the canvas on its own layer. */
#game-canvas {
    display: block;
    filter: saturate(1.08) contrast(1.04);
}

/* =================================================================
   MAP SELECT (main menu)
   Sits on its own line inside #main-menu-buttons (a wrapping flex row),
   directly under PLAY. Picking the other map restarts the run at wave 1 —
   see applyMap() in js/main.js.
   ================================================================= */
#main-menu-map-row {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

#main-menu-map-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #8fa3b8;
}

#main-menu-map-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.map-btn {
    background: #3a4350;
    min-width: 132px;
}

/* The map you are standing in right now. Deliberately the same gold language the keyboard
   and gamepad navigation uses (mm-selected), so "current map" reads as a state rather than
   as another button. */
.map-btn-active {
    background: #2a82e4;
    box-shadow: 0 0 12px rgba(42, 130, 228, 0.6);
}