/* ============================================================
   THE OORT PROTOCOL — ARCHIVE TERMINAL STYLESHEET
   CRT terminal aesthetic matching Godot game UI
   ============================================================ */

/* --- FONT FACES --- */
@font-face {
  font-family: 'CascadiaCode';
  src: url('../fonts/CascadiaCode-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ShareTechMono';
  src: url('../fonts/ShareTechMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- CSS VARIABLES --- */
:root {
  --green-bright: #00ff00;
  --green-dark: #008800;
  --green-dim: #005500;
  --green-bg: #001100;
  --green-bg-deep: #000500;
  --yellow: #ffff00;
  --cyan: #00ffff;
  --red: #ff3333;
  --white: #ccffcc;

  --font-mono: 'ShareTechMono', 'Consolas', 'Courier New', monospace;
  --font-logo: 'CascadiaCode', 'Consolas', 'Courier New', monospace;

  --glow-green: 0 0 8px rgba(0, 255, 0, 0.4);
  --glow-green-strong: 0 0 12px rgba(0, 255, 0, 0.6), 0 0 24px rgba(0, 255, 0, 0.2);
  --glow-cyan: 0 0 8px rgba(0, 255, 255, 0.4);
  --glow-yellow: 0 0 8px rgba(255, 255, 0, 0.4);

  --border-green: 2px solid var(--green-bright);
  --border-dim: 1px solid var(--green-dark);

  --content-max-width: 1100px;
  --page-padding: 40px;
}

/* --- RESET & BASE --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dark) var(--green-bg-deep);
}

body {
  font-family: var(--font-mono);
  background-color: var(--green-bg-deep);
  color: var(--green-bright);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

::selection {
  background: var(--green-bright);
  color: var(--green-bg-deep);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--green-bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--green-dark);
  border-radius: 0;
}

/* --- CRT EFFECTS OVERLAY --- */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Scanlines */
.crt-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  z-index: 1;
}

/* Vignette */
.crt-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 5, 0, 0.5) 85%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 2;
}

/* Green phosphor tint */
.crt-tint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 255, 0, 0.015);
  pointer-events: none;
  z-index: 9998;
}

/* Flicker animation */
@keyframes flicker {
  0%, 97% { opacity: 1; }
  98% { opacity: 0.95; }
  99% { opacity: 0.98; }
  100% { opacity: 1; }
}

body {
  animation: flicker 4s infinite;
}

/* --- LAYOUT --- */
.page-wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--page-padding);
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* --- NAVIGATION HEADER --- */
.nav-header {
  border-bottom: var(--border-green);
  padding-bottom: 12px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.nav-title .highlight {
  color: var(--green-bright);
}

.nav-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--green-dark);
  text-decoration: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 4px 8px;
  transition: color 0.15s, text-shadow 0.15s;
  letter-spacing: 1px;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--yellow);
  text-shadow: var(--glow-yellow);
}

.nav-links a::before {
  content: '>';
  margin-right: 4px;
  color: var(--green-dim);
}

.nav-links a:hover::before,
.nav-links a.active::before {
  color: var(--yellow);
}

.nav-separator {
  color: var(--green-dim);
  user-select: none;
}

/* --- PAGE HEADER --- */
.page-header {
  margin-bottom: 30px;
  text-align: center;
}

.page-header h1 {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: var(--glow-cyan);
  margin-bottom: 6px;
}

.page-header .classification {
  font-size: 0.75rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.page-header .divider {
  color: var(--green-dim);
  font-size: 0.75rem;
  margin-top: 10px;
  letter-spacing: 2px;
  user-select: none;
}

/* --- TERMINAL PANELS --- */
.terminal-panel {
  background: var(--green-bg);
  border: var(--border-green);
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.terminal-panel::before {
  content: attr(data-label);
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--green-bg-deep);
  padding: 0 8px;
  font-size: 0.7rem;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.terminal-panel h2 {
  font-size: 1.1rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
  text-shadow: var(--glow-cyan);
}

.terminal-panel h3 {
  font-size: 0.95rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  margin-top: 16px;
}

.terminal-panel p {
  color: var(--green-bright);
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.terminal-panel .dim {
  color: var(--green-dark);
}

.terminal-panel .redacted {
  color: var(--green-bg);
  background: var(--green-dark);
  padding: 0 4px;
  user-select: none;
  cursor: not-allowed;
}

/* --- DOSSIER CARDS (for factions, personnel, etc.) --- */
.dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.dossier-card {
  background: var(--green-bg);
  border: 1px solid var(--green-dark);
  padding: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: default;
}

.dossier-card:hover {
  border-color: var(--green-bright);
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.1);
}

.dossier-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: var(--border-dim);
}

.dossier-card .card-title {
  font-size: 1rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dossier-card .card-id {
  font-size: 0.7rem;
  color: var(--green-dim);
  text-transform: uppercase;
}

.dossier-card .card-body p {
  font-size: 0.85rem;
  color: var(--green-bright);
  margin-bottom: 8px;
}

.dossier-card .card-meta {
  font-size: 0.75rem;
  color: var(--green-dark);
  margin-top: 12px;
  padding-top: 8px;
  border-top: var(--border-dim);
}

.dossier-card .card-meta span {
  margin-right: 16px;
}

/* --- TIMELINE --- */
.timeline {
  position: relative;
  padding-left: 30px;
  margin-top: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--green-dark);
}

.timeline-entry {
  position: relative;
  margin-bottom: 24px;
  padding-left: 20px;
}

.timeline-entry::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--green-bright);
  box-shadow: var(--glow-green);
}

