:root {
  --walnut: #1B1714;
  --olive: #4A5140;
  --brass: #B08A4A;
  --mauve: #A77C83;
  --parchment: #E8DDC6;
  --oxblood: #5B242C;
  --heading: "Alegreya Sans", "Trebuchet MS", sans-serif;
  --body: "Source Sans 3", "Segoe UI", sans-serif;
  --ornament: "Fraunces", Georgia, serif;
  --source-sans-design-token: "3* 3**";
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--body);
  background:
    radial-gradient(circle at 20% 15%, rgba(176,138,74,.18), transparent 28%),
    radial-gradient(circle at 74% 70%, rgba(167,124,131,.13), transparent 34%),
    linear-gradient(135deg, var(--walnut), #120f0d 58%, #231912);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(circle at 10px 10px, rgba(232,221,198,.07) 1px, transparent 1.6px) 0 0 / 34px 34px,
    radial-gradient(circle at 22px 20px, rgba(176,138,74,.08) 1px, transparent 1.8px) 0 0 / 68px 58px,
    repeating-linear-gradient(60deg, transparent 0 15px, rgba(74,81,64,.18) 15px 17px, transparent 17px 32px);
}

.grain {
  position: fixed;
  inset: -20%;
  z-index: 30;
  pointer-events: none;
  opacity: .18;
  background-image:
    radial-gradient(circle, rgba(232,221,198,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(27,23,20,.7) 0 1px, transparent 1.7px);
  background-size: 17px 19px, 23px 29px;
  animation: dustDrift 14s steps(8) infinite;
  mix-blend-mode: overlay;
}

.lamp {
  position: fixed;
  width: 52vmax;
  height: 52vmax;
  left: var(--lamp-x, 50%);
  top: var(--lamp-y, 45%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle, rgba(176,138,74,.2), rgba(167,124,131,.09) 35%, transparent 68%);
  filter: blur(4px);
  transition: left .45s ease, top .45s ease;
}

.salon, .room { position: fixed; inset: 0; }
.salon { z-index: 5; }

.room {
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 56px);
  opacity: 0;
  transform: scale(.96) rotate(-.4deg);
  pointer-events: none;
  transition: opacity .85s ease, transform .85s cubic-bezier(.2,.75,.1,1);
}

.room.is-active { opacity: 1; transform: scale(1) rotate(0deg); pointer-events: auto; }

.wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 0 9px, rgba(176,138,74,.16) 10px 11px, transparent 12px) 0 0 / 74px 64px,
    repeating-conic-gradient(from 30deg, rgba(74,81,64,.2) 0 12deg, transparent 12deg 30deg) 50% / 120px 120px;
  opacity: .45;
}

h1, h2 { font-family: var(--heading); margin: 0; line-height: .9; letter-spacing: -.035em; }
h1 { font-size: clamp(4rem, 12vw, 10rem); color: var(--walnut); text-shadow: 0 1px 0 rgba(176,138,74,.45); }
h2 { font-size: clamp(3.5rem, 8.5vw, 8rem); max-width: 820px; }
p { font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.55; margin: 1rem 0 0; }

.honeycomb-stage { position: relative; width: min(92vw, 1180px); height: min(82vh, 760px); }

.hex {
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  position: absolute;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--parchment);
}

.central {
  width: clamp(330px, 46vw, 650px);
  height: clamp(290px, 40vw, 570px);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(145deg, rgba(176,138,74,.35), rgba(74,81,64,.16));
  filter: drop-shadow(0 38px 50px rgba(0,0,0,.55));
}

.trace, .route-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--brass); stroke-width: 1.3; filter: drop-shadow(0 0 8px rgba(176,138,74,.45)); }
.trace path { stroke-dasharray: 350; stroke-dashoffset: 350; animation: drawHex 2.2s ease forwards .25s; }

.hex-inner {
  position: absolute;
  inset: 18px;
  clip-path: inherit;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 56px;
}

.parchment { background: linear-gradient(135deg, var(--parchment), #d6c49d 54%, #bba36e); color: var(--walnut); }
.parchment::before, .room-copy::before, .route-panel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 4px, rgba(91,36,44,.06) 4px 5px); opacity: .7; pointer-events: none; }

