/* THRONE — visual chaos layer.
   HUD (.hud-safe) is exempt from every motion, swap, and glitch rule.
   html.calm strips strobe, swap, tremble, and rapid animation. */

:root {
  --void: #050308;
  --gold: #c9a227;
  --gold-hot: #f0d078;
  --brass: #8a6a28;
  --violet: #6b2d9a;
  --uv: #b44cff;
  --white-sear: #f4f1e8;
  --iris: #c9a227;
  --ink: #e8dcb8;
  --hud-bg: rgba(8, 6, 12, 0.78);
  --hud-border: rgba(201, 162, 39, 0.55);
  --panel: rgba(12, 8, 18, 0.55);
  --font-title: "Cinzel Decorative", "Cinzel", serif;
  --font-body: "Cormorant Garamond", serif;
  --font-hud: "Cinzel", "Cormorant Garamond", serif;
  --vignette: 0.55;
}

@property --vignette {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.55;
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0c0912;
  color: var(--ink);
  cursor: none;
}

html.calm,
html.calm * {
  cursor: auto;
}

body {
  font-family: var(--font-body);
  background: #0c0912;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #8a6a28 #120a06;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: #120a06;
  border-left: 1px solid rgba(201, 162, 39, 0.28);
}

*::-webkit-scrollbar-thumb {
  background: #8a6a28;
  border: 1px solid #c9a227;
}

*::-webkit-scrollbar-thumb:hover {
  background: #c9a227;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background: #120a06;
}

body.palette-white {
  --iris: #ead9a8;
}

body.palette-violet {
  --iris: #c9a227;
}

body.palette-gold {
  --iris: #c9a227;
}

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

/* ----- Persistent safety HUD ----- */
.hud-safe {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: auto;
  transform: none !important;
  filter: none !important;
}

.hud-safe,
.hud-safe * {
  cursor: pointer;
}

.veil,
.veil * {
  cursor: pointer;
}

.hud-safe button,
.hud-safe input[type="range"] {
  pointer-events: auto;
  font-family: var(--font-hud);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}

.hud-safe button {
  background: var(--hud-bg);
  color: var(--gold-hot);
  border: 1px solid var(--hud-border);
  padding: 8px 12px;
  border-radius: 2px;
  cursor: pointer;
}

.hud-safe button[aria-pressed="true"] {
  background: var(--gold);
  color: var(--void);
}

.volume-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hud-bg);
  border: 1px solid var(--hud-border);
  padding: 4px 8px 4px 0;
}

.volume-cluster #mute-toggle {
  border: 0;
  background: transparent;
}

.volume-label input {
  width: 88px;
  accent-color: var(--gold);
}

.days-counter {
  flex-basis: auto;
  margin: 4px 0 0;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 220, 184, 0.45);
  background: transparent;
  border: 0;
  padding: 6px 4px;
  cursor: default;
}

.days-counter strong {
  display: block;
  color: var(--gold-hot);
  font-size: 13px;
  margin: 0;
}

/* ----- Entry veil ----- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(201, 162, 39, 0.18), transparent 42%),
    #140c06;
  text-align: center;
  cursor: pointer;
}

html.entered .veil {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}

.veil-kicker {
  font-family: var(--font-hud);
  letter-spacing: 0.48em;
  font-size: 11px;
  color: var(--gold);
  margin: 0 0 12px;
}

.veil-title {
  font-family: var(--font-title);
  font-size: clamp(48px, 12vw, 120px);
  margin: 0;
  color: var(--gold-hot);
  text-shadow: 0 0 28px rgba(201, 162, 39, 0.45);
}

.veil-line {
  font-size: 22px;
  font-style: italic;
  margin: 8px 0 28px;
}

.veil-enter {
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  background: transparent;
  color: var(--gold-hot);
  border: 1px solid var(--gold);
  padding: 12px 22px;
  cursor: pointer;
}

.veil-enter:hover,
.veil-enter:focus-visible {
  background: var(--gold);
  color: var(--void);
}

.veil-hint {
  margin: 22px 0 0;
  font-family: var(--font-hud);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold-hot);
}

.veil-warn {
  max-width: 36em;
  margin: 28px auto 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(232, 220, 184, 0.62);
  padding: 0 16px;
}

/* ----- The hill and the wheels travel together ----- */
.abyss {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: block;
}

.world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: transparent;
}

