:root {
  --sim-bg: var(--theme-learning-surface-1);
  --sim-accent: var(--bb-kelly);
  --sim-border: var(--theme-learning-success-2);
}

/* --- NAVIGATION --- */

nav {
  height: 80px;
  background: var(--theme-component-page-21);
  border-bottom: 1px solid var(--sim-border);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

nav .bb-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 130px;
}

.nav-logo img {
  height: 45px;
  filter: drop-shadow(0 0 5px var(--bb-kelly));
  transition: 0.3s ease;
  display: block;
}

/* --- MASTER TEMPLATE LAYOUT --- */

.mission-header {
  height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding-top: 80px;
  overflow: hidden;
  background-color: var(--theme-learning-page-4);
}

#dnsCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.header-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, var(--bb-bg-deep) 90%);
  z-index: 2;
  pointer-events: none;
}

.mission-header-content {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.briefing-meta {
  font-family: var(--font-code);
  color: var(--bb-kelly);
  letter-spacing: 4px;
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-size: 14px;
  text-shadow: 0 0 10px var(--bb-kelly);
  animation: glitchMeta 3s infinite;
}

@keyframes glitchMeta {

  0%, 90%, 100% {
    opacity: 1;
    transform: skew(0);
  }

  92% {
    opacity: 0.8;
    transform: skew(5deg);
  }

  95% {
    opacity: 0.5;
    color: var(--theme-component-ink-5);
  }
}

.mission-title {
  font-size: clamp(2.8rem, 9vw, 5.8rem);
  font-family: var(--font-tech);
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 0.9;
  color: var(--theme-component-ink-5);
  text-shadow: 0 0 30px var(--theme-learning-success-6);
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  animation: bounce 2s infinite;
  color: var(--bb-kelly);
  z-index: 10;
  font-size: 1.25rem;
}

@keyframes bounce {

  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

/* --- INTEL BLOCKS --- */



.intel-content h2 {
  font-family: var(--font-tech);
  color: var(--bb-kelly);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  border-left: 4px solid var(--bb-kelly);
  padding-left: 20px;
  letter-spacing: 2px;
}

.intel-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.intel-card {
  background: var(--theme-learning-success-bg-8);
  border: 1px solid var(--theme-learning-success-9);
  padding: 25px;
  border-radius: 4px;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}

.intel-card:hover {
  border-color: var(--bb-kelly);
  background: var(--theme-learning-success-bg-105);
}

.intel-card h3 {
  color: var(--bb-kelly);
  font-family: var(--font-tech);
  text-transform: uppercase;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.intel-card p {
  
  
  
}

.role-badge {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 14px;
  background: var(--theme-learning-success-bg-10);
  padding: 2px 8px;
  border-radius: 2px;
  margin-bottom: 10px;
  color: var(--theme-component-ink-5);
}

/* --- SIMULATION BLOCKS --- */

.sim-container {
  background: var(--sim-bg);
  border: 1px solid var(--sim-border);
  border-radius: 8px;
  padding: 30px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px var(--theme-learning-shadow-color-14);
}

.terminal-header {
  background: var(--theme-learning-scene-bg-106);
  padding: 12px 18px;
  font-family: var(--font-code);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--sim-border);
  color: var(--bb-kelly);
}

.terminal-body {
  padding: 20px;
}

/* Memory Sim Styles */

.memory-display {
  font-size: 2rem;
  font-family: var(--font-tech);
  color: var(--theme-component-ink-5);
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-component-page-47);
  border-radius: 4px;
  margin: 20px 0;
  letter-spacing: 5px;
  text-transform: uppercase;
}

#memoryInputContainer {
  display: none;
  text-align: center;
}

.memory-input {
  background: transparent;
  border-bottom: 2px solid var(--bb-kelly);
  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--bb-kelly);
  font-size: 1rem;
  text-align: center;
  width: 80%;
  font-family: var(--font-code);
  outline: none;
  margin-bottom: 20px;
}

.summary-recap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
  font-family: var(--font-code);
  font-size: max(15px, 1rem);
}

.result-row {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background: var(--theme-catalog-surface-136);
  border-left: 2px solid var(--bb-text-dim);
}

.result-row.correct {
  border-left-color: var(--bb-kelly);
  color: var(--bb-kelly);
}

.result-row.incorrect {
  border-left-color: var(--bb-error);
  color: var(--bb-error);
}

/* --- UI UTILITIES --- */

