/* ============================================================
   BLADE RUNNER TERMINAL — NOSTROMO/Alien 1979 green phosphor
   Heavy phosphor bloom, cool green, CRT authenticity
   ============================================================ */

/* ---- Palette custom properties ---- */
body[data-view="bladerunner"] {
  /* MU-TH-UR amber phosphor — matches the Nostromo bootloader palette */
  --br-grn:     #ffc567;
  --br-grn-hi:  #ffd790;
  --br-grn-dim: rgba(255, 176, 64, 0.35);
  --br-grn-lo:  rgba(255, 176, 64, 0.15);
  --br-green:   #c9f58c;
  --br-red:     #ff4040;
  --br-white:   #f6e0b6;
  --br-dim:     #7a5a2a;

  /* Background — cold dark green-black */
  --br-bg:       #020402;
  --br-bg-light: #14100a;

  /* Phosphor bloom — massive, multi-layer, the signature CRT look */
  --br-glow-1: 2px;     /* tight core */
  --br-glow-2: 5px;     /* inner bloom */
  --br-glow-3: 12px;    /* mid bloom */
  --br-glow-4: 24px;    /* outer bloom */
  --br-glow-5: 40px;    /* far bloom (ambient) */
}

/* ============================================================
   MAIN DISPLAY
   ============================================================ */

