/* The homepage's styles, in the order the page used to link and inline them, in one file (2026-11-05): six
   stylesheets and fourteen <style> blocks before the bar's stylesheet were thirteen render-blocking steps over
   HTTP/1.1 (PageSpeed: "render-blocking requests", 1.4 s on a phone). The ==== markers say where each part came from;
   later parts win over earlier ones of the same weight, so keep the order. */
/* ==== was styles/home-5.css ==== */
/* Hacked is the corruption-stage display font: /fonts/HACKED.woff2, the .ttf for browsers without woff2. */
@font-face {
  font-family: "Hacked";
  src: url("/fonts/HACKED.woff2?v=c2b61b1d67") format("woff2"), url("/fonts/HACKED.ttf?v=db3080d82f") format("truetype");
  font-display: swap;
}

/* NYXERIN is the quarantine / non-corruption display font. Put the font file at fonts/NYXERIN.otf. */
@font-face {
  font-family: "NYXERIN";
  src: url("/fonts/NYXERIN.woff2?v=fe4261b6c5") format("woff2"), url("/fonts/NYXERIN.otf?v=21f29e6ee2") format("opentype");
  font-display: swap;
}

:root {
  --bg: #050006;
  --void: #09000c;
  --ink: #ffffff;
  --dim: rgba(255,255,255,.8);
  --ghost: rgba(255,255,255,.7);
  --dead: rgba(255,255,255,.58);
  --pink: #ff2492;
  --hot: #ff67bd;
  --soft: #ffd1ee;
  --green: #7dff2b;
  --mint: #caffab;
  --cyan: #00ffd5;
  --violet: #9a3cff;
  --glass: rgba(13,0,19,.68);
  --glass2: rgba(0,0,0,.54);
  --line: rgba(255,36,146,.33);
  --line2: rgba(125,255,43,.34);
  --shadow: 0 0 0 1px rgba(255,36,146,.1), 0 24px 70px rgba(0,0,0,.42), 0 0 54px rgba(255,36,146,.19);
  --cut-sm: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --cut: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 28px 100%, 0 calc(100% - 26px));
  --max: 1260px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% -8%, rgba(255,36,146,.28), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(125,255,43,.11), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(96,0,90,.22), transparent 62%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
body::after {
  z-index: 1000;
  opacity: .11;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.18) 1px, transparent 1px, transparent 4px);
  background-size: 100% 4px;
  mix-blend-mode: screen;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.btn,
.hero-title,
.section-title,
.sigil-title,
.node-label,
.system-tag,
.deck-title,
.warning-title,
.modal-title,
.toast-title {
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  letter-spacing: .035em;
}

.shell {
  position: relative;
  z-index: 1002;
}
.mobile-word-rain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1003;
  pointer-events: none;
  overflow: hidden;
  opacity: .42;
  mix-blend-mode: screen;
}
.corruption-bar,
.toast-zone,
.floating-chat-button,
.vye-popup-layer {
  z-index: 1003 !important;
}
.mobile-word-rain span {
  position: absolute;
  top: var(--y, -12%);
  left: var(--x);
  color: var(--c, rgba(255,255,255,.9));
  opacity: .52;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-size: var(--s, 14px);
  letter-spacing: .08em;
  text-shadow: 0 0 12px currentColor, 0 0 22px currentColor;
  animation: fall var(--d, 24s) linear var(--delay, 0s) infinite;
}
.hero-word-rain {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: .36;
  mix-blend-mode: screen;
}
.hero-word-rain span {
  position: absolute;
  top: var(--y, -16%);
  left: var(--x);
  color: var(--c, rgba(255,255,255,.9));
  opacity: .4;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-size: var(--s, 13px);
  letter-spacing: .08em;
  text-shadow: 0 0 12px currentColor, 0 0 22px currentColor;
  animation: fall var(--d, 20s) linear var(--delay, 0s) infinite;
}

.wrap {
  width: min(var(--max), calc(100% - 36px));
  margin-inline: auto;
}

/* Reduce initial layout/paint work for deep sections without changing visual output. */
#watch,
#afflictions,
#control,
#logs,
#vault {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  border-bottom: 1px solid rgba(255,36,146,.18);
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.34));
  backdrop-filter: blur(16px);
}
.patreon-auth-button.is-logged-in {
  --btn-line: rgba(125,255,43,.64);
  --btn-bg: rgba(125,255,43,.12);
  color: var(--mint);
}
.patreon-auth-button.is-checking {
  opacity: .72;
  cursor: progress;
}

.btn {
  --btn-line: rgba(255,36,146,.72);
  --btn-bg: rgba(255,36,146,.15);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--btn-line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 48%),
    var(--btn-bg);
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .18em;
  clip-path: var(--cut-sm);
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.18) 45%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .5s ease;
}
.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(125,255,43,.78);
  box-shadow: 0 0 28px rgba(255,36,146,.18), 0 0 22px rgba(125,255,43,.08);
}
.btn:hover::after { transform: translateX(130%); }
.btn.green { --btn-line: rgba(125,255,43,.64); --btn-bg: rgba(125,255,43,.12); color: var(--mint); }
.btn.dark { --btn-line: rgba(255,255,255,.18); --btn-bg: rgba(0,0,0,.46); color: rgba(255,255,255,.84); }
.btn.tiny { letter-spacing: .14em; }

.hero {
  min-height: 100svh;
  padding: 100px 0 46px;
  display: grid;
  align-items: stretch;
  overflow: hidden;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(320px, 1fr) minmax(280px, .66fr);
  gap: 18px;
  align-items: stretch;
}
.hero-grid::before {
  content: "";
  position: absolute;
  inset: 5% 10% auto 24%;
  height: 64%;
  background: radial-gradient(circle, rgba(255,36,146,.17), transparent 64%);
  z-index: -1;
  filter: blur(8px);
}

.boot-card,
.signal-card,
.glass-card {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 42%),
    rgba(10,0,15,.72);
  box-shadow: var(--shadow);
  clip-path: var(--cut);
  overflow: hidden;
}
.boot-card::before,
.signal-card::before,
.glass-card::before,
.media-window::before,
.chat-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background:
    linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 19px 19px;
}
.boot-card { align-self: end; padding: clamp(22px, 3vw, 34px); min-height: 68vh; display: flex; flex-direction: column; justify-content: space-between; }
.system-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  border: 1px solid rgba(125,255,43,.42);
  background: rgba(125,255,43,.1);
  color: var(--mint);
  padding: 9px 11px;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.system-tag::before { content: var(--css-007, ""); font-size: 13px; }
.system-tag.pink { border-color: rgba(255,36,146,.44); background: rgba(255,36,146,.12); color: var(--soft); }
.hero-title {
  margin: 20px 0 0;
  font-size: clamp(56px, 7vw, 126px);
  line-height: .82;
  text-transform: uppercase;
}
.hero-title em { font-style: normal; color: var(--hot); }
.glitch-word {
  position: relative;
  display: inline-block;
  color: var(--mint);
}
.glitch-word::before,
.glitch-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.glitch-word::before { color: var(--pink); transform: translate(4px, -2px); clip-path: inset(0 0 52% 0); animation: wordHack 2.4s steps(2,end) infinite; }
.glitch-word::after { color: var(--cyan); transform: translate(-3px, 3px); clip-path: inset(46% 0 0 0); animation: wordHack2 3s steps(2,end) infinite; }
@keyframes wordHack {
  0%, 100% { transform: translate(4px,-2px); }
  20% { transform: translate(9px,1px); clip-path: inset(64% 0 10% 0); }
  21% { transform: translate(-3px,3px); clip-path: inset(12% 0 70% 0); }
  58% { transform: translate(6px,-4px); }
  59% { transform: translate(0,2px); }
}
@keyframes wordHack2 {
  0%, 100% { transform: translate(-3px,3px); }
  16% { transform: translate(-10px,-1px); clip-path: inset(18% 0 62% 0); }
  17% { transform: translate(4px,2px); clip-path: inset(70% 0 5% 0); }
  71% { transform: translate(-5px,4px); }
  72% { transform: translate(3px,-2px); }
}
.hero-copy {
  margin: 22px 0 0;
  color: var(--dim);
  line-height: 1.78;
  font-size: clamp(15px, 1.25vw, 18px);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.vye-art {
  width: min(96%, 690px);
  max-height: calc(100svh - 108px);
  object-fit: contain;
  object-position: bottom center;
  filter: saturate(1.1) contrast(1.04) drop-shadow(0 0 38px rgba(255,36,146,.32)) drop-shadow(0 0 18px rgba(125,255,43,.12));
  transform-origin: bottom center;
  animation: vyeFloat 6.5s ease-in-out infinite;
}
@keyframes vyeFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.006); }
}
.ascii-rain {
  position: absolute;
  inset: 6% 0 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(ellipse at 50% 54%, black 30%, transparent 72%);
}
.ascii-rain span {
  position: absolute;
  top: -12%;
  left: var(--x);
  color: var(--c);
  opacity: var(--o);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--s);
  text-shadow: 0 0 12px currentColor;
  animation: fall var(--d) linear var(--delay) infinite;
}
@keyframes fall {
  from { transform: translateY(-12vh); }
  to { transform: translateY(108vh); }
}
.vye-caption {
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  width: min(510px, 90%);
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(10px);
  padding: 14px 16px;
  clip-path: var(--cut-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: rgba(255,255,255,.74);
}
.vye-caption strong { color: var(--mint); }

.signal-card { align-self: center; padding: 20px; }

.meter-ring {
  margin: 22px auto 20px;
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--green) calc(var(--meter, 8) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 34px rgba(0,0,0,.62), 0 0 42px rgba(125,255,43,.08);
}
.meter-ring::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,36,146,.18), transparent 60%),
    #07000a;
  border: 1px solid rgba(255,255,255,.12);
}

.truth-feed { display: grid; gap: 10px; }
.truth-line {
  border-left: 2px solid rgba(255,36,146,.58);
  background: rgba(0,0,0,.38);
  padding: 11px 12px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.6;
  transform: translateX(0);
}
.truth-line strong { color: var(--soft); }
.truth-line.is-new { animation: truthBlink .42s steps(2,end) 1; }
@keyframes truthBlink {
  0% { transform: translateX(0); filter: none; }
  33% { transform: translateX(8px); filter: hue-rotate(40deg) saturate(1.5); }
  66% { transform: translateX(-5px); filter: hue-rotate(-30deg) saturate(1.4); }
  100% { transform: translateX(0); filter: none; }
}

.section { padding: clamp(54px, 8vw, 96px) 0; position: relative; }
.section-kicker { margin-bottom: 14px; }
.section-title {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: .88;
}
.section-lead {
  color: var(--dim);
  max-width: 780px;
  line-height: 1.78;
  font-size: 17px;
  margin: 18px 0 0;
}

.cinema {
  margin-top: 28px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .38fr);
  min-height: 620px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.62);
  clip-path: var(--cut);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.media-window {
  position: relative;
  min-height: 620px;
  background: #000;
  isolation: isolate;
  overflow: hidden;
}
.media-window video,
.media-window img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.1) contrast(1.05);
}
.media-window.contain video,
.media-window.contain img { object-fit: contain; }
.media-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent, rgba(0,0,0,.3)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px);
  opacity: .28;
  mix-blend-mode: screen;
  pointer-events: none;
}
.media-window.is-glitch img,
.media-window.is-glitch video { animation: mediaBreak .62s steps(2,end) 1; }
.media-window.is-glitch .glitch-layer { animation: glitchLayer .62s steps(2,end) 1; }
.glitch-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,36,146,.28), rgba(125,255,43,.18), transparent);
  mix-blend-mode: screen;
  z-index: 4;
}
@keyframes mediaBreak {
  0% { transform: translate(0); filter: saturate(1.1); }
  14% { transform: translate(13px, -5px) skewX(2deg); filter: hue-rotate(25deg) saturate(1.7) contrast(1.2); clip-path: inset(0 0 18% 0); }
  29% { transform: translate(-18px, 6px) skewX(-2deg); clip-path: inset(18% 0 48% 0); }
  53% { transform: translate(7px, 2px); clip-path: inset(50% 0 7% 0); }
  72% { transform: translate(-4px, -1px); clip-path: inset(0); }
  100% { transform: translate(0); filter: saturate(1.1) contrast(1.05); }
}
@keyframes glitchLayer {
  0%, 100% { opacity: 0; transform: translateX(0); }
  20% { opacity: .9; transform: translateX(24px); clip-path: inset(10% 0 64% 0); }
  45% { opacity: .75; transform: translateX(-18px); clip-path: inset(42% 0 30% 0); }
  70% { opacity: .88; transform: translateX(11px); clip-path: inset(72% 0 6% 0); }
}
.cinema-copy {
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,36,146,.18), transparent 32%),
    rgba(8,0,12,.82);
  border-left: 1px solid rgba(255,36,146,.25);
}
.deck-title {
  margin: 14px 0 0;
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 58px);
  line-height: .92;
}
.deck-copy { color: var(--dim); line-height: 1.75; margin: 15px 0 0; }
.deck-meta {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.deck-meta span { border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.34); padding: 10px 11px; }
.deck-meta strong { color: var(--mint); }
.cinema-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.cinema-single .cinema-copy { justify-content: center; }
.cinema-single .media-window video { object-fit: cover; }
.mobile-section-nav {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0;
}
.mobile-section-nav .btn {
  width: auto;
  min-height: 38px;
  padding: 9px 12px;
  font-size: 13px;
  letter-spacing: .12em;
}

.orbit-area {
  margin-top: 28px;
  min-height: 760px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: center;
}
.sigil-board {
  min-height: 680px;
  display: grid;
  place-items: center;
}
.sigil-board::before,
.sigil-board::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255,36,146,.32);
  border-radius: 50%;
  box-shadow: 0 0 44px rgba(255,36,146,.08);
  animation: spinRing 28s linear infinite;
}
.sigil-board::after {
  inset: 22%;
  border-color: rgba(125,255,43,.24);
  animation-duration: 18s;
  animation-direction: reverse;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.sigil-core {
  position: relative;
  width: min(58%, 330px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,36,146,.4);
  background:
    radial-gradient(circle at 50% 44%, rgba(255,36,146,.33), transparent 54%),
    rgba(0,0,0,.56);
  text-align: center;
  padding: 24px;
  box-shadow: inset 0 0 50px rgba(0,0,0,.6), 0 0 48px rgba(255,36,146,.14);
}
.sigil-title {
  font-size: clamp(32px, 4vw, 62px);
  line-height: .9;
  text-transform: uppercase;
}
.sigil-sub { margin-top: 12px; color: rgba(255,255,255,.8); line-height: 1.5; font-size: 13px; }
.node {
  position: absolute;
  left: calc(50% + var(--x));
  top: calc(50% + var(--y));
  translate: -50% -50%;
  width: clamp(118px, 12vw, 172px);
  min-height: 84px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.56);
  clip-path: var(--cut-sm);
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.node:hover,
.node.is-active {
  transform: translateY(-4px);
  border-color: rgba(125,255,43,.7);
  background: linear-gradient(135deg, rgba(125,255,43,.14), rgba(255,36,146,.12)), rgba(0,0,0,.6);
  box-shadow: 0 0 28px rgba(125,255,43,.1), 0 0 24px rgba(255,36,146,.14);
}
.node-label { text-transform: uppercase; font-size: 18px; line-height: 1; }
.node-small { margin-top: 7px; color: rgba(255,255,255,.74); font-size: 12px; line-height: 1.35; }
html[data-corruption-phase="system"] .node-label,
html[data-corruption-phase="system"] .node-small {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.feature-viewer {
  border: 1px solid var(--line);
  background: rgba(0,0,0,.62);
  clip-path: var(--cut);
  min-height: 720px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.feature-viewer .media-window { min-height: 440px; height: 440px; }
.feature-copy {
  padding: 26px;
  display: grid;
  gap: 18px;
}
.feature-copy p { color: var(--dim); line-height: 1.74; margin: 0; }
.feature-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.fact {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.34);
  padding: 12px;
  color: rgba(255,255,255,.66);
  font-size: 13px;
  line-height: 1.55;
}
.fact strong { color: var(--mint); }

.warning-title {
  margin: 16px 0 0;
  font-size: clamp(40px, 5.2vw, 82px);
  line-height: .88;
  text-transform: uppercase;
}
.warning-copy { color: var(--dim); line-height: 1.75; margin-top: 20px; font-size: 17px; }

.truth-card {
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 46%),
    rgba(0,0,0,.46);
  padding: 20px;
  clip-path: var(--cut-sm);
  min-height: 190px;
  position: relative;
  overflow: hidden;
}
.truth-card::after {
  content: attr(data-glitch);
  position: absolute;
  inset: auto 8px 8px auto;
  color: rgba(125,255,43,.24);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.truth-card h3 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: .08em; }
.truth-card p { color: var(--dim); line-height: 1.65; margin: 12px 0 0; }

.bubble {
  max-width: 86%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.48);
  padding: 15px 16px;
  clip-path: var(--cut-sm);
  color: rgba(255,255,255,.75);
  line-height: 1.6;
}
.bubble.vye { border-color: rgba(255,36,146,.42); background: rgba(255,36,146,.12); }
.bubble.user { margin-left: auto; border-color: rgba(125,255,43,.38); background: rgba(125,255,43,.09); }
.bubble.system { max-width: 100%; border-color: rgba(255,255,255,.16); color: var(--mint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; text-transform: uppercase; }

.final-section .wrap {
  position: relative;
  overflow: visible;
}

.final-cta {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 6vw, 70px);
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  overflow: visible;
  isolation: isolate;
}
.final-cta > :not(.vye-wall-peek) {
  position: relative;
  z-index: 3;
}
.cta-actions { display: grid; gap: 12px; min-width: min(100%, 320px); }

.os-hub-section {
  overflow: hidden;
}
.os-hub-section::before,
.logs-section::before,
.vault-section::before {
  content: "";
  position: absolute;
  inset: 8% auto auto 50%;
  width: min(820px, 80vw);
  height: min(820px, 80vw);
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(255,36,146,.16), transparent 58%),
    radial-gradient(circle at 70% 32%, rgba(125,255,43,.08), transparent 38%);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}
.os-panel {
  margin-top: 30px;
  padding: clamp(20px, 3.2vw, 34px);
  background:
    linear-gradient(135deg, rgba(255,36,146,.11), transparent 36%),
    linear-gradient(315deg, rgba(125,255,43,.08), transparent 38%),
    rgba(5,0,9,.82);
}
.os-panel-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,36,146,.22);
}
.os-panel-meters {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  min-width: min(360px, 100%);
}
.terminal-label,
.log-type,
.vault-file span,
.os-meter-block span{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: var(--mint);
}
.os-panel-title {
  margin: 10px 0 0;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.os-meter-block {
  min-width: 150px;
  border: 1px solid rgba(125,255,43,.42);
  background:
    linear-gradient(90deg, rgba(125,255,43,.14) 64%, rgba(255,36,146,.18) 64%),
    rgba(0,0,0,.52);
  padding: 14px 16px;
  clip-path: var(--cut-sm);
  text-align: right;
  box-shadow: inset 0 0 24px rgba(125,255,43,.08), 0 0 22px rgba(125,255,43,.08);
}
.os-meter-block strong {
  display: block;
  margin-top: 5px;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-size: 42px;
  line-height: .86;
  color: var(--mint);
  text-shadow: 0 0 16px rgba(125,255,43,.36);
}
.os-meter-block small {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.66);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 900;
}
.energy-meter-block {
  border-color: rgba(0,230,255,.32);
  background:
    linear-gradient(90deg, rgba(0,230,255,.13) calc(var(--energy, 100) * 1%), rgba(255,255,255,.035) 0),
    rgba(0,0,0,.52);
  box-shadow: inset 0 0 24px rgba(0,230,255,.07), 0 0 22px rgba(0,230,255,.055);
}
.energy-meter-block span,
.energy-meter-block strong { color: var(--cyan); }
.energy-meter-block strong { text-shadow: 0 0 16px rgba(0,230,255,.3); }

