html {
  color-scheme: dark;
}
:root {
  --vvh: 100dvh;
  --chroma: #00f0c8;
  --amb: color-mix(in srgb, var(--chroma) 38%, transparent);
  --void: #070b12;
  --void2: #0d1522;
  --txt: #e8f7f3;
  --b1: rgba(32, 196, 120, 0.06);
  --b2: rgba(28, 96, 220, 0.07);
  --b3: rgba(180, 24, 72, 0.06);
  --cx1: 28%;
  --cy1: 22%;
  --cx2: 72%;
  --cy2: 58%;
  --cx3: 48%;
  --cy3: 82%;
  font-family: system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  margin: 0;
  min-height: 100%;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
}
html, body { margin: 0; min-height: 100%; color: var(--txt); background: var(--void); }
body {
  min-height: 100dvh;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overscroll-behavior-x: none;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 55% at 12% 18%, var(--b1) 0%, transparent 55%),
    radial-gradient(70% 60% at 88% 25%, var(--b2) 0%, transparent 50%),
    radial-gradient(85% 70% at 50% 100%, var(--b3) 0%, transparent 48%),
    radial-gradient(120% 90% at 50% -10%, var(--void2) 0%, var(--void) 50%, #03060a 100%);
}
.chroma-field {
  position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at var(--cx1) var(--cy1), color-mix(in srgb, var(--chroma) 26%, transparent) 0%, transparent 58%),
    radial-gradient(40% 44% at var(--cx2) var(--cy2), color-mix(in srgb, var(--chroma) 18%, #3060ff22) 0%, transparent 55%),
    radial-gradient(50% 36% at var(--cx3) var(--cy3), color-mix(in srgb, var(--chroma) 14%, #f0407022) 0%, transparent 52%);
  filter: blur(72px) saturate(160%);
  opacity: 0.88;
  mix-blend-mode: screen;
}
.fog-layer {
  z-index: 1; opacity: 0.35;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 20%, rgba(2, 4, 14, 0.55) 100%),
    radial-gradient(ellipse 70% 50% at 50% 120%, color-mix(in srgb, var(--chroma) 12%, transparent), transparent 70%);
}
.fixed-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#dust { z-index: 3; opacity: 0.58; }
.vignette { z-index: 4; background: radial-gradient(ellipse 90% 72% at 50% 45%, transparent 35%, rgba(2,4,10,0.9) 100%); }
.scan {
  z-index: 5; opacity: 0.12; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, color-mix(in srgb, var(--chroma) 5%, transparent) 2px, color-mix(in srgb, var(--chroma) 5%, transparent) 3px);
  transition: opacity 0.12s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .scan {
    animation: scanline-drift 0.38s linear infinite;
  }
}
@keyframes scanline-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 3px, 0); }
}
body.node-glitch .crt-shell {
  animation: node-glitch-k 0.22s steps(2, end) 1;
  filter: hue-rotate(5deg) contrast(1.06);
}
@keyframes node-glitch-k {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(-2px, -1px, 0); }
  66% { transform: translate3d(2px, 1px, 0) skewX(-0.4deg); }
  100% { transform: translate3d(0, 0, 0); }
}
body.node-glitch .scan { opacity: 0.2; }
.noise { z-index: 6; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

#ribbons { z-index: 3; opacity: 0.38; mix-blend-mode: screen; }

.root-frame {
  position: relative; z-index: 40; isolation: isolate; pointer-events: auto;
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(0.85rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
    calc(5.8rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  transform-style: preserve-3d; perspective: 1200px;
}

.crt-shell {
  position: relative; width: min(42rem, 100%); pointer-events: auto;
  padding: 2px; border-radius: 1.28rem;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--chroma) 38%, rgba(20, 24, 32, 0.94)),
    rgba(8, 10, 18, 0.55) 45%,
    color-mix(in srgb, var(--b3) 80%, transparent) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chroma) 22%, transparent),
    0 28px 90px rgba(0, 0, 0, 0.52),
    inset 0 0 120px rgba(2, 4, 12, 0.35),
    0 0 80px color-mix(in srgb, var(--chroma) 8%, transparent);
  transform: translate3d(var(--px, 0), var(--py, 0), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.12s ease-out, box-shadow 0.35s ease;
}
body.high-vis .crt-shell {
  outline: 2px solid color-mix(in srgb, var(--chroma) 62%, #f2f6ff);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chroma) 35%, transparent),
    0 28px 90px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body.high-vis .btn {
  border-width: 2px;
}

body.rgb-split .crt-shell {
  box-shadow:
    -3px 0 0 color-mix(in srgb, #f04 32%, transparent),
    3px 0 0 color-mix(in srgb, #0af 32%, transparent),
    0 0 0 1px color-mix(in srgb, var(--chroma) 22%, transparent);
}

@keyframes cine-border-pulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--chroma) 22%, transparent), 0 28px 90px rgba(0,0,0,0.52), 0 0 60px color-mix(in srgb, var(--chroma) 12%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--chroma) 42%, transparent), 0 22px 70px rgba(0,0,0,0.45), 0 0 100px color-mix(in srgb, var(--chroma) 22%, transparent); }
}
@keyframes choice-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(6px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes letterbox-shiver {
  0%, 100% { opacity: 0.55; transform: scaleY(1); }
  50% { opacity: 0.72; transform: scaleY(1.03); }
}
.letterbox-bar {
  position: fixed; left: 0; right: 0; height: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #020308 0%, transparent 100%);
  z-index: 35; pointer-events: none; opacity: 0.65;
}
.letterbox-bar--bottom {
  top: auto; bottom: 0; height: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, #020308 0%, transparent 100%);
}
body.mood-seuil .crt-shell { animation: cine-border-pulse 7s ease-in-out infinite; }
body.mood-epreuve .scan { opacity: 0.16 !important; }
body.mood-fin .chroma-field { opacity: 0.62; filter: blur(80px) saturate(120%); }
body.mood-fin .vignette { opacity: 0.95; }
body.mood-fin.mood-toxic .chroma-field {
  opacity: 0.78;
  filter: blur(72px) saturate(1.45) hue-rotate(-14deg);
}
body.mood-fin.mood-toxic .crt-shell {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #9a3 38%, transparent),
    0 28px 90px rgba(0, 0, 0, 0.52),
    0 0 70px color-mix(in srgb, #6a4 14%, transparent);
}

.crt-inner {
  border-radius: 1.05rem;
  background: color-mix(in srgb, var(--void) 92%, rgba(255, 255, 255, 0.02));
  padding: 1rem 0.95rem 1.1rem;
  position: relative; overflow: hidden; pointer-events: auto;
  transform: perspective(1180px) rotateX(0.42deg);
}
.crt-inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow:
    inset 0 18px 48px rgba(0, 0, 0, 0.38),
    inset 0 -10px 36px rgba(255, 255, 255, 0.02);
  mix-blend-mode: soft-light;
}
.crt-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.42);
}
.conduit-neva-host.v4-neva--speaking ~ .neva-dialogue #neva-line {
  text-shadow:
    0 0 10px color-mix(in srgb, var(--chroma) 50%, transparent),
    0 0 26px color-mix(in srgb, var(--chroma) 24%, transparent),
    1px 0 0 color-mix(in srgb, var(--chroma) 32%, transparent);
}

