/* Surveillance overlay — tactical grid, HUD chrome, phosphor bloom (no scan lines) */

.fx-surveillance{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  z-index:3;
}
.overlay > .fx-surveillance{z-index:1}

/* Orthogonal tactical grid (wireframe, not horizontal bands) */
.fx-tactical-grid{
  position:absolute;inset:0;opacity:.22;
  background:
    linear-gradient(90deg,rgba(63,227,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(63,227,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,227,255,.14) 1px,transparent 1px),
    linear-gradient(rgba(63,227,255,.14) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,240px 240px,240px 240px;
  mask-image:radial-gradient(ellipse 72% 68% at 50% 48%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 48%,#000 25%,transparent 78%);
}

/* Satellite orbit arc — top hemisphere (Gravity / orbital mechanics vibe) */
.fx-orbit-arc{
  position:absolute;left:50%;top:18%;width:min(88vw,720px);height:min(44vw,360px);
  transform:translateX(-50%);
  border:1px solid rgba(63,227,255,.12);border-bottom:none;
  border-radius:50% 50% 0 0/100% 100% 0 0;
  opacity:.55;
}
.fx-orbit-arc::before{
  content:'';position:absolute;left:12%;right:12%;top:18%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,227,255,.35),transparent);
}
.fx-orbit-arc::after{
  content:'ORBITAL PASS';position:absolute;left:50%;top:0;transform:translate(-50%,-120%);
  font:700 8px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.22em;color:rgba(63,227,255,.4);
}

/* Cold CCTV tint + vignette */
.fx-tint{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 38%,rgba(0,0,0,.28) 100%),
    linear-gradient(145deg,rgba(6,32,28,.14),rgba(8,16,36,.08));
  mix-blend-mode:soft-light;
}

/* Corner brackets */
.fx-corners{
  position:absolute;
  inset:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
       calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}
.fx-corners span{
  position:absolute;width:clamp(28px,7vw,48px);height:clamp(28px,7vw,48px);
  border-color:rgba(63,227,255,.42);border-style:solid;border-width:0;
  opacity:.9;box-shadow:0 0 14px rgba(63,227,255,.14);
}
.fx-corners span:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.fx-corners span:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.fx-corners span:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.fx-corners span:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}

