/*
  SENTNET BROADCAST SYSTEM
  Full interface design-system overhaul inspired by late-1990s independent
  record packaging, modular speech labels, printed stickers and data routing.
*/

:root {
  --ink: #11120d;
  --ink-2: #252619;
  --olive: #3b3b24;
  --olive-soft: #64633b;
  --acid: #9eea4f;
  --acid-hi: #c8ff7a;
  --paper: #f2eee1;
  --paper-2: #d8d2c1;
  --bronze: #a99c58;
  --alert: #ff5b3e;
  --network: #55d6dc;
  --shadow: rgba(0, 0, 0, .74);
  --mono-bg: var(--ink);
  --mono-fore: var(--paper);
  --tech-grey: #9a9685;
  --cyan: var(--network);
  --magenta: var(--alert);
  --yellow: var(--acid);
  --orange: var(--bronze);
  --display: 'Bowlby One SC', 'Bungee', Impact, sans-serif;
  --ui: 'Bungee', 'Arial Black', sans-serif;
  --read: 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;
}

html, body { background: var(--ink) !important; }
body {
  font-family: var(--read) !important;
  color: var(--paper) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 199;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 68%, rgba(0,0,0,.75) 0 1px, transparent 1.6px);
  background-size: 7px 7px, 11px 11px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 198;
  pointer-events: none;
  border: 1px solid rgba(242,238,225,.16);
  box-shadow: inset 0 0 90px rgba(0,0,0,.24);
}

/* ---------- scene / portrait integration ---------- */
#bg-image {
  filter: contrast(1.05) saturate(.96) brightness(.94) !important;
}
#crt {
  opacity: .55 !important;
  mix-blend-mode: soft-light !important;
}
#crt::after {
  background: radial-gradient(ellipse at center, transparent 72%, rgba(0,0,0,.28) 100%) !important;
}
#stage { z-index: 14 !important; }
#speaker-stage { z-index: 22 !important; }
.portrait,
#speaker-stage .portrait.speaker,
#stage .portrait.listener {
  filter:
    brightness(.78)
    saturate(.84)
    drop-shadow(3px 0 0 var(--paper))
    drop-shadow(-3px 0 0 var(--paper))
    drop-shadow(0 3px 0 var(--paper))
    drop-shadow(0 -3px 0 var(--paper))
    drop-shadow(15px 14px 0 rgba(17,18,13,.85)) !important;
}
#speaker-stage .portrait.speaker {
  height: 84vh !important;
  bottom: -8vh !important;
}
#stage .portrait.listener {
  height: 70vh !important;
  bottom: -8vh !important;
  opacity: .76 !important;
}
#speaker-stage .portrait.speaker img { max-width: 56vw !important; }
#stage .portrait.listener img { max-width: 43vw !important; }
.portrait.lit {
  filter:
    brightness(1.02)
    saturate(1.02)
    drop-shadow(3px 0 0 var(--paper))
    drop-shadow(-3px 0 0 var(--paper))
    drop-shadow(0 3px 0 var(--paper))
    drop-shadow(0 -3px 0 var(--paper))
    drop-shadow(15px 14px 0 rgba(17,18,13,.85)) !important;
  transform: translateY(-5px) scale(1.025) !important;
}

/* ---------- dialogue: transmitted speech modules ---------- */
#dialogue {
  z-index: 20 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 2vw 2.2vh !important;
  perspective: none !important;
}
#dialogue-box,
#dialogue.speaker-left #dialogue-box,
#dialogue.speaker-right #dialogue-box,
#dialogue.system #dialogue-box {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  min-height: 100px !important;
  margin: 0 !important;
  padding: 28px 170px 30px 46px !important;
  border: 5px solid var(--ink) !important;
  border-radius: 28px 28px 28px 8px !important;
  box-shadow: 14px 14px 0 var(--shadow) !important;
  clip-path: none !important;
  overflow: visible !important;
  transform: rotate(-.75deg) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}
#dialogue.speaker-left #dialogue-box {
  margin-left: 13vw !important;
  margin-right: 1.5vw !important;
  padding-left: 11vw !important;
  border-radius: 28px 28px 28px 8px !important;
}
#dialogue.speaker-right #dialogue-box {
  margin-left: 1.5vw !important;
  margin-right: 13vw !important;
  padding-right: 11vw !important;
  padding-left: 46px !important;
  border-radius: 28px 28px 8px 28px !important;
  transform: rotate(.75deg) !important;
}
#dialogue[data-speaker="q"] #dialogue-box { background: var(--acid) !important; }
#dialogue[data-speaker="rashad"] #dialogue-box { background: var(--paper) !important; }
#dialogue[data-speaker="marcus"] #dialogue-box { background: var(--bronze) !important; }
#dialogue[data-speaker="sterling"] #dialogue-box { background: var(--alert) !important; }
#dialogue[data-speaker="bodyguard"] #dialogue-box { background: var(--olive-soft) !important; color: var(--paper) !important; }
#dialogue.system #dialogue-box {
  width: min(1080px, 88vw) !important;
  margin: 0 auto !important;
  padding: 24px 42px 26px !important;
  background: var(--olive) !important;
  color: var(--paper) !important;
  border-radius: 28px 28px 8px 28px !important;
  transform: rotate(-.5deg) !important;
}
/* directional tails: print-label language, not ornamental shards */
#dialogue-box::before,
#dialogue-box::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
}
#dialogue.speaker-left #dialogue-box::before {
  left: -36px !important;
  bottom: 15px !important;
  border-top: 28px solid transparent !important;
  border-bottom: 28px solid var(--ink) !important;
  border-right: 42px solid var(--ink) !important;
}
#dialogue.speaker-left #dialogue-box::after {
  left: -25px !important;
  bottom: 23px !important;
  border-top: 19px solid transparent !important;
  border-bottom: 20px solid var(--paper) !important;
  border-right: 30px solid var(--paper) !important;
}
#dialogue[data-speaker="q"].speaker-left #dialogue-box::after { border-bottom-color: var(--acid) !important; border-right-color: var(--acid) !important; }
#dialogue[data-speaker="marcus"].speaker-left #dialogue-box::after { border-bottom-color: var(--bronze) !important; border-right-color: var(--bronze) !important; }
#dialogue[data-speaker="sterling"].speaker-left #dialogue-box::after { border-bottom-color: var(--alert) !important; border-right-color: var(--alert) !important; }
#dialogue.speaker-right #dialogue-box::before {
  right: -36px !important;
  bottom: 15px !important;
  border-top: 28px solid transparent !important;
  border-bottom: 28px solid var(--ink) !important;
  border-left: 42px solid var(--ink) !important;
}
#dialogue.speaker-right #dialogue-box::after {
  right: -25px !important;
  bottom: 23px !important;
  border-top: 19px solid transparent !important;
  border-bottom: 20px solid var(--paper) !important;
  border-left: 30px solid var(--paper) !important;
}
#dialogue[data-speaker="q"].speaker-right #dialogue-box::after { border-bottom-color: var(--acid) !important; border-left-color: var(--acid) !important; }
#dialogue[data-speaker="marcus"].speaker-right #dialogue-box::after { border-bottom-color: var(--bronze) !important; border-left-color: var(--bronze) !important; }
#dialogue[data-speaker="sterling"].speaker-right #dialogue-box::after { border-bottom-color: var(--alert) !important; border-left-color: var(--alert) !important; }
#dialogue.system #dialogue-box::before,
#dialogue.system #dialogue-box::after { display: none !important; }

#speaker-chip,
#dialogue.speaker-left #speaker-chip,
#dialogue.speaker-right #speaker-chip {
  top: -24px !important;
  left: 28px !important;
  right: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 130px) !important;
  padding: 9px 20px 8px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 14px 14px 14px 3px !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.36) !important;
  clip-path: none !important;
  transform: rotate(-1.5deg) !important;
  font-family: var(--ui) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: .5px !important;
  overflow: visible !important;
}
#speaker-chip::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -10px;
  width: 0;
  height: 0;
  border-top: 12px solid var(--ink);
  border-right: 14px solid transparent;
}
#dialogue-text,
#dialogue.speaker-left #dialogue-text,
#dialogue.speaker-right #dialogue-text {
  position: relative !important;
  z-index: 3 !important;
  min-height: 1.55em !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-family: var(--read) !important;
  font-weight: 600 !important;
  font-size: clamp(21px, 1.8vw, 28px) !important;
  line-height: 1.25 !important;
  letter-spacing: -.25px !important;
  text-shadow: none !important;
  transform: none !important;
}
#dialogue[data-speaker="bodyguard"] #dialogue-text,
#dialogue.system #dialogue-text { color: var(--paper) !important; }
#dialogue.system #dialogue-text {
  font-family: var(--read) !important;
  font-size: clamp(18px, 1.5vw, 23px) !important;
  line-height: 1.35 !important;
}
.genius-term {
  display: inline;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: 0 !important;
  border-radius: 5px !important;
  padding: 0 5px 1px !important;
  font-weight: 700 !important;
}
.genius-term:hover { color: var(--ink) !important; background: var(--acid-hi) !important; }
#dlg-controls,
#dialogue.speaker-left #dlg-controls,
#dialogue.speaker-right #dlg-controls {
  right: 24px !important;
  left: auto !important;
  bottom: 13px !important;
  gap: 7px !important;
  transform: none !important;
  z-index: 7 !important;
}
.dlg-ctl {
  padding: 6px 10px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 10px 10px 10px 2px !important;
  font-family: var(--read) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  transform: none !important;
}
.dlg-ctl:hover,
.dlg-ctl:focus-visible,
.dlg-ctl.on { color: var(--ink) !important; background: var(--acid-hi) !important; }
#continue-cue,
#dialogue.speaker-left #continue-cue,
#dialogue.speaker-right #continue-cue {
  top: -17px !important;
  right: 26px !important;
  left: auto !important;
  padding: 5px 12px !important;
  background: var(--ink) !important;
  color: var(--acid-hi) !important;
  border: 0 !important;
  border-radius: 10px 10px 2px 10px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.34) !important;
  font-family: var(--read) !important;
  font-size: 13px !important;
  transform: rotate(1deg) !important;
}

/* ---------- choices: modular message labels ---------- */
#choice-dim { background: rgba(17,18,13,.70) !important; backdrop-filter: saturate(.75) brightness(.72); }
#choices {
  top: 10vh !important;
  right: 1.8vw !important;
  width: min(710px, 58vw) !important;
  padding: 0 !important;
  gap: 13px !important;
  perspective: none !important;
}
.choice-btn {
  position: relative !important;
  width: 100% !important;
  padding: 18px 30px 18px 66px !important;
  border: 5px solid var(--ink) !important;
  border-radius: 22px 22px 22px 5px !important;
  clip-path: none !important;
  box-shadow: 11px 11px 0 rgba(0,0,0,.72) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  font-family: var(--ui) !important;
  font-size: clamp(16px, 1.45vw, 21px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  transform: translateX(120%) rotate(-1deg) !important;
  animation: broadcastChoiceIn .30s cubic-bezier(.2,1.25,.4,1) forwards !important;
}
.choice-btn:nth-child(2n) { background: var(--acid) !important; border-radius: 22px 22px 5px 22px !important; transform: translateX(120%) rotate(1deg) !important; }
.choice-btn:nth-child(3n) { background: var(--olive-soft) !important; color: var(--paper) !important; }
.choice-btn::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -18px;
  width: 0;
  height: 0;
  border-top: 20px solid var(--ink);
  border-left: 20px solid transparent;
  z-index: -1;
}
.choice-btn:nth-child(even)::after { right: auto; left: 22px; border-left: 0; border-right: 20px solid transparent; }
@keyframes broadcastChoiceIn { to { transform: translateX(0) rotate(-1deg); } }
.choice-btn:nth-child(2n) { animation-name: broadcastChoiceInEven !important; }
@keyframes broadcastChoiceInEven { to { transform: translateX(-16px) rotate(1deg); } }
.choice-btn:nth-child(3n) { animation-name: broadcastChoiceInThird !important; }
@keyframes broadcastChoiceInThird { to { transform: translateX(-32px) rotate(-.4deg); } }
.choice-btn.entered { animation: none !important; transform: translateX(0) rotate(-1deg) !important; }
.choice-btn.entered:nth-child(2n) { transform: translateX(-16px) rotate(1deg) !important; }
.choice-btn.entered:nth-child(3n) { transform: translateX(-32px) rotate(-.4deg) !important; }
.choice-btn:hover,
.choice-btn.entered:hover {
  animation: none !important;
  transform: translateX(-22px) translateY(-3px) rotate(0deg) scale(1.015) !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border-color: var(--paper) !important;
}
.choice-num,
.choice-btn .choice-num {
  left: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 50% 50% 50% 12% !important;
  background: var(--ink) !important;
  color: var(--acid-hi) !important;
  font-family: var(--display) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}
.choice-btn:hover .choice-num { background: var(--acid-hi) !important; color: var(--ink) !important; }
.choice-btn.ai-choice { border-left-color: var(--network) !important; }
.choice-btn.locked { opacity: .44 !important; }
.choice-btn.explored::after { content: "" !important; }
.choice-btn.explored::before {
  content: "SEEN";
  position: absolute;
  right: 14px;
  top: 8px;
  color: currentColor;
  font: 700 10px var(--read);
}