@keyframes conduit-reveal-in {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}
body.conduit-reveal #phase-conduit:not([hidden]) {
  animation: conduit-reveal-in 0.55s ease forwards;
}

.a11y-live-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.phase-panel { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.85rem; }

/* Phase « seuil » : sigil léger seulement. Néva pleine après le passage (évite double orbe / halo). */
#phase-sas[hidden],
#phase-conduit[hidden] {
  display: none !important;
}

.sigil-wrap {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.65rem;
  margin-bottom: 0.35rem;
}
.tag-terminal {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--chroma) 45%, var(--txt)); margin: 0; opacity: 0.9;
}
.sas-headline { margin: 0; font-size: clamp(1.05rem, 4vw, 1.35rem); line-height: 1.35; font-weight: 700; color: var(--txt); }
.sas-sub { margin: 0; font-size: 0.84rem; line-height: 1.55; opacity: 0.88; max-width: 36ch; }

/* Sigil sas : anneau chroma contenu (overflow propre) — pas de stack v4-neva ici. */
.sas-sigil {
  width: 3.25rem; height: 3.25rem; margin: 0.35rem auto 0.15rem; flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--chroma) 55%, transparent), transparent 62%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chroma) 40%, transparent),
    0 0 22px var(--amb);
  animation: sas-sigil-pulse 3.2s ease-in-out infinite;
}
@keyframes sas-sigil-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

.countdown {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; text-align: center;
}
.sas-pressure {
  margin: 0.45rem 0 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.62;
  text-align: center;
  color: color-mix(in srgb, var(--txt) 70%, var(--chroma));
}
.unit {
  padding: 0.5rem 0.25rem; border-radius: 0.55rem;
  background: color-mix(in srgb, var(--chroma) 6%, rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--chroma) 24%, rgba(255, 255, 255, 0.08));
}
.unit span {
  display: block; font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 4.5vw, 1.72rem); font-weight: 700; color: var(--chroma);
  text-shadow: 0 0 22px var(--amb);
}
.unit small { display: block; margin-top: 0.18rem; font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }

.whisper-sas {
  margin: 0; min-height: 3.2em; font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem;
  line-height: 1.55; color: color-mix(in srgb, var(--txt) 58%, var(--chroma)); text-align: center;
}

.sas-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

/* Hub rond — carte nerveuse + accès cent impulsions (écran compteur) */
.sas-orbit {
  margin: 0.75rem auto 0;
  max-width: 17rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.sas-orbit__btn {
  position: relative;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--chroma) 48%, transparent);
  background: color-mix(in srgb, var(--chroma) 9%, rgba(0, 0, 0, 0.42));
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chroma) 18%, transparent) inset,
    0 14px 42px rgba(0, 0, 0, 0.48),
    0 0 52px color-mix(in srgb, var(--chroma) 14%, transparent);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease;
  color: color-mix(in srgb, var(--chroma) 88%, var(--txt));
}
.sas-orbit__btn:hover {
  transform: scale(1.045);
  box-shadow: 0 0 64px var(--amb);
  border-color: color-mix(in srgb, var(--chroma) 72%, #fff);
}
.sas-orbit__btn:focus-visible {
  outline: 2px solid var(--chroma);
  outline-offset: 3px;
}
.sas-orbit__btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--chroma) 78%, #fff);
  box-shadow: 0 0 72px var(--amb);
}
.sas-orbit__btn svg {
  width: 3.85rem;
  height: 3.85rem;
  display: block;
  opacity: 0.94;
}
.sas-orbit__btn-legend {
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chroma) 72%, var(--txt));
  text-align: center;
  margin: 0;
  line-height: 1.35;
  max-width: 12rem;
}
.sas-orbit__panel {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.65rem 0.85rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--chroma) 8%, rgba(0, 0, 0, 0.5));
  border: 1px solid color-mix(in srgb, var(--chroma) 32%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.sas-orbit__panel[hidden] { display: none !important; }
.sas-orbit__map { margin: 0; width: 100%; }
.sas-orbit__map-ui { display: flex; flex-direction: column; gap: 0.45rem; }
.sas-orbit__map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  justify-content: center;
}
.sas-orbit__zoom-btn {
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.35rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 42%, transparent);
  background: color-mix(in srgb, var(--chroma) 10%, rgba(0, 0, 0, 0.4));
  color: color-mix(in srgb, var(--chroma) 92%, var(--txt));
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.sas-orbit__zoom-btn:hover {
  border-color: color-mix(in srgb, var(--chroma) 72%, #fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--chroma) 28%, transparent);
}
.sas-orbit__zoom-btn:focus-visible {
  outline: 2px solid var(--chroma);
  outline-offset: 2px;
}
.sas-orbit__map-hint {
  flex: 1 1 100%;
  text-align: center;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.62;
  color: color-mix(in srgb, var(--txt) 72%, var(--chroma));
}
.sas-orbit__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: min(52vh, 18rem);
  min-height: 11rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 28%, transparent);
  background: color-mix(in srgb, var(--chroma) 5%, rgba(0, 0, 0, 0.45));
  touch-action: none;
  cursor: grab;
  outline: none;
}
.sas-orbit__viewport:active {
  cursor: grabbing;
}
.sas-orbit__viewport:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--chroma) 80%, #fff);
  outline-offset: 3px;
}
.sas-orbit__pan-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  max-width: 24rem;
  transform: translate(-50%, -50%);
  will-change: transform;
  transform-origin: center center;
}
.sas-orbit__pan-layer svg {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.sas-orbit__map .n-map-hot {
  fill: transparent;
  stroke: none;
  pointer-events: fill;
  cursor: pointer;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.sas-orbit__map .n-map-hot--path {
  fill: none;
  pointer-events: stroke;
  stroke: transparent;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sas-orbit__map .n-map-hot:hover,
.sas-orbit__map .n-map-hot:focus-visible {
  fill: color-mix(in srgb, var(--chroma) 16%, transparent);
  stroke: color-mix(in srgb, var(--chroma) 48%, transparent);
  stroke-width: 1.4;
}
.sas-orbit__map .n-map-hot--path:hover,
.sas-orbit__map .n-map-hot--path:focus-visible {
  stroke: color-mix(in srgb, var(--chroma) 42%, transparent);
  stroke-width: 16;
}
.sas-orbit__detail {
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem 0.75rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--chroma) 9%, rgba(0, 0, 0, 0.42));
  border: 1px solid color-mix(in srgb, var(--chroma) 34%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  position: relative;
}
.sas-orbit__detail[hidden] { display: none !important; }
.sas-orbit__detail-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chroma) 88%, var(--txt));
}
.sas-orbit__detail-body {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--txt) 92%, var(--chroma));
}
.sas-orbit__detail-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  min-width: auto;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  line-height: 1;
}
.sas-orbit__map .n-node { fill: color-mix(in srgb, var(--chroma) 22%, rgba(255,255,255,0.06)); stroke: var(--chroma); stroke-width: 1.2; }
.sas-orbit__map .n-core { fill: color-mix(in srgb, var(--chroma) 45%, transparent); }
.sas-orbit__map .n-edge { stroke: color-mix(in srgb, var(--chroma) 38%, transparent); stroke-width: 1.15; fill: none; }
.sas-orbit__map .n-edge--loop { stroke-dasharray: 4 3; opacity: 0.85; }
.sas-orbit__map text {
  fill: color-mix(in srgb, var(--txt) 90%, var(--chroma));
  font-size: 8px;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.04em;
}
.sas-orbit__map .n-map-deep {
  font-size: 6px;
  letter-spacing: 0.02em;
  opacity: 0.92;
}
.sas-orbit__sub {
  margin: 0.55rem 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  opacity: 0.86;
  text-align: center;
}