.panel {
  background: var(--theme-catalog-surface-130);
  border-left: 4px solid var(--bb-kelly);
  padding: 25px;
  margin: 20px 0;
  border-radius: 0 4px 4px 0;
}

/* --- TRACE VISUALIZATION (UPDATED) --- */

.trace-map-container {
  position: relative;
  padding: 60px 0;
}

.trace-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.trace-line {
  fill: none;
  stroke: var(--bb-text-dim);
  stroke-width: 2;
  stroke-dasharray: 8 4;
  opacity: 0.3;
  transition: 0.5s;
}

.trace-line.active {
  stroke: var(--bb-kelly);
  stroke-width: 3;
  opacity: 1;
  animation: lineFlow 2s linear infinite;
}

@keyframes lineFlow {

  from {
    stroke-dashoffset: 24;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.trace-map {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 250px;
  flex-wrap: wrap;
  gap: 20px;
  z-index: 2;
}

.trace-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  transition: transform 0.3s;
}

.node-icon {
  width: 70px;
  height: 70px;
  border: 2px solid var(--bb-text-dim);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bb-bg-deep);
  margin-bottom: 15px;
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 1.5rem;
  position: relative;
}

.trace-node.active .node-icon {
  border-color: var(--bb-kelly);
  box-shadow: 0 0 25px var(--bb-kelly);
  color: var(--bb-kelly);
  transform: scale(1.1);
}

/* Toggle Switch for Trace Mode */

.trace-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.trace-toggle-btn {
  background: var(--theme-catalog-surface-70);
  border: 1px solid var(--sim-border);
  color: var(--bb-text-muted);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-tech);
  text-transform: uppercase;
  transition: 0.3s;
}

.trace-toggle-btn.active {
  background: var(--bb-kelly);
  color: var(--theme-component-on-primary-3);
  font-weight: bold;
  box-shadow: 0 0 15px var(--theme-learning-success-2);
}

/* DATACENTER IMAGE FIX */

.dossier-visual {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 500px;
  overflow: hidden;
  margin: 40px auto;
  border: 1px solid var(--theme-learning-success-111);
  border-radius: 4px;
  background: var(--theme-component-page-22);
}

.dossier-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  /* Corrected to prevent zooming */
  filter: grayscale(100%) brightness(0.7) contrast(1.1);
}

/* TACTICAL RETICLE CURSOR REPAIR */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border: 1px solid var(--bb-kelly);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10000;
  background-image: linear-gradient(90deg, var(--bb-kelly) 15%, transparent 15%, transparent 85%, var(--bb-kelly) 85%),
                              linear-gradient(180deg, var(--bb-kelly) 15%, transparent 15%, transparent 85%, var(--bb-kelly) 85%);
  background-position: center;
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;
}

.cursor-coords {
  position: absolute;
  right: -90px;
  top: -15px;
  font-family: var(--font-code) !important;
  font-size: 14px !important;
  color: var(--bb-kelly) !important;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: left;
  width: 110px;
  white-space: nowrap;
  pointer-events: none;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--theme-catalog-surface-31);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  pointer-events: none;
}

/* ZONE FILE THEME */

.zone-file-example {
  background: var(--theme-component-page-22);
  border: 1px solid var(--bb-kelly);
  border-radius: 4px;
  padding: 20px;
  margin: 25px 0;
  font-family: var(--font-code);
  font-size: 1rem;
  color: var(--theme-learning-ink-20);
  overflow-x: auto;
  position: relative;
}

.zf-comment {
  color: var(--theme-component-info-4);
  font-style: italic;
}

.zf-keyword {
  color: var(--bb-kelly);
  font-weight: bold;
}

.zf-value {
  color: var(--theme-component-ink-5);
}

.fqdn-dot {
  color: var(--bb-error);
  opacity: 0;
  transition: opacity 0.3s;
  font-weight: bold;
}

.fqdn-active .fqdn-dot {
  opacity: 1;
}

/* RECORD TYPES TABLE */

.record-types-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: var(--theme-component-page-64);
  font-family: var(--font-tech);
}

.record-types-table th {
  text-align: left;
  padding: 15px;
  background: var(--theme-catalog-success-bg-132);
  color: var(--bb-kelly);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--bb-kelly);
}

.record-types-table td {
  padding: 15px;
  border-bottom: 1px solid var(--theme-component-border-14);
  vertical-align: top;
}

.record-type-code {
  color: var(--theme-component-ink-5);
  font-family: var(--font-code);
  font-weight: bold;
  font-size: max(15px, max(15px, 1rem));
}

