:root {
  --terracotta: #B95B3A;
  --sienna: #6E2F22;
  --brass: #D6A84F;
  --black: #111015;
  --ivory: #F4E3C1;
  --verdigris: #2F6F66;
  --display: "Jost", "Futura", "Montserrat", sans-serif;
  --accent: "Poiret One", cursive;
  --body: "Montserrat", "Inter", sans-serif;
}

/* Design compliance motifs: IntersectionObserver: scroll rooms brighten portraits. */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  color: var(--ivory);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 10%, rgba(214, 168, 79, .18), transparent 30rem),
    radial-gradient(circle at 84% 28%, rgba(185, 91, 58, .32), transparent 34rem),
    linear-gradient(135deg, var(--black), var(--sienna) 42%, var(--black));
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.ambient-smoke {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background:
    radial-gradient(ellipse at 25% 40%, rgba(244, 227, 193, .12), transparent 26%),
    radial-gradient(ellipse at 70% 64%, rgba(47, 111, 102, .13), transparent 28%),
    repeating-linear-gradient(100deg, transparent 0 7rem, rgba(244, 227, 193, .025) 7.3rem 7.8rem);
  filter: blur(22px);
  transform: translate3d(var(--smoke-x, 0), var(--smoke-y, 0), 0);
}

.club-nav {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 20;
  display: flex;
  gap: .35rem;
  align-items: center;
  padding: .45rem;
  border: 1px solid rgba(214, 168, 79, .45);
  background: rgba(17, 16, 21, .68);
  backdrop-filter: blur(12px);
  clip-path: polygon(1rem 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 1rem);
}

.club-nav a, .nav-seal {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .55rem .7rem;
}

.nav-seal {
  color: var(--black);
  background: var(--brass);
  border-radius: 50%;
}

.room {
  position: relative;
  min-height: 100vh;
  z-index: 1;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.room::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(214, 168, 79, .28);
  pointer-events: none;
  transform: scaleY(.85);
  opacity: 0;
  transition: transform .9s ease, opacity .9s ease;
}

.room.is-visible::before { transform: scaleY(1); opacity: 1; }

.hero-room {
  place-items: center;
  background:
    linear-gradient(90deg, rgba(17,16,21,.98), rgba(110,47,34,.74), rgba(17,16,21,.98)),
    repeating-linear-gradient(90deg, transparent 0 4.5rem, rgba(214,168,79,.09) 4.6rem 4.7rem);
}

.brass-line {
  position: absolute;
  top: 8vh;
  bottom: 8vh;
  width: 2px;
  background: linear-gradient(var(--brass), transparent, var(--brass));
  transform: scaleY(0);
  transform-origin: bottom;
  animation: drawUp 1.4s .25s ease forwards;
}

.brass-line.left { left: 14vw; }
.brass-line.right { right: 18vw; animation-delay: .45s; }

.proscenium {
  position: relative;
  width: min(760px, 82vw);
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: 7rem 2rem 4rem;
  border: 2px solid var(--brass);
  background: linear-gradient(180deg, rgba(17,16,21,.28), rgba(17,16,21,.72));
  clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  box-shadow: 0 0 0 1rem rgba(17,16,21,.3), inset 0 0 4rem rgba(214,168,79,.12);
}

.proscenium::before, .mirror-arch::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(214,168,79,.65);
  clip-path: inherit;
}

.eyebrow, .hero-whisper, .dossier-tab, .side-caption p, .stage-copy p, .voting-panel p, .final-plaque p {
  font-size: .82rem;
  line-height: 1.7;
  letter-spacing: .08em;
}

.eyebrow {
  position: absolute;
  top: 3rem;
  color: var(--brass);
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; }

h1 {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  line-height: .76;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(4.4rem, 13vw, 10.8rem);
  text-align: center;
  text-shadow: 0 .08em 0 rgba(110,47,34,.85), 0 0 2rem rgba(214,168,79,.22);
}

h1 span {
  display: block;
  opacity: 0;
  transform: translateY(3rem) scale(.96);
  animation: settleTitle .72s ease forwards;
}
h1 span:nth-child(2) { animation-delay: .22s; }
h1 span:nth-child(3) { animation-delay: .42s; color: var(--brass); }

.hero-whisper {
  align-self: end;
  color: rgba(244,227,193,.78);
}