.panel-label {
  font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--chroma) 62%, var(--txt)); margin: 0 0 0.5rem; text-align: center;
}

#phase-conduit .conduit-stack {
  display: flex; flex-direction: column; gap: 0.85rem;
  max-width: 32rem; margin: 0 auto;
}

.hud {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.58rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--chroma) 55%, var(--txt)); opacity: 0.82;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem;
}
.hud strong { color: var(--chroma); font-weight: 600; }
.hud.hud--streak {
  box-shadow: 0 0 22px color-mix(in srgb, var(--chroma) 35%, transparent);
  border-radius: 0.45rem;
  padding: 0.2rem 0.35rem;
  transition: box-shadow 0.35s ease;
}
body.conduit-zen .ticker { opacity: 0.55; }
.pulse-diff {
  display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center;
  margin: 0.35rem 0 0.55rem;
}
.pulse-diff button {
  font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.28rem 0.5rem; border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 35%, transparent);
  background: color-mix(in srgb, var(--chroma) 8%, rgba(0,0,0,0.35));
  color: color-mix(in srgb, var(--chroma) 75%, var(--txt));
  cursor: pointer; font: inherit;
}
.pulse-diff button.is-active {
  box-shadow: 0 0 16px var(--amb);
  border-color: color-mix(in srgb, var(--chroma) 65%, transparent);
  color: var(--chroma);
}

.glass {
  border-radius: 1rem;
  background: color-mix(in srgb, var(--chroma) 9%, rgba(255,255,255,0.05));
  border: 1px solid color-mix(in srgb, var(--chroma) 38%, rgba(255,255,255,0.12));
  backdrop-filter: blur(44px) saturate(220%); -webkit-backdrop-filter: blur(44px) saturate(220%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chroma) 14%, transparent) inset, 0 18px 48px rgba(0,0,0,0.4);
}

.release-signature-hub {
  margin: 0.75rem 0 0;
  padding: 1rem 1.1rem 1.15rem;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.release-signature-hub__head {
  margin-bottom: 0.75rem;
  text-align: center;
}
.release-sig-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.72;
  margin: 0 0 0.35rem;
  color: color-mix(in srgb, var(--chroma) 55%, var(--txt));
}
.release-sig-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  line-height: 1.2;
  text-shadow: 0 0 22px color-mix(in srgb, var(--chroma) 35%, transparent);
}
.release-sig-stem {
  font-size: 0.58rem;
  opacity: 0.62;
  margin: 0;
  word-break: break-word;
}
.release-sig-stage {
  position: relative;
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chroma) 32%, rgba(255,255,255,0.1));
  background: rgba(0,0,0,0.25);
  margin-bottom: 0.65rem;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 22rem);
}
.release-sig-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.release-sig-poster-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--chroma) 22%, transparent), rgba(0,0,0,0.5));
}
.release-sig-poster {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--chroma) 40%, transparent));
}
.release-sig-audio {
  width: 100%;
  margin: 0 0 0.55rem;
  accent-color: var(--chroma);
}
.release-sig-lead {
  font-size: 0.72rem;
  opacity: 0.88;
  line-height: 1.45;
  margin: 0 0 0.5rem;
  text-align: center;
}
.release-sig-link {
  display: inline-flex;
  margin: 0 auto 0.6rem;
  font-size: 0.68rem;
  align-self: center;
}
.release-signature-hub__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.release-sig-author {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  opacity: 0.55;
  margin: 0 0 0.5rem;
  text-align: center;
}
.release-sig-lyrics {
  width: 100%;
  max-height: min(38vh, 14rem);
  overflow: auto;
  font-size: 0.66rem;
  line-height: 1.55;
  white-space: pre-wrap;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--chroma) 6%, rgba(0,0,0,0.35));
  border: 1px solid color-mix(in srgb, var(--chroma) 22%, transparent);
  -webkit-overflow-scrolling: touch;
}
.release-sig-lyrics--karaoke {
  white-space: normal;
  text-align: center;
  min-height: 2.6em;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.neva-block {
  display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1rem 1.25rem;
  pointer-events: auto; position: relative; z-index: 2;
  overflow: visible;
  isolation: isolate;
}

/*
  Companion Néva partagé avec la façade publique (neva_companion + v4_neva) :
  halo, double anneau, orbe, persona (brow / yeux / visor).
  Calé plus petit que la veille plein écran pour tenir dans la ligne dialogue.
*/
.conduit-neva-host {
  --v4-theme-color: var(--chroma);
  --v4-ambient-glow: var(--amb);
  --v4-text: var(--txt);
  --v4-text-dim: color-mix(in srgb, var(--v4-text) 65%, var(--v4-theme-color));
  position: relative;
  width: 6.85rem;
  height: 6.85rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 0 14px var(--amb)) drop-shadow(0 0 36px color-mix(in srgb, var(--chroma) 18%, transparent));
}