/* --- PACKET DECODER STYLES --- */

.packet-decoder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 30px;
}

.packet-visual-wrapper {
  background: var(--theme-learning-page-16);
  border: 1px solid var(--sim-border);
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.packet-header-tab {
  background: var(--theme-learning-inset-115);
  padding: 8px 15px;
  font-family: var(--font-tech);
  font-size: 14px;
  color: var(--theme-component-muted-6);
  border-bottom: 1px solid var(--theme-learning-border-117);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}

.packet-raw-view {
  background: var(--theme-learning-page-118);
  padding: 20px;
  font-family: var(--font-code);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--theme-learning-ink-119);
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* 4 Bytes per row */
  gap: 2px;
}

.packet-byte {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--theme-learning-border-117);
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  flex-direction: column;
}

.packet-byte:hover {
  background: var(--theme-learning-success-bg-10);
  border-color: var(--bb-kelly);
  color: var(--bb-kelly);
}

.byte-label {
  font-size: 14px;
  color: var(--theme-learning-muted-120);
  margin-bottom: 2px;
  text-transform: uppercase;
}

.byte-data {
  font-weight: bold;
}

.packet-info-panel {
  background: var(--theme-learning-success-bg-121);
  border: 1px solid var(--theme-learning-success-122);
  padding: 15px;
  margin-top: 15px;
  min-height: 80px;
}

.packet-info-panel h4 {
  color: var(--bb-kelly);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.packet-info-panel p {
  font-size: max(15px, 1rem);
  color: var(--bb-text-muted);
  line-height: 1.4;
}

/* --- CLI SIMULATOR STYLES --- */

.cli-terminal {
  background: var(--theme-learning-scene-bg-123);
  color: var(--theme-learning-scene-ink-124);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  padding: 20px;
  border-radius: 0 0 4px 4px;
  height: 350px;
  overflow-y: auto;
  border: none;
}

.cli-input-line {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.cli-prompt {
  color: var(--bb-kelly);
  margin-right: 10px;
}

.cli-input {
  background: transparent;
  border: none;
  color: var(--theme-component-ink-5);
  width: 100%;
  outline: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
}

/* Colors for DIG output */

.dig-header {
  color: var(--bb-text-dim);
}

.dig-section {
  color: var(--bb-gold);
  font-weight: bold;
  margin-top: 10px;
  display: block;
}

.dig-answer {
  color: var(--bb-kelly);
}

.dig-error {
  color: var(--bb-error);
}

/* --- PHASE 3: TTL LAB STYLES --- */

.ttl-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.ttl-server-pane {
  background: var(--theme-learning-page-125);
  border: 1px solid var(--sim-border);
  border-radius: 4px;
  padding: 20px;
}

.ttl-client-pane {
  background: var(--theme-catalog-surface-31);
  border-radius: 4px;
  color: var(--theme-learning-ink-126);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.browser-bar {
  background: var(--theme-learning-surface-127);
  padding: 10px;
  border-bottom: 1px solid var(--theme-learning-border-128);
  display: flex;
  gap: 10px;
  align-items: center;
}

.url-input {
  flex-grow: 1;
  background: var(--theme-catalog-surface-31);
  border: 1px solid var(--theme-learning-border-128);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  color: var(--theme-learning-muted-129);
}

.browser-viewport {
  padding: 40px;
  text-align: center;
  flex-grow: 1;
  background: var(--theme-learning-surface-130);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.site-content {
  font-family: 'Geist', sans-serif;
}

.site-content h1 {
  color: var(--theme-learning-ink-126);
}

.site-content .ip-display {
  font-size: 2rem;
  font-weight: bold;
  color: var(--theme-catalog-ink-74);
  margin: 20px 0;
}

.cache-controls {
  grid-column: 1 / -1;
  background: var(--theme-component-page-51);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--bb-text-dim);
}

.ttl-timer {
  font-family: var(--font-tech);
  font-size: 1.5rem;
  color: var(--bb-gold);
}

/* --- PHASE 3: ZONE AUDITOR STYLES --- */

.auditor-code {
  font-family: var(--font-code);
  background: var(--theme-component-page-22);
  padding: 20px;
  border: 1px solid var(--bb-text-dim);
  color: var(--theme-learning-muted-132);
  line-height: 1.8;
}

.audit-line {
  display: block;
  padding: 2px 5px;
  cursor: help;
  transition: 0.2s;
}

.audit-line:hover {
  background: var(--theme-catalog-surface-541);
  color: var(--theme-component-ink-5);
}

.audit-line.error-found {
  text-decoration: underline wavy var(--bb-error);
  color: var(--bb-error);
}

.audit-line.safe {
  color: var(--bb-kelly);
}

.audit-feedback {
  margin-top: 15px;
  min-height: 40px;
  padding: 10px;
  background: var(--theme-component-page-50);
  border-left: 3px solid var(--bb-text-dim);
  font-size: 1rem;
}

/* --- PHASE 4: PRIVACY VISUALIZER --- */

.privacy-sim-container {
  margin-top: 20px;
  background: var(--theme-component-page-22);
  border: 1px solid var(--sim-border);
  height: 150px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy-track {
  position: absolute;
  left: 50px;
  right: 50px;
  height: 4px;
  background: var(--theme-learning-inset-135);
  top: 50%;
  transform: translateY(-50%);
}

.privacy-tunnel {
  position: absolute;
  left: 50px;
  right: 50px;
  height: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme-catalog-success-bg-132);
  border-top: 1px dashed var(--bb-kelly);
  border-bottom: 1px dashed var(--bb-kelly);
  opacity: 0;
  transition: opacity 0.5s;
}

.isp-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -150%);
  font-size: 2rem;
  color: var(--bb-text-dim);
  z-index: 5;
  transition: color 0.3s;
}

.packet-demo {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  z-index: 4;
}

.packet-demo.clear {
  background: var(--bb-error);
  box-shadow: 0 0 10px var(--bb-error);
}

.packet-demo.enc {
  background: var(--bb-kelly);
  box-shadow: 0 0 10px var(--bb-kelly);
}

/* Privacy Animations */

@keyframes privacy-flow {

  0% {
    left: 50px;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 50px);
    opacity: 0;
  }
}