.sky,
.glory {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

.relic-field {
  position: absolute;
  width: 138vw;
  height: 154vh;
  left: -19vw;
  top: -27vh;
  z-index: 4;
  pointer-events: none;
}

.relic-field .world-relic {
  pointer-events: auto;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.wheel-root {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.wheel-root canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.firmament {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.firmament .relic,
.firmament .shard,
.firmament .mouth,
.firmament .orbit,
.firmament .fear-not,
.firmament .self-hand {
  pointer-events: auto;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(78vmin, 640px);
  height: min(78vmin, 640px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 50%;
  box-shadow:
    0 0 40px rgba(201, 162, 39, 0.08),
    inset 0 0 60px rgba(180, 76, 255, 0.06);
  cursor: none;
}

.orbit::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 16px var(--gold);
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
}

.mouth {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 14vmin;
  height: 14vmin;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(240, 208, 120, 0.16), transparent 68%);
  cursor: none;
  z-index: 4;
  animation: mouth-breathe 8.5s ease-in-out infinite;
}

.mouth::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(201, 162, 39, 0.28);
}

.mouth:hover,
html.charging .mouth {
  box-shadow: 0 0 40px rgba(240, 208, 120, 0.35);
}

.charge {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 18vmin;
  height: 18vmin;
  transform: translate(-50%, -50%) scale(0.4);
  border: 2px solid var(--gold-hot);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

html.charging .charge {
  opacity: 0.85;
  animation: charge-grow 0.9s linear forwards;
}

html.offering .mouth {
  box-shadow: 0 0 90px rgba(244, 241, 232, 0.75);
}

html.offering .charge {
  opacity: 0.95;
  animation: charge-grow 1.4s linear forwards;
}

html.offered .mouth,
html.offered .fear-not,
html.offered .charge {
  opacity: 0;
  pointer-events: none;
}

html.offered .inside {
  opacity: 0.55;
  animation: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 48%, rgba(255, 248, 230, 0.4), transparent 50%);
}

html.offered .vignette {
  box-shadow: inset 0 0 140px 50px rgba(28, 18, 6, 0.4);
}

html.offered .wheel-root {
  animation: offer-bloom 2.8s ease-out;
}

body.aspect-offered {
  --iris: #fff6d8;
}

html.ascended .mouth,
html.ascended .fear-not,
html.ascended .charge {
  opacity: 0;
  pointer-events: none;
}

html.ascended .inside {
  opacity: 0.28;
  animation: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 42%, rgba(240, 208, 120, 0.18), transparent 52%);
}

html.ascended .vignette {
  box-shadow: inset 0 0 160px 64px rgba(12, 6, 4, 0.72);
}

html.ascended .plane {
  opacity: 0.1;
  pointer-events: none;
}

html.ascended .dock,
html.ascended .world-relic,
html.ascended .self-hand,
html.ascended .mouth {
  opacity: 0;
  pointer-events: none;
}

html.ascended .chromatic {
  opacity: 0.35;
}

html.ascended #isaac-devil {
  display: none;
}

body.aspect-ascended {
  --iris: #fff4dc;
}

@keyframes offer-bloom {
  0% { filter: brightness(1.15) saturate(0.7); transform: scale(1); }
  38% { filter: brightness(1.55) saturate(0.82); transform: scale(1.04); }
  100% { filter: brightness(1.12) saturate(0.88); transform: scale(1); }
}

@keyframes charge-grow {
  to { transform: translate(-50%, -50%) scale(1.15); opacity: 0.15; }
}

.relic {
  position: absolute;
  z-index: 5;
  background: transparent;
  border: 0;
  color: var(--gold-hot);
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.55);
  padding: 8px;
}

.relic.seal {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 50%;
  background: rgba(8, 6, 12, 0.35);
}

.relic.seal.lit,
.relic.seal[aria-pressed="true"] {
  background: var(--gold);
  color: var(--void);
  box-shadow: 0 0 28px rgba(240, 208, 120, 0.7);
  border-color: var(--gold-hot);
}

.relic.vesica {
  width: 42px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: radial-gradient(circle at 50% 50%, rgba(180, 76, 255, 0.25), transparent 70%);
  box-shadow: -10px 0 0 rgba(201, 162, 39, 0.2), 10px 0 0 rgba(201, 162, 39, 0.2);
}

.relic.vesica[aria-pressed="true"] {
  box-shadow:
    -12px 0 18px rgba(180, 76, 255, 0.55),
    12px 0 18px rgba(240, 208, 120, 0.55);
  background: rgba(180, 76, 255, 0.35);
}

.relic.shard-hit {
  font-size: 36px;
  rotate: 18deg;
}

.shard {
  position: absolute;
  margin: 0;
  font-size: 15px;
  font-style: italic;
  color: rgba(232, 220, 184, 0.55);
  max-width: 10em;
  pointer-events: none;
  z-index: 3;
}

.shard.flee {
  pointer-events: auto;
}

.fear-not {
  position: fixed;
  left: 50%;
  top: auto;
  bottom: 18px;
  transform: translateX(-50%);
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: rgba(28, 16, 8, 0.92);
  color: var(--gold-hot);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 10px 16px;
  font-size: 12px;
  box-shadow: 0 0 0 3px rgba(20, 10, 4, 0.55), 0 0 22px rgba(201, 162, 39, 0.35);
  z-index: 19;
  pointer-events: auto;
}

.fear-not-hint {
  display: block;
  margin-top: 5px;
  max-width: 22em;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: none;
  opacity: 0.82;
}

.fear-not.spawned {
  position: absolute;
  z-index: 7;
  bottom: auto;
}

.fear-not.unmaking {
  animation: unmake 0.55s ease-in forwards;
  pointer-events: none;
}

.fear-not.dragging {
  position: fixed;
  bottom: auto;
  opacity: 0.7;
  z-index: 22;
  margin: 0;
  transform: translate(-50%, -50%);
}

@keyframes unmake {
  to {
    transform: scale(0.42);
    opacity: 0;
    filter: blur(12px);
  }
}

.floater {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: 0.45;
  animation: drift 18s ease-in-out infinite;
}