.double-p { display: flex; gap: 2px; font-family: var(--ornament); font-size: clamp(2rem, 5vw, 5rem); color: var(--oxblood); margin-bottom: -8px; }
.double-p span:first-child { transform: scaleX(-1); }

.satellite {
  width: clamp(130px, 15vw, 205px);
  height: clamp(116px, 13vw, 180px);
  background:
    radial-gradient(circle at 50% 50%, rgba(176,138,74,.16), transparent 52%),
    repeating-linear-gradient(45deg, rgba(232,221,198,.08) 0 8px, transparent 8px 16px),
    var(--olive);
  cursor: pointer;
  font-family: var(--heading);
  font-size: clamp(1.3rem, 2.2vw, 2.1rem);
  letter-spacing: -.02em;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), background .6s ease;
}
.satellite::before { content: ""; position: absolute; inset: 9px; clip-path: inherit; border: 1px solid rgba(176,138,74,.6); background: linear-gradient(90deg, transparent, rgba(176,138,74,.22), transparent); transform: rotate(0deg); transition: transform .8s ease; }
.satellite::after { content: attr(data-room); position: absolute; inset: 0; clip-path: inherit; background: conic-gradient(from 0deg, transparent, rgba(176,138,74,.42), transparent 33%); opacity: 0; transition: opacity .4s ease; }
.satellite:hover::before, .satellite.is-unlocked::before { transform: rotate(8deg); }
.satellite:hover::after, .satellite.is-unlocked::after { opacity: .35; animation: crawl 1.6s linear infinite; }
.satellite span, .satellite em { position: relative; z-index: 1; }
.satellite em { font-family: var(--ornament); font-size: .65em; color: var(--brass); position: absolute; bottom: 26%; right: 24%; opacity: 0; transition: opacity .35s ease; }
.satellite:hover em, .satellite.is-unlocked em { opacity: 1; }
.cipher { left: 13%; top: 8%; }
.cabinet { right: 13%; top: 9%; }
.maze { right: 2%; top: 39%; }
.mirror { right: 16%; bottom: 5%; }
.vault { left: 16%; bottom: 5%; }
.parlor { left: 2%; top: 39%; }

.pin-nav { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: 18px; }
.pin { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--brass); background: var(--walnut); box-shadow: inset 0 0 0 6px rgba(176,138,74,.18), 0 0 24px rgba(176,138,74,.25); color: transparent; cursor: pointer; transition: transform .35s ease, background .35s ease; }
.pin span { display: none; }
.pin.is-active { background: var(--brass); transform: scale(1.25); }

.chamber { background: radial-gradient(circle at 30% 30%, rgba(176,138,74,.15), transparent 34%), linear-gradient(120deg, rgba(74,81,64,.76), rgba(27,23,20,.94)); }
.room-copy, .route-panel, .final-text { position: relative; z-index: 2; }
.left-card { width: min(46vw, 650px); justify-self: start; margin-left: 5vw; padding: 44px; background: rgba(27,23,20,.58); border: 1px solid rgba(176,138,74,.55); box-shadow: 0 26px 60px rgba(0,0,0,.4); }
.seal { font-family: var(--ornament); color: var(--brass); display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid currentColor; margin-bottom: 18px; background: rgba(91,36,44,.45); }

.ring-clues { position: absolute; inset: 0; }
.clue { background: linear-gradient(135deg, rgba(232,221,198,.82), rgba(167,124,131,.72)); color: var(--walnut); font-family: var(--ornament); font-size: clamp(1rem, 2vw, 2rem); border: 1px solid var(--brass); filter: drop-shadow(0 25px 28px rgba(0,0,0,.38)); }
.clue.big { width: 290px; height: 255px; right: 13%; top: 15%; }
.clue.slim { width: 170px; height: 150px; right: 31%; bottom: 13%; background: var(--oxblood); color: var(--parchment); }
.clue.small { width: 150px; height: 132px; left: 15%; bottom: 11%; }
.clue.tall { width: 220px; height: 195px; right: -3%; bottom: 34%; }
.clue.empty { width: 210px; height: 185px; left: 42%; top: 5%; background: transparent; border: 1px dashed rgba(176,138,74,.65); }
.thread { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); transform-origin: left; opacity: .55; }
.thread-a { width: 54vw; top: 37%; left: 25%; transform: rotate(-18deg); }
.thread-b { width: 42vw; bottom: 30%; left: 39%; transform: rotate(23deg); }