@keyframes eye-snoop {

  0%, 40% {
    color: var(--bb-text-dim);
    transform: translate(-50%, -150%) scale(1);
  }

  45% {
    color: var(--bb-error);
    transform: translate(-50%, -130%) scale(1.2);
  }

  /* Eye looks closer */

  55% {
    color: var(--bb-error);
    transform: translate(-50%, -130%) scale(1.2);
  }

  60%, 100% {
    color: var(--bb-text-dim);
    transform: translate(-50%, -150%) scale(1);
  }
}

@keyframes shield-deflect {

  0%, 40% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }

  /* Shield pops */

  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }

  60%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

.shield-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: var(--bb-kelly);
  opacity: 0;
  z-index: 6;
}

/* State Classes */

.priv-mode-clear .packet-demo {
  animation: privacy-flow 3s infinite linear;
}

.priv-mode-clear .isp-eye {
  animation: eye-snoop 3s infinite linear;
}

.priv-mode-enc .privacy-tunnel {
  opacity: 1;
}

.priv-mode-enc .packet-demo {
  animation: privacy-flow 3s infinite linear;
}

.priv-mode-enc .shield-icon {
  animation: shield-deflect 3s infinite linear;
}

/* ===================================================================== */

/* --- ENHANCED THREAT ANIMATION STYLES -------------------------------- */

/* ===================================================================== */

/* Bigger stage + clearer "network diagram" look */

.threat-anim-container {
  height: 240px;
  background: radial-gradient(800px 220px at 50% 50%, var(--theme-learning-success-bg-29), transparent 60%),
                linear-gradient(180deg, var(--theme-catalog-surface-130), transparent 60%),
                var(--theme-component-page-20);
  border: 1px solid var(--theme-learning-success-137);
  border-radius: 6px;
  margin-top: 25px;
  position: relative;
  overflow: hidden;
  display: block;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 35px var(--theme-learning-shadow-color-138),
                inset 0 0 0 1px var(--theme-learning-border-139);
}

/* subtle scan line sweep */

.threat-anim-container::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(120deg, transparent 40%, var(--theme-learning-success-bg-29), transparent 60%);
  transform: translateX(-40%);
  animation: threat-scan 6s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes threat-scan {

  0% {
    transform: translateX(-55%) translateY(-10%);
  }

  100% {
    transform: translateX(55%) translateY(10%);
  }
}

/* grid overlay */

.threat-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--theme-catalog-surface-169) 1px, transparent 1px),
                linear-gradient(90deg, var(--theme-catalog-surface-169) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.18;
  pointer-events: none;
}