.conduit-neva-host .v4-neva__orb-stack {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  margin: 0;
  transform: scale(1.42);
  transform-origin: center center;
  pointer-events: none;
}

.conduit-neva-host .v4-neva__halo {
  position: absolute;
  right: 0.35rem;
  bottom: 0.15rem;
  width: 120px;
  height: 120px;
  margin-left: -48px;
  margin-top: -48px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--v4-theme-color) 35%, transparent),
    transparent 70%
  );
  filter: blur(12px);
  opacity: 0.75;
  animation: conduit-halo-pulse 4.2s ease-in-out infinite;
  pointer-events: none;
}

.conduit-neva-host.v4-neva--speaking .v4-neva__halo {
  background: radial-gradient(circle, color-mix(in srgb, var(--v4-theme-color) 42%, transparent), transparent 72%);
  opacity: 0.95;
  animation: conduit-halo-speak 2.4s ease-in-out infinite;
}

@keyframes conduit-halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 0.9; }
}

@keyframes conduit-halo-speak {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.18); opacity: 1; }
}

.conduit-neva-host .v4-neva__core {
  position: relative;
  width: 72px;
  height: 72px;
  pointer-events: none;
}

.conduit-neva-host .v4-neva__orb {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 44% 32%,
    rgba(255, 255, 255, 0.52) 0%,
    color-mix(in srgb, var(--v4-theme-color) 78%, #012a2c) 34%,
    color-mix(in srgb, var(--v4-theme-color) 52%, #001418) 62%,
    color-mix(in srgb, var(--v4-theme-color) 28%, #000608) 100%
  );
  box-shadow:
    0 0 30px color-mix(in srgb, var(--v4-ambient-glow) 90%, transparent),
    inset 0 10px 22px rgba(255, 255, 255, 0.16),
    inset 0 -14px 26px rgba(0, 8, 12, 0.55);
  animation: conduit-orb-breathe 3.6s ease-in-out infinite;
  backface-visibility: hidden;
}

.conduit-neva-host.v4-neva--speaking .v4-neva__orb {
  animation: conduit-orb-speak 1.1s ease-in-out infinite;
  background: radial-gradient(
    circle at 44% 32%,
    rgba(255, 255, 255, 0.62) 0%,
    color-mix(in srgb, var(--v4-theme-color) 72%, #012a2c) 38%,
    color-mix(in srgb, var(--v4-theme-color) 48%, #001418) 64%,
    #001a16 100%
  );
  box-shadow:
    0 0 42px color-mix(in srgb, var(--v4-theme-color) 55%, transparent),
    0 0 80px color-mix(in srgb, var(--v4-theme-color) 28%, transparent),
    inset 0 10px 22px rgba(255, 255, 255, 0.2),
    inset 0 -14px 26px rgba(0, 24, 20, 0.55);
}

@keyframes conduit-orb-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.12); }
}

@keyframes conduit-orb-speak {
  0%, 100% { transform: scale(1); filter: brightness(1.08); }
  50% { transform: scale(1.09); filter: brightness(1.28); }
}

.conduit-neva-host .v4-neva__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--v4-theme-color) 55%, transparent);
  opacity: 0.55;
}

.conduit-neva-host .v4-neva__ring--a {
  animation: conduit-spin 14s linear infinite;
}

.conduit-neva-host .v4-neva__ring--b {
  inset: 6%;
  animation: conduit-spin 9s linear infinite reverse;
  border-style: dashed;
  opacity: 0.35;
}

@keyframes conduit-spin {
  to { transform: rotate(360deg); }
}

.conduit-neva-host:not(.v4-neva--persona) .v4-neva__sentience {
  visibility: hidden;
  opacity: 0;
}

.conduit-neva-host.v4-neva--persona .v4-neva__sentience {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

.conduit-neva-host.v4-neva--persona .v4-neva__sentience::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(0, 12, 18, 0.08) 0%,
    rgba(0, 8, 14, 0.42) 52%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.conduit-neva-host.v4-neva--persona .v4-neva__brow-plate,
.conduit-neva-host.v4-neva--persona .v4-neva__eyes,
.conduit-neva-host.v4-neva--persona .v4-neva__visor-line {
  position: relative;
  z-index: 1;
}

.conduit-neva-host.v4-neva--persona .v4-neva__brow-plate {
  width: 54%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--v4-theme-color) 65%, #0a1018),
    transparent
  );
  opacity: 0.88;
}

.conduit-neva-host.v4-neva--persona .v4-neva__eyes {
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.conduit-neva-host.v4-neva--persona .v4-neva__eye {
  width: 13px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at 38% 38%,
    #ecf8ff,
    color-mix(in srgb, var(--v4-theme-color) 72%, #012) 58%,
    #020608 100%
  );
  box-shadow:
    0 0 11px color-mix(in srgb, #7ff 35%, var(--v4-theme-color)),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  animation: conduit-eye-breathe 3.4s ease-in-out infinite;
}

.conduit-neva-host.v4-neva--persona .v4-neva__eye--r {
  animation-delay: 0.14s;
}

@keyframes conduit-eye-breathe {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.15); }
}

.conduit-neva-host.v4-neva--persona .v4-neva__visor-line {
  width: 62%;
  height: 1px;
  margin-top: 0.08rem;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--v4-theme-color) 50%, transparent),
    transparent
  );
  opacity: 0.75;
}