.floater.eye,
.floater.ring {
  display: none;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(var(--s, 1)); }
  50% { transform: translate(12px, -18px) scale(calc(var(--s, 1) * 1.08)); }
}

.vignette,
.pulse,
.strobe,
.inside {
  position: absolute;
  inset: 0;
}

.inside {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 48%, rgba(244, 226, 180, 0.16), transparent 48%);
  transition: opacity 1.2s ease;
}

html.raptured .inside {
  opacity: 1;
}

html.raptured .orbit,
html.raptured .shard,
html.raptured .floater,
html.raptured .relic.seal,
html.raptured .relic.vesica,
html.raptured .relic.shard-hit {
  opacity: 0.12;
}

html.raptured .vignette {
  box-shadow: inset 0 0 180px 80px rgba(0, 0, 0, 0.82);
}

html.raptured .inside {
  opacity: 1;
}

html.raptured .chromatic {
  opacity: 1;
  animation: chroma-breathe 5.5s ease-in-out infinite;
}

html.raptured .scanlines {
  animation-duration: 4.5s;
}

html.raptured .mouth {
  animation: mouth-open 2.8s ease-in-out infinite;
  box-shadow: 0 0 80px rgba(244, 241, 232, 0.45);
}

html.charging .orbit-ghost {
  border-color: var(--gold-hot);
  animation-duration: 4s;
}

.ripples {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}

.ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid rgba(240, 208, 120, 0.72);
  border-radius: 50%;
  animation: ripple-out 1.1s ease-out forwards;
}

.ripple.big {
  border-width: 2px;
  border-color: rgba(244, 241, 232, 0.88);
  animation-duration: 1.45s;
}

.ripple.seal {
  border-color: rgba(180, 76, 255, 0.85);
}

.orbit-ghost {
  position: absolute;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.orbit-ghost-a {
  width: min(92vmin, 760px);
  height: min(92vmin, 760px);
  border: 1px dashed rgba(180, 76, 255, 0.3);
  animation: ghost-spin 32s linear infinite;
}

.orbit-ghost-b {
  width: min(58vmin, 470px);
  height: min(58vmin, 470px);
  border: 1px dashed rgba(201, 162, 39, 0.28);
  animation: ghost-spin 19s linear infinite reverse;
}

.mouth {
  animation: mouth-breathe 8.5s ease-in-out infinite;
}

.relic.seal {
  animation: seal-idle 7s ease-in-out infinite;
}

.relic.seal:active {
  animation: none;
}

.relic.vesica {
  animation: vesica-throb 7.5s ease-in-out infinite;
}

.relic.shard-hit {
  animation: shard-twitch 9s ease-in-out infinite;
}

.fear-not:not(.dragging):not(.unmaking) {
  animation: fear-glow 6.4s ease-in-out infinite;
}

.fear-not.orbiting:not(.dragging):not(.unmaking) {
  animation: fear-orbit var(--spin, 16s) linear infinite;
}

.floater.burst {
  animation: burst-fly 1.3s ease-out forwards;
  opacity: 1;
}

body.cycle-kick .wheel-root {
  animation: kick 2.4s ease-in-out;
}

body.shock .chromatic {
  opacity: 1;
  animation: shock-chroma 2.2s ease-out;
}

body.shock .vignette {
  box-shadow: inset 0 0 200px 90px rgba(180, 76, 255, 0.35);
}

body.reversed .wheel-root {
  animation: reverse-spin 4.2s ease-in-out;
  filter: hue-rotate(28deg) saturate(1.08);
}

body.reversed .orbit-ghost-a,
body.reversed .orbit-ghost-b {
  animation-duration: 3.2s;
}

body.seal-wake .relic.seal {
  animation: seal-flare 2s ease-out;
}

body.aspect-wake .firmament {
  animation: aspect-spin 2.8s ease-in-out;
}

body.frenzy .wheel-root,
body.frenzy .firmament {
  animation: frenzy 3.6s ease-in-out;
}

body.jitter .firmament {
  animation: jitter 2.8s ease-in-out;
}

body.rim-live .orbit-ghost {
  animation-duration: 6s;
  border-color: var(--gold-hot);
}

body.rim-live .orbit {
  box-shadow:
    0 0 70px rgba(240, 208, 120, 0.28),
    inset 0 0 80px rgba(180, 76, 255, 0.16);
}

html.calm .floater,
html.calm .charge {
  animation: none;
}

html.calm .abyss {
  filter: saturate(0.7);
}

body.aspect-unblinking {
  --iris: #ffffff;
}

body.aspect-unblinking .inside {
  opacity: 0.4;
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.28), transparent 52%);
}

body.aspect-waters {
  --iris: #b44cff;
}

body.aspect-waters .vignette {
  box-shadow: inset 0 0 170px 60px rgba(18, 8, 48, 0.62);
}

body.aspect-waters .inside {
  opacity: 0.35;
  background: radial-gradient(circle at 50% 48%, rgba(80, 40, 140, 0.28), transparent 55%);
}

body.aspect-seraph {
  --iris: #fff6d8;
}

body.aspect-seraph .inside {
  opacity: 0.42;
  background: radial-gradient(circle at 50% 48%, rgba(255, 220, 130, 0.38), transparent 50%);
}