/* animated link layer (simple paths / rails) */

.threat-rails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
}

.threat-rail {
  position: absolute;
  height: 2px;
  background: var(--theme-learning-surface-141);
  border-radius: 2px;
  box-shadow: 0 0 0 var(--theme-learning-shadow-color-142);
}

.threat-rail.active {
  background: var(--theme-learning-success-bg-143);
  box-shadow: 0 0 16px var(--theme-learning-success-137);
  animation: rail-flow 2.2s linear infinite;
}

@keyframes rail-flow {

  0% {
    filter: brightness(0.9);
    opacity: 0.6;
  }

  50% {
    filter: brightness(1.25);
    opacity: 1;
  }

  100% {
    filter: brightness(0.9);
    opacity: 0.6;
  }
}

/* nodes */

.threat-node-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
  width: 92px;
  position: absolute;
}

.threat-node-box i {
  font-size: 2rem;
  color: var(--theme-learning-muted-145);
  transition: 0.25s ease;
}

.threat-node-box span {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--theme-learning-ink-146);
  font-family: var(--font-code);
  text-align: center;
  letter-spacing: 1px;
}

/* node base + pulse ring */

.threat-node-base {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid var(--theme-learning-border-147);
  background: var(--theme-component-page-72);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--theme-learning-border-149);
}

.threat-node-base::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--theme-learning-success-150);
  opacity: 0;
}

/* accent roles */

.threat-node-box.good .threat-node-base {
  border-color: var(--theme-learning-success-31);
}

.threat-node-box.bad .threat-node-base {
  border-color: var(--theme-learning-error-152);
}

.threat-node-box.good i {
  color: var(--theme-learning-success-153);
  text-shadow: 0 0 16px var(--theme-learning-success-33);
}

.threat-node-box.bad i {
  color: var(--theme-learning-error-155);
  text-shadow: 0 0 16px var(--theme-learning-error-156);
}

/* cache slot becomes a "cache" module */

.cache-slot {
  width: 44px;
  height: 24px;
  border: 1px dashed var(--theme-learning-border-157);
  border-radius: 4px;
  margin-top: 8px;
  position: relative;
  background: var(--theme-component-page-72);
  overflow: hidden;
}

.cache-slot::before {
  content: "CACHE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-family: var(--font-code);
  letter-spacing: 1px;
  color: var(--theme-learning-ink-158);
}

/* packets */

.packet-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  opacity: 0;
  will-change: transform, opacity, left, top;
}

.p-green {
  background: var(--bb-kelly);
  box-shadow: 0 0 14px var(--theme-learning-success-159);
}

.p-red {
  background: var(--theme-learning-error-160);
  box-shadow: 0 0 14px var(--theme-learning-error-161);
}

/* labels that travel with packets */

.packet-label {
  position: absolute;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: var(--font-code);
  font-size: 14px;
  letter-spacing: 1px;
  background: var(--theme-component-page-45);
  border: 1px solid var(--theme-learning-border-163);
  color: var(--theme-learning-ink-164);
  opacity: 0;
  z-index: 11;
  pointer-events: none;
  transform: translate(-50%, -140%);
  white-space: nowrap;
}

.packet-label.good {
  border-color: var(--theme-learning-success-47);
  color: var(--theme-learning-success-166);
}

.packet-label.bad {
  border-color: var(--theme-learning-error-167);
  color: var(--theme-learning-error-168);
}

/* Impact flashes / waves */

.impact-flash {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  box-shadow: 0 0 0 var(--theme-learning-shadow-color-142);
}

.impact-flash.good {
  background: var(--theme-catalog-primary-241);
  box-shadow: 0 0 18px var(--theme-learning-success-55);
}

.impact-flash.bad {
  background: var(--theme-learning-error-171);
  box-shadow: 0 0 18px var(--theme-learning-error-172);
}

@keyframes flash-pop {

  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  15% {
    opacity: 1;
    transform: scale(1.1);
  }

  55% {
    opacity: 0.35;
    transform: scale(2.8);
  }

  100% {
    opacity: 0;
    transform: scale(4.2);
  }
}

/* ========= Cache Poisoning (clearer story beats) ========= */

/* attacker injects forged answer into cache, then user gets redirected */

