:root {
  --background: #0f0f0f; --terrain-ink: #d6d8d2; --lime: #cfff55; --orange: #e88947;
  --scene-scale: 1;
  --icon-swap-dur: 250ms; --icon-swap-blur: 2px; --icon-swap-start-scale: .25; --icon-swap-ease: ease-in-out;
}
html, body { width: 100%; height: 100%; background: var(--background); }
.preview { width: 100%; height: 100svh; min-height: 0; display: block; padding: 0; }
.viewport { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--background); }
.canvas { pointer-events: none; background: transparent; isolation: auto; }
.background { box-shadow: none; background: transparent; border: 1px solid #30322c; }
#hologram { position: absolute; inset: 0; opacity: 0; touch-action: none; cursor: grab; }
#hologram:active { cursor: grabbing; }
#hologram canvas { display: block; width: 100%; height: 100%; }
#graphics, .central-graphic { position: absolute; width: 1920px; height: 1080px; }
.central-graphic { inset: 0; transform-origin: 960.45px 546.7px; will-change: transform, opacity; }
#shared { z-index: 2; }
#graphics { z-index: 1; }
.press-start { z-index: 4; }
.system-controls { position: absolute; top: max(14px, calc(26px * var(--scene-scale))); right: max(18px, calc(34px * var(--scene-scale))); display: flex; align-items: center; gap: 10px; z-index: 8; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 5px; border: 1px solid transparent; border-radius: 0; background: transparent; cursor: pointer; transition: background 180ms, border-color 180ms; }
.icon-button img { display: block; width: 20px; height: 20px; }
.icon-button:hover { background: #24261e; border-color: #464a3b; }
.icon-button:focus-visible { outline: 1px solid var(--lime); outline-offset: 4px; }
#target-labels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.map-target { position: absolute; padding: 0; border: 0; width: 190px; height: 110px; margin-left: -95px; margin-top: -70px; color: #d0d2cb; background: transparent; cursor: pointer; pointer-events: auto; transform-origin: 95px 70px; -webkit-tap-highlight-color: transparent; }
.map-target:disabled { pointer-events: none; }
.target-callout { position: absolute; inset: 0; width: 190px; height: 110px; fill: none; overflow: visible; }
.target-callout .leader { stroke: #6b7064; stroke-width: 1; transition: stroke 180ms; }
.target-ring { stroke: var(--lime); stroke-width: 1.5; transition: stroke-width 180ms, r 220ms, filter 220ms; }
.target-core { fill: #a6aaa0; transition: fill 180ms; }
.target-ticks { stroke: #73776c; stroke-width: 1.5; }
.target-bars { stroke: var(--lime); stroke-width: 2; }
.target-pixels { stroke: var(--lime); stroke-width: 1.5; }
.target-name { position: absolute; left: 5px; top: 7px; padding: 3px 7px; height: 18px; background: #282a25e8; font: 400 10px/12px Oxanium,sans-serif; letter-spacing: 1.25px; white-space: nowrap; transition: background 180ms, color 180ms; }
.map-target.right .target-callout { transform: scaleX(-1); }
.map-target.right .target-name { left: auto; right: 5px; }
.map-target:hover .target-ring, .map-target:focus-visible .target-ring, .map-target[aria-pressed="true"] .target-ring { stroke-width: 2; filter: drop-shadow(0 0 4px #cfff5544); }
.map-target:hover .target-name, .map-target:focus-visible .target-name, .map-target[aria-pressed="true"] .target-name { background: #3a4326; color: var(--lime); }
.map-target[aria-pressed="true"] .target-core { fill: var(--lime); }
.map-target:focus-visible { outline: none; }
.map-target:focus-visible .leader { stroke: var(--lime); }
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); }
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
.mobile-brand { display: none; }
.load-error { z-index: 10; max-width: 520px; padding: 12px 16px; background: #161812; border: 1px solid #646b50; color: #d6dfc2; }
.scene-loading { position: absolute; bottom: 8vh; left: 0; right: 0; z-index: 6; margin: 0; text-align: center; color: #a1a699; font: 12px/1.5 Oxanium,sans-serif; letter-spacing: 1px; pointer-events: none; }
@media (max-width:700px) {
  .system-controls { top: 16px; right: 12px; gap: 6px; }
  .icon-button { width: 36px; height: 36px; }
  .mobile-brand { display: flex; align-items: center; gap: 16px; position: absolute; top: 28px; left: 18px; font: 10px/12px Oxanium,sans-serif; letter-spacing: 1px; pointer-events: none; }
  .mobile-brand span:first-child { padding: 3px 5px; color: #151515; background: #d4d6ce; }
  .mobile-brand span:last-child { color: #a1a699; }
  .map-target { transform: scale(.8); }
  #shared .asset[data-node-id^="action-"], #shared .asset[data-node-id^="I89"], #shared .text[data-node-id^="I89"], #shared .primitive { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
  .map-target *, .icon-button { transition: none !important; }
}

.holo-mini { position: absolute; left: 4vw; bottom: 10vh; width: 190px; height: 60px; transform: scale(.8); transform-origin: left bottom; pointer-events: none; opacity: 0; z-index: 3; }
.mini-layer { position: absolute; }

@media (max-width:700px) { .holo-mini { transform: scale(.6); bottom: 5vh; } }

/* Tracking is a projected HUD overlay; it never intercepts terrain gestures. */
.patrol-tracking { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.aircraft-lock { position: absolute; left: 0; top: 0; opacity: 0; color: #f47b72; pointer-events: none; filter: drop-shadow(0 0 3px #f65b5173) drop-shadow(0 0 10px #f33f372b); will-change: transform; }
.lock-corner { position: absolute; width: 12px; height: 12px; border: 0 solid currentColor; }
.lock-corner.tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.lock-corner.tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.lock-corner.bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.lock-corner.br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.lock-name, .lock-status { position: absolute; font: 400 9px/1 Oxanium,monospace; letter-spacing: 1.4px; white-space: nowrap; text-shadow: 0 0 8px #eb40331c; }
.lock-name { top: -15px; left: 0; }
.lock-status { bottom: -13px; right: 0; font-size: 8px; opacity: .78; letter-spacing: 1.6px; }
.lock-dot { position: absolute; right: 0; top: -13px; width: 3px; height: 3px; background: currentColor; box-shadow: 0 0 6px #f3655f55; }
@media (max-width:700px) { .lock-corner { width: 9px; height: 9px; } .lock-name { font-size: 8px; } }

.lock-outline { position: absolute; inset: 0; border: 1px solid #ef69600c; background: linear-gradient(90deg,transparent,#ee6b6338,transparent) center top / 60% 1px no-repeat, linear-gradient(90deg,transparent,#ee6b6326,transparent) center bottom / 42% 1px no-repeat; }
.lock-corner::after { content: ''; position: absolute; width: 4px; height: 4px; border: inherit; opacity: .32; }
.lock-corner.tl::after { top: 3px; left: 3px; }
.lock-corner.tr::after { top: 3px; right: 3px; }
.lock-corner.bl::after { bottom: 3px; left: 3px; }
.lock-corner.br::after { bottom: 3px; right: 3px; }
.lock-name b { font-weight: 400; font-size: 7px; opacity: .42; letter-spacing: 1px; }
.lock-axis { position: absolute; left: 50%; width: 1px; height: 7px; background: currentColor; opacity: .52; }
.lock-axis.top { top: -3px; }
.lock-axis.bottom { bottom: -3px; }
.lock-ladder { position: absolute; right: -7px; top: 50%; display: grid; gap: 5px; transform: translateY(-50%); }
.lock-ladder i { display: block; width: 3px; height: 1px; background: currentColor; opacity: .30; }
.lock-ladder i:nth-child(3) { width: 6px; opacity: .65; }
.lock-signal { position: absolute; left: 0; bottom: -11px; display: flex; align-items: end; gap: 3px; height: 4px; }
.lock-signal i { width: 2px; height: 2px; background: currentColor; opacity: .38; }
.lock-signal i:nth-child(2) { height: 3px; opacity: .6; }
.lock-signal i:nth-child(3) { height: 4px; opacity: .8; }
.lock-signal i:nth-child(4) { height: 4px; opacity: .25; }

.aircraft-lock[data-state="acquiring"] .lock-signal i:nth-child(n+3) { opacity: .1; }