.hub-primary {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 20px;
  min-height: 430px;
  width: 100%;
  border: 1px solid rgba(255,36,146,.64);
  background:
    radial-gradient(circle at 12% 16%, rgba(255,36,146,.28), transparent 38%),
    radial-gradient(circle at 82% 82%, rgba(125,255,43,.13), transparent 34%),
    rgba(12,0,17,.78);
  color: #fff;
  padding: clamp(22px, 3.2vw, 36px);
  clip-path: var(--cut);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 0 52px rgba(255,36,146,.2), inset 0 0 34px rgba(255,36,146,.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hub-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px),
    linear-gradient(110deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: .18;
  transform: translateX(-42%);
  pointer-events: none;
}
.hub-primary:hover {
  transform: translateY(-3px);
  border-color: rgba(125,255,43,.78);
  box-shadow: 0 0 64px rgba(255,36,146,.26), 0 0 34px rgba(125,255,43,.12), inset 0 0 34px rgba(255,36,146,.08);
}
.hub-primary strong {
  position: relative;
  display: block;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-size: clamp(52px, 7.4vw, 112px);
  line-height: .78;
  text-transform: uppercase;
  letter-spacing: .035em;
  color: var(--soft);
  text-shadow: 0 0 26px rgba(255,36,146,.42);
}
.hub-primary em,
.hub-tile em,
.vault-file em {
  display: block;
  font-style: normal;
  color: rgba(255,255,255,.68);
  line-height: 1.6;
}
.hub-primary-action {
  width: fit-content;
  border: 1px solid rgba(125,255,43,.52);
  background: rgba(125,255,43,.11);
  color: var(--mint);
  padding: 12px 14px;
  clip-path: var(--cut-sm);
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
}

.hub-tile,
.log-card,
.vault-file {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 44%),
    rgba(0,0,0,.48);
  padding: 20px;
  clip-path: var(--cut-sm);
  min-height: 190px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.hub-tile::after {
  content: attr(data-state);
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(125,255,43,.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: .14em;
}
.hub-tile:hover,
.log-card:hover,
.vault-file:hover {
  transform: translateY(-3px);
  border-color: rgba(125,255,43,.48);
  background:
    linear-gradient(135deg, rgba(125,255,43,.08), transparent 44%),
    rgba(0,0,0,.58);
  box-shadow: 0 0 32px rgba(125,255,43,.08), 0 0 36px rgba(255,36,146,.09);
}
.hub-tile span {
  color: var(--pink);
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-size: 28px;
  line-height: 1;
}
.hub-tile strong,
.log-card strong,
.vault-file strong {
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 24px;
  line-height: 1;
  color: #fff;
}

.logs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}
.log-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.log-card {
  min-height: 270px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255,36,146,.1), transparent 48%),
    rgba(0,0,0,.52);
}
.log-card::before,
.vault-file::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6px);
  opacity: .12;
  pointer-events: none;
}
.log-card time {
  color: rgba(255,255,255,.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  text-transform: uppercase;
}
.log-card p {
  margin: 0;
  color: var(--dim);
  line-height: 1.65;
}
.log-card em {
  margin-top: auto;
  color: var(--mint);
  font-style: normal;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
}

.vault-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.vault-card {
  padding: clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
}
.vault-card .warning-title {
  font-size: clamp(52px, 5.2vw, 82px);
  line-height: .88;
  white-space: normal;
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.vault-file {
  min-height: auto;
  align-content: center;
  padding: 24px;
  border-color: rgba(255,36,146,.22);
}
.vault-file span { color: rgba(125,255,43,.82); }
.vault-file strong { font-size: clamp(24px, 3.4vw, 42px); }
.vault-access-note {
  margin: 12px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  max-width: 68ch;
}
.vault-access-note a { color: #ffd1ee; text-decoration: underline; text-underline-offset: 3px; }

.toast-zone {
  position: fixed;
  right: 18px;
  top: 88px;
  z-index: 130;
  width: min(390px, calc(100% - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.truth-toast {
  border: 1px solid rgba(125,255,43,.44);
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(12px);
  padding: 14px 15px;
  clip-path: var(--cut-sm);
  box-shadow: 0 0 28px rgba(125,255,43,.12), 0 0 28px rgba(255,36,146,.12);
  animation: toastIn .42s steps(3,end) 1, toastOut .35s ease 5.8s forwards;
}
.toast-title { color: var(--mint); font-size: 14px; text-transform: uppercase; }
.toast-copy { margin-top: 8px; color: rgba(255,255,255,.72); line-height: 1.55; font-size: 13px; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); filter: hue-rotate(50deg); }
  to { opacity: 1; transform: translateX(0); filter: none; }
}
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }

.corruption-bar {
  position: absolute;
  mix-blend-mode: normal;
}
.corruption-bar-meta span {
  font-weight: 900;
}
.corruption-bar-meta > span,
.corruption-bar-meta > strong {
  display: inline-block;
}
.corruption-fill {
  transition: width .25s steps(4,end);
}
.energy-bar-meta {
  margin-top: 4px;
}
.energy-fill {
  transition: width .25s steps(4,end);
}

.chat-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.chat-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.chat-sheet {
  position: relative;
  width: min(920px, 100%);
  max-height: min(86svh, 860px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(255,36,146,.48);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,36,146,.24), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(125,255,43,.14), transparent 24%),
    rgba(8,0,13,.96);
  clip-path: var(--cut);
  box-shadow: 0 0 0 1px rgba(255,36,146,.14), 0 0 90px rgba(255,36,146,.28);
  overflow: hidden;
}
.chat-head {
  position: relative;
  z-index: 1;
  padding: 22px;
  border-bottom: 1px solid rgba(255,36,146,.22);
}
.modal-title { margin: 8px 0 0; font-size: clamp(28px, 4vw, 46px); text-transform: uppercase; }
.chat-body {
  position: relative;
  z-index: 1;
  padding: 20px 22px;
  overflow-y: auto;
  display: grid;
  gap: 13px;
  align-content: start;
  min-height: 320px;
}
.chat-msg {
  max-width: 82%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.46);
  padding: 13px 15px;
  clip-path: var(--cut-sm);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg.vye { border-color: rgba(255,36,146,.42); background: rgba(255,36,146,.12); }
.chat-msg.user { margin-left: auto; border-color: rgba(125,255,43,.42); background: rgba(125,255,43,.1); color: #fff; }
.chat-msg.system { max-width: 100%; color: var(--mint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; text-transform: uppercase; }
.chat-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 18px 22px 22px;
  border-top: 1px solid rgba(255,36,146,.22);
}
.chat-input {
  width: 100%;
  border: 1px solid rgba(255,36,146,.34);
  background: rgba(0,0,0,.58);
  color: #fff;
  outline: none;
  clip-path: var(--cut-sm);
}
.chat-input:focus { border-color: rgba(125,255,43,.72); box-shadow: 0 0 24px rgba(125,255,43,.11); }
body.chat-open { overflow: hidden; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(290px, .75fr) minmax(330px, 1fr); }
  .signal-card { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
  .meter-ring { width: 190px; margin: 0; }

  .orbit-area { grid-template-columns: 1fr; }
  .sigil-board { min-height: 600px; }
   .final-cta, .vault-layout { grid-template-columns: 1fr; }
  .log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .vault-card .warning-title {
    white-space: normal;
    font-size: clamp(38px, 12vw, 58px);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .wrap { width: min(100% - 24px, var(--max)); }
  .hero { padding-top: 84px; }
  .hero-grid { grid-template-columns: 1fr; }
  .boot-card { min-height: auto; }

  .vye-art { max-height: 62svh; }
  .signal-card { display: block; }
  .meter-ring { margin: 18px auto; }
  .hero-title { font-size: clamp(50px, 17vw, 84px); }
  .cinema { grid-template-columns: 1fr; min-height: 0; }
  .cinema-copy { border-left: 0; border-top: 1px solid rgba(255,36,146,.25); }
   .feature-facts, .log-grid { grid-template-columns: 1fr; }
  .logs-head, .os-panel-top { grid-template-columns: 1fr; display: grid; }
  .os-panel-meters { grid-template-columns: 1fr 1fr; min-width: 0; }
  .os-meter-block { text-align: left; }
  .sigil-board { min-height: 0; display: flex; gap: 10px; overflow-x: auto; padding: 8px 0 18px; place-items: stretch; scroll-snap-type: x mandatory; }
  .sigil-board::before, .sigil-board::after, .sigil-core { display: none; }
  .node { position: relative; left: auto; top: auto; translate: none; flex: 0 0 178px; scroll-snap-align: start; }
  .feature-viewer { min-height: 0; }
  .chat-sheet { max-height: 88svh; }
  .chat-head { padding: 18px; }
  .chat-body { padding: 16px 18px; }
  .chat-form { padding: 14px 18px 18px; }
  .chat-msg { max-width: 100%; }
  .mobile-section-nav { display: flex; }
}

@media (max-width: 520px) {
  .btn { width: 100%; }
  .mobile-section-nav .btn { width: auto; }
  .corruption-bar-meta { gap: 6px; }
  .corruption-bar-meta > span, .corruption-bar-meta > strong { transform: translateY(8px); }
  .hero-actions, .cinema-controls, .cta-actions, .logs-head .btn { width: 100%; }
  .os-panel { padding: 16px; }
  .os-panel-meters { grid-template-columns: 1fr; }
  .hub-primary, .hub-tile, .log-card, .vault-file { clip-path: none; }
  .hub-primary { min-height: 300px; }
  .section { padding: 48px 0; }
  .media-window { min-height: 300px; }
  .feature-viewer .media-window { min-height: 290px; height: 290px; }
  .truth-toast { font-size: 12px; }
}
.vye-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  overflow: hidden;
}

.vye-popup {
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
}

.vye-popup.is-active { pointer-events: auto; }
.vye-popup.is-shown { opacity: 1; }
.vye-popup.is-dragging { cursor: grabbing; }
.vye-popup.is-entering { animation: vyePopupEnter 420ms steps(6, end) forwards; }
.vye-popup.is-exiting {
  pointer-events: none;
  animation: vyePopupExit 320ms steps(5, end) forwards;
}

.vye-popup-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,36,146,.5);
  background: rgba(6,0,10,.72);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.38), 0 0 30px rgba(255,36,146,.22);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 18px 100%, 0 calc(100% - 16px));
  overflow: hidden;
}

.vye-popup-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.16) 46%, transparent 62%);
  mix-blend-mode: screen;
  opacity: .72;
  transform: translateX(-135%);
  animation: vyePopupSweep 7.5s linear infinite;
  pointer-events: none;
}

.vye-popup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.vye-popup-glow {
  position: absolute;
  inset: auto 14px 10px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,36,146,.42) 0%, rgba(125,255,43,.18) 48%, transparent 76%);
  filter: blur(10px);
  opacity: .72;
  pointer-events: none;
}

.chat-status {
  min-height: 18px;
  padding: 0 22px 18px;
  color: var(--mint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.chat-status.is-critical { color: #ff9bd8; }
.chat-status.is-warning { color: var(--green); }

@keyframes vyePopupSweep {
  from { transform: translateX(-140%); }
  to { transform: translateX(150%); }
}

@keyframes vyePopupEnter {
  0% { opacity: 0; filter: saturate(1.4) contrast(1.24) hue-rotate(-14deg); }
  20% { opacity: .9; filter: saturate(.82) contrast(1.3) hue-rotate(8deg); }
  40% { opacity: .2; filter: saturate(1.28) contrast(1.22) hue-rotate(-10deg); }
  60% { opacity: 1; filter: saturate(.92) contrast(1.14) hue-rotate(6deg); }
  80% { opacity: .72; filter: saturate(1.18) contrast(1.2) hue-rotate(-6deg); }
  100% { opacity: 1; filter: none; }
}

@keyframes vyePopupExit {
  0% { opacity: 1; filter: none; }
  20% { opacity: .28; filter: saturate(1.32) contrast(1.26) hue-rotate(12deg); }
  45% { opacity: .86; filter: saturate(.84) contrast(1.18) hue-rotate(-8deg); }
  70% { opacity: .16; filter: saturate(1.4) contrast(1.34) hue-rotate(18deg); }
  100% { opacity: 0; filter: saturate(1.5) contrast(1.4) hue-rotate(-18deg); }
}

/* HERO V5: rebuilt first screen from scratch */

@keyframes titleSliceA {
  0%,100% { opacity: 0; clip-path: inset(0); }
  12% { opacity: .8; clip-path: inset(0 0 74% 0); transform: translate(10px,-3px); }
  28% { opacity: .74; clip-path: inset(28% 0 46% 0); transform: translate(-8px,2px); }
  48% { opacity: .64; clip-path: inset(60% 0 16% 0); transform: translate(12px,1px); }
  72% { opacity: .8; clip-path: inset(13% 0 70% 0); transform: translate(-5px,-2px); }
}

@keyframes titleSliceB {
  0%,100% { opacity: 0; clip-path: inset(0); }
  10% { opacity: .82; clip-path: inset(72% 0 2% 0); transform: translate(-10px,4px); }
  31% { opacity: .72; clip-path: inset(16% 0 64% 0); transform: translate(6px,-3px); }
  56% { opacity: .75; clip-path: inset(44% 0 34% 0); transform: translate(-12px,1px); }
  78% { opacity: .66; clip-path: inset(3% 0 82% 0); transform: translate(7px,3px); }
}

.edge-rain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(16vw, 230px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .78;
  mask-image: linear-gradient(to bottom, transparent 0, black 16%, black 88%, transparent 100%);
}

.edge-rain span { opacity: .96; }

@keyframes breachFlash {
  0%, 86%, 100% { opacity: .16; transform: translate(0,0); filter: none; }
  88% { opacity: .86; transform: translate(9px,-2px); filter: hue-rotate(80deg) saturate(1.8); }
  90% { opacity: .24; transform: translate(-11px,4px); }
  92% { opacity: .72; transform: translate(5px,1px); }
}

@keyframes peekGlitch {
  0%, 78%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  80% { opacity: .88; transform: translateX(13px); clip-path: inset(8% 0 66% 0); }
  83% { opacity: .62; transform: translateX(-18px); clip-path: inset(41% 0 30% 0); }
  86% { opacity: .82; transform: translateX(8px); clip-path: inset(72% 0 8% 0); }
  89% { opacity: 0; transform: translateX(0); }
}
@keyframes peekWords {
  0%, 82%, 100% { opacity: 0; transform: translate(0,0); }
  84% { opacity: .82; transform: translate(10px,-4px); }
  86% { opacity: .22; transform: translate(-14px,5px); }
  88% { opacity: .74; transform: translate(6px,0); }
  90% { opacity: 0; }
}

@media (max-width: 860px) {













  .edge-rain { width: 88px; opacity: .55; }

}

@media (max-width: 520px) {






  .edge-rain { width: 54px; opacity: .38; }
}

/* Site-wide animated code rain. This is generated with JS and spans the full document height. */
.site-rain {
  /* Fixed to the viewport: falling glyphs read the same either way, and
     sizing this to the document made ~97% of the spans animate offscreen. */
  position: fixed;
  top: 0;
  bottom: auto;
  height: var(--rain-doc-height, 100vh);
  min-height: 0;
  z-index: 28;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  contain: layout paint;
}
.site-rain-left {
  left: 0;
  width: clamp(120px, 14vw, 260px);
  opacity: .50;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
}
.site-rain-right {
  right: 0;
  width: clamp(240px, 25vw, 460px);
  opacity: .42;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 82%, transparent 100%);
}
.site-rain span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  color: var(--c);
  opacity: var(--o);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--s);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 10px currentColor;
  animation: siteRainFall var(--d) linear var(--delay) infinite;
  will-change: transform;
}
.site-rain-right span:nth-child(4n) { letter-spacing: .15em; }
.site-rain-right span:nth-child(7n) { font-size: calc(var(--s) * 1.14); }
.site-rain-right span:nth-child(9n) { text-shadow: 0 0 13px currentColor, 0 0 2px currentColor; }
@keyframes siteRainFall {
  0% { transform: translate3d(0,-80px,0); }
  100% { transform: translate3d(0,120px,0); }
}
@keyframes siteRainFlicker {
  0%, 82%, 100% { opacity: var(--o); }
  86% { opacity: calc(var(--o) * .62); }
  90% { opacity: min(1, calc(var(--o) * 1.25)); }
}

/* HERO V7 窶・total replacement for the initial screen */
.hero-v7 {
  position: relative;
  min-height: max(1120px, 118svh);
  padding: 72px 0 clamp(170px, 20vh, 260px);
  overflow: visible;
  /* The ::after scan slides 18% past both side edges. Unclipped, that moving
     overhang re-rasterised the whole page every frame (~2 cores in a profile);
     the hero is full-width, so what this clips was off-screen anyway. */
  overflow-x: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,36,146,.42), transparent 34%),
    radial-gradient(circle at 72% 48%, rgba(125,255,43,.11), transparent 28%),
    linear-gradient(90deg, rgba(255,36,146,.08), transparent 20%, transparent 76%, rgba(125,255,43,.05)),
    #080008;
}
.hero-v7::before,
.hero-v7::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-v7::before {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(255,36,146,.035) 88px 89px);
  mix-blend-mode: screen;
  opacity: .28;
}
.hero-v7::after {
  background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.13) 48%, transparent 56%);
  mix-blend-mode: screen;
  opacity: .16;
  animation: v7-scan 7s linear infinite;
}
@keyframes v7-scan { from { transform: translateX(-18%); } to { transform: translateX(18%); } }

.v7-stage {
  position: relative;
  z-index: 2;
  width: min(1540px, calc(100% - 28px));
  min-height: max(1040px, calc(118svh - 72px));
  margin: 0 auto;
}
.v7-aura {
  position: absolute;
  inset: 4% 10% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,36,146,.38), transparent 54%),
    radial-gradient(ellipse at 48% 72%, rgba(125,255,43,.10), transparent 40%);
  filter: blur(14px);
}

