:root {
  --obsidian: #070405;
  --oxblood: #5A0E17;
  --vermilion: #D63A18;
  --gold: #B98A2E;
  --parchment: #F1D9A5;
  --emerald: #0B6B52;
  --mirror: #6C6870;
  --title: "Cinzel Decorative", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --label: "Josefin Sans", "Avenir Next", Futura, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --mono-use: sparingly;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--obsidian); color: var(--parchment); overflow: hidden; }

body {
  font-family: var(--body);
  background:
    radial-gradient(circle at 50% 8%, rgba(185, 138, 46, .13), transparent 28%),
    radial-gradient(circle at 76% 58%, rgba(214, 58, 24, .14), transparent 25%),
    linear-gradient(180deg, #100607 0%, var(--obsidian) 55%, #020101 100%);
}

button { font: inherit; color: inherit; }

.rain, .marble, .shaft { position: fixed; inset: 0; pointer-events: none; }

.rain {
  z-index: 1;
  opacity: .42;
  background-image: repeating-linear-gradient(112deg, transparent 0 16px, rgba(108, 104, 112, .35) 17px 18px, transparent 19px 34px), repeating-linear-gradient(112deg, transparent 0 59px, rgba(185, 138, 46, .28) 60px 61px, transparent 62px 100px);
  animation: rainDrift 1.9s linear infinite;
}

.marble {
  z-index: 0;
  opacity: .28;
  background:
    linear-gradient(27deg, transparent 0 46%, rgba(108, 104, 112, .22) 47%, transparent 48% 100%),
    linear-gradient(152deg, transparent 0 62%, rgba(241, 217, 165, .08) 63%, transparent 64% 100%);
  filter: blur(.2px);
}

.itinerary { position: relative; z-index: 2; height: 100vh; transform: translateY(0); transition: transform 1.25s cubic-bezier(.7, 0, .12, 1); }

.floor {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8vh 12vw;
  isolation: isolate;
}

.floor::before {
  content: "";
  position: absolute;
  inset: 6vh 9vw;
  border: 1px solid rgba(185, 138, 46, .62);
  outline: 1px solid rgba(185, 138, 46, .18);
  outline-offset: 10px;
  clip-path: polygon(7% 0, 93% 0, 100% 11%, 100% 89%, 93% 100%, 7% 100%, 0 89%, 0 11%);
  z-index: -1;
}

.floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(185, 138, 46, .10) 0 1px, transparent 2px 22px);
  opacity: .3;
  z-index: -2;
}

h1, h2, .chapter { font-family: var(--title); font-weight: 700; margin: 0; text-shadow: 0 0 22px rgba(214, 58, 24, .22); }
h1 { font-size: clamp(4rem, 12vw, 11rem); letter-spacing: .035em; line-height: .78; }
h2 { font-size: clamp(2.3rem, 6vw, 6.8rem); line-height: .86; color: var(--parchment); }
p { font-size: clamp(1.05rem, 1.65vw, 1.55rem); line-height: 1.5; }

.chapter {
  position: absolute;
  top: 9vh;
  left: 10vw;
  font-size: clamp(5rem, 17vw, 18rem);
  color: rgba(185, 138, 46, .16);
}