/* ---------- upper-left sticker cluster ---------- */
#plate {
  top: 17px !important;
  left: 18px !important;
  z-index: 28 !important;
  gap: 4px !important;
  transform: none !important;
}
.plate-row { gap: 5px !important; align-items: flex-start !important; }
.plate-date,
.plate-time,
.plate-loc,
#plate-count {
  position: relative !important;
  border: 4px solid var(--ink) !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.55) !important;
  clip-path: none !important;
}
.plate-date {
  padding: 8px 13px 7px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-radius: 14px 14px 14px 3px !important;
  transform: rotate(-2.8deg) !important;
}
.plate-date b { font-family: var(--display) !important; font-size: 28px !important; letter-spacing: -1px !important; }
.plate-date span { color: var(--olive) !important; font: 700 11px var(--read) !important; }
.plate-time {
  margin-top: 6px !important;
  padding: 10px 15px !important;
  color: var(--ink) !important;
  background: var(--acid) !important;
  border-radius: 14px 14px 3px 14px !important;
  transform: rotate(1.7deg) !important;
  font-family: var(--display) !important;
  font-size: 24px !important;
}
.plate-loc {
  width: max-content !important;
  min-width: 165px !important;
  padding: 7px 12px !important;
  color: var(--acid-hi) !important;
  background: var(--ink) !important;
  border-color: var(--paper) !important;
  border-radius: 11px 11px 11px 2px !important;
  transform: rotate(-1deg) !important;
  font: 700 12px var(--read) !important;
  letter-spacing: .7px !important;
}
#plate-count {
  width: max-content !important;
  min-width: 202px !important;
  padding: 6px 12px !important;
  color: var(--paper) !important;
  background: var(--olive) !important;
  border-color: var(--acid) !important;
  border-radius: 11px 11px 2px 11px !important;
  transform: rotate(-2deg) !important;
  font: 700 14px var(--read) !important;
  letter-spacing: 1px !important;
}
#plate-count b { font-size: 15px !important; }
#plate.critical #plate-count { color: var(--paper) !important; background: var(--alert) !important; border-color: var(--ink) !important; }

/* ---------- persistent controls ---------- */
#persistent-ui {
  right: 18px !important;
  bottom: 16px !important;
  z-index: 30 !important;
  gap: 5px !important;
  transform: none !important;
}
#persistent-ui .shortcut-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px 4px 5px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 9px 9px 9px 2px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.46);
  font: 700 10px var(--read);
  letter-spacing: .5px;
}
#persistent-ui .shortcut-bubble:nth-child(even) { border-radius: 9px 9px 2px 9px; }
#persistent-ui .pu-key {
  min-width: 23px !important;
  height: 23px !important;
  padding: 0 5px !important;
  background: var(--acid) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 7px 7px 7px 2px !important;
  box-shadow: none !important;
  font-family: var(--ui) !important;
  font-size: 11px !important;
}
#persistent-ui .pu-label {
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

/* ---------- top-center notifications ---------- */
#toast-stack {
  top: 18px !important;
  left: 50% !important;
  width: min(760px, 72vw) !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  z-index: 48 !important;
}
.toast {
  position: relative !important;
  min-height: 56px !important;
  max-width: min(720px, 72vw) !important;
  padding: 14px 24px !important;
  justify-content: center !important;
  color: var(--ink) !important;
  background: var(--acid) !important;
  border: 5px solid var(--ink) !important;
  border-radius: 18px 18px 5px 18px !important;
  box-shadow: 9px 9px 0 rgba(0,0,0,.58) !important;
  font-family: var(--ui) !important;
  font-size: 16px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  transform: translateY(-150%) rotate(-1deg) !important;
  animation: broadcastToastIn .24s cubic-bezier(.2,1.25,.4,1) forwards !important;
}
.toast::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -17px;
  width: 0;
  height: 0;
  border-top: 18px solid var(--ink);
  border-left: 18px solid transparent;
}
.toast.y { background: var(--paper) !important; }
.toast.m { background: var(--alert) !important; color: var(--ink) !important; }
.toast.relationship { background: var(--network) !important; border-color: var(--ink) !important; }
.toast img { height: 36px !important; transform: none !important; }
.toast .tk { color: var(--ink) !important; font-family: var(--display) !important; font-size: 22px !important; transform: none !important; }
.toast.out { animation: broadcastToastOut .25s ease forwards !important; }
@keyframes broadcastToastIn { to { transform: translateY(0) rotate(-1deg); } }
@keyframes broadcastToastOut { to { transform: translateY(-160%) rotate(-1deg); opacity: 0; } }

/* ---------- hotspots / quick actions ---------- */
.hotspot .disc {
  width: 50px !important;
  height: 50px !important;
  background: var(--ink) !important;
  border: 4px solid var(--acid) !important;
  border-radius: 16px 16px 16px 4px !important;
  color: var(--acid-hi) !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.64) !important;
  animation: broadcastHotspot 1.25s ease-in-out infinite !important;
}
.hotspot .hl {
  top: calc(50% + 37px) !important;
  padding: 5px 10px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 9px 9px 9px 2px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.52) !important;
  font: 700 12px var(--read) !important;
  letter-spacing: .4px !important;
  transform: translateX(-50%) !important;
}
.hotspot.progress .disc { background: var(--acid) !important; color: var(--ink) !important; }
.hotspot.progress .hl { background: var(--acid) !important; color: var(--ink) !important; border-color: var(--ink) !important; }
@keyframes broadcastHotspot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(1deg); }
}
#action-required {
  right: 18px !important;
  bottom: 64px !important;
  max-width: 390px !important;
  padding: 10px 14px !important;
  background: var(--acid) !important;
  color: var(--ink) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 14px 14px 4px 14px !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.55) !important;
  transform: rotate(-1deg) !important;
  font: 700 12px var(--read) !important;
}
#action-required b { color: var(--ink) !important; font-family: var(--ui) !important; }
#quick-use {
  bottom: 24px !important;
  width: min(720px, 90vw) !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 5px solid var(--ink) !important;
  border-radius: 24px 24px 24px 6px !important;
  clip-path: none !important;
  box-shadow: 12px 12px 0 rgba(0,0,0,.64) !important;
  transform: translateX(-50%) rotate(-.5deg) !important;
}
#quick-use img { background: var(--olive) !important; border: 0 !important; border-radius: 14px 14px 14px 4px !important; }
#quick-use-copy small { color: var(--olive-soft) !important; font: 700 11px var(--read) !important; }
#quick-use-copy strong { color: var(--ink) !important; font: 18px var(--ui) !important; }
#quick-use-copy span { color: var(--ink-2) !important; font: 14px var(--read) !important; }
.quick-btn,
.btn-solid {
  padding: 10px 14px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 12px 12px 12px 3px !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.32) !important;
  transform: none !important;
  font-family: var(--ui) !important;
  font-size: 12px !important;
}
.quick-btn.primary,
.btn-solid:hover { background: var(--acid) !important; color: var(--ink) !important; }
.quick-btn.ghost { background: var(--paper-2) !important; color: var(--ink) !important; }
.btn-danger { background: var(--alert) !important; color: var(--ink) !important; }
@keyframes quickIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) rotate(-.5deg); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-.5deg); }
}

/* ---------- full-screen modular menu ---------- */
#menu {
  background: rgba(17,18,13,.95) !important;
  backdrop-filter: blur(8px) saturate(.7) !important;
}
#menu.open {
  display: grid !important;
  grid-template-columns: minmax(340px, 42%) 1fr !important;
  gap: 14px !important;
  padding: 18px !important;
}
#menu-left {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center !important;
  gap: 12px !important;
  padding: 22px !important;
  overflow: visible !important;
  background: transparent !important;
}
#menu-left h1 {
  grid-column: 1 / -1 !important;
  margin: 0 0 9px !important;
  color: var(--paper) !important;
  font-family: var(--display) !important;
  font-size: clamp(28px, 4vw, 58px) !important;
  line-height: .92 !important;
  letter-spacing: -1.5px !important;
  text-shadow: none !important;
  transform: none !important;
}
#menu-left h1::after {
  content: "COMMUNICATION / ARCHIVE / CONTROL";
  display: block;
  margin-top: 10px;
  color: var(--acid) !important;
  font: 700 10px var(--read) !important;
  letter-spacing: 1.5px !important;
}
.menu-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 14px 17px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 5px solid var(--ink) !important;
  border-radius: 19px 19px 19px 5px !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,.52) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  transform: rotate(-.7deg) !important;
  font-family: var(--display) !important;
  font-size: clamp(18px, 2.3vw, 34px) !important;
  line-height: .95 !important;
  transition: transform .14s, background .14s !important;
  overflow: visible !important;
}
.menu-item:nth-of-type(2n) {
  background: var(--acid) !important;
  border-radius: 19px 19px 5px 19px !important;
  transform: rotate(.8deg) !important;
}
.menu-item:nth-of-type(3n) { background: var(--olive-soft) !important; color: var(--paper) !important; }
.menu-item:nth-of-type(4n) { background: var(--bronze) !important; }
.menu-item:nth-of-type(5n) { background: var(--network) !important; }
.menu-item:hover,
.menu-item.active {
  color: var(--paper) !important;
  background: var(--alert) !important;
  transform: translateY(-5px) rotate(0deg) scale(1.015) !important;
}
#menu-hint {
  grid-column: 1 / -1 !important;
  position: static !important;
  margin-top: 6px !important;
  color: var(--paper-2) !important;
  font: 700 11px var(--read) !important;
  letter-spacing: 1px !important;
}
#menu-right {
  position: relative !important;
  margin: 0 !important;
  padding: 40px 40px 34px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 6px solid var(--ink) !important;
  border-radius: 30px 30px 8px 30px !important;
  box-shadow: 13px 13px 0 rgba(0,0,0,.58) !important;
  overflow: auto !important;
}
#menu-right::before {
  content: "";
  position: absolute;
  left: -25px;
  bottom: 34px;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid var(--ink);
  border-right: 28px solid var(--ink);
}
#menu-content { position: relative; z-index: 2; min-height: 68vh !important; }
#menu-keyart { opacity: .07 !important; filter: grayscale(1) contrast(1.2) !important; }
#menu-status {
  position: sticky !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 18px !important;
  color: var(--paper) !important;
  text-align: left !important;
  font: 700 11px var(--read) !important;
}
#menu-status > div {
  padding: 5px 9px !important;
  background: var(--ink) !important;
  border-radius: 8px 8px 8px 2px !important;
}
#menu-status b { color: var(--acid) !important; }
.pane-title {
  display: inline-block !important;
  margin: 0 0 22px !important;
  padding: 9px 16px 8px !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border-radius: 13px 13px 13px 3px !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.24) !important;
  transform: rotate(-1deg) !important;
  font-family: var(--display) !important;
  font-size: clamp(22px, 3vw, 42px) !important;
  line-height: .95 !important;
  letter-spacing: -1px !important;
}

/* gear */
#gear-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)) !important; gap: 14px !important; max-width: none !important; }
.gear-cell {
  min-height: 155px !important;
  aspect-ratio: auto !important;
  background: var(--paper-2) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 18px 18px 18px 5px !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.24) !important;
}
.gear-cell:nth-child(even) { background: var(--acid) !important; border-radius: 18px 18px 5px 18px !important; }
.gear-cell.filled:hover { transform: translateY(-5px) rotate(-.6deg) !important; box-shadow: 9px 11px 0 rgba(0,0,0,.30) !important; }
.gear-cell.selected { background: var(--network) !important; border-color: var(--ink) !important; box-shadow: 8px 8px 0 var(--olive) !important; }
.gear-cell .gl { bottom: 8px !important; color: var(--ink) !important; font: 700 11px var(--read) !important; }

/* archive / liner notes */
#arc-wrap { grid-template-columns: minmax(210px, 30%) 1fr !important; gap: 18px !important; }
#arc-list {
  padding: 12px !important;
  background: var(--olive) !important;
  border: 0 !important;
  border-radius: 18px 18px 18px 5px !important;
}
.arc-i {
  margin: 0 0 6px !important;
  padding: 9px 10px !important;
  color: var(--paper) !important;
  background: rgba(255,255,255,.06) !important;
  border: 0 !important;
  border-radius: 9px 9px 9px 2px !important;
  font: 600 13px var(--read) !important;
}
.arc-i:hover,
.arc-i.on { color: var(--ink) !important; background: var(--acid) !important; padding-left: 14px !important; }
.arc-i .new-mark { background: var(--alert) !important; color: var(--ink) !important; border-radius: 5px !important; font: 700 9px var(--read) !important; }
#arc-detail {
  min-height: 470px !important;
  padding: 20px !important;
  background: var(--paper-2) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 22px 22px 5px 22px !important;
}
#arc-detail h3 { color: var(--ink) !important; font-family: var(--display) !important; font-size: 27px !important; transform: none !important; }
#arc-detail img { max-width: 300px !important; border: 4px solid var(--ink) !important; border-radius: 14px 14px 14px 4px !important; }
#arc-detail .d { color: var(--ink) !important; font: 500 16px/1.5 var(--read) !important; }
.arc-meta { color: var(--olive) !important; font: 700 10px var(--read) !important; }
.arc-related button { background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; border-radius: 8px 8px 8px 2px !important; font: 700 10px var(--read) !important; }
.arc-related button:hover { background: var(--acid) !important; color: var(--ink) !important; }

/* evidence / conversation map */
#evidence-board {
  width: min(980px, 100%) !important;
  height: 590px !important;
  background: var(--olive) !important;
  border: 5px solid var(--ink) !important;
  border-radius: 26px 26px 8px 26px !important;
  box-shadow: 10px 10px 0 rgba(0,0,0,.28) !important;
}
#evidence-lines line { stroke: var(--acid) !important; stroke-width: 2.2 !important; stroke-dasharray: 0 !important; filter: none !important; }
.evidence-card {
  width: 150px !important;
  min-height: 94px !important;
  padding: 11px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 15px 15px 15px 4px !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.38) !important;
  transform: rotate(-.7deg) !important;
}
.evidence-card:nth-of-type(even) { background: var(--acid) !important; transform: rotate(.7deg) !important; }
.evidence-card::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: -12px;
  border-top: 13px solid var(--ink);
  border-left: 13px solid transparent;
}
.evidence-card.unlocked { border-color: var(--ink) !important; }
.evidence-card.locked { background: var(--ink-2) !important; color: var(--paper-2) !important; opacity: .55 !important; }
.evidence-card b { font: 14px/1.05 var(--ui) !important; }
.evidence-card span { color: inherit !important; font: 600 10px var(--read) !important; }
.evidence-legend { color: var(--ink-2) !important; font: 500 13px var(--read) !important; }

