/* Lruns ITerium.
   Frame: an 80s look carrying today's tech — CRT phosphor, neon outlines,
   a grid horizon in the dark. Contents are contemporary.
   Entry is a real editor (buffer + dashed separator + modeline at the bottom),
   an island of light in an empty room. The jester's room is an amber climb;
   the beauty room is cold teal with warm highlights. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', 'DejaVu Sans Mono', Consolas, monospace;
  --green: #7dffa0;
  --green-dim: #4a7d5c;
  --amber: #ffb454;
  --teal: #8df5e8;
  --neon: #35e0c8;
  --neon-2: #ff5fc8;
}

html, body {
  background: #01030a;
  color: #cfe8d4;
  font-family: var(--mono);
  overflow-x: hidden;
  min-height: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.ico { width: 0.9em; height: 0.9em; vertical-align: -0.08em; }

.cur {
  display: inline-block;
  width: 0.55em;
  height: 1.02em;
  margin-left: 0.28em;
  background: currentColor;
  vertical-align: -0.16em;
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.3) 3px,
    rgba(0, 0, 0, 0.3) 4px
  );
  opacity: 0.55;
}
.screen-humor .scanlines { position: fixed; z-index: 3; opacity: 0.24; }

/* ============ EMPTY SPACE AROUND THE TERMINAL ============ */

.void {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2.4vh, 34px) clamp(10px, 3vw, 40px);
  overflow: clip;
  background: radial-gradient(120% 90% at 50% 45%, #05121c 0%, #02060e 45%, #000105 100%);
}

.void-stars, .void-glow, .vignette { position: absolute; inset: 0; pointer-events: none; }

.void-stars {
  z-index: 0;
  opacity: 0.75;
  background-image:
    radial-gradient(1px 1px at 24px 38px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 148px 96px, rgba(170, 255, 240, 0.45), transparent),
    radial-gradient(1px 1px at 268px 22px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.6px 1.6px at 336px 168px, rgba(200, 245, 255, 0.5), transparent),
    radial-gradient(1px 1px at 76px 208px, rgba(255, 230, 200, 0.35), transparent),
    radial-gradient(1px 1px at 392px 262px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 196px 300px, rgba(160, 255, 230, 0.4), transparent);
  background-size: 440px 340px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.5; } to { opacity: 0.85; } }

.void-glow {
  z-index: 0;
  background:
    radial-gradient(40% 30% at 16% 22%, rgba(53, 224, 200, 0.09), transparent 70%),
    radial-gradient(36% 26% at 84% 74%, rgba(255, 95, 200, 0.07), transparent 70%);
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -18px, 0); }
}

.horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.horizon .grid {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -12vh;
  height: 66vh;
  background-image:
    repeating-linear-gradient(to right, rgba(53, 224, 200, 0.5) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(255, 95, 200, 0.42) 0 1px, transparent 1px 64px);
  transform: perspective(300px) rotateX(74deg);
  transform-origin: 50% 100%;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 85%);
  animation: grid-run 5.5s linear infinite;
}
@keyframes grid-run {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 0 64px; }
}
.horizon.warm {
  position: fixed;
  height: 34vh;
  z-index: 0;
}
.horizon.warm .grid {
  opacity: 0.3;
  background-image:
    repeating-linear-gradient(to right, rgba(255, 180, 84, 0.5) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(255, 120, 60, 0.4) 0 1px, transparent 1px 64px);
}

.vignette {
  z-index: 2;
  background: radial-gradient(72% 60% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.6) 100%);
}

/* ============ TERMINAL AS AN OBJECT: a CRT monitor in a dark room ============ */

.screen-term { display: block; }

/* the dark breathes around the object */
.breath {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 48% at 50% 46%, rgba(53, 224, 200, 0.07), transparent 72%);
  animation: breath 9s ease-in-out infinite alternate;
}
@keyframes breath {
  from { opacity: 0.32; transform: scale(1); }
  to { opacity: 1; transform: scale(1.14); }
}

.crt-scene {
  position: relative;
  z-index: 4;
  width: min(1000px, 96vw);
  perspective: 1700px;
  perspective-origin: 50% 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crt {
  --rx: 2.4deg;
  --ry: 0deg;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NO preserve-3d. With it Chrome handed every click inside the monitor to the
     case (.crt-case), so the mouse worked on NEITHER the menu rows NOR the boot
     screen — desktop visitors could not get in. Removing it does not change the
     geometry: the tilt lives on .crt itself, the children have no 3D layers of
     their own, and a flat frame is hit-tested correctly. */
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1), filter 0.5s ease, opacity 0.5s ease;
}
.crt.hit { animation: crt-shake 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes crt-shake {
  0%, 100% { transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, 0, 0); }
  20% { transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(-12px, 6px, 0); }
  45% { transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(9px, -5px, 0); }
  70% { transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(-5px, 3px, 0); }
}
.crt.flared {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.05);
  filter: brightness(2.2) saturate(0.8);
  transition: transform 0.9s ease, filter 0.9s ease;
}
.crt.blown {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.16);
  filter: brightness(1.8) blur(4px);
  opacity: 0;
  transition: transform 0.75s ease, filter 0.75s ease, opacity 0.75s ease;
}

/* case: bevel on top, shadow below, thick frame */
.crt-case {
  position: relative;
  width: 100%;
  padding: clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vw, 24px) clamp(20px, 2.6vw, 32px);
  border-radius: 30px 30px 20px 20px;
  background:
    linear-gradient(180deg, #262a30 0%, #171b20 8%, #10141a 55%, #080a0e 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -4px 12px rgba(0, 0, 0, 0.9),
    inset 4px 0 10px rgba(0, 0, 0, 0.6),
    inset -4px 0 10px rgba(0, 0, 0, 0.6),
    0 0 0 1px #04070a,
    0 36px 74px rgba(0, 0, 0, 0.88),
    0 0 110px rgba(53, 224, 200, 0.1);
}

/* glass: convex, with an inner shadow and a highlight */
.crt-glass {
  position: relative;
  border-radius: 30px / 42px;
  overflow: hidden;
  background: #000205;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.9),
    0 0 0 2px #0b0f13,
    0 0 0 3px rgba(255, 255, 255, 0.06),
    0 0 30px rgba(53, 224, 200, 0.14),
    0 0 90px rgba(53, 224, 200, 0.08);
}

.glass-curve, .glass-glare {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.glass-curve {
  background:
    radial-gradient(118% 104% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.5) 88%, rgba(0, 0, 0, 0.75) 100%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.75);
}
.glass-glare {
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, 0.075) 0 9%,
      rgba(255, 255, 255, 0.022) 12% 17%,
      transparent 30%),
    radial-gradient(80% 22% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%);
  opacity: 0.9;
}

.crt-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(8px, 1.4vw, 16px);
}
.crt-brand {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: #5b666f;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.crt-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6dffc0;
  box-shadow: 0 0 8px rgba(109, 255, 192, 0.9), 0 0 18px rgba(109, 255, 192, 0.5);
  animation: led 3.4s ease-in-out infinite;
}
@keyframes led { 0%, 100% { opacity: 1; } 55% { opacity: 0.45; } }

