/* =====================================================
   CINEMA OVERLAY - drop-in visual upgrade for v3 build
   -----------------------------------------------------
   Applies the cinematic intelligence treatment from
   Sector Lens v3 on top of an existing app shell.
   Adds: vignette, scan lines, atmospheric tint, nebula
   washes, denser star field, chrome elements styling.
   Does NOT change layout of existing panels - purely
   additive visual polish.
   ===================================================== */

/* Improve base font rendering (override with Inter Tight where used) */
html, body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Two-layer parallax star field - denser than original */
.app::before {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 18%, rgba(180,210,255,0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 45% 8%, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 88% 45%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 62%, rgba(220,235,255,0.65) 50%, transparent 51%),
    radial-gradient(0.7px 0.7px at 65% 75%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 88%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 92% 88%, rgba(255,235,200,0.7) 50%, transparent 51%),
    radial-gradient(0.6px 0.6px at 7% 47%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 33%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 38% 50%, rgba(200,220,255,0.45) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 71% 92%, rgba(255,255,255,0.6) 50%, transparent 51%) !important;
  opacity: 0.85 !important;
}

/* Soft nebula color washes - adds depth without distracting */
.app::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 50% 45% at 18% 28%, rgba(72, 128, 200, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 82% 78%, rgba(180, 140, 90, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 35% 30% at 75% 15%, rgba(90, 70, 140, 0.06) 0%, transparent 70%);
}

/* Cinematic vignette + scan lines (applied via injected .cinema-grade element) */
.cinema-grade {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
}
.cinema-grade::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 12%, transparent 88%, rgba(0,0,0,0.4) 100%);
}
.cinema-grade::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.012) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* Edge atmosphere - subtle CRT color shift on far edges */
.atmo-edge {
  position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background:
    linear-gradient(90deg, rgba(110,192,255,0.04) 0%, transparent 6%, transparent 94%, rgba(217,184,122,0.04) 100%);
}

/* ============================================================
   CINEMA CHROME - classification stripe + mission readout
   ============================================================ */

.cinema-classif {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.28em;
  color: #ef4444;
  z-index: 50;
  pointer-events: none;
}
.cinema-classif .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
  animation: cinemaBlink 1.6s ease-in-out infinite;
}
.cinema-classif .stripe {
  width: 18px; height: 3px;
  background: repeating-linear-gradient(90deg, #ef4444 0 4px, transparent 4px 7px);
}
@keyframes cinemaBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
html[dir="rtl"] .cinema-classif { left: auto; right: 28px; }

.cinema-readout {
  position: fixed; top: 86px; left: 28px;
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  flex-wrap: nowrap; white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.18em;
  z-index: 50;
  padding: 7px 14px;
  background: rgba(6,10,18,0.65);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.cinema-readout .mr-item { display: inline-flex; align-items: baseline; gap: 6px; }
.cinema-readout .mr-k { color: rgba(255,255,255,0.25); font-size: 8.5px; letter-spacing: 0.22em; }
.cinema-readout .mr-v { color: #e8edf5; font-size: 10.5px; letter-spacing: 0.06em; }
.cinema-readout .mr-v.on { color: #4ade80; }
.cinema-readout .mr-v.atmo { color: #6ec0ff; }
.cinema-readout .mr-sep { display: inline-block; width: 1px; height: 12px; background: rgba(255,255,255,0.14); margin: 0 2px; }
html[dir="rtl"] .cinema-readout { left: auto; right: 28px; }

/* Brand seal - small premium circle next to brand */
.cinema-seal {
  position: fixed; top: 22px; left: 28px;
  width: 38px; height: 38px;
  border: 1px solid #d9b87a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(217,184,122,0.18), rgba(217,184,122,0.03));
  z-index: 49;
  pointer-events: none;
}
.cinema-seal::before {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(217,184,122,0.4); border-radius: 50%;
}
.cinema-seal::after {
  content: "BP"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: #d9b87a;
}
/* When cinema-seal is present, nudge .brand right to make room */
.cinema-seal ~ .topbar .brand { margin-left: 50px; }
html[dir="rtl"] .cinema-seal { left: auto; right: 28px; }

/* ============================================================
   ATMOSPHERE THEMES - applied via .app[data-cinema-atmo=...]
   ============================================================ */
.app[data-cinema-atmo="day"] {
  background:
    radial-gradient(ellipse 110% 80% at 50% 50%, #1a263a 0%, #0c1422 55%, #050a14 100%),
    #04060a !important;
}
.app[data-cinema-atmo="recon"] {
  filter: saturate(0.18);
}

/* Hide chrome on very narrow viewports to not crowd */
@media (max-width: 900px) {
  .cinema-readout, .cinema-classif, .cinema-seal { display: none; }
}