/* deck */
#deck .deck-shell {
  max-width: 650px !important;
  padding: 24px !important;
  color: var(--paper) !important;
  background: var(--olive) !important;
  border: 5px solid var(--ink) !important;
  border-radius: 26px 26px 7px 26px !important;
  box-shadow: 10px 10px 0 rgba(0,0,0,.28) !important;
  transform: none !important;
}
#deck .pbtn { background: var(--acid) !important; border: 4px solid var(--ink) !important; }
#deck .tinfo { font-family: var(--display) !important; color: var(--paper) !important; font-size: 26px !important; }

/* map */
#map-svg { max-width: 660px !important; background: var(--olive) !important; border: 5px solid var(--ink) !important; border-radius: 24px !important; padding: 16px !important; }
#map-svg .floor rect { fill: var(--paper) !important; stroke: var(--ink) !important; stroke-width: 3 !important; }
#map-svg .floor:nth-child(even) rect { fill: var(--paper-2) !important; }
#map-svg .floor text { fill: var(--ink) !important; font-family: var(--ui) !important; font-size: 14px !important; }
#map-svg .floor.here rect { fill: var(--acid) !important; }
#map-svg .floor .mk { fill: var(--alert) !important; }

/* ---------- SentNet browser: same brand, late-1999 interface ---------- */
#news-panel {
  inset: 3vh 3vw !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 6px solid var(--ink) !important;
  border-radius: 28px 28px 8px 28px !important;
  box-shadow: 16px 16px 0 rgba(0,0,0,.66) !important;
  overflow: hidden !important;
  font-family: var(--read) !important;
}
.browser-title {
  min-height: 42px !important;
  padding: 9px 13px !important;
  color: var(--ink) !important;
  background: var(--acid) !important;
  border-bottom: 5px solid var(--ink) !important;
  font: 16px var(--ui) !important;
}
.browser-x { background: var(--alert) !important; color: var(--ink) !important; border: 3px solid var(--ink) !important; border-radius: 8px !important; font-family: var(--ui) !important; }
.browser-menu,
.browser-tools { color: var(--paper) !important; background: var(--olive) !important; border-bottom-color: var(--ink) !important; font-family: var(--read) !important; }
.browser-tool { background: var(--paper) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 7px !important; font-family: var(--read) !important; }
.browser-address input { background: var(--paper) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; font-family: var(--read) !important; }
.portal-page { background: var(--paper) !important; color: var(--ink) !important; padding: 20px 24px 28px !important; }
.portal-logo {
  display: inline-block !important;
  padding: 11px 18px 9px !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border-radius: 16px 16px 16px 4px !important;
  font-family: var(--display) !important;
  font-size: 42px !important;
  line-height: .9 !important;
  letter-spacing: -2px !important;
}
.portal-logo small { color: var(--acid) !important; font: 700 11px var(--read) !important; letter-spacing: 1px !important; }
.portal-cats {
  margin: 12px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.portal-cats span { padding: 5px 9px !important; background: var(--acid) !important; color: var(--ink) !important; border-radius: 8px 8px 8px 2px !important; font: 700 10px var(--read) !important; }
.portal-search { padding: 12px !important; background: var(--paper-2) !important; border: 3px solid var(--ink) !important; border-radius: 15px 15px 4px 15px !important; }
.portal-search input { border: 2px solid var(--ink) !important; font-family: var(--read) !important; }
.portal-search button { padding: 6px 10px !important; background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; border-radius: 7px !important; font: 700 10px var(--read) !important; }
.portal-grid { gap: 16px !important; }
.portal-section,
.portal-side { padding: 16px !important; background: var(--paper-2) !important; border: 4px solid var(--ink) !important; border-radius: 18px 18px 5px 18px !important; }
.portal-section h2,
.portal-side h3 { color: var(--paper) !important; background: var(--olive) !important; border: 0 !important; border-radius: 9px 9px 9px 2px !important; padding: 7px 10px !important; font-family: var(--ui) !important; }
.headline { color: var(--ink) !important; text-decoration: none !important; border-bottom: 2px solid rgba(17,18,13,.18) !important; padding: 8px 4px !important; font: 700 13px var(--read) !important; }
.headline:hover { background: var(--acid) !important; }
.headline span { color: var(--ink-2) !important; font: 500 11px/1.35 var(--read) !important; }
.sentnet-row { padding: 8px 10px !important; color: var(--ink) !important; background: var(--paper) !important; border: 3px solid var(--ink) !important; border-radius: 9px 9px 9px 2px !important; font: 600 11px var(--read) !important; }
.sentnet-row:hover:not(.locked) { background: var(--acid) !important; }
.sentnet-row.locked { color: var(--paper-2) !important; background: var(--ink-2) !important; }
.sentnet-row.new { outline: 4px solid var(--alert) !important; }
#sentnet-detail { padding: 12px !important; background: var(--acid) !important; color: var(--ink) !important; border: 3px solid var(--ink) !important; border-radius: 12px 12px 4px 12px !important; font: 500 12px/1.4 var(--read) !important; }

/* ---------- modals / puzzles ---------- */
.modal-wireframe {
  color: var(--ink) !important;
  background: var(--paper) !important;
  background-image: none !important;
  border: 6px solid var(--ink) !important;
  border-radius: 28px 28px 7px 28px !important;
  box-shadow: 15px 15px 0 rgba(0,0,0,.62) !important;
  transform: translate(-50%,-50%) rotate(-.6deg) !important;
}
.modal-wireframe::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -24px;
  width: 0;
  height: 0;
  border-top: 26px solid var(--ink);
  border-left: 26px solid transparent;
}
.modal-header {
  display: inline-block !important;
  margin: 0 0 18px !important;
  padding: 9px 15px !important;
  color: var(--paper) !important;
  background: var(--olive) !important;
  border: 0 !important;
  border-radius: 12px 12px 12px 3px !important;
  font-family: var(--ui) !important;
}
.close-btn { color: var(--ink) !important; background: var(--acid) !important; border: 3px solid var(--ink) !important; border-radius: 8px !important; font: 700 10px var(--read) !important; }
.key-btn {
  color: var(--ink) !important;
  background: var(--paper-2) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 12px 12px 12px 3px !important;
  font-family: var(--display) !important;
  font-size: 27px !important;
}
.key-btn:hover { color: var(--ink) !important; background: var(--acid) !important; transform: translateY(-3px) !important; }
#keypad-display { color: var(--acid) !important; background: var(--olive) !important; border: 4px solid var(--ink) !important; border-radius: 12px !important; font-family: var(--read) !important; }
#lock-status { color: var(--alert) !important; font-family: var(--read) !important; }
#item-modal #modal-title { color: var(--paper) !important; background: var(--olive) !important; }
#modal-img { border-radius: 16px !important; }
#modal-desc,
#history-list { color: var(--ink) !important; font-family: var(--read) !important; }
.set-row { color: var(--ink) !important; font: 600 14px var(--read) !important; }
.set-row input[type="range"] { accent-color: var(--acid) !important; }
.set-row input[type="text"],
.set-row input[type="password"] { background: var(--paper-2) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 6px !important; padding: 6px !important; font-family: var(--read) !important; }