body[data-view="bladerunner"] .videotex-display {
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: clamp(13px, 1.8vw, 17px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--br-grn);

  /* Cold dark background — NOSTROMO green phosphor theme */
  background: radial-gradient(
    ellipse 120% 120% at 50% 50%,
    #14100a 0%,
    #080604 60%,
    #030201 100%
  );

  /* Crisp monospace rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

/* ============================================================
   PHOSPHOR BLOOM — the signature CRT effect
   Text radiates light outward in multiple layers
   ============================================================ */

body[data-view="bladerunner"] .videotex-display,
body[data-view="bladerunner"] .videotex-display * {
  text-shadow:
    /* Core: sharp bright center */
    0 0 var(--br-glow-1) currentColor,
    0 0 1px currentColor,
    /* Inner bloom: strong color bleed */
    0 0 var(--br-glow-2) currentColor,
    /* Mid bloom: softer, wider */
    0 0 var(--br-glow-3) rgba(255, 176, 64, 0.4),
    /* Outer bloom: diffuse green haze */
    0 0 var(--br-glow-4) rgba(255, 176, 64, 0.15),
    /* Far bloom: ambient light on screen surface */
    0 0 var(--br-glow-5) rgba(255, 176, 64, 0.06);
}

/* ============================================================
   STATUS BAR
   ============================================================ */

body[data-view="bladerunner"] .vtx-status-bar {
  color: var(--br-grn);
  border-bottom: 1px solid rgba(255, 176, 64, 0.25);
  font-size: 0.85em;
  letter-spacing: 0.06em;
}

body[data-view="bladerunner"] .vtx-status-bar .service-name {
  color: var(--br-grn-hi);
}

body[data-view="bladerunner"] .vtx-status-bar .page-indicator {
  color: var(--br-grn);
}

body[data-view="bladerunner"] .vtx-status-bar .connection {
  color: var(--br-green);
}

body[data-view="bladerunner"] .vtx-status-bar .connection::before {
  content: '\25CF ';
  color: var(--br-green);
}

/* ============================================================
   COLOR OVERRIDES — map Minitel palette to green terminal
   Everything is green tones like a real monochrome CRT
   ============================================================ */

body[data-view="bladerunner"] .fg-cyan    { color: var(--br-grn); }
body[data-view="bladerunner"] .fg-white   { color: var(--br-white); }
body[data-view="bladerunner"] .fg-yellow  { color: var(--br-grn-hi); }
body[data-view="bladerunner"] .fg-green   { color: var(--br-green); }
body[data-view="bladerunner"] .fg-red     { color: var(--br-red); }
body[data-view="bladerunner"] .fg-magenta { color: var(--br-grn-dim); }
body[data-view="bladerunner"] .fg-blue    { color: var(--br-grn-dim); }

/* ============================================================
   TEXT EFFECTS
   ============================================================ */

body[data-view="bladerunner"] .double-height {
  font-size: 1.5em;
  letter-spacing: 0.06em;
}

body[data-view="bladerunner"] .vtx-dim {
  opacity: 0.35;
  color: var(--br-dim);
}

body[data-view="bladerunner"] .inverse {
  background: var(--br-grn);
  color: var(--br-bg);
  padding: 0 3px;
  text-shadow: none;
}

/* ============================================================
   LAYOUT — rules, spacers
   ============================================================ */

body[data-view="bladerunner"] .vtx-rule,
body[data-view="bladerunner"] .vtx-rule-bright {
  color: var(--br-grn);
  opacity: 0.2;
}

body[data-view="bladerunner"] .vtx-rule-bright {
  opacity: 0.35;
}

/* ============================================================
   MENU ITEMS
   ============================================================ */

body[data-view="bladerunner"] .vtx-menu-item {
  color: var(--br-grn);
  padding: 3px 6px;
  transition: background 0.06s ease, color 0.06s ease, text-shadow 0.06s ease;
}

body[data-view="bladerunner"] .vtx-menu-item:hover,
body[data-view="bladerunner"] .vtx-menu-item:focus {
  background: rgba(255, 176, 64, 0.1);
  color: var(--br-grn-hi);
  text-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor,
    0 0 14px rgba(255, 176, 64, 0.5),
    0 0 28px rgba(255, 176, 64, 0.2);
  outline: none;
}

body[data-view="bladerunner"] .vtx-menu-item:focus-visible {
  background: rgba(255, 176, 64, 0.1);
  color: var(--br-grn-hi);
  outline: 2px solid var(--br-grn);
  outline-offset: 1px;
}

/* ============================================================
   INFO BOXES
   ============================================================ */

body[data-view="bladerunner"] .vtx-box {
  background: rgba(255, 176, 64, 0.12);
  color: var(--br-grn-hi);
  border: 1px solid rgba(255, 176, 64, 0.3);
  padding: 1px 6px;
  border-radius: 0;
  text-shadow: none;
}

body[data-view="bladerunner"] .vtx-box-yellow {
  background: rgba(255, 176, 64, 0.18);
  color: var(--br-grn-hi);
  border-color: rgba(255, 176, 64, 0.4);
}

body[data-view="bladerunner"] .vtx-box-white {
  background: rgba(204, 255, 221, 0.1);
  color: var(--br-white);
  border-color: rgba(204, 255, 221, 0.25);
}

body[data-view="bladerunner"] .vtx-box-magenta {
  background: rgba(255, 176, 64, 0.1);
  color: var(--br-grn);
  border-color: rgba(255, 176, 64, 0.25);
}

/* ============================================================
   PROJECT & EXPERIENCE ENTRIES
   ============================================================ */

body[data-view="bladerunner"] .vtx-project {
  border-bottom: 1px solid rgba(255, 176, 64, 0.08);
}

body[data-view="bladerunner"] .vtx-project-title {
  color: var(--br-white);
}

body[data-view="bladerunner"] .vtx-project-desc {
  color: var(--br-grn);
}

body[data-view="bladerunner"] .vtx-project-tech {
  color: var(--br-grn-hi);
  font-size: 0.9em;
}

body[data-view="bladerunner"] .vtx-company {
  color: var(--br-white);
  font-size: 1.15em;
}

body[data-view="bladerunner"] .vtx-role {
  color: var(--br-grn-hi);
}

body[data-view="bladerunner"] .vtx-dates {
  color: var(--br-grn);
  opacity: 0.55;
}

/* ============================================================
   CONTACT
   ============================================================ */

body[data-view="bladerunner"] .vtx-contact-value {
  color: var(--br-grn);
  transition: background 0.06s ease, color 0.06s ease, text-shadow 0.06s ease;
}

body[data-view="bladerunner"] .vtx-contact-value:hover {
  background: rgba(255, 176, 64, 0.1);
  color: var(--br-grn-hi);
  text-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor,
    0 0 14px rgba(255, 176, 64, 0.5);
}

body[data-view="bladerunner"] .vtx-contact-value:focus-visible {
  background: rgba(255, 176, 64, 0.1);
  color: var(--br-grn-hi);
  outline: 2px solid var(--br-grn);
  outline-offset: 1px;
}

/* ============================================================
   BACK LINK
   ============================================================ */

body[data-view="bladerunner"] .vtx-back-link {
  color: var(--br-grn);
  transition: background 0.06s ease, color 0.06s ease, text-shadow 0.06s ease;
}

body[data-view="bladerunner"] .vtx-back-link:hover {
  background: rgba(255, 176, 64, 0.1);
  color: var(--br-grn-hi);
  text-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor,
    0 0 14px rgba(255, 176, 64, 0.5);
}

body[data-view="bladerunner"] .vtx-back-link:focus-visible {
  background: rgba(255, 176, 64, 0.1);
  color: var(--br-grn-hi);
  outline: 2px solid var(--br-grn);
  outline-offset: 1px;
}

/* ============================================================
   PROMPT & CURSOR — blazing green block with extreme glow
   ============================================================ */

body[data-view="bladerunner"] .vtx-prompt {
  color: var(--br-grn);
  border-top: 1px solid rgba(255, 176, 64, 0.15);
}

body[data-view="bladerunner"] .vtx-cursor {
  background: var(--br-grn-hi);
  box-shadow:
    0 0 4px var(--br-grn),
    0 0 10px var(--br-grn),
    0 0 20px rgba(255, 176, 64, 0.5),
    0 0 40px rgba(255, 176, 64, 0.2);
}

/* ============================================================
   TEXT SELECTION
   ============================================================ */

body[data-view="bladerunner"] .videotex-display ::selection {
  background: var(--br-grn);
  color: var(--br-bg);
  text-shadow: none;
}

body[data-view="bladerunner"] .videotex-display ::-moz-selection {
  background: var(--br-grn);
  color: var(--br-bg);
  text-shadow: none;
}

/* ============================================================
   CURSOR MICRO-JITTER (BR-scoped)
   Reuses cursor-jitter @keyframes from videotex.css (loads first).
   Compound animation: existing cursor blink + jitter at 240ms.
   ============================================================ */

body[data-view="bladerunner"] .br-screen .vtx-cursor.is-idle {
  animation:
    cursor-blink 1s step-start infinite,
    cursor-jitter 240ms steps(1, end) infinite;
}

/* ============================================================
   LIVE STATUS STRIP — bottom of .br-screen
   Baud rate | signal dots | uptime
   ============================================================ */

body[data-view="bladerunner"] .br-live-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  color: var(--br-grn-dim);
  text-shadow:
    0 0 2px currentColor,
    0 0 6px rgba(255, 176, 64, 0.3);
}

