/* SURVEILLANCE 4.0 / one console, six physical places. */
.camera-console{position:relative;margin:0;min-width:0}.camera-console .city{height:330px;min-height:270px;border-color:#7e9e87;isolation:isolate}.camera-console .city:after{opacity:.8}.camera-channel{position:absolute;top:44px;left:15px;z-index:4;pointer-events:none;text-shadow:0 2px 6px #000}.camera-channel>span{font:600 8px var(--ui);color:#b1c9ac;letter-spacing:1.2px;display:block}.camera-channel>strong{font:600 17px/1.2 var(--display);color:#e0dfc2;display:block;margin-top:3px;letter-spacing:.4px}.camera-telemetry{position:absolute;left:15px;right:15px;bottom:44px;display:flex;justify-content:space-between;gap:10px;z-index:4;font:600 8px var(--ui);letter-spacing:1px;color:#afc8ac;pointer-events:none;text-shadow:0 1px 4px #000}.camera-telemetry span{background:#0e272bbd;padding:3px 5px;border:1px solid #a0bf9222}.camera-console #sceneCaption{bottom:72px;left:15px;font-size:12px;line-height:1.45;max-width:calc(100% - 30px);padding:4px 7px;opacity:.95}.camera-console .city-corner{font-size:10px}.camera-console .scene-time{font-size:10px}.camera-console .city-overlay{min-height:37px;padding:9px 12px;font-size:9px}.camera-controls{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;background:linear-gradient(115deg,#223c39,#142c31);border:1px solid #5d7c68;border-top:0;align-items:center}.camera-nav{display:flex;align-items:center;gap:8px}.camera-nav>span{font:600 10px var(--ui);color:#c6d6b8;letter-spacing:1px;white-space:nowrap;min-width:55px;text-align:center}.camera-controls button{min-height:31px;font:600 10px var(--ui);padding:6px 8px;color:#bbcfb1;border:1px solid #5d7c665e;background:#122b2d;transition:background .15s,border-color .15s;white-space:nowrap}.camera-nav button{font:500 24px/1 var(--display);width:29px;padding:1px}.camera-options{display:flex;gap:5px}.camera-options #cameraExpand{font:600 19px/1 var(--body);width:33px;padding:2px}.camera-controls button:hover:not(:disabled){border-color:#c2d49d;background:#365346}.camera-controls button[aria-pressed=true]{color:#e5ebba;border-color:#bfce8f;background:#53683a4d;box-shadow:inset 0 2px #bacb8c}.camera-controls button:disabled{opacity:.4;cursor:not-allowed}#cameraAuto{position:relative;overflow:hidden}#cameraAuto[aria-pressed=true]:after{content:'';position:absolute;left:0;bottom:0;width:var(--scan-progress,0%);height:2px;background:#e0cd8b}.camera-console .districts{border-bottom:0;padding:9px 0 0;gap:5px}.camera-console .district-cell{cursor:pointer;min-height:58px;transition:background .15s,border-color .15s;position:relative}.camera-console .district-cell b{font-size:20px}.camera-console .district-cell span{font-size:8px;color:#aac0a4;letter-spacing:0}.camera-console .district-cell:not(.viewing){border-color:#4b6c58;background:#1d3438}.camera-console .district-cell:not(.viewing):before{display:none}.camera-console .district-cell.current:not(.viewing){border-bottom:2px solid #d4ad7c}.camera-console .district-cell.captured:not(.viewing){background:#2f533633}.camera-console .district-cell.viewing{border-color:#d9c28d;background:linear-gradient(145deg,#82683d44,#3a4d3a55);box-shadow:inset 0 2px #d4c18c,0 0 12px #c6ba7610}.camera-console .district-cell.viewing b,.camera-console .district-cell.viewing span{color:#f0dfb1}.camera-console .district-cell:hover:not(:disabled){border-color:#bfd29c;background:#4a654033}.camera-console .district-cell:disabled{opacity:.4;cursor:not-allowed}.camera-help{font:400 10px/1.5 var(--body);color:#a8c0a4;margin:8px 1px 14px;min-height:15px}.camera-console .night-vision #cityCanvas{filter:grayscale(1) sepia(.75) hue-rotate(38deg) saturate(1.6) brightness(1.6) contrast(1.08)}.camera-console .night-vision .camera-channel>span:after{content:' / IR ACTIF';color:#d0e5a5}.camera-console .night-vision{border-color:#c0d997;box-shadow:0 0 18px #9ac37818}.camera-console .night-vision .camera-telemetry{color:#d7e7ad}.camera-console .night-vision .camera-channel>strong{color:#e5edb8}.feed-tuning{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;display:grid;place-items:center;background:repeating-linear-gradient(0deg,#aec4a833 0,#10252a88 1px,transparent 3px,transparent 5px);visibility:hidden}.feed-tuning>span{padding:8px 14px;border:1px solid #cad49f55;background:#10282ceb;color:#cbd5ac;font:600 10px var(--ui);letter-spacing:2px}.camera-tuning .feed-tuning{animation:feedAcquire .45s steps(3,end);visibility:visible}.camera-shade{position:fixed;inset:0;background:#041016e8;z-index:80;backdrop-filter:blur(9px)}.camera-shade[hidden]{display:none}.camera-console.expanded{position:fixed;inset:max(22px,5vh) max(24px,8vw);z-index:85;background:#0f252b;border:1px solid #86a67d;padding:15px;display:flex;flex-direction:column;box-shadow:0 25px 100px #000a;overflow:auto;scrollbar-color:#799273 #17332e}.camera-console.expanded .city{height:auto;min-height:240px;flex:1}.camera-console.expanded .camera-controls{flex-shrink:0;padding:10px 13px}.camera-console.expanded .districts{flex-shrink:0;gap:9px}.camera-console.expanded .district-cell{padding:11px 5px;min-height:64px}.camera-console.expanded .district-cell b{font-size:25px}.camera-console.expanded .district-cell span{font-size:11px;letter-spacing:.5px}.camera-console.expanded .camera-channel{top:55px;left:24px}.camera-console.expanded .camera-channel>span{font-size:11px}.camera-console.expanded .camera-channel>strong{font-size:26px}.camera-console.expanded .city-corner{top:20px;left:21px;font-size:12px}.camera-console.expanded .scene-time{top:24px;right:24px;font-size:12px}.camera-console.expanded #sceneCaption{font-size:14px;left:23px;bottom:83px;max-width:70%;padding:7px 10px}.camera-console.expanded .camera-telemetry{left:24px;right:24px;bottom:48px;font-size:10px}.camera-console.expanded .city-overlay{font-size:11px;padding:11px 20px;min-height:43px}.camera-console.expanded .camera-help{margin:10px 0 0;font-size:12px}.camera-console.expanded .camera-controls button{min-height:35px;font-size:12px;padding:7px 12px}.camera-console.expanded .camera-nav button{font-size:26px;min-width:34px;padding:0}.camera-console.expanded #cameraExpand{font-size:24px;padding:0;width:37px}.camera-console.expanded #cameraIndex{font-size:12px;min-width:70px}.camera-console.expanded .raid-target{width:53px;height:53px;font-size:21px}.camera-console.expanded .ambient-badge{right:24px;bottom:85px}.camera-console.expanded .captured-stamp{font-size:39px}.camera-console .raid-running .city{border-color:#d9ad7c}
@keyframes feedAcquire{0%{opacity:.8;transform:translateY(-3px)}35%{opacity:.45;transform:translateY(2px)}80%{opacity:.25;transform:translateY(0)}100%{opacity:0}}
@media(min-width:1550px){.camera-console .city{height:380px}.camera-channel>strong{font-size:21px}.camera-channel>span{font-size:9px}.camera-controls button{font-size:11px;min-height:34px}.camera-nav>span{font-size:11px}.camera-console .district-cell span{font-size:9px}.camera-help{font-size:11px}.camera-console #sceneCaption{font-size:13px}}
@media(max-width:1100px) and (min-width:701px){.camera-console .city{height:310px}.camera-controls{padding:8px 6px;gap:5px}.camera-controls button{padding:6px}.camera-options{gap:4px}.camera-options #cameraNight span{display:none}.camera-nav{gap:5px}.camera-console .district-cell span{font-size:7px}.camera-console.expanded{inset:20px 25px}.camera-console.expanded .camera-options #cameraNight span{display:inline}.camera-console.expanded .district-cell span{font-size:10px}}
@media(max-width:700px){.camera-console .city{height:330px;min-height:280px}.camera-channel{top:42px;left:13px}.camera-channel>strong{font-size:17px}.camera-channel>span{font-size:8px}.camera-console .city-corner,.camera-console .scene-time{font-size:9px}.camera-console .scene-time{right:10px}.camera-console #sceneCaption{font-size:12px;left:12px;max-width:calc(100% - 24px);bottom:76px}.camera-telemetry{left:12px;right:12px;font-size:8px;bottom:45px;letter-spacing:.5px}.camera-console .city-overlay{font-size:8px;min-height:39px;padding:9px 10px}.camera-controls{padding:9px 6px;gap:4px}.camera-controls button{min-height:34px;font-size:10px;padding:7px}.camera-options{gap:5px}.camera-options #cameraNight span{display:none}.camera-nav{gap:3px}.camera-nav button{font-size:24px;width:27px}.camera-nav>span{font-size:9px;min-width:52px;letter-spacing:.5px}.camera-console .districts{gap:4px}.camera-console .district-cell{min-height:60px;padding:10px 1px 8px}.camera-console .district-cell b{font-size:23px}.camera-console .district-cell span{font-size:7px}.camera-help{font-size:11px;line-height:1.55;margin-bottom:14px}.camera-console.expanded{inset:12px;padding:9px;max-height:calc(100dvh - 24px)}.camera-console.expanded .city{min-height:240px;max-height:none}.camera-console.expanded .camera-channel{top:45px;left:13px}.camera-console.expanded .camera-channel>span{font-size:9px}.camera-console.expanded .camera-channel>strong{font-size:20px}.camera-console.expanded .scene-time{top:17px;right:12px;font-size:9px}.camera-console.expanded .city-corner{top:13px;left:11px;font-size:10px}.camera-console.expanded #sceneCaption{left:12px;font-size:12px;max-width:calc(100% - 24px);bottom:78px;padding:5px 7px}.camera-console.expanded .camera-telemetry{left:12px;right:12px;font-size:8px;bottom:45px}.camera-console.expanded .city-overlay{font-size:9px;padding:10px;min-height:38px}.camera-console.expanded .district-cell{min-height:58px;padding:9px 1px}.camera-console.expanded .district-cell b{font-size:23px}.camera-console.expanded .district-cell span{font-size:8px;letter-spacing:0}.camera-console.expanded .districts{gap:4px}.camera-console.expanded .camera-help{font-size:11px}.camera-console.expanded .camera-controls{padding:8px 6px}.camera-console.expanded .camera-controls button{font-size:10px;min-height:35px;padding:7px}.camera-console.expanded .camera-nav button{font-size:24px;padding:0;min-width:27px}.camera-console.expanded #cameraIndex{font-size:10px;min-width:52px}.camera-console.expanded #cameraExpand{font-size:23px;width:33px}.camera-console.expanded .ambient-badge{bottom:80px;right:13px}.camera-console.expanded .raid-target{width:46px;height:46px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.camera-tuning .feed-tuning{animation:none;visibility:hidden}.camera-controls button,.camera-console .district-cell{transition:none}}
@media(max-width:700px){.camera-console .districts,.camera-console.expanded .districts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.camera-console .district-cell,.camera-console.expanded .district-cell{display:flex;justify-content:center;align-items:center;gap:7px;min-height:48px;padding:9px 5px}.camera-console .district-cell span,.camera-console.expanded .district-cell span{font-size:10px;margin:0;letter-spacing:0}.camera-console .district-cell b,.camera-console.expanded .district-cell b{font-size:23px}.camera-console .district-cell.captured:after{right:3px;top:2px;font-size:8px}}

/* Retain fine material detail instead of burying the illustrated feeds under interference. */
.camera-console .city:after{opacity:.22}.camera-console #cityCanvas{image-rendering:auto}.camera-console #sceneCaption{background:#081a20b3;text-shadow:0 1px 3px #000;max-width:75%}.camera-console.expanded #sceneCaption{font-size:12px;max-width:67%;opacity:.88}.camera-console .camera-channel>strong{text-shadow:0 2px 8px #000,0 1px 2px #000}.camera-console.expanded .city{min-height:270px}@media(max-width:700px){.camera-console #sceneCaption,.camera-console.expanded #sceneCaption{font-size:10px;max-width:calc(100% - 26px);line-height:1.35}.camera-console .city:after{opacity:.15}}

/* Ten feeds: two rows of five, with room for the place names. */
.camera-console .districts,.camera-console.expanded .districts{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.camera-console .district-cell,.camera-console.expanded .district-cell{min-height:45px;padding:6px 2px}.camera-console .district-cell span,.camera-console.expanded .district-cell span{font-size:8px;letter-spacing:0}.camera-console .district-cell b,.camera-console.expanded .district-cell b{font-size:23px}
@media(max-width:700px){.camera-console .districts,.camera-console.expanded .districts{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.camera-console .district-cell,.camera-console.expanded .district-cell{min-height:42px;padding:6px 5px}.camera-console .district-cell span,.camera-console.expanded .district-cell span{font-size:10px}.camera-console.expanded .city{flex:none;height:44vh;min-height:220px}.camera-console.expanded{overflow:auto}}
/* Preserve the illustrated ground perspective, including on narrow screens. */
.camera-console .city,.camera-console.expanded .city{height:auto;min-height:0;aspect-ratio:9 / 5;flex:0 0 auto;width:100%}