/* ---------- title / ending ---------- */
#start-overlay {
  background-color: var(--ink) !important;
}
#start-overlay::before {
  background:
    linear-gradient(to bottom, rgba(17,18,13,.12), rgba(17,18,13,.08) 45%, rgba(17,18,13,.86)),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(158,234,79,.035) 9px 10px) !important;
}
#start-tag {
  color: var(--ink) !important;
  background: var(--acid) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 12px 12px 4px 12px !important;
  transform: rotate(1deg) !important;
  font-family: var(--read) !important;
}
.eyebrow { color: var(--acid) !important; font: 700 12px var(--read) !important; letter-spacing: 3px !important; }
#start-inner h1 {
  max-width: 960px;
  margin: 0 auto 26px !important;
  color: var(--paper) !important;
  font-family: var(--display) !important;
  font-size: clamp(44px, 8vw, 92px) !important;
  line-height: .86 !important;
  letter-spacing: -4px !important;
  text-shadow: 8px 8px 0 var(--ink) !important;
  transform: none !important;
}
#start-inner h1 span { color: var(--acid) !important; }
.start-actions button {
  padding: 15px 30px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 5px solid var(--ink) !important;
  border-radius: 17px 17px 17px 4px !important;
  clip-path: none !important;
  box-shadow: 9px 9px 0 rgba(0,0,0,.6) !important;
  font-family: var(--ui) !important;
  font-size: 16px !important;
}
.start-actions button:nth-child(2) { background: var(--acid) !important; }
.start-actions button:nth-child(3) { background: var(--bronze) !important; }
.start-actions button:hover { color: var(--paper) !important; background: var(--alert) !important; transform: translateY(-4px) rotate(-.5deg) !important; }
#start-sub { color: var(--paper) !important; font: 600 14px var(--read) !important; }
#demo-end { background: rgba(17,18,13,.97) !important; }
#demo-end .kicker { color: var(--acid) !important; font: 700 12px var(--read) !important; }
#demo-end h1 { color: var(--paper) !important; font-family: var(--display) !important; transform: none !important; }
#demo-end .sub { color: var(--paper-2) !important; font: 500 16px/1.45 var(--read) !important; }
#demo-end .tbc { color: var(--acid) !important; font-family: var(--display) !important; letter-spacing: 2px !important; }
#ending-summary { gap: 9px !important; }
.ending-stat {
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 14px 14px 14px 4px !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.36) !important;
}
.ending-stat:nth-child(even) { background: var(--acid) !important; }
.ending-stat b { color: var(--olive) !important; font: 700 9px var(--read) !important; }
.ending-stat span { color: var(--ink) !important; font: 600 14px var(--read) !important; }

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  #speaker-stage .portrait.speaker { height: 76vh !important; }
  #stage .portrait.listener { height: 63vh !important; }
  #dialogue.speaker-left #dialogue-box { margin-left: 10vw !important; padding-left: 13vw !important; }
  #dialogue.speaker-right #dialogue-box { margin-right: 10vw !important; padding-right: 13vw !important; }
  #menu.open { grid-template-columns: minmax(280px, 38%) 1fr !important; }
  #gear-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)) !important; }
}
@media (max-width: 760px) {
  body::before { opacity: .045; }
  #speaker-stage .portrait.speaker { height: 64vh !important; bottom: -5vh !important; }
  #stage .portrait.listener { height: 52vh !important; bottom: -6vh !important; }
  #dialogue { padding: 0 2.5vw 1.6vh !important; }
  #dialogue-box,
  #dialogue.speaker-left #dialogue-box,
  #dialogue.speaker-right #dialogue-box { margin: 0 !important; padding: 25px 28px 45px !important; min-height: 116px !important; }
  #dialogue-text { font-size: 18px !important; }
  #speaker-chip { top: -20px !important; font-size: 14px !important; }
  #choices { width: 94vw !important; top: 12vh !important; right: 2vw !important; }
  .choice-btn { font-size: 15px !important; }
  #plate { transform: scale(.86) !important; transform-origin: top left !important; }
  #persistent-ui .shortcut-bubble:not(:first-child) { display: none !important; }
  #menu.open { grid-template-columns: 1fr !important; padding: 10px !important; overflow: auto !important; }
  #menu-left { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-content: start !important; }
  #menu-right { min-height: 78vh !important; padding: 25px 20px !important; }
  #gear-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)) !important; }
  #arc-wrap { grid-template-columns: 1fr !important; }
  #arc-list { max-height: 220px !important; }
  .portal-grid { grid-template-columns: 1fr !important; }
  #news-panel { inset: 1vh 1vw !important; }
  #evidence-board { height: 760px !important; }
  .evidence-card { width: 128px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-btn,
  .toast,
  .hotspot .disc,
  .menu-item { animation: none !important; transition: none !important; }
  .choice-btn { transform: none !important; }
}


/* ==========================================================
   V3 BUGFIX / POLISH PASS
   - dialogue in front of portraits
   - compact SVG dialogue bubbles with cleaner tails
   - centered choices that avoid portrait collisions
   - readable comms window for Sterling / Marcus radio calls
   - stronger CRT pass
   ========================================================== */
#stage{z-index:18 !important;}
#speaker-stage{z-index:22 !important;}
#dialogue{z-index:34 !important;padding:0 4vw 2.2vh !important;pointer-events:none !important;}
#dialogue *{pointer-events:auto;}
#dialogue-box,
#dialogue.speaker-left #dialogue-box,
#dialogue.speaker-right #dialogue-box,
#dialogue.system #dialogue-box{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  min-height:118px !important;
  width:min(860px,60vw) !important;
  margin:0 auto !important;
  padding:20px 170px 26px 28px !important;
  overflow:visible !important;
  position:relative !important;
}
#dialogue.speaker-left #dialogue-box{margin-left:4vw !important;margin-right:auto !important;}
#dialogue.speaker-right #dialogue-box{margin-right:4vw !important;margin-left:auto !important;}
#dialogue.system #dialogue-box,
#dialogue.comms #dialogue-box{
  width:min(920px,72vw) !important;
  margin:0 auto !important;
  padding:22px 34px 26px !important;
}
#dialogue-box::before,#dialogue-box::after,
#dialogue.speaker-left #dialogue-box::before,#dialogue.speaker-left #dialogue-box::after,
#dialogue.speaker-right #dialogue-box::before,#dialogue.speaker-right #dialogue-box::after,
#dialogue.system #dialogue-box::before,#dialogue.system #dialogue-box::after,
#dialogue.comms #dialogue-box::before,#dialogue.comms #dialogue-box::after,
.choice-btn::before,.choice-btn::after{content:none !important;display:none !important;}
#dialogue-shape{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;overflow:visible !important;pointer-events:none !important;z-index:0 !important;}
#dialogue-shape .bubble-path{display:none;stroke:#000;stroke-width:10;paint-order:stroke fill;vector-effect:non-scaling-stroke;filter:drop-shadow(14px 14px 0 rgba(0,0,0,.82));}
#dialogue.speaker-left .bubble-left{display:block;fill:var(--cyan);}
#dialogue.speaker-right .bubble-right{display:block;fill:var(--yellow);}
#dialogue.system .bubble-system{display:block;fill:var(--magenta);}
#dialogue.comms .bubble-system{display:block;fill:#010302;stroke:#94ff5d;stroke-width:8;filter:drop-shadow(0 0 18px rgba(148,255,93,.18)) drop-shadow(12px 12px 0 rgba(0,0,0,.86));}
#speaker-chip,
#dialogue.speaker-left #speaker-chip,
#dialogue.speaker-right #speaker-chip{
  top:-16px !important;left:24px !important;right:auto !important;z-index:5 !important;
  font-size:18px !important;padding:8px 16px 7px !important;border-width:3px !important;box-shadow:6px 6px 0 rgba(0,0,0,.42) !important;
}
#dialogue.speaker-right #speaker-chip{left:auto !important;right:24px !important;transform:skewX(11deg) rotate(2deg) !important;}
#dialogue.system #speaker-chip{top:-18px !important;left:50% !important;right:auto !important;transform:translateX(-50%) skewX(-8deg) !important;}
#dialogue.comms #speaker-chip{
  left:50% !important;right:auto !important;top:-18px !important;transform:translateX(-50%) skewX(-8deg) !important;
  background:#000 !important;color:#94ff5d !important;border-color:#94ff5d !important;box-shadow:none !important;
}
#dialogue-text,
#dialogue.speaker-left #dialogue-text,
#dialogue.speaker-right #dialogue-text{
  position:relative !important;z-index:3 !important;
  font-family:'IBM Plex Mono','VT323',monospace !important;
  font-size:22px !important;line-height:1.18 !important;font-weight:600 !important;
  color:#000 !important;letter-spacing:0 !important;
  padding:0 0 0 0 !important;margin:0 !important;
  white-space:pre-wrap !important;overflow-wrap:anywhere !important;
}
#dialogue.comms #dialogue-text{
  color:#94ff5d !important;font-family:'IBM Plex Mono','Share Tech Mono',monospace !important;
  font-size:24px !important;line-height:1.24 !important;text-shadow:0 0 10px rgba(148,255,93,.15) !important;
}
#dialogue.system #dialogue-text{font-size:22px !important;line-height:1.22 !important;}
#dlg-controls,
#dialogue.speaker-left #dlg-controls,
#dialogue.speaker-right #dlg-controls{right:20px !important;left:auto !important;bottom:12px !important;gap:8px !important;z-index:6 !important;}
#dialogue.system #dlg-controls,#dialogue.comms #dlg-controls{left:50% !important;right:auto !important;transform:translateX(-50%) !important;bottom:-18px !important;}
.dlg-ctl{font-size:11px !important;padding:6px 10px !important;}
#dialogue.comms .dlg-ctl{background:#000 !important;color:#94ff5d !important;border-color:#94ff5d !important;}
#continue-cue,
#dialogue.speaker-left #continue-cue,
#dialogue.speaker-right #continue-cue{right:18px !important;top:-18px !important;font-size:15px !important;padding:4px 10px !important;}
#dialogue.comms #continue-cue,#dialogue.system #continue-cue{left:50% !important;right:auto !important;transform:translateX(-50%) skewX(-10deg) !important;top:-18px !important;}
.genius-term{padding:1px 5px !important;border-radius:2px;}
/* choices centered and cleaned */
#choices{
  top:10vh !important;left:50% !important;right:auto !important;transform:translateX(-50%) !important;
  width:min(860px,62vw) !important;padding-right:0 !important;z-index:31 !important;
  display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:16px !important;
}
.choice-btn{
  width:100% !important;clip-path:none !important;border-radius:24px 24px 22px 8px !important;
  transform:translateX(120%) !important;padding:18px 26px 18px 72px !important;
  box-shadow:10px 10px 0 rgba(0,0,0,.85) !important;font-size:17px !important;line-height:1.12 !important;
  overflow:hidden !important;background:var(--paper) !important;color:#000 !important;
}
.choice-btn:nth-child(even){background:var(--yellow) !important;}
.choice-btn:nth-child(odd){background:var(--paper) !important;}
.choice-btn .choice-num{
  left:16px !important;width:36px !important;height:36px !important;font-size:24px !important;
  border-radius:14px !important;background:#000 !important;color:var(--yellow) !important;border-color:#000 !important;
}
.choice-btn:hover{background:#000 !important;color:#fff !important;border-color:#fff !important;transform:translateX(-10px) scale(1.015) !important;animation:none !important;}
.choice-btn:hover .choice-num{background:var(--yellow) !important;color:#000 !important;border-color:#000 !important;}
.choice-btn.ai-choice{border-left:5px solid var(--magenta) !important;}
/* stronger CRT */
:root{--crt-op:.38;}
#crt{
  z-index:40 !important;opacity:1 !important;mix-blend-mode:screen !important;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.48) 0px, rgba(0,0,0,.48) 1px, rgba(255,255,255,.035) 1px, rgba(255,255,255,.035) 2px, transparent 2px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,0,60,.038) 0px, rgba(255,0,60,.038) 1px, rgba(0,255,255,.025) 1px, rgba(0,255,255,.025) 2px, rgba(20,20,255,.038) 2px, rgba(20,20,255,.038) 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
  background-size:100% 4px, 3px 100%, 180px 180px !important;
  animation:crtflick .085s steps(2) infinite, grainshift 1.15s steps(6) infinite !important;
}
#crt::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom, transparent 0%, transparent 42%, rgba(255,255,255,.06) 47%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 53%, transparent 58%, transparent 100%);mix-blend-mode:screen;opacity:.7;animation:crtSweep 6s linear infinite;}
#crt::after{background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.52) 100%), linear-gradient(90deg, rgba(255,0,60,.08), transparent 12%, transparent 88%, rgba(0,150,255,.09));box-shadow:inset 0 0 160px rgba(0,0,0,.58);}
@keyframes crtSweep{0%{transform:translateY(-110%);}100%{transform:translateY(110%);}}
@media(max-width:1180px){
  #dialogue-box,#dialogue.speaker-left #dialogue-box,#dialogue.speaker-right #dialogue-box{width:min(880px,72vw) !important;padding:20px 148px 24px 24px !important;}
  #dialogue-text{font-size:20px !important;}
  #choices{width:min(760px,72vw) !important;top:11vh !important;}
}
@media(max-width:760px){
  #dialogue{padding:0 3vw 1.2vh !important;}
  #dialogue-box,#dialogue.speaker-left #dialogue-box,#dialogue.speaker-right #dialogue-box{width:92vw !important;margin:0 auto !important;padding:16px 24px 54px !important;}
  #dialogue-text,#dialogue.comms #dialogue-text{font-size:18px !important;line-height:1.2 !important;}
  #dlg-controls,#dialogue.speaker-left #dlg-controls,#dialogue.speaker-right #dlg-controls{left:50% !important;right:auto !important;transform:translateX(-50%) !important;bottom:-14px !important;}
  #choices{width:94vw !important;top:13vh !important;}
  .choice-btn{font-size:15px !important;padding:16px 18px 16px 64px !important;}
}


/* ==========================================================
   V4 REGRESSION FIX — preserve the Broadcast layout and only
   correct layering, title art, CRT treatment and choice entry.
   ========================================================== */

/* Restore the intended splash composition. */
#start-overlay{
  background:#050708 url('assets/runtime/intro-splash.png') center center / cover no-repeat !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:6vh 5vw !important;
}
#start-overlay::before{
  background:
    linear-gradient(90deg,rgba(3,5,7,.90) 0%,rgba(3,5,7,.64) 31%,rgba(3,5,7,.16) 61%,rgba(3,5,7,.35) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.10) 52%,rgba(0,0,0,.78)) !important;
}
#start-inner{
  width:min(650px,48vw) !important;
  margin:0 !important;
  text-align:left !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:12px !important;
}
#title-stack{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  width:min(620px,46vw) !important;
  margin:0 0 18px !important;
  font-family:var(--display) !important;
  line-height:.72 !important;
  text-transform:uppercase !important;
  filter:drop-shadow(10px 12px 0 rgba(0,0,0,.72)) !important;
}
#title-stack span{
  display:block !important;
  color:var(--paper) !important;
  -webkit-text-stroke:3px var(--ink) !important;
  paint-order:stroke fill !important;
  letter-spacing:-.06em !important;
  white-space:nowrap !important;
}
#title-stack .title-one{
  font-size:clamp(72px,10vw,150px) !important;
  transform:translateX(0) rotate(-2deg) !important;
}
#title-stack .title-nine-a{
  font-size:clamp(62px,8.8vw,132px) !important;
  color:var(--acid) !important;
  transform:translateX(1.1em) rotate(1.2deg) !important;
}
#title-stack .title-nine-b{
  font-size:clamp(80px,10.7vw,158px) !important;
  transform:translateX(.28em) rotate(-1deg) !important;
}
#title-stack .title-nine-c{
  font-size:clamp(58px,8.1vw,122px) !important;
  color:var(--acid) !important;
  transform:translateX(1.8em) rotate(1.8deg) !important;
}
#start-tag{left:auto !important;right:4vw !important;top:4vh !important;}
.start-actions{justify-content:flex-start !important;}
#start-sub{left:5vw !important;right:auto !important;text-align:left !important;}

/* Put dialogue in front without changing the successful V2 geometry. */
#stage{z-index:18 !important;}
#speaker-stage{z-index:22 !important;}
#dialogue{
  z-index:34 !important;
  padding:0 2vw 2.2vh !important;
  pointer-events:none !important;
}
#dialogue *{pointer-events:auto;}
#dialogue-box,
#dialogue.speaker-left #dialogue-box,
#dialogue.speaker-right #dialogue-box{
  width:auto !important;
  max-width:none !important;
  min-height:100px !important;
  margin:0 !important;
  padding:28px 170px 30px 46px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#dialogue.speaker-left #dialogue-box{
  margin-left:13vw !important;
  margin-right:1.5vw !important;
  padding-left:11vw !important;
  padding-right:170px !important;
}
#dialogue.speaker-right #dialogue-box{
  margin-left:1.5vw !important;
  margin-right:13vw !important;
  padding-left:64px !important;
  padding-right:11vw !important;
}
#dialogue.system #dialogue-box,
#dialogue.comms #dialogue-box{
  width:min(1080px,88vw) !important;
  margin:0 auto !important;
  padding:24px 46px 28px !important;
}
#dialogue-shape{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
  z-index:0 !important;
  pointer-events:none !important;
}
#dialogue-shape .bubble-path{
  display:none !important;
  stroke:#000 !important;
  stroke-width:10 !important;
  vector-effect:non-scaling-stroke !important;
  paint-order:stroke fill !important;
  filter:drop-shadow(13px 13px 0 rgba(0,0,0,.78)) !important;
}
#dialogue.speaker-left .bubble-left{display:block !important;fill:var(--cyan) !important;}
#dialogue.speaker-right .bubble-right{display:block !important;fill:var(--yellow) !important;}
#dialogue.system .bubble-system{display:block !important;fill:var(--olive) !important;}
#dialogue.comms .bubble-system{
  display:block !important;
  fill:#020402 !important;
  stroke:#95ff5e !important;
  stroke-width:8 !important;
  filter:drop-shadow(0 0 16px rgba(149,255,94,.16)) drop-shadow(13px 13px 0 rgba(0,0,0,.82)) !important;
}
#dialogue-box::before,#dialogue-box::after,
#dialogue.speaker-left #dialogue-box::before,#dialogue.speaker-left #dialogue-box::after,
#dialogue.speaker-right #dialogue-box::before,#dialogue.speaker-right #dialogue-box::after,
#dialogue.system #dialogue-box::before,#dialogue.system #dialogue-box::after,
#dialogue.comms #dialogue-box::before,#dialogue.comms #dialogue-box::after{content:none !important;display:none !important;}
#speaker-chip,
#dialogue.speaker-left #speaker-chip,
#dialogue.speaker-right #speaker-chip{
  top:-24px !important;
  left:28px !important;
  right:auto !important;
  font-size:18px !important;
  padding:9px 20px 8px !important;
}
#dialogue.speaker-right #speaker-chip{left:28px !important;right:auto !important;transform:rotate(-1.5deg) !important;}
#dialogue.comms #speaker-chip,#dialogue.system #speaker-chip{
  left:50% !important;right:auto !important;top:-20px !important;
  transform:translateX(-50%) rotate(-1deg) !important;
}
#dialogue.comms #speaker-chip{background:#000 !important;color:#95ff5e !important;border:2px solid #95ff5e !important;}
#dialogue-text,
#dialogue.speaker-left #dialogue-text,
#dialogue.speaker-right #dialogue-text{
  font-family:var(--read) !important;
  font-size:clamp(21px,1.8vw,28px) !important;
  line-height:1.25 !important;
  font-weight:600 !important;
  padding:0 !important;
  color:var(--ink) !important;
}
#dialogue.comms #dialogue-text{color:#95ff5e !important;font-size:clamp(20px,1.65vw,25px) !important;line-height:1.3 !important;}
#dialogue.system #dialogue-text{color:var(--paper) !important;}
#dlg-controls,#dialogue.speaker-left #dlg-controls,#dialogue.speaker-right #dlg-controls{
  right:24px !important;left:auto !important;bottom:13px !important;transform:none !important;
}
#dialogue.comms #dlg-controls,#dialogue.system #dlg-controls{left:50% !important;right:auto !important;bottom:-16px !important;transform:translateX(-50%) !important;}
#continue-cue,#dialogue.speaker-left #continue-cue,#dialogue.speaker-right #continue-cue{
  top:-17px !important;right:26px !important;left:auto !important;transform:rotate(1deg) !important;
}

