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

:root {
  --bg:       #060a06;
  --bright:   #ffb000;
  --normal:   #ffb000;
  --dim:      #ffb000;
  --verydim:  #ffb000;
  --ink:      #060a06;
  --accent:   #ff3333;
  --ff: 'Courier Prime', 'Courier New', monospace;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--normal);
  font-family: var(--ff);
  text-shadow: 0 0 6px rgba(255,176,0,0.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app, main { min-height: 100vh; position: relative; }

/* ── CRT OVERLAY ── */
.crt-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 3px,
    rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px
  );
}
.crt-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 199;
  background: radial-gradient(ellipse at center, rgba(255,176,0,0.03) 0%, rgba(0,0,0,0.25) 100%);
  animation: crt-breathe 9s ease-in-out infinite;
}
@keyframes crt-breathe {
  0%,100% { opacity: 0.9; } 50% { opacity: 1; }
}
.crt-flicker {
  position: fixed; inset: 0; pointer-events: none; z-index: 198;
  animation: flicker 0.15s infinite;
}
@keyframes flicker {
  0%,91%,93%,96%,100% { opacity: 1; }
  92%,94%,97%,99% { opacity: 0.985; }
}

/* ── CHROME ── */
.chrome-tl {
  position: fixed; top: 16px; left: 18px;
  font-size: 11px; letter-spacing: 0.14em; color: var(--bright);
  z-index: 300;
}
.chrome-tr {
  position: fixed; top: 16px; right: 18px;
  font-size: 11px; letter-spacing: 0.1em; color: var(--bright);
  z-index: 300; display: flex; align-items: center; gap: 10px;
}
.rec-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255,51,51,0.7);
  animation: rec-blink 4.3s ease-in-out infinite;
}
@keyframes rec-blink {
  0%,84%,100% { opacity: 0; } 88%,96% { opacity: 1; }
}
.chrome-br {
  position: fixed; bottom: 14px; right: 18px;
  font-size: 11px; letter-spacing: 0.1em; color: var(--bright);
  z-index: 300;
}
.progress-bar {
  position: fixed; top: 0; left: 0; height: 1px;
  background: var(--dim); z-index: 400; transition: width 0.6s ease;
  width: 0;
}

/* ── PAGE WRAP ── */
main {
  display: flex; align-items: center;
  justify-content: center; padding: 80px 24px 64px;
}
.content { width: 100%; max-width: 560px; position: relative; }
.content.top { align-self: flex-start; }

main.top { align-items: flex-start; }

/* ── TRANSITIONS ── */
.screen-in { animation: s-in 0.5s ease-out both; }
@keyframes s-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── SCANLINE TRANSITION ── */
.scanline-wipe {
  position: fixed; left: 0; right: 0; height: 4px;
  background: linear-gradient(to right, transparent, var(--bright) 20%, #ffffff 50%, var(--bright) 80%, transparent);
  box-shadow: 0 0 16px rgba(255,176,0,0.9), 0 0 40px rgba(255,176,0,0.4);
  z-index: 500; top: -4px; pointer-events: none; opacity: 0;
}
.scanline-wipe.run { animation: scan-sweep 0.75s ease-in-out both; }
@keyframes scan-sweep { from { top: -4px; opacity: 1; } to { top: 100vh; opacity: 1; } }

.scan-static {
  position: fixed; inset: 0; z-index: 499; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 150px;
  mix-blend-mode: screen;
}
.scan-static.run { animation: static-burst 0.75s ease-in-out both; }
@keyframes static-burst {
  0%,100% { opacity: 0; } 25%,70% { opacity: 0.35; }
}

/* ── COMMON ── */
.t-cursor {
  display: inline-block; width: 8px; height: 14px;
  background: var(--normal); vertical-align: middle;
  box-shadow: 0 0 8px rgba(255,176,0,0.7);
  animation: cur-blink 1.1s step-end infinite;
}
@keyframes cur-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── BOOT ── */
.boot-line {
  font-size: 12px; line-height: 1.85; letter-spacing: 0.04em;
  opacity: 0; white-space: pre; transition: opacity 0.25s ease;
}
.boot-line.dim,
.boot-line.normal,
.boot-line.bright {
  color: var(--bright);
  text-shadow: 0 0 10px rgba(255,176,0,0.7), 0 0 24px rgba(255,176,0,0.2);
}
.boot-line.show { opacity: 1; }

.boot-title {
  font-size: clamp(22px, 5vw, 36px); font-weight: 700; letter-spacing: 0.14em;
  color: var(--bright); line-height: 1.15;
  text-shadow: 0 0 20px rgba(255,176,0,0.7), 0 0 50px rgba(255,176,0,0.2);
  margin: 28px 0 6px;
  opacity: 0; transition: opacity 0.7s ease;
}

.title-redact {
  display: inline-block;
  background: var(--bright);
  color: var(--ink);
  padding: 0.1em 0.4em 0;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-left: 0.2em;
  line-height: 0.75;
  vertical-align: -0.18em;
  box-shadow: 0 0 10px rgba(255,176,0,0.6);
  border-radius: 1px;
  text-shadow: none;
}

.redact-cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.6em;
  background: var(--ink);
  vertical-align: 0;
  margin-left: 1px;
  animation: cur-blink 1.1s step-end infinite;
}
.boot-title.show { opacity: 1; }