body.aspect-merkavah .inside {
  opacity: 0.36;
  background: radial-gradient(circle at 50% 48%, rgba(240, 208, 120, 0.32), transparent 52%);
}

body.aspect-merkavah .wheel-root {
  filter: saturate(1.35) contrast(1.08);
}

body.aspect-merkavah .vignette {
  box-shadow: inset 0 0 140px 36px rgba(60, 28, 6, 0.45);
}

body.aspect-inverted {
  --iris: #ff4d6d;
}

body.aspect-name .sacred-geo {
  opacity: 0.55;
}

body.aspect-hush .scanlines,
body.aspect-hush .chromatic {
  opacity: 0.12;
}

/* ----- Overlays ----- */
.overlay-canvas,
.sacred-geo,
.scanlines,
.chromatic,
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.overlay-canvas {
  z-index: 6;
}

.sacred-geo {
  z-index: 1;
  opacity: 0.28;
  mix-blend-mode: screen;
}

.sacred-geo .geo-net,
.sacred-geo .geo-rims {
  transform-origin: 50px 50px;
  transform-box: fill-box;
}

.sacred-geo .geo-net {
  animation: geo-spin 80s linear infinite;
}

.sacred-geo .geo-rims {
  animation: geo-spin-rev 110s linear infinite;
}

.scanlines {
  z-index: 7;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.35;
  animation: scan-drift 9s linear infinite;
}

.vignette {
  z-index: 7;
  box-shadow: inset 0 0 120px 40px rgba(0, 0, 0, var(--vignette));
  animation: vignette-breathe 7s ease-in-out infinite;
}

.chromatic {
  z-index: 7;
  box-shadow:
    inset 3px 0 18px rgba(255, 40, 80, 0.16),
    inset -3px 0 18px rgba(80, 220, 255, 0.12);
  mix-blend-mode: screen;
  opacity: 0.7;
}

.pulse {
  z-index: 1;
  background: radial-gradient(circle at 50% 48%, rgba(244, 241, 232, 0.18), transparent 38%);
  opacity: 0;
}

body.pulse-on .pulse {
  animation: wing-pulse 4.2s ease-out;
}

.strobe {
  z-index: 8;
  opacity: 0;
  background: #fff;
}

.strobe.black {
  background: #000;
}

.strobe.on {
  opacity: 1;
}

.grain {
  z-index: 7;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.caption {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 20;
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: 0.04em;
  font-style: italic;
  color: var(--gold-hot);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 12px #000, 0 0 2px #000;
  max-width: 36em;
}

.caption.show {
  opacity: 1;
  transition: opacity 0.2s linear;
}

.fall-white {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

html.falling-white .fall-white {
  opacity: 1;
  transition: opacity 1.6s linear;
}

html.falling .abyss {
  z-index: 8;
}

html.falling .wheel-root {
  z-index: 7;
  animation: fall-through 2.6s ease-in forwards;
}

html.falling .plane,
html.falling .fear-not,
html.falling .dock,
html.falling .self-hand,
html.falling .world-relic,
html.falling .hud-safe,
html.falling .caption,
html.falling .inside,
html.falling .vignette,
html.falling .mouth {
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes fall-through {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  55% { transform: scale(7) translateY(10vh); opacity: 0.4; }
  100% { transform: scale(16) translateY(22vh); opacity: 0; }
}

/* ----- Floating liturgy windows ----- */
.world-relic {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  pointer-events: auto;
  background: rgba(18, 10, 6, 0.72);
  color: var(--gold-hot);
  border: 1px solid var(--gold);
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor: pointer;
}

.world-relic[hidden] {
  display: none;
}

.world-relic:hover,
.world-relic:focus-visible {
  background: var(--gold);
  color: var(--void);
}

.relic-mark {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.relic-mark-knife {
  width: 5px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 22%, 68% 22%, 68% 100%, 32% 100%, 32% 22%, 0 22%);
}

.relic-mark-hill {
  width: 16px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.relic-mark-ram {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: -5px -1px 0 -2px currentColor, 5px -1px 0 -2px currentColor;
}

.relic-mark-cord {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(18, 10, 6, 0.55);
}

.world-relic:hover .relic-mark-cord,
.world-relic:focus-visible .relic-mark-cord {
  box-shadow: inset 0 0 0 3px rgba(201, 162, 39, 0.35);
}

.relic-mark-name {
  width: 14px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) 0 1px / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 5px / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 9px / 72% 1.5px no-repeat;
}

.relic-mark-morning {
  width: 8px;
  height: 8px;
  margin: 3px auto;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 -6px 0 -3px currentColor,
    5px -3px 0 -3px currentColor,
    -5px -3px 0 -3px currentColor;
}

.relic-mark-wood {
  width: 14px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 1px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 2px 5px / 86% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 1px 9px / 78% 2px no-repeat;
}

.relic-mark-lamb {
  width: 12px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.relic-mark-lamb::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 2px;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.relic-mark-fire {
  width: 10px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(50% 0, 82% 38%, 68% 40%, 100% 100%, 0 100%, 32% 40%, 18% 38%);
}

.world-relic[data-carry] {
  cursor: grab;
}

.world-relic.carrying {
  position: fixed;
  z-index: 22;
  margin: 0;
  cursor: grabbing;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 22px rgba(201, 162, 39, 0.45);
}

.self-hand {
  position: absolute;
  left: 10%;
  bottom: 18%;
  z-index: 6;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hot);
  background: rgba(18, 10, 6, 0.55);
  border: 1px solid rgba(201, 162, 39, 0.35);
  padding: 10px 14px;
  opacity: 0.35;
  pointer-events: auto;
  cursor: pointer;
}

html.knife-found .self-hand,
.self-hand:hover,
.self-hand:focus-visible {
  opacity: 1;
}

.world-relic.crafted {
  box-shadow: 0 0 16px rgba(240, 208, 120, 0.35);
  border-color: var(--gold-hot);
}

.boy-face {
  display: flex;
  align-items: center;
  gap: 8px;
}

.boy-face[hidden] {
  display: none;
}

.boy-face-mark {
  width: 22px;
  height: 26px;
  border: 1px solid var(--gold-hot);
  border-radius: 50% 50% 46% 46%;
  position: relative;
  box-shadow: inset 0 -6px 0 rgba(201, 162, 39, 0.12);
}

.boy-face-mark::before,
.boy-face-mark::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 4px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-hot);
}

.boy-face-mark::before {
  left: 4px;
}

.boy-face-mark::after {
  right: 4px;
}

.goat-relic {
  border-color: #9a7a38;
  letter-spacing: 0.12em;
}

.goat-relic::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0;
  border: 1px solid currentColor;
  border-radius: 40% 40% 30% 30%;
  box-shadow: -5px -4px 0 -3px currentColor, 5px -4px 0 -3px currentColor;
  vertical-align: middle;
}