.timeline-entry.major::before {
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
  width: 10px;
  height: 10px;
  left: -27px;
  top: 5px;
}

.timeline-entry.catastrophe::before {
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 50, 50, 0.5);
  width: 12px;
  height: 12px;
  left: -28px;
  top: 4px;
}

.timeline-date {
  font-size: 0.85rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.timeline-title {
  font-size: 0.95rem;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 0.85rem;
  color: var(--green-bright);
}

/* --- DATA TABLE --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.85rem;
}

.data-table th {
  text-align: left;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
  padding: 8px 12px;
  border-bottom: var(--border-green);
}

.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 136, 0, 0.3);
  color: var(--green-bright);
}

.data-table tr:hover td {
  background: rgba(0, 255, 0, 0.03);
}

/* --- ARCHIVE HUB GRID --- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.archive-link {
  display: block;
  background: var(--green-bg);
  border: 1px solid var(--green-dark);
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.archive-link:hover {
  border-color: var(--yellow);
  box-shadow: 0 0 16px rgba(255, 255, 0, 0.08);
  transform: translateY(-2px);
}

.archive-link .link-prefix {
  font-size: 0.7rem;
  color: var(--green-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.archive-link .link-title {
  font-size: 1.1rem;
  color: var(--green-bright);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.archive-link:hover .link-title {
  color: var(--yellow);
  text-shadow: var(--glow-yellow);
}

.archive-link .link-desc {
  font-size: 0.8rem;
  color: var(--green-dark);
  line-height: 1.5;
}

.archive-link .link-status {
  font-size: 0.7rem;
  color: var(--green-dim);
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- ASCII LOGO (landing page) --- */
.ascii-logo {
  font-family: var(--font-logo);
  font-size: 15px;
  line-height: 1.2;
  color: var(--green-bright);
  text-shadow: var(--glow-green);
  white-space: pre;
  text-align: center;
  margin: 0 auto;
  overflow-x: auto;
  padding: 20px 0;
}

/* --- LANDING PAGE --- */
.landing-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  text-align: center;
}

.landing-subtitle {
  font-size: 0.9rem;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 6px;
  margin-bottom: 40px;
}

.landing-prompt {
  margin-top: 40px;
}

.enter-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--green-bright);
  background: none;
  border: var(--border-green);
  padding: 12px 32px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, text-shadow 0.15s, box-shadow 0.15s;
}

.enter-btn:hover {
  color: var(--yellow);
  border-color: var(--yellow);
  text-shadow: var(--glow-yellow);
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.1);
}

.enter-btn::before {
  content: '> ';
}

/* Blinking cursor */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s infinite;
  color: var(--green-bright);
}

/* --- BOOT SEQUENCE --- */
.boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--green-bg-deep);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}

.boot-text {
  color: var(--green-bright);
  font-size: 0.85rem;
  max-width: 600px;
  padding: 40px;
}

.boot-line {
  opacity: 0;
  margin-bottom: 4px;
}

.boot-line.visible {
  opacity: 1;
}

.boot-line.ok {
  color: var(--green-bright);
}

.boot-line.warn {
  color: var(--yellow);
}

.boot-line.error {
  color: var(--red);
}

/* --- STATUS BAR (FOOTER) --- */
.status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--green-bg-deep);
  border-top: 1px solid var(--green-dim);
  padding: 6px 20px;
  font-size: 0.7rem;
  color: var(--green-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.status-bar .status-left,
.status-bar .status-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.status-bar .separator {
  color: var(--green-dim);
}

.status-bar .ready {
  color: var(--green-bright);
  animation: blink 1s infinite;
}

/* --- AUTH PROMPT (landing page) --- */
.auth-prompt {
  margin-top: 10px;
  text-align: center;
}

.auth-label {
  font-size: 0.8rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-shadow: var(--glow-yellow);
}

.auth-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.auth-prefix {
  color: var(--green-bright);
  font-size: 1rem;
}

.auth-input {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--green-bright);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--green-dark);
  padding: 8px 4px;
  width: 280px;
  text-transform: uppercase;
  letter-spacing: 2px;
  outline: none;
  caret-color: var(--green-bright);
}

