#overlay .card{width:min(660px,100%);background:#142329ef}
.operation-heading{text-align:center;padding:20px 0 24px}
.operation-heading h1{font-size:clamp(24px,5vw,37px)!important;letter-spacing:1.3px!important;font-weight:750!important;line-height:1.16}
.operation-heading p{margin:10px 0 0}
.operation-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:450px;margin:0 auto 24px}
#overlay .operation-nav-button{margin:0;min-height:82px;font-size:17px;background:#294347;color:#f2f7ed;border:1px solid #7b99938c}
#overlay .operation-nav-button:first-child{background:#d5eb92;color:#22301c}
#overlay .operation-nav-button:hover{filter:brightness(1.15)}
#overlay #operation-home{width:auto;margin:0 0 16px;background:transparent;color:#d5eb92;border:1px solid #8fa5a070;padding:10px 16px}
.operation-page[hidden],.operation-heading[hidden],.operation-nav[hidden],#operation-home[hidden]{display:none!important}
.operation-page h2{font-size:21px;margin:0 0 14px;font-weight:650}
.operation-page .camera-settings{margin-top:10px!important}
.operation-page .graphics-group{padding:14px 16px;border:1px solid #ffffff35;border-radius:11px;background:#0d252b88}
.operation-page .graphics-group label{display:block;margin:0 0 8px}
.operation-page .graphics-group select{width:100%;padding:10px;background:#203a3d;color:white;border:1px solid #7b9a92;border-radius:7px}
.operation-page .menu-section{margin-top:16px}
@media(max-height:500px){.operation-heading{padding:4px 0 12px}#overlay .operation-nav-button{min-height:55px}}

/* Return to current map without redeploying; only visible after first deploy. */
#overlay .card{position:relative}
#overlay #operation-close{position:sticky;float:right;top:0;right:0;z-index:9;margin:-3px -4px -2px 0!important;padding:0;width:38px;height:38px;line-height:33px;font-size:29px;font-weight:400;background:#365258;border:1px solid #91b1a9;color:#e9f9ee;border-radius:12px;box-shadow:0 3px 14px #0005}
#overlay #operation-close[hidden]{display:none!important}
.operation-page .touch-layout-entry{padding:15px 16px;border:1px solid #a4c8b66a;border-radius:12px;margin-top:14px;background:#183b418c}
.operation-page .touch-layout-entry strong{font-size:14px;color:#e9f8ee}
.operation-page .touch-layout-entry p{margin:7px 0 11px;font-size:12px;line-height:1.5}
#overlay #touch-layout-open{margin:0;background:#d5eb92;color:#19382b;padding:11px 14px}

/* Dedicated controls: movement modes and click-to-rebind keyboard controls. */
.control-prefs{margin-top:14px;padding:15px 16px;background:#183b418c;border:1px solid #a4c8b66a;border-radius:12px}
.control-prefs h3{font-size:15px;margin:0 0 12px;color:#f0f7ee}
.control-preference-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.control-mode-label{font-size:12px;display:grid;gap:6px;color:#d1e1d9}
.control-prefs select{min-width:0;width:100%;padding:10px;background:#203a3d;color:#f0f7ee;border:1px solid #7b9a92;border-radius:8px}
.keybind-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.keybind-heading h3{margin-bottom:0}
#overlay .keybind-reset{width:auto;margin:0;padding:7px 10px;font-size:11px;background:#294348;color:#dce8dd;border:1px solid #77928b;border-radius:7px}
.keybind-note{font-size:12px;line-height:1.45;color:#c6d7cc;margin:12px 0!important}
.keybind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 13px}
.keybind-row{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #71948435;padding:5px 0}
.keybind-row span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#overlay .keybind-button{width:auto;min-width:78px;max-width:150px;margin:0;padding:8px 10px;background:#294a50;color:#d5eb92;border:1px solid #71958a;border-radius:8px;font-weight:650;font-size:12px}
#overlay .keybind-button.recording{background:#d5eb92;color:#1b3226;min-width:105px}
@media(max-width:550px){.keybind-grid{grid-template-columns:1fr}.control-preference-options{grid-template-columns:1fr}}

/* Large, always-visible numeric feedback for camera sensitivity. */
#overlay .sensitivity-slider-track{position:relative;margin:32px 0 8px;min-height:26px;}
#overlay .sensitivity-slider-track #mouse-sensitivity{display:block;width:100%;margin:0;height:26px;touch-action:pan-x;}
#overlay #mouse-sensitivity-thumb-value{position:absolute;top:-29px;transform:translateX(-50%);pointer-events:none;min-width:54px;text-align:center;padding:4px 7px;border-radius:7px;background:#d5eb92;color:#18302a;font:700 12px/1.3 system-ui,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 3px 11px #0006;white-space:nowrap;}


/* Map-specific Free Roam / Raid selector (only Office and Sublevel). */
#overlay .raid-mode-picker{margin:7px 0 17px;padding:15px 16px;border-radius:12px;background:#1a3439;border:1px solid #93b4a96d;color:#e7f4e9}
#overlay .raid-mode-picker[hidden]{display:none!important}
#overlay .raid-mode-picker strong{font-size:14px;letter-spacing:.03em}
#overlay .raid-mode-picker p{margin:7px 0 12px;font-size:12px;line-height:1.45;color:#c0d1cb}
#overlay .raid-mode-options{display:flex;gap:9px}
#overlay .raid-mode-options button{flex:1;margin:0;min-width:0;background:#28464d;border:1px solid #668881;color:#e4efe5;border-radius:9px;padding:12px 6px;font-size:13px;font-weight:700}
#overlay .raid-mode-options button.chosen{background:#d5eb92;border-color:#d5eb92;color:#203124}
#raid-mode-hud{position:fixed;top:125px;left:24px;z-index:5;min-width:160px;pointer-events:none;color:#e4f0d7;text-shadow:0 2px 6px #0008;font:700 10px/1.6 system-ui,sans-serif;letter-spacing:.12em}
#raid-mode-hud[hidden]{display:none!important}
#raid-mode-hud span{display:block;color:#cfe3d7;letter-spacing:.05em;font-size:11px}
@media(max-width:700px){#raid-mode-hud{left:14px;top:250px;opacity:.82}}

/* Discrete Raid hit confirmation: four small crosshair ticks, animated on
   EVERY registered bullet/pellet group rather than relying on older timers. */
#raid-hitmarker{position:fixed;left:50%;top:50%;width:31px;height:31px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;z-index:7;filter:drop-shadow(0 1px 2px #000b)}
#raid-hitmarker i{position:absolute;width:9px;height:2.5px;border-radius:2px;background:#daf5df;top:50%;left:50%;transform-origin:center}
#raid-hitmarker i:nth-child(1){transform:translate(-14px,-11px) rotate(45deg)}
#raid-hitmarker i:nth-child(2){transform:translate(5px,-11px) rotate(-45deg)}
#raid-hitmarker i:nth-child(3){transform:translate(-14px,8px) rotate(-45deg)}
#raid-hitmarker i:nth-child(4){transform:translate(5px,8px) rotate(45deg)}
#raid-hitmarker[data-zone="head"] i{background:#ffd780}
#raid-hitmarker[data-zone="down"] i{background:#ffb69a}
#raid-hitmarker.active{animation:raid-confirm-hit .22s ease-out both}
@keyframes raid-confirm-hit{0%{opacity:0;scale:.75}15%{opacity:1;scale:1.10}65%{opacity:1;scale:1}100%{opacity:0;scale:1.04}}

/* Optional editing tools: hidden by default and while Developer Mode is off. */
html:not([data-developer-mode="on"]) #rig-open,
html:not([data-developer-mode="on"]) #animation-open,
html:not([data-developer-mode="on"]) #gun-rig-open,
html:not([data-developer-mode="on"]) #gun-animations-open,
html:not([data-developer-mode="on"]) #rig,
html:not([data-developer-mode="on"]) #animation-panel,
html:not([data-developer-mode="on"]) #gun-rig{display:none!important}
.operation-page .developer-settings{margin-top:14px;padding:16px;background:#0d252b88;border:1px solid #ffffff35;border-radius:11px}
.operation-page .developer-settings-row{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;color:#e4f4ec}
.operation-page .developer-settings-row span{display:grid;gap:4px}
.operation-page .developer-settings-row strong{font-size:14px}
.operation-page .developer-settings-row small{font-size:11px;color:#acc3b9;letter-spacing:0}
.operation-page .developer-settings-row input{appearance:none;flex:none;width:46px;height:26px;margin:0;border-radius:20px;background:#456063;border:1px solid #718f90;position:relative;cursor:pointer;transition:background .15s}
.operation-page .developer-settings-row input:before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#f2f6ef;transition:transform .15s}
.operation-page .developer-settings-row input:checked{background:#89b357;border-color:#c8e6a3}
.operation-page .developer-settings-row input:checked:before{transform:translateX(20px)}
.operation-page .developer-settings-row input:focus-visible{outline:2px solid #d5eb92;outline-offset:3px}
.operation-page .developer-settings p{margin:12px 0 0;color:#baccc6;font-size:12px;line-height:1.5}