/* Choices appear in place; no off-screen travel or snap-to-center flash. */
#choices{
  top:10vh !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(820px,62vw) !important;
  padding:0 !important;
  gap:13px !important;
}
.choice-btn,
.choice-btn:nth-child(2n),
.choice-btn:nth-child(3n),
.choice-btn.entered,
.choice-btn.entered:nth-child(2n),
.choice-btn.entered:nth-child(3n){
  transform:none !important;
  animation:choiceReveal .16s ease-out both !important;
}
.choice-btn:nth-child(2){animation-delay:.035s !important;}
.choice-btn:nth-child(3){animation-delay:.07s !important;}
.choice-btn:nth-child(4){animation-delay:.105s !important;}
@keyframes choiceReveal{from{opacity:0;transform:translateY(8px) scale(.992);}to{opacity:1;transform:none;}}
.choice-btn:hover,.choice-btn.entered:hover{
  animation:none !important;
  transform:translateY(-3px) scale(1.012) !important;
}

/* Darker edge falloff plus visible CRT raster / phosphor texture. */
body::after{
  z-index:198 !important;
  border:0 !important;
  background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.20) 70%,rgba(0,0,0,.62) 100%) !important;
  box-shadow:inset 0 0 150px rgba(0,0,0,.52) !important;
}
#bg-image{filter:contrast(1.08) saturate(.94) brightness(.84) !important;}
#crt{
  z-index:199 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.43) 0 1px,rgba(255,255,255,.025) 1px 2px,transparent 2px 4px),
    repeating-linear-gradient(90deg,rgba(255,35,40,.028) 0 1px,rgba(40,255,170,.018) 1px 2px,rgba(30,80,255,.032) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E") !important;
  background-size:100% 4px,3px 100%,160px 160px !important;
  animation:crtV4Flick .11s steps(2) infinite,grainshift 1.3s steps(5) infinite !important;
}
#crt::before{
  content:"" !important;position:absolute !important;inset:-20% 0 !important;
  background:linear-gradient(to bottom,transparent 0 43%,rgba(210,240,255,.04) 47%,rgba(210,240,255,.11) 50%,rgba(210,240,255,.04) 53%,transparent 58%) !important;
  animation:crtV4Sweep 7s linear infinite !important;opacity:.8 !important;
}
#crt::after{
  background:
    radial-gradient(ellipse at center,transparent 56%,rgba(0,0,0,.18) 74%,rgba(0,0,0,.62) 100%),
    linear-gradient(90deg,rgba(255,0,50,.055),transparent 10%,transparent 90%,rgba(0,140,255,.06)) !important;
  box-shadow:inset 0 0 150px rgba(0,0,0,.50) !important;
}
@keyframes crtV4Flick{0%{filter:brightness(.96)}50%{filter:brightness(1.04)}100%{filter:brightness(.99)}}
@keyframes crtV4Sweep{0%{transform:translateY(-70%)}100%{transform:translateY(70%)}}

@media(max-width:900px){
  #start-inner{width:64vw !important;}
  #title-stack{width:62vw !important;}
  #dialogue.speaker-left #dialogue-box{margin-left:10vw !important;padding-left:12vw !important;}
  #dialogue.speaker-right #dialogue-box{margin-right:10vw !important;padding-right:12vw !important;}
  #choices{width:78vw !important;}
}
@media(max-width:760px){
  #start-overlay{padding:8vh 5vw !important;}
  #start-inner,#title-stack{width:90vw !important;}
  #title-stack .title-one{font-size:22vw !important;}
  #title-stack .title-nine-a{font-size:19vw !important;}
  #title-stack .title-nine-b{font-size:23vw !important;}
  #title-stack .title-nine-c{font-size:18vw !important;}
  #dialogue-box,#dialogue.speaker-left #dialogue-box,#dialogue.speaker-right #dialogue-box{width:auto !important;margin-left:3vw !important;margin-right:3vw !important;padding:18px 24px 54px !important;}
  #choices{width:94vw !important;top:12vh !important;}
}

/* === v5 visual clarity pass === */
/* compact centered dialogue windows */
#dialogue{
  z-index:34 !important;
  padding:0 2vw 8vh !important;
}
#dialogue-box,
#dialogue.speaker-left #dialogue-box,
#dialogue.speaker-right #dialogue-box{
  width:min(760px,56vw) !important;
  max-width:min(760px,56vw) !important;
  min-height:84px !important;
  margin:0 auto !important;
  padding:18px 112px 20px 38px !important;
  border-radius:28px !important;
}
#dialogue.speaker-left #dialogue-box,
#dialogue.speaker-right #dialogue-box{
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:38px !important;
  padding-right:112px !important;
}
#dialogue.system #dialogue-box,
#dialogue.comms #dialogue-box{
  width:min(700px,52vw) !important;
  max-width:min(700px,52vw) !important;
  margin:0 auto !important;
  padding:18px 32px 20px !important;
}
#speaker-chip,
#dialogue.speaker-left #speaker-chip,
#dialogue.speaker-right #speaker-chip{
  top:-18px !important;
  left:24px !important;
  font-size:17px !important;
  padding:7px 16px 6px !important;
}
#dialogue-text,
#dialogue.speaker-left #dialogue-text,
#dialogue.speaker-right #dialogue-text{
  font-size:clamp(18px,1.45vw,24px) !important;
  line-height:1.22 !important;
  letter-spacing:.01em !important;
}
#dialogue.comms #dialogue-text{
  font-size:clamp(18px,1.35vw,23px) !important;
}
#dlg-controls,
#dialogue.speaker-left #dlg-controls,
#dialogue.speaker-right #dlg-controls{
  right:18px !important;
  bottom:10px !important;
}
#continue-cue,
#dialogue.speaker-left #continue-cue,
#dialogue.speaker-right #continue-cue{
  top:-12px !important;
  right:18px !important;
}

/* keep text readable on all choice cards */
#choices{
  width:min(860px,64vw) !important;
  top:12vh !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}
.choice-btn,
.choice-btn:nth-child(odd),
.choice-btn:nth-child(even),
.choice-btn:nth-child(2n),
.choice-btn:nth-child(3n),
.choice-btn.entered,
.choice-btn.entered:nth-child(2n),
.choice-btn.entered:nth-child(3n){
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  text-shadow:none !important;
  padding:16px 24px 16px 68px !important;
  font-size:clamp(17px,1.45vw,24px) !important;
  line-height:1.15 !important;
  min-height:68px !important;
}
.choice-btn *,
.choice-btn .choice-label,
.choice-btn .choice-copy,
.choice-btn .choice-title{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}
.choice-btn .choice-num{
  color:#d7ff6b !important;
  background:#111 !important;
}
.choice-btn:hover,
.choice-btn.entered:hover,
.choice-btn.selected,
.choice-btn.active{
  background:#111 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:#fff !important;
}
.choice-btn:hover *,
.choice-btn.entered:hover *,
.choice-btn.selected *,
.choice-btn.active *{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}
.choice-btn:hover .choice-num,
.choice-btn.entered:hover .choice-num,
.choice-btn.selected .choice-num,
.choice-btn.active .choice-num{
  background:#d7ff6b !important;
  color:#111 !important;
  border-color:#111 !important;
}

/* clearer brighter CRT, less murky */
body::after{
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 56%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.34) 100%) !important;
  box-shadow:inset 0 0 95px rgba(0,0,0,.26) !important;
}
#bg-image{
  filter:contrast(1.07) saturate(1.02) brightness(.94) !important;
}
#crt{
  opacity:.94 !important;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, rgba(255,255,255,.025) 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,40,70,.018) 0 1px, rgba(60,255,170,.012) 1px 2px, rgba(60,120,255,.02) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E") !important;
  background-size:100% 4px, 3px 100%, 180px 180px !important;
  animation:crtV5Flick .18s steps(2) infinite, grainshift 1.8s steps(4) infinite !important;
}
#crt::before{
  background:linear-gradient(to bottom, transparent 0 44%, rgba(235,245,255,.02) 47%, rgba(235,245,255,.08) 50%, rgba(235,245,255,.02) 53%, transparent 57%) !important;
  opacity:.58 !important;
  animation:crtV5Sweep 8.5s linear infinite !important;
}
#crt::after{
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.08) 80%, rgba(0,0,0,.24) 100%),
    linear-gradient(90deg, rgba(255,0,50,.032), transparent 13%, transparent 87%, rgba(0,140,255,.034)) !important;
  box-shadow:inset 0 0 80px rgba(0,0,0,.18) !important;
}
@keyframes crtV5Flick{0%{filter:brightness(.985) contrast(1.01)}50%{filter:brightness(1.02) contrast(1.02)}100%{filter:brightness(1) contrast(1.01)}}
@keyframes crtV5Sweep{0%{transform:translateY(-72%)}100%{transform:translateY(72%)}}

@media(max-width:1100px){
  #dialogue-box,
  #dialogue.speaker-left #dialogue-box,
  #dialogue.speaker-right #dialogue-box{
    width:min(720px,62vw) !important;
    max-width:min(720px,62vw) !important;
  }
  #choices{width:min(820px,72vw) !important;}
}
@media(max-width:760px){
  #dialogue{padding:0 3vw 5.2vh !important;}
  #dialogue-box,
  #dialogue.speaker-left #dialogue-box,
  #dialogue.speaker-right #dialogue-box{
    width:90vw !important;
    max-width:90vw !important;
    padding:16px 22px 48px !important;
  }
  #dialogue.system #dialogue-box,
  #dialogue.comms #dialogue-box{width:90vw !important;max-width:90vw !important;}
  #choices{width:92vw !important;top:12vh !important;}
  .choice-btn{font-size:15px !important;}
}


/* === v6 title, padding and blink-ready pass === */
/* Extra breathing room inside compact dialogue bubbles. */
#dialogue-box,
#dialogue.speaker-left #dialogue-box,
#dialogue.speaker-right #dialogue-box{
  padding:24px 126px 26px 52px !important;
  min-height:92px !important;
}
#dialogue.system #dialogue-box,
#dialogue.comms #dialogue-box{
  padding:24px 42px 26px !important;
}
#dialogue-text,
#dialogue.speaker-left #dialogue-text,
#dialogue.speaker-right #dialogue-text{
  padding-left:0 !important;
  padding-right:0 !important;
}
/* Only the primary title action pulses. New Game on first load, Continue when a save exists. */
.start-actions button.title-primary-pulse{
  animation:titlePrimaryPulse 1.05s steps(2,end) infinite !important;
  outline:3px solid var(--acid) !important;
  outline-offset:5px !important;
}
@keyframes titlePrimaryPulse{
  0%,100%{filter:brightness(1);transform:translateY(0) scale(1);box-shadow:10px 10px 0 #000;}
  50%{filter:brightness(1.38);transform:translateY(-3px) scale(1.025);box-shadow:14px 14px 0 #000,0 0 22px rgba(151,255,76,.5);}
}
body.reduce-motion .start-actions button.title-primary-pulse{animation:none !important;}
/* Optional closed-eye portrait overlay. It remains inactive until a character has a `blinks` asset map. */
.portrait{position:absolute !important;}
.portrait .portrait-base,
.portrait .portrait-blink{
  display:block !important;
  height:100% !important;
  width:auto !important;
  max-width:inherit !important;
  object-fit:contain !important;
  object-position:bottom center !important;
}
.portrait .portrait-blink{
  position:absolute !important;
  inset:0 auto auto 0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.portrait.flip .portrait-blink{transform:scaleX(-1) !important;}
.portrait .portrait-blink.is-blinking{opacity:1 !important;}
@media(max-width:760px){
  #dialogue-box,
  #dialogue.speaker-left #dialogue-box,
  #dialogue.speaker-right #dialogue-box{padding:20px 28px 52px !important;}
}

/* === v7 Bad-TV-lite / control / choice-color pass === */
/* Remove the heavy black outline from the title lettering. */
#title-stack span{
  -webkit-text-stroke:0 transparent !important;
  text-stroke:0 transparent !important;
  text-shadow:5px 6px 0 rgba(18,20,13,.34) !important;
}

/* Keep the compact bubble, but place the dialogue controls clearly below it. */
#dialogue{
  padding-bottom:10vh !important;
}
#dlg-controls,
#dialogue.speaker-left #dlg-controls,
#dialogue.speaker-right #dlg-controls,
#dialogue.system #dlg-controls,
#dialogue.comms #dlg-controls{
  left:auto !important;
  right:12px !important;
  bottom:-38px !important;
  transform:none !important;
  gap:9px !important;
  z-index:12 !important;
}
.dlg-ctl{
  border:2px solid #111 !important;
  color:#111 !important;
  background:var(--acid) !important;
  box-shadow:4px 4px 0 #111 !important;
  padding:7px 12px !important;
  font-size:12px !important;
  font-weight:900 !important;
  opacity:1 !important;
}
#ctl-skip{background:var(--network) !important;}
#ctl-auto{background:#ffd84a !important;}
.dlg-ctl:hover,.dlg-ctl:focus-visible,.dlg-ctl.on{
  color:#fff !important;
  background:var(--alert) !important;
  transform:translateY(-2px) !important;
}

