:root {
  --bg: #0d0907;
  --bone: #efe6d8;
  --bone-dim: #b9ad9c;
  --ink: #1b120d;
  --fire: #ff7a1a;
  --fire-hot: #ffd166;
  --blood: #d7263d;
  --stone: #1c1511;
  --stone-edge: #3a2c22;
  --claude: #d97757;
  --parchment: #f6ecdc;
  --display: "Creepster", "Chiller", fantasy;
  --punch: "Bangers", "Impact", sans-serif;
  --body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --comic: "Comic Neue", "Comic Sans MS", var(--body);
  --c: var(--fire); /* current speaker color, set from JS */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--bone);
  font-family: var(--body);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 38%, rgba(255, 122, 26, 0.13), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 22%, transparent 70%, rgba(0, 0, 0, 0.85)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Crect width='120' height='64' fill='%23170f0b'/%3E%3Cg fill='%23241a14' stroke='%230c0806' stroke-width='3'%3E%3Crect x='1.5' y='1.5' width='57' height='29' rx='3'/%3E%3Crect x='61.5' y='1.5' width='57' height='29' rx='3'/%3E%3Crect x='-28.5' y='33.5' width='57' height='29' rx='3'/%3E%3Crect x='31.5' y='33.5' width='57' height='29' rx='3'/%3E%3Crect x='91.5' y='33.5' width='57' height='29' rx='3'/%3E%3C/g%3E%3Cg fill='%23000' opacity='.25'%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3Ccircle cx='88' cy='22' r='1.5'/%3E%3Ccircle cx='52' cy='48' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  overflow: hidden;
}
button { font: inherit; color: inherit; }

/* ---------- atmosphere ---------- */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.8) 100%);
  animation: flicker 4s infinite steps(1);
}
@keyframes flicker {
  0%, 100% { opacity: 1; } 12% { opacity: 0.93; } 13% { opacity: 1; } 47% { opacity: 0.96; } 48% { opacity: 1; } 71% { opacity: 0.9; } 72% { opacity: 1; }
}
.embers { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.embers span {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--fire-hot); box-shadow: 0 0 6px 2px var(--fire);
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--drift), -105vh); opacity: 0; }
}

.torch { position: fixed; top: 30%; width: 40px; height: 120px; z-index: 2; }
.torch-l { left: max(16px, 2.5vw); }
.torch-r { right: max(16px, 2.5vw); }
.torch .stick {
  position: absolute; left: 13px; top: 44px; width: 14px; height: 70px;
  background: linear-gradient(90deg, #3b2414, #6b4425 50%, #3b2414);
  border-radius: 3px 3px 6px 6px;
  box-shadow: inset 0 6px 0 #222, 0 0 0 2px #111;
}
.torch .stick::before { /* iron bracket */
  content: ""; position: absolute; left: -6px; right: -6px; top: 22px; height: 8px;
  background: #2a2a2a; border-radius: 2px; box-shadow: 0 2px 0 #000;
}
.torch .flame {
  position: absolute; left: 6px; top: 0; width: 28px; height: 48px;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff6c9 0 18%, var(--fire-hot) 30%, var(--fire) 58%, rgba(215, 38, 61, 0.9) 78%, transparent 80%);
  filter: blur(0.6px);
  transform-origin: 50% 90%;
  animation: burn 0.35s infinite alternate ease-in-out;
}
.torch-r .flame { animation-delay: -0.17s; }
.torch .glow {
  position: absolute; left: -110px; top: -100px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 40, 0.28), transparent 65%);
  animation: pulse 1.8s infinite alternate;
}
@keyframes burn {
  0% { transform: scale(1, 1) rotate(-3deg); }
  50% { transform: scale(0.92, 1.08) rotate(2deg); }
  100% { transform: scale(1.05, 0.95) rotate(-1deg); }
}
@keyframes pulse { from { opacity: 0.7; transform: scale(0.95); } to { opacity: 1; transform: scale(1.05); } }

/* ---------- layout ---------- */
.room {
  position: relative; z-index: 3;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.room.shake { animation: shake 0.45s; }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-6px, 2px); } 40%, 60% { transform: translate(6px, -1px); }
}

