/* ───────────────────────────────────────────────────────────────
   LYSERGIC ROOMS — shared chrome for every side room
   ─────────────────────────────────────────────────────────────── */
:root {
  --bg:      oklch(0.13 0.012 240);
  --bg-2:    oklch(0.17 0.012 240);
  --fg:      oklch(0.94 0.012 90);
  --fg-dim:  oklch(0.66 0.010 90);
  --fg-mute: oklch(0.44 0.008 240);
  --line:    oklch(0.27 0.010 240);
  --accent:  oklch(0.82 0.13 155);
  --accent-d:oklch(0.55 0.10 155);
  --red:     oklch(0.72 0.20 25);
  --cyan:    oklch(0.78 0.16 200);
  --panel:   color-mix(in oklab, var(--bg) 66%, transparent);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html { background: var(--bg); }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  cursor: crosshair;
}
a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
.sm { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* top bar — every room shares this */
.rbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 14px 24px; gap: 16px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 82%, transparent), transparent);
}
.rbar .mark { color: var(--fg); letter-spacing: 0.18em; }
.rbar .mark::before { content: "◐ "; color: var(--accent); }
.rbar .title { text-align: center; color: var(--fg-dim); }
.rbar .title b { color: var(--accent); font-weight: 500; }
.rbar .right { display: flex; gap: 16px; justify-content: flex-end; align-items: center; color: var(--fg-dim); }
.rbar .back { text-decoration: none; color: var(--accent); border-bottom: 1px solid var(--accent-d); transition: color .2s, border-color .2s; padding-bottom: 1px; }
.rbar .back:hover { color: var(--fg); border-color: var(--accent); }
.rbar .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; animation: rpd 2.4s ease-out infinite; }
@keyframes rpd { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* shared glitch text (doctrine treatment) */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none;
}
.glitch::before { color: var(--red); text-shadow: -2px 0 var(--red); animation: gA 2.1s steps(13) infinite; mix-blend-mode: screen; }
.glitch::after  { color: var(--cyan); text-shadow: 2px 0 var(--cyan); animation: gB 1.7s steps(11) infinite reverse; mix-blend-mode: screen; }
@keyframes gA {
  0%{clip-path:inset(0 0 86% 0);transform:translate(-3px,-1px)} 20%{clip-path:inset(20% 0 56% 0);transform:translate(-2px,0)}
  40%{clip-path:inset(40% 0 38% 0);transform:translate(-4px,1px)} 60%{clip-path:inset(60% 0 22% 0);transform:translate(-3px,1px)}
  80%{clip-path:inset(82% 0 4% 0);transform:translate(-2px,0)} 100%{clip-path:inset(0 0 86% 0);transform:translate(-3px,-1px)}
}
@keyframes gB {
  0%{clip-path:inset(70% 0 12% 0);transform:translate(3px,1px)} 24%{clip-path:inset(48% 0 28% 0);transform:translate(2px,0)}
  48%{clip-path:inset(24% 0 60% 0);transform:translate(3px,-1px)} 72%{clip-path:inset(4% 0 84% 0);transform:translate(4px,0)}
  100%{clip-path:inset(70% 0 12% 0);transform:translate(3px,1px)}
}
@media (prefers-reduced-motion: reduce) { .glitch::before, .glitch::after { display: none; } }

.btn {
  font: inherit; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px;
  color: var(--fg); background: transparent; border: 1px solid var(--fg);
  padding: 14px 30px; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn.ghost { border-color: var(--line); color: var(--fg-mute); padding: 10px 18px; font-size: 11px; }
.btn.ghost:hover { border-color: var(--accent); color: var(--fg); background: transparent; }

/* generic slider used by several rooms */
.rrack {
  position: fixed; z-index: 20; padding: 16px; width: 220px;
  border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 11px;
}
.rrack .rh { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.rrack .rh b { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); font-weight: 500; }
.rrack .rh span { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); }
.ctl { display: grid; grid-template-columns: 60px 1fr 28px; gap: 10px; align-items: center; }
.ctl label { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); }
.ctl b { font-size: 10px; color: var(--fg-dim); text-align: right; font-weight: 400; }
.ctl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--line); cursor: pointer; }
.ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 60%, transparent); cursor: ew-resize; }
.ctl input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: none; border-radius: 50%; background: var(--accent); cursor: ew-resize; }