.crt-neck {
  width: clamp(90px, 12vw, 140px);
  height: clamp(16px, 2.4vw, 28px);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #14181d, #080b0e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
.crt-foot {
  width: clamp(180px, 26vw, 320px);
  height: clamp(10px, 1.4vw, 16px);
  border-radius: 50% / 60%;
  background: linear-gradient(180deg, #1a1f25, #05070a);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* floor of the endless room: a pool of light and a ghost reflection */
.crt-pool, .crt-mirror {
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}
.crt-pool {
  top: 100%;
  width: min(1100px, 120%);
  height: 190px;
  background: radial-gradient(50% 50% at 50% 0%, rgba(53, 224, 200, 0.13), transparent 72%);
  filter: blur(6px);
}
.crt-mirror {
  top: 100%;
  width: min(760px, 76%);
  height: 130px;
  border-radius: 50% / 24%;
  background: linear-gradient(180deg, rgba(72, 226, 205, 0.16), rgba(53, 224, 200, 0) 62%);
  filter: blur(20px);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

/* the buffer itself, already behind the glass */
.editor {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: min(560px, 70vh);
  max-height: 78vh;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 30%, #041018 0%, #000509 60%, #000104 100%);
  padding: clamp(12px, 2vh, 22px) clamp(14px, 3vw, 34px) 34px;
  display: flex;
  flex-direction: column;
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
.editor > * { flex: none; }
.editor .buffer { flex: 1 1 auto; }
.editor.dissolving { opacity: 0; filter: blur(8px); transform: scale(1.08); }

.banner {
  color: var(--green-dim);
  font-size: clamp(9px, 1.25vw, 13px);
  line-height: 1.35;
  white-space: pre;
  overflow: hidden;
  text-shadow: 0 0 14px rgba(125, 255, 160, 0.28);
}

.mini {
  color: #3f6b50;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow: hidden;
  margin-top: 6px;
}

.rule {
  color: #1d3020;
  font-size: 13px;
  line-height: 1.1;
  white-space: pre;
  overflow: hidden;
  height: 1.2em;
  margin: 8px 0 14px;
}

.buffer { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.stage { flex: 1; }

.museum {
  color: #2e6b52;
  font-size: clamp(9.5px, 1.05vw, 12.5px);
  line-height: 1.2;
  white-space: pre;
  overflow: hidden;
  margin: clamp(6px, 1.3vh, 14px) 0;
  text-shadow: 0 0 16px rgba(80, 220, 160, 0.2);
}
.museum .ln {
  display: inline;
  animation: ln-in 0.32s ease both;
}
.museum .ln.shown { animation: none; }
@keyframes ln-in { from { opacity: 0; } to { opacity: 1; } }

.boot {
  color: var(--green);
  font-size: clamp(12.5px, 1.4vw, 15.5px);
  line-height: 1.62;
  white-space: pre-wrap;
  text-shadow: 0 0 9px rgba(125, 255, 160, 0.35);
}
.boot.crt { animation: crt-flicker 2.6s infinite; }
@keyframes crt-flicker {
  0%, 92%, 100% { opacity: 1; }
  95% { opacity: 0.76; }
}

/* invitation to enter: sits at the bottom of the buffer from the FIRST frame and
   does not move while the splash types itself — it can be aimed at right away */
.term-cta {
  margin-top: 10px;
  font-size: clamp(13px, 1.4vw, 15.5px);
  line-height: 1.5;
  color: var(--green-dim);
  letter-spacing: 0.02em;
  animation: cta-pulse 1.9s ease-in-out infinite;
}
.term-cta.ready {
  color: var(--green);
  text-shadow: 0 0 10px rgba(125, 255, 160, 0.35);
  animation: none;
}
@keyframes cta-pulse { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }

/* on the boot screen the whole dark room is clickable, not just the glass */
.screen-boot .void { cursor: pointer; }

/* ---- menu rendered inside the buffer ---- */

.menu-title {
  color: var(--green);
  font-size: clamp(13.5px, 1.5vw, 16px);
  text-shadow: 0 0 9px rgba(125, 255, 160, 0.3);
  margin-bottom: 10px;
}

.menu { list-style: none; outline: none; max-width: 700px; }

.mi {
  display: grid;
  grid-template-columns: 1.4em 2.1em minmax(0, 13.5em) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 6px;
  padding: 4px 10px 4px 4px;
  font-size: clamp(12.5px, 1.4vw, 15px);
  color: #9dc4a9;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.14s linear, color 0.14s linear;
}
.mi-cur { opacity: 0; color: var(--green); }
.mi-key { color: var(--green-dim); }
.mi-label { letter-spacing: 0.04em; }
.mi-note { color: #55705d; font-size: 0.86em; }

.mi.on {
  background: #0d1a14;
  color: var(--green);
  border-left-color: var(--green);
  text-shadow: 0 0 10px rgba(125, 255, 160, 0.35);
}
.mi.on .mi-cur { opacity: 1; }
.mi.locked { color: #4c5750; cursor: not-allowed; }
.mi.locked .mi-note { color: #46514a; }
.mi.locked.on { color: #7d8c82; background: #16150e; border-left-color: #6b6552; text-shadow: none; }

.menu.shake { animation: shake 0.32s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}

.fade-in { animation: mi-in 0.4s ease both; animation-delay: var(--d, 0ms); }
@keyframes mi-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

.menu-foot { margin: 6px 0 0 14px; font-size: 12px; color: #43584a; }
.term-log {
  margin: 8px 0 0 4px;
  min-height: 2.3em;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--amber);
  white-space: pre-wrap;
}
.menu-hint { margin-top: 2px; font-size: 11.5px; line-height: 1.6; color: #3d4f44; }
.menu-hint b { color: var(--green-dim); font-weight: 400; }
.mh-sep { opacity: 0.5; padding: 0 2px; }

/* ---- clown transition ---- */

.clown-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: 18px;
}
.clown-art {
  color: var(--amber);
  font-size: clamp(11px, 1.4vw, 15px);
  line-height: 1.2;
  white-space: pre;
  text-shadow: 0 0 14px rgba(255, 180, 84, 0.4);
  transform-origin: 50% 60%;
  transition: transform 0.28s cubic-bezier(0.2, 1.6, 0.4, 1), color 0.25s linear;
}
.clown-art.f0 { transform: scale(0.5); }
.clown-art.f1 { transform: scale(0.8) rotate(-2.5deg); }
.clown-art.f2 { transform: scale(1.15) rotate(2.5deg); color: #ff8f4d; }
.clown-art.f3 { transform: scale(1.35) rotate(-3.5deg); }
.clown-art.f4 { transform: scale(1.7); color: #ffd28a; }
.clown-log {
  color: var(--green);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
  text-shadow: 0 0 8px rgba(125, 255, 160, 0.3);
}

/* the portal is born inside the glass (canvas clipped to it) and breaks out */
.portal-canvas {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  transition: clip-path 0.45s cubic-bezier(0.3, 0.9, 0.4, 1);
}

/* ---- broken glass: shards and a hole into the jester's room ---- */

.smash-canvas { position: fixed; inset: 0; z-index: 58; pointer-events: none; }

.hole {
  position: fixed;
  inset: 0;
  z-index: 56;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 55%, #241505 0%, #120c04 55%, #0a0906 100%);
  clip-path: polygon(
    50% 0%, 62% 13%, 78% 8%, 74% 24%, 92% 26%, 82% 40%, 100% 50%,
    83% 60%, 93% 74%, 76% 76%, 80% 92%, 63% 86%, 50% 100%, 37% 87%,
    21% 93%, 24% 76%, 7% 74%, 17% 60%, 0% 50%, 18% 40%, 8% 26%,
    26% 24%, 22% 8%, 38% 13%
  );
  transform-origin: 50% 50%;
  transition: transform 0.42s cubic-bezier(0.3, 0.85, 0.4, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hole-grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    repeating-linear-gradient(to right, rgba(255, 180, 84, 0.35) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(to bottom, rgba(255, 120, 60, 0.28) 0 1px, transparent 1px 70px);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
}
.hole-art {
  position: relative;
  color: var(--amber);
  font-size: clamp(10px, 1.5vw, 16px);
  line-height: 1.25;
  white-space: pre;
  text-shadow: 0 0 18px rgba(255, 180, 84, 0.55);
}

/* ---- modeline ---- */

.modeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 3px 10px;
  background: #b7c4b8;
  color: #05080a;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.ml-flags { letter-spacing: 0.06em; }
.ml-pos { min-width: 3.6em; }
.ml-tail { flex: 1; overflow: hidden; opacity: 0.55; min-width: 0; }

.room-modeline { position: fixed; z-index: 50; background: #c2b596; }
.screen-art .room-modeline { background: #9dc2c6; }

/* ======================= shared by both rooms ======================= */

.back {
  position: fixed;
  top: 38px; /* below the top ticker strip so the button never overlaps anything */
  left: 12px;
  z-index: 45;
  padding: 6px 12px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(125, 255, 160, 0.28);
  color: #9fe8b2;
}
.back:hover { border-color: rgba(125, 255, 160, 0.7); background: #0d1a11; }

/* the large bottom padding is deliberate: the "keep climbing" hint must not
   fall into the bottom ticker strip (it sits at bottom: 26px) */
.room-head { text-align: center; padding: 60px 18px 104px; position: relative; z-index: 4; }
.room-head h1 { font-size: clamp(22px, 3.4vw, 32px); letter-spacing: 0.05em; margin-top: 10px; }
.room-head .cmd { font-size: 13px; color: var(--green-dim); }
.epigraph { margin-top: 10px; font-size: 13px; opacity: 0.65; }
.scroll-hint { margin-top: 20px; font-size: 12px; opacity: 0.45; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(-6px); opacity: 0.6; }
}

/* UP SIGN at the entrance to the hall. The old .scroll-hint (opacity 0.45, 12px)
   was invisible: visitors did not realise the hall reads bottom to top. It leaves
   by itself after the first real scroll — beyond that it would only be in the way. */
.enter-hint {
  margin-top: 26px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.enter-hint.gone {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.eh-arrow {
  display: inline-block;
  font-size: clamp(15px, 2.2vw, 24px);
  line-height: 1.02;
  white-space: pre;
  text-align: left;
  color: var(--amber);
  text-shadow: 0 0 14px rgba(255, 180, 84, 0.55);
}
.eh-arrow span { display: block; animation: eh-run 1.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.16s); }
@keyframes eh-run {
  0%, 100% { opacity: 0.28; transform: translateY(2px); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.eh-text {
  margin-top: 8px;
  font-size: clamp(14px, 1.5vw, 17px);
  letter-spacing: 0.03em;
  color: var(--cream);
  text-shadow: 0 0 16px rgba(255, 180, 84, 0.3);
  animation: eh-pulse 2.4s ease-in-out infinite;
}
@keyframes eh-pulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
.eh-sub { margin-top: 5px; font-size: 12px; color: #a58a5c; }

/* nudge of the content for whoever stands still (see mountEnterHint) */
.room-head.bump { animation: head-bump 0.9s cubic-bezier(0.3, 0.9, 0.35, 1); }
@keyframes head-bump {
  0%, 100% { transform: none; }
  38% { transform: translateY(-24px); }
}

.room-foot { text-align: center; padding: 88px 16px 36px; position: relative; z-index: 4; }
.curator { margin-top: 12px; font-size: 11px; color: #4d5b52; }

/* ---- exhibit card ---- */

/* An exhibit is an object: image first, caption small, author in a whisper. */

.card { position: relative; z-index: 2; }
.frame { position: relative; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.cover { position: absolute; inset: 0; z-index: 1; }
.shot { overflow: hidden; background: #05070a; }
/* posters are hand-cropped to their own shape (see assets/posters), so center them honestly */
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.o-wide .shot { aspect-ratio: 16 / 9; }
.o-square .shot { aspect-ratio: 5 / 4; }
.o-tall .shot { aspect-ratio: 4 / 5; }

.meta {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border: 1px solid currentColor;
  opacity: 0.72;
  white-space: nowrap;
}
.chip.link:hover { opacity: 1; }
.pico { width: 11px; height: 11px; flex: none; }

/* ru-only: warning shown while hovering the neutral mark on an Instagram card.
   A small terminal-styled panel; touch has no hover, so the hall footer note
   carries that case. */
.pnote { display: inline-flex; position: relative; align-items: center; }
.pnote-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 30;
  width: 30ch;
  max-width: 74vw;
  padding: 7px 9px;
  transform: translateX(-50%) translateY(-3px);
  background: #05090c;
  border: 1px solid rgba(255, 180, 84, 0.42);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.66);
  color: #e2d3b6;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}
.pnote:hover .pnote-tip,
.chip:hover .pnote-tip,
.chip:focus-visible .pnote-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .pnote-tip { transition: none; }
}

.card-cmd {
  font-size: 11.5px;
  color: #ffc46a;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(255, 170, 70, 0.28);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.75;
}

/* polaroid in the jester's room: small, scattered around the main piece */
.polaroid { width: min(330px, 78vw); }
.polaroid.o-tall { width: min(268px, 70vw); }
.polaroid .frame {
  background: linear-gradient(180deg, #e7e0cd 0%, #d6cdb5 100%);
  padding: 13px 13px 0;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.polaroid .shot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); }
.polaroid .caption { padding: 12px 3px 16px; }
.polaroid h3 { font-size: 14.5px; line-height: 1.35; color: #17140f; }
.polaroid .hook { margin-top: 6px; font-size: 11px; line-height: 1.55; color: #514a39; }
.polaroid .chip { color: #3b3427; border-color: rgba(40, 35, 20, 0.32); }
.polaroid:hover .frame { transform: translateY(-4px); box-shadow: 0 30px 58px rgba(0, 0, 0, 0.72); }

/* film frame in the beauty room. Lives inside .card3d (640px); the scene scales it down */
.slide { width: 100%; }
.slide .frame {
  background: rgba(6, 24, 33, 0.94);
  border: 1px solid rgba(141, 245, 232, 0.26);
  padding: 14px 30px;
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.6), 0 0 46px rgba(53, 224, 200, 0.07);
}
.sprocket {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 15px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 7px,
    rgba(160, 240, 235, 0.16) 7px 17px,
    transparent 17px 25px
  );
}
.sprocket.left { left: 5px; }
.sprocket.right { right: 5px; }
.slide .caption { padding: 14px 2px 2px; }
.slide .card-num { font-size: 13px; letter-spacing: 0.2em; color: rgba(141, 245, 232, 0.5); }
.slide h3 { margin-top: 6px; font-size: 21px; line-height: 1.3; color: #d9fbf7; }
.slide .hook { margin-top: 9px; font-size: 15px; line-height: 1.55; color: rgba(207, 238, 242, 0.72); }
.slide .chip { font-size: 13px; color: rgba(141, 245, 232, 0.8); border-color: rgba(141, 245, 232, 0.3); }
.slide .pico { width: 14px; height: 14px; }
.slide:hover .frame { border-color: rgba(141, 245, 232, 0.42); }

/* ---- reveal as the visitor moves ---- */

.reveal {
  opacity: 0;
  transition:
    opacity 0.55s ease var(--d, 0ms),
    transform 0.66s cubic-bezier(0.18, 1.24, 0.36, 1) var(--d, 0ms),
    filter 0.6s ease var(--d, 0ms);
}
.reveal.in { opacity: 1; }
/* ============ JESTER'S ROOM: a climb up the path (bottom to top) ============ */
/* The hall keeps ONE warm palette (amber, orange, cream). Mint green stays only in
   the terminal — past the broken glass a different world begins, and it should show. */

.screen-humor {
  --cream: #f4e2bd;
  --ember: #ff8a3c;
  --coal: #0d0904;
  display: flex;
  flex-direction: column-reverse;
  background: #0b0805;
  color: #e8dcbe;
}
.screen-humor .room-head h1 { color: var(--amber); text-shadow: 0 0 18px rgba(255, 180, 84, 0.32); }
.clown.still {
  display: inline-block;
  color: var(--amber);
  font-size: 11px;
  line-height: 1.2;
  white-space: pre;
  text-align: left;
  opacity: 0.8;
  text-shadow: 0 0 10px rgba(255, 180, 84, 0.3);
}

/* far layer: moves slower than the hall to give depth */
.far {
  position: fixed;
  inset: -20vh 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  background-image:
    radial-gradient(38% 24% at 18% 30%, rgba(255, 138, 60, 0.13), transparent 72%),
    radial-gradient(30% 20% at 82% 66%, rgba(255, 180, 84, 0.08), transparent 72%),
    repeating-linear-gradient(115deg, rgba(255, 180, 84, 0.045) 0 1px, transparent 1px 118px);
  will-change: transform;
}

/* jester hall: narrow column, objects hug the path */
.hall {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 74px clamp(10px, 2.4vw, 26px) 34px;
  position: relative;
  z-index: 2;
}
/* uneven spacing: cluster -> pause -> cluster (the numbers come from room-humor.ts) */
.slot {
  display: flex;
  padding-bottom: var(--gap, 40px);
  position: relative;
}
.slot.c { justify-content: center; }
.slot.l { justify-content: flex-start; }
.slot.r { justify-content: flex-end; }
/* pairs: a small item stands next to its neighbour instead of alone on its own row */
.slot.pair { justify-content: space-between; gap: 26px; align-items: center; }
.slot.pair > * { flex: 0 1 auto; min-width: 0; }

.trail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  border-left: 1px dashed rgba(255, 180, 84, 0.2);
}
.trail i {
  position: absolute;
  bottom: 0;
  left: -1px;
  width: 2px;
  height: 0;
  background: linear-gradient(to top, rgba(255, 180, 84, 0.75), rgba(255, 180, 84, 0.05));
  box-shadow: 0 0 12px rgba(255, 180, 84, 0.4);
}

/* dust in the air of the hall: texture, not content */
.motes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mote {
  position: absolute;
  font-style: normal;
  font-size: calc(11px * var(--s, 1));
  letter-spacing: 0.08em;
  color: rgba(255, 180, 84, 0.16);
  text-shadow: 0 0 10px rgba(255, 140, 40, 0.12);
  animation: mote-drift 14s ease-in-out infinite alternate;
}
.mote:nth-child(3n) { animation-duration: 19s; color: rgba(255, 138, 60, 0.13); }
.mote:nth-child(4n) { animation-delay: -6s; }
@keyframes mote-drift {
  from { transform: translate3d(0, 0, 0); opacity: 0.5; }
  to { transform: translate3d(0, -18px, 0); opacity: 1; }
}

.screen-humor .reveal { transform: translate3d(0, -34px, 0); }
.screen-humor .room-head.reveal.in, .screen-humor .room-foot.reveal.in { transform: none; }

/* ---- cards: small and scattered around the path ---- */

.drift { position: relative; z-index: 3; }
.drift .card { transform: translate3d(0, -30px, 0) rotate(0deg); }
.slot.l .drift .card.in { transform: rotate(-2.4deg); }
.slot.r .drift .card.in { transform: rotate(2.1deg); }
.slot.c .drift .card.in { transform: rotate(-1deg); }

/* ---- interactive objects standing in space ---- */

.obj {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
}
.obj-tag {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 180, 84, 0.5);
}
.obj-title {
  font-size: 13px;
  color: var(--amber);
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(255, 180, 84, 0.35);
}
.obj-hint { margin-top: 10px; font-size: 11px; color: #8a7550; }

.obj.side { width: min(560px, 92%); }
.obj.side.reveal { transform: perspective(1200px) translate3d(0, -30px, 0) rotateY(var(--tw, 0deg)); }
.obj.side.reveal.in { transform: perspective(1200px) rotateY(var(--tw, 0deg)); }

.obj.mid { width: min(760px, 100%); }
.obj.wide { width: 100%; }
.obj.toy, .obj.mid {
  padding: 18px clamp(14px, 2.4vw, 24px) 20px;
  background: linear-gradient(180deg, rgba(32, 21, 8, 0.94), rgba(13, 9, 4, 0.96));
  border: 1px solid rgba(255, 180, 84, 0.26);
  box-shadow: 0 0 60px rgba(255, 140, 40, 0.09), 0 24px 60px rgba(0, 0, 0, 0.7);
}
.obj.mid.reveal { transform: translate3d(0, -30px, 0) scale(0.96); }
.obj.mid.reveal.in { transform: none; }

.gauge {
  font-size: clamp(11px, 1.5vw, 15px);
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  color: #ffd79a;
  text-shadow: 0 0 12px rgba(255, 180, 84, 0.35);
}

.obj-btn {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 7px 14px;
  color: #0a0906;
  background: var(--amber);
  border: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.obj-btn:hover { background: #ffd28a; }
.obj-btn.small {
  margin-top: 0;
  padding: 5px 10px;
  font-size: 11.5px;
  background: rgba(255, 180, 84, 0.16);
  color: #ffd9a0;
  border: 1px solid rgba(255, 180, 84, 0.4);
}
.obj-btn.small:hover { background: rgba(255, 180, 84, 0.3); }

.path-joke {
  position: relative;
  z-index: 2;
  font-size: clamp(12.5px, 1.5vw, 16px);
  color: #ffc46a;
  padding: 4px 12px;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 160, 60, 0.3);
}
.room-foot .path-joke { color: var(--amber); background: transparent; }

.ascii-chart {
  position: relative;
  z-index: 2;
  font-size: clamp(10.5px, 1.15vw, 12.5px);
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  color: #ffd9a0;
  background: #130c05;
  border: 1px solid #3a2a12;
  border-left: 2px solid rgba(255, 180, 84, 0.65);
  padding: 12px 16px;
  text-shadow: 0 0 8px rgba(255, 170, 70, 0.25);
}
.ascii-chart.big {
  font-size: clamp(11.5px, 1.5vw, 16px);
  line-height: 1.6;
  padding: 16px 20px;
  background: rgba(18, 11, 4, 0.92);
  box-shadow: 0 0 50px rgba(255, 150, 50, 0.07), 0 22px 54px rgba(0, 0, 0, 0.66);
}

/* ---- ticker: BELOW the cards, still running across the hall ---- */

.ticker {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  padding: 5px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(255, 180, 84, 0.5);
  background: linear-gradient(90deg, transparent, rgba(26, 16, 6, 0.8) 12% 88%, transparent);
  border-top: 1px solid rgba(255, 180, 84, 0.12);
  border-bottom: 1px solid rgba(255, 180, 84, 0.12);
}
.ticker.top { top: 0; }
.ticker.bot { bottom: 26px; color: rgba(255, 138, 60, 0.42); }
.ticker-run {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-run 46s linear infinite;
  animation-delay: var(--from, 0s);
}
@keyframes ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

/* ---- OWN EXHIBITS ---- */

/* ADHD Sort, running live */
.adhd { position: relative; display: flex; align-items: flex-end; gap: 16px; }
.adhd-main { position: relative; flex: 1 1 auto; min-width: 0; }
.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 132px;
  padding: 0 1px;
}
.bars i {
  flex: 1 1 0;
  height: var(--h, 20%);
  background: linear-gradient(180deg, #ffd9a0, #c9873a);
  transition: height 0.11s linear, background 0.11s linear;
}
.bars i.hot { background: linear-gradient(180deg, #fff2d8, var(--ember)); box-shadow: 0 0 14px rgba(255, 138, 60, 0.7); }
.bars.small { height: 74px; gap: 2px; }
.adhd-cursor {
  position: relative;
  height: 12px;
  margin-top: 4px;
}
.adhd-cursor span {
  position: absolute;
  left: var(--x, 4%);
  top: 0;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid var(--ember);
  transition: left 0.14s ease;
}
.adhd-side {
  flex: 0 0 108px;
  padding: 8px 8px 6px;
  border: 1px dashed rgba(255, 180, 84, 0.36);
  background: rgba(255, 138, 60, 0.06);
  opacity: 0;
  transform: translate3d(18px, 0, 0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.adhd-side.on { opacity: 1; transform: none; }
.adhd-side-tag {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255, 180, 84, 0.75);
  margin-bottom: 6px;
}
.adhd-say {
  margin-top: 12px;
  min-height: 1.5em;
  font-size: 13.5px;
  color: var(--cream);
}
.adhd-say::before { content: '> '; color: var(--ember); }
.adhd-stats {
  margin-top: 8px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #a08a5f;
}
.adhd-stats b { color: #ffd9a0; font-weight: 400; }
.adhd-meter {
  margin-top: 6px;
  height: 3px;
  background: rgba(255, 180, 84, 0.14);
}
.adhd-meter i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--ember), #ffd9a0);
  transition: width 0.2s ease;
}

.summit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(760px, 100%);
}
.summit-lead {
  margin-bottom: 10px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: rgba(255, 180, 84, 0.7);
}

/* sort --by=capitalism: the algorithm cheats */
.rich { list-style: none; }
.rich-row {
  display: grid;
  grid-template-columns: 8.5em 4.5em minmax(0, 1fr);
  align-items: baseline;
  gap: 0 10px;
  padding: 3px 6px;
  font-size: clamp(11.5px, 1.4vw, 14px);
  color: #ffd9a0;
  transition: background 0.18s linear, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.rich-row.hi { background: rgba(255, 138, 60, 0.16); }
.rich-row.vip { color: #fff0cf; background: rgba(255, 180, 84, 0.13); }
.rich-row.poor { color: #b09070; }
.rich-bar { color: rgba(255, 138, 60, 0.75); overflow: hidden; white-space: nowrap; }
.rich-tag {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 180, 84, 0.72);
}
.rich-row.poor .rich-tag { color: #8e7a58; }
.rich-row.teleported { animation: vip-jump 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes vip-jump {
  from { transform: translate3d(0, 120px, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.rich-log { margin-top: 10px; font-size: 12.5px; color: var(--cream); min-height: 1.5em; }

/* INTERCAL: politeness as a compile condition */
.icl-lead { font-size: 12px; color: #a08a5f; margin-bottom: 10px; }
.icl-code-box {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 180, 84, 0.18);
  background: rgba(10, 7, 3, 0.7);
  padding: 6px 0;
}
.icl-line {
  display: grid;
  grid-template-columns: 2.6em 5.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 0 4px;
  width: 100%;
  padding: 2px 12px;
  font-family: var(--mono);
  font-size: clamp(11px, 1.3vw, 13.5px);
  text-align: left;
  color: #d9c49a;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.icl-line:hover { background: rgba(255, 180, 84, 0.08); }
.icl-line.on { color: #fff0cf; border-left-color: var(--amber); background: rgba(255, 180, 84, 0.09); }
.icl-n { color: #6d5a3a; }
.icl-please { color: var(--ember); letter-spacing: 0.04em; }
.icl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  color: #a08a5f;
}
.icl-bar b { color: #ffd9a0; font-weight: 400; }
.icl-window { color: #6d5a3a; }
.icl-spacer { flex: 1 1 auto; }
.icl-out {
  margin-top: 12px;
  padding: 10px 12px;
  min-height: 4.4em;
  font-size: clamp(11px, 1.3vw, 13px);
  line-height: 1.55;
  white-space: pre-wrap;
  color: #a08a5f;
  background: #0a0703;
  border-left: 2px solid #3a2a12;
}
.icl-out.err { color: #ff9b6a; border-left-color: var(--ember); }
.icl-out.ok { color: #b8f5a0; border-left-color: #6fd66f; }
#icl.rude .icl-bar b { color: #ff9b6a; }
#icl.smarmy .icl-bar b { color: #ffe06a; }

.plate {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  color: #ffd9a0;
  border: 1px solid rgba(255, 180, 84, 0.4);
}
.plate:hover { background: rgba(255, 180, 84, 0.14); }

/* ============ BEAUTY ROOM: real 3D spiral ============ */

.screen-art {
  display: block;
  background: #041018;
  color: #cfeef2;
  cursor: grab;
}
.screen-art.grabbing { cursor: grabbing; }
.screen-art.grabbing .card3d { -webkit-user-select: none; user-select: none; }

#stars {
  position: fixed;
  left: 0;
  right: 0;
  top: -12vh;
  height: 124vh;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.nebula {
  position: fixed;
  inset: -25% 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(42% 30% at 22% 24%, rgba(88, 230, 217, 0.16), transparent 70%),
    radial-gradient(50% 34% at 78% 46%, rgba(45, 140, 190, 0.14), transparent 70%),
    radial-gradient(36% 26% at 40% 78%, rgba(141, 245, 232, 0.1), transparent 70%),
    radial-gradient(20% 14% at 68% 14%, rgba(255, 164, 92, 0.08), transparent 70%);
  animation: nebula-breath 22s ease-in-out infinite alternate;
}
@keyframes nebula-breath {
  from { filter: hue-rotate(0deg) blur(0px); opacity: 0.85; }
  to { filter: hue-rotate(-14deg) blur(6px); opacity: 1; }
}

.haze {
  position: fixed;
  inset: -10% 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(30% 20% at 12% 62%, rgba(255, 164, 92, 0.07), transparent 72%),
    radial-gradient(26% 18% at 88% 22%, rgba(141, 245, 232, 0.08), transparent 72%);
}

/* the DNA rope is drawn by WebGL and sits on a layer BELOW the cards */
#rope { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
/* if WebGL is unavailable the hall does not go empty: a CSS fallback rope */
.screen-art.no-webgl #rope { display: none; }
.screen-art.no-webgl::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 132px;
  margin-left: -66px;
  z-index: 2;
  pointer-events: none;
  /* A real TWISTED rope rather than a vertical glow: two strands (warm and digital)
     woven as sines with rungs between them. The image is local, inlined as a
     data URI: no outside request and no extra frame. */
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22200%22%20viewBox%3D%220%200%20120%20200%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23cfe9ff%22%20stroke-width%3D%221%22%20opacity%3D%22.22%22%3E%3Cline%20x1%3D%2267.9%22%20y1%3D%226%22%20x2%3D%2252.1%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%2284.7%22%20y1%3D%2220%22%20x2%3D%2235.3%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2296.8%22%20y1%3D%2234%22%20x2%3D%2223.2%22%20y2%3D%2234%22%2F%3E%3Cline%20x1%3D%22101.9%22%20y1%3D%2248%22%20x2%3D%2218.1%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%2299.1%22%20y1%3D%2262%22%20x2%3D%2220.9%22%20y2%3D%2262%22%2F%3E%3Cline%20x1%3D%2288.8%22%20y1%3D%2276%22%20x2%3D%2231.2%22%20y2%3D%2276%22%2F%3E%3Cline%20x1%3D%2273.0%22%20y1%3D%2290%22%20x2%3D%2247.0%22%20y2%3D%2290%22%2F%3E%3Cline%20x1%3D%2254.7%22%20y1%3D%22104%22%20x2%3D%2265.3%22%20y2%3D%22104%22%2F%3E%3Cline%20x1%3D%2237.5%22%20y1%3D%22118%22%20x2%3D%2282.5%22%20y2%3D%22118%22%2F%3E%3Cline%20x1%3D%2224.5%22%20y1%3D%22132%22%20x2%3D%2295.5%22%20y2%3D%22132%22%2F%3E%3Cline%20x1%3D%2218.3%22%20y1%3D%22146%22%20x2%3D%22101.7%22%20y2%3D%22146%22%2F%3E%3Cline%20x1%3D%2220.1%22%20y1%3D%22160%22%20x2%3D%2299.9%22%20y2%3D%22160%22%2F%3E%3Cline%20x1%3D%2229.4%22%20y1%3D%22174%22%20x2%3D%2290.6%22%20y2%3D%22174%22%2F%3E%3Cline%20x1%3D%2244.5%22%20y1%3D%22188%22%20x2%3D%2275.5%22%20y2%3D%22188%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60.0%200%20L65.3%204%20L70.4%208%20L75.5%2012%20L80.2%2016%20L84.7%2020%20L88.8%2024%20L92.4%2028%20L95.5%2032%20L98.0%2036%20L99.9%2040%20L101.3%2044%20L101.9%2048%20L101.9%2052%20L101.3%2056%20L99.9%2060%20L98.0%2064%20L95.5%2068%20L92.4%2072%20L88.8%2076%20L84.7%2080%20L80.2%2084%20L75.5%2088%20L70.4%2092%20L65.3%2096%20L60.0%20100%20L54.7%20104%20L49.6%20108%20L44.5%20112%20L39.8%20116%20L35.3%20120%20L31.2%20124%20L27.6%20128%20L24.5%20132%20L22.0%20136%20L20.1%20140%20L18.7%20144%20L18.1%20148%20L18.1%20152%20L18.7%20156%20L20.1%20160%20L22.0%20164%20L24.5%20168%20L27.6%20172%20L31.2%20176%20L35.3%20180%20L39.8%20184%20L44.5%20188%20L49.6%20192%20L54.7%20196%20L60.0%20200%22%20stroke%3D%22%23ffb26c%22%20stroke-width%3D%223.4%22%20opacity%3D%22.75%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M60.0%200%20L65.3%204%20L70.4%208%20L75.5%2012%20L80.2%2016%20L84.7%2020%20L88.8%2024%20L92.4%2028%20L95.5%2032%20L98.0%2036%20L99.9%2040%20L101.3%2044%20L101.9%2048%20L101.9%2052%20L101.3%2056%20L99.9%2060%20L98.0%2064%20L95.5%2068%20L92.4%2072%20L88.8%2076%20L84.7%2080%20L80.2%2084%20L75.5%2088%20L70.4%2092%20L65.3%2096%20L60.0%20100%20L54.7%20104%20L49.6%20108%20L44.5%20112%20L39.8%20116%20L35.3%20120%20L31.2%20124%20L27.6%20128%20L24.5%20132%20L22.0%20136%20L20.1%20140%20L18.7%20144%20L18.1%20148%20L18.1%20152%20L18.7%20156%20L20.1%20160%20L22.0%20164%20L24.5%20168%20L27.6%20172%20L31.2%20176%20L35.3%20180%20L39.8%20184%20L44.5%20188%20L49.6%20192%20L54.7%20196%20L60.0%20200%22%20stroke%3D%22%23ffd9a0%22%20stroke-width%3D%221.2%22%20opacity%3D%22.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M60.0%200%20L54.7%204%20L49.6%208%20L44.5%2012%20L39.8%2016%20L35.3%2020%20L31.2%2024%20L27.6%2028%20L24.5%2032%20L22.0%2036%20L20.1%2040%20L18.7%2044%20L18.1%2048%20L18.1%2052%20L18.7%2056%20L20.1%2060%20L22.0%2064%20L24.5%2068%20L27.6%2072%20L31.2%2076%20L35.3%2080%20L39.8%2084%20L44.5%2088%20L49.6%2092%20L54.7%2096%20L60.0%20100%20L65.3%20104%20L70.4%20108%20L75.5%20112%20L80.2%20116%20L84.7%20120%20L88.8%20124%20L92.4%20128%20L95.5%20132%20L98.0%20136%20L99.9%20140%20L101.3%20144%20L101.9%20148%20L101.9%20152%20L101.3%20156%20L99.9%20160%20L98.0%20164%20L95.5%20168%20L92.4%20172%20L88.8%20176%20L84.7%20180%20L80.2%20184%20L75.5%20188%20L70.4%20192%20L65.3%20196%20L60.0%20200%22%20stroke%3D%22%238df5e8%22%20stroke-width%3D%223%22%20opacity%3D%22.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M60.0%200%20L54.7%204%20L49.6%208%20L44.5%2012%20L39.8%2016%20L35.3%2020%20L31.2%2024%20L27.6%2028%20L24.5%2032%20L22.0%2036%20L20.1%2040%20L18.7%2044%20L18.1%2048%20L18.1%2052%20L18.7%2056%20L20.1%2060%20L22.0%2064%20L24.5%2068%20L27.6%2072%20L31.2%2076%20L35.3%2080%20L39.8%2084%20L44.5%2088%20L49.6%2092%20L54.7%2096%20L60.0%20100%20L65.3%20104%20L70.4%20108%20L75.5%20112%20L80.2%20116%20L84.7%20120%20L88.8%20124%20L92.4%20128%20L95.5%20132%20L98.0%20136%20L99.9%20140%20L101.3%20144%20L101.9%20148%20L101.9%20152%20L101.3%20156%20L99.9%20160%20L98.0%20164%20L95.5%20168%20L92.4%20172%20L88.8%20176%20L84.7%20180%20L80.2%20184%20L75.5%20188%20L70.4%20192%20L65.3%20196%20L60.0%20200%22%20stroke%3D%22%23d6fcf8%22%20stroke-width%3D%221%22%20opacity%3D%22.85%22%20stroke-linecap%3D%22round%22%2F%3E%3Ctext%20x%3D%2251.8%22%20y%3D%226.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.95%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2236.7%22%20y%3D%2218.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2225.2%22%20y%3D%2231.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2218.9%22%20y%3D%2243.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.95%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2218.9%22%20y%3D%2256.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2225.2%22%20y%3D%2268.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2236.7%22%20y%3D%2281.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.95%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2251.8%22%20y%3D%2293.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2268.2%22%20y%3D%22106.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2283.3%22%20y%3D%22118.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.95%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2294.8%22%20y%3D%22131.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22101.1%22%20y%3D%22143.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22101.1%22%20y%3D%22156.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.95%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2294.8%22%20y%3D%22168.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2283.3%22%20y%3D%22181.2%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.7%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2268.2%22%20y%3D%22193.8%22%20font-family%3D%22monospace%22%20font-size%3D%227%22%20font-weight%3D%22bold%22%20fill%3D%22%23d6fcf8%22%20opacity%3D%22.95%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E1%3C%2Ftext%3E%3C%2Fsvg%3E') center top / 132px 220px repeat-y;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
/* soft glow along the fallback rope so it breathes too */
.screen-art.no-webgl::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 260px;
  margin-left: -130px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 178, 108, 0.07) 45%, rgba(141, 245, 232, 0.06) 58%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
#stage3d { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#stage3d .css3d { pointer-events: none; }
/* Cards are laid out large and scaled down by the scene, which keeps text crisp.
   Vertical posters get a narrower column, otherwise the frame leaves the viewport. */
.card3d { width: 640px; pointer-events: auto; }
.card3d.o-tall { width: 430px; }
.card3d.o-square { width: 540px; }

/* this flow exists only to provide scroll height: the hall itself lives in 3D */
.art-flow { position: relative; z-index: 4; pointer-events: none; }
.art-flow a, .art-flow button { pointer-events: auto; }


.screen-art .room-head h1 { color: var(--teal); text-shadow: 0 0 24px rgba(88, 230, 217, 0.4); }
.screen-art .room-head .cmd { color: rgba(141, 245, 232, 0.45); }
.screen-art .room-head {
  padding-bottom: 108px;
  background: radial-gradient(60% 70% at 50% 60%, rgba(2, 12, 18, 0.92), transparent 76%);
}

/* reward at the top: the sky spreads across the whole screen */
.finale {
  --k: 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 90px;
  text-align: center;
}
.finale-sky {
  position: absolute;
  inset: 0;
  background: #02080e url('assets/posters/sky.jpg') center 18% / cover no-repeat;
  opacity: calc(var(--k) * 0.92);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
  transition: opacity 0.25s linear;
}
.finale-body {
  position: relative;
  opacity: calc(0.12 + var(--k) * 0.88);
  transition: opacity 0.25s linear;
}
.finale-line {
  font-size: clamp(18px, 3vw, 30px);
  line-height: 1.35;
  color: #eafcff;
  text-shadow: 0 0 26px rgba(0, 0, 0, 0.85), 0 0 60px rgba(120, 230, 230, 0.4);
}
.finale-chip { display: inline-block; margin-top: 18px; }
.finale-chip .chip { color: #cdf4ef; border-color: rgba(205, 244, 239, 0.6); }
.finale .epigraph.small { margin-top: 26px; font-size: 12px; opacity: 0.75; }
.finale .curator { color: #86a3a6; }

.screen-art .back { border-color: rgba(141, 245, 232, 0.3); color: #a8f0e6; }


/* ============ MAGIC ZONE: the hall goes dark here ============ */
/* Not a lecture wall of plaques but a stretch where the dark thickens and the
   esoteric languages are playable. Wiki links stay in a whisper. */

.magic {
  position: relative;
  width: 100%;
  padding: 54px clamp(12px, 3vw, 34px) 50px;
  isolation: isolate;
  overflow: hidden;
}
.magic-dark {
  position: absolute;
  inset: -40px -50vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.9) 46%, transparent 78%),
    radial-gradient(30% 24% at 50% 46%, rgba(120, 60, 210, 0.13), transparent 72%);
}
.magic-glyphs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.magic-glyphs i {
  position: absolute;
  font-style: normal;
  font-size: calc(11px * var(--s, 1));
  color: rgba(196, 154, 255, 0.34);
  text-shadow: 0 0 12px rgba(150, 90, 255, 0.4);
  animation: glyph-drift 11s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
.magic-glyphs.still i { animation: none; }
@keyframes glyph-drift {
  from { transform: translate3d(0, 0, 0); opacity: 0.25; }
  to { transform: translate3d(0, -22px, 0); opacity: 0.75; }
}
.magic-body { position: relative; z-index: 1; }
.magic-lead {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(196, 154, 255, 0.6);
}
.magic-title {
  margin-top: 10px;
  text-align: center;
  font-size: clamp(17px, 2.3vw, 24px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #e6d8ff;
  text-shadow: 0 0 26px rgba(150, 90, 255, 0.45);
}
.magic-title .cur { background: #c49aff; }
.magic-sub { margin-top: 8px; text-align: center; font-size: 12px; color: #7a6a92; }

.magic-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 16px;
  /* stands vary in height: a short one must not stretch into an empty panel to
     match its neighbour (GenAlpha now carries a taller polaroid) */
  align-items: start;
}
.magic .toy {
  position: relative;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(20, 12, 32, 0.94), rgba(7, 5, 12, 0.96));
  border: 1px solid rgba(160, 110, 240, 0.3);
  box-shadow: 0 0 50px rgba(120, 60, 210, 0.12), 0 22px 54px rgba(0, 0, 0, 0.75);
}
.magic .obj-title { color: #d9c2ff; text-shadow: 0 0 12px rgba(150, 90, 255, 0.4); }
.magic .obj-btn { background: #c49aff; color: #120a1c; }
.magic .obj-btn:hover { background: #ded0ff; }
.magic .obj-btn.small {
  background: rgba(160, 110, 240, 0.16);
  color: #ddccff;
  border-color: rgba(160, 110, 240, 0.45);
}
.magic .obj-btn.small:hover { background: rgba(160, 110, 240, 0.32); }
.magic #icl { margin-top: 16px; width: 100%; }
.magic .icl-line.on { border-left-color: #c49aff; background: rgba(160, 110, 240, 0.12); color: #f0e6ff; }
.magic .icl-please { color: #c49aff; }
.magic .plate, .magic .whisper-link { color: #cbb6f2; border-color: rgba(160, 110, 240, 0.45); }

.spell-code {
  min-height: 3.4em;
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: #efe4ff;
  background: rgba(0, 0, 0, 0.5);
  border-left: 2px solid rgba(160, 110, 240, 0.5);
}
.spell-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.spell-out { margin-top: 8px; font-size: 12px; color: #9d8bb8; min-height: 1.4em; }
.magic.cast .spell-code { animation: cast 0.65s ease; }
@keyframes cast {
  0% { box-shadow: inset 0 0 0 rgba(196, 154, 255, 0); }
  35% { box-shadow: inset 0 0 40px rgba(196, 154, 255, 0.5); }
  100% { box-shadow: inset 0 0 0 rgba(196, 154, 255, 0); }
}

.rooms-floor {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.5);
  border-left: 2px solid rgba(160, 110, 240, 0.5);
}
.rooms-floor .cell {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 13px;
  color: #8f7fb0;
  background: rgba(160, 110, 240, 0.09);
  border: 1px solid rgba(160, 110, 240, 0.16);
}
.rooms-floor .cell.hole {
  background: #000;
  border-color: rgba(160, 110, 240, 0.22);
  box-shadow: inset 0 0 16px #000, inset 0 6px 10px rgba(0, 0, 0, 0.9);
}
.rooms-floor .cell.here { color: #f2e8ff; background: rgba(196, 154, 255, 0.28); border-color: #c49aff; }
.rooms-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.rooms-level { font-size: 12px; color: #9d8bb8; min-width: 5.4em; }
.rooms-out { margin-top: 8px; font-size: 12px; color: #9d8bb8; min-height: 1.4em; }
.magic.falling .rooms-floor { animation: fall 0.42s ease-in; }
@keyframes fall {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(46px); opacity: 0.15; }
}
.magic.broken .rooms-floor { filter: grayscale(1) brightness(0.5); }

/* ---- folklore wall: the exhibit and a slot reserved for a remake ---- */
.wall { display: flex; flex-direction: column; align-items: center; }
.wall-lead {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #b98a4e;
  text-transform: lowercase;
}
.wall-row { justify-content: center; align-items: flex-start; }
/* Empty frame: same polaroid paper, only faded — a blank sheet on the wall.
   Its top offset equals the neighbour's "$ open exhibit ..." line so the frames align. */
.polaroid.reserved { margin-top: 27px; }
.polaroid.reserved .frame {
  background: linear-gradient(180deg, rgba(231, 224, 205, 0.5) 0%, rgba(214, 205, 181, 0.44) 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.polaroid.reserved .shot.empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: rgba(10, 8, 5, 0.3);
  color: rgba(120, 104, 74, 0.9);
}
.polaroid.reserved .shot.empty .own-shot { width: 100%; height: 100%; }
.polaroid.reserved .caption { padding: 12px 10px 14px; }
.reserved-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  color: rgba(35, 30, 20, 0.62);
}
.polaroid.reserved:hover .frame { transform: none; }

/* ---- sigma boy next to GenAlpha: own artwork, own fact, own top comment ---- */
/* We have no frame from the clip (someone else's video), so the polaroid draws OUR OWN. */
.shot.own { display: block; }
.shot.own .own-shot { display: block; width: 100%; height: 100%; }

.spell-sing {
  margin-top: 6px;
  min-height: 1.3em;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 200, 90, 0.28);
}
.sigma-plate {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(160, 110, 240, 0.28);
  background: rgba(0, 0, 0, 0.28);
}
.sigma-plate-head {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: #9d8bb8;
}
.sigma-fact { margin-top: 6px; font-size: 11.5px; line-height: 1.55; color: #cbb6f2; }
.sigma-quote {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 2px solid rgba(196, 154, 255, 0.45);
  font-size: 12px;
  line-height: 1.5;
  color: #efe4ff;
}
.sigma-quote cite {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 10.5px;
  color: #7a6d92;
}
.spell .plaques { margin-top: 16px; justify-content: flex-start; }
.spell .plaques .polaroid.source { width: min(248px, 68vw); }

.verse { margin-top: 16px; }
.verse-text { font-size: 13px; line-height: 1.6; color: #d6c8f0; min-height: 3em; }
.verse .obj-btn { margin-top: 12px; }
.magic.warp .magic-body { animation: warp 0.6s ease; }
@keyframes warp {
  0% { filter: none; }
  40% { filter: hue-rotate(60deg) blur(2px); transform: translate3d(-6px, 0, 0); }
  100% { filter: none; }
}

.whispers { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.whisper {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  color: #6f6288;
  transition: color 0.18s linear;
}
.whisper b { color: #9d8bb8; font-weight: 400; }
.whisper:hover { color: #b6a3d6; }
.whisper-link { font-size: 10.5px; color: rgba(196, 154, 255, 0.55); }
.whisper-link.solo {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(160, 110, 240, 0.35);
}
.whisper-link.solo:hover { background: rgba(160, 110, 240, 0.16); }

/* ============ the best user UX ============ */

.obj.ux .obj-hint.top { margin: 0 0 14px; }
.ux-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 180, 84, 0.14);
}
.ux-label { flex: 0 0 11em; font-size: 12.5px; color: #a08a5f; }
.ux-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 34px; }
.ux-run {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 6px 14px;
  color: #2a0d08;
  background: #ff8a6a;
  border: 0;
  cursor: pointer;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* The fan stands ON THE SIDE THE CURSOR CAME FROM and it is large: otherwise it is
   unclear WHAT blows the button away. The right class puts it on the right. */
.ux-fan {
  position: absolute;
  left: -6px;
  font-size: 30px;
  letter-spacing: -4px;
  line-height: 1;
  color: rgba(255, 180, 84, 0.32);
  text-shadow: 0 0 10px rgba(255, 180, 84, 0.15);
  transition: color 0.18s linear, transform 0.18s linear, opacity 0.18s linear;
  transform-origin: left center;
}
.ux-fan.right { left: auto; right: -6px; transform-origin: right center; }
.ux-fan.on { color: var(--amber); transform: scaleX(1.45); text-shadow: 0 0 16px rgba(255, 180, 84, 0.45); }
.ux-fan.right.on { transform: scaleX(-1.45); }
.ux-slider { flex: 1 1 auto; min-width: 0; accent-color: var(--amber); }
.ux-val { font-size: 12px; color: #ffd9a0; min-width: 12em; }
.ux-check { font-size: 12.5px; color: #ffd9a0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ux-check input { accent-color: var(--amber); }
.ux-foot { margin-top: 12px; font-size: 12.5px; color: var(--cream); min-height: 1.4em; }

/* ============ beauty room stations ============ */
/* In the beauty room the interactives are the point; cards flutter beside them. */

.station3d { width: 720px; }
.card3d.sat { width: 260px; }
.card3d.sat .slide .frame { padding: 8px 16px; }
.card3d.sat .slide h3 { font-size: 13px; margin-top: 4px; }
.card3d.sat .slide .hook { font-size: 10px; line-height: 1.45; margin-top: 5px; }
.card3d.sat .slide .card-num { font-size: 9px; }
.card3d.sat .slide .chip { font-size: 9px; padding: 2px 5px; }
.card3d.sat .sprocket { width: 8px; }

.station {
  padding: 22px 26px 20px;
  background: linear-gradient(180deg, rgba(5, 22, 31, 0.95), rgba(2, 9, 14, 0.96));
  border: 1px solid rgba(141, 245, 232, 0.26);
  box-shadow: 0 0 60px rgba(53, 224, 200, 0.09), 0 26px 62px rgba(0, 0, 0, 0.7);
}
.station-cmd { font-size: 13px; color: rgba(141, 245, 232, 0.5); }
.station h3 {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #d9fbf7;
}
.station-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(207, 238, 242, 0.66); }
.station .chip { margin-top: 12px; font-size: 12px; color: rgba(141, 245, 232, 0.8); border-color: rgba(141, 245, 232, 0.3); }

.ink-field {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.02;
  letter-spacing: 0.06em;
  white-space: pre;
  color: #a9f0e6;
  text-shadow: 0 0 12px rgba(88, 230, 217, 0.35);
  cursor: crosshair;
}

.cal-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 16), 1fr);
  gap: 2px;
}
.cal-grid i {
  aspect-ratio: 1;
  background: rgba(141, 245, 232, 0.06);
  border: 1px solid rgba(141, 245, 232, 0.1);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.cal-grid i.on {
  background: rgba(255, 178, 108, 0.85);
  box-shadow: 0 0 12px rgba(255, 178, 108, 0.55);
}

.graph-canvas, .vision-canvas { margin-top: 14px; width: 100%; height: auto; display: block; }

/* scroll well: one floor per station, gentle snapping */
.spiral-space { position: relative; }
.stop { height: 100vh; scroll-snap-align: center; }
html.snap { scroll-snap-type: y proximity; }
@media (prefers-reduced-motion: reduce) {
  html.snap { scroll-snap-type: none; }
}

/* ============ mobile gate: rooms wait for 1.0, desktop layout on demand ============ */

.screen-gate { display: block; }
.screen-gate .void { padding: 24px 18px; }
.gate {
  position: relative;
  z-index: 4;
  width: min(460px, 92vw);
  text-align: center;
  padding: 26px 20px 24px;
  background: linear-gradient(180deg, rgba(6, 18, 24, 0.95), rgba(2, 8, 12, 0.96));
  border: 1px solid rgba(53, 224, 200, 0.3);
  box-shadow: 0 0 60px rgba(53, 224, 200, 0.1), 0 24px 60px rgba(0, 0, 0, 0.8);
}
.gate-art {
  color: var(--teal);
  font-size: 12px;
  line-height: 1.25;
  white-space: pre;
  text-align: left;
  display: inline-block;
  opacity: 0.75;
  text-shadow: 0 0 14px rgba(88, 230, 217, 0.35);
}
.gate .cmd { margin-top: 16px; font-size: 12px; color: var(--green-dim); }
.gate h1 { margin-top: 6px; font-size: 19px; letter-spacing: 0.05em; color: var(--teal); }
.gate-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; opacity: 0.72; }
.gate .obj-btn { margin-top: 18px; background: var(--teal); }
.gate .obj-btn:hover { background: #b6fff4; }
.gate-warn { margin-top: 10px; font-size: 11px; color: #5f7d7a; }
.gate-back { display: inline-block; margin-top: 18px; font-size: 12px; color: #7fd8cb; }
.gate-back:hover { color: var(--teal); }

/* ============ SOURCE POLAROID STANDS NEXT TO ITS OWN EXHIBIT ============ */
/* Source cards belong beside the interactive they credit, not in a separate gallery.
   The polaroids are back in full and stand at their own exhibits — still tilted,
   only now in the right place. */

.stand { width: min(760px, 100%); }
.stand > .obj, .stand > .magic { width: 100%; }
.plaques {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 30px;
  justify-content: center;
  align-items: flex-start;
}
.plaques.wide { margin-top: 40px; }

/* source polaroid: the same object plus a tag saying why it is here */
.polaroid.source { width: min(300px, 78vw); }
.polaroid.source.o-tall { width: min(244px, 70vw); }
.polaroid.source .caption { padding-top: 11px; }
.polaroid.source:nth-child(odd) { transform: rotate(-1.4deg); }
.polaroid.source:nth-child(even) { transform: rotate(1.1deg); }
.polaroid.source:hover { transform: rotate(0deg); }
.polaroid.source { transition: transform 0.3s ease; }
.plaque-why {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7a52;
  margin-bottom: 5px;
}
.magic .plaque-why { color: #6f5f8a; }

/* ============ JS answers: the punchline is the truth ============ */

.jst-list { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 7px 20px; list-style: none; }
.jst-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.jst-expr {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 3px 9px;
  color: #ffd9a0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(255, 180, 84, 0.32);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.jst-expr:hover { border-style: solid; border-color: var(--amber); background: rgba(255, 180, 84, 0.12); }
.jst-res { font-size: 12.5px; color: #6b5c3e; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jst-res.on { color: var(--green); text-shadow: 0 0 10px rgba(125, 255, 160, 0.3); }
.jst-note { margin-top: 14px; min-height: 1.5em; font-size: 13px; color: var(--cream); }
.jst-foot { margin-top: 8px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--amber); }
.jst-row.jst-all { margin-top: 12px; flex-wrap: wrap; align-items: center; gap: 14px; }
.jst-row.jst-all .plate { margin-top: 0; }

/* ============ neural-net meditation ============ */

.med-room {
  position: relative;
  margin-top: 14px;
  height: 226px;
  overflow: hidden;
  background: radial-gradient(70% 90% at 50% 88%, rgba(255, 138, 60, 0.09), transparent 72%), #080502;
  border: 1px solid rgba(255, 180, 84, 0.18);
}
.med-halo {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 240px;
  height: 240px;
  margin-left: -120px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 150, 0.14), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.med-room.silent .med-halo { opacity: 1; transform: scale(1.08); }
.med-room.loud .med-halo { opacity: 0.35; }
.med-seats { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: space-around; align-items: flex-end; }
.med-seat { text-align: center; width: 46px; }
.med-body { display: block; position: relative; width: 34px; height: 38px; margin: 0 auto; }
.med-body i { position: absolute; background: rgba(255, 217, 160, 0.72); }
.med-body i:nth-child(1) { left: 11px; top: 0; width: 12px; height: 12px; border-radius: 50%; }
.med-body i:nth-child(2) { left: 4px; bottom: 5px; width: 26px; height: 20px; border-radius: 13px 13px 4px 4px; }
.med-body i:nth-child(3) { left: 0; bottom: 0; width: 34px; height: 3px; opacity: 0.5; }
.med-room.silent .med-body i { animation: med-breathe 3.2s ease-in-out infinite; }
@keyframes med-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.med-name { display: block; margin-top: 5px; font-size: 9px; letter-spacing: 0.08em; color: rgba(255, 180, 84, 0.45); }
.med-bubbles { position: absolute; inset: 0; }
.med-bubble {
  position: absolute;
  max-width: 62%;
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffd9a0;
  background: rgba(10, 7, 3, 0.92);
  border: 1px solid rgba(255, 180, 84, 0.38);
  transform: rotate(var(--r, 0deg));
  animation: med-pop 0.24s ease-out both, med-gone 2.6s linear forwards;
}
@keyframes med-pop {
  from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.82); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
}
@keyframes med-gone {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}
.med-status { margin-top: 12px; min-height: 1.5em; font-size: 13px; color: var(--cream); }
.med-row { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.med-hint { font-size: 10.5px; color: #7d6a48; }

/* ============ reset ritual: get doused, come out clean ============ */

.rit-altar {
  position: relative;
  margin-top: 14px;
  padding: 14px 16px 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 180, 84, 0.2);
  transition: background 0.6s ease;
}
.rit-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: -110%;
  height: 110%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(120, 200, 255, 0.2) 55%, rgba(190, 235, 255, 0.5) 88%, rgba(255, 255, 255, 0.7));
}
.rit-altar.wet .rit-wave { animation: rit-pour 1.7s cubic-bezier(0.42, 0, 0.58, 1) forwards; }
@keyframes rit-pour {
  from { top: -110%; }
  to { top: 110%; }
}
.rit-bowl { font-size: 10.5px; line-height: 1.25; white-space: pre; color: rgba(255, 180, 84, 0.45); }
.rit-list { margin-top: 12px; list-style: none; }
.rit-row {
  display: grid;
  grid-template-columns: 9.6em minmax(0, 1fr) 9em;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(255, 180, 84, 0.12);
}
.rit-what { color: var(--cream); }
.rit-was { color: #8a7550; font-size: 11.5px; transition: opacity 0.4s ease; }
.rit-now { text-align: right; color: #6b5c3e; transition: color 0.4s ease; }
.rit-row.clean .rit-was { opacity: 0.25; text-decoration: line-through; }
.rit-row.clean .rit-now { color: var(--green); text-shadow: 0 0 12px rgba(125, 255, 160, 0.35); }
.rit-final {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(30px, 7vw, 66px);
  letter-spacing: 0.2em;
  color: #fff4dc;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 44px rgba(255, 200, 120, 0.85), 0 0 90px rgba(255, 160, 60, 0.5);
  background: radial-gradient(60% 70% at 50% 50%, rgba(20, 12, 4, 0.86), rgba(10, 7, 3, 0.72));
}
.rit-final.on { opacity: 1; animation: rit-glory 0.9s ease-out both; }
@keyframes rit-glory {
  from { opacity: 0; letter-spacing: 0.6em; filter: blur(10px); }
  to { opacity: 1; letter-spacing: 0.2em; filter: none; }
}
.rit-altar.blessed { background: radial-gradient(70% 90% at 50% 40%, rgba(255, 200, 120, 0.12), rgba(0, 0, 0, 0.5)); }
.rit-status { margin-top: 12px; min-height: 1.5em; font-size: 13px; color: var(--cream); }
.rit-row-btn { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rit .plate { margin-right: 8px; }

/* ============ strangest languages (after the @brevnocodescript video) ============ */

.strange { position: relative; margin-top: 34px; }
.strange-title {
  text-align: center;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #e6d8ff;
  text-shadow: 0 0 22px rgba(150, 90, 255, 0.4);
}

/* TempleOS is not a curiosity but one person's work. It gets its own bright plaque. */
.shrine {
  position: relative;
  margin-top: 18px;
  padding: 20px 22px 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(36, 27, 12, 0.94), rgba(8, 6, 4, 0.96));
  border: 1px solid rgba(255, 214, 150, 0.32);
  box-shadow: 0 0 60px rgba(255, 190, 110, 0.08), 0 22px 54px rgba(0, 0, 0, 0.7);
}
.shrine-halo {
  position: absolute;
  left: 10%;
  right: 10%;
  top: -60%;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 220, 150, 0.16), transparent 70%);
}
.shrine-head { position: relative; display: flex; gap: 14px; align-items: center; }
.shrine-mark { color: #ffd9a0; display: block; }
.ico-temple { width: 26px; height: 36px; display: block; }
.shrine-head b { font-size: 15px; font-weight: 400; letter-spacing: 0.04em; color: #ffeccb; }
.shrine-year { display: block; margin-top: 2px; font-size: 10.5px; letter-spacing: 0.14em; color: rgba(255, 214, 150, 0.5); }
.shrine-text { position: relative; margin-top: 12px; font-size: 13px; line-height: 1.65; color: #e5d5b4; }
.shrine-code {
  position: relative;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  color: #ffe9c2;
  background: rgba(0, 0, 0, 0.55);
  border-left: 2px solid rgba(255, 214, 150, 0.5);
}
.shrine-note { position: relative; margin-top: 10px; font-size: 12px; line-height: 1.6; color: #a99574; }
.shrine-quiet {
  position: relative;
  margin-top: 12px;
  padding-top: 10px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #8d7d5f;
  border-top: 1px dashed rgba(255, 214, 150, 0.18);
}
.shrine .whisper-link.solo { color: #e7cfa2; border-color: rgba(255, 214, 150, 0.4); margin-right: 8px; }
.shrine .whisper-link.solo:hover { background: rgba(255, 214, 150, 0.14); }

.strange .magic-grid { margin-top: 18px; }
.moo-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.moo-cmd {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 4px 9px;
  color: #efe4ff;
  background: rgba(160, 110, 240, 0.14);
  border: 1px solid rgba(160, 110, 240, 0.36);
  cursor: pointer;
}
.moo-cmd:hover { background: rgba(160, 110, 240, 0.3); }
.moo-code {
  margin-top: 10px;
  padding: 8px 10px;
  min-height: 3.2em;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: #efe4ff;
  background: rgba(0, 0, 0, 0.5);
  border-left: 2px solid rgba(160, 110, 240, 0.5);
}
.moo-out, .bf-out, .malb-out, .ws-out { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #9d8bb8; min-height: 1.4em; }
.cow .obj-btn.small { margin-top: 10px; }

.bf-cmds { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.bf-cmd {
  font-family: var(--mono);
  font-size: 15px;
  width: 2em;
  height: 2em;
  color: #efe4ff;
  background: rgba(160, 110, 240, 0.12);
  border: 1px solid rgba(160, 110, 240, 0.3);
  cursor: pointer;
}
.bf-cmd:hover { background: rgba(196, 154, 255, 0.34); }
.bf-hello {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: #b9a6d8;
  background: rgba(0, 0, 0, 0.5);
}
.bf-note, .ws-note { margin-top: 6px; font-size: 10.5px; color: #7a6a92; }

.malb, .ws { margin-top: 16px; }
.malb-code {
  margin-top: 4px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre;
  overflow-x: auto;
  color: #c9b4ec;
  background: rgba(0, 0, 0, 0.6);
  border-left: 2px solid rgba(160, 110, 240, 0.5);
}

.ws-poem {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.75;
  color: #d6c8f0;
  background: rgba(0, 0, 0, 0.5);
  border-left: 2px solid rgba(160, 110, 240, 0.5);
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.ws-line { min-height: 1.75em; white-space: pre; }
.ws-line i { font-style: normal; }
/* the invisible stays invisible until you light it up: that is Whitespace */
.ws-sp, .ws-tab { color: transparent; }
.ws-poem.lit .ws-sp { color: rgba(196, 154, 255, 0.65); }
.ws-poem.lit .ws-tab { color: rgba(255, 180, 84, 0.8); }
.ws-poem.lit .ws-txt { opacity: 0.4; }
.ws-poem.lit .ws-code { background: rgba(160, 110, 240, 0.12); }
.ws-poem ::selection { background: rgba(196, 154, 255, 0.4); color: #fff; }

/* ============ BEAUTY: scene, shadows, toggle, pixel summit ============ */

/* dust between stations: the dark around the DNA stops being an empty black field */
.art-motes { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.art-motes i {
  position: absolute;
  font-style: normal;
  font-size: calc(12px * var(--s, 1));
  letter-spacing: 0.1em;
  color: rgba(141, 245, 232, 0.16);
  text-shadow: 0 0 12px rgba(88, 230, 217, 0.16);
  animation: art-mote 16s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
.art-motes i:nth-child(3n) { color: rgba(255, 178, 108, 0.13); animation-duration: 22s; }
.art-motes i:nth-child(5n) { color: rgba(200, 245, 255, 0.1); }
@keyframes art-mote {
  from { transform: translate3d(0, 10px, 0); opacity: 0.35; }
  to { transform: translate3d(0, -16px, 0); opacity: 1; }
}

/* distant shadow cards: depth, not exhibits (they carry no content) */
.card3d.ghost { width: 220px; pointer-events: none; opacity: 0.3; filter: blur(0.6px); }
.ghost-frame {
  display: flex;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(141, 245, 232, 0.16);
  background: linear-gradient(180deg, rgba(9, 26, 34, 0.5), rgba(2, 9, 14, 0.55));
}
.ghost-sprocket { flex: 0 0 8px; background: repeating-linear-gradient(to bottom, rgba(141, 245, 232, 0.16) 0 6px, transparent 6px 14px); }
.ghost-shot { flex: 1 1 auto; height: 128px; background: linear-gradient(150deg, rgba(141, 245, 232, 0.08), rgba(255, 178, 108, 0.05)); }

/* THE SCENE FOLLOWS THE THEME: the background adapts to the station you are at */
.screen-art .nebula, .screen-art .haze { transition: filter 1.2s ease, opacity 1.2s ease; }
.screen-art[data-scene='cal'] .nebula { filter: hue-rotate(-24deg) saturate(0.7); }
.screen-art[data-scene='cal'] .art-motes i { color: rgba(255, 178, 108, 0.16); }
.screen-art[data-scene='vision'] .nebula { filter: hue-rotate(128deg) saturate(1.15); opacity: 0.8; }
.screen-art[data-scene='vision'] .art-motes i { color: rgba(255, 108, 96, 0.2); }
.screen-art[data-scene='graph'] .haze { opacity: 1.3; }
.screen-art[data-scene='ink'] .nebula { filter: saturate(1.25) blur(2px); }

/* stations are CLICKABLE: the cursor has to say so */
.station { cursor: default; }
.graph-canvas, .vision-canvas { cursor: crosshair; }
.cal-grid i { cursor: pointer; }
.cal-grid i.mine {
  background: rgba(141, 245, 232, 0.9);
  border-color: rgba(141, 245, 232, 0.9);
  box-shadow: 0 0 14px rgba(88, 230, 217, 0.65);
}
.cal-grid i.on.mine { background: #ffffff; box-shadow: 0 0 16px rgba(200, 255, 250, 0.8); }

/* mode toggle lives right in the modeline */
.ml-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1;
  padding: 2px 8px;
  color: #05131a;
  background: rgba(4, 22, 28, 0.16);
  border: 1px solid rgba(4, 22, 28, 0.4);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ml-toggle:hover { background: rgba(4, 22, 28, 0.3); }
.ml-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #05131a;
  opacity: 0.45;
}
.ml-toggle.on { background: #05202a; color: #8df5e8; border-color: #05202a; }
.ml-toggle.on .ml-toggle-dot { background: #8df5e8; opacity: 1; box-shadow: 0 0 8px rgba(141, 245, 232, 0.9); }

/* summit: a pixel-art poster that resolves into a photograph */
.finale-pix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the canvas reaches full opacity quickly: it draws the pixelation steps itself
     rather than relying on bleed-through from the background */
  opacity: min(1, calc(var(--k) * 2.4));
  transition: opacity 0.25s linear;
  pointer-events: none;
  /* the bottom of the summit dissolves into the hall, otherwise the poster ends on a hard line */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
}
/* the backing photograph is only a foundation now: the canvas does the drawing */
.finale-sky { opacity: calc(var(--k) * 0.2); }

/* ============ PUNCHLINE FIRST, FOOTNOTE IN A WHISPER ============ */
/* The punchline comes first and large, the explanation sits small underneath it,
   never the other way round. A plaque that reads like a textbook has failed. */

.punch {
  position: relative;
  margin-top: 12px;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.5;
  color: #f0e6ff;
  text-shadow: 0 0 22px rgba(150, 90, 255, 0.28);
}
.punch-sub { position: relative; margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: #b9a6d8; }
.whisper-note {
  position: relative;
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.62;
  color: #7f709a;
  opacity: 0.85;
}
.whisper-note.quiet {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(160, 110, 240, 0.18);
}
/* the TempleOS plaque runs a warm palette, punchline included */
.shrine .punch { color: #ffeccb; text-shadow: 0 0 22px rgba(255, 190, 110, 0.3); }
.shrine .punch-sub { color: #d9c49c; }
.shrine .whisper-note { color: #9a8968; }
.shrine .whisper-note.quiet { border-top-color: rgba(255, 214, 150, 0.18); }

/* COW: real mooing — 72 times for a single letter */
.moo-run { margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.moo-count {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(196, 154, 255, 0.75);
}
.moo-code { max-height: 7.4em; overflow-y: auto; }
.moo-said { margin-top: 9px; font-size: 12.5px; color: #9d8bb8; }
.moo-said b {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #ffe9c2;
  text-shadow: 0 0 16px rgba(255, 200, 120, 0.5);
}

/* Malbolge: the mush spills out rather than sitting there from the start */
.malb-code.spill { animation: malb-spill 0.5s ease-out both; }
@keyframes malb-spill {
  from { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Whitespace: "here is the whole program" — and it really is blank until you poke it */
.ws-void {
  margin-top: 10px;
  padding: 14px 12px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  border-left: 2px solid rgba(160, 110, 240, 0.5);
  transition: background 0.3s ease;
}
.ws-void:hover { background: rgba(160, 110, 240, 0.1); }
.ws-blank { font-size: 14px; line-height: 1.7; white-space: pre; overflow-x: auto; min-height: 1.7em; color: transparent; }
.ws-blank .ws-sp { color: transparent; font-style: normal; }
.ws-blank .ws-tab { color: transparent; font-style: normal; }
.ws-void.lit .ws-sp { color: rgba(196, 154, 255, 0.75); }
.ws-void.lit .ws-tab { color: rgba(255, 180, 84, 0.9); }
.ws-void-hint { display: block; margin-top: 8px; font-size: 10.5px; color: #6d5f85; }
.ws-void.lit .ws-void-hint { color: rgba(196, 154, 255, 0.7); }

/* ============ ZOOM IN FIRST, LEAVE SECOND ============ */
/* Clicking a card must not throw the visitor straight out of the room.
   The card travels to the camera first, and the two doors open only once it is close. */

/* the beauty-room overlay is a button, not a link: it zooms in, it does not navigate */
.cover.zoom {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}
.sat-actions {
  position: relative;
  z-index: 3;
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.card.focused .sat-actions { max-height: 90px; opacity: 1; }
.card.focused .cover.zoom { cursor: zoom-out; }
.sat-actions .chip { font-size: 13px; color: rgba(141, 245, 232, 0.9); border-color: rgba(141, 245, 232, 0.45); }
.sat-actions .chip:hover { background: rgba(141, 245, 232, 0.14); }
.sat-close { background: transparent; cursor: pointer; color: rgba(207, 238, 242, 0.6); }
.card.slide.focused .frame {
  /* the zoomed card is OPAQUE: half a station must not show through it */
  background: #06181f;
  border-color: rgba(141, 245, 232, 0.6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 90px rgba(53, 224, 200, 0.18);
}
/* while one card is zoomed the others politely step back into shadow */
.screen-art.focus-on .card3d.sat { transition: opacity 0.35s ease; }
.screen-art.focus-on .card3d.sat:not(.focused) { opacity: 0.34; }
.screen-art.focus-on .card3d.ghost { opacity: 0.12; }

/* author chip at a station: also a two-step interaction */
.achip { position: relative; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.achip-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.achip.open .achip-btn { background: rgba(141, 245, 232, 0.12); opacity: 1; }
.achip-pop { display: inline-flex; gap: 8px; align-items: center; }
.achip-pop[hidden] { display: none; }

/* OM is a short word and needs air around it */
.rit-final { letter-spacing: 0.4em; text-indent: 0.4em; }
@keyframes rit-glory {
  from { opacity: 0; letter-spacing: 0.9em; filter: blur(10px); }
  to { opacity: 1; letter-spacing: 0.4em; filter: none; }
}

/* ============ BEAUTY BACKGROUND SOFTENED ============ */
/* Less noise, less contrast, slower breathing — the scene still changes at every
   station, but it no longer flickers. */

.nebula { animation-duration: 40s; opacity: 0.72; }
@keyframes nebula-breath {
  from { filter: hue-rotate(0deg) blur(2px); opacity: 0.6; }
  to { filter: hue-rotate(-6deg) blur(7px); opacity: 0.78; }
}
.art-motes i { color: rgba(141, 245, 232, 0.1); text-shadow: none; animation-duration: 26s; }
.art-motes i:nth-child(3n) { color: rgba(255, 178, 108, 0.08); animation-duration: 34s; }
.art-motes i:nth-child(5n) { color: rgba(200, 245, 255, 0.07); }
@keyframes art-mote {
  from { transform: translate3d(0, 8px, 0); opacity: 0.22; }
  to { transform: translate3d(0, -12px, 0); opacity: 0.7; }
}
.card3d.ghost { opacity: 0.2; }
/* changing the scene is a mood shift now, not a color jump */
.screen-art .nebula, .screen-art .haze { transition: filter 2s ease, opacity 2s ease; }
.screen-art[data-scene='cal'] .nebula { filter: hue-rotate(-12deg) saturate(0.8) blur(4px); }
.screen-art[data-scene='cal'] .art-motes i { color: rgba(255, 178, 108, 0.1); }
.screen-art[data-scene='vision'] .nebula { filter: hue-rotate(40deg) saturate(0.9) blur(5px); opacity: 0.6; }
.screen-art[data-scene='vision'] .art-motes i { color: rgba(255, 140, 120, 0.11); }
.screen-art[data-scene='graph'] .haze { opacity: 1; }
.screen-art[data-scene='ink'] .nebula { filter: saturate(1.05) blur(5px); }

/* ============ cringe reset, maze, dice, warrior, oracle, clip ============ */

.cringe-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cringe-said { font-size: 11.5px; color: #ffd9a0; }

/* ---- maze captcha ---- */
.maze-q { font-size: clamp(14px, 2vw, 18px); color: var(--cream); margin: 2px 0 4px; }
.maze-body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-top: 6px; }
.maze-svg {
  width: 218px;
  height: 218px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 180, 84, 0.3);
  touch-action: none;
  cursor: crosshair;
}
.maze-svg:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.maze-dot { filter: drop-shadow(0 0 6px rgba(255, 180, 84, 0.7)); }
#maze.armed .maze-dot { fill: #b8f5a0; }
#maze-tick { transition: opacity 0.25s linear; }
.maze-side { flex: 1 1 240px; min-width: 220px; }
.maze-state { font-size: 12.5px; color: #ffd9a0; }
.maze-hint { margin-top: 8px; font-size: 11px; color: #8a7550; line-height: 1.5; }
.maze-btns { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.maze-out { margin-top: 12px; font-size: 12.5px; color: var(--cream); min-height: 1.4em; }
.chip.genre {
  display: inline-block;
  margin-top: 14px;
  font-size: 10.5px;
  padding: 3px 8px;
  color: #a08a5f;
  border: 1px dashed rgba(255, 180, 84, 0.3);
}

/* ---- volume by dice ---- */
.dice-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.die { text-align: center; }
.die-box { display: block; }
.die-face { width: 100%; max-width: 38px; height: auto; margin: 0 auto; }
#dice.rolling .die-face { opacity: 0.8; }
.die-hold {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 9.5px;
  color: #8a7550;
  cursor: pointer;
}
.die-hold input { accent-color: var(--amber); width: 11px; height: 11px; }
.dice-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.dice-vol { font-size: 12.5px; color: #ffd9a0; }
.dice-vol b { color: var(--amber); }
.dice-bar {
  flex: 1 1 120px;
  min-width: 90px;
  height: 8px;
  background: rgba(255, 180, 84, 0.12);
  border: 1px solid rgba(255, 180, 84, 0.25);
}
.dice-bar i { display: block; height: 100%; background: var(--amber); transition: width 0.2s linear; }
.dice-out { margin-top: 10px; font-size: 12.5px; color: var(--cream); min-height: 1.4em; }

/* ---- the warrior's path ---- */
.war-screen {
  margin-top: 4px;
  padding: 12px 14px;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  background: #0a0703;
  border-left: 2px solid #3a2a12;
}
.war-idle { font-size: 12px; color: #6b5a3a; }
.war-step {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--cream);
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.war-step.in { opacity: 1; transform: none; }
.war-step b { color: var(--amber); }
.war-step i { font-style: normal; font-size: 10.5px; color: #8a7550; white-space: nowrap; }
.war-step.gift b, .war-step.loot b { color: #ffe06a; }
.war-step.loot span, .war-step.gift span { color: #ffe6b0; }
.war-step.call span { color: #ffd9a0; }
.war-step.final { margin-top: 6px; border-top: 1px solid rgba(255, 180, 84, 0.2); padding-top: 8px; }
.war-step.final span { color: var(--amber); }
.war-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.war-stamp { font-size: 11.5px; color: #8a7550; }
.war-stamp b { color: var(--amber); }
.war-bar {
  flex: 1 1 120px;
  min-width: 80px;
  height: 6px;
  background: rgba(255, 180, 84, 0.12);
  border: 1px solid rgba(255, 180, 84, 0.25);
}
.war-bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width 0.3s ease; }
.war-out { margin-top: 10px; font-size: 12.5px; color: var(--cream); min-height: 1.4em; }

/* ---- Claude's Plan: video facade plus our own lyric video ---- */
.embed {
  position: relative;
  margin-top: 4px;
  aspect-ratio: 16 / 9;
  background: #0a0703;
  border: 1px solid rgba(255, 180, 84, 0.26);
  overflow: hidden;
}
.embed-poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.embed-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(6, 4, 2, 0.25);
  border: 0;
  color: var(--amber);
  cursor: pointer;
  font-family: var(--mono);
}
.embed-play:hover { background: rgba(6, 4, 2, 0.1); }
.play-ico { width: 62px; height: 62px; }
/* the caption runs as a strip along the bottom of the frame instead of across the poster */
.embed-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #ffd9a0;
  background: rgba(6, 4, 2, 0.72);
}
.embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.live .embed-poster, .embed.live .embed-play { display: none; }
.embed-note { margin-top: 8px; font-size: 10.5px; color: #8a7550; }

.lyric-screen {
  margin-top: 14px;
  padding: 14px;
  min-height: 130px;
  background: #0a0703;
  border-left: 2px solid #3a2a12;
}
.lyric-idle { font-size: 12px; color: #6b5a3a; }
.lv-card {
  position: relative;
  opacity: 0;
  transform: translate3d(22px, 0, 0);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.lv-card.in { opacity: 1; transform: none; }
.lv-card.glitch { animation: lyric-glitch 0.38s steps(2, end) 3; }
@keyframes lyric-glitch {
  0% { transform: translate3d(-3px, 0, 0); }
  50% { transform: translate3d(3px, -1px, 0); }
  100% { transform: none; }
}
.lv-at {
  position: absolute;
  top: -2px;
  right: 0;
  font-size: 10.5px;
  color: #6b5a3a;
}
.lv-ru { margin-top: 10px; font-size: 11.5px; color: #a08a5f; }

/* the lines are drawn with the same interfaces the clip's author draws them with */
.lv-term, .lv-md, .lv-alert, .lv-keys, .lv-gauge, .lv-diff {
  padding: 12px 14px;
  border: 1px solid rgba(255, 180, 84, 0.28);
  background: #0d0904;
  font-size: 13px;
}
.lv-term-cmd { font-size: 11.5px; color: var(--amber); }
.lv-term-out { margin-top: 8px; font-size: clamp(14px, 1.9vw, 19px); color: var(--cream); }
.lv-term-bar { margin-top: 10px; font-size: 10.5px; color: #6fd6c0; }

.lv-md { border-color: rgba(141, 245, 232, 0.28); }
.lv-md-name { font-size: 10.5px; color: #6fd6c0; letter-spacing: 0.08em; }
.lv-md-body { margin-top: 8px; font-size: clamp(14px, 1.9vw, 19px); color: var(--cream); }

.lv-alert { border-color: rgba(255, 90, 70, 0.5); background: #180705; }
.lv-alert-head { font-size: 10.5px; color: #ff8a6a; letter-spacing: 0.08em; }
.lv-alert-body { margin-top: 8px; font-size: clamp(14px, 1.9vw, 19px); color: #ffd0c4; }

.lv-keys-row { font-size: 11px; color: #8a7550; }
.lv-keys-row b { color: var(--amber); font-weight: 400; }
.lv-keys-body { margin-top: 8px; font-size: clamp(14px, 1.9vw, 19px); color: var(--cream); }

.lv-gauge-body { font-size: clamp(14px, 1.9vw, 19px); color: var(--cream); }
.lv-gauge-bar {
  margin-top: 10px;
  height: 8px;
  background: rgba(255, 180, 84, 0.12);
  border: 1px solid rgba(255, 180, 84, 0.25);
}
.lv-gauge-bar i { display: block; height: 100%; width: 93%; background: #ff8a6a; }
.lv-gauge-note { margin-top: 6px; font-size: 10.5px; color: #8a7550; }

/* git diff — the frame this exhibit imitates */
.lv-diff { border-color: rgba(255, 90, 70, 0.45); background: #0f0705; }
.lv-diff-head { font-size: 11px; color: #7aa2ff; letter-spacing: 0.04em; }
.lv-diff-bad {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: clamp(14px, 1.9vw, 19px);
  color: #ffd0c4;
  background: rgba(255, 60, 45, 0.22);
  border-left: 3px solid #ff5a46;
}
.lv-diff-line {
  margin-top: 4px;
  padding: 3px 10px;
  font-size: 12px;
  color: #ff9b8a;
  background: rgba(255, 60, 45, 0.1);
}

.lyric-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.lyric-stat { font-size: 11.5px; color: #8a7550; }
.lyric-door { display: inline-block; }

/* ---- trash-trailer oracle ---- */
.orc-frame {
  position: relative;
  margin-top: 4px;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  background: radial-gradient(120% 90% at 50% 40%, #14200f 0%, #060905 70%, #020301 100%);
  border: 1px solid rgba(255, 180, 84, 0.22);
  overflow: hidden;
}
.orc-vign {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.82) 100%);
  pointer-events: none;
}
.orc-answer {
  position: relative;
  font-size: clamp(18px, 3.4vw, 34px);
  letter-spacing: 0.06em;
  color: #d8f5c8;
  text-align: center;
  text-shadow: 0 0 22px rgba(120, 255, 160, 0.25);
}
#oracle.cut .orc-frame { filter: brightness(2.1) contrast(1.3); }
#oracle.cut .orc-answer { transform: scale(1.06); }
.orc-frame, .orc-answer { transition: filter 0.18s linear, transform 0.18s ease; }
.orc-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.orc-input {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 10px;
  color: var(--cream);
  background: #0a0703;
  border: 1px solid rgba(255, 180, 84, 0.3);
}
.orc-input:focus-visible { outline: 1px solid var(--amber); }
.orc-out { margin-top: 10px; font-size: 12.5px; color: var(--cream); }
.orc-source { margin-top: 10px; font-size: 11px; color: #8a7550; line-height: 1.5; }
.trl-credits { margin-top: 6px; font-size: 11px; color: #8a7550; }
.orc-lead { margin-top: 14px; font-size: 12px; color: #8a7550; }

/* ======================= mobile ======================= */

@media (max-width: 760px) {
  .dice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .maze-body { justify-content: center; }
  .war-step { grid-template-columns: 2.4em minmax(0, 1fr); }
  .war-step i { grid-column: 2; white-space: normal; }
  .editor { min-height: 76vh; max-height: 82vh; }
  .crt-case { border-radius: 20px 20px 14px 14px; }
  .crt-glass { border-radius: 18px / 24px; }
  .hall { padding-left: 12px; padding-right: 12px; padding-top: 96px; }
  .obj.side { width: 100%; }
  .obj.side.reveal, .obj.side.reveal.in { transform: none; }
  .slot.l, .slot.r { justify-content: center; }
  /* on a phone a pair does not fit on one row — stack it in a column */
  .slot.pair { flex-direction: column; align-items: center; gap: 36px; }
  .slot.pair > * { width: 100%; }
  .adhd { flex-direction: column; align-items: stretch; }
  .adhd-side { flex: none; }
  .card3d { width: 460px; }
  .plaque { flex: 1 1 100%; }
  .rit-row { grid-template-columns: minmax(0, 1fr) 8.5em; }
  .rit-was { display: none; }
  .jst-expr { white-space: normal; }
}

@media (max-width: 480px) {
  .editor { padding: 14px 12px 38px; }
  .ticker { font-size: 10.5px; letter-spacing: 0.08em; }
  .obj.mid, .obj.toy { padding: 14px 12px 16px; }
  .ascii-chart.big { font-size: 10.5px; padding: 12px 12px; }
  .banner { font-size: 9.4px; line-height: 1.4; }
  .museum { font-size: 8.4px; }
  .mi { grid-template-columns: 1.2em 1.8em minmax(0, 1fr); row-gap: 2px; }
  .mi-note { grid-column: 3; font-size: 11px; }
  .room-head { padding-top: 54px; }
  .modeline { font-size: 11px; gap: 8px; }
  .ml-buf { overflow: hidden; text-overflow: ellipsis; }
  .ascii-chart { font-size: 9.6px; padding: 10px 12px; }
  .rich-row { grid-template-columns: 6.5em 4em minmax(0, 1fr); font-size: 11px; }
  .icl-line { grid-template-columns: 2.2em 4.8em minmax(0, 1fr); font-size: 10.5px; padding: 2px 8px; }
}

/* PHONE ENTRANCE (same breakpoint as SMALL in mobile.ts). The hall itself is not
   built for mobile — only the threshold has to be tidy: a thinner frame, a buffer
   filling almost the whole screen, menu rows no smaller than a finger. Placed
   after the 760/480 blocks on purpose. */
@media (max-width: 700px) {
  .void { padding: 8px 6px; }
  .crt-scene { width: 100%; perspective: none; }
  /* a "follow the mouse" tilt makes no sense on a touch screen and eats space */
  .crt { transform: none; }
  .crt-case { padding: 8px 8px 12px; border-radius: 16px 16px 12px 12px; }
  .crt-glass { border-radius: 14px / 18px; }
  .crt-neck, .crt-foot, .crt-plate, .crt-pool, .crt-mirror { display: none; }
  .editor { min-height: 84vh; max-height: 94vh; padding: 10px 10px 24px; }
  .banner { font-size: 8.6px; }
  .mini { font-size: 10px; line-height: 1.5; }
  .museum { font-size: 8.2px; }
  .rule { margin: 6px 0 10px; }
  .boot { font-size: 13px; line-height: 1.55; }
  .term-cta { margin-top: 8px; font-size: 13.5px; }
  .menu-title { font-size: 14.5px; }
  /* a finger is not a cursor: the hall row keeps a tap-target height */
  .mi { min-height: 44px; align-items: center; padding: 6px 8px; font-size: 14px; }
  .mi-note { font-size: 11.5px; }
  .menu-foot { margin-left: 8px; }
  .menu-hint { font-size: 12px; }
  .term-log { min-height: 3.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .screen-humor .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .nebula, .boot.crt, .cur, .scroll-hint, .fade-in, .term-cta,
  .eh-arrow span, .eh-text, .room-head.bump,
  .void-stars, .void-glow, .horizon .grid, .museum .ln,
  .breath, .crt-led, .ticker-run { animation: none; }
  .editor, .crt { transition: none; }
  .bars i, .adhd-side, .adhd-cursor span, .rich-row, .adhd-meter i { transition: none; }
  .mote, .magic-glyphs i, .art-motes i, .med-body i, .med-halo { animation: none; }
  /* the rites keep working, just without motion: the result shows immediately */
  .rit-altar.wet .rit-wave { animation: none; opacity: 0; }
  .rit-final.on { animation: none; }
  .med-bubble { animation: none; }
  /* new exhibits: functional, but without motion — the result shows immediately */
  .war-step, .lv-card { opacity: 1; transform: none; transition: none; }
  .lv-card.glitch { animation: none; }
  #oracle.cut .orc-frame { filter: none; }
  #oracle.cut .orc-answer { transform: none; }
  .finale-pix, .finale-sky, .finale-body { transition: none; }
  .slot.l .drift .card.in, .slot.r .drift .card.in, .slot.c .drift .card.in,
  .obj.side.reveal, .obj.side.reveal.in, .obj.mid.reveal, .obj.mid.reveal.in { transform: none; }
}

/* ============ LANGUAGE SWITCH AND LEGAL FOOTNOTE ============ */
/* [ru] · [en] — same typeface as everything around it, tucked into the corner so it
   covers nothing. The active language glows, the other one waits in a whisper. */

.langsw {
  position: fixed;
  top: 38px;
  right: 12px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(125, 255, 160, 0.22);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
}
.langsw-b {
  padding: 2px 3px;
  background: none;
  border: 0;
  font: inherit;
  color: #4d6b56;
  cursor: pointer;
}
.langsw-b:hover { color: #9fe8b2; }
.langsw-b.on { color: var(--green); cursor: default; }
.langsw-sep { color: #33473a; }

.screen-humor .langsw { border-color: rgba(255, 180, 84, 0.24); }
.screen-humor .langsw-b { color: #7a5f34; }
.screen-humor .langsw-b:hover { color: #ffd9a0; }
.screen-humor .langsw-b.on { color: var(--amber); }
.screen-humor .langsw-sep { color: #4a3a20; }

.screen-art .langsw { border-color: rgba(141, 245, 232, 0.26); }
.screen-art .langsw-b { color: #46706e; }
.screen-art .langsw-b:hover { color: #d6fcf8; }
.screen-art .langsw-b.on { color: var(--teal); }
.screen-art .langsw-sep { color: #2c4a48; }

/* ru-only legal footnote: small, grey, no play — a legal line, not an exhibit */
.legal-note {
  margin: 14px auto 0;
  max-width: 62ch;
  font-size: 10px;
  line-height: 1.5;
  color: #3f4a43;
  text-align: center;
}
.room-foot .legal-note { color: #4a4438; }

@media (max-width: 700px) {
  .langsw { top: 8px; right: 8px; font-size: 11px; padding: 3px 6px; }
  .legal-note { font-size: 9.5px; }
}