@keyframes poisoning-attacker-drop {

  0% {
    left: 50%;
    top: 14%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }

  10% {
    opacity: 1;
  }

  24% {
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.0);
  }

  28% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes poisoning-cache-fill {

  0%, 22% {
    background: var(--theme-component-page-72);
    border: 1px dashed var(--theme-learning-border-157);
    box-shadow: none;
  }

  24%, 100% {
    background: var(--theme-learning-error-bg-173);
    border: 1px solid var(--theme-learning-error-174);
    box-shadow: inset 0 0 0 1px var(--theme-learning-error-156), 0 0 18px var(--theme-learning-error-167);
  }
}

@keyframes poisoning-user-query {

  0%, 34% {
    left: 14%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.9);
  }

  38% {
    opacity: 1;
  }

  56% {
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }

  60% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes poisoning-resolver-lie {

  0%, 60% {
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.9);
  }

  64% {
    opacity: 1;
  }

  78% {
    left: 14%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }

  82% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes poisoning-redirect-bad {

  0%, 82% {
    left: 14%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.9);
  }

  84% {
    opacity: 1;
  }

  100% {
    left: 86%;
    top: 74%;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.05);
  }
}

/* flashes sync points */

@keyframes poison-flash-inject {

  0%, 18% {
    opacity: 0;
  }

  22% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes poison-flash-redirect {

  0%, 84% {
    opacity: 0;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ========= Amplification (bigger blast, clearer spoof -> flood) ========= */

@keyframes amp-pulse-spoofed {

  0% {
    left: 16%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.9);
  }

  10% {
    opacity: 1;
  }

  32% {
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%,-50%) scale(0.8);
  }

  36% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* flood wave (thicker, multi-pulse) */

.amp-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 44px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--theme-learning-error-155), var(--theme-learning-error-bg-175), transparent);
  box-shadow: 0 0 22px var(--theme-learning-error-167);
  z-index: 8;
}

@keyframes amp-wave {

  0%, 36% {
    width: 0;
    opacity: 0;
  }

  42% {
    width: 16px;
    opacity: 1;
  }

  74% {
    width: 260px;
    opacity: 1;
  }

  86% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    width: 260px;
  }
}

@keyframes amp-wave2 {

  0%, 40% {
    width: 0;
    opacity: 0;
  }

  46% {
    width: 10px;
    opacity: 0.85;
  }

  76% {
    width: 240px;
    opacity: 0.85;
  }

  88% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    width: 240px;
  }
}

/* victim distress: pulse ring + shake */

@keyframes victim-shake {

  0%, 70% {
    transform: translate(0);
    filter: brightness(1);
  }

  76% {
    transform: translate(2px, -2px);
    filter: brightness(1.35);
  }

  80% {
    transform: translate(-2px, 2px);
  }

  84% {
    transform: translate(2px, 2px);
  }

  88% {
    transform: translate(-1px, -1px);
  }

  100% {
    transform: translate(0);
    filter: brightness(1);
  }
}

@keyframes victim-ring {

  0%, 40% {
    opacity: 0;
    transform: scale(0.95);
    border-color: var(--theme-learning-error-176);
  }

  55% {
    opacity: 0.85;
    transform: scale(1.05);
    border-color: var(--theme-learning-error-177);
  }

  78% {
    opacity: 0.15;
    transform: scale(1.55);
    border-color: var(--theme-learning-error-178);
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
    border-color: var(--theme-learning-error-176);
  }
}

/* ========= Tunneling (file -> encoded label -> outbound query) ========= */

.exfil-file {
  position: absolute;
  left: 14%;
  top: 30%;
  color: var(--theme-learning-error-160);
  font-size: 1rem;
  opacity: 0;
  z-index: 12;
  animation: file-to-string 7s infinite;
  filter: drop-shadow(0 0 10px rgba(255,23,68,0.4));
}

@keyframes file-to-string {

  0% {
    opacity: 0;
    transform: translateY(6px) scale(1);
  }

  10% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  28% {
    opacity: 0;
    transform: translateY(-8px) scale(0.55);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.55);
  }
}

/* packet path from host -> firewall -> attacker */

@keyframes tunnel-packet {

  0%, 30% {
    left: 16%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.95);
  }

  36% {
    opacity: 1;
  }

  52% {
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }

  70% {
    left: 84%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.05);
  }

  86% {
    opacity: 0;
  }

  100% {
    left: 84%;
    top: 50%;
    opacity: 0;
  }
}

/* firewall inspection shimmer */

.fw-scan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, var(--theme-learning-success-bg-27), transparent 55%);
  opacity: 0;
  z-index: 7;
  pointer-events: none;
  animation: fw-scan 7s infinite;
}