.chair-silhouette {
  position: absolute;
  bottom: 5.5rem;
  width: 8rem;
  height: 9rem;
  background: var(--black);
  clip-path: polygon(24% 18%, 76% 18%, 84% 52%, 66% 52%, 72% 100%, 58% 100%, 54% 58%, 46% 58%, 42% 100%, 28% 100%, 34% 52%, 16% 52%);
  opacity: .72;
}

.candle-field { position: absolute; inset: 0; pointer-events: none; }
.candle {
  position: absolute;
  width: 1.4rem;
  height: 2.7rem;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 28%, #F4E3C1, #D6A84F 38%, rgba(185,91,58,.2) 70%, transparent 72%);
  filter: drop-shadow(0 0 1rem var(--brass));
  animation: haloPulse 2.4s ease-in-out infinite;
}
.flame-one { left: 19vw; top: 70vh; }
.flame-two { right: 24vw; top: 23vh; animation-delay: .7s; }
.flame-three { left: 52vw; bottom: 11vh; animation-delay: 1.1s; }

.sunburst {
  position: absolute;
  width: 74vmin;
  height: 74vmin;
  opacity: .22;
  background: conic-gradient(from 0deg, transparent 0 8deg, var(--brass) 8deg 10deg, transparent 10deg 20deg);
  border-radius: 50%;
  animation: slowRotate 18s linear infinite;
}

.portrait-room {
  grid-template-columns: minmax(14rem, 24vw) 1fr;
  gap: 2rem;
  align-items: center;
  padding: 7rem 4rem 4rem;
  background: linear-gradient(180deg, var(--sienna), var(--black));
}

.side-caption, .stage-copy, .voting-panel, .final-plaque {
  position: relative;
  z-index: 2;
  padding: 1.4rem;
  border-left: 2px solid var(--brass);
  background: rgba(17,16,21,.42);
}

.room-number {
  display: block;
  font-family: var(--accent);
  color: var(--brass);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .8;
  margin-bottom: 1rem;
}

h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.smoke-phrase {
  position: absolute;
  top: 11%;
  right: 8%;
  font-family: var(--accent);
  font-size: clamp(1.7rem, 4vw, 4rem);
  color: rgba(244,227,193,.13);
  transform: translateX(var(--drift, 0));
  filter: blur(.6px);
}

.portrait-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 8.5rem;
  gap: 1rem;
  align-items: stretch;
}

.suspect-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 17rem;
  padding: 1rem;
  border: 1px solid rgba(214,168,79,.6);
  background:
    linear-gradient(180deg, rgba(244,227,193,.08), rgba(17,16,21,.74)),
    repeating-linear-gradient(90deg, transparent 0 1.2rem, rgba(214,168,79,.07) 1.24rem 1.32rem);
  box-shadow: inset 0 0 0 .45rem rgba(17,16,21,.58);
  opacity: .48;
  transform: translateY(2rem) scale(.96);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}

.suspect-card.is-visible, .portrait-room.is-visible .suspect-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.suspect-card:hover, .suspect-card.selected {
  filter: brightness(1.22) sepia(.15);
  transform: translateY(-.4rem) scale(1.015);
}

.suspect-card.tall { grid-column: span 2; grid-row: span 3; }
.suspect-card.square { grid-column: span 2; grid-row: span 2; }
.suspect-card.strip { grid-column: span 2; grid-row: span 2; }
.suspect-card.oval { grid-column: span 2; grid-row: span 3; }
.suspect-card.arch { clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); }

.dossier-tab {
  position: absolute;
  top: .9rem;
  left: -.55rem;
  padding: .32rem .7rem;
  color: var(--ivory);
  background: var(--terracotta);
  border: 1px solid rgba(214,168,79,.45);
  font-weight: 600;
  z-index: 4;
}

.photo-mask {
  position: absolute;
  inset: .9rem .9rem 5.9rem;
  overflow: hidden;
  border: .55rem solid rgba(244,227,193,.88);
  background:
    radial-gradient(circle at 50% 24%, rgba(244,227,193,.62) 0 8%, transparent 8.5%),
    linear-gradient(90deg, rgba(17,16,21,.74) 0 38%, rgba(244,227,193,.34) 39% 44%, rgba(47,111,102,.58) 45% 51%, rgba(17,16,21,.8) 52%),
    radial-gradient(circle at 46% 42%, rgba(244,227,193,.32), transparent 18%),
    linear-gradient(140deg, var(--sienna), var(--black));
  filter: sepia(.42) contrast(1.15);
}