.marquee { position: relative; z-index: 2; text-align: center; padding: 18px 64px 0; }
.title {
  margin: 0; font: 400 clamp(38px, 5.4vw, 74px)/1 var(--display); letter-spacing: 0.04em;
  color: var(--bone);
  text-shadow: 0 3px 0 #000, 0 0 24px rgba(255, 122, 26, 0.35);
}
.title span { color: var(--blood); text-shadow: 0 3px 0 #000, 0 0 22px rgba(215, 38, 61, 0.7); }
/* ---------- stage ---------- */
.stage {
  position: relative; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  gap: 8px; padding: 8px 16px 14px;
}
.victim-zone {
  display: grid; align-items: center; justify-content: center;
  grid-template-columns: 70px auto minmax(0, 520px);
  gap: 18px; width: 100%; max-width: 960px;
}
.composure { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.meter-label, .meter-text { font: 700 10px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); text-align: center; }
.meter-text { color: var(--bone); min-height: 2.4em; }
.meter {
  position: relative; width: 18px; height: clamp(90px, 16vh, 150px); border-radius: 10px;
  background: #0a0706; border: 2px solid #4a3a2e; overflow: hidden;
  box-shadow: inset 0 0 8px #000;
}
.meter-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(to top, var(--blood), var(--fire) 45%, #7bd389 85%);
  background-size: 100% clamp(90px, 16vh, 150px); background-position: bottom;
  transition: height 1.2s cubic-bezier(.2, .9, .2, 1.2);
}

.victim { margin: 0; display: flex; flex-direction: column; align-items: center; }
#claudeSvg {
  width: clamp(130px, 25vh, 220px); height: auto; overflow: visible;
  transform-origin: 50% 0; animation: swing 5s ease-in-out infinite;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.7));
}
.victim.rattled #claudeSvg { animation: jitter 0.12s 6, swing 5s ease-in-out infinite 0.72s; }
@keyframes swing { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes jitter { 0%, 100% { transform: translateX(0) rotate(0); } 33% { transform: translateX(-5px) rotate(-3deg); } 66% { transform: translateX(5px) rotate(3deg); } }

.plate {
  margin-top: 4px; padding: 5px 14px 4px; border-radius: 6px; line-height: 1;
  background: linear-gradient(#2a1f18, #19120e); border: 1px solid #4a3a2e;
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.plate strong { font: 400 18px/1 var(--punch); letter-spacing: 0.08em; }
.plate-victim strong { color: var(--claude); }

/* ---------- speech bubbles: comic-book style, black on white ---------- */
.bubble {
  position: relative; border-radius: 22px; padding: 22px 22px 18px; min-height: 84px;
  background: #fff; color: #0b0b0b; border: 4px solid #000; box-shadow: 7px 7px 0 #000;
  opacity: 0; transform: translateY(6px) scale(0.98);
  transition: opacity 0.25s, transform 0.25s;
}
.bubble.show { opacity: 1; transform: none; }
.bubble.show.stale { opacity: 0.88; }
.bubble.pop { animation: pop 0.4s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(0.85); } }
.bubble-text {
  margin: 0; font: 700 clamp(16px, 2.2vh, 20px)/1.38 var(--comic);
  white-space: pre-line; overflow-wrap: anywhere;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #bbb transparent;
}
.bubble-text:empty { display: none; }
.bubble-text.typing::after { content: "▌"; margin-left: 1px; animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* name tag pinned to the top edge of each bubble */
.tag {
  position: absolute; top: -17px; left: 18px; z-index: 1;
  font: 400 18px/1 var(--punch); letter-spacing: 0.08em; color: #000;
  background: var(--c); border: 3px solid #000; border-radius: 6px; padding: 5px 10px 3px;
  box-shadow: 3px 3px 0 #000; transform: rotate(-2deg);
}
.bubble-reply .tag { background: var(--claude); }

.bubble-reply .bubble-text { max-height: clamp(110px, 32vh, 330px); }
.bubble-reply::before { /* tail pointing left at Claude */
  content: ""; position: absolute; left: -22px; top: 30px;
  border: 13px solid transparent; border-right: 20px solid #000; border-left: 0;
}
.bubble-reply::after {
  content: ""; position: absolute; left: -13px; top: 35px;
  border: 8px solid transparent; border-right: 13px solid #fff; border-left: 0;
}

.taunt-zone { width: 100%; max-width: 880px; }
.bubble-taunt { margin-bottom: 18px; }
.bubble-taunt .bubble-text { font-size: clamp(21px, 3.1vh, 34px); line-height: 1.24; max-height: clamp(96px, 21vh, 210px); }
.bubble-taunt::before, .bubble-taunt::after { /* tail pointing down at the speaker */
  content: ""; position: absolute; transition: left 0.3s;
}
.bubble-taunt::before { bottom: -24px; left: calc(var(--tail-x, 50%) - 15px); border: 15px solid transparent; border-top: 22px solid #000; border-bottom: 0; }
.bubble-taunt::after { bottom: -14px; left: calc(var(--tail-x, 50%) - 9px); border: 9px solid transparent; border-top: 14px solid #fff; border-bottom: 0; }
.burn {
  position: absolute; right: 14px; top: -16px;
  font: 400 16px/1 var(--punch); letter-spacing: 0.06em;
  padding: 5px 9px 3px; border-radius: 6px; background: #000; color: var(--fire-hot); border: 2px solid var(--fire);
  opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.25s cubic-bezier(.2, 1.6, .4, 1);
}
.burn.show { opacity: 1; transform: none; }

/* "typing…" dots */
.thinking { display: none; gap: 6px; padding: 8px 0 4px; }
.thinking.show { display: flex; }
.thinking i { width: 10px; height: 10px; border-radius: 50%; background: #000; animation: dot 1s infinite; }
.thinking i:nth-child(2) { animation-delay: 0.15s; }
.thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-6px); opacity: 1; } }

/* ---------- tormentors ---------- */
.bench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 780px; }
.tormentor { margin: 0; display: flex; flex-direction: column; align-items: center; transition: transform 0.45s cubic-bezier(.3, 1.4, .5, 1), opacity 0.35s, filter 0.35s; opacity: 0.5; filter: saturate(0.5) brightness(0.8); transform: scale(0.94); }
.tormentor svg { width: clamp(76px, 15vh, 130px); height: auto; overflow: visible; animation: hover 3.2s ease-in-out infinite; }
.tormentor:nth-child(2) svg { animation-delay: -1.1s; }
.tormentor:nth-child(3) svg { animation-delay: -2.2s; }
.tormentor.speaking { opacity: 1; filter: none; transform: translateY(-16px) scale(1.16); }
.tormentor.speaking svg { filter: drop-shadow(0 0 16px var(--tc)) drop-shadow(0 0 36px var(--tc)); }
.tormentor.speaking .plate { background: var(--tc); border-color: var(--tc); box-shadow: 0 0 20px var(--tc); }
.tormentor.speaking .plate strong { color: #120c0a; }
.turn-claude .tormentor { opacity: 0.3; filter: grayscale(0.7) brightness(0.6); }
.victim { transition: opacity 0.35s, filter 0.35s, transform 0.45s cubic-bezier(.3, 1.4, .5, 1); }
.turn-luna .victim { opacity: 0.7; filter: saturate(0.6) brightness(0.85); }
.turn-claude .victim { transform: scale(1.06); }
.turn-claude #claudeSvg { filter: drop-shadow(0 0 18px rgba(255, 150, 90, 0.85)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.7)); }
.turn-claude .plate-victim { background: var(--claude); border-color: var(--claude); box-shadow: 0 0 20px var(--claude); }
.turn-claude .plate-victim strong { color: #120c0a; }
.plate { transition: background 0.3s, box-shadow 0.3s; }

/* spotlight that slides to whoever is talking */
.spot {
  position: absolute; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--spot, #ffd9a0) 34%, transparent), color-mix(in srgb, var(--spot, #ffd9a0) 10%, transparent) 42%, transparent 68%);
  transition: transform 0.6s cubic-bezier(.3, 1.25, .5, 1), opacity 0.3s;
}
.spot.on { opacity: 1; }
.tormentor.speaking .mouth { animation: yap 0.18s infinite alternate; transform-box: fill-box; transform-origin: center; }
.tormentor .plate strong { color: var(--tc); }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes yap { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }
.victim.speaking .mouth { animation: yap 0.2s infinite alternate; transform-box: fill-box; transform-origin: center; }

/* ---------- stamp (SAVAGE / UNBOTHERED) ---------- */
.stamp {
  position: absolute; left: 74%; top: 22%; z-index: 4; pointer-events: none;
  font: 400 clamp(38px, 7vw, 76px)/1 var(--punch); letter-spacing: 0.06em;
  padding: 6px 18px; border: 5px solid currentColor; border-radius: 10px;
  color: var(--blood); background: rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.5);
}
.stamp.go { animation: stamp 1.8s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.6); }
  14% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.1); }
}