.slain-goat {
  border-color: #7a1824;
  color: #e8b070;
  box-shadow: 0 0 14px rgba(140, 20, 30, 0.4);
}

.pentagram-relic {
  display: flex;
  align-items: center;
  gap: 8px;
  border-color: #8b1c2c;
  color: #e8c070;
  box-shadow: 0 0 18px rgba(160, 20, 40, 0.45);
}

.pentagram-mark {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: var(--gold-hot);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star-knife {
  border-color: #8b1c2c;
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.35);
}

.isaac-devil {
  border-color: #8b1c2c;
  color: #f0c8a0;
  background: rgba(28, 6, 10, 0.82);
  box-shadow: 0 0 20px rgba(140, 16, 28, 0.5);
}

.isaac-devil .boy-face-mark {
  border-color: #c04048;
  filter: invert(0.15) hue-rotate(320deg);
}

html.rim-close .vignette {
  box-shadow: inset 0 0 80px 20px rgba(12, 8, 6, 0.35);
}

html.rim-far .vignette {
  box-shadow: inset 0 0 220px 90px rgba(6, 4, 10, 0.82);
}

html.rim-far .chromatic {
  opacity: 0.55;
}

html.judged .vignette {
  box-shadow: inset 0 0 180px 70px rgba(90, 10, 24, 0.55);
}

html.praised .inside {
  background: radial-gradient(circle at 50% 48%, rgba(240, 200, 110, 0.16), transparent 52%);
}

html.devil-risen .vignette {
  box-shadow: inset 0 0 160px 50px rgba(80, 8, 18, 0.5);
}

html.isaac-weeps .vignette {
  box-shadow: inset 0 0 170px 60px rgba(72, 8, 14, 0.55);
}

html.isaac-weeps .chromatic {
  opacity: 0.78;
}

html.wearing-face .vignette {
  box-shadow: inset 0 0 150px 55px rgba(28, 16, 8, 0.5);
}

html.wearing-face .chromatic {
  opacity: 0.7;
}

html.forgot-face .boy-face-mark {
  border-color: #4a4030;
  filter: blur(1.2px);
  box-shadow: none;
}

html.forgot-face .boy-face-mark::before,
html.forgot-face .boy-face-mark::after {
  opacity: 0;
}

html.angel-slain .mouth {
  pointer-events: none;
  opacity: 0.15;
}

html.angel-slain .wheel-root {
  filter: grayscale(0.45) brightness(0.55);
}

html.angel-slain .inside {
  background: radial-gradient(circle at 50% 48%, rgba(40, 8, 12, 0.45), transparent 55%);
}

html.blade-angel .wheel-root {
  animation: blade-angel 2.2s ease-in-out;
}

html.blade-angel .vignette {
  box-shadow: inset 0 0 180px 70px rgba(90, 10, 24, 0.72);
}

html.blade-angel .inside {
  opacity: 0.7;
  background: radial-gradient(circle at 50% 48%, rgba(201, 40, 50, 0.28), transparent 52%);
}

html.blade-self .wheel-root {
  animation: blade-self 2.6s ease-in-out;
}

html.blade-self .vignette {
  box-shadow: inset 0 0 160px 60px rgba(70, 18, 10, 0.7);
}

html.blade-self .inside {
  opacity: 0.85;
  background: radial-gradient(circle at 50% 48%, rgba(255, 220, 170, 0.42), transparent 50%);
}

html.calm.blade-angel .wheel-root,
html.calm.blade-self .wheel-root {
  animation: none;
}