body[data-view="bladerunner"] .br-ls-baud,
body[data-view="bladerunner"] .br-ls-uptime {
  white-space: nowrap;
}

body[data-view="bladerunner"] .br-ls-signal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

body[data-view="bladerunner"] .br-ls-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--br-grn);
  opacity: 0.2;
  box-shadow: 0 0 2px rgba(255, 176, 64, 0.4);
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

body[data-view="bladerunner"] .br-ls-dot.is-lit {
  opacity: 1;
  box-shadow:
    0 0 3px var(--br-grn),
    0 0 8px rgba(255, 176, 64, 0.7),
    0 0 14px rgba(255, 176, 64, 0.35);
}

/* ============================================================
   CRAWLER — top status ticker
   ============================================================ */

body[data-view="bladerunner"] .br-crawler {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 16;
  pointer-events: none;
  overflow: hidden;
  background: rgba(0, 10, 0, 0.42);
  border-bottom: 1px solid rgba(255, 176, 64, 0.10);
  opacity: 0.8;
}

/* Reserve top + bottom padding on the BR scrollable content so neither the
   crawler (top) nor the live-status (bottom) ever occludes rendered text. */
body[data-view="bladerunner"] .videotex-display {
  padding-top: calc(1.4% + var(--screen-safe-y) + 22px);
}

body[data-view="bladerunner"] .br-crawler-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  animation: br-crawler-scroll 22s linear infinite;
  will-change: transform;
}

body[data-view="bladerunner"] .br-crawler-item {
  display: inline-block;
  padding: 0 60px;
  white-space: nowrap;
  color: var(--br-grn);
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.78em;
  letter-spacing: 0.12em;
  text-shadow:
    0 0 2px currentColor,
    0 0 6px rgba(255, 176, 64, 0.4);
}

@keyframes br-crawler-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ============================================================
   TIMESTAMP — top-right corner (avoids bottom live-status)
   ============================================================ */

body[data-view="bladerunner"] .br-timestamp {
  position: absolute;
  top: 24px; /* below the 20px crawler + 4px gap */
  right: 10px;
  z-index: 14;
  pointer-events: none;
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.75em;
  letter-spacing: 0.08em;
  color: var(--br-grn);
  opacity: 0.55;
  text-shadow:
    0 0 2px currentColor,
    0 0 5px rgba(255, 176, 64, 0.3);
}