.auth-input:focus {
  border-bottom-color: var(--green-bright);
  box-shadow: 0 1px 0 var(--green-bright);
}

.auth-input::placeholder {
  color: var(--green-dim);
  letter-spacing: 1px;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.auth-error {
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 12px;
  min-height: 1.2em;
  letter-spacing: 1px;
}

.auth-success {
  margin-top: 10px;
  text-align: center;
}

.auth-granted {
  font-size: 0.9rem;
  color: var(--green-bright);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 24px;
  text-shadow: var(--glow-green);
}

/* --- CLASSIFIED SECTIONS --- */
.classified-section {
  position: relative;
}

.classified-section.locked > *:not(.classified-lock) {
  filter: blur(4px);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.classified-lock {
  position: relative;
  z-index: 10;
  margin-bottom: 20px;
}

.lock-border {
  border: 2px solid var(--red);
  background: rgba(255, 50, 50, 0.03);
  padding: 24px;
  text-align: center;
}

.lock-header {
  font-size: 1rem;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(255, 50, 50, 0.4);
}

.lock-text {
  font-size: 0.8rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.lock-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.lock-prompt {
  color: var(--green-bright);
  font-size: 1rem;
}

.lock-password {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--green-bright);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--green-dark);
  padding: 6px 4px;
  width: 240px;
  text-transform: uppercase;
  letter-spacing: 2px;
  outline: none;
  caret-color: var(--green-bright);
}

.lock-password:focus {
  border-bottom-color: var(--red);
}

.lock-password::placeholder {
  color: var(--green-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.lock-error {
  color: var(--red);
  font-size: 0.75rem;
  margin-top: 10px;
  min-height: 1.2em;
  letter-spacing: 1px;
}

/* --- OPERATIONS TERMINAL BUTTON --- */
.ops-terminal-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--yellow);
  background: none;
  border: 1px solid var(--yellow);
  padding: 10px 24px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, text-shadow 0.15s, box-shadow 0.15s, background 0.15s;
}

.ops-terminal-btn:hover {
  color: var(--green-bg-deep);
  background: var(--yellow);
  text-shadow: none;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.2);
}

.ops-terminal-btn::before {
  content: '[ ';
}

.ops-terminal-btn::after {
  content: ' ]';
}

/* --- FACTION-CONDITIONAL CONTENT --- */
/* Hidden by default — JS adds .faction-imperial or .faction-alliance to <body> */
.imperial-only,
.alliance-only {
  display: none;
}

body.faction-imperial .imperial-only {
  display: block;
}

body.faction-alliance .alliance-only {
  display: block;
}

/* Inline variants for spans within paragraphs */
span.imperial-only,
span.alliance-only,
td.imperial-only,
td.alliance-only {
  display: none;
}

body.faction-imperial span.imperial-only,
body.faction-imperial td.imperial-only {
  display: inline;
}

body.faction-alliance span.alliance-only,
body.faction-alliance td.alliance-only {
  display: inline;
}

/* Table row variants */
tr.imperial-only,
tr.alliance-only {
  display: none;
}

body.faction-imperial tr.imperial-only {
  display: table-row;
}

body.faction-alliance tr.alliance-only {
  display: table-row;
}

/* --- UTILITY CLASSES --- */
.text-cyan { color: var(--cyan); }
.text-yellow { color: var(--yellow); }
.text-green { color: var(--green-bright); }
.text-dim { color: var(--green-dark); }
.text-red { color: var(--red); }

.uppercase { text-transform: uppercase; }
.center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-20 { margin-bottom: 20px; }

.section-divider {
  border: none;
  border-top: 1px solid var(--green-dim);
  margin: 30px 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  :root {
    --page-padding: 20px;
  }

  .ascii-logo {
    font-size: 5px;
  }

  .nav-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-wrap: wrap;
  }

  .dossier-grid,
  .archive-grid {
    grid-template-columns: 1fr;
  }

  .page-header h1 {
    font-size: 1.2rem;
    letter-spacing: 2px;
  }

  .status-bar {
    font-size: 0.6rem;
    padding: 4px 10px;
  }
}

@media (max-width: 480px) {
  .ascii-logo {
    font-size: 3.5px;
  }

  .landing-subtitle {
    letter-spacing: 3px;
    font-size: 0.75rem;
  }
}