.oxblood-room { background: radial-gradient(circle at 70% 20%, rgba(167,124,131,.17), transparent 32%), linear-gradient(135deg, var(--oxblood), var(--walnut) 62%); }
.route-panel { width: min(74vw, 900px); padding: clamp(46px, 8vw, 92px); text-align: center; }
.route-trace path { stroke-dasharray: 1860; stroke-dashoffset: 1860; animation: drawRoute 5s ease-in-out infinite alternate; }
.cipher-wheel { position: absolute; width: 360px; height: 360px; left: 4vw; top: 9vh; border-radius: 50%; border: 1px solid rgba(176,138,74,.55); animation: spinWheel 28s linear infinite; opacity: .75; }
.cipher-wheel span { position: absolute; left: 50%; top: 50%; font-family: var(--ornament); color: var(--brass); transform: rotate(calc(var(--i) * 60deg)) translateY(-160px); }
.cipher-wheel span:nth-child(1) { --i: 0; }.cipher-wheel span:nth-child(2) { --i: 1; }.cipher-wheel span:nth-child(3) { --i: 2; }.cipher-wheel span:nth-child(4) { --i: 3; }.cipher-wheel span:nth-child(5) { --i: 4; }.cipher-wheel span:nth-child(6) { --i: 5; }
.pattern-strip { position: absolute; right: 0; bottom: 0; display: flex; gap: 10px; opacity: .55; }
.pattern-strip i { width: 56px; height: 180px; background: repeating-linear-gradient(0deg, var(--brass) 0 8px, transparent 8px 17px); transform: skewX(-18deg); }

.final-room { background: radial-gradient(circle at 50% 50%, rgba(176,138,74,.2), transparent 35%), linear-gradient(160deg, #100d0b, var(--walnut)); }
.final-cabinet { position: relative; width: min(92vw, 1050px); height: min(76vh, 620px); }
.keyhole { width: 360px; height: 315px; top: 50%; background: linear-gradient(145deg, var(--olive), #242920); border: 1px solid var(--brass); font-family: var(--ornament); font-size: 10rem; color: var(--brass); filter: drop-shadow(0 30px 45px rgba(0,0,0,.5)); }
.left-key { left: 18%; transform: translate(-50%, -50%) scaleX(-1); }
.right-key { right: 18%; transform: translate(50%, -50%); }
.keyhole::after { content: ""; position: absolute; width: 44px; height: 120px; border-radius: 24px 24px 8px 8px; background: var(--walnut); box-shadow: 0 -48px 0 22px var(--walnut); }
.keyhole span { opacity: .12; }
.final-text { position: absolute; left: 50%; top: 50%; width: min(620px, 66vw); transform: translate(-50%, -50%); text-align: center; padding: 44px; background: rgba(91,36,44,.66); border: 1px solid rgba(176,138,74,.65); }

@keyframes drawHex { to { stroke-dashoffset: 0; } }
@keyframes drawRoute { 45%, 100% { stroke-dashoffset: 0; } }
@keyframes crawl { to { transform: rotate(360deg); } }
@keyframes spinWheel { to { transform: rotate(360deg); } }
@keyframes dustDrift { 50% { transform: translate3d(3%, -2%, 0); } 100% { transform: translate3d(-2%, 2%, 0); } }

@media (max-width: 820px) {
  html, body { overflow: auto; }
  .room { position: relative; min-height: 100vh; overflow: hidden; }
  .pin-nav { right: 12px; }
  .honeycomb-stage { height: 720px; }
  .satellite { width: 124px; height: 108px; font-size: 1.2rem; }
  .left-card { width: calc(100vw - 72px); margin: 0; padding: 28px; }
  .clue.big { right: 2%; top: 55%; }
  .clue.tall, .clue.empty { display: none; }
  .route-panel { width: 92vw; padding: 28px; }
  .cipher-wheel { width: 220px; height: 220px; opacity: .35; }
  .cipher-wheel span { transform: rotate(calc(var(--i) * 60deg)) translateY(-98px); }
  .keyhole { width: 210px; height: 185px; font-size: 6rem; }
}