/* ---- Landing-screen ISR HUD (lobby only) ---- */
.fx-hud{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* Left telemetry column — Prometheus / Aliens status board */
.fx-telemetry{
  position:absolute;left:calc(12px + env(safe-area-inset-left));
  top:calc(var(--lobby-hud-top, 54px) + 10px);
  max-width:min(168px,calc(50vw - 24px));
  min-width:118px;padding:8px 10px;
  background:rgba(3,8,16,.82);border:1px solid rgba(63,227,255,.2);
  clip-path:polygon(0 8px,8px 0,100% 0,100% 100%,0 100%);
}
.fx-tel-head{
  font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(63,227,255,.55);margin-bottom:6px;padding-bottom:5px;
  border-bottom:1px solid rgba(63,227,255,.12);
}
.fx-tel-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:10px}
.fx-tel-row .k{color:rgba(148,176,204,.85);letter-spacing:.08em;text-transform:uppercase}
.fx-tel-row .v{color:#edf6ff;font-weight:600;font-variant-numeric:tabular-nums}

/* Signal block — Enemy of the State / Bourne uplink */
.fx-sigblock{
  position:absolute;right:calc(12px + env(safe-area-inset-right));
  top:calc(var(--lobby-hud-top, 54px) + 10px);
  max-width:min(140px,calc(46vw - 20px));
  padding:8px 10px;background:rgba(3,8,16,.82);
  border:1px solid rgba(63,227,255,.18);text-align:right;
}
.fx-sig-title{font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(63,227,255,.5);margin-bottom:6px}
.fx-sig-bars{display:flex;gap:3px;justify-content:flex-end;margin-bottom:6px}
.fx-sig-bars i{
  display:block;width:5px;height:clamp(8px,2vw,14px);
  background:rgba(63,227,255,.2);border:1px solid rgba(63,227,255,.25);
}
.fx-sig-bars i:nth-child(1){height:6px;opacity:.5}
.fx-sig-bars i:nth-child(2){height:9px;opacity:.65}
.fx-sig-bars i:nth-child(3){height:12px;background:rgba(63,227,255,.35)}
.fx-sig-bars i:nth-child(4){height:15px;background:rgba(63,227,255,.5)}
.fx-sig-bars i:nth-child(5){height:18px;background:rgba(63,227,255,.65);animation:fx-sig-pulse 2s ease-in-out infinite}
@keyframes fx-sig-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.fx-sig-line{font-size:9px;letter-spacing:.06em;color:rgba(148,176,204,.9);margin-top:2px}
.fx-sig-line b{color:rgba(63,227,255,.85);font-weight:700}

/* UTC timecode — footage counter */
.fx-timecode{
  position:absolute;left:calc(12px + env(safe-area-inset-left));
  bottom:calc(148px + env(safe-area-inset-bottom));
  font-size:clamp(11px,2.6vw,13px);font-weight:600;letter-spacing:.12em;
  color:rgba(63,227,255,.75);padding:4px 8px;
  background:rgba(3,8,16,.65);border:1px solid rgba(63,227,255,.15);
}

/* Compass rose — fixed grid north */
.fx-compass{
  position:absolute;left:50%;top:calc(var(--lobby-hud-top, 54px) + 10px);
  transform:translateX(-50%);
  width:28px;height:28px;
  font-size:10px;font-weight:800;letter-spacing:.08em;
  color:rgba(63,227,255,.45);text-align:center;line-height:28px;
  border:1px solid rgba(63,227,255,.2);border-radius:50%;
  background:rgba(3,8,16,.5);
}
.fx-compass::after{
  content:'';position:absolute;left:50%;top:3px;transform:translateX(-50%);
  border:4px solid transparent;border-bottom:6px solid rgba(255,176,32,.7);
}

/* Range scale — scope tick marks */
.fx-scale{
  position:absolute;right:calc(14px + env(safe-area-inset-right));
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;align-items:flex-end;
  padding:8px 0;
}
.fx-scale span{
  display:block;width:clamp(12px,3vw,22px);height:1px;background:rgba(63,227,255,.35);
}
.fx-scale span:nth-child(3){width:clamp(18px,4.5vw,32px);background:rgba(63,227,255,.55)}
.fx-scale span:nth-child(1),.fx-scale span:nth-child(5){width:8px;opacity:.45}

/* Data cascade — Matrix / WarGames side channel */
.fx-databand{
  position:absolute;right:0;top:calc(var(--lobby-hud-top, 54px) + 88px);
  bottom:calc(160px + env(safe-area-inset-bottom));
  width:clamp(52px,14vw,72px);overflow:hidden;
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  opacity:.35;
}
.fx-data-scroll{
  animation:fx-data-drift 24s linear infinite;
  font-size:8px;line-height:1.65;letter-spacing:.14em;
  color:rgba(63,227,255,.55);word-break:break-all;padding:0 6px;
}
.fx-data-scroll div{padding:4px 0}
@keyframes fx-data-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* REC badge */
.fx-rec{
  position:absolute;top:calc(52px + env(safe-area-inset-top));
  left:calc(14px + env(safe-area-inset-left));
  z-index:8;display:flex;align-items:center;gap:7px;
  font-size:clamp(10px,2.4vw,11px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(63,227,255,.75);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(63,227,255,.35);
  pointer-events:none;
}
.fx-rec-dot{
  width:8px;height:8px;border-radius:50%;background:#ff6b8a;
  box-shadow:0 0 10px rgba(255,107,138,.85),0 0 20px rgba(255,107,138,.4);
  animation:fx-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes fx-rec-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(.86)}
}

/* Film grain */
.fx-grain{
  position:absolute;inset:-50%;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fx-grain-drift 1.2s steps(2) infinite;
}
@keyframes fx-grain-drift{
  0%{transform:translate(0,0)}
  100%{transform:translate(-3%,-2%)}
}

#stage > .fx-rec{
  left:auto;right:calc(10px + env(safe-area-inset-right));
  top:calc(14px + env(safe-area-inset-top));
}

/* Lobby: REC grouped with timecode (bottom-left stack) */
#worldmap > .fx-rec{
  top:auto;left:calc(12px + env(safe-area-inset-left));
  bottom:calc(178px + env(safe-area-inset-bottom));
  z-index:5;
}

@media (min-width:900px){
  .fx-corners span{border-color:rgba(63,227,255,.5)}
}

@media (max-width:599px){
  .fx-telemetry{padding:6px 8px;min-width:104px;max-width:calc(52vw - 16px)}
  #worldmap > .fx-rec{bottom:calc(168px + env(safe-area-inset-bottom))}
  .fx-tel-row{font-size:9px}
  .fx-sigblock{padding:6px 8px;max-width:calc(44vw - 16px)}
  .fx-sig-line{font-size:8px}
  .fx-databand{display:none}
  .fx-orbit-arc{opacity:.35;width:96vw}
  .fx-scale{display:none}
  .fx-compass{width:24px;height:24px;line-height:24px;font-size:9px}
}

@media (max-width:380px){
  .fx-compass{display:none}
}

@media (max-height:500px) and (orientation:landscape){
  .fx-telemetry,.fx-sigblock,.fx-databand,.fx-orbit-arc{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fx-grain,.fx-rec-dot,.fx-data-scroll,.fx-sig-bars i:nth-child(5){animation:none}
}