@keyframes fw-scan {

  0%, 32% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.9);
  }

  44% {
    opacity: 0.85;
    transform: translate(-50%,-50%) scale(1.05);
  }

  58% {
    opacity: 0.25;
    transform: translate(-50%,-50%) scale(1.3);
  }

  100% {
    opacity: 0;
  }
}

.payload-label {
  position: absolute;
  left: 16%;
  top: 66%;
  font-size: 14px;
  font-family: var(--font-code);
  letter-spacing: 1px;
  color: var(--theme-learning-error-168);
  opacity: 0;
  z-index: 13;
  background: var(--theme-component-page-54);
  border: 1px solid var(--theme-learning-error-167);
  padding: 4px 7px;
  border-radius: 3px;
  animation: label-move 7s infinite;
  white-space: nowrap;
}

@keyframes label-move {

  0%, 26% {
    opacity: 0;
    left: 16%;
    transform: translateY(6px);
  }

  36% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    left: 80%;
    opacity: 1;
    transform: translateY(0);
  }

  82%, 100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* positioning helpers for each scene (keeps your existing HTML mostly intact) */

/* Poisoning nodes */

#anim-poisoning .node-attacker {
  left: 50%;
  top: 14%;
  transform: translate(-50%, 0);
}

#anim-poisoning .node-user {
  left: 14%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#anim-poisoning .node-resolver {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#anim-poisoning .node-good {
  left: 86%;
  top: 28%;
  transform: translate(-50%,-50%);
}

#anim-poisoning .node-bad {
  left: 86%;
  top: 74%;
  transform: translate(-50%,-50%);
}

/* Amplification nodes */

#anim-amplification .node-attacker {
  left: 18%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#anim-amplification .node-openres {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#anim-amplification .node-victim {
  left: 82%;
  top: 50%;
  transform: translate(-50%,-50%);
}

/* Tunneling nodes */

#anim-tunneling .node-host {
  left: 18%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#anim-tunneling .node-firewall {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#anim-tunneling .node-attacker {
  left: 82%;
  top: 50%;
  transform: translate(-50%,-50%);
}

/* --- MODERN CORE LEARNING CHROME --- */

body.dns-modernized {
  cursor: none;
}

body.dns-modernized .mission-header {
  min-height: 520px;
  height: 54vh;
  border-bottom: 1px solid var(--theme-learning-success-26);
  background: radial-gradient(circle at 50% 35%, var(--theme-learning-success-bg-35), transparent 34%),
                linear-gradient(180deg, var(--theme-learning-page-28) 0%, var(--theme-learning-page-4) 100%);
}

body.dns-modernized .mission-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--theme-learning-success-bg-38) 1px, transparent 1px),
                linear-gradient(90deg, var(--theme-learning-success-bg-38) 1px, transparent 1px);
  background-size: 86px 86px;
  opacity: 0.16;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
  pointer-events: none;
  z-index: 1;
}

.learning-toolbar {
  position: sticky;
  top: 88px;
  z-index: 90;
  width: min(1120px, 100%);
  box-sizing: border-box;
  margin: 28px auto 46px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--theme-learning-page-30);
  border: 1px solid var(--theme-learning-success-31);
  border-radius: 8px;
  backdrop-filter: blur(14px);
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.section-progress {
  font-family: var(--font-code);
  color: var(--bb-text-muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  white-space: nowrap;
}

.section-progress strong {
  color: var(--bb-kelly);
  margin-left: 8px;
}

.operator-rail {
  position: fixed;
  right: 18px;
  top: 188px;
  width: 250px;
  box-sizing: border-box;
  max-height: calc(100vh - 220px);
  overflow: auto;
  z-index: 75;
  display: none;
  padding: 14px;
  background: var(--theme-learning-page-32);
  border: 1px solid var(--theme-learning-success-33);
  border-radius: 8px;
  backdrop-filter: blur(14px);
}

.operator-rail.visible {
  display: block;
}

.operator-rail h4 {
  margin: 0 0 12px;
  font-family: var(--font-tech);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--bb-kelly);
  text-transform: uppercase;
}

.operator-rail a {
  display: block;
  text-decoration: none;
  color: var(--theme-learning-ink-34);
  font-size: 14px;
  line-height: 1.25;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  margin-bottom: 5px;
}

.operator-rail a:hover,
        .operator-rail a.active {
  color: var(--theme-component-ink-5);
  background: var(--theme-learning-success-bg-35);
  border-color: var(--theme-learning-success-36);
}