.conduit-neva-host.v4-neva--persona.v4-neva--speaking .v4-neva__eye {
  box-shadow:
    0 0 18px color-mix(in srgb, var(--v4-theme-color) 55%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.conduit-neva-host.conduit-neva-host--wince .v4-neva__eye {
  animation: none !important;
  transform: scaleY(0.35);
  filter: brightness(1.15) saturate(1.2);
}
.conduit-neva-host.conduit-neva-host--wince .v4-neva__orb {
  filter: brightness(0.92);
}

.neva-dialogue { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.neva-name { font-size: 0.62rem; letter-spacing: 0.35em; color: var(--chroma); margin: 0 0 0.35rem; font-weight: 600; }
#neva-line {
  margin: 0; font-size: 0.88rem; line-height: 1.66; color: color-mix(in srgb, var(--txt) 88%, var(--chroma));
  min-height: 4.5em;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.choice-hint {
  font-size: 0.7rem; line-height: 1.45; opacity: 0.78; margin: 0 0 0.6rem;
  color: color-mix(in srgb, var(--chroma) 35%, var(--txt));
  font-style: italic;
}

.choices-wrap { padding: 0.85rem 1rem; pointer-events: auto !important; position: relative; z-index: 6; }
.choices-wrap h3 {
  margin: 0 0 0.65rem; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--chroma) 65%, var(--txt));
}
.choices { display: flex; flex-direction: column; gap: 0.45rem; }
.choice {
  display: flex; align-items: flex-start; gap: 0.55rem; cursor: pointer; padding: 0.55rem 0.65rem; border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 22%, rgba(255,255,255,0.08));
  background: color-mix(in srgb, var(--chroma) 4%, rgba(255,255,255,0.02));
  transition: border-color 0.2s, box-shadow 0.2s; text-align: left; touch-action: manipulation;
  pointer-events: auto !important; position: relative; z-index: 7;
}
.choice:hover, .choice:focus-within { border-color: color-mix(in srgb, var(--chroma) 55%, transparent); box-shadow: 0 0 18px var(--amb); }
.choice input { flex: 0 0 auto; margin-top: 0.2rem; accent-color: var(--chroma); width: 1rem; height: 1rem; }
.choice span { font-size: 0.82rem; line-height: 1.45; color: color-mix(in srgb, var(--txt) 90%, var(--chroma)); }
.choice.is-on { border-color: color-mix(in srgb, var(--chroma) 70%, #fff); background: color-mix(in srgb, var(--chroma) 12%, rgba(0,0,0,0.2)); }
.choice.choice-rise-stagger { opacity: 0; animation: choice-rise 0.55s ease forwards; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.btn {
  appearance: none; border: none; cursor: pointer; font: inherit;
  padding: 0.62rem 1rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem;
  background: color-mix(in srgb, var(--chroma) 18%, rgba(255,255,255,0.06));
  color: var(--txt); border: 1px solid color-mix(in srgb, var(--chroma) 45%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--chroma) 15%, transparent); touch-action: manipulation;
  pointer-events: auto !important; position: relative; z-index: 8;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 32px var(--amb); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }
.btn--ghost { background: transparent; box-shadow: none; }

.foot-links {
  text-align: center; margin-top: auto; padding-top: 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; align-items: center;
}
.foot-links a {
  color: color-mix(in srgb, var(--chroma) 50%, var(--txt)); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}

.glossary-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(2, 4, 12, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
body.glossary-open .glossary-backdrop { opacity: 1; pointer-events: auto; }
.glossary-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151;
  width: min(22rem, 94vw); max-width: 100%;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom)) 0;
}
body.glossary-open .glossary-drawer { transform: translate3d(0, 0, 0); pointer-events: auto; }
.glossary-drawer__inner {
  height: 100%; overflow: auto; padding: 1rem 1rem 1.25rem;
  border-radius: 1rem 0 0 1rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 32%, transparent);
  box-shadow: -12px 0 60px rgba(0, 0, 0, 0.45);
}
.glossary-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.glossary-drawer__title {
  margin: 0; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--chroma);
}
.glossary-dl { margin: 0; font-size: 0.78rem; line-height: 1.55; }
.glossary-dl dt {
  margin-top: 0.85rem; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--chroma) 85%, var(--txt));
}
.glossary-dl dt:first-child { margin-top: 0; }
.glossary-dl dd { margin: 0.25rem 0 0; opacity: 0.9; }

.shortcuts-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(2, 4, 12, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
body.shortcuts-open .shortcuts-backdrop { opacity: 1; pointer-events: auto; }
.shortcuts-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 151;
  width: min(22rem, 94vw); max-width: 100%;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  padding: max(0.5rem, env(safe-area-inset-top)) 0
    max(0.75rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
}
body.shortcuts-open .shortcuts-drawer { transform: translate3d(0, 0, 0); pointer-events: auto; }
.shortcuts-drawer__inner {
  height: 100%; overflow: auto; padding: 1rem 1rem 1.25rem;
  border-radius: 0 1rem 1rem 0;
  border: 1px solid color-mix(in srgb, var(--chroma) 32%, transparent);
  box-shadow: 12px 0 60px rgba(0, 0, 0, 0.45);
}
.shortcuts-kbd {
  display: inline-block; font-family: ui-monospace, monospace; font-size: 0.62rem;
  padding: 0.12rem 0.35rem; border-radius: 0.28rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 40%, transparent);
  background: color-mix(in srgb, var(--chroma) 8%, rgba(0,0,0,0.4));
  color: color-mix(in srgb, var(--chroma) 90%, var(--txt));
}
.shortcuts-list { margin: 0; padding: 0; list-style: none; font-size: 0.78rem; line-height: 1.65; }
.shortcuts-list li { display: flex; gap: 0.5rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid color-mix(in srgb, var(--chroma) 12%, transparent); padding: 0.45rem 0; }
.shortcuts-list li:last-child { border-bottom: none; }

.synapse-stage {
  position: relative; width: 100%; max-width: 280px; margin: 0.5rem auto 1rem;
  aspect-ratio: 1; border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 28%, transparent);
  background: color-mix(in srgb, var(--void) 90%, rgba(0,0,0,0.5));
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--chroma) 8%, transparent);
}
.synapse-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.synapse-nodes { position: absolute; inset: 0; pointer-events: none; }
.synapse-node {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  pointer-events: auto; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--chroma) 55%, transparent);
  background: color-mix(in srgb, var(--chroma) 14%, rgba(0,0,0,0.55));
  color: color-mix(in srgb, var(--chroma) 92%, var(--txt));
  font-family: ui-monospace, monospace; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 24px color-mix(in srgb, var(--chroma) 18%, transparent);
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.synapse-node:hover { transform: scale(1.06); box-shadow: 0 0 36px color-mix(in srgb, var(--chroma) 28%, transparent); }
.synapse-node.is-lit {
  border-color: color-mix(in srgb, var(--chroma) 88%, #fff);
  box-shadow: 0 0 42px color-mix(in srgb, var(--chroma) 45%, transparent);
}
.synapse-node.is-bad {
  animation: synapse-shake 0.38s ease;
}
@keyframes synapse-shake {
  0%, 100% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-4px, 2px, 0); }
  50% { transform: translate3d(4px, -1px, 0); }
  75% { transform: translate3d(-2px, -2px, 0); }
}