/* ---------- transcript drawer ---------- */
.log-toggle, .log-close {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px;
  background: linear-gradient(#2d221b, #1a130f); border: 1px solid #4a3a2e;
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.log-toggle { position: fixed; top: 14px; right: 14px; z-index: 6; opacity: 0.75; }
.log-toggle:hover, .log-close:hover { opacity: 1; border-color: var(--fire); }
.log {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); z-index: 15;
  display: flex; flex-direction: column;
  background: rgba(8, 5, 4, 0.94); border-left: 3px solid var(--stone-edge);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.6);
  transform: translateX(105%); transition: transform 0.3s;
}
.log.open { transform: none; }
.log-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid #2a1f18; }
.log-head h2 { margin: 0; font: 400 24px/1 var(--display); letter-spacing: 0.08em; color: var(--fire); }
.log-list { list-style: none; margin: 0; padding: 12px 14px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; scrollbar-color: #4a3a2e transparent; }
.log-list li { font-size: 13px; line-height: 1.45; color: var(--bone-dim); white-space: pre-line; animation: fadein 0.3s; }
.log-list li b { display: block; font: 400 13px/1.2 var(--punch); letter-spacing: 0.08em; color: var(--lc); }
.log-list li.victim-line { padding-left: 12px; border-left: 2px solid var(--claude); color: var(--bone); }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .torch { display: none; }
  .marquee { padding: 12px 60px 10px 16px; text-align: left; background: linear-gradient(var(--bg) 70%, transparent); }
  .title { font-size: clamp(28px, 9vw, 44px); }
  .stage { justify-content: space-between; gap: 4px; padding: 6px 12px 10px; }
  .victim-zone { grid-template-columns: 56px auto; gap: 8px 10px; }
  .meter-label, .meter-text { font-size: 9px; letter-spacing: 0.06em; }
  #claudeSvg { width: min(36vw, 20vh, 170px); }
  .meter { height: min(96px, 12vh); }
  .meter-fill { background-size: 100% min(96px, 12vh); }
  .plate { padding: 4px 9px 3px; }
  .plate strong { font-size: 15px; }
  .bubble { min-height: 62px; padding: 18px 13px 11px; box-shadow: 5px 5px 0 #000; border-width: 3px; }
  .bubble-text { font-size: 15.5px; line-height: 1.34; }
  .bubble-taunt .bubble-text { font-size: 19px; line-height: 1.24; }
  .tag { font-size: 15px; top: -15px; left: 12px; }
  .stamp { left: 50%; top: 30%; }
  .spot { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .bubble-reply { grid-column: 1 / -1; }
  .bubble-reply .bubble-text { max-height: 24vh; }
  .bubble-taunt .bubble-text { max-height: 16vh; }
  .bubble-reply::before { left: 50%; top: -20px; margin-left: -12px; border: 12px solid transparent; border-bottom: 18px solid #000; border-top: 0; }
  .bubble-reply::after { left: 50%; top: -12px; margin-left: -8px; border: 8px solid transparent; border-bottom: 12px solid #fff; border-top: 0; }
  .bubble-reply .tag { left: auto; right: 12px; }
  .bubble-taunt { margin-bottom: 16px; }
  .tormentor svg { width: min(24vw, 12vh, 100px); }
  .tormentor.speaking { transform: translateY(-8px) scale(1.1); }
  .log-toggle { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .embers { display: none; }
}