.v7-claim {
  position: absolute;
  left: clamp(14px, 4.2vw, 84px);
  z-index: 8;
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
}
.v7-title {
  position: relative;
  margin: 16px 0 0;
  font-size: clamp(54px, 8.6vw, 154px);
  line-height: .78;
  letter-spacing: .005em;
  text-transform: uppercase;
  max-width: 1020px;
  text-shadow: 0 0 18px rgba(255,36,146,.22), 0 16px 42px rgba(0,0,0,.62);
  animation: v7-title-jolt 4.8s steps(2,end) infinite;
}
.v7-title span { display: block; width: fit-content; }
/* What the page is, for search engines and screen readers; the title's own lines are the stage's */
.v7-title .seo-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.text-pending [data-text-key] { visibility: hidden; }
.v7-hot { color: var(--hot); }
.v7-mint { color: var(--mint); }
html:not([data-corruption-phase="system"]) .v7-vye-line {
  color: var(--mint);
  font-family: "NYXERIN", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
html:not([data-corruption-phase="system"]) .v7-loser-line { color: var(--hot); }
.v7-title::before,
.v7-title::after {
  content: attr(data-title);
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  pointer-events: none;
  white-space: pre-line;
  mix-blend-mode: screen;
  opacity: 0;
}
.v7-title::before {
  color: var(--cyan);
  transform: translate(8px,-3px);
  animation: v7-title-slice-a 1.9s steps(2,end) infinite;
}
.v7-title::after {
  color: var(--pink);
  transform: translate(-7px,4px);
  animation: v7-title-slice-b 2.35s steps(2,end) infinite;
}
@keyframes v7-title-jolt {
  0%, 86%, 100% { transform: translate(0); filter: none; }
  88% { transform: translate(5px,-2px) skewX(-1deg); filter: hue-rotate(40deg) saturate(1.5); }
  90% { transform: translate(-8px,3px) skewX(1deg); }
  92% { transform: translate(2px,0); }
}
@keyframes v7-title-slice-a {
  0%, 78%, 100% { opacity: 0; clip-path: inset(0); }
  80% { opacity: .9; clip-path: inset(4% 0 78% 0); transform: translate(18px,-3px); }
  84% { opacity: .72; clip-path: inset(40% 0 32% 0); transform: translate(-14px,2px); }
  88% { opacity: .88; clip-path: inset(74% 0 4% 0); transform: translate(12px,4px); }
  91% { opacity: 0; }
}
@keyframes v7-title-slice-b {
  0%, 82%, 100% { opacity: 0; clip-path: inset(0); }
  84% { opacity: .82; clip-path: inset(70% 0 2% 0); transform: translate(-18px,4px); }
  87% { opacity: .65; clip-path: inset(16% 0 62% 0); transform: translate(10px,-4px); }
  90% { opacity: .84; clip-path: inset(46% 0 28% 0); transform: translate(-11px,1px); }
  93% { opacity: 0; }
}

.v7-copy {
  margin-top: clamp(10px, 1.4vh, 18px);
  border: 1px solid rgba(255,36,146,.36);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  clip-path: var(--cut-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.v7-copy p { margin: 0; color: rgba(255,255,255,.78); }
.v7-actions { display: flex; flex-wrap: wrap; }
.v7-vye {
  position: absolute;
  /* Keep the character art anchored to the title area so it remains
     behind the main headline instead of drifting down behind previews. */
  height: clamp(650px, 72svh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transform: none;
}
.v7-vye.reveal,
.v7-vye.reveal.is-visible {
  transform: none;
}
.v7-vye::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16%;
  translate: -50% 0;
  width: min(840px, 66vw);
  height: 78%;
  background: radial-gradient(ellipse at 50% 52%, rgba(255,36,146,.36), transparent 62%);
  filter: blur(16px);
  z-index: -1;
}
.v7-vye-art {
  width: min(900px, 66vw);
  max-height: calc(100svh - 164px);
  object-fit: contain;
  object-position: bottom center;
  filter: saturate(1.14) contrast(1.06) drop-shadow(0 0 48px rgba(255,36,146,.38)) drop-shadow(0 0 22px rgba(125,255,43,.14));
  animation: v7-vye-float 7s ease-in-out infinite;
}
@keyframes v7-vye-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.v7-caption {
  translate: none;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(12px);
  clip-path: var(--cut-sm);
  color: rgba(255,255,255,.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: auto;
}
.v7-caption strong { color: var(--mint); }

.v7-media-stack {
  position: absolute;
  right: clamp(16px, 4vw, 74px);
  transform: translateY(-43%);
  z-index: 9;
  width: min(410px, 30vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.v7-media-card {
  position: relative;
  min-height: 145px;
  border: 1px solid rgba(255,36,146,.46);
  background: #020004;
  clip-path: var(--cut-sm);
  overflow: hidden;
  box-shadow: 0 0 26px rgba(255,36,146,.16), 0 12px 32px rgba(0,0,0,.48);
  transform: rotate(2deg);
}
.v7-media-card-large { grid-column: 1 / -1; min-height: 220px; transform: rotate(-2deg); }
.v7-media-card:nth-child(2) { transform: rotate(-3deg); }
.v7-media-card:nth-child(3) { transform: rotate(2deg) translateY(10px); }
.v7-media-card img,
.v7-media-card video { width: 100%; height: 100%; min-height: inherit; object-fit: cover; filter: saturate(1.12) contrast(1.08); }
.v7-media-card::before,
.v7-media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  animation: v7-card-glitch 4.2s steps(3,end) infinite;
}
.v7-media-card::before { background: linear-gradient(90deg, transparent, rgba(255,36,146,.28), rgba(125,255,43,.18), transparent); }
.v7-media-card::after { background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.14) 10px 11px); }
@keyframes v7-card-glitch {
  0%, 80%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  83% { opacity: .9; transform: translateX(14px); clip-path: inset(9% 0 66% 0); }
  87% { opacity: .68; transform: translateX(-17px); clip-path: inset(42% 0 30% 0); }
  91% { opacity: .82; transform: translateX(8px); clip-path: inset(72% 0 6% 0); }
}
.v7-media-card div {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.74);
  clip-path: var(--cut-sm);
}
.v7-media-card strong { color: var(--mint); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; }
.v7-media-card span { color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.3; }

.v7-system-chip {
  position: absolute;
  right: clamp(12px, 3vw, 48px);
  bottom: clamp(56px, 8vh, 96px);
  z-index: 10;
  width: min(300px, 27vw);
  padding: 10px;
  border: 1px solid rgba(125,255,43,.2);
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(10px);
  clip-path: var(--cut-sm);
  opacity: .55;
}


.v7-side-rain {
  position: absolute;
  inset: 0 auto 0 0; /* override the older .ascii-rain inset shorthand */
  width: clamp(130px, 16vw, 280px);
  z-index: 11;
  pointer-events: none;
  overflow: hidden;
  opacity: .72;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 95%, transparent 100%);
}
.v7-side-rain-left {
  inset: 0 auto 0 0;
  left: 0;
  right: auto;
  border-right: 1px solid rgba(255,36,146,.10);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%);
}
.v7-side-rain-right {
  inset: 0 0 0 auto;
  left: auto;
  right: 0;
  width: clamp(300px, 34vw, 620px);
  opacity: .82;
  z-index: 14;
  border-left: 1px solid rgba(125,255,43,.13);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 88%, transparent 100%);
}
.v7-side-rain-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(125,255,43,.16), transparent 31%),
    radial-gradient(circle at 38% 68%, rgba(255,36,146,.13), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(125,255,43,.035) 42px 43px),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(255,36,146,.035) 68px 69px);
  opacity: .72;
  pointer-events: none;
}
.v7-core-rain { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: .34; mask-image: radial-gradient(ellipse at 52% 50%, black 22%, transparent 68%); }

.v7-right-words {
  position: absolute;
  top: 8%;
  right: clamp(14px, 2vw, 34px);
  bottom: 12%;
  width: min(380px, 28vw);
  z-index: 22;
  pointer-events: none;
  mix-blend-mode: screen;
}
.v7-right-words span {
  position: absolute;
  display: block;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow: 0 0 16px currentColor;
  opacity: .52;
  animation: breachFlash 4.5s steps(2,end) infinite;
}
.v7-right-words span:nth-child(1) { top: 5%; right: 5%; font-size: 18px; color: rgba(255,36,146,.38); animation-delay: -.2s; }
.v7-right-words span:nth-child(2) { top: 19%; right: 28%; font-size: 14px; color: rgba(125,255,43,.34); animation-delay: -1.4s; }
.v7-right-words span:nth-child(3) { top: 39%; right: 3%; font-size: 17px; color: rgba(255,36,146,.30); animation-delay: -2.1s; }
.v7-right-words span:nth-child(4) { top: 57%; right: 21%; font-size: 13px; color: rgba(125,255,43,.30); animation-delay: -2.8s; }
.v7-right-words span:nth-child(5) { top: 73%; right: 12%; font-size: 16px; color: rgba(255,36,146,.28); animation-delay: -3.3s; }
.v7-right-words span:nth-child(6) { top: 86%; right: 30%; font-size: 12px; color: rgba(125,255,43,.28); animation-delay: -3.9s; }
.v7-side-rain span,
.v7-core-rain span {
  position: absolute;
  top: -12%;
  left: var(--x);
  color: var(--c);
  opacity: var(--o);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--s);
  text-shadow: 0 0 9px currentColor;
  white-space: nowrap;
  animation: fall var(--d) linear var(--delay) infinite;
  will-change: transform;
}

.v7-side-rain-right span {
  text-shadow: 0 0 12px currentColor, 0 0 2px currentColor;
}

.v7-side-rain-right span:nth-child(3n) { transform: translateX(-22px); }
.v7-side-rain-right span:nth-child(4n) { letter-spacing: .16em; }
.v7-side-rain-right span:nth-child(7n) { font-size: calc(var(--s) * 1.16); }
.v7-side-rain-right span:nth-child(11n) {
  opacity: calc(var(--o) * .86);
}
@keyframes v7-code-jitter {
  0%, 88%, 100% { opacity: var(--o); }
  90% { opacity: calc(var(--o) * .7); }
  92% { opacity: min(1, calc(var(--o) * 1.1)); }
}

html[data-corruption-phase="control"] .section-title,
html[data-corruption-phase="control"] .warning-title {
  text-shadow: 0 0 18px rgba(255,36,146,.26), 0 0 12px rgba(125,255,43,.1);
}

@media (max-width: 1100px) {
  .v7-claim { width: min(900px, 88vw); }
  .v7-title { font-size: clamp(56px, 12vw, 132px); }
  .v7-copy { width: min(560px, 62vw); }
  .v7-vye-art { width: min(820px, 76vw); }
  .v7-media-stack { width: min(340px, 36vw); }
}
@media (max-width: 900px) {
  .hero-v7 { padding-top: 66px; padding-bottom: 220px; }
  .v7-copy { padding: 14px 15px; }
  .v7-vye {
    inset: 18px 0 auto 0;
    height: 620px;
    padding-top: clamp(76px, 13vh, 112px);
    justify-content: flex-start;
  }
  .v7-caption { width: min(480px, calc(100% - 24px)); }
  .v7-media-card, .v7-media-card-large { grid-column: auto; min-height: 116px; }
  .v7-side-rain { width: 88px; opacity: .44; }
  .v7-side-rain-right { width: 160px; opacity: .62; }
  .v7-right-words { width: 140px; opacity: .8; }
}
@media (max-width: 560px) {
  .hero-v7 { padding-bottom: 210px; }
  .v7-vye {
    inset: 28px 0 auto 0;
    padding-top: 86px;
    transform: none;
  }
  .v7-vye.reveal, .v7-vye.reveal.is-visible { transform: none; }
  .v7-vye-art { width: 124vw; max-height: 380px; }
  .v7-caption { font-size: 12px; }
  .v7-media-stack { bottom: 96px; }
  .v7-actions .btn { width: auto; }
}

/* Mobile hero layout stability patch: keep art behind headline, keep media in flow. */
@media (max-width: 900px) {
  .hero-v7 {
    min-height: auto;
    padding: 66px 0 96px;
    overflow: hidden;
  }
  .v7-stage {
    width: min(100% - 20px, 1540px);
    min-height: auto;
    padding-bottom: 0;
    display: block;
  }
  .v7-claim {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    z-index: 20;
  }
  .v7-title {
    max-width: calc(100vw - 24px);
    font-size: clamp(48px, 14vw, 104px);
  }
  .v7-copy {
    position: relative;
    z-index: 22;
    width: min(620px, 100%);
    margin-top: 14px;
  }
  .v7-vye {
    position: absolute;
    top: clamp(34px, 6vh, 72px);
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(980px, 142vw);
    height: clamp(470px, 60svh, 620px);
    padding: 0;
    display: block;
    z-index: 8;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .v7-vye.reveal,
  .v7-vye.reveal.is-visible {
    transform: translateX(-50%);
  }
  .v7-vye::before {
    width: min(760px, 116vw);
    height: 72%;
    bottom: 7%;
  }
  .v7-vye-art {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    opacity: .78;
  }
  .v7-caption {
    display: none;
  }
  .v7-media-stack {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    z-index: 18;
    width: 100%;
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }
  .v7-media-card,
  .v7-media-card-large,
  .v7-media-card:nth-child(2),
  .v7-media-card:nth-child(3) {
    grid-column: auto;
    min-height: 128px;
    transform: none;
  }
  .v7-media-card img,
  .v7-media-card video {
    min-height: inherit;
  }
  .v7-system-chip {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero-v7 {
    min-height: auto;
    padding: 58px 0 72px;
  }
  .v7-stage {
    width: calc(100% - 18px);
    min-height: auto;
    padding-bottom: 0;
  }
  .v7-claim {
    top: auto;
    left: auto;
    right: auto;
  }
  .v7-title {
    font-size: clamp(40px, 15.6vw, 74px);
    line-height: .8;
    max-width: calc(100vw - 18px);
  }
  .v7-title span {
    max-width: 100%;
  }
  .v7-copy {
    width: 100%;
    padding: 12px 13px 14px;
    margin-top: 12px;
  }
  .v7-copy p {
    font-size: 12.5px;
    line-height: 1.55;
  }
  .v7-actions {
    gap: 8px;
  }
  .v7-actions .btn {
    min-height: 38px;
    padding: 10px 12px;
    flex: 1 1 140px;
  }
  .v7-vye {
    top: 44px;
    width: 158vw;
    height: 430px;
  }
  .v7-vye-art {
    opacity: .74;
  }
  .v7-media-stack {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .v7-media-card-large {
    grid-column: 1 / -1;
    min-height: 136px;
  }
  .v7-media-card {
    min-height: 108px;
  }
  .v7-media-card div {
    left: 7px;
    right: 7px;
    bottom: 7px;
    padding: 7px 8px;
  }
  .v7-media-card strong {
    font-size: 12px;
  }
  .v7-media-card span {
    font-size: 13px;
  }
  .v7-side-rain-right,
  .v7-right-words {
    opacity: .42;
  }
}

/* v11: make the control panel an actual inline launcher instead of a scroll menu */

@keyframes moduleIn {
  from { opacity: 0; transform: translateY(8px); filter: hue-rotate(65deg); }
  to { opacity: 1; transform: translateY(0); filter: none; }
}

.stabilizer-readout {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.2fr);
  gap: 12px;
  align-items: center;
}
.stabilizer-target {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.38);
  color: var(--mint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.stabilizer-timer {
  height: 10px;
  border: 1px solid rgba(125,255,43,.3);
  background: rgba(0,0,0,.5);
  overflow: hidden;
}
.stabilizer-timer i {
  display: block;
  width: var(--stabilizer-time, 0%);
  height: 100%;
  background: linear-gradient(90deg, rgba(125,255,43,.4), rgba(255,36,146,.7));
  transition: width .12s linear;
}

.stabilizer-token {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.46);
  color: rgba(255,255,255,.74);
  clip-path: var(--cut-sm);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.stabilizer-token:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(125,255,43,.55);
  color: var(--mint);
  background: rgba(125,255,43,.08);
}
.stabilizer-token:disabled {
  opacity: .62;
  cursor: not-allowed;
}
.stabilizer-token.is-hit {
  border-color: rgba(125,255,43,.8);
  color: var(--mint);
  background: rgba(125,255,43,.15);
}
.stabilizer-token.is-miss {
  border-color: rgba(255,36,146,.8);
  color: var(--soft);
  background: rgba(255,36,146,.16);
}

@media (max-width: 1180px) {



  .hub-primary { min-height: 320px; }
}
@media (max-width: 860px) {





  .stabilizer-readout{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stabilizer-target { grid-column: 1 / -1; }
}

/* v15: game-only maintenance panel */

.game-panel-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
  gap: 18px;
  margin-top: 20px;
  align-items: stretch;
}
.game-panel .os-panel-title { color: var(--soft); }
.game-panel-main {
  position: relative;
  min-height: 640px;
  border: 1px solid rgba(125,255,43,.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(125,255,43,.12), transparent 36%),
    linear-gradient(135deg, rgba(255,36,146,.1), transparent 58%),
    rgba(0,0,0,.54);
  clip-path: var(--cut);
  padding: clamp(16px, 2.4vw, 26px);
  overflow: hidden;
  box-shadow: inset 0 0 44px rgba(125,255,43,.06), 0 0 42px rgba(255,36,146,.1);
}
.game-panel-main::before,
.game-selector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 6px);
  opacity: .13;
  pointer-events: none;
}
.game-panel-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.game-panel-head strong {
  display: block;
  margin-top: 7px;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: clamp(30px, 4vw, 58px);
  line-height: .9;
}
.game-panel-head em,
.game-rule-card em,
.game-status {
  color: rgba(255,255,255,.64);
  font-style: normal;
  line-height: 1.45;
}
.game-cost-badge {
  border: 1px solid rgba(0,230,255,.42);
  background: rgba(0,230,255,.09);
  color: var(--cyan);
  padding: 10px 12px;
  clip-path: var(--cut-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  white-space: nowrap;
}
.game-pane {
  position: relative;
  z-index: 1;
  display: none;
  gap: 16px;
  margin-top: 18px;
}
.game-pane.is-active {
  display: grid;
  animation: moduleIn .22s steps(3,end) 1;
}
.game-rule-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.game-rule-card {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.38);
  clip-path: var(--cut-sm);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.game-rule-card span,
.game-status strong,
.game-selector-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  color: var(--mint);
}
.game-stage {
  position: relative;
  min-height: 280px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 50%),
    rgba(0,0,0,.42);
  clip-path: var(--cut-sm);
  padding: 16px;
  overflow: hidden;
}
.game-status {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.34);
  padding: 11px 12px;
  clip-path: var(--cut-sm);
  font-size: 13px;
}
.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.game-hint {
  color: rgba(255,255,255,.67);
  font-size: 12px;
  line-height: 1.45;
  max-width: 62ch;
}
.game-selector {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 640px;
  border: 1px solid rgba(255,36,146,.28);
  background:
    radial-gradient(circle at 80% 10%, rgba(255,36,146,.16), transparent 38%),
    rgba(0,0,0,.52);
  clip-path: var(--cut-sm);
  padding: 14px;
  overflow: hidden;
}
.game-selector-label { position: relative; z-index: 1; color: rgba(255,255,255,.8); padding: 4px 4px 2px; }
.game-select-button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  text-align: left;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.42);
  color: #fff;
  padding: 13px;
  clip-path: var(--cut-sm);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.game-select-button:hover,
.game-select-button.is-active {
  transform: translateY(-2px);
  border-color: rgba(125,255,43,.55);
  background: linear-gradient(135deg, rgba(125,255,43,.1), rgba(255,36,146,.08)), rgba(0,0,0,.58);
  box-shadow: 0 0 28px rgba(125,255,43,.08), 0 0 24px rgba(255,36,146,.08);
}
.game-select-button i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,36,146,.35);
  color: var(--soft);
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-style: normal;
  clip-path: var(--cut-sm);
  background: rgba(255,36,146,.08);
}
.game-select-button strong {
  display: block;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: .95;
  font-size: 20px;
}
.game-select-button span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.77);
  line-height: 1.35;
  font-size: 12px;
}
.game-unlock-status {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(0,230,255,.22);
  background: rgba(0,230,255,.065);
  color: rgba(255,255,255,.66);
  clip-path: var(--cut-sm);
  padding: 11px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.game-unlock-status strong {
  display: block;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  margin-bottom: 4px;
}
.game-reset-button {
  position: relative;
  z-index: 1;
  width: 100%;
  justify-content: center;
  border-color: rgba(255,255,255,.18);
  background:
    linear-gradient(135deg, rgba(255,36,146,.08), transparent 48%),
    rgba(0,0,0,.38);
  color: rgba(255,255,255,.72);
}
.game-reset-button:hover {
  border-color: rgba(255,36,146,.58);
  color: var(--soft);
  box-shadow: 0 0 24px rgba(255,36,146,.12);
}
.arg-clue-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255,36,146,.34);
  background:
    linear-gradient(135deg, rgba(255,36,146,.12), rgba(0,230,255,.055)),
    rgba(0,0,0,.48);
  clip-path: var(--cut-sm);
  padding: 12px;
  overflow: hidden;
}
.arg-clue-panel[hidden] { display: none; }
.arg-clue-title {
  color: var(--soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
}
.arg-clue-copy {
  color: rgba(255,255,255,.64);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.forbidden-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,36,146,.86);
  background:
    repeating-linear-gradient(90deg, rgba(255,36,146,.12) 0 7px, rgba(0,0,0,.28) 7px 14px),
    rgba(255,36,146,.12);
  color: var(--soft);
  clip-path: var(--cut-sm);
  cursor: pointer;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 13px;
  text-shadow: 0 0 12px rgba(255,36,146,.62);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  animation: forbiddenPulse 1.2s steps(2,end) infinite;
}
.forbidden-button:hover,
.forbidden-button.is-pressed {
  transform: translateY(-2px);
  background: rgba(255,36,146,.28);
  box-shadow: 0 0 26px rgba(255,36,146,.24), inset 0 0 22px rgba(255,36,146,.16);
}
@keyframes forbiddenPulse {
  0%,100% { filter: none; }
  50% { filter: saturate(1.55) hue-rotate(-12deg); }
}
.mantra-form {
  display: grid;
  gap: 8px;
}
.mantra-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(125,255,43,.28);
  background: rgba(0,0,0,.58);
  color: var(--mint);
  padding: 10px 11px;
  clip-path: var(--cut-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  outline: none;
}
.mantra-input:focus {
  border-color: rgba(125,255,43,.72);
  box-shadow: 0 0 18px rgba(125,255,43,.12);
}
.mantra-status {
  min-height: 16px;
  color: rgba(255,255,255,.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
}
.game-select-button.is-locked {
  display: none;
}
.rain-vye-trigger {
  pointer-events: none;
  cursor: default;
  user-select: none;
}
html[data-rain-clue="armed"] .rain-vye-trigger.is-vye-reveal {
  pointer-events: auto;
  cursor: pointer;
  color: var(--soft) !important;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(255,36,146,.78), 0 0 5px currentColor;
}
.ascii-rain .rain-vye-trigger { pointer-events: none; }
.ascii-rain .rain-vye-trigger.is-vye-reveal { pointer-events: auto; }
.rain-vye-trigger.is-arg-hit {
  color: #fff !important;
  filter: saturate(2.1);
  text-shadow: 0 0 24px rgba(125,255,43,.9), 0 0 18px rgba(255,36,146,.8);
}
.page-vye-trigger {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding-inline: .04em;
  user-select: text;
}
html[data-rain-clue="armed"] .page-vye-trigger.is-vye-reveal {
  animation: pageVyeRevealGlitch .68s steps(2,end) infinite;
}
html[data-rain-clue="armed"] .page-vye-trigger.is-vye-reveal::before,
html[data-rain-clue="armed"] .page-vye-trigger.is-vye-reveal::after {
  content: attr(title);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: screen;
}
html[data-rain-clue="armed"] .page-vye-trigger.is-vye-reveal::before {
  color: var(--cyan);
  transform: translate(-1px, 1px);
  clip-path: inset(44% 0 0 0);
}
html[data-rain-clue="armed"] .page-vye-trigger.is-vye-reveal::after {
  color: var(--pink);
  transform: translate(2px, -1px);
  clip-path: inset(0 0 52% 0);
}
@keyframes rainVyePulse {
  0%, 100% { opacity: var(--o); transform: translate3d(0,0,0); }
  50% { opacity: 1; transform: translate3d(2px,-1px,0); }
}
@keyframes pageVyeRevealGlitch {
  0%, 100% { transform: translate3d(0,0,0); filter: none; }
  18% { transform: translate3d(2px,-1px,0); filter: hue-rotate(36deg) saturate(1.8); }
  34% { transform: translate3d(-2px,1px,0); }
  52% { transform: translate3d(1px,0,0) skewX(-7deg); }
  70% { transform: translate3d(0,-1px,0) skewX(5deg); }
}
.game-grid,
.firewall-grid,
.quarantine-grid,
.memory-grid,
.route-grid,
.integrity-grid,
.captcha-grid {
  display: grid;
  gap: 8px;
}
.game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.firewall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 360px; margin: 0 auto; }
.quarantine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.memory-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integrity-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.captcha-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-token,
.file-token,
.route-token,
.integrity-block,
.captcha-token,
.firewall-node {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.46);
  color: rgba(255,255,255,.74);
  clip-path: var(--cut-sm);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.game-token:hover:not(:disabled),