@keyframes blade-angel {
  0% { filter: brightness(1) saturate(1); }
  22% { filter: brightness(1.28) saturate(0.85); }
  48% { filter: brightness(0.58) saturate(1.2); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes blade-self {
  0% { filter: brightness(1); }
  30% { filter: brightness(0.42) saturate(1.25); }
  62% { filter: brightness(1.22) saturate(0.7); }
  100% { filter: brightness(1.06) saturate(0.92); }
}

.dock {
  position: fixed;
  top: 56px;
  right: 12px;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 40vw;
  pointer-events: none;
}

.dock-chip {
  pointer-events: auto;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(18, 10, 6, 0.88);
  color: var(--gold-hot);
  border: 1px solid var(--gold);
  padding: 7px 10px;
  cursor: pointer;
}

.plane {
  position: fixed;
  z-index: 12;
  width: min(248px, 36vw);
  padding: 0;
  background: rgba(18, 10, 6, 0.88);
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 4px 6px 0 rgba(40, 20, 8, 0.4), 0 10px 22px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  cursor: auto;
}

.plane.folded {
  display: none;
}

.plane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

.plane-body {
  padding: 10px 12px 12px;
  max-height: min(42vh, 320px);
  overflow: auto;
}

.plane-min {
  font-family: var(--font-hud);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(201, 162, 39, 0.45);
  padding: 3px 6px;
  cursor: pointer;
}

.plane-ledger {
  width: min(320px, 42vw);
}

#petition {
  width: min(300px, 42vw);
}

#attendants {
  width: min(340px, 46vw);
}

#colloquy {
  width: min(280px, 40vw);
}

#colloquy .plane-body {
  max-height: min(52vh, 420px);
}

.colloquy-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.colloquy-thread .colloquy-angel {
  margin: 0;
}

.colloquy-thread .colloquy-you {
  margin: 0;
  color: rgba(201, 162, 39, 0.74);
  font-style: italic;
  padding-left: 8px;
  border-left: 1px solid rgba(201, 162, 39, 0.32);
}

.colloquy-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.colloquy-choice {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.02em;
  background: rgba(12, 8, 6, 0.55);
  color: var(--ink);
  border: 1px solid rgba(201, 162, 39, 0.42);
  box-shadow: 2px 3px 0 rgba(40, 20, 8, 0.35);
  padding: 8px 10px;
  cursor: pointer;
}

.colloquy-choice:hover,
.colloquy-choice:focus-visible {
  color: var(--gold-hot);
  border-color: var(--gold-hot);
  background: rgba(40, 24, 8, 0.72);
}

.colloquy-choice:disabled {
  opacity: 0.4;
}

.colloquy-await {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 162, 39, 0.55);
  margin: 0;
}

.inscription.small {
  font-size: 13px;
  color: rgba(232, 220, 184, 0.7);
}

.plane,
.plane * {
  cursor: pointer;
}

.plane input,
.plane textarea {
  cursor: text;
}

.plane h2 {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 0.16em;
  margin: 0;
  color: var(--gold-hot);
}

.plane-grip {
  cursor: grab;
  user-select: none;
}

.plane.dragging,
.plane-grip:active {
  cursor: grabbing;
}

.plane.dragging {
  z-index: 18;
}

.plane-kicker {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  color: var(--gold);
}

.plane .inscription {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.3;
}

.plane-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plane-nav a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  padding: 5px 0;
}

.plane-nav a:hover,
.plane-nav a:focus-visible {
  color: var(--gold-hot);
}

.plane.wake {
  box-shadow: 0 0 0 2px var(--gold-hot), 6px 8px 0 rgba(40, 20, 8, 0.45);
}

.seals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 12px;
}

.seals button,
.attendant-actions button,
.petition-form button,
.averted {
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  background: transparent;
  color: var(--gold-hot);
  border: 1px solid var(--gold);
  padding: 8px 7px;
  cursor: pointer;
}

.seals button {
  text-align: left;
}

.seals button span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.78;
}

.shape-now {
  color: var(--gold-hot);
}

.seals button[aria-pressed="true"],
#choir-toggle[aria-pressed="true"] {
  background: var(--gold);
  color: var(--void);
}

.attendant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 220, 184, 0.75);
}

.slider-wrap input {
  accent-color: var(--gold);
  width: 100%;
}

.progress-wrap {
  margin-top: 12px;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 220, 184, 0.75);
}

.progress-track {
  margin-top: 6px;
  height: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.35);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brass), var(--gold-hot));
}

.petition-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.petition-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 220, 184, 0.75);
}

.petition-form input,
.petition-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  background: rgba(8, 5, 3, 0.7);
  color: var(--ink);
  border: 1px solid rgba(201, 162, 39, 0.4);
  padding: 6px;
  resize: vertical;
}

.averted-hint {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(232, 220, 184, 0.5);
}

.approach-field {
  position: relative;
  min-height: 92px;
  margin: 8px 0 10px;
  padding: 8px 4px 10px;
  overflow: visible;
}

.approach-door {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 54px;
  height: 36px;
  transform: translate(-50%, -50%) scaleY(0.08);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.8s ease;
}

.approach-door::before,
.approach-door::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold-hot);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.25);
}

.approach-door::before {
  left: 0;
}

.approach-door::after {
  right: 0;
}

html.approached .approach-door {
  opacity: 0.8;
  transform: translate(-50%, -50%) scaleY(1);
  animation: approach-door-breathe 6s ease-in-out infinite;
}

#approach {
  --orbit: 0;
}