.boot-sub {
  font-size: 12px; letter-spacing: 0.22em; color: var(--dim);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,176,0,0.2);
  margin-bottom: 32px; opacity: 0;
  transition: opacity 0.7s ease;
}
.boot-sub.show { opacity: 1; }

.boot-begin-wrap { opacity: 0; transition: opacity 0.6s ease; }
.boot-begin-wrap.show { opacity: 1; }

.boot-begin {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--ff);
  color: var(--ink); background: var(--normal); border: none; cursor: pointer;
  padding: 10px 22px;
  box-shadow: 0 0 16px rgba(255,176,0,0.45), 0 0 40px rgba(255,176,0,0.12);
  transition: background 0.2s, box-shadow 0.2s;
}
.boot-begin:hover {
  background: var(--bright);
  box-shadow: 0 0 24px rgba(255,176,0,0.7), 0 0 60px rgba(255,176,0,0.2);
}
.boot-begin:disabled {
  opacity: 0.5; cursor: not-allowed;
  box-shadow: none;
}
.boot-hint {
  font-size: 11px; letter-spacing: 0.1em; color: var(--bright);
  text-transform: uppercase; margin-top: 12px;
}

.boot-warning {
  font-size: 11px; letter-spacing: 0.06em; color: #ff6655;
  margin: 24px 0; padding: 12px 16px;
  border: 1px solid #ff6655;
  text-shadow: 0 0 10px rgba(255,80,68,0.7), 0 0 24px rgba(255,80,68,0.3);
  box-shadow: 0 0 12px rgba(255,80,68,0.25);
}

.boot-screen.exiting { animation: boot-exit 0.7s ease-in both; }
@keyframes boot-exit { to { opacity: 0; } }

/* ── QUESTION ── */
.q-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.q-num {
  font-size: 12px; letter-spacing: 0.2em; color: var(--bright);
  flex-shrink: 0;
}
.q-hr { flex: 1; height: 1px; background: var(--bright); opacity: 0.4; }
.q-of { font-size: 11px; letter-spacing: 0.1em; color: var(--bright); }

.q-text {
  font-size: clamp(15px, 3vw, 20px); line-height: 1.6;
  color: var(--bright);
  text-shadow: 0 0 10px rgba(255,176,0,0.4);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.rword { display: inline; }
.rbar {
  display: inline-block;
  background: var(--normal);
  height: 1em; border-radius: 1px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(255,176,0,0.3);
  transition: width 0.25s ease, opacity 0.2s ease;
}
.rtext {
  display: inline;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--bright);
  text-shadow: 0 0 10px rgba(255,176,0,0.4);
}
.rword.revealed .rbar { width: 0 !important; opacity: 0; }
.rword.revealed .rtext { opacity: 1; }