.file-token:hover:not(:disabled),
.route-token:hover:not(:disabled),
.integrity-block:hover:not(:disabled),
.captcha-token:hover:not(:disabled),
.firewall-node:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(125,255,43,.55);
  color: var(--mint);
  background: rgba(125,255,43,.08);
}
.game-token:disabled,
.file-token:disabled,
.route-token:disabled,
.integrity-block:disabled,
.captcha-token:disabled,
.firewall-node:disabled { opacity: .62; cursor: not-allowed; }
.game-token.is-hit,
.file-token.is-selected,
.route-token.is-hit,
.integrity-block.is-cleared,
.captcha-token.is-selected,
.firewall-node.is-hit {
  border-color: rgba(125,255,43,.82);
  color: var(--mint);
  background: rgba(125,255,43,.16);
  box-shadow: 0 0 20px rgba(125,255,43,.1);
}
.game-token.is-miss,
.file-token.is-miss,
.route-token.is-miss,
.integrity-block.is-miss,
.captcha-token.is-miss,
.firewall-node.is-miss {
  border-color: rgba(255,36,146,.86);
  color: var(--soft);
  background: rgba(255,36,146,.18);
  box-shadow: 0 0 20px rgba(255,36,146,.12);
}
.game-token.is-vye-trap {
  border-color: rgba(255,36,146,.92);
  color: var(--soft);
  background: rgba(255,36,146,.22);
  text-shadow: 0 0 12px rgba(255,36,146,.6);
  animation: trapPulse .38s steps(2,end) infinite;
}
.game-token.is-trap-hit {
  border-color: rgba(255,36,146,1);
  color: #fff;
  background: rgba(255,36,146,.36);
  box-shadow: 0 0 28px rgba(255,36,146,.36);
}
@keyframes trapPulse {
  0%,100% { transform: translate(0); filter: none; }
  50% { transform: translate(2px,-1px); filter: hue-rotate(30deg); }
}
.firewall-node {
  aspect-ratio: 1;
  min-height: 72px;
  font-size: 18px;
}
.firewall-node.is-active {
  border-color: rgba(0,230,255,.86);
  color: var(--cyan);
  background: rgba(0,230,255,.13);
  box-shadow: 0 0 24px rgba(0,230,255,.18);
}
.signal-track {
  position: relative;
  height: 78px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(125,255,43,.14) 38% 55%, transparent 55% 100%),
    rgba(0,0,0,.48);
  overflow: hidden;
  clip-path: var(--cut-sm);
}
.signal-track::before {
  content: var(--css-005, "");
  position: absolute;
  left: 38%;
  top: 50%;
  width: 17%;
  transform: translateY(-50%);
  text-align: center;
  color: rgba(125,255,43,.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: .12em;
}
.signal-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--signal-pos, 0) * 1%);
  width: 4px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0,230,255,.45);
}
.containment-stage {
  position: relative;
  min-height: 360px;
}
.mini-popup {
  position: absolute;
  min-width: 120px;
  min-height: 58px;
  border: 1px solid rgba(255,36,146,.58);
  background: rgba(8,0,12,.92);
  color: var(--soft);
  clip-path: var(--cut-sm);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 0 18px rgba(255,36,146,.18);
}
.mini-popup[data-decoy="true"] {
  border-color: rgba(125,255,43,.44);
  color: var(--mint);
}
.memory-display,
.route-instruction,
.captcha-instruction {
  min-height: 54px;
  display: grid;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.42);
  color: var(--mint);
  clip-path: var(--cut-sm);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}
.scan-track {
  position: relative;
  height: 12px;
  border: 1px solid rgba(0,230,255,.28);
  background: rgba(0,0,0,.54);
  overflow: hidden;
}
.scan-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--scan-pos, 0) * 1%);
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(0,230,255,.62), transparent);
  transform: translateX(-50%);
}
.integrity-block { min-height: 54px; }
.integrity-block.is-scan-hot {
  border-color: rgba(0,230,255,.78);
  box-shadow: 0 0 16px rgba(0,230,255,.18);
}
@media (max-width: 980px) {

  .game-panel-layout,
  .game-panel-head { grid-template-columns: 1fr; }
  .game-selector { min-height: auto; }
  .game-rule-row,
  .quarantine-grid,
  .route-grid,
  .captcha-grid { grid-template-columns: 1fr; }
  .game-grid,
  .memory-grid,
  .integrity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Final-prompt Vye peek interaction. The final CTA card is the wall; the video layer sits outside the clipped card so the alpha animation can extend past the edge. */
.vye-wall-peek {
  position: absolute;
  left: var(--vye-wall-anchor);
  top: 50%;
  z-index: 4;
  width: clamp(300px, 30vw, 500px);
  height: min(92%, 560px);
  min-height: 300px;
  transform: translateY(-50%);
  pointer-events: none;
  isolation: isolate;
  --vye-wall-anchor: calc(clamp(-306px, -19.7vw, -226px) - 6px);
  --vye-wall-opacity: .72;
}
.vye-wall-peek[data-clue="armed"] {
  --vye-wall-opacity: .96;
}
.vye-wall-hitbox {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  pointer-events: none;
  overflow: visible;
}
.vye-wall-peek[data-clue="armed"] .vye-wall-hitbox {
  cursor: pointer;
  pointer-events: auto;
}
.vye-wall-video {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  transform-origin: left center;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  object-fit: contain;
  background: transparent;
  filter: saturate(1.1) contrast(1.04) drop-shadow(0 0 22px rgba(255,36,146,.24));
  transition: filter .18s ease;
  will-change: opacity, contents;
  pointer-events: none;
}
.vye-wall-video.is-active {
  opacity: var(--vye-wall-opacity);
  visibility: visible;
  z-index: 2;
}
.vye-wall-video.is-buffering {
  opacity: 0;
  visibility: hidden;
}
.vye-wall-fallback {
  display: none !important;
}
.vye-wall-peek[data-clue="armed"] .vye-wall-video {
  filter: saturate(1.16) contrast(1.08) drop-shadow(0 0 26px rgba(255,36,146,.34)) drop-shadow(0 0 14px rgba(125,255,43,.10));
}
.vye-wall-peek[data-state="chat"] .vye-wall-video {
  filter: saturate(1.24) contrast(1.08) drop-shadow(0 0 34px rgba(255,36,146,.44)) drop-shadow(0 0 18px rgba(125,255,43,.16));
}
@media (max-width: 760px) {
  .vye-wall-peek {
    width: 210px;
    height: min(78%, 340px);
    --vye-wall-anchor: -233px;
  }
  .vye-wall-video { width: 100%; }
}

.quarantine-stamped { position: relative; }
.quarantine-banner {
  text-transform: uppercase;
  font-weight: 900;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  transition: opacity .22s ease;
  backdrop-filter: blur(4px);
}
.quarantine-banner::after {
  content: var(--css-006, "");
  color: rgba(219,254,255,.72);
}
html[data-corruption-phase="system"] {
  --pink: #33cfff;
  --hot: #7ef3ff;
  --soft: #e4fdff;
  --green: #54ffd7;
  --mint: #c8fff3;
  --cyan: #8cf8ff;
  --line: rgba(51,207,255,.26);
  --line2: rgba(84,255,215,.28);
  --shadow: 0 0 0 1px rgba(51,207,255,.10), 0 24px 70px rgba(0,0,0,.42), 0 0 54px rgba(51,207,255,.14);
}
html[data-corruption-phase="system"] .topbar {
  background: linear-gradient(180deg, rgba(0,12,18,.84), rgba(0,12,18,.42));
}
html[data-corruption-phase="system"] .v7-copy p,
html[data-corruption-phase="system"] .v7-caption,
html[data-corruption-phase="system"] .section-lead,
html[data-corruption-phase="system"] .deck-copy,
html[data-corruption-phase="system"] .fact,
html[data-corruption-phase="system"] .log-card p,
html[data-corruption-phase="system"] .vault-file em,
html[data-corruption-phase="system"] .warning-copy,
html[data-corruption-phase="system"] .bubble,
html[data-corruption-phase="system"] .truth-line,
html[data-corruption-phase="system"] .toast-copy {
  color: rgba(219,252,255,.76);
}
html[data-corruption-phase="system"] .hero-title,
html[data-corruption-phase="system"] .section-title,
html[data-corruption-phase="system"] .warning-title,
html[data-corruption-phase="system"] .deck-title,
html[data-corruption-phase="system"] .sigil-title,
html[data-corruption-phase="system"] .node-label,
html[data-corruption-phase="system"] .hub-primary strong,
html[data-corruption-phase="system"] .hub-tile strong,
html[data-corruption-phase="system"] .log-card strong,
html[data-corruption-phase="system"] .vault-file strong {
  color: #e7feff;
  text-shadow: 0 0 18px rgba(92,245,255,.16);
}
html[data-corruption-phase="system"] .system-tag,
html[data-corruption-phase="system"] .system-tag.pink {
  border-color: rgba(84,255,215,.34);
  background: rgba(84,255,215,.12);
  color: var(--mint);
  box-shadow: 0 0 18px rgba(84,255,215,.06);
}
html[data-corruption-phase="system"] .btn,
html[data-corruption-phase="system"] .boot-card,
html[data-corruption-phase="system"] .signal-card,
html[data-corruption-phase="system"] .glass-card,
html[data-corruption-phase="system"] .v7-media-card,
html[data-corruption-phase="system"] .cinema,
html[data-corruption-phase="system"] .feature-viewer,
html[data-corruption-phase="system"] .os-panel,
html[data-corruption-phase="system"] .log-card,
html[data-corruption-phase="system"] .vault-file,
html[data-corruption-phase="system"] .final-cta,
html[data-corruption-phase="system"] .chat-sheet,
html[data-corruption-phase="system"] .game-panel,
html[data-corruption-phase="system"] .truth-card {
  border-color: rgba(51,207,255,.28);
  box-shadow: 0 0 0 1px rgba(51,207,255,.08), 0 18px 44px rgba(0,0,0,.34), 0 0 34px rgba(51,207,255,.08);
}
html[data-corruption-phase="system"] .btn {
  --btn-line: rgba(84,255,215,.42);
  --btn-bg: rgba(84,255,215,.10);
  color: #e7feff;
}
html[data-corruption-phase="system"] .btn.green {
  --btn-line: rgba(0,225,255,.44);
  --btn-bg: rgba(0,225,255,.10);
  color: #dffeff;
}
html[data-corruption-phase="system"] .meter-ring {
  background: conic-gradient(var(--cyan) calc(var(--meter, 8) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 34px rgba(0,0,0,.62), 0 0 42px rgba(100,246,255,.08);
}

html[data-corruption-phase="system"] .os-meter-block strong {
  color: #dffeff;
  text-shadow: 0 0 16px rgba(92,245,255,.28);
}
html[data-corruption-phase="system"] .truth-toast {
  border-color: rgba(84,255,215,.40);
  box-shadow: 0 0 28px rgba(84,255,215,.08), 0 0 28px rgba(51,207,255,.10);
}
html[data-corruption-phase="system"] .toast-title,
html[data-corruption-phase="system"] .terminal-label,
html[data-corruption-phase="system"] .log-type,
html[data-corruption-phase="system"] .os-meter-block span,
html[data-corruption-phase="system"] .vault-file span{
  color: rgba(201,255,246,.84);
}
html[data-corruption-phase="system"] .v7-aura {
  background:
    radial-gradient(circle at 48% 44%, rgba(0,225,255,.22), transparent 34%),
    radial-gradient(circle at 52% 60%, rgba(84,255,215,.12), transparent 40%),
    radial-gradient(circle at 46% 30%, rgba(255,36,146,.08), transparent 20%);
  filter: blur(8px);
}
html[data-corruption-phase="system"] .v7-right-words span {
  color: rgba(219,254,255,.62);
  text-shadow: 0 0 12px rgba(92,245,255,.16);
}
html[data-corruption-phase="system"] .quarantine-banner { opacity: .95; }

html[data-corruption-phase="system"] .hero-title,
html[data-corruption-phase="system"] .section-title,
html[data-corruption-phase="system"] .warning-title,
html[data-corruption-phase="system"] .deck-title,
html[data-corruption-phase="system"] .node-label,
html[data-corruption-phase="system"] .quarantine-banner,
html[data-corruption-phase="system"] .btn,
html[data-corruption-phase="system"] .system-tag,
html[data-corruption-phase="system"] .v7-right-words span,
html[data-corruption-phase="system"] .ascii-rain span {
  font-family: "NYXERIN", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
}
html[data-corruption-phase="system"] .hero-title {
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .92;
}
html[data-corruption-phase="system"] .btn,
html[data-corruption-phase="system"] .system-tag,
html[data-corruption-phase="system"] .quarantine-banner {
  text-transform: uppercase;
}
.quarantine-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 12;
  width: 100%;
  min-width: 0;
  max-width: none;
  aspect-ratio: 4 / 1;
  padding: 0;
  border: 0;
  background: url("/media/ui/quarantine-banner.webp?v=2c8c813caa") center / 100% auto no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
  clip-path: none;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)) drop-shadow(0 0 16px rgba(74,241,255,.12)) drop-shadow(0 0 8px rgba(255,82,181,.08));
  mix-blend-mode: screen;
  --qb-float-y-min: -7px;
  --qb-float-y-max: 7px;
}
.quarantine-banner::before,
.quarantine-banner::after {
  content: none;
  display: none;
}
/* The float moves only transform and opacity, which the compositor runs alone. Its drop-shadows used to pulse too,
   which repainted every banner on every frame (Lighthouse "non-composited animations", 2026-11-05); the shadow is
   now held at the middle of its old pulse, and the opacity still breathes it. */
html[data-corruption-phase="system"] .quarantine-banner {
  animation: quarantineFloat 5.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 19px rgba(0,0,0,.19)) drop-shadow(0 0 14px rgba(74,241,255,.12)) drop-shadow(0 0 8px rgba(255,82,181,.07));
}
@keyframes quarantineFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(var(--qb-float-y-min)) rotate(-1.2deg);
    opacity: var(--qb-opacity-min, .5);
  }
  50% {
    transform: translate(-50%, -50%) translateY(var(--qb-float-y-max)) rotate(1.2deg);
    opacity: var(--qb-opacity-max, 1);
  }
}
html[data-corruption-phase="system"] .visual-glitchable.is-stage-glitch,
html[data-corruption-phase="system"].system-prebreach-glitch .visual-glitchable {
  border-color: rgba(255,82,181,.32) !important;
  box-shadow: 0 0 0 1px rgba(255,82,181,.10), 0 18px 44px rgba(0,0,0,.34), 0 0 28px rgba(255,82,181,.14) !important;
  filter: saturate(1.08);
}
html[data-corruption-phase="system"] .ascii-rain span.is-stage-glitch,
html[data-corruption-phase="system"].system-prebreach-glitch .ascii-rain span {
  color: #ff91cb !important;
  text-shadow: 0 0 10px rgba(255,82,181,.22);
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  letter-spacing: .04em;
}
html[data-corruption-phase="system"].system-prebreach-glitch .hero-title,
html[data-corruption-phase="system"].system-prebreach-glitch .section-title,
html[data-corruption-phase="system"].system-prebreach-glitch .system-tag,
html[data-corruption-phase="system"].system-prebreach-glitch .btn,
html[data-corruption-phase="system"].system-prebreach-glitch .v7-right-words span {
  font-family: "Hacked", Impact, "Arial Black", sans-serif !important;
  color: #ffdff6;
  text-shadow: 0 0 16px rgba(255,82,181,.24);
}

html[data-corruption-phase="system"] .os-meter-block strong,
html[data-corruption-phase="system"] .toast-title,
html[data-corruption-phase="system"] .os-panel-title,
html[data-corruption-phase="system"] .game-panel-head strong,
html[data-corruption-phase="system"] .game-select-button strong,
html[data-corruption-phase="system"] .game-status strong {
  font-family: "NYXERIN", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .08em;
}

/* Quarantine-stage display text sizing for NYXERIN. */
html[data-corruption-phase="system"] .v7-title,
html[data-corruption-phase="system"] .hero-title {
  font-size: clamp(24px, 5.2vw, 76px) !important;
  line-height: 1.02 !important;
  letter-spacing: .025em !important;
  max-width: min(760px, 74vw);
}
html[data-corruption-phase="system"] .section-title,
html[data-corruption-phase="system"] .warning-title,
html[data-corruption-phase="system"] .final-cta .hero-title {
  font-size: clamp(26px, 4.4vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: .03em !important;
}
html[data-corruption-phase="system"] .deck-title,
html[data-corruption-phase="system"] .sigil-title,
html[data-corruption-phase="system"] .os-panel-title,
html[data-corruption-phase="system"] .game-panel-head strong{
  font-size: clamp(18px, 2.2vw, 34px) !important;
  line-height: 1.08 !important;
  letter-spacing: .04em !important;
}
html[data-corruption-phase="system"] .node-label,
html[data-corruption-phase="system"] .hub-primary strong,
html[data-corruption-phase="system"] .hub-tile strong,
html[data-corruption-phase="system"] .log-card strong,
html[data-corruption-phase="system"] .vault-file strong,
html[data-corruption-phase="system"] .game-select-button strong {
  font-size: clamp(13px, 1.55vw, 24px) !important;
  line-height: 1.05 !important;
  letter-spacing: .045em !important;
}

html[data-corruption-phase="system"] .os-meter-block strong {
  font-size: clamp(18px, 2.4vw, 34px) !important;
  line-height: 1 !important;
}
html[data-corruption-phase="system"] .v7-right-words span,
html[data-corruption-phase="system"] .ascii-rain span {
  font-size: min(var(--s), 15px) !important;
  letter-spacing: .035em !important;
}
@media (max-width: 860px) {
  html[data-corruption-phase="system"] .v7-title,
  html[data-corruption-phase="system"] .hero-title {
    font-size: clamp(24px, 10vw, 54px) !important;
    max-width: 100%;
  }
}

html[data-corruption-phase="system"] .os-meter-block strong,
html[data-corruption-phase="system"] [data-os-meter-value],
html[data-corruption-phase="system"] #energyValue {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900;
  letter-spacing: .04em;
}