/* Give options 3 and 4 distinct semantic color blocks. */
.choice-btn:nth-child(1){background:var(--paper) !important;}
.choice-btn:nth-child(2){background:var(--acid) !important;}
.choice-btn:nth-child(3){background:#55d8e3 !important;color:#111 !important;-webkit-text-fill-color:#111 !important;}
.choice-btn:nth-child(4){background:#ff6752 !important;color:#111 !important;-webkit-text-fill-color:#111 !important;}
.choice-btn:nth-child(3) *, .choice-btn:nth-child(4) *{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}
.choice-btn:nth-child(3):hover,.choice-btn:nth-child(4):hover,
.choice-btn:nth-child(3).selected,.choice-btn:nth-child(4).selected{
  background:#111 !important;color:#fff !important;-webkit-text-fill-color:#fff !important;
}

/*
  Bad-TV-inspired rendering: low-amplitude horizontal noise displacement,
  rare sync slips, a soft vertical roll band, scanlines and restrained RGB mask.
  Distortion is limited to scene imagery and portraits so dialogue stays legible.
*/
body.crt-on #bg-image{
  filter:contrast(1.07) saturate(1.02) brightness(.95) url(#bad-tv-lite) !important;
  transform:translate3d(var(--tv-shift,0px),var(--tv-roll,0px),0) scale(1.004) !important;
  transform-origin:center !important;
}
body.crt-on #stage,
body.crt-on #speaker-stage{
  filter:url(#bad-tv-lite) !important;
  transform:translate3d(var(--tv-shift,0px),var(--tv-roll,0px),0) scale(1.002) !important;
  transform-origin:center !important;
}
body.reduce-motion #bg-image,
body.reduce-motion #stage,
body.reduce-motion #speaker-stage,
body:not(.crt-on) #bg-image,
body:not(.crt-on) #stage,
body:not(.crt-on) #speaker-stage{
  transform:none !important;
}
body.reduce-motion #stage,body.reduce-motion #speaker-stage,
body:not(.crt-on) #stage,body:not(.crt-on) #speaker-stage{filter:none !important;}
body.reduce-motion #bg-image,body:not(.crt-on) #bg-image{
  filter:contrast(1.07) saturate(1.02) brightness(.95) !important;
}
#crt{
  opacity:.88 !important;
  mix-blend-mode:normal !important;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,rgba(255,255,255,.022) 1px 2px,transparent 2px 4px),
    repeating-linear-gradient(90deg,rgba(255,30,55,.014) 0 1px,rgba(30,255,160,.010) 1px 2px,rgba(40,90,255,.016) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E") !important;
  background-size:100% 4px,3px 100%,220px 220px !important;
  animation:badTvFlick .24s steps(2) infinite,badTvGrain 2.4s steps(5) infinite !important;
}
#crt::before{
  background:linear-gradient(to bottom,transparent 0 43%,rgba(225,242,255,.015) 47%,rgba(225,242,255,.075) 50%,rgba(225,242,255,.018) 53%,transparent 58%) !important;
  opacity:.46 !important;
  animation:badTvRoll 9.6s linear infinite !important;
}
#crt::after{
  background:
    radial-gradient(ellipse at center,transparent 61%,rgba(0,0,0,.065) 82%,rgba(0,0,0,.22) 100%),
    linear-gradient(90deg,rgba(255,0,55,.025),transparent 11%,transparent 89%,rgba(0,135,255,.027)) !important;
  box-shadow:inset 0 0 70px rgba(0,0,0,.16) !important;
}
body.tv-sync-burst #crt::before{
  opacity:.72 !important;
  filter:brightness(1.18) !important;
}
@keyframes badTvFlick{0%{filter:brightness(.99)}50%{filter:brightness(1.018)}100%{filter:brightness(1.002)}}
@keyframes badTvGrain{0%{background-position:0 0,0 0,0 0}50%{background-position:0 0,0 0,24px -16px}100%{background-position:0 0,0 0,-18px 22px}}
@keyframes badTvRoll{0%{transform:translateY(-72%)}100%{transform:translateY(72%)}}

@media(max-width:760px){
  #dialogue{padding-bottom:8.5vh !important;}
  #dlg-controls,#dialogue.speaker-left #dlg-controls,#dialogue.speaker-right #dlg-controls,
  #dialogue.system #dlg-controls,#dialogue.comms #dlg-controls{
    left:50% !important;right:auto !important;bottom:-38px !important;transform:translateX(-50%) !important;
  }
  .dlg-ctl{font-size:10px !important;padding:6px 9px !important;}
}


/* ==========================================================
   V8 THREE.JS BAD-TV EXPERIMENT + ASSET REFRESH
   ========================================================== */
#three-tv-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:#050607;
  transition:opacity .18s ease;
}
body.three-tv-ready #three-tv-canvas{opacity:1;}
body.three-tv-ready #bg-image,
body.three-tv-ready #stage,
body.three-tv-ready #speaker-stage{opacity:0 !important;}
body.three-tv-ready #crt{display:none !important;}
body.three-tv-ready #start-overlay{
  background:linear-gradient(90deg,rgba(2,4,5,.58),rgba(2,4,5,.12) 46%,rgba(2,4,5,.34)) !important;
}
/* Keep fallback SVG/CSS effect only when Three.js did not initialize. */
body.three-tv-ready.crt-off #three-tv-canvas{filter:none;}

/* Lock all answer colors after older nth-child rules. */
#choices .choice-btn:nth-child(1){background:var(--paper) !important;color:#111 !important;-webkit-text-fill-color:#111 !important;}
#choices .choice-btn:nth-child(2){background:var(--acid) !important;color:#111 !important;-webkit-text-fill-color:#111 !important;}
#choices .choice-btn:nth-child(3){background:#55d8e3 !important;color:#111 !important;-webkit-text-fill-color:#111 !important;}
#choices .choice-btn:nth-child(4){background:#ff6752 !important;color:#111 !important;-webkit-text-fill-color:#111 !important;}
#choices .choice-btn:nth-child(1) *,
#choices .choice-btn:nth-child(2) *,
#choices .choice-btn:nth-child(3) *,
#choices .choice-btn:nth-child(4) *{color:inherit !important;-webkit-text-fill-color:currentColor !important;}
#choices .choice-btn:hover,#choices .choice-btn.selected{background:#111 !important;color:#fff !important;-webkit-text-fill-color:#fff !important;}

/* Move HISTORY / SKIP / AUTO left without changing the dialogue geometry. */
#dlg-controls,
#dialogue.speaker-left #dlg-controls,
#dialogue.speaker-right #dlg-controls,
#dialogue.system #dlg-controls,
#dialogue.comms #dlg-controls{right:58px !important;}

@media(max-width:760px){
  #dlg-controls,#dialogue.speaker-left #dlg-controls,#dialogue.speaker-right #dlg-controls,
  #dialogue.system #dlg-controls,#dialogue.comms #dlg-controls{
    right:auto !important;
    left:46% !important;
    transform:translateX(-50%) !important;
  }
}

/* V8 Three layer integration safeguards */
body.three-tv-ready #bg-image,
body.three-tv-ready #stage,
body.three-tv-ready #speaker-stage{
  filter:none !important;
  transform:none !important;
}
body.menu-open #three-tv-canvas{filter:grayscale(1) brightness(.52);}
body.quick-use-open #three-tv-canvas{filter:brightness(.72) saturate(.82);}


/* ==========================================================
   V10 CONTENT / CRT / SENTNET CORRECTION PASS
   ========================================================== */

/* Choice markers: preserve readable numbers and make AI marker black. */
#choices .choice-btn.ai-choice{border-left-color:#111 !important;}
#choices .choice-btn .choice-num,
#choices .choice-btn:nth-child(1) .choice-num,
#choices .choice-btn:nth-child(2) .choice-num,
#choices .choice-btn:nth-child(3) .choice-num,
#choices .choice-btn:nth-child(4) .choice-num{
  background:#111 !important;
  color:var(--acid-hi) !important;
  -webkit-text-fill-color:var(--acid-hi) !important;
  border-color:#111 !important;
  text-shadow:none !important;
}
#choices .choice-btn:hover .choice-num,
#choices .choice-btn.selected .choice-num,
#choices .choice-btn.active .choice-num{
  background:var(--acid-hi) !important;
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

/* SentNet gets a separate late-90s Internet Explorer / Windows palette. */
#news-panel{
  background:#c0c0c0 !important;
  color:#000 !important;
  border:3px outset #e8e8e8 !important;
  border-radius:0 !important;
  box-shadow:10px 10px 0 rgba(0,0,0,.55) !important;
}
#news-panel .browser-title{
  background:linear-gradient(90deg,#000080 0%,#0a4ca4 55%,#1084d0 100%) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  padding:5px 6px !important;
}
#news-panel .browser-x,
#news-panel .browser-tool,
#news-panel .portal-search button{
  background:#c0c0c0 !important;
  color:#000 !important;
  border:2px outset #fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
}
#news-panel .browser-x:active,
#news-panel .browser-tool:active,
#news-panel .portal-search button:active{border-style:inset !important;}
#news-panel .browser-menu,
#news-panel .browser-tools{
  background:#c0c0c0 !important;
  color:#000 !important;
  border-bottom:1px solid #808080 !important;
  font-family:Arial,Helvetica,sans-serif !important;
}
#news-panel .browser-address{color:#000 !important;}
#news-panel .browser-address input,
#news-panel .portal-search input{
  background:#fff !important;
  color:#000 !important;
  border:2px inset #fff !important;
  border-radius:0 !important;
  font-family:'Courier New',monospace !important;
}
#news-panel .portal-page{
  background:#fff !important;
  color:#000 !important;
  border:2px inset #ddd !important;
  font-family:Arial,Helvetica,sans-serif !important;
}
#news-panel .portal-logo{color:#000080 !important;text-shadow:none !important;}
#news-panel .portal-logo small{color:#666 !important;}
#news-panel .portal-cats{background:#e6e6e6 !important;border:1px solid #808080 !important;color:#000080 !important;}
#news-panel .portal-section h2,
#news-panel .portal-side h3{background:#000080 !important;color:#fff !important;border-radius:0 !important;border:0 !important;}
#news-panel a,
#news-panel .headline{color:#0000ee !important;text-decoration:underline !important;background:#fff !important;border:0 !important;border-radius:0 !important;}
#news-panel a:visited{color:#551a8b !important;}
#news-panel .headline span{color:#333 !important;text-decoration:none !important;}
#news-panel .sentnet-row{
  background:#c0c0c0 !important;
  color:#000080 !important;
  border:2px outset #fff !important;
  border-radius:0 !important;
  font:12px Arial,Helvetica,sans-serif !important;
  text-align:left !important;
}
#news-panel .sentnet-row:hover:not(.locked){background:#000080 !important;color:#fff !important;}
#news-panel .sentnet-row.locked{background:#d4d0c8 !important;color:#808080 !important;}
#news-panel #sentnet-detail{
  background:#fff !important;
  color:#000 !important;
  border:2px inset #fff !important;
  border-radius:0 !important;
  font:12px/1.35 Arial,Helvetica,sans-serif !important;
}
#news-panel .portal-disclaimer{background:#c0c0c0 !important;color:#333 !important;border-top:1px solid #808080 !important;}

/* Stronger but stable CRT: no sync slips, intensity slider controls both layers. */
body.three-tv-ready #crt{display:block !important;}
#crt{
  display:block;
  z-index:3 !important;
  opacity:calc(.38 + var(--crt-strength, .233) * .52) !important;
  mix-blend-mode:multiply !important;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,calc(.14 + var(--crt-strength,.233) * .23)) 0 1px,
      rgba(255,255,255,.025) 1px 2px,
      transparent 2px 4px),
    repeating-linear-gradient(90deg,
      rgba(255,20,45,.025) 0 1px,
      rgba(20,255,150,.018) 1px 2px,
      rgba(30,85,255,.026) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E") !important;
  background-size:100% 4px,3px 100%,128px 128px !important;
  animation:crtStableFlick .22s steps(2) infinite,crtStableGrain .48s steps(3) infinite !important;
}
#crt::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(to bottom,rgba(255,255,255,.018),transparent 12%,transparent 88%,rgba(0,0,0,.05)) !important;
  opacity:calc(.25 + var(--crt-strength,.233) * .35) !important;
  animation:none !important;
  transform:none !important;
}
#crt::after{
  background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.08) 82%,rgba(0,0,0,.26) 100%) !important;
  box-shadow:inset 0 0 calc(45px + var(--crt-strength,.233) * 70px) rgba(0,0,0,.18) !important;
}
body.tv-sync-burst #crt::before{opacity:inherit !important;filter:none !important;}
@keyframes crtStableFlick{0%{filter:brightness(.99)}50%{filter:brightness(1.012)}100%{filter:brightness(1.001)}}
@keyframes crtStableGrain{0%{background-position:0 0,0 0,0 0}33%{background-position:0 0,0 0,17px -9px}66%{background-position:0 0,0 0,-11px 13px}100%{background-position:0 0,0 0,7px 5px}}


/* ==========================================================
   V11 — notification-only archive/gear interactions +
   complete Windows 98 / Internet Explorer SentNet skin
   ========================================================== */