/* ============================================================
   REDUCED MOTION — BR terminal
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body[data-view="bladerunner"] .br-screen .vtx-cursor.is-idle {
    animation: cursor-blink 1s step-start infinite;
  }
  body[data-view="bladerunner"] .br-crawler-track {
    animation: none;
    transform: none;
    justify-content: center;
  }
}

/* ---- Off-world hub (root landing after boot) ---- */
body[data-view="bladerunner"] .ow-hub { display: block; }
body[data-view="bladerunner"] .ow-hub-item { display: flex; min-height: 48px; align-items: center; }
body[data-view="bladerunner"] .ow-ext {
  margin-left: 0.5em;
  padding: 0 0.35em;
  border: 1px solid currentColor;
  font-size: 0.8em;
  letter-spacing: 0.08em;
}
body[data-view="bladerunner"] .ow-recent-row {
  display: grid;
  grid-template-columns: minmax(9em, 14em) 1fr auto;
  gap: 0 1em;
  padding: 0.15em 0 0.15em 1em;
  opacity: 0.92;
}
body[data-view="bladerunner"] .ow-recent-title { color: #fff; }
body[data-view="bladerunner"] .ow-recent-copy { opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-view="bladerunner"] .ow-recent-when { opacity: 0.7; }
body[data-view="bladerunner"] .ow-hub-keys { display: flex; gap: 1.2em; padding-left: 1em; }
body[data-view="bladerunner"] .ow-key {
  font: inherit;
  width: auto;
  height: auto;
  white-space: nowrap;
  overflow: visible;
  color: inherit;
  background: none;
  border: 1px solid rgba(255, 176, 64, 0.35);
  min-height: 48px;
  padding: 0 0.8em;
  cursor: pointer;
}
body[data-view="bladerunner"] .ow-key:hover,
body[data-view="bladerunner"] .ow-key:focus-visible { background: rgba(255, 176, 64, 0.12); }
@media (max-width: 899px) {
  body[data-view="bladerunner"] .ow-recent-row { grid-template-columns: 1fr auto; }
  body[data-view="bladerunner"] .ow-recent-copy { grid-column: 1 / -1; white-space: normal; }
}

/* Chooser: mark the mode the visitor came from */
.landing-card.is-active-mode .land-card-code::after { content: ' / ACTIVE'; }

/* ---- Larger, clearer type on the Off-world screen ---- */
@media (min-width: 900px) {
  body[data-view="bladerunner"] .videotex-display {
    font-size: clamp(18px, 1.55vw, 23px);
    line-height: 1.55;
    letter-spacing: 0.03em;
    padding: clamp(18px, 2.4vw, 34px);
  }
}
body[data-view="bladerunner"] .ow-sub { display: block; }

/* ---- Introduction sequence ---- */
body[data-view="bladerunner"] .ow-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 55%;
  max-width: 34em;
  padding: 1.2em 1em 0.6em;
  gap: 0.35em;
}
body[data-view="bladerunner"] .ow-intro-title { margin: 0 0 0.2em; }
body[data-view="bladerunner"] .ow-intro-kicker { letter-spacing: 0.14em; font-size: 0.85em; }
body[data-view="bladerunner"] .ow-intro-line {
  margin: 0;
  font-size: 1.28em;
  line-height: 1.45;
  color: var(--br-grn-hi);
}
body[data-view="bladerunner"] .ow-intro-block .ow-intro-line { font-size: 1.08em; line-height: 1.5; color: var(--br-grn); }
body[data-view="bladerunner"] .ow-intro-block .ow-intro-line + .ow-intro-line { margin-top: 0.5em; }
body[data-view="bladerunner"] .ow-intro-cta { display: flex; flex-wrap: wrap; gap: 0.8em; margin-top: 1em; }
body[data-view="bladerunner"] .ow-cta {
  font: inherit;
  font-size: 1.1em;
  color: var(--br-grn-hi);
  background: none;
  border: 1px solid rgba(255, 176, 64, 0.5);
  min-height: 52px;
  padding: 0 1.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  cursor: pointer;
}
body[data-view="bladerunner"] .ow-cta-primary { background: rgba(255, 176, 64, 0.14); border-color: var(--br-grn); }
body[data-view="bladerunner"] .ow-cta:hover,
body[data-view="bladerunner"] .ow-cta:focus-visible { background: rgba(255, 176, 64, 0.24); }
body[data-view="bladerunner"] .ow-intro-nav { display: flex; gap: 1em; padding: 0.6em 1em; }
body[data-view="bladerunner"] .ow-key kbd { font: inherit; font-size: 0.75em; opacity: 0.7; margin-left: 0.5em; }
body[data-view="bladerunner"] .ow-key-primary { border-color: var(--br-grn); background: rgba(255, 176, 64, 0.1); }
body[data-view="bladerunner"] .ow-hub-item .ow-ext { margin-left: 0.8em; }
@media (max-width: 899px) {
  body[data-view="bladerunner"] .ow-intro { max-width: none; padding: 0.8em 0.4em; min-height: 0; }
  body[data-view="bladerunner"] .ow-intro-line { font-size: 1.12em; }
}