/* Hero box cleanup: make the text panels smaller and let the middle/system
   caption sit above the left copy box when they overlap. */
.v7-copy {
  width: min(430px, 34vw) !important;
  padding: 12px 15px 14px !important;
  box-shadow: 0 0 26px rgba(255,36,146,.12) !important;
}

.v7-copy p {
  font-size: clamp(13px, .92vw, 15px) !important;
  line-height: 1.58 !important;
}

.v7-actions {
  gap: 9px !important;
  margin-top: 14px !important;
}

.v7-actions .btn {
  min-height: 38px !important;
  padding: 10px 13px !important;
  font-size: 12px !important;
}

/* Remove the parent stacking context so the caption can sit above the left box
   while the character art still stays behind the headline. */
.v7-vye {
  z-index: auto !important;
}

.v7-vye-art {
  position: relative;
  z-index: 4;
}

.v7-caption {
  position: relative !important;
  z-index: 12 !important;
  width: min(460px, 36vw) !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  box-shadow: 0 0 24px rgba(0,0,0,.3) !important;
}

/* Slightly tighten the claim area so the big text block doesn't sprawl. */
.v7-claim {
  width: min(900px, 62vw) !important;
}

@media (max-width: 1200px) {
  .v7-copy {
    width: min(400px, 40vw) !important;
  }
  .v7-caption {
    width: min(400px, 40vw) !important;
  }
}

@media (max-width: 900px) {
  .v7-copy,
  .v7-caption {
    width: min(100%, 420px) !important;
  }
}

/* v2: restore the quarantine headline size while keeping the smaller boxes. */
html[data-corruption-phase="system"] .v7-claim {
  width: min(1020px, 69vw) !important;
}

html[data-corruption-phase="system"] .v7-title,
html[data-corruption-phase="system"] .hero-title.v7-title {
  font-size: clamp(72px, 9vw, 154px) !important;
  line-height: .78 !important;
  max-width: 1020px !important;
  letter-spacing: .005em !important;
}

html[data-corruption-phase="system"] .v7-title span {
  display: block;
  width: fit-content;
}

@media (max-width: 1200px) {
  html[data-corruption-phase="system"] .v7-claim {
    width: min(960px, 74vw) !important;
  }

  html[data-corruption-phase="system"] .v7-title,
  html[data-corruption-phase="system"] .hero-title.v7-title {
    font-size: clamp(62px, 8.4vw, 128px) !important;
  }
}

@media (max-width: 900px) {
  html[data-corruption-phase="system"] .v7-claim {
    width: min(100%, 92vw) !important;
  }

  html[data-corruption-phase="system"] .v7-title,
  html[data-corruption-phase="system"] .hero-title.v7-title {
    font-size: clamp(44px, 11vw, 84px) !important;
    line-height: .84 !important;
  }
}

/* v3: keep the middle system caption a bit higher so it is visible by default. */
.v7-caption {
  margin-top: -34px !important;
  transform: translateY(-18px) !important;
}

@media (max-width: 1200px) {
  .v7-caption {
    margin-top: -26px !important;
    transform: translateY(-12px) !important;
  }
}

@media (max-width: 900px) {
  .v7-caption {
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* v4: staged glyph-scramble text glitch before committing to the alternate font/text. */
html[data-corruption-phase="system"] .system-glitchable.is-glyph-scramble {
  color: #a9fff0 !important;
  text-shadow:
    0 0 10px rgba(84,255,215,.34),
    2px 0 0 rgba(255,36,146,.28),
    -2px 0 0 rgba(0,255,213,.22) !important;
  filter: saturate(1.25);
  animation: glyphTextJitter .12s steps(2,end) infinite;
}

html[data-corruption-phase="system"] .system-glitchable.is-stage-glitch {
  color: #ff96d0 !important;
  text-shadow:
    0 0 12px rgba(255,84,184,.30),
    0 0 24px rgba(84,255,215,.10),
    2px 0 0 rgba(255,36,146,.22),
    -2px 0 0 rgba(0,255,213,.16) !important;
  font-family: "Hacked", Impact, "Arial Black", sans-serif !important;
  letter-spacing: .05em !important;
}

html[data-corruption-phase="system"] #watch .system-glitchable.pre50-committed,
html[data-corruption-phase="system"] #watch .system-glitchable.is-pre50-committed,
html[data-corruption-phase="system"] #watch #cinemaTag {
  font-family: "Hacked", Impact, "Arial Black", sans-serif !important;
  letter-spacing: .035em;
}

@keyframes glyphTextJitter {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(2px, 0); }
}

/* v5: smoother corruption phase transition. Colors/shadows/spacing fade while text swaps stagger. */
html.phase-transitioning,
html.phase-transitioning body,
html.phase-transitioning .topbar,
html.phase-transitioning .btn,
html.phase-transitioning .system-tag,
html.phase-transitioning .hero-title,
html.phase-transitioning .section-title,
html.phase-transitioning .warning-title,
html.phase-transitioning .deck-title,
html.phase-transitioning .sigil-title,
html.phase-transitioning .node-label,
html.phase-transitioning .v7-copy,
html.phase-transitioning .v7-caption,
html.phase-transitioning .glass-card,
html.phase-transitioning .boot-card,
html.phase-transitioning .signal-card,
html.phase-transitioning .v7-media-card,
html.phase-transitioning .cinema,
html.phase-transitioning .feature-viewer,
html.phase-transitioning .os-panel,
html.phase-transitioning .log-card,
html.phase-transitioning .vault-file {
  transition:
    color 1500ms ease,
    background-color 1500ms ease,
    border-color 1500ms ease,
    box-shadow 1500ms ease,
    text-shadow 1500ms ease,
    filter 1500ms ease,
    opacity 1500ms ease,
    letter-spacing 1500ms ease,
    font-size 1500ms ease,
    line-height 1500ms ease;
}

html.phase-transitioning .v7-title,
html.phase-transitioning .section-title,
html.phase-transitioning .deck-title {
  filter: saturate(1.15);
}

/* v9: keep Vye's Kit nodes above the neighboring feature panel so orbit items
   on the right side do not get hidden behind it. */
.orbit-area {
  position: relative;
  overflow: visible;
}

.sigil-board {
  position: relative;
  z-index: 4;
  isolation: isolate;
  overflow: visible;
}

.sigil-core {
  z-index: 5;
}

.sigil-board::before,
.sigil-board::after {
  z-index: 1;
  pointer-events: none;
}

.node {
  z-index: 8;
}

.feature-viewer {
  position: relative;
  z-index: 2;
}

/* v10: game panel starts in a cleaner system palette, then slowly corrupts up to 50%. */
html {
  --game-clean-strength: 1;
  --game-corrupt-strength: 0;
}

.os-panel.game-panel,
.os-panel.game-panel .os-panel-top,
.os-panel.game-panel .game-panel-main,
.os-panel.game-panel .game-selector,
.os-panel.game-panel .game-panel-head,
.os-panel.game-panel .game-cost-badge,
.os-panel.game-panel .game-rule-card,
.os-panel.game-panel .game-stage,
.os-panel.game-panel .game-status,
.os-panel.game-panel .game-select-button,
.os-panel.game-panel .game-select-button i,
.os-panel.game-panel .game-unlock-status,
.os-panel.game-panel .game-reset-button,
.os-panel.game-panel .os-meter-block,
.os-panel.game-panel .energy-meter-block,
.os-panel.game-panel .game-panel-head strong,
.os-panel.game-panel .game-select-button strong,
.os-panel.game-panel .terminal-label,
.os-panel.game-panel .game-selector-label,
.os-panel.game-panel .game-status strong {
  transition:
    color 480ms ease,
    background 480ms ease,
    border-color 480ms ease,
    box-shadow 480ms ease,
    text-shadow 480ms ease,
    opacity 480ms ease;
}