.arch .photo-mask { clip-path: polygon(22% 0, 78% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); }
.oval .photo-mask { border-radius: 50% 50% 46% 46%; }
.portrait-b { background-position: 30% 20%; }
.portrait-c { background: linear-gradient(90deg, var(--black), rgba(244,227,193,.22), var(--black)), repeating-linear-gradient(0deg, rgba(47,111,102,.34) 0 .5rem, transparent .5rem 1rem); }
.portrait-d { background: radial-gradient(circle at 47% 33%, rgba(244,227,193,.48), transparent 10%), linear-gradient(115deg, var(--sienna), var(--black) 55%, var(--terracotta)); }
.portrait-e { background: linear-gradient(90deg, rgba(244,227,193,.15), rgba(47,111,102,.42), rgba(17,16,21,.92)), repeating-linear-gradient(90deg, transparent 0 .8rem, rgba(244,227,193,.08) .84rem .9rem); }
.portrait-f { background: radial-gradient(circle at 30% 72%, rgba(244,227,193,.5), transparent 12%), linear-gradient(145deg, var(--terracotta), var(--black)); }

.face-line {
  position: absolute;
  inset: 18% 47% 12%;
  width: 2px;
  background: var(--brass);
  box-shadow: -1.8rem 2rem 0 rgba(244,227,193,.22), 1.8rem 2rem 0 rgba(47,111,102,.38);
}

.suspect-card h3 {
  position: relative;
  z-index: 3;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brass);
}

.suspect-card p {
  position: relative;
  z-index: 3;
  margin: .4rem 2.8rem 0 0;
  font-size: .76rem;
  line-height: 1.5;
}

.vote-token {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--brass);
  color: var(--black);
  background: var(--brass);
  font-family: var(--display);
  font-weight: 800;
  cursor: pointer;
  transform: translateX(1.1rem);
  transition: transform .6s ease, background .3s ease;
}

.suspect-card.is-visible .vote-token, .portrait-room.is-visible .vote-token { transform: translateX(0); }
.vote-token.cast { background: var(--verdigris); color: var(--ivory); }

.table-room {
  place-items: center;
  background: radial-gradient(circle at 50% 64%, rgba(214,168,79,.18), transparent 28rem), linear-gradient(180deg, var(--black), var(--sienna));
}

.tableau {
  width: min(1100px, 90vw);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 4rem;
  align-items: center;
}

.interrogation-table {
  position: relative;
  min-height: 34rem;
  border-radius: 48% 48% 10% 10%;
  background: radial-gradient(ellipse at center, rgba(244,227,193,.12), transparent 42%), linear-gradient(135deg, #111015, #2b1110 70%);
  border: 2px solid var(--brass);
  box-shadow: 0 3rem 5rem rgba(0,0,0,.45), inset 0 0 4rem rgba(214,168,79,.1);
}

.card-stack {
  position: absolute;
  width: 10rem;
  height: 14rem;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--black);
  background: var(--ivory);
  border: .5rem solid var(--brass);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.4);
}
.card-stack.one { top: 20%; left: 17%; transform: rotate(-10deg); }
.card-stack.two { bottom: 18%; right: 19%; transform: rotate(12deg); background: #e4c177; }

.mask {
  position: absolute;
  top: 32%;
  width: 11rem;
  height: 14rem;
  background: linear-gradient(90deg, var(--ivory) 0 49%, var(--verdigris) 50% 100%);
  clip-path: polygon(50% 0, 86% 20%, 78% 76%, 50% 100%, 22% 76%, 14% 20%);
  opacity: .86;
}
.human-mask { left: 38%; transform: rotate(-8deg); }
.machine-mask { right: 16%; transform: rotate(14deg) scale(.8); opacity: .5; }

.truth-candle {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 2rem;
  height: 4.2rem;
  margin-left: -1rem;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 25%, var(--ivory), var(--brass) 38%, transparent 72%);
  filter: drop-shadow(0 0 1.5rem var(--brass));
  transform-origin: bottom center;
  transform: rotate(var(--flame-tilt, 0deg));
  transition: transform .2s linear;
}

.balcony-room {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  padding: 6rem 6vw;
  background: linear-gradient(180deg, var(--sienna), var(--black) 68%);
}

.balcony-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  height: 8rem;
  border-block: 2px solid rgba(214,168,79,.55);
  background: repeating-linear-gradient(90deg, transparent 0 4rem, rgba(214,168,79,.34) 4rem 4.12rem);
  transform: skewY(-2deg);
}