#item-modal{display:none!important;}

/* Entire browser window uses Windows/IE system chrome. */
#news-panel{
  background:#c0c0c0!important;
  color:#000!important;
  border:3px outset #f4f4f4!important;
  border-radius:0!important;
  box-shadow:8px 8px 0 rgba(0,0,0,.48)!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
#news-panel .browser-title{
  min-height:28px!important;
  padding:4px 6px!important;
  background:linear-gradient(90deg,#000080 0%,#0b4ea2 62%,#1084d0 100%)!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  font:700 13px Arial,Helvetica,sans-serif!important;
}
#news-panel .browser-x{
  min-width:24px!important;
  height:22px!important;
  padding:0 5px!important;
  background:#c0c0c0!important;
  color:#000!important;
  border:2px outset #fff!important;
  border-radius:0!important;
  box-shadow:none!important;
  font:700 12px Arial,Helvetica,sans-serif!important;
}
#news-panel .browser-x:active{border-style:inset!important;}
#news-panel .browser-menu{
  padding:4px 7px!important;
  background:#c0c0c0!important;
  color:#000!important;
  border:0!important;
  border-bottom:1px solid #808080!important;
  font:12px Arial,Helvetica,sans-serif!important;
}
#news-panel .browser-tools{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:4px 6px!important;
  background:#c0c0c0!important;
  color:#000!important;
  border:0!important;
  border-top:1px solid #fff!important;
  border-bottom:1px solid #808080!important;
  font:12px Arial,Helvetica,sans-serif!important;
}
#news-panel .browser-tool,
#news-panel .portal-search button{
  padding:3px 9px!important;
  background:#c0c0c0!important;
  color:#000!important;
  border:2px outset #fff!important;
  border-radius:0!important;
  box-shadow:none!important;
  font:12px Arial,Helvetica,sans-serif!important;
}
#news-panel .browser-tool:active,
#news-panel .portal-search button:active{border-style:inset!important;}
#news-panel .browser-address{
  flex:1!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  color:#000!important;
  font:12px Arial,Helvetica,sans-serif!important;
}
#news-panel .browser-address input,
#news-panel .portal-search input{
  background:#fff!important;
  color:#000!important;
  border:2px inset #fff!important;
  border-radius:0!important;
  box-shadow:none!important;
  font:12px 'Courier New',monospace!important;
}
#news-panel .portal-page{
  background:#fff!important;
  color:#000!important;
  border:2px inset #ddd!important;
  padding:16px 18px 18px!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
/* Logo is blue on a light Windows surface, never blue on black. */
#news-panel .portal-logo{
  display:inline-flex!important;
  align-items:flex-end!important;
  gap:8px!important;
  padding:8px 12px!important;
  background:#fff!important;
  color:#000080!important;
  border:1px solid #808080!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-family:Arial Black,Arial,Helvetica,sans-serif!important;
  font-size:38px!important;
  font-style:italic!important;
  line-height:1!important;
  letter-spacing:-2px!important;
}
#news-panel .portal-logo small{
  color:#555!important;
  font:11px Arial,Helvetica,sans-serif!important;
  font-style:normal!important;
  letter-spacing:.5px!important;
}
#news-panel .portal-cats{
  margin:10px 0!important;
  padding:5px!important;
  background:#c0c0c0!important;
  color:#000!important;
  border:2px inset #fff!important;
  border-radius:0!important;
  gap:5px!important;
}
#news-panel .portal-cats span{
  display:inline-block!important;
  padding:3px 9px!important;
  background:#c0c0c0!important;
  color:#000080!important;
  border:2px outset #fff!important;
  border-radius:0!important;
  text-decoration:underline!important;
  font:700 11px 'Times New Roman',serif!important;
}
#news-panel .portal-search{
  padding:7px!important;
  background:#c0c0c0!important;
  color:#000!important;
  border:2px outset #fff!important;
  border-radius:0!important;
}
#news-panel .portal-grid{gap:12px!important;}
#news-panel .portal-section,
#news-panel .portal-side{
  padding:12px!important;
  background:#e6e2d8!important;
  color:#000!important;
  border:2px outset #fff!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#news-panel .portal-section h2,
#news-panel .portal-side h3{
  margin:0 0 8px!important;
  padding:5px 8px!important;
  background:#000080!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  font:700 13px Arial,Helvetica,sans-serif!important;
}
#news-panel a,
#news-panel .headline{
  display:block!important;
  padding:7px 5px!important;
  background:#fff!important;
  color:#0000ee!important;
  border:0!important;
  border-bottom:1px solid #d0d0d0!important;
  border-radius:0!important;
  text-decoration:underline!important;
  font:700 13px 'Times New Roman',serif!important;
}
#news-panel a:hover,
#news-panel .headline:hover{
  background:#ffffcc!important;
  color:#0000ee!important;
}
#news-panel a:visited{color:#551a8b!important;}
#news-panel .headline span{
  display:block!important;
  margin-top:2px!important;
  color:#222!important;
  background:transparent!important;
  text-decoration:none!important;
  font:11px/1.25 'Courier New',monospace!important;
}
#news-panel .portal-side ul{
  color:#000!important;
  font:12px/1.35 Arial,Helvetica,sans-serif!important;
}
#news-panel .sentnet-row{
  width:auto!important;
  max-width:100%!important;
  padding:5px 9px!important;
  margin:0 0 5px!important;
  background:#c0c0c0!important;
  color:#000!important;
  border:2px outset #fff!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:left!important;
  text-decoration:none!important;
  font:12px Arial,Helvetica,sans-serif!important;
}
#news-panel .sentnet-row:hover:not(.locked),
#news-panel .sentnet-row:focus-visible:not(.locked){
  background:#000080!important;
  color:#fff!important;
  outline:1px dotted #fff!important;
  outline-offset:-4px!important;
}
#news-panel .sentnet-row.locked{
  background:#d4d0c8!important;
  color:#6f6f6f!important;
  border:2px outset #fff!important;
}
#news-panel .sentnet-row.new{outline:2px solid #000080!important;}
#news-panel #sentnet-detail{
  min-height:54px!important;
  margin-top:8px!important;
  padding:8px!important;
  background:#fff!important;
  color:#000!important;
  border:2px inset #fff!important;
  border-radius:0!important;
  box-shadow:none!important;
  font:12px/1.35 Arial,Helvetica,sans-serif!important;
}
#news-panel #sentnet-detail b{color:#000080!important;}
#news-panel .portal-disclaimer{
  margin-top:10px!important;
  padding:5px 7px!important;
  background:#c0c0c0!important;
  color:#333!important;
  border:2px inset #fff!important;
  font:11px Arial,Helvetica,sans-serif!important;
}

/* ==========================================================
   V12 — FLAT-SCREEN HYBRID CRT PASS
   Three.js distorts only the environmental image. Portraits,
   dialogue, and controls remain DOM layers. No curvature.
   ========================================================== */

/* Explicitly remove any screen-bow or shell curvature. */
html,body,#scene-layer,#three-tv-canvas,#crt{
  border-radius:0 !important;
}
#scene-layer,#three-tv-canvas,#crt{
  transform:none !important;
}

/* Three.js replaces only the environmental image. Portraits and UI stay crisp. */
body.three-tv-ready #bg-image{opacity:0 !important;}
body.three-tv-ready #stage,
body.three-tv-ready #speaker-stage{
  opacity:1 !important;
  visibility:visible !important;
}
#three-tv-canvas{
  z-index:1 !important;
  filter:none !important;
}

/* Keep fallback imagery bright enough for the raster to read as light, not mud. */
#bg-image{
  filter:contrast(1.07) saturate(1.04) brightness(.98) !important;
}
body::after{
  z-index:198 !important;
  background:radial-gradient(ellipse at center,
    transparent 57%,
    rgba(0,0,0,.035) 74%,
    rgba(0,0,0,.16) 91%,
    rgba(0,0,0,.27) 100%) !important;
  box-shadow:inset 0 0 70px rgba(0,0,0,.12) !important;
  border-radius:0 !important;
}

/* Shared raster layer over scene, portraits, and interface. */
body.three-tv-ready #crt,
#crt{
  display:block !important;
  z-index:199 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  border-radius:0 !important;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,calc(.010 + var(--crt-strength,.233) * .016)) 0 1px,
      rgba(0,0,0,calc(.055 + var(--crt-strength,.233) * .125)) 1px 2px,
      transparent 2px 4px),
    repeating-linear-gradient(to right,
      rgba(255,24,50,calc(.006 + var(--crt-strength,.233) * .017)) 0 1px,
      rgba(35,255,155,calc(.004 + var(--crt-strength,.233) * .012)) 1px 2px,
      rgba(35,95,255,calc(.006 + var(--crt-strength,.233) * .018)) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E") !important;
  background-size:100% 4px,3px 100%,128px 128px !important;
  background-blend-mode:normal,screen,soft-light !important;
  animation:crtV12Flick .19s steps(2,end) infinite,crtV12Grain .24s steps(2,end) infinite !important;
}

/* Slow brightness roll. It changes luminance only; it never bends or jumps the image. */
#crt::before{
  content:"" !important;
  position:absolute !important;
  inset:-24% 0 !important;
  pointer-events:none !important;
  background:linear-gradient(to bottom,
    transparent 0 42%,
    rgba(222,244,255,0) 45%,
    rgba(222,244,255,calc(.018 + var(--crt-strength,.233) * .038)) 49%,
    rgba(255,255,255,calc(.026 + var(--crt-strength,.233) * .050)) 50%,
    rgba(222,244,255,calc(.014 + var(--crt-strength,.233) * .030)) 51%,
    transparent 56% 100%) !important;
  opacity:1 !important;
  filter:none !important;
  transform:translateY(-62%) !important;
  animation:crtV12Roll 9.5s linear infinite !important;
  mix-blend-mode:screen !important;
}

/* Mild flat vignette and glass luminance, without bowed corners. */
#crt::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(to bottom,rgba(255,255,255,.012),transparent 12%,transparent 88%,rgba(0,0,0,.035)),
    radial-gradient(ellipse at center,
      transparent 62%,
      rgba(0,0,0,.025) 78%,
      rgba(0,0,0,calc(.095 + var(--crt-strength,.233) * .11)) 100%) !important;
  box-shadow:inset 0 0 calc(24px + var(--crt-strength,.233) * 42px) rgba(0,0,0,.10) !important;
  border-radius:0 !important;
}

body.tv-sync-burst #crt,
body.tv-sync-burst #crt::before,
body.tv-sync-burst #crt::after{
  transform:none !important;
  filter:none !important;
}

@keyframes crtV12Flick{
  0%{filter:brightness(.994) contrast(1.004)}
  50%{filter:brightness(1.008) contrast(1.009)}
  100%{filter:brightness(1.001) contrast(1.005)}
}
@keyframes crtV12Grain{
  0%{background-position:0 0,0 0,0 0}
  25%{background-position:0 0,0 0,19px -11px}
  50%{background-position:0 0,0 0,-13px 17px}
  75%{background-position:0 0,0 0,7px 23px}
  100%{background-position:0 0,0 0,-21px -7px}
}
@keyframes crtV12Roll{
  from{transform:translateY(-62%)}
  to{transform:translateY(62%)}
}

body.crt-off #crt{display:none !important;}
body.crt-off #three-tv-canvas{filter:none !important;}
body.reduce-motion #crt{
  animation:none !important;
}
body.reduce-motion #crt::before{
  animation:none !important;
  transform:none !important;
  opacity:.25 !important;
}

/* ==========================================================
   V13 — THREE.JS INTEGRATION / FULL-SCREEN RASTER PATCH
   WebGL processes the environmental image only. Portraits and
   DOM UI remain independent, while a restrained shared raster
   sits above the complete game presentation.
   ========================================================== */

/* Never pass portrait layers through the SVG displacement filter. */
body.crt-on #stage,
body.crt-on #speaker-stage,
body.three-tv-ready #stage,
body.three-tv-ready #speaker-stage{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
}

/* The SVG displacement is fallback-only and affects the environment, not portraits. */
body.crt-on:not(.three-tv-ready) #bg-image{
  filter:contrast(1.07) saturate(1.02) brightness(.98) url(#bad-tv-lite) !important;
  transform:scale(1.002) !important;
}
body.three-tv-ready #bg-image{
  opacity:0 !important;
  filter:none !important;
  transform:none !important;
}
body:not(.crt-on) #bg-image,
body.reduce-motion #bg-image{
  filter:contrast(1.07) saturate(1.02) brightness(.98) !important;
  transform:none !important;
}

/* Shader remains below every gameplay layer. */
#three-tv-canvas{
  z-index:1 !important;
  opacity:0;
  pointer-events:none !important;
  filter:none !important;
}
body.three-tv-ready #three-tv-canvas{opacity:1 !important;}

/* Shared glass/raster treatment covers portraits, UI, menus, and notifications. */
body.three-tv-ready #crt,
#crt{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:999 !important;
  pointer-events:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  transform:none !important;
  filter:none !important;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,calc(.006 + var(--crt-strength,.233) * .010)) 0 1px,
      rgba(0,0,0,calc(.052 + var(--crt-strength,.233) * .105)) 1px 2px,
      transparent 2px 4px),
    repeating-linear-gradient(to right,
      rgba(255,32,52,calc(.004 + var(--crt-strength,.233) * .010)) 0 1px,
      rgba(32,255,145,calc(.003 + var(--crt-strength,.233) * .007)) 1px 2px,
      rgba(42,96,255,calc(.004 + var(--crt-strength,.233) * .011)) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E") !important;
  background-size:100% 4px,3px 100%,160px 160px !important;
  background-blend-mode:normal,screen,soft-light !important;
  animation:crtV13Flick .46s steps(2,end) infinite,crtV13Grain 3.6s steps(8,end) infinite !important;
}