/* ---- Alien-style materialisation for the introduction ----
   Each element starts spread wide, soft and overbright, then draws
   together into focus. Staggered by --i (set inline by the renderer). */
body[data-view="bladerunner"] .ow-reveal { opacity: 1; }
@keyframes ow-materialise {
  0%   { opacity: 0; letter-spacing: 0.32em; filter: blur(3px) brightness(2.2); transform: translateY(2px); }
  35%  { opacity: 0.55; letter-spacing: 0.16em; filter: blur(1.2px) brightness(1.8); }
  70%  { opacity: 0.9; letter-spacing: 0.05em; filter: blur(0.3px) brightness(1.3); }
  100% { opacity: 1; letter-spacing: 0.03em; filter: none; transform: none; }
}
@keyframes ow-materialise-title {
  0%   { opacity: 0; letter-spacing: 0.9em; filter: blur(4px) brightness(2.6); }
  30%  { opacity: 0.5; letter-spacing: 0.55em; filter: blur(1.8px) brightness(2.2); }
  65%  { opacity: 0.85; letter-spacing: 0.22em; filter: blur(0.5px) brightness(1.5); }
  100% { opacity: 1; letter-spacing: 0.08em; filter: none; }
}
body[data-view="bladerunner"] .ow-intro-title { letter-spacing: 0.08em; }
@media (prefers-reduced-motion: reduce) {
  body[data-view="bladerunner"] .ow-reveal { animation: none; opacity: 1; }
}
/* The BR timestamp banner sits top-right; keep the status bar clear of it. */
body[data-view="bladerunner"] .vtx-status-bar .page-indicator { display: none; }

body[data-view="bladerunner"] .ow-intro { max-width: 40em; min-height: 0; justify-content: flex-start; }
body[data-view="bladerunner"] .ow-intro-line { font-size: 1.16em; line-height: 1.5; }
body[data-view="bladerunner"] .ow-intro-line + .ow-intro-line { margin-top: 0.55em; }
body[data-view="bladerunner"] .ow-intro-auto { align-self: center; font-size: 0.72em; letter-spacing: 0.14em; opacity: 0.55; }

/* ---- Old-school CRT typing: block caret that follows the beam ---- */
body[data-view="bladerunner"] .tw-caret {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  vertical-align: -0.15em;
  background: var(--br-grn-hi);
  box-shadow: 0 0 6px var(--br-grn), 0 0 14px rgba(255, 176, 64, 0.5);
  animation: ow-caret 0.9s steps(2, start) infinite;
}
@keyframes ow-caret { 50% { opacity: 0; } }
body[data-view="bladerunner"] .tw-hot {
  text-shadow: 0 0 2px #fff, 0 0 8px var(--br-grn-hi), 0 0 18px var(--br-grn);
}

/* No crawler in Off-world: the header strip is quiet. */
body[data-view="bladerunner"] .br-crawler { display: none; }

/* ---- Larger type across the Off-world experience ---- */
@media (min-width: 900px) {
  body[data-view="bladerunner"] .videotex-display {
    font-size: clamp(21px, 1.9vw, 28px);
    line-height: 1.5;
  }
  body[data-view="bladerunner"] .double-height { font-size: 1.7em; }
}
body[data-view="bladerunner"] .ow-intro-line { font-size: 1.08em; }
body[data-view="bladerunner"] .ow-intro-block .ow-intro-line { font-size: 1em; }
body[data-view="bladerunner"] .ow-hub-item { min-height: 56px; font-size: 1.15em; }
body[data-view="bladerunner"] .br-live-status,
body[data-view="bladerunner"] .br-timestamp,
body[data-view="bladerunner"] .vtx-status-bar { font-size: 0.8em; }
@media (prefers-reduced-motion: reduce) {
  body[data-view="bladerunner"] .tw-caret { animation: none; display: none; }
}
body[data-view="bladerunner"] .vtx-status-bar { padding-right: 15em; }
@media (max-width: 899px) { body[data-view="bladerunner"] .vtx-status-bar { padding-right: 0; } }

/* Bottom strip: readable, tappable. */
body[data-view="bladerunner"] .br-live-status {
  font-size: 0.95em;
  padding: 8px 14px;
  min-height: 44px;
}
body[data-view="bladerunner"] .br-live-status .ls-audio { min-height: 40px; padding: 0 0.6em; }
body[data-view="bladerunner"] .br-screen .videotex-display { padding-bottom: 64px; }
body[data-view="bladerunner"] .ow-intro-nav .ow-key,
body[data-view="bladerunner"] .ow-hub-keys .ow-key { min-height: 56px; font-size: 1.05em; padding: 0 1.2em; }