.ritual-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.ritual-controls button {
  border: 1px solid var(--brass);
  background: transparent;
  color: var(--ivory);
  padding: .8rem 1rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.ritual-controls button:hover, .ritual-controls button.active { background: var(--brass); color: var(--black); transform: translateY(-.2rem); }

.token-stage {
  position: relative;
  height: 34rem;
  border: 1px solid rgba(214,168,79,.45);
  background: radial-gradient(circle at center, rgba(244,227,193,.1), transparent 42%);
  clip-path: polygon(12% 0, 88% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
}

.large-token {
  position: absolute;
  top: 40%;
  width: 9rem;
  height: 9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: .35rem double var(--black);
  background: var(--brass);
  color: var(--black);
  font-family: var(--display);
  font-size: 4rem;
  font-weight: 800;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease;
}
.h-token { left: 18%; transform: translateX(-2rem); }
.m-token { right: 18%; transform: translateX(2rem); background: var(--verdigris); color: var(--ivory); }
.token-stage.human .h-token, .token-stage.machine .m-token { transform: translateX(0) scale(1.18); }
.token-stage.human .m-token, .token-stage.machine .h-token { opacity: .25; transform: scale(.82); }

.mirrored-face {
  position: absolute;
  left: 50%;
  top: 17%;
  width: 13rem;
  height: 18rem;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(244,227,193,.78) 0 49%, rgba(47,111,102,.72) 50% 100%);
  clip-path: polygon(50% 0, 84% 18%, 74% 80%, 50% 100%, 26% 80%, 16% 18%);
  opacity: .35;
  transition: opacity .6s ease, filter .6s ease;
}
.token-stage.mask .mirrored-face { opacity: .9; filter: drop-shadow(0 0 1.5rem rgba(214,168,79,.55)); }

.reveal-room {
  grid-template-columns: 1fr .9fr;
  gap: 4rem;
  align-items: center;
  padding: 7rem 6vw;
  background: radial-gradient(circle at 28% 44%, rgba(214,168,79,.18), transparent 24rem), linear-gradient(135deg, var(--black), #22100e 50%, var(--black));
}

.mirror-arch {
  position: relative;
  height: min(72vh, 46rem);
  border: 2px solid var(--brass);
  clip-path: polygon(20% 0, 80% 0, 100% 22%, 100% 100%, 0 100%, 0 22%);
  background: linear-gradient(90deg, rgba(244,227,193,.13), rgba(47,111,102,.18), rgba(244,227,193,.08));
  overflow: hidden;
}

.split-portrait {
  position: absolute;
  inset: 9% 18%;
  background:
    linear-gradient(90deg, rgba(244,227,193,.8) 0 49.4%, var(--brass) 49.5% 50.5%, rgba(47,111,102,.75) 50.6% 100%),
    radial-gradient(circle at 50% 28%, rgba(17,16,21,.75) 0 8%, transparent 8.5%);
  clip-path: polygon(50% 0, 86% 16%, 78% 76%, 50% 100%, 22% 76%, 14% 16%);
  box-shadow: 0 0 4rem rgba(214,168,79,.18);
}

.closing-line { color: var(--brass); font-weight: 600; text-transform: uppercase; }

@keyframes drawUp { to { transform: scaleY(1); } }
@keyframes settleTitle { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes haloPulse { 0%,100% { transform: scale(1) rotate(-2deg); opacity: .65; } 50% { transform: scale(1.18) rotate(3deg); opacity: 1; } }
@keyframes slowRotate { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
  .club-nav { left: 1rem; right: 1rem; justify-content: center; flex-wrap: wrap; }
  .portrait-room, .tableau, .balcony-room, .reveal-room { grid-template-columns: 1fr; }
  .portrait-room { padding-inline: 1rem; padding-top: 9rem; }
  .portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; }
  .suspect-card.tall, .suspect-card.square, .suspect-card.strip, .suspect-card.oval { grid-column: span 1; grid-row: span 3; }
  .tableau { padding: 6rem 1rem; }
  .balcony-room, .reveal-room { padding-inline: 1rem; }
}

@media (max-width: 560px) {
  .club-nav a { display: none; }
  .proscenium { width: 92vw; }
  .portrait-grid { grid-template-columns: 1fr; }
  .large-token { width: 6rem; height: 6rem; font-size: 3rem; }
}