.ritual-resume-banner {
  font-size: 0.62rem; line-height: 1.45; text-align: center;
  padding: 0.45rem 0.65rem; margin: 0 0 0.35rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 35%, transparent);
  background: color-mix(in srgb, var(--chroma) 10%, rgba(0, 0, 0, 0.35));
  box-shadow: 0 0 24px color-mix(in srgb, var(--chroma) 12%, transparent);
}
.ritual-resume-banner p { margin: 0; }
.ritual-resume-banner .btn { margin-left: 0.35rem; vertical-align: middle; }

/* Overlays rituels */
.ritual {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: rgba(2,4,12,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  pointer-events: auto !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  box-sizing: border-box;
}
.ritual[hidden] { display: none !important; }
.ritual.ritual--paused::before {
  content: "Stase · P pour reprendre";
  position: fixed; z-index: 210; bottom: calc(4.25rem + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.45rem 0.85rem; border-radius: 0.5rem; pointer-events: none;
  background: color-mix(in srgb, var(--chroma) 18%, rgba(0,0,0,0.82));
  border: 1px solid color-mix(in srgb, var(--chroma) 35%, transparent);
  color: color-mix(in srgb, var(--chroma) 88%, var(--txt));
  box-shadow: 0 0 32px var(--amb);
}
.ritual-card {
  width: min(22rem, 100%); padding: 1.15rem; border-radius: 1rem;
  background: color-mix(in srgb, var(--void) 94%, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in srgb, var(--chroma) 40%, transparent);
  box-shadow: 0 0 80px var(--amb);
  max-height: min(88dvh, calc(100svh - 2rem));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  flex-shrink: 0;
}
.ritual-card h2 { margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.25em; color: var(--chroma); text-transform: uppercase; }
.ritual-card p { margin: 0 0 0.85rem; font-size: 0.82rem; line-height: 1.58; opacity: 0.92; }
.ritual-lore {
  font-size: 0.74rem; line-height: 1.55; opacity: 0.82; margin: -0.25rem 0 0.75rem;
  padding: 0.55rem 0.65rem; border-radius: 0.5rem;
  border-left: 3px solid color-mix(in srgb, var(--chroma) 55%, transparent);
  background: color-mix(in srgb, var(--chroma) 6%, rgba(0,0,0,0.25));
  font-family: ui-monospace, Consolas, monospace;
}
.ritual-expect {
  font-size: 0.72rem; line-height: 1.5; color: color-mix(in srgb, var(--chroma) 58%, var(--txt));
  margin: 0 0 0.6rem; padding: 0.45rem 0; border-top: 1px dashed color-mix(in srgb, var(--chroma) 22%, transparent);
}
.pulse-hud { font-family: monospace; font-size: 0.68rem; color: color-mix(in srgb, var(--chroma) 65%, var(--txt)); margin: 0.35rem 0; }
.pulse-canvas-wrap {
  position: relative; display: flex; justify-content: center; align-items: center;
  margin: 0.5rem 0 1rem; min-height: 240px;
}
.pulse-coach {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 0.65rem; margin: 0 auto; max-width: 280px;
  background: rgba(4, 8, 16, 0.72); border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--chroma) 35%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--chroma) 15%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  animation: pulse-coach-in 0.45s ease-out;
}
.pulse-coach[hidden] { display: none !important; }
.pulse-coach__line { font-size: 0.62rem; margin: 0.18rem 0; line-height: 1.4; letter-spacing: 0.04em; max-width: 22rem; }
.pulse-coach__dim { font-size: 0.52rem; opacity: 0.7; margin-top: 0.45rem; letter-spacing: 0.12em; text-transform: uppercase; }
@keyframes pulse-coach-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
#pulse-cv { width: 200px; height: 200px; touch-action: manipulation; cursor: pointer; }
.calib { margin: 0.5rem 0; }
.calib input[type="range"] { width: 100%; accent-color: var(--chroma); }
.calib .readout { font-family: monospace; font-size: 0.72rem; margin-top: 0.35rem; color: color-mix(in srgb, var(--chroma) 70%, var(--txt)); }
.meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 0.4rem; }
.meter > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--chroma), color-mix(in srgb, var(--chroma) 40%, #f4a)); transition: width 0.08s; }

.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-width: 100vw;
  padding: 0.4rem max(0.5rem, env(safe-area-inset-left)) calc(0.4rem + env(safe-area-inset-bottom))
    max(0.5rem, env(safe-area-inset-right));
  font-family: monospace; font-size: 0.58rem; color: color-mix(in srgb, var(--chroma) 45%, #aab);
  background: linear-gradient(to top, rgba(2,4,10,0.95), rgba(5,8,16,0.88)); border-top: 1px solid color-mix(in srgb, var(--chroma) 28%, transparent);
  pointer-events: none !important;
  overflow: hidden;
  box-sizing: border-box;
}
.ticker #tick-line,
.ticker #tick-sub {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.ticker * { pointer-events: none !important; }

.architect-grid-tools {
  display: none; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-top: 0.35rem;
  padding: 0.35rem 0.4rem; border-radius: 0.5rem;
  border: 1px dashed color-mix(in srgb, var(--chroma) 40%, transparent);
  background: color-mix(in srgb, var(--chroma) 5%, rgba(0, 0, 0, 0.2));
}
body.teaser-debug .architect-grid-tools { display: flex; }
.architect-grid-tools__lbl {
  font-size: 0.52rem; opacity: 0.75; letter-spacing: 0.12em; text-transform: uppercase; width: 100%;
}
.res-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: min(280px, 92vw); margin: 0.5rem auto;
}
.res-cell {
  aspect-ratio: 1; border-radius: 4px; cursor: pointer; touch-action: manipulation;
  border: 1px solid color-mix(in srgb, var(--chroma) 30%, transparent);
  background: color-mix(in srgb, var(--chroma) 6%, rgba(0,0,0,0.3));
  transition: background 0.12s, box-shadow 0.12s;
}
.res-cell.is-path { box-shadow: 0 0 12px var(--amb); }
.res-cell.is-hit { background: color-mix(in srgb, var(--chroma) 35%, rgba(0,0,0,0.2)); }
.res-cell.is-bad { border-color: #f04455; animation: shake 0.3s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); }
}
.resonance-pad {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; max-width: 200px; margin: 0.5rem auto;
}
.resonance-pad button {
  aspect-ratio: 1; border-radius: 0.65rem; cursor: pointer; font-size: 1.2rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--chroma) 45%, transparent);
  background: color-mix(in srgb, var(--chroma) 10%, rgba(0,0,0,0.35)); color: var(--chroma);
}
.resonance-pad button.is-flash {
  box-shadow: 0 0 28px var(--amb); background: color-mix(in srgb, var(--chroma) 28%, rgba(0,0,0,0.2));
}
.breath-zone {
  position: relative; height: 48px; border-radius: 8px; margin: 0.75rem 0;
  background: rgba(255,255,255,0.06); border: 1px solid color-mix(in srgb, var(--chroma) 35%, transparent);
  overflow: hidden; touch-action: manipulation; cursor: pointer; user-select: none;
}
.breath-target {
  position: absolute; top: 4px; bottom: 4px; width: 28%; left: 35%;
  border-radius: 6px; background: color-mix(in srgb, var(--chroma) 22%, transparent);
  box-shadow: inset 0 0 12px var(--amb);
}
.breath-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chroma) 45%, transparent));
  pointer-events: none;
}
.breath-hud { font-family: monospace; font-size: 0.7rem; color: color-mix(in srgb, var(--chroma) 65%, var(--txt)); }