/* Keep each intro screen inside the tube. */
body[data-view="bladerunner"] .ow-intro { padding-top: 0.6em; gap: 0.25em; }
body[data-view="bladerunner"] .ow-intro-line { font-size: 1em; line-height: 1.42; }
body[data-view="bladerunner"] .ow-intro-block .ow-intro-line { font-size: 0.94em; }
body[data-view="bladerunner"] .ow-intro-line + .ow-intro-line { margin-top: 0.4em; }
body[data-view="bladerunner"] .ow-intro-title { font-size: 1.5em; margin-bottom: 0; }
body[data-view="bladerunner"] .ow-intro-nav { padding-top: 0.4em; }
body[data-view="bladerunner"] .br-screen .videotex-display { position: relative; }
body[data-view="bladerunner"] .ow-intro-nav {
  position: absolute;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  bottom: 66px;
  align-items: center;
  padding: 0;
}
body[data-view="bladerunner"] .ow-intro { padding-bottom: 80px; }

/* ============================================================
   ONE TERMINAL — pages, boot frame and mode select share the
   MU-TH-UR grammar: same tube, type, amber, key row.
   ============================================================ */
body[data-view="bladerunner"] .ow-page { padding: 0.4em 1em 1em; max-width: 44em; }
body[data-view="bladerunner"] .ow-page-title { margin: 0 0 0.2em; }
body[data-view="bladerunner"] .ow-page-summary { margin: 0 0 0.9em; color: var(--br-grn-hi); }
body[data-view="bladerunner"] .ow-row { padding: 0.55em 0; border-top: 1px solid rgba(255, 176, 64, 0.18); }
body[data-view="bladerunner"] .ow-row-head { display: flex; align-items: center; gap: 0.8em; color: var(--br-white); text-decoration: none; min-height: 44px; }
body[data-view="bladerunner"] a.ow-row-head:hover,
body[data-view="bladerunner"] a.ow-row-head:focus-visible { color: var(--br-grn-hi); background: rgba(255, 176, 64, 0.08); }
body[data-view="bladerunner"] .ow-row-num { color: var(--br-grn); opacity: 0.8; }
body[data-view="bladerunner"] .ow-row-title { font-size: 1.12em; }
body[data-view="bladerunner"] .ow-row-meta { display: block; color: var(--br-grn); opacity: 0.85; font-size: 0.9em; letter-spacing: 0.06em; }
body[data-view="bladerunner"] .ow-row-copy { margin: 0.25em 0 0; font-size: 0.95em; line-height: 1.45; color: var(--br-grn-hi); opacity: 0.92; }
body[data-view="bladerunner"] .ow-page-keys { padding: 1em 1em 0.5em; flex-wrap: wrap; }
body[data-view="bladerunner"] .ow-page .ow-cta { margin-top: 1em; }