body.dns-modernized .intel-content > p {
  
  
}

body.dns-modernized .panel {
  border: 1px solid var(--theme-learning-success-37);
  border-left: 4px solid var(--bb-kelly);
  background: linear-gradient(135deg, var(--theme-learning-success-bg-38), var(--theme-learning-info-bg-39));
  box-shadow: 0 18px 48px var(--theme-learning-shadow-color-40);
}

body.dns-modernized .intel-card {
  position: relative;
  cursor: default;
  min-height: 172px;
  overflow: hidden;
  border-color: var(--theme-learning-success-37);
  background: linear-gradient(180deg, var(--theme-learning-success-bg-41), var(--theme-learning-page-42));
}

body.dns-modernized .intel-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-learning-success-6);
  box-shadow: 0 18px 42px var(--theme-learning-success-43);
}

.mission-check-panel {
  border: 1px solid var(--theme-learning-success-33);
  background: var(--theme-learning-page-44);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px var(--theme-learning-shadow-color-45);
}

.mission-check-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px 24px;
  background: var(--theme-catalog-surface-25);
  border-bottom: 1px solid var(--theme-learning-success-47);
}

.mission-check-head span,
        .mission-question small {
  font-family: var(--font-code);
  color: var(--bb-cyan);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 15px;
}

.mission-score {
  font-family: var(--font-tech);
  color: var(--bb-kelly);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.mission-question {
  padding: 20px 24px;
  border-bottom: 1px solid var(--theme-learning-border-48);
}

.mission-question p {
  margin: 8px 0 14px;
  
}

.mission-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.mission-choice {
  padding: 12px 14px;
  border: 1px solid var(--theme-learning-border-49);
  border-radius: 6px;
  background: var(--theme-catalog-surface-90);
  color: var(--theme-component-ink-5);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.mission-choice:hover,
        .mission-choice.selected {
  border-color: var(--theme-learning-success-51);
  background: var(--theme-learning-success-bg-35);
}

.mission-choice.correct {
  border-color: var(--bb-kelly);
  color: var(--bb-kelly);
}

.mission-choice.incorrect {
  border-color: var(--bb-error);
  color: var(--theme-learning-error-52);
}

.mission-feedback {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 4px solid var(--bb-cyan);
  background: var(--theme-learning-info-bg-53);
  color: var(--bb-text-muted);
  line-height: 1.55;
}

.mission-question.answered .mission-feedback {
  display: block;
}

.resource-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.resource-card-grid a {
  justify-content: center;
}

@media (max-width: 1720px) {

  .operator-rail {
    display: none !important;
  }
}

@media (max-width: 900px) {

  .learning-toolbar {
    position: static;
    align-items: flex-start;
    flex-direction: column;
  }

  .section-progress {
    white-space: normal;
  }

  body.dns-modernized .mission-header {
    min-height: 420px;
  }

  .packet-raw-view {
    grid-template-columns: repeat(2, 1fr);
  }

  .cert-decoder-grid {
    grid-template-columns: 1fr;
  }

  .dossier-visual {
    height: 350px;
  }

  /* keep threat stages readable on smaller widths */

  .threat-anim-container {
    height: 220px;
  }

  .threat-node-box {
    width: 84px;
  }

  .threat-node-base {
    width: 64px;
    height: 64px;
  }
}

@media (hover: none), (pointer: coarse) {

  .cursor, .cursor-dot {
    display: none;
  }
}

/* Border geometry retained from the retired palette layer. */
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .intel-card{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .dossier-visual{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .record-types-table td{border-bottom-width:1px;border-bottom-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .packet-header-tab{border-bottom-width:1px;border-bottom-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .packet-byte{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .packet-info-panel{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .browser-bar{border-bottom-width:1px;border-bottom-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .url-input{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .threat-anim-container{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .threat-node-base{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .cache-slot{border-width:1px;border-style:dashed;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .packet-label{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .payload-label{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] body.dns-modernized .mission-header{border-bottom-width:1px;border-bottom-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .learning-toolbar{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .operator-rail{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] body.dns-modernized .panel{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .mission-check-panel{border-width:1px;border-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .mission-check-head{border-bottom-width:1px;border-bottom-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .mission-question{border-bottom-width:1px;border-bottom-style:solid;}
html.bb-page-401ce170a7[data-bb-theme="patriotic"] .mission-choice{border-width:1px;border-style:solid;}