html[data-corruption-phase="system"] .os-panel.game-panel {
  border-color: rgba(51,207,255, calc(.34 * var(--game-clean-strength) + .10 * var(--game-corrupt-strength)));
  background:
    linear-gradient(135deg, rgba(51,207,255, calc(.16 * var(--game-clean-strength))), transparent 36%),
    linear-gradient(315deg, rgba(84,255,215, calc(.11 * var(--game-clean-strength))), transparent 38%),
    linear-gradient(35deg, rgba(255,36,146, calc(.10 * var(--game-corrupt-strength))), transparent 46%),
    rgba(3,8,14,.84);
  box-shadow:
    0 0 0 1px rgba(51,207,255, calc(.12 * var(--game-clean-strength))),
    0 24px 70px rgba(0,0,0,.42),
    0 0 44px rgba(51,207,255, calc(.14 * var(--game-clean-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .os-panel-top {
  border-bottom-color: rgba(51,207,255, calc(.30 * var(--game-clean-strength) + .10 * var(--game-corrupt-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-panel-main,
html[data-corruption-phase="system"] .os-panel.game-panel .game-selector {
  border-color: rgba(51,207,255, calc(.28 * var(--game-clean-strength) + .12 * var(--game-corrupt-strength)));
  background:
    radial-gradient(circle at 82% 14%, rgba(51,207,255, calc(.16 * var(--game-clean-strength))), transparent 34%),
    linear-gradient(135deg, rgba(51,207,255, calc(.10 * var(--game-clean-strength))), transparent 58%),
    linear-gradient(315deg, rgba(255,36,146, calc(.08 * var(--game-corrupt-strength))), transparent 68%),
    rgba(0,0,0,.56);
  box-shadow:
    inset 0 0 44px rgba(51,207,255, calc(.06 * var(--game-clean-strength))),
    0 0 38px rgba(51,207,255, calc(.08 * var(--game-clean-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-panel-head {
  border-bottom-color: rgba(51,207,255, calc(.24 * var(--game-clean-strength) + .10 * var(--game-corrupt-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-panel-head strong,
html[data-corruption-phase="system"] .os-panel.game-panel .game-select-button strong {
  color: #eaffff;
  text-shadow:
    0 0 14px rgba(51,207,255, calc(.20 * var(--game-clean-strength))),
    0 0 10px rgba(255,36,146, calc(.10 * var(--game-corrupt-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .terminal-label,
html[data-corruption-phase="system"] .os-panel.game-panel .game-selector-label,
html[data-corruption-phase="system"] .os-panel.game-panel .game-status strong {
  color: rgba(200,255,243, calc(.92 * var(--game-clean-strength) + .65 * var(--game-corrupt-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-cost-badge,
html[data-corruption-phase="system"] .os-panel.game-panel .game-unlock-status {
  border-color: rgba(51,207,255, calc(.40 * var(--game-clean-strength) + .16 * var(--game-corrupt-strength)));
  background:
    linear-gradient(135deg, rgba(51,207,255, calc(.12 * var(--game-clean-strength))), rgba(255,36,146, calc(.06 * var(--game-corrupt-strength)))),
    rgba(0,0,0,.32);
  color: rgba(140,248,255, calc(.96 * var(--game-clean-strength) + .74 * var(--game-corrupt-strength)));
  box-shadow: 0 0 20px rgba(51,207,255, calc(.08 * var(--game-clean-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-rule-card,
html[data-corruption-phase="system"] .os-panel.game-panel .game-stage,
html[data-corruption-phase="system"] .os-panel.game-panel .game-status {
  border-color: rgba(51,207,255, calc(.22 * var(--game-clean-strength) + .10 * var(--game-corrupt-strength)));
  background:
    linear-gradient(135deg, rgba(51,207,255, calc(.07 * var(--game-clean-strength))), transparent 52%),
    rgba(0,0,0,.38);
  box-shadow: inset 0 0 22px rgba(51,207,255, calc(.04 * var(--game-clean-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-select-button {
  border-color: rgba(51,207,255, calc(.24 * var(--game-clean-strength) + .10 * var(--game-corrupt-strength)));
  background:
    linear-gradient(135deg, rgba(51,207,255, calc(.09 * var(--game-clean-strength))), rgba(255,36,146, calc(.05 * var(--game-corrupt-strength)))),
    rgba(0,0,0,.42);
  box-shadow: 0 0 18px rgba(51,207,255, calc(.05 * var(--game-clean-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-select-button:hover,
html[data-corruption-phase="system"] .os-panel.game-panel .game-select-button.is-active {
  border-color: rgba(84,255,215, calc(.52 * var(--game-clean-strength) + .16 * var(--game-corrupt-strength)));
  background:
    linear-gradient(135deg, rgba(84,255,215, calc(.14 * var(--game-clean-strength))), rgba(255,36,146, calc(.08 * var(--game-corrupt-strength)))),
    rgba(0,0,0,.58);
  box-shadow:
    0 0 28px rgba(84,255,215, calc(.10 * var(--game-clean-strength))),
    0 0 24px rgba(255,36,146, calc(.08 * var(--game-corrupt-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-select-button i {
  border-color: rgba(51,207,255, calc(.34 * var(--game-clean-strength) + .14 * var(--game-corrupt-strength)));
  background: rgba(51,207,255, calc(.10 * var(--game-clean-strength) + .04 * var(--game-corrupt-strength)));
  color: #f0ffff;
  box-shadow: inset 0 0 10px rgba(51,207,255, calc(.08 * var(--game-clean-strength)));
}

html[data-corruption-phase="system"] .os-panel.game-panel .game-reset-button {
  border-color: rgba(51,207,255, calc(.22 * var(--game-clean-strength) + .16 * var(--game-corrupt-strength)));
  background:
    linear-gradient(135deg, rgba(51,207,255, calc(.07 * var(--game-clean-strength))), rgba(255,36,146, calc(.05 * var(--game-corrupt-strength)))),
    rgba(0,0,0,.38);
  color: rgba(255,255,255,.78);
}

/* v11: permanent pre-50 staged corruption reveal. The page keeps the
   quarantine shell, but text, font, and color bleed toward the post-50 state
   as corruption rises. */
html {
  --pre50-reveal-progress: 0;
  --pre50-clean-strength: 1;
  --pre50-corrupt-strength: 0;
  --pre50-accent: rgba(51,207,255,.28);
  --pre50-hot: #7ef3ff;
  --pre50-text: #e7feff;
  --pre50-muted: rgba(219,252,255,.76);
  --pre50-border: rgba(51,207,255,.28);
  --pre50-shadow: rgba(51,207,255,.10);
  --pre50-pink-shadow: rgba(255,36,146,0);
}

html[data-corruption-phase="system"] body,
html[data-corruption-phase="system"] .topbar,
html[data-corruption-phase="system"] .btn,
html[data-corruption-phase="system"] .system-tag,
html[data-corruption-phase="system"] .boot-card,
html[data-corruption-phase="system"] .signal-card,
html[data-corruption-phase="system"] .glass-card,
html[data-corruption-phase="system"] .v7-media-card,
html[data-corruption-phase="system"] .cinema,
html[data-corruption-phase="system"] .feature-viewer,
html[data-corruption-phase="system"] .os-panel,
html[data-corruption-phase="system"] .log-card,
html[data-corruption-phase="system"] .vault-file,
html[data-corruption-phase="system"] .final-cta,
html[data-corruption-phase="system"] .chat-sheet,
html[data-corruption-phase="system"] .game-panel,
html[data-corruption-phase="system"] .truth-card,
html[data-corruption-phase="system"] .section-title,
html[data-corruption-phase="system"] .warning-title,
html[data-corruption-phase="system"] .deck-title,
html[data-corruption-phase="system"] .sigil-title,
html[data-corruption-phase="system"] .node-label,
html[data-corruption-phase="system"] .v7-title,
html[data-corruption-phase="system"] .v7-caption,
html[data-corruption-phase="system"] .v7-copy p {
  transition:
    color 700ms ease,
    background 700ms ease,
    border-color 700ms ease,
    box-shadow 700ms ease,
    text-shadow 700ms ease,
    filter 700ms ease,
    opacity 700ms ease,
    letter-spacing 700ms ease;
}

html[data-corruption-phase="system"] body {
  background:
    radial-gradient(circle at 16% -8%, rgba(0,198,255, calc(.22 * var(--pre50-clean-strength))), transparent 32%),
    radial-gradient(circle at 18% -8%, rgba(255,36,146, calc(.25 * var(--pre50-corrupt-strength))), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(84,255,215, calc(.12 * var(--pre50-clean-strength))), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(125,255,43, calc(.10 * var(--pre50-corrupt-strength))), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(0,120,140, calc(.18 * var(--pre50-clean-strength))), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(96,0,90, calc(.22 * var(--pre50-corrupt-strength))), transparent 62%),
    var(--bg);
}

html[data-corruption-phase="system"] .btn,
html[data-corruption-phase="system"] .system-tag,
html[data-corruption-phase="system"] .boot-card,
html[data-corruption-phase="system"] .signal-card,
html[data-corruption-phase="system"] .glass-card,
html[data-corruption-phase="system"] .v7-media-card,
html[data-corruption-phase="system"] .cinema,
html[data-corruption-phase="system"] .feature-viewer,
html[data-corruption-phase="system"] .os-panel,
html[data-corruption-phase="system"] .log-card,
html[data-corruption-phase="system"] .vault-file,
html[data-corruption-phase="system"] .final-cta,
html[data-corruption-phase="system"] .chat-sheet,
html[data-corruption-phase="system"] .game-panel,
html[data-corruption-phase="system"] .truth-card {
  border-color: var(--pre50-border) !important;
  box-shadow:
    0 0 0 1px var(--pre50-shadow),
    0 18px 44px rgba(0,0,0,.34),
    0 0 34px var(--pre50-shadow),
    0 0 30px var(--pre50-pink-shadow) !important;
}

html[data-corruption-phase="system"] .topbar {
  border-bottom-color: var(--pre50-border) !important;
  box-shadow: 0 0 26px var(--pre50-pink-shadow);
}

html[data-corruption-phase="system"] .system-glitchable.is-pre50-committed,
html[data-corruption-phase="system"] .pre50-committed {
  font-family: "Hacked", Impact, "Arial Black", sans-serif !important;
  letter-spacing: .045em !important;
  color: #ffd9f1 !important;
  text-shadow:
    0 0 14px rgba(255,36,146,.30),
    0 0 22px rgba(125,255,43,.10) !important;
}

html[data-corruption-phase="system"] .pre50-committed[data-pre50-kind="body"],
html[data-corruption-phase="system"] .pre50-committed[data-pre50-kind="caption"] {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: normal !important;
  color: rgba(255,230,246,.82) !important;
  text-shadow: 0 0 12px rgba(255,36,146,.12) !important;
}

html[data-corruption-phase="system"] .pre50-committed[data-pre50-kind="label"],
html[data-corruption-phase="system"] .pre50-committed[data-pre50-kind="button"] {
  color: var(--mint) !important;
}

html[data-corruption-phase="system"] .pre50-committed::selection,
html[data-corruption-phase="system"] .system-glitchable.is-stage-glitch::selection {
  background: rgba(255,36,146,.38);
  color: #fff;
}

html[data-corruption-phase="system"].pre50-final-leak .quarantine-banner {
  opacity: 0 !important;
  animation: none !important;
}

/* v13: button label swaps now use the same glitch/font language without layout jumps. */
.btn.button-label-locked,
.btn[data-glitch-label],
.btn[data-chat-glitch-cycle="true"] {
  white-space: nowrap;
  min-width: min(var(--btn-stable-min-width, 0px), 100%);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn.chat-glitch-button {
  max-width: min(var(--chat-btn-max-width, 320px), 100%);
}

.btn.is-label-tight {
  font-size: var(--btn-tight-font-size, 12px) !important;
  letter-spacing: var(--btn-tight-letter-spacing, .085em) !important;
  line-height: 1.15 !important;
}

.btn.tiny.is-label-tight {
  font-size: min(var(--btn-tight-font-size, 12px), 12px) !important;
  letter-spacing: .055em !important;
}

.btn.is-glitching,
.btn.chat-label-transitioning,
html[data-corruption-phase="system"] .btn.system-glitchable.is-stage-glitch {
  font-family: "Hacked", Impact, "Arial Black", sans-serif !important;
  color: #ffd6ef !important;
  letter-spacing: .105em !important;
  text-shadow:
    0 0 11px rgba(255,36,146,.36),
    2px 0 0 rgba(255,36,146,.28),
    -2px 0 0 rgba(0,255,213,.22),
    0 0 22px rgba(125,255,43,.12) !important;
  animation: chatButtonLabelGlitch .105s steps(2,end) infinite;
}

.btn.is-glitching::after,
.btn.chat-label-transitioning::after {
  transform: translateX(130%);
  transition-duration: .22s;
}

.btn.chat-label-transitioning {
  border-color: rgba(255,36,146,.68) !important;
  box-shadow:
    0 0 0 1px rgba(255,36,146,.18),
    0 0 25px rgba(255,36,146,.20),
    0 0 16px rgba(125,255,43,.10) !important;
}

@keyframes chatButtonLabelGlitch {
  0%, 100% { transform: translate(0, 0); filter: saturate(1.05); }
  24% { transform: translate(1px, -1px); filter: saturate(1.45) hue-rotate(12deg); }
  48% { transform: translate(-1px, 1px); filter: saturate(1.25) hue-rotate(-10deg); }
  72% { transform: translate(2px, 0); filter: saturate(1.55); }
}

/* v12: keep the top/hero section visually clean until corruption reaches 7%. */
html[data-corruption-phase="system"].pre50-visual-locked body {
  background:
    radial-gradient(circle at 16% -8%, rgba(0,198,255,.20), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(140,248,255,.08), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(0,80,110,.14), transparent 62%),
    var(--bg) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .hero-v7 {
  background:
    radial-gradient(circle at 50% 35%, rgba(0,198,255,.18), transparent 36%),
    radial-gradient(circle at 72% 48%, rgba(140,248,255,.055), transparent 30%),
    linear-gradient(90deg, rgba(0,198,255,.035), transparent 20%, transparent 76%, rgba(140,248,255,.025)),
    #04070c !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .hero-v7::before {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(0,198,255,.025) 88px 89px) !important;
  opacity: .18 !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .hero-v7::after {
  opacity: .055 !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-aura {
  background:
    radial-gradient(circle at 48% 44%, rgba(0,198,255,.16), transparent 36%),
    radial-gradient(circle at 52% 60%, rgba(140,248,255,.065), transparent 42%) !important;
  filter: blur(10px) saturate(.82) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-title {
  animation: none !important;
  text-shadow: 0 0 14px rgba(92,245,255,.13), 0 16px 42px rgba(0,0,0,.62) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-title::before,
html[data-corruption-phase="system"].pre50-visual-locked .v7-title::after {
  opacity: 0 !important;
  animation: none !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-side-rain {
  opacity: .20 !important;
  filter: saturate(.62) brightness(.88) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-side-rain-right {
  opacity: .24 !important;
  border-left-color: rgba(140,248,255,.055) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-side-rain-left {
  border-right-color: rgba(140,248,255,.045) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-side-rain-right::before {
  background:
    radial-gradient(circle at 72% 24%, rgba(0,198,255,.08), transparent 31%),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(140,248,255,.018) 42px 43px),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(0,198,255,.018) 68px 69px) !important;
  opacity: .22 !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-core-rain {
  opacity: .10 !important;
  filter: saturate(.6) brightness(.8) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .ascii-rain span,
html[data-corruption-phase="system"].pre50-visual-locked .v7-side-rain span,
html[data-corruption-phase="system"].pre50-visual-locked .v7-core-rain span {
  color: rgba(140,248,255,.46) !important;
  text-shadow: 0 0 8px rgba(92,245,255,.12) !important;
  opacity: min(var(--o), .22) !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-right-words span {
  color: rgba(219,254,255,.26) !important;
  opacity: .24 !important;
  text-shadow: 0 0 9px rgba(92,245,255,.10) !important;
  animation: none !important;
}

html[data-corruption-phase="system"].pre50-visual-locked .v7-media-card::before,
html[data-corruption-phase="system"].pre50-visual-locked .v7-media-card::after {
  opacity: 0 !important;
  animation: none !important;
}

/* Vector labels: system-mode labels may wrap at spaces, but should stay readable. */
html[data-corruption-phase="system"] .node {
  width: clamp(158px, 14vw, 214px);
  min-height: 94px;
  padding: 12px;
}
html[data-corruption-phase="system"] .node .node-label,
html[data-corruption-phase="system"] .node .node-small {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
@media (max-width: 900px) {
  html[data-corruption-phase="system"] .node {
    flex-basis: 212px;
  }
}

/* Responsive cleanup layer 窶・scoped to tablets / phones only. Desktop (>1180px with mouse/trackpad) is unchanged. */
@media (max-width: 1180px), (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  :root {
    --mobile-gutter: clamp(14px, 3.2vw, 28px);
    --mobile-section-gap: clamp(44px, 7vw, 72px);
  }

  body::before { opacity: .45; background-size: 56px 56px; }
  body::after { opacity: .065; }
  .site-rain { opacity: .35; }
  .wrap { width: min(var(--max), calc(100% - (var(--mobile-gutter) * 2))) !important; }

  .topbar {
    background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.62)) !important;
    backdrop-filter: blur(18px);
  }

  .patreon-auth-button {
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    white-space: nowrap;
  }

  .hero,
  .hero-v7 {
    padding-top: 78px !important;
  }
  .section { padding: var(--mobile-section-gap) 0 !important; }
  .section-title,
  .warning-title {
    font-size: clamp(34px, 9.5vw, 72px) !important;
    line-height: .9 !important;
    max-width: 100% !important;
  }
  .section-lead,
  .warning-copy,
  .deck-copy,
  .feature-copy p {
    font-size: clamp(14px, 2.1vw, 16px) !important;
    line-height: 1.62 !important;
  }
  .system-tag {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    letter-spacing: .14em !important;
  }

  .hero-v7 {
    min-height: auto !important;
    padding-bottom: clamp(54px, 8vw, 82px) !important;
    overflow: hidden !important;
  }
  .hero-v7::before { opacity: .16 !important; }
  .hero-v7::after { opacity: .08 !important; }
  .v7-stage {
    min-height: auto !important;
    padding-bottom: 0 !important;
    display: block !important;
  }
  .v7-aura { opacity: .7 !important; }
  .v7-side-rain,
  .v7-core-rain,
  .v7-right-words {
    opacity: .28 !important;
  }
  .v7-claim {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 20 !important;
    width: min(100%, 760px) !important;
  }
  .v7-title,
  html[data-corruption-phase="system"] .v7-title,
  html[data-corruption-phase="system"] .hero-title.v7-title {
    font-size: clamp(44px, 10.8vw, 92px) !important;
    line-height: .82 !important;
    max-width: 100% !important;
  }
  .v7-copy {
    position: relative !important;
    z-index: 22 !important;
    width: min(100%, 560px) !important;
    margin-top: 14px !important;
    padding: 14px 15px !important;
    background: rgba(0,0,0,.68) !important;
    backdrop-filter: blur(14px);
  }
  .v7-copy p {
    font-size: clamp(13px, 2vw, 15px) !important;
    line-height: 1.56 !important;
  }
  .v7-actions { gap: 8px !important; margin-top: 13px !important; }
  .v7-actions .btn { min-height: 40px !important; padding: 10px 12px !important; }
  .v7-vye {
    top: clamp(58px, 8vw, 86px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(980px, 100vw) !important;
    height: clamp(380px, 54svh, 600px) !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
    opacity: .72 !important;
    pointer-events: none !important;
  }
  .v7-vye.reveal,
  .v7-vye.reveal.is-visible { transform: translateX(-50%) !important; }
  .v7-vye-art {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: top center !important;
  }
  .v7-caption { display: none !important; }
  .v7-media-stack {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 24 !important;
    width: 100% !important;
    margin-top: 18px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .v7-media-card,
  .v7-media-card-large,
  .v7-media-card:nth-child(2),
  .v7-media-card:nth-child(3) {
    transform: none !important;
    min-height: clamp(116px, 18vw, 168px) !important;
    grid-column: auto !important;
  }
  .v7-media-card div {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    padding: 8px 9px !important;
  }
  .v7-media-card strong { font-size: 13px !important; }
  .v7-media-card span { font-size: 13px !important; line-height: 1.3 !important; }

  .cinema,
  .orbit-area,
  .final-cta,
  .vault-layout,
  .game-panel-layout,
  .game-panel-head {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .cinema-copy,
  .feature-copy,
  .final-cta,
  .os-panel,
  .game-panel-main{
    padding: clamp(16px, 3.2vw, 24px) !important;
  }
  .media-window { min-height: clamp(280px, 45vw, 430px) !important; }
  .feature-viewer .media-window { min-height: clamp(260px, 42vw, 380px) !important; height: clamp(260px, 42vw, 380px) !important; }
  .feature-viewer,
  .hub-primary,
  .game-panel-main{ min-height: auto !important; }

  .feature-facts,
  .log-grid,
  .game-rule-row,
  .quarantine-grid,
  .route-grid,
  .captcha-grid {
    grid-template-columns: 1fr !important;
  }
  .truth-card,
  .log-card,
  .vault-file{ min-height: auto !important; }
  .sigil-board {
    min-height: 0 !important;
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 6px 0 18px !important;
    scroll-snap-type: x mandatory;
  }
  .sigil-board::before,
  .sigil-board::after,
  .sigil-core { display: none !important; }
  .node,
  html[data-corruption-phase="system"] .node {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    translate: none !important;
    flex: 0 0 min(220px, 72vw) !important;
    width: auto !important;
    min-height: 92px !important;
    scroll-snap-align: start;
  }


  .cinema-controls .btn,
  .cta-actions .btn { width: 100% !important; }
  .vye-wall-peek { opacity: .35 !important; }
  .toast-zone {
    left: var(--mobile-gutter) !important;
    right: var(--mobile-gutter) !important;
    top: 74px !important;
    width: auto !important;
  }
  .truth-toast { padding: 12px 13px !important; }
}

@media (max-width: 860px) {
  .mobile-word-rain { display: block !important; }
  .hero-word-rain { display: none !important; }
  body::before { opacity: .28; }
  body::after { opacity: .045; }
  .site-rain,
  .v7-side-rain,
  .v7-core-rain,
  .v7-right-words,
  .edge-rain { display: none !important; }
  .patreon-auth-button {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .btn {
    min-height: 42px !important;
    padding: 11px 13px !important;
    letter-spacing: .12em !important;
  }
  .glass-card,
  .boot-card,
  .signal-card,
  .cinema,
  .feature-viewer,
  .truth-card,
  .hub-primary,
  .hub-tile,
  .log-card,
  .vault-file,
  .chat-msg,
  .bubble {
    clip-path: none !important;
  }

  .hero-v7 {
    padding-top: 66px !important;
    padding-bottom: 28px !important;
  }
  .v7-stage { width: calc(100% - 18px) !important; }
  .v7-title,
  html[data-corruption-phase="system"] .v7-title,
  html[data-corruption-phase="system"] .hero-title.v7-title {
    font-size: clamp(36px, 13.8vw, 68px) !important;
    line-height: .82 !important;
  }
  .v7-copy {
    width: 100% !important;
    padding: 12px 13px 14px !important;
    clip-path: none !important;
  }
  .v7-actions .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .v7-vye {
    top: 58px !important;
    width: 156vw !important;
    height: 390px !important;
    opacity: .42 !important;
  }
  .v7-media-stack {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }
  .mobile-section-nav { margin: 0 !important; }
  #watch.section { padding-top: 24px !important; }
  .v7-media-card:not(.v7-media-card-large) { display: none !important; }
  .v7-media-card-large { min-height: 168px !important; }

  .section { padding: 42px 0 !important; }
  .section-title,
  .warning-title {
    font-size: clamp(30px, 11vw, 54px) !important;
    letter-spacing: .02em !important;
  }
  .system-tag { font-size: 12px !important; }
  .media-window { min-height: 240px !important; }
  .feature-viewer .media-window { min-height: 230px !important; height: 230px !important; }
  .cinema-copy,
  .feature-copy,
  .final-cta,
  .os-panel,
  .game-panel-main{ padding: 15px !important; }
  .deck-meta { font-size: 12px !important; }
  .os-panel-meters,
  .stabilizer-readout,
  .game-grid,
  .memory-grid,
  .integrity-grid { grid-template-columns: 1fr !important; }
  .vye-wall-peek { display: none !important; }
  .chat-sheet {
    max-height: 88svh !important;
  }
  .chat-head,
  .chat-body,
  .chat-form { padding-inline: 15px !important; }
  .chat-form { grid-template-columns: 1fr !important; }
}

@media (max-width: 520px) {
  :root { --mobile-gutter: 12px; }
  .patreon-auth-button { min-width: 0 !important; }
  .hero-v7 { padding-top: 62px !important; }
  .v7-title,
  html[data-corruption-phase="system"] .v7-title,
  html[data-corruption-phase="system"] .hero-title.v7-title {
    font-size: clamp(34px, 13.2vw, 56px) !important;
  }
  .v7-vye { height: 340px !important; width: 172vw !important; }
  .v7-media-card-large { min-height: 148px !important; }
  .corruption-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    opacity: .82;
  }

  .corruption-bar small { display: none !important; }
  .corruption-track { height: 6px !important; }
  .truth-toast { clip-path: none !important; }
}

/* Bottom forbidden room: keeps the rain minigame and Vye wall in a dedicated playfield.
   The wall video is now positioned with a measured video-coordinate anchor instead of
   percentage/vw offsets, so the same point inside the movie stays locked to the box wall. */
.forbidden-room-section {
  position: relative;
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(86px, 12vw, 150px);
  overflow-x: clip;
  overflow-y: visible;
  --forbidden-scroll-depth: clamp(5600px, 920vh, 11200px);
}
.forbidden-room-section::before {
  content: "";
  display: block;
  height: var(--forbidden-scroll-depth);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,36,146,.08), transparent 30%),
    radial-gradient(circle at 52% 52%, rgba(125,255,43,.045), transparent 24%),
    radial-gradient(circle at 48% 70%, rgba(255,36,146,.065), transparent 22%),
    linear-gradient(to bottom, transparent, rgba(125,255,43,.035) 42%, rgba(255,36,146,.025) 72%, transparent 94%);
  opacity: .86;
}
.forbidden-scroll-marker {
  position: absolute;
  left: 50%;
  z-index: 3;
  width: min(560px, calc(100% - 36px));
  transform: translateX(-50%);
  border: 1px solid rgba(255,36,146,.36);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 48%),
    rgba(0,0,0,.58);
  color: rgba(255,255,255,.76);
  padding: clamp(18px, 3vw, 28px);
  clip-path: var(--cut-sm);
  box-shadow: 0 0 34px rgba(255,36,146,.11), inset 0 0 24px rgba(0,0,0,.38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(13px, 2vw, 18px);
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 14px rgba(125,255,43,.28);
  pointer-events: none;
}
.forbidden-scroll-marker-system {
  top: calc(var(--forbidden-scroll-depth) * .5);
  color: var(--mint);
  border-color: rgba(125,255,43,.36);
  background:
    radial-gradient(circle at 50% 0%, rgba(125,255,43,.13), transparent 48%),
    rgba(0,0,0,.6);
}
.forbidden-scroll-marker-return {
  top: calc(var(--forbidden-scroll-depth) * .68);
  color: var(--soft);
  border-color: rgba(255,36,146,.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,36,146,.18), transparent 48%),
    rgba(0,0,0,.64);
}
.forbidden-room-section .wrap {
  overflow: visible;
}
.forbidden-room {
  position: relative;
  min-height: clamp(520px, 58vw, 740px);
  padding: clamp(28px, 5vw, 58px);
  overflow: visible;
  clip-path: none;
  contain: none;
  isolation: isolate;
  /* Negative means the chosen anchor point may sit just past the box wall. */
  --forbidden-vye-wall-anchor-gap: -14px;
  --forbidden-vye-wall-height: clamp(360px, 46vw, 620px);
  background:
    radial-gradient(circle at 14% 18%, rgba(255,36,146,.18), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(125,255,43,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 44%),
    rgba(5,0,9,.82);
}
.forbidden-room::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(24vw, 260px);
  border-left: 1px solid rgba(255,36,146,.28);
  background:
    linear-gradient(90deg, transparent, rgba(255,36,146,.07)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px);
  opacity: .78;
  pointer-events: none;
}
.forbidden-room-title {
  position: relative;
  z-index: 5;
  max-width: min(820px, calc(100% - min(28vw, 300px)));
  text-wrap: balance;
}
.forbidden-room-playfield {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  contain: none;
}
.forbidden-rain {
  display: block !important;
  position: absolute !important;
  inset: 76px 0 0 !important;
  z-index: 1 !important;
  opacity: .44;
  overflow: clip;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 88%, transparent 100%);
}
.forbidden-rain span {
  max-width: min(30vw, 190px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.forbidden-rain .rain-vye-trigger {
  pointer-events: none;
  cursor: default;
  touch-action: manipulation;
}
html[data-rain-clue="armed"] .forbidden-rain .rain-vye-trigger.is-vye-reveal {
  pointer-events: auto;
  cursor: pointer;
  opacity: 1 !important;
  transform: translateZ(0);
}
.forbidden-room .vye-wall-peek {
  display: block !important;
  position: absolute;
  left: var(--forbidden-vye-wall-left, auto);
  right: auto;
  top: 52%;
  z-index: 4;
  width: var(--forbidden-vye-wall-rendered-width, clamp(300px, 30vw, 500px));
  height: var(--forbidden-vye-wall-height);
  min-height: 0;
  transform: translateY(-50%);
  opacity: 1 !important;
  pointer-events: none;
  overflow: visible;
  contain: none;
  --vye-wall-opacity: .78;
}
.forbidden-room .vye-wall-peek[data-clue="armed"] {
  --vye-wall-opacity: .98;
}
.forbidden-room .vye-wall-hitbox {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.forbidden-room .vye-wall-video,
.forbidden-room .vye-wall-fallback {
  left: 0;
  top: 50%;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 1180px), (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .forbidden-room {
    min-height: clamp(500px, 72vw, 680px);
    --forbidden-vye-wall-anchor-gap: -12px;
    --forbidden-vye-wall-height: clamp(330px, 58vw, 520px);
  }
  .forbidden-room-title {
    max-width: min(760px, calc(100% - min(32vw, 250px)));
  }
  .forbidden-rain {
    opacity: .38;
  }
}

@media (max-width: 760px) {
  .forbidden-room-section {
    padding-top: 24px !important;
    padding-bottom: 92px !important;
    --forbidden-scroll-depth: clamp(5200px, 920vh, 9600px);
  }
  .forbidden-scroll-marker {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(360px, calc(100% - 28px));
    padding: 16px 14px;
    letter-spacing: .1em;
    margin-inline: auto;
  }
  .forbidden-scroll-marker-system {
    margin-top: clamp(1200px, 180svh, 2600px);
  }
  .forbidden-scroll-marker-return {
    margin-top: clamp(1600px, 240svh, 3400px);
    margin-bottom: clamp(1200px, 180svh, 2600px);
  }
  .forbidden-room-section::before {
    height: clamp(760px, 140svh, 1240px);
    background:
      radial-gradient(circle at 50% 10%, rgba(255,36,146,.07), transparent 34%),
      linear-gradient(to bottom, transparent, rgba(125,255,43,.028) 48%, transparent 88%);
  }
  .forbidden-room {
    min-height: 540px !important;
    padding: 18px 15px !important;
    clip-path: none !important;
    overflow: visible !important;
    contain: none !important;
    --forbidden-vye-wall-anchor-gap: -10px;
    --forbidden-vye-wall-height: clamp(300px, 76vw, 390px);
  }
  .forbidden-room::after {
    width: min(34vw, 132px);
    opacity: .72;
  }
  .forbidden-room-title,
  html[data-corruption-phase="system"] .forbidden-room-title {
    max-width: min(76%, 330px) !important;
    font-size: clamp(31px, 10.5vw, 50px) !important;
    line-height: .9 !important;
    letter-spacing: .02em !important;
  }
  .forbidden-rain {
    inset: 74px 0 0 !important;
    opacity: .56 !important;
  }
  .forbidden-rain span {
    max-width: 34vw;
    font-size: clamp(13px, 3vw, 15px) !important;
  }
  .forbidden-room .vye-wall-peek {
    display: block !important;
    left: var(--forbidden-vye-wall-left, auto) !important;
    right: auto !important;
    top: 58% !important;
    width: var(--forbidden-vye-wall-rendered-width, 320px) !important;
    height: var(--forbidden-vye-wall-height) !important;
    min-height: 0 !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .forbidden-room .vye-wall-video,
  .forbidden-room .vye-wall-fallback {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 430px) {
  .forbidden-room {
    min-height: 500px !important;
    --forbidden-vye-wall-anchor-gap: -8px;
    --forbidden-vye-wall-height: clamp(280px, 82vw, 350px);
  }
  .forbidden-room-title,
  html[data-corruption-phase="system"] .forbidden-room-title {
    max-width: 78% !important;
  }
  .forbidden-rain {
    opacity: .50 !important;
  }
}

.danger-patchwork-bleed {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(120px, 16vw, 240px) 0 clamp(120px, 16vw, 240px);
  overflow: clip;
  pointer-events: none;
}
.danger-patchwork-bleed::before {
  content: "";
  position: absolute;
  inset: 8% 12% auto;
  height: 44%;
  background: radial-gradient(circle, rgba(255,36,146,.08), transparent 74%);
  filter: blur(44px);
  opacity: .7;
  pointer-events: none;
  z-index: -1;
}
.danger-patchwork {
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 18px) clamp(6px, 1vw, 16px);
  padding-inline: clamp(4px, 1vw, 16px);
  overflow: visible;
  isolation: isolate;
}
.danger-banner-tile {
  position: relative;
  flex: 0 0 var(--basis, 12vw);
  width: var(--basis, 12vw);
  min-width: var(--min, 90px);
  max-width: var(--max-tile, 390px);
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  transform-origin: center;
}
.danger-banner-image {
  display: block;
  width: 100%;
  height: auto;
  opacity: var(--tile-opacity, .96);
  /* The two drop-shadows here were 9% and 4.5% alpha - not visible - but each
     is a separate blur pass, so 28 tiles cost 56 blurs and wedged the
     compositor at the bottom of the page. The colour ops are cheap; they stay. */
  filter:
    hue-rotate(var(--hue, 0deg))
    saturate(var(--sat, 1.08))
    brightness(var(--bright, .99));
  backface-visibility: hidden;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .danger-patchwork-bleed {
    padding: 140px 0 140px;
  }
  .danger-banner-tile {
    flex-basis: var(--basis-tablet, var(--basis, 16vw));
    width: var(--basis-tablet, var(--basis, 16vw));
    min-width: var(--min-tablet, 80px);
  }
}

@media (max-width: 760px) {
  .danger-patchwork-bleed {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 96px 0 112px;
    overflow-x: clip;
  }
  .danger-patchwork {
    max-width: 100%;
    gap: 8px 6px;
    padding-inline: 4px;
    overflow: hidden;
  }
  .danger-banner-tile {
    flex-basis: var(--basis-mobile, 28vw);
    width: var(--basis-mobile, 28vw);
    min-width: var(--min-mobile, 72px);
    max-width: var(--max-mobile, 220px);
    transform: translate(var(--tx-mobile, 0), var(--ty-mobile, 0)) rotate(var(--rot-mobile, var(--rot, 0deg))) scale(var(--scale-mobile, 1));
  }
  .danger-banner-image {
    filter:
      hue-rotate(var(--hue, 0deg))
      saturate(var(--sat, 1.04))
      brightness(var(--bright, .995))
      drop-shadow(0 0 7px rgba(255,36,146,.07))
      drop-shadow(0 0 6px rgba(125,255,43,.035));
  }
}

/* Trial HUD relocation: chat bottom-right, corruption left rail on desktop, compact top strip on mobile. */

.corruption-bar {
  max-width: min(112px, calc(100vw - 28px)) !important;
}

.corruption-bar-meta {
  flex-direction: column !important;
  justify-content: center !important;
}

@media (max-width: 760px) {

  .corruption-bar {
    opacity: .92 !important;
    backdrop-filter: blur(14px) !important;
  }
}

/* HUD v2 fix: true floating chat button + more integrated corruption rail. */

.floating-chat-button {
  position: fixed !important;
  right: 20px !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  top: auto !important;
  z-index: 1006 !important;
  display: inline-flex !important;
  border-color: rgba(125,255,43,.72) !important;
  background:
    linear-gradient(135deg, rgba(125,255,43,.16), rgba(255,36,146,.14) 58%, rgba(0,0,0,.72)),
    rgba(0,0,0,.74) !important;
  color: var(--mint) !important;
  clip-path: var(--cut-sm) !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 0 15px rgba(125,255,43,.2)) drop-shadow(0 0 20px rgba(255,36,146,.2)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 34px rgba(255,36,146,.22),
    0 0 28px rgba(125,255,43,.14) !important;
}

.floating-chat-button::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.08);
  clip-path: var(--cut-sm);
  pointer-events: none;
}

.floating-chat-button:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,36,146,.78) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 0 42px rgba(255,36,146,.3),
    0 0 32px rgba(125,255,43,.18) !important;
}

.corruption-bar::before {
  left: 8px;
  right: 8px;
  top: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,36,146,.28);
  color: rgba(202,255,171,.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(125,255,43,.32);
}

.corruption-bar-meta {
  position: relative !important;
  z-index: 1 !important;
}

.corruption-bar-meta span {
  max-width: 100% !important;
  text-align: center !important;
}

.corruption-track {
  position: relative !important;
  z-index: 1 !important;
  margin: -2px auto 2px !important;
  overflow: hidden !important;
}

.corruption-fill {
  height: calc(var(--meter, 8) * 1%) !important;
}

.energy-fill {
  height: calc(var(--energy, 100) * 1%) !important;
}

.corruption-bar small,
.corruption-bar .truth-feed {
  display: none !important;
}

@media (max-width: 760px) {

  .corruption-bar {
    border-color: rgba(255,36,146,.24) !important;
    background:
      radial-gradient(circle at 4% 50%, rgba(255,36,146,.2), transparent 28%),
      radial-gradient(circle at 96% 50%, rgba(0,230,255,.16), transparent 30%),
      rgba(0,0,0,.72) !important;
  }

  .corruption-bar::before {
    content: "SYSTEM HUD";
    left: 10px;
    right: 10px;
    top: 7px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 12px;
    letter-spacing: .16em;
    text-align: left;
  }

  .corruption-bar-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .corruption-bar-meta span {
    letter-spacing: .09em !important;
  }

  .corruption-bar > .energy-bar-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .corruption-fill,
  .energy-fill {
    display: block !important;
  }
}

@media (max-width: 520px) {

  .corruption-bar-meta span {
    letter-spacing: .07em !important;
  }
}

/* HUD v3: sharper dangerous meter bars + safer mobile top spacing. */
.corruption-track {
  width: 21px !important;
  height: 126px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)) !important;
  border: 1px solid rgba(255,36,146,.72) !important;
  background:
    linear-gradient(90deg, rgba(255,36,146,.14) 0 2px, transparent 2px calc(100% - 2px), rgba(255,36,146,.14) calc(100% - 2px)),
    repeating-linear-gradient(to top, rgba(255,36,146,.18) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, rgba(0,0,0,.96), rgba(28,0,18,.86)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.78),
    inset 0 0 18px rgba(255,36,146,.18),
    0 0 0 1px rgba(255,255,255,.045),
    0 0 18px rgba(255,36,146,.2) !important;
}

.corruption-track::before,
.energy-track::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(to top, rgba(255,255,255,.22) 0 1px, transparent 1px 13px),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.18) 46%, transparent 52%);
  mix-blend-mode: screen;
  opacity: .46;
}

.corruption-track::after,
.energy-track::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 1px;
  z-index: 4;
  pointer-events: none;
  background: rgba(255,255,255,.18);
  box-shadow:
    0 -36px 0 rgba(255,255,255,.09),
    0 36px 0 rgba(255,255,255,.09);
  opacity: .65;
}

.energy-track {
  height: 98px !important;
  border-color: rgba(0,230,255,.58) !important;
  background:
    linear-gradient(90deg, rgba(0,230,255,.12) 0 2px, transparent 2px calc(100% - 2px), rgba(0,230,255,.12) calc(100% - 2px)),
    repeating-linear-gradient(to top, rgba(0,230,255,.16) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,20,28,.78)) !important;
}

.corruption-fill,
.energy-fill {
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
}

@media (max-width: 760px) {

  .corruption-track,
  .energy-track {
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)) !important;
  }

  .corruption-track::before,
  .energy-track::before {
    inset: 2px;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 15px),
      linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.18) 47%, transparent 53%);
    opacity: .42;
  }

  .corruption-track::after,
  .energy-track::after {
    display: none !important;
  }

  .corruption-fill,
  .energy-fill {
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%) !important;
  }
}

/* Chat modal header action spacing fix. */
.chat-head {
  justify-content: space-between !important;
}

.chat-head-actions {
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.chat-head-actions .btn {
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .chat-head {
    display: grid !important;
  }

  .chat-head-actions {
    align-self: start !important;
    margin-left: 0 !important;
  }

  .chat-head-actions .btn {
    min-height: 36px !important;
    padding: 9px 11px !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
  }
}

.floating-chat-button {
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
  justify-content: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.floating-chat-button > span,
.chat-head-actions .btn,
.chat-head-actions .btn > span {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.chat-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 198px !important;
  align-items: start !important;
  gap: 20px !important;
}

.chat-head > div:not(.chat-head-actions) {
  min-width: 0 !important;
  overflow: hidden !important;
}

.chat-head .system-tag {
  width: 276px !important;
  max-width: min(276px, 100%) !important;
  min-height: 34px !important;
  justify-content: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.chat-head .modal-title {
  width: 430px !important;
  max-width: 100% !important;
  min-height: 46px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.chat-head-actions {
  width: 198px !important;
  min-width: 198px !important;
  max-width: 198px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  justify-self: end !important;
  align-self: start !important;
  margin-left: 0 !important;
}

.chat-head-actions .btn {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
  min-height: 38px !important;
  padding: 9px 8px !important;
  justify-content: center !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  .floating-chat-button {
    width: 170px !important;
    max-width: 170px !important;
  }
}

@media (max-width: 520px) {

  .floating-chat-button {
    width: 166px !important;
    max-width: 166px !important;
  }

  .chat-head .system-tag {
    width: 168px !important;
    max-width: 100% !important;
    min-height: 32px !important;
  }

  .chat-head .modal-title {
    width: 168px !important;
    max-width: 100% !important;
    min-height: 38px !important;
  }

  .chat-head-actions .btn {
    width: 73px !important;
    min-width: 73px !important;
    max-width: 73px !important;
    padding-inline: 6px !important;
  }
}

.corruption-bar {
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(14,8,16,.94), rgba(7,4,9,.96)) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 -10px 28px rgba(255,36,146,.05),
    0 0 0 1px rgba(255,36,146,.08),
    0 14px 32px rgba(0,0,0,.28) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  filter: none !important;
}

.corruption-bar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(255,36,146,.08), transparent 34%, transparent 72%, rgba(125,255,43,.06)),
    linear-gradient(180deg, rgba(255,36,146,.06), transparent 42%) !important;
  opacity: .85 !important;
  pointer-events: none !important;
}

.corruption-bar::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 10px) !important;
  pointer-events: none !important;
  opacity: .75 !important;
}

.corruption-bar .truth-feed {
  display: none !important;
}

.corruption-bar-meta,
.corruption-track,
.corruption-bar small {
  position: relative !important;
  z-index: 1 !important;
}

.corruption-bar-meta {
  display: grid !important;
  margin: 0 !important;
}

.corruption-bar-meta span {
  color: rgba(255,255,255,.8) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.corruption-bar-meta strong {
  color: var(--mint) !important;
  font-family: "Hacked", Impact, "Arial Black", sans-serif !important;
  line-height: .8 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 0 18px rgba(125,255,43,.22), 0 0 8px rgba(255,255,255,.08) !important;
}

.energy-bar-meta strong {
  color: var(--cyan) !important;
  text-shadow: 0 0 18px rgba(0,230,255,.2), 0 0 8px rgba(255,255,255,.08) !important;
}

.corruption-bar-meta > span,
.corruption-bar-meta > strong {
  transform: none !important;
}

.corruption-track,
.energy-track {
  display: block !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px),
    rgba(18,12,18,.92) !important;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 100%, 0 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,36,146,.04) !important;
  overflow: hidden !important;
}

.energy-track {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 0 0 1px rgba(0,230,255,.04) !important;
}

.corruption-fill,
.energy-fill {
  position: static !important;
  display: block !important;
  height: 100% !important;
  width: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 100%, 0 100%) !important;
  transition: width .25s steps(4,end) !important;
}

.corruption-fill {
  width: calc(var(--meter, 8) * 1%) !important;
  background:
    linear-gradient(90deg, rgba(255,113,191,.98), rgba(125,255,43,.98)) !important;
  box-shadow: 0 0 10px rgba(255,36,146,.18), 0 0 14px rgba(125,255,43,.12) !important;
}

.energy-fill {
  width: calc(var(--energy, 100) * 1%) !important;
  background:
    linear-gradient(90deg, rgba(111,255,242,.98), rgba(125,255,43,.98)) !important;
  box-shadow: 0 0 10px rgba(0,230,255,.15), 0 0 14px rgba(125,255,43,.1) !important;
}

.corruption-bar small {
  display: block !important;
  color: rgba(255,255,255,.66) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

@media (max-width: 760px) {
  .corruption-bar {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) !important;
  }

  .corruption-bar-meta strong {
    min-width: 40px !important;
  }

  .corruption-bar small {
    margin-bottom: 2px !important;
  }
}

@media (max-width: 520px) {

  .corruption-bar-meta span {
    font-size: 12px !important;
  }

  .corruption-bar-meta strong {
    min-width: 34px !important;
  }
}

.corruption-bar {
  left: 18px !important;
  right: auto !important;
  top: 88px !important;
  bottom: auto !important;
  width: 122px !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 12px 10px 10px !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%) !important;
  z-index: 84 !important;
}

.corruption-bar-meta {
  grid-template-columns: 1fr !important;
  justify-items: start !important;
  align-items: start !important;
  gap: 4px !important;
  text-align: left !important;
}

.corruption-bar-meta strong {
  justify-self: start !important;
  min-width: 0 !important;
  font-size: 34px !important;
  text-align: left !important;
}

.corruption-track,
.energy-track {
  height: 7px !important;
  width: 100% !important;
  margin: 0 !important;
}

.corruption-bar small {
  margin: -2px 0 2px !important;
  min-height: 18px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
}

.corruption-bar > .corruption-bar-meta:not(.energy-bar-meta) {
  order: 1 !important;
}
.corruption-bar > .corruption-track:not(.energy-track) {
  order: 2 !important;
}
.corruption-bar > #meterStatus {
  order: 3 !important;
}
.corruption-bar > .energy-bar-meta {
  order: 4 !important;
  margin-top: 2px !important;
}
.corruption-bar > .energy-track {
  order: 5 !important;
}
.corruption-bar > #energyStatus {
  order: 6 !important;
}

@media (max-width: 760px) {

  .corruption-bar-meta span {
    font-size: 12px !important;
  }

  .corruption-bar small {
    font-size: 12px !important;
    min-height: 16px !important;
  }
}

@media (max-width: 520px) {
  .corruption-bar {
    width: 104px !important;
  }

  .corruption-bar small {
    font-size: 12px !important;
    min-height: 14px !important;
  }
}

body {
  font-size: 17px !important;
}

.hero-copy,
.section-lead,
.deck-copy,
.warning-copy,
.truth-card p,
.feature-copy p,
.bubble,
.chat-msg,
.fact,
.log-card p,
.vault-file em,
.hub-primary em,
.hub-tile em,
.truth-line,
.vye-caption,
.legal-footer-copy {
  font-size: 17px !important;
  line-height: 1.78 !important;
}

.deck-meta,
.fact,
.log-card time,
.truth-line,
.chat-status,
.chat-input,
.node-small {
  font-size: 14px !important;
}

.section-kicker,
.system-tag,
.terminal-label,
.os-meter-block span,
.log-type,
.vault-file span,
.legal-footer-kicker {
  font-size: 12px !important;
}

.truth-card h3,
.node-label {
  font-size: 20px !important;
}

.chat-input {
  min-height: 52px !important;
  padding: 14px 16px !important;
}

@media (max-width: 760px) {
  body {
    font-size: 16px !important;
  }

  .hero-copy,
  .section-lead,
  .deck-copy,
  .warning-copy,
  .truth-card p,
  .feature-copy p,
  .bubble,
  .chat-msg,
  .fact,
  .log-card p,
  .vault-file em,
  .hub-primary em,
  .hub-tile em,
  .truth-line,
  .vye-caption,
  .legal-footer-copy {
    font-size: 16px !important;
  }

  .btn,
  .floating-chat-button{
    font-size: 12px !important;
  }
}

/* ==== was <style id="readability-size-patch-v2"> in index.html ==== */
.btn,
.floating-chat-button,
.hub-primary-action{
  font-size: 14px !important;
  letter-spacing: .13em !important;
}

.btn {
  min-height: 56px !important;
  padding: 15px 22px !important;
}

.btn.tiny {
  min-height: 44px !important;
  padding: 11px 14px !important;
  font-size: 12px !important;
}

.floating-chat-button{
  min-height: 54px !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
}

.system-tag,
.section-kicker,
.terminal-label,
.os-meter-block span,
.log-type,
.vault-file span,
.legal-footer-kicker {
  font-size: 13px !important;
}

@media (max-width: 520px) {

  .btn,
  .floating-chat-button{
    font-size: 13px !important;
  }

  .btn {
    min-height: 54px !important;
  }
}

/* ==== was styles/home-4.css ==== */
.hero-v7 {
  min-height: max(1040px, 110svh) !important;
}

.v7-stage {
  min-height: max(980px, calc(110svh - 44px)) !important;
}

.v7-vye {
  height: clamp(620px, 69svh, 790px) !important;
}

@media (max-width: 1180px) {
  .hero-v7 {
    min-height: max(980px, 106svh) !important;
  }

  .v7-stage {
    min-height: max(920px, calc(106svh - 38px)) !important;
  }

  .v7-vye {
    height: clamp(600px, 66svh, 760px) !important;
  }
}

.hero-v7 {
  min-height: max(1060px, 112svh) !important;
  padding-top: 58px !important;
  padding-bottom: clamp(158px, 18vh, 238px) !important;
}

.v7-stage {
  min-height: max(995px, calc(112svh - 58px)) !important;
  padding-bottom: clamp(172px, 19vh, 258px) !important;
}

.v7-claim {
  top: clamp(10px, 1.8vh, 24px) !important;
}

.v7-vye {
  inset: clamp(14px, 3.4vh, 58px) 0 auto 0 !important;
  height: clamp(630px, 70svh, 800px) !important;
  padding-top: clamp(58px, 8vh, 94px) !important;
}

.v7-media-stack {
  top: 25.5% !important;
}

@media (max-width: 1180px) {
  .hero-v7 {
    min-height: max(995px, 108svh) !important;
    padding-top: 48px !important;
    padding-bottom: clamp(146px, 16.5vh, 218px) !important;
  }

  .v7-stage {
    min-height: max(930px, calc(108svh - 48px)) !important;
    padding-bottom: clamp(156px, 17.5vh, 232px) !important;
  }

  .v7-claim {
    top: clamp(8px, 1.5vh, 18px) !important;
  }

  .v7-vye {
    inset: clamp(8px, 2.4vh, 34px) 0 auto 0 !important;
    height: clamp(608px, 67svh, 770px) !important;
    padding-top: clamp(42px, 6.4vh, 78px) !important;
  }
}

@media (max-width: 760px) {
  .hero-v7 {
    min-height: 920px !important;
    padding-top: 44px !important;
    padding-bottom: 188px !important;
  }

  .v7-stage {
    min-height: 878px !important;
    padding-bottom: 198px !important;
  }

  .v7-claim {
    top: 10px !important;
  }

  .v7-vye {
    inset: 18px 0 auto 0 !important;
    padding-top: 32px !important;
  }
}

.corruption-bar {
  pointer-events: auto !important;
}

/* ==== was <style id="corruption-lock-line-cap-patch"> in index.html ==== */

.corruption-track:not(.energy-track)::after {
  content: "" !important;
  position: absolute !important;
  left: calc(var(--corruption-lock, 30) * 1%) !important;
  top: -6px !important;
  bottom: -6px !important;
  width: 2px !important;
  transform: translateX(-1px) !important;
  background: rgba(255, 214, 77, .95) !important;
  box-shadow:
    0 0 9px rgba(255, 214, 77, .55),
    0 0 1px rgba(0, 0, 0, .85) !important;
  pointer-events: none !important;
}

.corruption-track:not(.energy-track)::before {
  content: "" !important;
  position: absolute !important;
  left: calc(var(--corruption-lock, 30) * 1%) !important;
  top: -10px !important;
  width: 6px !important;
  height: 6px !important;
  transform: translateX(-3px) rotate(45deg) !important;
  border: 1px solid rgba(255, 214, 77, .9) !important;
  background: rgba(255, 214, 77, .18) !important;
  box-shadow: 0 0 8px rgba(255, 214, 77, .35) !important;
  pointer-events: none !important;
}

/* ==== was styles/home-3.css ==== */
.corruption-track:not(.energy-track) {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.corruption-lock-marker {
  position: absolute !important;
  left: calc(var(--corruption-lock, 30) * 1%) !important;
  top: -7px !important;
  bottom: -7px !important;
  width: 3px !important;
  transform: translateX(-1.5px) !important;
  z-index: 50 !important;
  display: block !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, .98) 15%,
    rgba(255, 214, 77, 1) 50%,
    rgba(255, 255, 255, .98) 85%,
    rgba(255, 255, 255, 0)
  ) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .82),
    0 0 10px rgba(255, 214, 77, .85),
    0 0 18px rgba(255, 54, 164, .35) !important;
  pointer-events: none !important;
}

.corruption-lock-marker::before,
.corruption-lock-marker::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 9px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  background: rgba(255, 214, 77, .95) !important;
  box-shadow: 0 0 8px rgba(255, 214, 77, .65) !important;
}

.corruption-lock-marker::before { top: 0 !important; }
.corruption-lock-marker::after { bottom: 0 !important; }

@media (max-width: 760px) {
  .corruption-lock-marker {
    top: -6px !important;
    bottom: -6px !important;
    width: 3px !important;
  }
}

.legal-footer {
  position: relative;
  z-index: 2;
  padding: 12px 0 30px;
  margin-top: -18px;
}
.legal-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(255,36,146,.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 46%),
    rgba(0,0,0,.52);
  box-shadow: 0 0 0 1px rgba(255,36,146,.08), 0 14px 42px rgba(0,0,0,.24);
  clip-path: var(--cut-sm);
  padding: 14px 16px;
}
.legal-footer-inner > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.legal-footer-kicker {
  color: var(--mint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.legal-footer-brand {
  color: #fff;
  font-family: "Hacked", Impact, "Arial Black", sans-serif;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legal-footer-copy {
  color: rgba(255,255,255,.8);
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.legal-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.legal-footer-links a {
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.68);
  clip-path: var(--cut-sm);
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legal-footer-links a:hover {
  border-color: rgba(125,255,43,.48);
  color: var(--mint);
}

@media (max-width: 860px) {
  .legal-footer {
    padding: 8px 0 24px;
    margin-top: -8px;
  }
  .legal-footer-inner {
    display: grid;
    gap: 12px;
    clip-path: none;
    padding: 14px;
  }
  .legal-footer-links {
    justify-content: flex-start;
  }
}

/* ==== was <style id="corruption-hud-readable-roomy-patch"> in index.html ==== */
/* Keep the debug reset UI removed, even if older cached patch rules are still present. */

/* ==== was <style id="hero-v7-caption-and-media-nudge-patch"> in index.html ==== */
/* Fine-position hero overlays without changing sizing or visual styling. */
@media (min-width: 901px) {
  .v7-caption {
    transform: translateY(-3px) !important;
  }

  .v7-vye-art,
  .v7-media-stack {
    translate: 0 -7px !important;
  }
}

/* ==== was styles/home-2.css ==== */
@media (max-width: 760px) {
  .corruption-bar {
    left: 12px !important;
    right: 12px !important;
    top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    width: auto !important;
    transform: none !important;
    z-index: 69 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 3px 8px !important;
    padding: 7px 9px 7px !important;
    pointer-events: auto !important;
  }


  .corruption-bar small,
  .corruption-bar .truth-feed {
    display: none !important;
  }

  .corruption-bar > .corruption-bar-meta {
    display: contents !important;
  }

  .corruption-bar > .corruption-bar-meta > span {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    padding-left: 6px !important;
    font-size: 20px !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    color: rgba(255,255,255,.6) !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    z-index: 3 !important;
    white-space: nowrap !important;
    max-width: calc(100% - 42px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: translateY(4px) !important;
  }
  .corruption-bar > .corruption-bar-meta > span > span {
    font-size: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
  }

  .corruption-bar > .corruption-bar-meta:not(.energy-bar-meta) > span {
    grid-row: 2 !important;
  }

  .corruption-bar > .energy-bar-meta > span {
    grid-row: 4 !important;
  }

  .corruption-bar > .corruption-bar-meta > strong {
    justify-self: end !important;
    align-self: center !important;
    min-width: 34px !important;
    text-align: right !important;
    transform: none !important;
    line-height: .9 !important;
  }

  .corruption-bar > .corruption-bar-meta:not(.energy-bar-meta) > strong {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
  }

  .corruption-bar > .energy-bar-meta > strong {
    grid-column: 2 !important;
    grid-row: 4 !important;
    font-size: 14px !important;
  }

  .corruption-bar-meta strong {
    font-size: 13px !important;
    transform: none !important;
  }

  .corruption-bar > .corruption-bar-meta:not(.energy-bar-meta) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .corruption-bar > .corruption-track:not(.energy-track) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .corruption-bar > .energy-track {
    grid-column: 1 !important;
    grid-row: 4 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .corruption-track,
  .energy-track {
    width: 100% !important;
    height: 6px !important;
    margin: 0 !important;
  }

  .corruption-fill,
  .energy-fill {
    position: static !important;
    height: 100% !important;
    width: auto !important;
    border-radius: inherit !important;
  }

  .corruption-fill {
    width: calc(var(--meter, 8) * 1%) !important;
    background: linear-gradient(90deg, var(--pink), var(--green)) !important;
  }

  .energy-fill {
    width: calc(var(--energy, 100) * 1%) !important;
    background: linear-gradient(90deg, var(--cyan), var(--green)) !important;
  }

  .floating-chat-button {
    display: inline-flex !important;
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 136px !important;
    min-height: 44px !important;
    padding: 12px 15px !important;
    font-size: 13px !important;
    pointer-events: auto !important;
    z-index: 1006 !important;
  }

  .hero,
  .hero-v7 {
    padding-top: 128px !important;
  }

  .toast-zone {
    top: 124px !important;
  }

  .v7-vye {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
  }

  .v7-vye-art {
    display: block !important;
    margin: 0 auto !important;
    object-position: center top !important;
  }
}

@media (max-width: 520px) {
  .corruption-bar {
    top: calc(74px + env(safe-area-inset-top, 0px)) !important;
    gap: 3px 7px !important;
    padding: 6px 8px 6px !important;
  }

  .corruption-bar > .corruption-bar-meta > span {
    padding-left: 4px !important;
    font-size: 16px !important;
    letter-spacing: .05em !important;
    max-width: calc(100% - 38px) !important;
    transform: translateY(3px) !important;
  }
  .corruption-bar > .corruption-bar-meta > span > span {
    font-size: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
  }

  .corruption-bar-meta strong {
    font-size: 12px !important;
  }

  .floating-chat-button {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 128px !important;
  }

  .hero,
  .hero-v7 {
    padding-top: 150px !important;
  }

  .toast-zone {
    top: 118px !important;
  }
}

/* ==== was <style id="mobile-ui-z-order-final-fix"> in index.html ==== */
@media (max-width: 860px) {
  .hero-word-rain { z-index: 6 !important; }
  .shell { z-index: 1002 !important; }
  .shell > header,
  .shell > main {
    position: relative !important;
    z-index: 2 !important;
  }
  header.topbar,
  .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    z-index: 1004 !important;
  }
  .corruption-bar {
    z-index: 1005 !important;
  }
  .floating-chat-button {
    z-index: 1006 !important;
  }
  .toast-zone,
  .vye-popup-layer {
    z-index: 1007 !important;
  }
}

/* ==== was <style id="chat-mobile-header-overflow-fix"> in index.html ==== */
@media (max-width: 520px) {
  .chat-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .chat-head > div:not(.chat-head-actions) {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .chat-head .system-tag,
  .chat-head .modal-title {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
  }

  .chat-head-actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .chat-head-actions .btn,
  .chat-head-actions .btn > span {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
  }
}

/* ==== was <style id="chat-mobile-fullscreen-fix"> in index.html ==== */
@media (max-width: 860px) {
  .chat-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .chat-sheet {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
    clip-path: none !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  }

  .chat-head .system-tag {
    display: none !important;
  }

  .chat-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 12px !important;
  }

  .chat-form {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: rgba(8,0,13,.96) !important;
    border-top: 1px solid rgba(255,36,146,.22) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat-status {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==== was <style id="desktop-hud-z-fix"> in index.html ==== */
@media (min-width: 761px) {
  .corruption-bar {
    z-index: 1200 !important;
  }
}

/* ==== was <style id="desktop-top-spacing-tweak"> in index.html ==== */
@media (min-width: 761px) {
  .hero,
  .hero-v7 {
    padding-top: 70px !important;
  }
  /* The fixed bar with its meters is 111-122px tall, so the claim's first line (the
     "Quarantine in effect" tag) sat under it. Only the claim moves; Vye stays put. */
  .hero-v7 .v7-claim {
    margin-top: 44px !important;
  }
}
/* On short wide screens the headline (sized by width alone) now pushed the claim into the
   caption below it; a height cap gives those 44px back. */
@media (min-width: 1201px) {
  html body .hero-v7 .v7-claim .v7-title {
    font-size: max(54px, min(8.6vw, 154px, 13.5vh)) !important;
  }
  html[data-corruption-phase="system"] body .hero-v7 .v7-claim .v7-title {
    font-size: max(72px, min(9vw, 154px, 13.5vh)) !important;
  }
}

/* ==== was <style id="vye-heart-center-lock"> in index.html ==== */
@media (max-width: 1180px) {
  .v7-vye {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
  }
  .v7-vye.reveal,
  .v7-vye.reveal.is-visible {
    transform: translateX(-50%) !important;
  }
  .v7-vye-art {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==== was <style id="vye-heart-center-lock-final"> in index.html ==== */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-v7 .v7-vye {
    inset: clamp(8px, 2.4vh, 34px) 0 auto 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    translate: none !important;
    display: grid !important;
    place-items: start center !important;
  }
  .hero-v7 .v7-vye.reveal,
  .hero-v7 .v7-vye.reveal.is-visible {
    transform: none !important;
    translate: none !important;
  }
  .hero-v7 .v7-vye-art {
    width: min(760px, 74vw) !important;
    max-height: 520px !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    translate: none !important;
    object-position: top center !important;
  }
}

/* ==== was <style id="desktop-corruption-hud-compact-final"> in index.html ==== */
/* Deprecated: compact middle-width HUD rules removed. */

/* ==== was styles/home.css ==== */
/* Header corruption / energy HUD
   One source of truth. No viewport-size JS writes should touch this layout. */

.topbar,
.topbar > .corruption-bar.hud-remade {
  overflow: visible !important;
}

.topbar > .corruption-bar.hud-remade {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;

  width: min(var(--max), calc(100vw - 24px)) !important;
  max-width: min(var(--max), calc(100vw - 24px)) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 2px 0 6px !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  align-items: end !important;
  justify-content: stretch !important;
  column-gap: clamp(12px, 4vw, 48px) !important;
  row-gap: 4px !important;

  border: 0 !important;
  border-top: 1px solid rgba(255, 36, 146, .28) !important;
  background: linear-gradient(180deg, rgba(255, 36, 146, .08), rgba(0, 0, 0, .08)) !important;
  clip-path: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: auto !important;
}

.topbar > .corruption-bar.hud-remade > .truth-feed{
  display: none !important;
}

.topbar > .corruption-bar.hud-remade > .hud-meter {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-rows: auto 8px !important;
  row-gap: 1px !important;
  align-items: end !important;
  overflow: visible !important;
}

.topbar > .corruption-bar.hud-remade .hud-meter-top {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 8px !important;
  align-items: end !important;
  overflow: visible !important;
}

.topbar > .corruption-bar.hud-remade .corruption-bar-meta,
.topbar > .corruption-bar.hud-remade .energy-bar-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.topbar > .corruption-bar.hud-remade .corruption-bar-meta > strong,
.topbar > .corruption-bar.hud-remade .energy-bar-meta > strong {
  order: 0 !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  min-width: 2ch !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  line-height: .82 !important;
  white-space: nowrap !important;
}

.topbar > .corruption-bar.hud-remade .corruption-bar-meta > span,
.topbar > .corruption-bar.hud-remade .energy-bar-meta > span {
  order: 1 !important;
  flex: 0 1 auto !important;
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font-size: clamp(18px, 1.55vw, 22px) !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: rgba(255, 255, 255, .72) !important;
  text-transform: uppercase !important;
}

.topbar > .corruption-bar.hud-remade .hud-meter-top > small {
  justify-self: end !important;
  align-self: end !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font-size: clamp(12px, .8vw, 13px) !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: rgba(255, 255, 255, .72) !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, .95) !important;
  pointer-events: none !important;
}

.topbar > .corruption-bar.hud-remade .corruption-track,
.topbar > .corruption-bar.hud-remade .energy-track {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  justify-self: stretch !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.topbar > .corruption-bar.hud-remade .corruption-fill {
  height: 100% !important;
  width: calc(var(--meter, 8) * 1%) !important;
  background: linear-gradient(90deg, var(--pink), var(--green)) !important;
}

.topbar > .corruption-bar.hud-remade .energy-fill {
  height: 100% !important;
  width: calc(var(--energy, 100) * 1%) !important;
  background: linear-gradient(90deg, var(--cyan), var(--green)) !important;
}

@media (max-width: 760px) {
  .topbar > .corruption-bar.hud-remade {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    column-gap: 10px !important;
    padding: 2px 0 5px !important;
  }

  .topbar > .corruption-bar.hud-remade > .hud-meter {
    grid-template-rows: auto 7px !important;
  }

  .topbar > .corruption-bar.hud-remade .hud-meter-top {
    column-gap: 5px !important;
  }

  .topbar > .corruption-bar.hud-remade .corruption-bar-meta > strong,
  .topbar > .corruption-bar.hud-remade .energy-bar-meta > strong {
    font-size: 14px !important;
    line-height: .84 !important;
  }

  .topbar > .corruption-bar.hud-remade .corruption-bar-meta > span,
  .topbar > .corruption-bar.hud-remade .energy-bar-meta > span {
    font-size: 15px !important;
    letter-spacing: .045em !important;
  }

  .topbar > .corruption-bar.hud-remade .hud-meter-top > small {
    font-size: 12px !important;
    letter-spacing: .035em !important;
  }

  .topbar > .corruption-bar.hud-remade .corruption-track,
  .topbar > .corruption-bar.hud-remade .energy-track {
    height: 7px !important;
  }
}

@media (max-width: 520px) {
  .topbar > .corruption-bar.hud-remade {
    grid-template-columns: 1fr !important;
    row-gap: 4px !important;
  }
}

/* ==== was styles/home-phone-hero.css ==== */
/* The homepage's first screen on a phone (2026-11-04, for the comic con): Vye big and in front instead of a faint picture
   behind the text, the quarantine tag gone, the lore paragraph swapped for one plain line (.v7-pitch, html.0272), and one
   button that matters. Placed after home.css's part on purpose: the older layers set the hero with !important at every width, so
   these rules match them in weight and win by coming last. Desktop is untouched apart from hiding .v7-pitch. */
.v7-pitch { display: none; }

@media (max-width: 760px) {
  html body .hero-v7 .v7-stage { display: flex !important; flex-direction: column !important; }

  /* Her: in the flow, at the top, at full strength, fading into the page at her feet */
  html body .hero-v7 .v7-stage .v7-vye,
  html body .hero-v7 .v7-stage .v7-vye.reveal,
  html body .hero-v7 .v7-stage .v7-vye.reveal.is-visible {
    position: relative !important; order: -1; inset: auto !important; left: auto !important; right: auto !important; top: auto !important;
    width: auto !important; height: auto !important; margin: -22px -9px 0 !important; padding: 0 !important; transform: none !important; translate: none !important;
    opacity: 1 !important; z-index: 3 !important; display: block !important;
  }
  html body .hero-v7 .v7-stage .v7-vye::before { display: none !important; }
  html body .hero-v7 .v7-stage .v7-vye-art {
    display: block !important; width: 100% !important; height: min(44svh, 420px) !important; max-height: none !important; margin: 0 !important;
    object-fit: cover !important; object-position: 50% 16% !important; opacity: 1 !important; transform: none !important; translate: none !important;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%) !important; mask-image: linear-gradient(180deg, #000 62%, transparent 100%) !important;
  }

  /* The words: over her lower edge, shorter, and one way in */
  html body .hero-v7 .v7-stage .v7-claim { margin-top: -110px !important; z-index: 20 !important; }
  html body .hero-v7 .v7-claim .system-tag { display: none !important; }
  html body .hero-v7 .v7-claim .v7-title { margin: 0 0 12px !important; font-size: clamp(30px, 9.6vw, 42px) !important; line-height: 1 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .9), 0 0 26px rgba(255, 36, 146, .45) !important; }
  html body .hero-v7 .v7-claim .v7-copy { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; }
  html body .hero-v7 .v7-claim .v7-copy > p { display: none !important; }
  html body .hero-v7 .v7-claim .v7-pitch { display: block; margin: 0 0 16px; font-size: 17px; line-height: 1.45; font-weight: 600; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
  html body .hero-v7 .v7-claim .v7-actions { display: block !important; width: 100% !important; padding: 0 !important; }
  html body .hero-v7 .v7-claim .v7-actions .btn.dark { display: none !important; }
  html body .hero-v7 .v7-claim .v7-actions .js-chat-open {
    width: 100% !important; max-width: none !important; min-height: 62px !important; margin: 0 !important; border: 0 !important; clip-path: none !important; color: #fff !important; font-size: 16px !important;
    background: linear-gradient(120deg, #ff2492, #b52cff) !important; box-shadow: 0 0 34px rgba(255, 36, 146, .55) !important;
    animation: phone-hero-call 2.6s ease-in-out infinite;
  }
}

@keyframes phone-hero-call {
  0%, 100% { box-shadow: 0 0 22px rgba(255, 36, 146, .45); }
  50% { box-shadow: 0 0 44px rgba(255, 36, 146, .85); }
}
@media (prefers-reduced-motion: reduce) {
  html body .hero-v7 .v7-claim .v7-actions .js-chat-open { animation: none; }
}

/* ==== was <style id="hud-label-size-final-override"> in index.html ==== */
.topbar > .corruption-bar.hud-remade .hud-meter-top .corruption-bar-meta > span,
.topbar > .corruption-bar.hud-remade .hud-meter-top .energy-bar-meta > span {
  font-size: clamp(16px, 1.4vw, 19px) !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
}
.topbar > .corruption-bar.hud-remade .hud-meter-top .corruption-bar-meta > span > span,
.topbar > .corruption-bar.hud-remade .hud-meter-top .energy-bar-meta > span > span {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* ==== was <style id="header-text-clip-fix"> in index.html ==== */
.topbar {
  overflow: visible !important;
}