#approach::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 78px;
  height: 78px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 180deg, var(--gold-hot) calc(var(--orbit) * 1%), transparent 0);
  mask: radial-gradient(farthest-side, transparent 64%, #000 66%);
  opacity: 0.28;
}

#approach.near-hand {
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.55), 4px 6px 0 rgba(40, 20, 8, 0.4);
  filter: hue-rotate(calc(var(--reach, 0) * 12deg));
}

#approach .inscription.flee {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 4px 0;
  color: var(--gold-hot);
  cursor: pointer;
  transition: color 0.2s ease;
  will-change: transform;
}

#approach .inscription.flee:hover {
  color: #fff4d4;
}

#approach .inscription.flee.caught {
  animation: flee-caught 1.6s ease-in-out;
}

.flee-ghost {
  position: fixed;
  z-index: 21;
  margin: 0;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  color: rgba(240, 208, 120, 0.45);
  transform: translate(-50%, -50%);
  animation: flee-ghost 1.4s ease-out forwards;
}

.averted {
  position: relative;
  z-index: 1;
  width: 100%;
  transition: transform 0.45s ease-out, background 0.4s ease, box-shadow 0.4s ease;
}

.averted.dodging {
  transition: transform 0.4s ease-out;
}

.averted[aria-pressed="true"] {
  background: var(--gold);
  color: var(--void);
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.45);
  animation: avert-armed 3.4s ease-in-out infinite;
}

.averted[aria-pressed="true"] .averted-hint {
  color: rgba(18, 10, 6, 0.65);
}

html.approach-bloom .vignette {
  box-shadow: inset 0 0 140px 50px rgba(201, 162, 39, 0.28);
}

html.approach-bloom .inside {
  opacity: 0.7;
  background: radial-gradient(circle at 50% 48%, rgba(240, 208, 120, 0.22), transparent 48%);
}

html.approach-bloom .wheel-root {
  animation: shudder 2.6s ease-in-out;
}

@keyframes approach-door-breathe {
  0%, 100% { transform: translate(-50%, -50%) scaleY(1); opacity: 0.72; }
  50% { transform: translate(-50%, -50%) scaleY(1.05); opacity: 0.95; }
}

@keyframes flee-caught {
  0% { opacity: 1; transform: scale(1); }
  32% { opacity: 1; transform: scale(1.045); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes flee-ghost {
  0% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.04); }
}

@keyframes avert-armed {
  0%, 100% { box-shadow: 0 0 10px rgba(201, 162, 39, 0.22); }
  50% { box-shadow: 0 0 18px rgba(240, 208, 120, 0.32); }
}

html.offered .plane {
  opacity: 0.28;
  pointer-events: none;
}

html.calm .plane {
  transition: left 0.4s ease, top 0.4s ease;
}

.witness {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(5, 3, 8, 0.72);
  color: var(--white-sear);
  font-family: var(--font-title);
  font-size: clamp(18px, 4vw, 36px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}

.witness[hidden] {
  display: none;
}

/* Glitch character tremble (JS toggles .tremor, .mirror, .invert-flash). */
[data-glitch] .ch {
  display: inline-block;
}

[data-glitch].mirror {
  transform: scaleX(-1);
  transition: transform 0.55s ease;
}

[data-glitch].invert-flash {
  filter: invert(0.82);
  transition: filter 0.55s ease;
}

body.shudder .wheel-root,
body.shudder .firmament {
  animation: shudder 2.8s ease-in-out;
}

/* ----- Calm Mode kill-switch ----- */
html.calm .sacred-geo,
html.calm .sacred-geo .geo-net,
html.calm .sacred-geo .geo-rims,
html.calm .scanlines,
html.calm .chromatic,
html.calm .pulse,
html.calm .strobe,
html.calm .grain,
html.calm .overlay-canvas {
  animation: none !important;
  opacity: 0 !important;
}

html.calm .vignette {
  animation: none;
  box-shadow: inset 0 0 80px 20px rgba(0, 0, 0, 0.45);
}

html.calm body.shudder .wheel-root,
html.calm body.shudder .firmament {
  animation: none;
}

html.calm .shard.flee {
  transform: none !important;
}

html.calm .orbit-ghost,
html.calm .ripple,
html.calm .inside,
html.calm .mouth,
html.calm .charge,
html.calm .relic.seal,
html.calm .relic.vesica,
html.calm .relic.shard-hit,
html.calm .fear-not,
html.calm .floater,
html.calm .wheel-root,
html.calm .firmament,
html.calm .scanlines,
html.calm .chromatic {
  animation: none !important;
  filter: none !important;
}

html.calm .mouth::before {
  animation: none !important;
}

/* ----- Keyframes (capped; strobe is JS-gated to under 3 Hz) ----- */
@keyframes hint-spin {
  to { transform: rotate(-360deg); }
}

@keyframes geo-spin {
  from { transform: rotate(0deg) scale(1.05); }
  to { transform: rotate(-360deg) scale(1.05); }
}

@keyframes geo-spin-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes scan-drift {
  from { background-position: 0 0; }
  to { background-position: 0 12px; }
}

@keyframes vignette-breathe {
  0%, 100% { --vignette: 0.48; opacity: 1; }
  50% { --vignette: 0.72; opacity: 1; }
}

@keyframes wing-pulse {
  0% { opacity: 0; transform: scale(0.92); }
  28% { opacity: 0.38; }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes shudder {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  42% { transform: translateY(7px) rotate(-0.4deg); }
  72% { transform: translateY(2px) rotate(0.15deg); }
}

@keyframes kaleido {
  from { transform: rotate(0deg) scale(1.18); filter: hue-rotate(0deg); }
  to { transform: rotate(360deg) scale(1.18); filter: hue-rotate(28deg); }
}

@keyframes chroma-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes ripple-out {
  to { transform: scale(28); opacity: 0; }
}

@keyframes ghost-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes mouth-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes mouth-open {
  0%, 100% { transform: translate(-50%, -50%) scale(1.1); }
  50% { transform: translate(-50%, -50%) scaleX(1.32) scaleY(1.48); }
}

@keyframes seal-idle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}

@keyframes vesica-throb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes shard-twitch {
  0%, 76%, 100% { rotate: 16deg; }
  82% { rotate: 23deg; }
  88% { rotate: 15deg; }
}

@keyframes fear-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(201, 162, 39, 0); }
  50% { box-shadow: 0 0 16px rgba(240, 208, 120, 0.28); }
}

