/* =========================================================================
 * DELETED TIME™ — GAME WORLD VISUAL RECOVERY STYLES
 * Bitmap Brothers (Speedball 2) × Konami (MGS Codec / Silent Hill) ×
 * Judge Dredd Mega-City Infrastructure × 12 Monkeys Retrofuturist CRT Rig
 * ========================================================================= */

:root {
  --gwr-bg: #040406;
  --gwr-steel: #14151b;
  --gwr-steel-hi: #2a2c36;
  --gwr-edge: rgba(242, 239, 233, 0.28);
  --gwr-edge-bright: rgba(242, 239, 233, 0.72);
  --gwr-phosphor: #e8e6df;
  --gwr-amber: #d8c395;
  --gwr-codec: #b8d8be;
  --gwr-alert: #e06c58;
  --gwr-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;
}

/* Collapse flat web hero text into diegetic codec drawer by default while keeping semantics */
.gwr-active #living-os .dt-os-hero-grid > div:first-child > .dt-os-kicker,
.gwr-active #living-os .dt-os-hero-grid > div:first-child > .dt-os-proposition,
.gwr-active #living-os .dt-os-hero-grid > div:first-child > .dt-os-lead {
  display: none;
}

.gwr-active.gwr-codec-expanded #living-os .dt-os-hero-grid > div:first-child > .dt-os-kicker,
.gwr-active.gwr-codec-expanded #living-os .dt-os-hero-grid > div:first-child > .dt-os-proposition,
.gwr-active.gwr-codec-expanded #living-os .dt-os-hero-grid > div:first-child > .dt-os-lead {
  display: block;
  background: rgba(6, 7, 10, 0.92);
  border-left: 3px solid var(--gwr-codec);
  padding: 10px 14px;
  margin-top: 8px;
  font-family: var(--gwr-mono);
  font-size: 12px;
}

/* In-World 3D Perspective Sign & CRT Sanctuary Stage replacing flat #living-os-title */
.gwr-spatial-stage {
  position: relative;
  width: 100%;
  min-height: 540px;
  margin: 8px 0 18px;
  background: radial-gradient(circle at 50% 38%, rgba(28, 30, 38, 0.92), rgba(4, 4, 6, 0.98) 78%);
  border: 2px solid var(--gwr-steel-hi);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  font-family: var(--gwr-mono);
  color: var(--gwr-phosphor);
  user-select: none;
}

.gwr-perspective-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

/* Scanline, weathering & surveillance vignette overlay */
.gwr-weathering-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.24) 0px,
      rgba(0, 0, 0, 0.24) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.72) 100%);
  z-index: 2;
}

/* Top Diegetic Konami / MGS Tactical Codec Header */
.gwr-codec-topbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(7, 8, 11, 0.88);
  border-bottom: 1px solid var(--gwr-edge);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.gwr-codec-freq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gwr-codec);
  font-weight: 700;
}

.gwr-codec-led {
  width: 8px;
  height: 8px;
  background: var(--gwr-codec);
  box-shadow: 0 0 8px var(--gwr-codec);
}

.gwr-camera-modes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gwr-cam-btn {
  appearance: none;
  background: #0d0e13;
  color: rgba(232, 230, 223, 0.72);
  border: 1px solid var(--gwr-edge);
  padding: 5px 9px;
  font-family: var(--gwr-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 120ms ease;
}

.gwr-cam-btn:hover,
.gwr-cam-btn:focus-visible {
  color: #ffffff;
  border-color: var(--gwr-edge-bright);
}

.gwr-cam-btn.is-active {
  background: var(--gwr-phosphor);
  color: #050507;
  font-weight: 700;
  border-color: #ffffff;
}

/* In-World Stacked CRT Television Bank (Right/Bottom Diegetic Cluster) */
.gwr-crt-cluster {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 12px;
  padding: 12px;
  min-height: 430px;
  align-items: end;
  pointer-events: none;
}

.gwr-sign-reticle-box {
  pointer-events: auto;
  max-width: 470px;
  background: rgba(6, 7, 10, 0.84);
  border: 1px solid var(--gwr-edge);
  border-left: 3px solid var(--gwr-amber);
  padding: 10px 12px;
  backdrop-filter: blur(6px);
}

.gwr-reticle-tag {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gwr-amber);
  margin-bottom: 4px;
}

.gwr-reticle-status {
  font-size: 11px;
  color: var(--gwr-phosphor);
  margin-bottom: 8px;
}

.gwr-reticle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gwr-btn {
  appearance: none;
  background: #13141c;
  color: var(--gwr-phosphor);
  border: 1px solid var(--gwr-edge);
  padding: 6px 10px;
  font-family: var(--gwr-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

.gwr-btn:hover,
.gwr-btn:focus-visible {
  background: #222432;
  border-color: var(--gwr-edge-bright);
}

.gwr-btn-primary {
  background: var(--gwr-phosphor);
  color: #050507;
  font-weight: 700;
}

.gwr-btn-primary:hover {
  background: #ffffff;
}

/* CRT Monitor Stack Casing */
.gwr-crt-stack {
  pointer-events: auto;
  background: #090a0e;
  border: 2px solid #2d303b;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 14px 36px rgba(0, 0, 0, 0.9);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gwr-crt-bezel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--gwr-amber);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 4px;
}

.gwr-crt-screen {
  position: relative;
  height: 220px;
  background: #030305;
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gwr-crt-ascii {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  font-family: var(--gwr-mono);
  font-size: 6.4px;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: #f0efe8;
  white-space: pre;
  overflow: hidden;
  text-shadow: 0 0 5px rgba(240, 239, 232, 0.35);
}

.gwr-crt-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
}

.gwr-crt-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.gwr-ch-btn {
  appearance: none;
  background: #111218;
  color: rgba(232, 230, 223, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 4px 5px;
  font-family: var(--gwr-mono);
  font-size: 8.5px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gwr-ch-btn.is-active {
  background: var(--gwr-phosphor);
  color: #050507;
  font-weight: 700;
}

.gwr-crt-provenance {
  font-size: 9px;
  color: rgba(232, 230, 223, 0.68);
  line-height: 1.35;
}

/* Opt-In Local Creator Archive Drawer / Modal */
.gwr-archive-drawer {
  position: relative;
  z-index: 5;
  margin-top: 8px;
  background: rgba(6, 7, 10, 0.96);
  border: 2px solid var(--gwr-edge-bright);
  padding: 14px;
  font-family: var(--gwr-mono);
  color: var(--gwr-phosphor);
}

.gwr-archive-drawer[hidden] {
  display: none !important;
}

.gwr-archive-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--gwr-edge);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.gwr-archive-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.gwr-folder-pill {
  appearance: none;
  background: #101118;
  color: var(--gwr-phosphor);
  border: 1px solid var(--gwr-edge);
  padding: 5px 9px;
  font-family: var(--gwr-mono);
  font-size: 9.5px;
  cursor: pointer;
}

.gwr-folder-pill.is-approved {
  border-color: var(--gwr-codec);
  color: var(--gwr-codec);
}

.gwr-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.gwr-archive-card {
  border: 1px solid var(--gwr-edge);
  background: #0c0d13;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gwr-archive-card.is-staged {
  border-color: var(--gwr-amber);
  box-shadow: inset 0 0 0 1px var(--gwr-amber);
}

.gwr-archive-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: #050507;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gwr-archive-meta {
  font-size: 9.5px;
  color: rgba(232, 230, 223, 0.78);
}

.gwr-archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

@media (max-width: 960px) {
  .gwr-crt-cluster {
    grid-template-columns: 1fr;
  }
}