.q-input-wrap { margin-bottom: 28px; }
.q-prompt-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 4px;
}
.q-gt { color: var(--bright); font-size: 14px; flex-shrink: 0; padding-top: 2px; }
.q-textarea {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--ff); font-size: 14px; color: var(--normal);
  text-shadow: 0 0 6px rgba(255,176,0,0.3);
  resize: none; caret-color: var(--bright);
  line-height: 1.7; min-height: 80px; width: 100%;
}
.q-textarea::placeholder { color: var(--bright); opacity: 0.5; }
.q-underline { height: 1px; background: var(--bright); margin-top: 8px; opacity: 0.4; }

.q-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.q-count { font-size: 11px; letter-spacing: 0.08em; color: var(--bright); }
.q-count.warn { color: #ff6655; opacity: 1; text-shadow: 0 0 10px rgba(255,80,68,0.7); }

.q-continue {
  font-family: var(--ff);
  font-size: 11px; letter-spacing: 0.12em; text-transform: lowercase;
  color: var(--normal); background: none; border: none; cursor: pointer;
  padding: 0; transition: color 0.2s, letter-spacing 0.2s;
  text-shadow: 0 0 6px rgba(255,176,0,0.4);
}
.q-continue:hover { color: var(--bright); letter-spacing: 0.2em; text-shadow: 0 0 10px rgba(255,176,0,0.7); }
.q-continue:disabled { opacity: 0.3; cursor: default; text-shadow: none; }
.q-continue:disabled:hover { letter-spacing: 0.12em; }

/* ── READING ── */
.reading-center { text-align: center; }
.reading-main {
  font-size: 16px; color: var(--bright); letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(255,176,0,0.5); margin-bottom: 20px;
}
.reading-dots span {
  animation: dot-p 1.8s ease-in-out infinite; opacity: 0;
}
.reading-dots span:nth-child(1){animation-delay:0s}
.reading-dots span:nth-child(2){animation-delay:0.35s}
.reading-dots span:nth-child(3){animation-delay:0.7s}
@keyframes dot-p { 0%,60%,100%{opacity:0} 30%{opacity:1} }

.reading-sub {
  font-size: 11px; letter-spacing: 0.2em; color: var(--bright);
  text-transform: uppercase; animation: sub-pulse 3s ease-in-out infinite;
}
@keyframes sub-pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* ── GUESSES ── */
.guesses-hdr {
  font-size: 11px; letter-spacing: 0.2em; color: var(--bright);
  text-transform: uppercase; margin-bottom: 8px;
}
.t-rule { width: 100%; height: 1px; background: var(--bright); opacity: 0.4; margin-bottom: 24px; }
.guess-item {
  padding: 22px 0; border-bottom: 1px solid var(--bright);
  animation: g-in 0.5s ease-out both;
}
.guess-item:first-of-type { border-top: 1px solid var(--bright); }
@keyframes g-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.guess-text {
  font-size: 16px; line-height: 1.55; color: var(--bright);
  text-shadow: 0 0 10px rgba(255,176,0,0.5); margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.guess-obs {
  font-size: 13px; font-style: italic; color: var(--bright);
  line-height: 1.6; letter-spacing: 0.02em;
}

/* ── GATE ── */
.gate-pre {
  font-size: 11px; letter-spacing: 0.2em; color: var(--bright);
  text-transform: uppercase; margin-bottom: 32px;
}
.gate-box {
  border: 1px solid var(--bright); padding: 24px 20px; margin-bottom: 36px;
  position: relative;
}
.gate-box-label {
  position: absolute; top: -9px; left: 12px;
  background: var(--bg); padding: 0 6px;
  font-size: 11px; letter-spacing: 0.14em; color: var(--bright);
  text-transform: uppercase;
}
.gate-main {
  font-size: clamp(15px, 2.5vw, 18px); line-height: 1.6;
  color: var(--bright); text-shadow: 0 0 8px rgba(255,176,0,0.4);
  margin-bottom: 12px; letter-spacing: 0.02em;
}
.gate-sub {
  font-size: 13px; color: var(--bright); line-height: 1.65;
  letter-spacing: 0.02em;
}
.gate-choices { display: flex; flex-direction: column; gap: 14px; }
.gate-choice-label {
  font-size: 11px; letter-spacing: 0.16em; color: var(--bright);
  text-transform: uppercase; margin-bottom: 10px;
}
.gate-open {
  font-family: var(--ff);
  font-size: 16px; font-style: italic; color: var(--bright);
  background: none; border: none; cursor: pointer; padding: 0;
  text-shadow: 0 0 10px rgba(255,176,0,0.5);
  letter-spacing: 0.04em; transition: text-shadow 0.2s;
  text-align: left;
}
.gate-open:hover { text-shadow: 0 0 18px rgba(255,176,0,0.9); }
.gate-open::before { content: '[Y] '; color: var(--bright); font-style: normal; font-size: 12px; }

.gate-skip {
  font-family: var(--ff);
  font-size: 13px; color: var(--bright); background: none; border: none;
  cursor: pointer; padding: 0; letter-spacing: 0.1em;
  text-transform: lowercase; transition: text-shadow 0.2s;
  text-align: left;
}
.gate-skip:hover { text-shadow: 0 0 10px rgba(255,176,0,0.6); }
.gate-skip::before { content: '[N] '; }

/* ── ADMISSION ── */
.adm-pre {
  font-size: 11px; letter-spacing: 0.2em; color: var(--bright);
  text-transform: uppercase; margin-bottom: 48px;
}
.adm-sentence {
  font-size: clamp(20px, 4vw, 30px); font-style: italic;
  color: var(--bright); line-height: 1.45; letter-spacing: 0.02em;
  text-shadow: 0 0 16px rgba(255,176,0,0.5), 0 0 40px rgba(255,176,0,0.12);
  margin-bottom: 52px;
  animation: adm-in 1.2s 0.3s ease-out both;
}
@keyframes adm-in {
  from { opacity:0; transform:translateY(14px); filter:blur(4px); }
  to   { opacity:1; transform:translateY(0); filter:blur(0); }
}
.adm-log {
  font-size: 12px; letter-spacing: 0.12em; line-height: 2;
  color: var(--bright); animation: adm-in 0.5s 1.6s ease-out both;
}
.adm-log span { color: var(--bright); font-weight: 700; }
.adm-continue {
  margin-top: 36px; animation: adm-in 0.5s 2.2s ease-out both;
}

.pivot-list {
  list-style: none; padding: 0; margin: 0;
  font-size: 13px; line-height: 2; color: var(--bright);
}
.pivot-list li { padding-left: 16px; position: relative; }
.pivot-list li::before { content: "▸"; position: absolute; left: 0; color: var(--bright); }
.pivot-list strong { color: var(--bright); font-weight: 700; }

/* ── LEGACY (still-old screens until we port them) ── */
h1, h2, p { color: var(--normal); font-family: var(--ff); }
h1 { font-size: 28px; letter-spacing: 0.08em; margin-bottom: 16px; }
h2 { font-size: 14px; letter-spacing: 0.1em; margin-bottom: 24px; text-transform: uppercase; }
p { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
ul { margin-bottom: 16px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.subtitle { font-size: 12px; margin-bottom: 24px; }
.warning { color: #ff6655; border: 1px solid #ff6655; padding: 12px; margin: 16px 0; font-size: 12px; text-shadow: 0 0 10px rgba(255,80,68,0.6); box-shadow: 0 0 12px rgba(255,80,68,0.2); }
.primary { font-family: var(--ff); padding: 10px 22px; background: var(--normal); color: var(--ink); border: none; cursor: pointer; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 0 16px rgba(255,176,0,0.45); }
.primary:disabled { opacity: 0.4; cursor: wait; box-shadow: none; }
.ghost { font-family: var(--ff); background: none; border: none; color: var(--bright); font-size: 12px; cursor: pointer; padding: 8px 0; letter-spacing: 0.1em; text-transform: lowercase; }
.loading { color: var(--normal); text-align: center; padding: 40px 0; font-size: 14px; letter-spacing: 0.04em; }
.error { background: rgba(255,80,68,0.1); border: 1px solid #ff6655; padding: 16px; margin: 24px 0; font-size: 13px; color: #ff6655; text-shadow: 0 0 10px rgba(255,80,68,0.6); box-shadow: 0 0 12px rgba(255,80,68,0.2); }
.prediction { padding: 16px 0; border-bottom: 1px solid var(--verydim); }
.prediction-guess { font-size: 15px; color: var(--bright); margin-bottom: 8px; line-height: 1.55; }
.prediction-obs { font-size: 12px; font-style: italic; line-height: 1.6; color: var(--bright); }
.admission { font-size: clamp(20px, 4vw, 30px); font-style: italic; color: var(--bright); line-height: 1.45; letter-spacing: 0.02em; text-shadow: 0 0 16px rgba(255,176,0,0.5), 0 0 40px rgba(255,176,0,0.12); margin: 40px 0; }
.admission::before, .admission::after { content: ""; }
.admission-gate { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--verydim); }
.footer-note { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--bright); font-size: 11px; letter-spacing: 0.04em; color: var(--bright); }
.footer-note a { color: var(--bright); }
.q-counter { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bright); margin-bottom: 20px; }
.prompt { font-size: 18px; line-height: 1.5; color: var(--bright); margin-bottom: 24px; text-shadow: 0 0 10px rgba(255,176,0,0.3); }
.freetext-wrap { margin-top: 8px; }
.freetext { width: 100%; padding: 12px 16px; font-family: var(--ff); font-size: 14px; line-height: 1.6; background: transparent; color: var(--normal); border: 1px solid var(--verydim); border-radius: 0; }
.freetext-area { min-height: 100px; resize: none; }
.freetext:focus { outline: none; border-color: var(--bright); }
.freetext-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.freetext-count { font-size: 12px; letter-spacing: 0.05em; color: var(--bright); }
.freetext-examples-label { margin-top: 28px; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bright); }
.freetext-examples { list-style: none; padding: 0; margin: 0; }
.freetext-examples li { font-size: 12px; line-height: 1.5; padding-left: 12px; position: relative; margin-bottom: 4px; font-style: italic; color: var(--bright); }
.freetext-examples li::before { content: "—"; position: absolute; left: 0; }

.secret-link {
  position: fixed; bottom: 14px; left: 18px;
  font-size: 11px; letter-spacing: 0.14em; color: var(--bright);
  text-decoration: none; text-transform: uppercase;
  z-index: 300; transition: text-shadow 0.2s;
}
.secret-link:hover { text-shadow: 0 0 10px rgba(255,176,0,0.7); }

a { color: var(--normal); }

/* ── FEED / DOSSIER ── */
.feed-hdr {
  font-size: 11px; letter-spacing: 0.16em; color: var(--bright);
  text-transform: uppercase; padding-bottom: 16px;
  border-bottom: 1px solid var(--bright); margin-bottom: 0;
}
.feed-hdr span { font-weight: 700; text-shadow: 0 0 10px rgba(255,176,0,0.5); }
.feed-item {
  padding: 20px 0; border-bottom: 1px solid var(--bright);
  animation: g-in 0.4s ease-out both;
}
.feed-text {
  font-size: 14px; font-style: italic; color: var(--bright);
  line-height: 1.65; letter-spacing: 0.02em; margin-bottom: 8px;
  text-shadow: 0 0 6px rgba(255,176,0,0.35);
}
.feed-meta { display: flex; align-items: center; gap: 12px; }
.feed-time { font-size: 11px; color: var(--bright); letter-spacing: 0.08em; flex-shrink: 0; }
.report-btn {
  font-family: var(--ff);
  background: none; border: none; color: var(--bright); cursor: pointer;
  font-size: 11px; letter-spacing: 0.12em; padding: 0;
  margin-left: auto; transition: text-shadow 0.2s;
}
.report-btn:hover { text-shadow: 0 0 10px rgba(255,176,0,0.6); }
.feed-end {
  text-align: center; padding: 36px 0 20px;
  font-size: 11px; letter-spacing: 0.18em; color: var(--bright);
  text-transform: uppercase;
}

button:focus-visible { outline: 1px solid var(--normal); outline-offset: 4px; }