/* Echo Locator — champ d’écoute stéréo (clic = azimut perçu) */
.echo-field {
  position: relative; height: 56px; border-radius: 10px; margin: 0.75rem 0;
  background: linear-gradient(90deg, rgba(8,12,24,0.95) 0%, rgba(18,22,32,0.88) 50%, rgba(8,12,24,0.95) 100%);
  border: 1px solid color-mix(in srgb, var(--chroma) 38%, transparent);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.45);
  overflow: hidden; touch-action: manipulation; cursor: crosshair; user-select: none;
}
.echo-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 11px, color-mix(in srgb, var(--chroma) 8%, transparent) 11px, color-mix(in srgb, var(--chroma) 8%, transparent) 12px);
  opacity: 0.35;
}
.echo-field__glow {
  position: absolute; top: 0; bottom: 0; width: 18%; left: 41%;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 120% at 50% 50%, color-mix(in srgb, var(--chroma) 25%, transparent), transparent 70%);
  opacity: 0.45; mix-blend-mode: screen;
}
.echo-field.is-armed { outline: 1px solid color-mix(in srgb, var(--chroma) 55%, transparent); }
.echo-field.is-idle { opacity: 0.72; cursor: default; }

/* Accord des porteuses (Lot 3c) */
.freq-meter-wrap {
  height: 8px; border-radius: 4px; margin: 0.65rem 0 0.5rem;
  background: rgba(255,255,255,0.08); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chroma) 28%, transparent);
}
.freq-meter {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--chroma) 35%, #3060ff44), var(--chroma));
  box-shadow: 0 0 14px var(--amb);
  transition: width 0.08s ease-out;
}
.freq-label { display: block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.82; margin: 0.35rem 0 0.2rem; }
.freq-slider { width: 100%; accent-color: var(--chroma); margin: 0.25rem 0 0.35rem; }

/* Paires thermiques (Lot 3d) */
.pairs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: 268px; margin: 0.65rem auto 0.5rem;
}
.pairs-card {
  aspect-ratio: 1; min-height: 0;
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--chroma) 38%, transparent);
  background: color-mix(in srgb, var(--chroma) 8%, rgba(0,0,0,0.38));
  cursor: pointer; padding: 0; touch-action: manipulation;
  font-size: clamp(1rem, 4.5vw, 1.35rem); font-weight: 700; color: var(--chroma);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.12s, opacity 0.2s;
}
.pairs-card:hover:not(:disabled) { box-shadow: 0 0 12px var(--amb); }
.pairs-card:disabled { cursor: default; opacity: 0.5; }
.pairs-card--open {
  box-shadow: 0 0 14px var(--amb);
  border-color: color-mix(in srgb, var(--chroma) 55%, transparent);
}
.pairs-card--paired {
  opacity: 0.48;
  cursor: default;
  border-style: dashed;
}
.pairs-card__back {
  font-family: ui-monospace, monospace; font-size: 0.52rem; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.65; color: color-mix(in srgb, var(--chroma) 70%, var(--txt));
}
.pairs-card--open .pairs-card__back { display: none; }
.pairs-card:not(.pairs-card--open) .pairs-card__sym { display: none; }