/* One slow luminance pass, with no frame displacement or sync jump. */
#crt::before{
  content:"" !important;
  position:absolute !important;
  inset:-22% 0 !important;
  pointer-events:none !important;
  background:linear-gradient(to bottom,
    transparent 0 43%,
    rgba(230,246,255,0) 46%,
    rgba(230,246,255,calc(.010 + var(--crt-strength,.233) * .024)) 49%,
    rgba(255,255,255,calc(.016 + var(--crt-strength,.233) * .032)) 50%,
    rgba(230,246,255,calc(.008 + var(--crt-strength,.233) * .018)) 51%,
    transparent 56% 100%) !important;
  opacity:1 !important;
  filter:none !important;
  transform:translateY(-64%) !important;
  animation:crtV13Roll 12s linear infinite !important;
  mix-blend-mode:screen !important;
}

#crt::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(to bottom,rgba(255,255,255,.008),transparent 13%,transparent 88%,rgba(0,0,0,.026)),
    radial-gradient(ellipse at center,
      transparent 64%,
      rgba(0,0,0,.018) 80%,
      rgba(0,0,0,calc(.070 + var(--crt-strength,.233) * .080)) 100%) !important;
  box-shadow:inset 0 0 calc(18px + var(--crt-strength,.233) * 34px) rgba(0,0,0,.08) !important;
  transform:none !important;
}

/* Retire older burst/jump states completely. */
body.tv-sync-burst #crt,
body.tv-sync-burst #crt::before,
body.tv-sync-burst #crt::after{
  transform:none !important;
  filter:none !important;
}

@keyframes crtV13Flick{
  0%{filter:brightness(.997) contrast(1.002)}
  50%{filter:brightness(1.005) contrast(1.006)}
  100%{filter:brightness(1.000) contrast(1.003)}
}
@keyframes crtV13Grain{
  0%{background-position:0 0,0 0,0 0}
  20%{background-position:0 0,0 0,13px -7px}
  40%{background-position:0 0,0 0,-9px 15px}
  60%{background-position:0 0,0 0,18px 9px}
  80%{background-position:0 0,0 0,-15px -11px}
  100%{background-position:0 0,0 0,7px 17px}
}
@keyframes crtV13Roll{
  from{transform:translateY(-64%)}
  to{transform:translateY(64%)}
}

body.crt-off #crt{display:none !important;}
body.reduce-motion #crt{animation:none !important;}
body.reduce-motion #crt::before{animation:none !important;transform:none !important;opacity:.18 !important;}


/* ==========================================================
   V14 FINAL — CRT LAB / DIRECT-FILE FALLBACK
   ========================================================== */
:root{
  --crt-scanlines:.58;
  --crt-grain:.38;
  --crt-chroma:.20;
  --crt-vignette:.24;
  --crt-flicker:.10;
  --crt-warmth:.18;
  --crt-brightness:1.02;
}

/* Keep the title art visible in both WebGL and direct-file modes. */
body.three-tv-ready #start-overlay,
body.three-tv-file-fallback #start-overlay,
html.direct-file-mode body #start-overlay{
  background:#050708 url('assets/runtime/intro-splash.png') center center / cover no-repeat !important;
}
body.three-tv-file-fallback #three-tv-canvas,
html.direct-file-mode #three-tv-canvas{opacity:0 !important;display:none !important;}
body.three-tv-file-fallback #bg-image,
html.direct-file-mode #bg-image{opacity:1 !important;visibility:visible !important;}

/* Scene brightness is intentionally separate from crisp UI brightness. */
#scene-layer,
#three-tv-canvas{filter:brightness(var(--crt-brightness)) !important;}
body.three-tv-ready #three-tv-canvas{filter:brightness(var(--crt-brightness)) !important;}

/* User-tunable shared raster. */
body.three-tv-ready #crt,
#crt{
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,calc(.002 + var(--crt-scanlines) * .020)) 0 1px,
      rgba(0,0,0,calc(.018 + var(--crt-scanlines) * .205)) 1px 2px,
      transparent 2px 4px),
    repeating-linear-gradient(to right,
      rgba(255,32,52,calc(var(--crt-chroma) * .030)) 0 1px,
      rgba(32,255,145,calc(var(--crt-chroma) * .020)) 1px 2px,
      rgba(42,96,255,calc(var(--crt-chroma) * .032)) 2px 3px) !important;
  background-size:100% 4px,3px 100% !important;
  background-blend-mode:normal,screen !important;
  animation:crtFinalFlick .52s steps(2,end) infinite !important;
}
#crt::before{
  opacity:calc(.16 + var(--crt-flicker) * .58) !important;
  animation:crtV13Roll 12s linear infinite !important;
}
#crt::after{
  background:
    linear-gradient(rgba(255,170,70,calc(var(--crt-warmth) * .070)),rgba(255,210,120,calc(var(--crt-warmth) * .028))),
    radial-gradient(ellipse at center,
      transparent 62%,
      rgba(0,0,0,calc(var(--crt-vignette) * .14)) 82%,
      rgba(0,0,0,calc(var(--crt-vignette) * .68)) 100%) !important;
  box-shadow:inset 0 0 calc(12px + var(--crt-vignette) * 78px) rgba(0,0,0,calc(var(--crt-vignette) * .24)) !important;
  mix-blend-mode:normal !important;
}
#crt-noise{
  position:fixed;
  inset:0;
  z-index:998;
  pointer-events:none;
  opacity:calc(var(--crt-grain) * .42);
  mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.90' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E");
  background-size:150px 150px;
  animation:crtFinalNoise 2.8s steps(7,end) infinite;
}
body.crt-off #crt-noise{display:none !important;}
body.reduce-motion #crt-noise{animation:none !important;}
@keyframes crtFinalFlick{
  0%{filter:brightness(calc(1 - var(--crt-flicker) * .018)) contrast(1.002)}
  50%{filter:brightness(calc(1 + var(--crt-flicker) * .026)) contrast(calc(1.002 + var(--crt-flicker) * .018))}
  100%{filter:brightness(1) contrast(1.003)}
}
@keyframes crtFinalNoise{
  0%{background-position:0 0}
  18%{background-position:17px -9px}
  36%{background-position:-13px 21px}
  54%{background-position:28px 12px}
  72%{background-position:-22px -15px}
  100%{background-position:9px 26px}
}

/* CRT tuning dashboard */
#settings-ui.crt-dashboard{
  max-height:90vh !important;
  overflow:auto !important;
  transform:translate(-50%,-50%) !important;
  padding:28px !important;
}
.settings-grid{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(430px,1.28fr);
  gap:18px;
}
.settings-card{
  background:var(--paper) !important;
  color:var(--ink) !important;
  border:4px solid var(--ink) !important;
  border-radius:16px !important;
  box-shadow:10px 10px 0 rgba(0,0,0,.34) !important;
  padding:18px !important;
}
.settings-card h3{
  margin:0 0 12px;
  font:900 24px/1 var(--display);
  letter-spacing:.02em;
}
#key-status{
  font:600 13px/1.35 var(--read) !important;
  background:#111 !important;
  color:var(--paper) !important;
  border-radius:8px;
  padding:10px;
  margin-bottom:12px;
}
#key-status span{color:var(--acid) !important;}
.settings-card .set-row{
  display:grid !important;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
  margin:11px 0 !important;
  font:700 12px/1.2 var(--read) !important;
}
.settings-card .set-row input[type="range"]{width:150px !important;}
.settings-card .text-row{grid-template-columns:1fr !important;gap:6px !important;}
.settings-card .text-row input{width:100% !important;box-sizing:border-box;}
.settings-note{font:12px/1.4 var(--read);color:#5d5a4f;margin:12px 0;}
.settings-actions,.crt-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.crt-lab-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px;}
.crt-lab-head p{margin:4px 0 0;font:12px/1.35 var(--read);color:#5d5a4f;}
.renderer-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#d8d4c7;
  font:800 10px/1 var(--read);
  letter-spacing:.08em;
}
.renderer-badge.webgl{background:var(--acid);}
.crt-control-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}
.crt-control{
  display:grid;
  grid-template-columns:1fr 42px;
  gap:5px 8px;
  align-items:center;
  background:#ece9dc;
  border:2px solid var(--ink);
  border-radius:10px;
  padding:9px 10px;
  font:800 11px/1 var(--read);
}
.crt-control output{
  justify-self:end;
  min-width:36px;
  text-align:center;
  background:#111;
  color:var(--acid);
  border-radius:5px;
  padding:4px;
  font:800 11px/1 var(--mono,monospace);
}
.crt-control input{
  grid-column:1 / -1;
  width:100%;
  accent-color:var(--acid);
}
.crt-preview-strip{
  height:38px;
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:10px;
  background:#111;
}
.crt-preview-strip span:nth-child(1){background:#f2efe4;}
.crt-preview-strip span:nth-child(2){background:var(--acid);}
.crt-preview-strip span:nth-child(3){background:#55d8e3;}
.crt-preview-strip span:nth-child(4){background:#ff715d;}
.crt-preview-strip span:nth-child(5){background:#8a8454;}
.crt-preview-strip span:nth-child(6){background:#111;}
@media(max-width:850px){
  .settings-grid{grid-template-columns:1fr;}
  .crt-control-grid{grid-template-columns:1fr;}
}

/* Avoid double-applying scene brightness in WebGL mode. */
#scene-layer{filter:none !important;}
body:not(.three-tv-ready) #bg-image{filter:contrast(1.07) saturate(1.02) brightness(var(--crt-brightness)) !important;}
body.three-tv-ready #three-tv-canvas{filter:none !important;}


/* ==========================================================
   V15 — UNIFIED BROADCAST CRT / NO MOVING BAND
   The raster and noise sit above the entire presentation.
   The former luminance sweep and SVG displacement are disabled.
   ========================================================== */
:root{
  --crt-scanlines:.48;
  --crt-grain:.54;
  --crt-chroma:.24;
  --crt-vignette:.20;
  --crt-flicker:.07;
  --crt-warmth:.10;
  --crt-brightness:1.04;
}

/* Remove every moving sweep / roll layer. */
#crt::before,
body.reduce-motion #crt::before,
body.tv-sync-burst #crt::before{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
  opacity:0 !important;
  transform:none !important;
}

/* No displacement or sync slips in either renderer path. */
body.crt-on:not(.three-tv-ready) #bg-image,
body.crt-on #bg-image,
body.reduce-motion #bg-image{
  filter:contrast(1.07) saturate(1.03) brightness(var(--crt-brightness)) !important;
  transform:none !important;
}
body.tv-sync-burst #bg-image,
body.tv-sync-burst #scene-layer,
body.tv-sync-burst #three-tv-canvas{
  transform:none !important;
  filter:none !important;
}

/* Shared scanline + RGB grille over the complete game, including menus. */
body.three-tv-ready #crt,
#crt{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:9998 !important;
  pointer-events:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,calc(.003 + var(--crt-scanlines) * .024)) 0 1px,
      rgba(0,0,0,calc(.020 + var(--crt-scanlines) * .225)) 1px 2px,
      transparent 2px 4px),
    repeating-linear-gradient(to right,
      rgba(255,35,55,calc(var(--crt-chroma) * .032)) 0 1px,
      rgba(45,255,155,calc(var(--crt-chroma) * .021)) 1px 2px,
      rgba(50,105,255,calc(var(--crt-chroma) * .034)) 2px 3px) !important;
  background-size:100% 4px,3px 100% !important;
  animation:crtV15Flick .72s steps(2,end) infinite !important;
  transform:none !important;
  filter:none !important;
}

/* Static flat glass and user-controlled vignette only. */
#crt::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(rgba(255,168,78,calc(var(--crt-warmth) * .050)),rgba(255,210,130,calc(var(--crt-warmth) * .018))),
    radial-gradient(ellipse at center,
      transparent 64%,
      rgba(0,0,0,calc(var(--crt-vignette) * .10)) 84%,
      rgba(0,0,0,calc(var(--crt-vignette) * .52)) 100%) !important;
  box-shadow:inset 0 0 calc(8px + var(--crt-vignette) * 58px) rgba(0,0,0,calc(var(--crt-vignette) * .18)) !important;
  transform:none !important;
}

/* Fine randomized grain, never a diagonal band. */
#crt-noise{
  z-index:9997 !important;
  opacity:calc(var(--crt-grain) * .38) !important;
  mix-blend-mode:soft-light !important;
  background-size:150px 150px !important;
  animation:crtV15Noise 1.9s steps(9,end) infinite !important;
  transform:none !important;
}

/* Keep settings and modal controls clickable above the visual treatment. */
#settings-ui,
.modal,
#history-panel,
#news-panel,
#demo-end{
  z-index:10020 !important;
}

@keyframes crtV15Flick{
  0%{filter:brightness(calc(1 - var(--crt-flicker) * .012)) contrast(1.002)}
  50%{filter:brightness(calc(1 + var(--crt-flicker) * .018)) contrast(calc(1.002 + var(--crt-flicker) * .010))}
  100%{filter:brightness(1) contrast(1.003)}
}
@keyframes crtV15Noise{
  0%{background-position:0 0}
  14%{background-position:17px -9px}
  28%{background-position:-13px 19px}
  42%{background-position:27px 11px}
  56%{background-position:-21px -14px}
  70%{background-position:8px 24px}
  84%{background-position:31px -18px}
  100%{background-position:-7px 13px}
}
body.crt-off #crt,
body.crt-off #crt-noise{display:none !important;}
body.reduce-motion #crt,
body.reduce-motion #crt-noise{animation:none !important;}