@keyframes fear-orbit {
  0% { translate: 0 0; rotate: 0deg; }
  25% { translate: 28px -12px; rotate: 90deg; }
  50% { translate: 0 -36px; rotate: 180deg; }
  75% { translate: -28px -12px; rotate: 270deg; }
  100% { translate: 0 0; rotate: 360deg; }
}

@keyframes burst-fly {
  0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)); opacity: 0; }
}

@keyframes kick {
  0% { transform: translateY(0) scale(1); }
  26% { transform: translateY(6px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes shock-chroma {
  0% { transform: scale(1.01); filter: hue-rotate(12deg); }
  100% { transform: scale(1); filter: none; }
}

@keyframes reverse-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-14deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes seal-flare {
  0% { transform: scale(1.08); box-shadow: 0 0 24px var(--gold-hot); }
  100% { transform: scale(1); }
}

@keyframes aspect-spin {
  0% { filter: contrast(1.12) saturate(1.15); transform: rotate(0deg) scale(1.01); }
  48% { filter: contrast(1.06) saturate(1.08); transform: rotate(9deg) scale(1.02); }
  100% { filter: none; transform: rotate(0deg) scale(1); }
}

@keyframes frenzy {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.02); filter: saturate(1.12); }
}

@keyframes jitter {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -2px); }
}

@media (max-width: 720px) {
  .plane {
    width: min(200px, 46vw);
    padding: 10px 10px 12px;
  }

  .plane h2 {
    font-size: 12px;
  }

  .dock {
    max-width: 58vw;
  }

  .days-counter {
    font-size: 9px;
  }

  body {
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sacred-geo,
  .sacred-geo .geo-net,
  .sacred-geo .geo-rims,
  .scanlines,
  .chromatic,
  .pulse,
  .strobe,
  .grain,
  .overlay-canvas {
    animation: none !important;
    opacity: 0 !important;
  }

  .vignette {
    animation: none;
  }

  body.shudder .wheel-root,
  body.shudder .firmament {
    animation: none;
  }

  html.offered .wheel-root,
  html.ascended .wheel-root {
    animation: none;
  }

  .orbit-ghost,
  .ripple,
  .inside,
  .mouth,
  .relic.seal,
  .relic.vesica,
  .relic.shard-hit,
  .fear-not,
  .floater,
  .wheel-root,
  .firmament {
    animation: none !important;
  }

  .ripples {
    display: none;
  }
}

#backstage {
  position: fixed;
  z-index: 80;
  right: 12px;
  top: 64px;
  width: min(420px, 92vw);
  max-height: min(78vh, 640px);
  overflow: auto;
  background: rgba(12, 8, 6, 0.94);
  border: 1px solid rgba(201, 162, 39, 0.5);
  box-shadow: 4px 6px 0 rgba(40, 20, 8, 0.45), 0 12px 28px rgba(0, 0, 0, 0.5);
  color: #e8dcb8;
  pointer-events: auto;
}

.backstage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
}

#backstage h2 {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 0.16em;
  margin: 0;
  color: var(--gold-hot);
}

#backstage h3 {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--gold);
}

.backstage-close,
#backstage-chip {
  font-family: var(--font-hud);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(201, 162, 39, 0.45);
  padding: 3px 8px;
  cursor: pointer;
}

#backstage-chip {
  position: fixed;
  z-index: 80;
  right: 12px;
  top: 64px;
  background: rgba(12, 8, 6, 0.92);
}

.backstage-note {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: 13px;
  color: rgba(232, 220, 184, 0.72);
}

.backstage-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 12px 12px;
}

.backstage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.backstage-grid button {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.04em;
  background: rgba(28, 16, 8, 0.85);
  color: #e8dcb8;
  border: 1px solid rgba(201, 162, 39, 0.35);
  padding: 5px 7px;
  cursor: pointer;
}

.backstage-grid button:hover {
  border-color: rgba(201, 162, 39, 0.7);
  color: #fff6d8;
}

@media (max-width: 640px) {
  .backstage-cols {
    grid-template-columns: 1fr;
  }
}