.awning {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(74vw, 920px);
  padding: 20px 0 18px;
  text-align: center;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .38em;
  color: var(--gold);
  background: repeating-linear-gradient(90deg, var(--oxblood) 0 42px, #3a0710 43px 84px);
  border: 1px solid var(--gold);
  box-shadow: 0 28px 60px rgba(0,0,0,.7);
}

.sunburst {
  position: absolute;
  top: 11vh;
  width: min(72vw, 780px);
  aspect-ratio: 2.5 / 1;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: repeating-conic-gradient(from 270deg at 50% 100%, transparent 0 6deg, rgba(185,138,46,.72) 7deg 8deg, transparent 9deg 13deg);
  mask-image: radial-gradient(ellipse at 50% 100%, black 0 57%, transparent 58%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, black 0 57%, transparent 58%);
}

.sunburst span::before, .sunburst span::after {
  content: "";
  position: absolute;
  bottom: 6%;
  width: 34%;
  height: 62%;
  border-top: 5px solid var(--gold);
  border-radius: 55% 55% 0 0;
}
.sunburst span::before { left: 18%; transform: rotate(-18deg); }
.sunburst span::after { right: 18%; transform: rotate(18deg); }

.elevator-door {
  position: relative;
  width: min(75vw, 820px);
  min-height: 58vh;
  padding: 16vh 5vw 5vh;
  text-align: center;
  background: linear-gradient(90deg, #15080a, #21100d 49%, #0c0505 50%, #21100d 51%, #120607), linear-gradient(180deg, rgba(185,138,46,.23), transparent);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 10px rgba(185,138,46,.14), 0 40px 90px rgba(0,0,0,.72);
}

.door-lines { position: absolute; inset: 14px; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(185,138,46,.2) 35px 36px); }
.invitation { max-width: 740px; margin: 3vh auto 0; color: rgba(241,217,165,.86); }
.brass-plaque, .panel-title, .needle { font-family: var(--label); text-transform: uppercase; letter-spacing: .22em; }
.brass-plaque { position: absolute; bottom: 8vh; color: var(--gold); font-size: .78rem; }

.elevator-panel {
  position: fixed;
  z-index: 8;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  padding: 16px 12px;
  background: linear-gradient(150deg, #4e3714, var(--gold), #32200b);
  border: 1px solid var(--parchment);
  box-shadow: inset 0 0 0 3px rgba(7,4,5,.55), 0 20px 60px rgba(0,0,0,.6);
  pointer-events: auto;
}
.panel-title { color: var(--obsidian); font-size: .57rem; text-align: center; margin-bottom: 10px; }
.floor-button {
  display: block;
  width: 46px;
  height: 46px;
  margin: 8px auto;
  border-radius: 50%;
  border: 1px solid #2b1b08;
  background: radial-gradient(circle, #211207, #070405);
  color: var(--parchment);
  font-family: var(--label);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, color .25s;
}
.floor-button.active { color: var(--gold); box-shadow: 0 0 18px rgba(241,217,165,.45), inset 0 0 10px rgba(185,138,46,.9); }
.floor-button:hover { transform: scale(1.08); }
.needle { margin-top: 12px; text-align: center; color: var(--obsidian); font-size: .86rem; }

.shaft { z-index: 6; }
.grille {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  background: repeating-linear-gradient(90deg, rgba(185,138,46,.88) 0 4px, rgba(7,4,5,.78) 5px 28px), linear-gradient(180deg, transparent, rgba(214,58,24,.12));
  transition: transform 1.1s cubic-bezier(.75,0,.15,1);
}
.grille.left { left: 0; transform-origin: left; }
.grille.right { right: 0; transform-origin: right; }
body.open .grille.left { transform: translateX(-92%); }
body.open .grille.right { transform: translateX(92%); }
.gate-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 26px;
  border: 1px solid var(--gold);
  background: rgba(7,4,5,.8);
  transition: opacity .6s, transform .6s;
  pointer-events: auto;
}
body.open .gate-lock { opacity: 0; transform: translate(-50%, -50%) scale(.86); pointer-events: none; }
.gate-lock span { font-family: var(--label); text-transform: uppercase; letter-spacing: .3em; color: var(--mirror); font-size: .75rem; }
#summonButton {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 2px solid var(--parchment);
  background: radial-gradient(circle at 35% 28%, var(--parchment), var(--gold) 42%, #55350b 72%);
  color: var(--obsidian);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  cursor: pointer;
  animation: pulse 1.8s ease-in-out infinite;
}

.plaque, .curtain-copy, .exit-card {
  max-width: 820px;
  padding: clamp(32px, 5vw, 70px);
  background: linear-gradient(135deg, rgba(90,14,23,.88), rgba(7,4,5,.9));
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 8px rgba(185,138,46,.08), 0 28px 80px rgba(0,0,0,.62);
}
.wide { margin-left: 10vw; justify-self: start; }
.narrow { margin-right: 10vw; justify-self: end; max-width: 640px; }
.red-glove { position: absolute; right: 18vw; bottom: 18vh; width: 150px; height: 54px; background: var(--vermilion); border-radius: 60% 20% 18% 60%; box-shadow: -18px 18px 0 #280408; transform: rotate(-12deg); }
.red-glove::before { content:""; position:absolute; left:-36px; top:11px; width:52px; height:24px; background:var(--vermilion); border-radius:30px 0 0 30px; }
.keys { position:absolute; left:9vw; bottom:12vh; display:flex; gap:14px; transform: rotate(-6deg); }
.keys span { padding: 16px 18px; background: var(--gold); color: var(--obsidian); font-family: var(--label); text-transform: uppercase; letter-spacing:.12em; clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%); }

.contract-paper {
  position: relative;
  max-width: 760px;
  padding: 54px;
  background: var(--parchment);
  color: #1e0807;
  box-shadow: 0 40px 90px rgba(0,0,0,.66), inset 0 0 40px rgba(185,138,46,.3);
  transform: rotate(-1.2deg);
}
.contract-paper::before { content:"SERIAL DQ-006-013"; font-family:var(--mono); color:rgba(90,14,23,.55); letter-spacing:.18em; }
.contract-paper h2 { color: var(--oxblood); text-shadow: none; }
.stamp, .reset { border: 1px solid var(--gold); background: var(--oxblood); color: var(--parchment); padding: 14px 22px; font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; }
.contract-paper.sealed::after { content:"AGREED"; position:absolute; right:42px; bottom:34px; color:var(--vermilion); border:4px double var(--vermilion); font-family:var(--label); font-size:2rem; padding:8px 14px; transform:rotate(-14deg); opacity:.8; }
.cocktail { position:absolute; right:20vw; top:22vh; width:120px; height:150px; border:3px solid var(--gold); clip-path: polygon(0 0, 100% 0, 57% 54%, 57% 86%, 78% 100%, 22% 100%, 43% 86%, 43% 54%); background: linear-gradient(180deg, rgba(11,107,82,.55), transparent 45%); }

.wheel { width:min(54vw, 520px); aspect-ratio:1; border-radius:50%; border:8px double var(--gold); background: repeating-conic-gradient(from 0deg, var(--oxblood) 0 15deg, var(--obsidian) 16deg 30deg, var(--emerald) 31deg 36deg); box-shadow:0 0 55px rgba(185,138,46,.28); animation: spin 18s linear infinite; }
.wheel span { position:absolute; }
.roulette .wheel { position: absolute; left: 13vw; bottom: 11vh; }

.mirror-frame {
  position: relative;
  width: min(68vw, 720px);
  min-height: 56vh;
  padding: 10vh 6vw;
  text-align: center;
  border: 16px ridge var(--gold);
  background: linear-gradient(125deg, rgba(108,104,112,.72), rgba(7,4,5,.92) 44%, rgba(11,107,82,.3));
  overflow: hidden;
}
.mirror-frame::after { content:""; position:absolute; inset:-20%; background:linear-gradient(100deg, transparent 35%, rgba(241,217,165,.28) 45%, transparent 56%); transform:translateX(-80%); transition:transform .8s; }
.mirror-frame.flipped::after { transform:translateX(80%); }
.back-copy { display:none; color:var(--gold); }
.mirror-frame.flipped .front-copy { display:none; }
.mirror-frame.flipped .back-copy { display:block; }
.smoke-serpent { position:absolute; right:16vw; top:18vh; width:240px; height:420px; border-left:3px solid rgba(108,104,112,.45); border-radius:50%; filter:blur(1px); animation: smoke 5s ease-in-out infinite; }

.furnace { background: radial-gradient(circle at 50% 100%, rgba(214,58,24,.26), transparent 48%); }
.curtain-copy { background: repeating-linear-gradient(90deg, #3b0710 0 38px, var(--oxblood) 39px 76px); text-align:center; }
.matchbook { position:absolute; left:18vw; bottom:16vh; width:130px; height:90px; background:var(--parchment); border-bottom:24px solid var(--oxblood); transform:rotate(8deg); }
.matchbook span { position:absolute; left:52px; top:-74px; width:25px; height:82px; background:var(--gold); }
.matchbook span::before { content:""; position:absolute; top:-26px; left:-11px; width:48px; height:48px; background:radial-gradient(circle, var(--parchment) 0 18%, var(--vermilion) 34%, transparent 68%); border-radius:50% 50% 45% 45%; animation:flicker .9s infinite; }

.exit-card { text-align:center; background:linear-gradient(140deg, rgba(11,107,82,.82), rgba(7,4,5,.94)); }

.floor h2, .floor p, .floor button, .keys, .red-glove, .cocktail, .wheel, .mirror-frame, .matchbook { opacity: .22; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.floor.current h2, .floor.current p, .floor.current button, .floor.current .keys, .floor.current .red-glove, .floor.current .cocktail, .floor.current .wheel, .floor.current .mirror-frame, .floor.current .matchbook { opacity: 1; transform: translateY(0); }

@keyframes rainDrift { to { background-position: 0 120px, 0 180px; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 12px rgba(185,138,46,.5); } 50% { box-shadow: 0 0 36px rgba(241,217,165,.78); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes smoke { 0%,100% { transform: translateY(0) skewX(-8deg); opacity:.45; } 50% { transform: translateY(-28px) skewX(12deg); opacity:.75; } }
@keyframes flicker { 0%,100% { transform:scale(1) rotate(-4deg); } 50% { transform:scale(1.18) rotate(7deg); } }

@media (max-width: 760px) {
  .elevator-panel { right: 8px; width: 64px; padding: 10px 6px; }
  .floor-button { width: 34px; height: 34px; margin: 6px auto; }
  .floor { padding: 9vh 20vw 8vh 7vw; }
  .floor::before { inset: 5vh 17vw 5vh 4vw; }
  .wide, .narrow { margin: 0; }
  .keys, .red-glove, .cocktail { display: none; }
}