/* Ligne de fuite (Lot 3e) */
.flee-stage {
  position: relative; max-width: 400px; margin: 0.65rem auto 0.5rem;
  border-radius: 12px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chroma) 32%, transparent);
  background: rgba(0, 0, 0, 0.35);
  touch-action: none; user-select: none;
  box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.5);
}
.flee-stage svg { display: block; width: 100%; height: auto; }
.flee-path {
  fill: none; stroke: color-mix(in srgb, var(--chroma) 42%, rgba(255, 255, 255, 0.15));
  stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--amb));
}
.flee-path--glow {
  fill: none; stroke: color-mix(in srgb, var(--chroma) 65%, transparent);
  stroke-width: 14; stroke-linecap: round; opacity: 0.22; pointer-events: none;
}
.flee-dot {
  fill: color-mix(in srgb, var(--chroma) 55%, #fff);
  opacity: 0.35; pointer-events: none;
}
.flee-dot--end { opacity: 0.55; }
.flee-stage.ritual-flee--armed .flee-path { stroke: color-mix(in srgb, var(--chroma) 58%, rgba(200, 220, 255, 0.4)); }

.veil {
  position: fixed; inset: 0; z-index: 60; pointer-events: none !important; opacity: 0;
  background: color-mix(in srgb, var(--chroma) 28%, transparent); mix-blend-mode: screen;
}
.veil.pop { animation: vpop 0.5s ease; }
@keyframes vpop {
  0%{opacity:0} 15%{opacity:0.55} 100%{opacity:0}
}

/* Mobile : une seule zone de scroll fluide ; le texte dialogue suit via JS (machine à écrire). */
@media (max-width: 720px) {
  body {
    overscroll-behavior-y: contain;
    isolation: isolate;
  }
  .root-frame {
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    padding: max(0.45rem, env(safe-area-inset-top)) min(0.85rem, env(safe-area-inset-right))
      calc(4.65rem + env(safe-area-inset-bottom)) min(0.85rem, env(safe-area-inset-left));
    box-sizing: border-box;
  }
  .crt-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: calc(var(--vvh, 100dvh) - 4.55rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .crt-inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: 0.65rem 0.6rem 0.85rem;
  }
  .phase-panel { min-height: 0; }
  #phase-conduit .conduit-stack {
    max-width: 100%;
    gap: 0.65rem;
  }
  .neva-block {
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.65rem;
    gap: 0.55rem;
  }
  .conduit-neva-host {
    width: 5.25rem;
    height: 5.25rem;
  }
  .conduit-neva-host .v4-neva__orb-stack {
    transform: scale(1.12);
  }
  #neva-line {
    min-height: auto;
    max-height: min(40vh, 14rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 0.2rem;
    font-size: 0.93rem;
    line-height: 1.6;
  }
  .choices-wrap { padding: 0.75rem 0.65rem; }
  .choices-wrap h3 { font-size: 0.54rem; letter-spacing: 0.18em; }
  .choice {
    padding: 0.7rem 0.75rem;
    min-height: 2.75rem;
    align-items: center;
  }
  .choice input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0;
  }
  .choice span {
    font-size: 0.89rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .btn {
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.64rem;
  }
  .hud {
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    gap: 0.28rem;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hud > span { flex: 1 1 100%; min-width: 0; }
  /*
    Bandes magenta / crème en continu sur mobile : mix-blend (screen / soft-light)
    + flous larges → franges au bord du viewport sur WebKit/Blink. On passe en fusion
    normale et on calme le scanline animé (repaints) — l’âme (chroma, halos) reste.
  */
  .chroma-field {
    mix-blend-mode: normal;
    inset: -8%;
    filter: blur(32px) saturate(118%);
    opacity: 0.66;
  }
  #ribbons {
    mix-blend-mode: normal;
    opacity: 0.32;
  }
  .scan {
    mix-blend-mode: normal;
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none;
  }
  body.mood-epreuve .scan,
  body.node-glitch .scan {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  body.mood-fin .chroma-field {
    filter: blur(44px) saturate(115%) !important;
    opacity: 0.58 !important;
  }
  body.mood-fin.mood-toxic .chroma-field {
    filter: blur(40px) saturate(1.25) hue-rotate(-14deg) !important;
    opacity: 0.62 !important;
  }
  .crt-inner::before {
    mix-blend-mode: normal;
  }
  .veil {
    mix-blend-mode: normal;
  }
  .echo-field__glow {
    mix-blend-mode: normal;
    opacity: 0.38;
  }
  .letterbox-bar,
  .letterbox-bar--bottom {
    background: #020308;
    opacity: 0.88;
  }
  /* Passe perf mobile 2 : moins de backdrop-filter (coût élevé sur GPU téléphone) */
  .glass {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
  .sas-orbit__btn {
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
  }
  .sas-orbit__map-toolbar .sas-orbit__zoom-btn {
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
  }
  .glossary-backdrop,
  .shortcuts-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(2, 4, 12, 0.94);
  }
  .ritual {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(2, 4, 12, 0.88);
  }
  .pulse-coach {
    backdrop-filter: blur(4px) saturate(125%);
    -webkit-backdrop-filter: blur(4px) saturate(125%);
  }
  .release-signature-hub.glass {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
  }
  body.mood-seuil .crt-shell {
    animation: none;
  }
  .crt-shell {
    transition: transform 0.1s ease-out, box-shadow 0.25s ease;
  }
  .sas-sigil {
    animation-duration: 5.5s;
  }
  #dust {
    opacity: 0.35;
  }
  .fog-layer {
    opacity: 0.22;
  }
  .vignette {
    opacity: 0.82;
  }
  .noise {
    opacity: 0.035;
  }
  body::before {
    background:
      radial-gradient(80% 55% at 12% 18%, var(--b1) 0%, transparent 55%),
      radial-gradient(120% 90% at 50% -10%, var(--void2) 0%, var(--void) 52%, #03060a 100%);
  }
  #neva-line,
  .neva-dialogue,
  .sas-sub,
  .whisper-sas {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ritual-resume-banner p {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .ritual-resume-banner .btn {
    margin-left: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  .ritual-card {
    max-height: min(82dvh, calc(100svh - 5.5rem));
  }
  .ritual.ritual--paused::before {
    bottom: calc(4.35rem + env(safe-area-inset-bottom));
    max-width: calc(100vw - 1.5rem);
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }
  .pulse-canvas-wrap {
    min-height: min(200px, 42svh);
    max-height: 48svh;
  }
  .glossary-drawer {
    width: 100%;
    max-width: 100%;
    padding:
      max(0.45rem, env(safe-area-inset-top))
      max(0.45rem, env(safe-area-inset-right))
      max(0.65rem, env(safe-area-inset-bottom))
      max(0.35rem, env(safe-area-inset-left));
  }
  .glossary-drawer__inner {
    border-radius: 0.85rem 0 0 0.85rem;
    box-sizing: border-box;
  }
  @media (prefers-color-scheme: dark) {
    .chroma-field {
      opacity: 0.72;
    }
    .fog-layer {
      opacity: 0.3;
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --void: #040812;
    --void2: #0b1828;
    --txt: #e6f4ef;
    --b1: rgba(36, 210, 128, 0.075);
    --b2: rgba(40, 110, 235, 0.085);
    --b3: rgba(200, 32, 88, 0.07);
  }
  body::before {
    background:
      radial-gradient(80% 55% at 12% 18%, var(--b1) 0%, transparent 55%),
      radial-gradient(70% 60% at 88% 25%, var(--b2) 0%, transparent 50%),
      radial-gradient(85% 70% at 50% 100%, var(--b3) 0%, transparent 48%),
      radial-gradient(120% 90% at 50% -10%, var(--void2) 0%, var(--void) 50%, #020408 100%);
  }
  .fog-layer {
    opacity: 0.42;
  }
  .chroma-field {
    opacity: 0.92;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sas-sigil { animation: none; }
  .crt-shell { transition: none; }
  .conduit-neva-host .v4-neva__halo,
  .conduit-neva-host .v4-neva__orb,
  .conduit-neva-host .v4-neva__ring--a,
  .conduit-neva-host .v4-neva__ring--b,
  .conduit-neva-host.v4-neva--persona .v4-neva__eye {
    animation: none !important;
  }
}