/* ============================================================
   boot.css — global reset, CRT overlay, boot screen, legal link
   ============================================================ */

:root {
  --bg: #03060a;
  --term-bg: #050a0d;
  --green: #38ff9c;
  --green-dim: #1f8d59;
  --amber: #ffb347;
  --cyan: #4fd6ff;
  --magenta: #ff5fd2;
  --red: #ff4d5e;
  --txt: #c9ffe6;
  --muted: #5a7a6c;
  --fabula: #c77dff;   /* fiction / the dream */
  --factum: #ffd24a;   /* verified, sourced reality */
  --font-mono: 'JetBrains Mono', 'Share Tech Mono', ui-monospace, monospace;
  --glow: 0 0 6px rgba(56, 255, 156, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

body { position: relative; }

::selection { background: rgba(56, 255, 156, 0.3); color: #fff; }

/* ---------- screens / layer switching ---------- */
.screen {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 1;
}
.screen.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ---------- CRT overlay ---------- */
#crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  mix-blend-mode: normal;
}
.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  opacity: 0.6;
}
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%);
}
.flicker {
  position: absolute; inset: 0;
  background: rgba(56,255,156,0.012);
  animation: flicker 7s infinite steps(60);
}
@keyframes flicker {
  0%,95%,100% { opacity: 0; }
  96% { opacity: 0.5; }
  97% { opacity: 0.1; }
  98% { opacity: 0.7; }
}
body.no-crt #crt-overlay { display: none; }

/* ---------- boot screen ---------- */
#boot-screen {
  background: var(--bg);
  padding: 4vh 5vw;
  font-size: clamp(11px, 1.5vw, 15px);
  line-height: 1.5;
  color: var(--green);
  text-shadow: var(--glow);
  overflow: hidden;
  white-space: pre-wrap;
}
.boot-line { opacity: 0; animation: bootIn 0.05s forwards; }
.boot-ok { color: var(--green); }
.boot-warn { color: var(--amber); }
.boot-err { color: var(--red); }
.boot-dim { color: var(--muted); }
@keyframes bootIn { to { opacity: 1; } }

/* ---------- legal link (always present, subtle, bottom-right) ---------- */
#legal-link {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 9500;
  background: transparent;
  border: none;
  color: rgba(120, 160, 145, 0.35);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.3s, text-shadow 0.3s;
  user-select: none;
}
#legal-link:hover {
  color: rgba(56, 255, 156, 0.9);
  text-shadow: var(--glow);
}

/* ---------- modal (legal) ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9600;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal-card {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #07120d, #040807);
  border: 1px solid var(--green-dim);
  box-shadow: 0 0 40px rgba(56,255,156,0.15), inset 0 0 60px rgba(0,0,0,0.6);
  padding: 28px 30px;
  color: var(--txt);
  font-size: 13px;
  line-height: 1.6;
}
.modal-card h2 {
  color: var(--green);
  font-size: 16px;
  margin-bottom: 14px;
  letter-spacing: 1px;
  text-shadow: var(--glow);
}
.modal-card h3 { color: var(--cyan); font-size: 13px; margin: 16px 0 6px; }
.modal-card p { margin-bottom: 10px; color: #a9d6c4; }
.modal-card a { color: var(--cyan); }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none;
  color: var(--muted); font-size: 18px; cursor: pointer;
}
.modal-close:hover { color: var(--red); }

/* custom scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: rgba(56,255,156,0.2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(56,255,156,0.4); }

@media (prefers-reduced-motion: reduce) {
  .flicker, .scanlines { animation: none; }
}

/* ---------- FABULA / FACTUM ink ---------- */
.ink-fabula {
  color: var(--fabula);
  text-shadow: 0 0 6px rgba(199, 125, 255, 0.45);
}
.ink-factum {
  color: var(--factum);
  text-shadow: 0 0 7px rgba(255, 210, 74, 0.4);
  font-weight: 600;
}
.ink-legend { font-size: 11px; letter-spacing: 0.5px; }

/* puzzle / factum lock styling (shared) */
.locked-chip { color: var(--factum); opacity: 0.55; }
.puzzle-box {
  border: 1px solid var(--factum);
  background: rgba(255, 210, 74, 0.05);
  padding: 12px 14px;
  margin: 8px 0;
}
.puzzle-box .pq { color: var(--factum); margin-bottom: 8px; }
.puzzle-box input {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--factum);
  color: var(--factum);
  font-family: var(--font-mono);
  padding: 6px 8px;
  width: 60%;
  outline: none;
}
.puzzle-box .hint { color: var(--muted); font-size: 11px; margin-top: 8px; }
.puzzle-box.solved { border-color: var(--green); background: rgba(56,255,156,0.05); }