/* Boot frame: the same tube as the terminal, so boot > intro is one shot. */
@media (min-width: 900px) {
  body[data-view="landing"] {
    --br-border-width: clamp(18px, 3vh, 36px) clamp(28px, 4vw, 64px) clamp(44px, 7vh, 80px);
    --tube-radius: clamp(10px, 1.6vw, 22px);
  }
}
body[data-view="landing"] .land-screen {
  top: auto; left: auto; width: auto; height: auto;
  inset: var(--br-border-width, 16px);
  border-radius: var(--tube-radius, 12px);
  transform: none;
  background: radial-gradient(ellipse 120% 120% at 50% 50%, #14100a 0%, #080604 60%, #030201 100%);
  box-shadow:
    inset 0 0 0 1px rgba(2, 6, 4, 0.95),
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    inset 0 -6px 18px rgba(0, 0, 0, 0.5),
    inset 0 0 70px rgba(0, 0, 0, 0.42),
    0 0 0 2px rgba(60, 70, 60, 0.35),
    0 0 0 6px rgba(12, 14, 12, 0.9),
    0 0 18px rgba(255, 176, 64, 0.16),
    0 0 70px rgba(255, 176, 64, 0.12),
    0 0 180px rgba(255, 176, 64, 0.08),
    0 0 420px rgba(255, 176, 64, 0.045);
}
/* .land-bg background: the room art, set in br-scene.css (ROOM ART block). */
body[data-view="landing"] .land-bg::before,
body[data-view="landing"] .land-bg::after,
body[data-view="landing"] .land-overlay-img,
body[data-view="landing"] .land-scene-frame::after { display: none; }
body[data-view="landing"] .land-boot { padding: clamp(18px, 2.4vw, 34px); }
body[data-view="landing"] .land-boot-content {
  font-family: 'VT323', 'IBM Plex Mono', monospace;
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.5;
}

/* Mode select as a terminal screen, not an arcade panel. */
.land-chooser .land-chooser-shell { width: min(900px, calc(100% - 48px)); }
.land-chooser .land-choice-kicker,
.land-chooser .land-choice-copy,
.land-chooser .land-chooser-help,
.land-chooser .land-card-code,
.land-chooser .land-card-label,
.land-chooser .land-card-sub {
  font-family: 'VT323', 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.04em;
}
.land-chooser .land-choice-title {
  font-family: 'VT323', 'IBM Plex Mono', monospace !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  letter-spacing: 0.06em;
  color: #f6e0b6;
}
.land-chooser .land-choice-kicker { font-size: clamp(16px, 1.3vw, 20px); }
.land-chooser .land-choice-copy { font-size: clamp(18px, 1.5vw, 22px); }
.land-choices { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
.landing-card {
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.2em !important;
  min-height: 64px !important;
  padding: 0 1.2em !important;
  background: rgba(255, 176, 64, 0.04) !important;
  border: 1px solid rgba(255, 176, 64, 0.35) !important;
}
.landing-card::after { display: none !important; }
.landing-card .land-card-code { font-size: clamp(16px, 1.3vw, 20px) !important; min-width: 9em; color: #f29f2f; }
.landing-card .land-card-label { font-size: clamp(22px, 2vw, 30px) !important; color: #f6e0b6; }
.landing-card .land-card-sub { font-size: clamp(15px, 1.2vw, 19px) !important; margin-left: auto; opacity: 0.75; }
.landing-card:hover, .landing-card:focus-visible { background: rgba(255, 176, 64, 0.14) !important; }
.landing-card.is-active-mode .land-card-code::after { content: ' / ACTIVE'; }

/* ============================================================
   READABILITY PASS — bigger type, more of the screen, more contrast
   ============================================================ */
@media (min-width: 900px) {
  body[data-view="bladerunner"] .videotex-display {
    font-size: clamp(23px, 2.15vw, 32px);
    line-height: 1.5;
    padding: clamp(20px, 2.6vw, 40px) clamp(24px, 3vw, 48px) 80px;
  }
}
body[data-view="bladerunner"] .videotex-display { color: #ffd68a; }
body[data-view="bladerunner"] .ow-intro,
body[data-view="bladerunner"] .ow-page { max-width: none; padding-left: 0; padding-right: 0; }
body[data-view="bladerunner"] .ow-intro-line { font-size: 1.05em; line-height: 1.5; max-width: 34em; color: #ffe2a8; }
body[data-view="bladerunner"] .ow-intro-block .ow-intro-line { font-size: 1em; }
body[data-view="bladerunner"] .ow-row-copy,
body[data-view="bladerunner"] .ow-page-summary { max-width: 38em; color: #ffe2a8; opacity: 1; }
body[data-view="bladerunner"] .ow-row-meta { opacity: 1; color: #f2b95a; }
body[data-view="bladerunner"] .ow-page-keys,
body[data-view="bladerunner"] .ow-hub-keys { padding-left: 0; }
body[data-view="bladerunner"] .ow-intro-nav { left: clamp(24px, 3vw, 48px); right: clamp(24px, 3vw, 48px); }
body[data-view="bladerunner"] .ow-intro-auto { display: none; }
body[data-view="bladerunner"] .br-live-status { font-size: max(15px, 0.72em); }
body[data-view="bladerunner"] .br-timestamp { font-size: max(15px, 0.7em); }
body[data-view="bladerunner"] .vtx-status-bar { font-size: max(16px, 0.8em); }
/* Keep the beam soft on hot glyphs only; body text stays crisp. */
body[data-view="bladerunner"] .videotex-display { text-shadow: 0 0 1px rgba(255, 214, 138, 0.6); }
/* Visible focus for every control */
body[data-view="bladerunner"] .ow-key:focus-visible,
body[data-view="bladerunner"] .ow-cta:focus-visible,
body[data-view="bladerunner"] .ow-hub-item:focus-visible,
body[data-view="bladerunner"] a.ow-row-head:focus-visible {
  outline: 3px solid #ffe2a8;
  outline-offset: 2px;
}
body[data-view="bladerunner"] .br-live-status .ls-audio { min-height: 44px; min-width: 44px; }
/* Timestamp lives in the top-right corner; the status bar and its rule sit below it. */
body[data-view="bladerunner"] .br-timestamp { top: 8px; right: 14px; }
body[data-view="bladerunner"] .vtx-status-bar {
  margin-top: 1.4em;
  padding-right: 0;
  padding-bottom: 0.3em;
  border-bottom-color: rgba(255, 176, 64, 0.3);
}

/* ============================================================
   TYPE SCALE — larger everywhere; the main text leads.
   Loaded after responsive.css, so these win at every breakpoint.
   ============================================================ */
body[data-view="bladerunner"] .br-screen .videotex-display {
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.5;
}
@media (min-width: 600px) {
  body[data-view="bladerunner"] .br-screen .videotex-display { font-size: clamp(22px, 2.6vw, 30px); }
}
@media (min-width: 900px) {
  body[data-view="bladerunner"] .br-screen .videotex-display { font-size: clamp(26px, 2.35vw, 36px); }
}
@media (min-width: 1600px) {
  body[data-view="bladerunner"] .br-screen .videotex-display { font-size: 38px; }
}
body[data-view="bladerunner"] .ow-intro-line { font-size: 1.1em; max-width: 30em; }
body[data-view="bladerunner"] .ow-intro-block .ow-intro-line { font-size: 1.02em; }
body[data-view="bladerunner"] .ow-intro-title { font-size: 1.6em; }
body[data-view="bladerunner"] .double-height { font-size: 1.6em; }
body[data-view="bladerunner"] .ow-hub-item { font-size: 1.15em; min-height: 60px; }
body[data-view="bladerunner"] .ow-row-title { font-size: 1.12em; }
body[data-view="bladerunner"] .ow-row-meta { font-size: 0.92em; }
body[data-view="bladerunner"] .ow-row-copy,
body[data-view="bladerunner"] .ow-page-summary { font-size: 1em; max-width: 34em; }
body[data-view="bladerunner"] .ow-key,
body[data-view="bladerunner"] .ow-cta { font-size: 1em; min-height: 56px; }
body[data-view="bladerunner"] .vtx-status-bar { font-size: max(17px, 0.78em); }
body[data-view="bladerunner"] .br-live-status { font-size: max(16px, 0.7em); }
body[data-view="bladerunner"] .br-timestamp { font-size: max(16px, 0.66em); }
body[data-view="landing"] .land-boot-content { font-size: clamp(20px, 2.2vw, 34px); }
@media (max-width: 899px) {
  body[data-view="landing"] .land-boot-content { font-size: clamp(18px, 4.4vw, 22px); }
  body[data-view="bladerunner"] .ow-intro-nav { position: static; padding: 0.8em 0 0; flex-wrap: wrap; }
  body[data-view="bladerunner"] .ow-intro { padding-bottom: 0; }
  body[data-view="bladerunner"] .ow-key, body[data-view="bladerunner"] .ow-cta { min-height: 52px; }
}
/* Phone: the bottom strip keeps only AUDIO and the timer so nothing collides. */
@media (max-width: 599px) {
  body[data-view="bladerunner"] .br-live-status > :not(.ls-audio):not(:last-child) { display: none; }
  body[data-view="bladerunner"] .br-live-status { justify-content: space-between; padding: 6px 10px; }
  body[data-view="bladerunner"] .vtx-status-bar { margin-top: 1.6em; }
}
@media (max-width: 599px) {
  body[data-view="bladerunner"] .br-ls-baud,
  body[data-view="bladerunner"] .br-ls-signal { display: none !important; }
}

body[data-view="bladerunner"] .ow-key-link { text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em; border-color: var(--br-grn); background: rgba(255, 176, 64, 0.1); }
body[data-view="bladerunner"] .ow-intro-nav { flex-wrap: wrap; gap: 0.7em; }

/* Type follows the tube width (container query), so the recess-anchored
   tube reads at the same density on any monitor. */
@media (min-width: 900px) {
  body[data-view="bladerunner"] .br-screen .videotex-display {
    font-size: clamp(19px, 3.5cqw, 32px);
    padding: clamp(16px, 3cqw, 32px) clamp(16px, 3.2cqw, 36px) 76px;
  }
  body[data-view="landing"] .land-boot-content { font-size: clamp(18px, 3.4cqw, 30px); }
  body[data-view="bladerunner"] .ow-intro-nav { left: clamp(16px, 3.2cqw, 36px); right: clamp(16px, 3.2cqw, 36px); }
}
/* Boot frame pinned to the room art's recess (must outrank the earlier inset rule). */
@media (min-width: 900px) {
  body[data-view="landing"] .land-scene-frame .land-screen {
    inset: auto;
    top: var(--tube-top);
    left: 50%;
    width: var(--tube-w);
    height: var(--tube-h);
    margin-left: calc(var(--tube-w) / -2);
    container-type: inline-size;
  }
}