:root {
  --deep-sapphire: #132A6B;
  --temple-emerald: #007C72;
  --amethyst-shadow: #5B2C83;
  --garnet-clue: #A3163A;
  --moonstone-ivory: #F4EEDC;
  --ink-plum: #21142D;
  --soft-jade: #71D8B4;
  --display: "Nunito Sans", "Avenir Next Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  --micro: "M PLUS Rounded 1c", "Arial Rounded MT Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--deep-sapphire); color: var(--moonstone-ivory); }

body { font-family: var(--body); overflow-x: hidden; }

.riddle-path { width: 100%; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 8vh 7vw;
  border: 1px solid color-mix(in srgb, var(--soft-jade) 28%, transparent);
  border-radius: 42px;
  opacity: .35;
  pointer-events: none;
}

.chamber-opening { background: var(--deep-sapphire); }
.chamber-mirror { background: var(--moonstone-ivory); color: var(--ink-plum); }
.chamber-door { background: var(--temple-emerald); }
.chamber-clues { background: var(--ink-plum); }
.chamber-rest { background: var(--moonstone-ivory); color: var(--ink-plum); }

.wordmark {
  grid-column: 2 / 8;
  grid-row: 2 / 3;
  align-self: end;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .7em;
  color: var(--moonstone-ivory);
  font-size: clamp(1.5rem, 4vw, 4.8rem);
  white-space: nowrap;
}

.wordmark span {
  display: inline-block;
  transform: translateX(var(--scatter, 0)) translateY(var(--rise, 0));
  opacity: .05;
  transition: transform 1800ms cubic-bezier(.2, .8, .1, 1), opacity 1400ms ease;
}

.wordmark.aligned span { transform: translateX(0) translateY(0); opacity: 1; }
.wordmark span:nth-child(1) { --scatter: -5.5vw; --rise: 2vh; }
.wordmark span:nth-child(2) { --scatter: 2.4vw; --rise: -3vh; }
.wordmark span:nth-child(3) { --scatter: -1.8vw; --rise: 4vh; }
.wordmark span:nth-child(4) { --scatter: 5vw; --rise: 1vh; }
.wordmark span:nth-child(5) { --scatter: -3vw; --rise: -2vh; }
.wordmark span:nth-child(6) { --scatter: 7vw; --rise: 3vh; }

.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--micro);
  letter-spacing: .24em;
  text-transform: lowercase;
  font-size: .72rem;
  opacity: .62;
  margin: 0;
}

.chamber-line {
  font-size: clamp(1.1rem, 2.2vw, 2.15rem);
  line-height: 1.55;
  max-width: 22ch;
  margin: 0;
  font-weight: 500;
}

.opening-line { grid-column: 8 / 12; grid-row: 9 / 11; color: var(--soft-jade); }
.mirror-line { grid-column: 7 / 11; grid-row: 3 / 5; color: var(--amethyst-shadow); }
.door-line { grid-column: 2 / 6; grid-row: 9 / 11; color: var(--moonstone-ivory); }
.clues-line { grid-column: 8 / 12; grid-row: 10 / 12; color: var(--soft-jade); }
.rest-line { grid-column: 2 / 7; grid-row: 9 / 11; color: var(--amethyst-shadow); }

.chamber-opening > .vertical-label { grid-column: 11 / 12; grid-row: 2 / 5; color: var(--soft-jade); }
.chamber-door > .vertical-label { grid-column: 11 / 12; grid-row: 2 / 5; }
.chamber-clues > .vertical-label { grid-column: 2 / 3; grid-row: 2 / 5; color: var(--soft-jade); }

.flip-card { perspective: 1200px; min-width: 0; }
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  transform-style: preserve-3d;
  transition: transform 1100ms cubic-bezier(.2, .75, .16, 1), filter 800ms ease;
}

.flip-card:hover .card-inner, .flip-card.flipped .card-inner { transform: rotateY(180deg) rotateZ(.001deg); }
.flip-card.proximity .card-inner { filter: saturate(1.08); }

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 28px;
  backface-visibility: hidden;
  border: 2px solid currentColor;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink-plum) 18%, transparent);
}

.card-front { background: var(--moonstone-ivory); color: var(--amethyst-shadow); }
.card-back { background: var(--soft-jade); color: var(--ink-plum); transform: rotateY(180deg); padding: 1.2rem; }
.card-back p { font-family: var(--micro); font-size: clamp(.9rem, 1.4vw, 1.35rem); letter-spacing: .08em; line-height: 1.5; text-align: center; margin: 0; }

.opening-card { grid-column: 3 / 5; grid-row: 6 / 8; width: clamp(130px, 15vw, 210px); height: clamp(170px, 20vw, 270px); justify-self: start; transform: rotate(-4deg); }

.negative-keyhole { grid-column: 6 / 9; grid-row: 5 / 9; position: relative; opacity: .55; }
.negative-keyhole::before, .negative-keyhole::after { content: ""; position: absolute; background: var(--amethyst-shadow); border-radius: 32px; }
.negative-keyhole::before { width: 42%; height: 100%; left: 0; top: 0; }
.negative-keyhole::after { width: 42%; height: 100%; right: 0; top: 0; }

.emblem { width: 74%; height: 74%; fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.emblem circle { fill: var(--garnet-clue); stroke: none; }
.emblem.small { width: 62%; height: 62%; }

.mirror-card { width: clamp(145px, 18vw, 245px); height: clamp(190px, 23vw, 310px); }
.card-left { grid-column: 2 / 4; grid-row: 7 / 10; transform: rotate(3deg); }
.card-right { grid-column: 10 / 12; grid-row: 4 / 7; transform: rotate(-3deg); }
.mirror-gap { grid-column: 6 / 8; grid-row: 5 / 9; display: grid; place-items: center; color: var(--temple-emerald); }
.gap-line { width: 2px; height: 48vh; background: var(--temple-emerald); opacity: .28; border-radius: 99px; }

.node-pattern { position: absolute; inset: 20px; opacity: .25; }
.node-pattern i, .node-pattern b, .node-pattern span { position: absolute; display: block; border: 2px solid var(--temple-emerald); }
.node-pattern i { width: 18px; height: 18px; border-radius: 50%; }
.node-pattern i:nth-child(1) { left: 0; top: 0; }
.node-pattern i:nth-child(2) { right: 4px; bottom: 12px; }
.node-pattern b { width: 20px; height: 20px; right: 18px; top: 28px; }
.node-pattern span { width: 38px; height: 2px; left: 42%; bottom: 18px; border-width: 0; background: transparent; }

.door-emblem { grid-column: 4 / 10; grid-row: 3 / 9; display: grid; grid-template-columns: 1fr minmax(24px, 7vw) 1fr; align-items: stretch; min-height: 46vh; }
.door-half { position: relative; border: 2px solid var(--soft-jade); background: var(--amethyst-shadow); }
.door-left { border-radius: 999px 0 0 999px; transform-origin: right center; }
.door-right { border-radius: 0 999px 999px 0; transform-origin: left center; }
.door-gap { background: var(--temple-emerald); position: relative; }
.door-gap::after { content: ""; position: absolute; top: 23%; bottom: 23%; left: 50%; width: 4px; transform: translateX(-50%); background: var(--moonstone-ivory); border-radius: 10px; }
.door-half span { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--garnet-clue); top: 48%; }
.door-left span { right: 10%; }
.door-right span { left: 10%; }
.door-emblem.open .door-left { transform: rotateY(-15deg); }
.door-emblem.open .door-right { transform: rotateY(15deg); }
.door-card { grid-column: 9 / 11; grid-row: 8 / 11; width: clamp(120px, 14vw, 200px); height: clamp(130px, 15vw, 215px); transform: rotate(8deg); }
.paper-gate { width: 58%; height: 58%; border-radius: 50% 10px 10px 50%; border: 12px solid var(--temple-emerald); border-right-color: transparent; }

.clue-field { grid-column: 2 / 12; grid-row: 2 / 11; position: relative; }
.clue-tile { position: absolute; width: clamp(96px, 13vw, 168px); height: clamp(96px, 13vw, 168px); }
.tile-one { left: 16%; top: 13%; transform: rotate(-8deg); }
.tile-two { right: 12%; top: 5%; transform: rotate(5deg); }
.tile-three { left: 42%; top: 46%; transform: rotate(2deg); }
.tile-four { left: 3%; bottom: 2%; transform: rotate(7deg); }
.tile-mark { display: block; position: relative; width: 64%; height: 64%; }
.tile-mark.hook { border: 10px solid var(--amethyst-shadow); border-bottom-color: transparent; border-radius: 44% 44% 18px 18px; }
.tile-mark.pin::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%); background: var(--temple-emerald); border-radius: 999px; }
.tile-mark.pin::after { content: ""; position: absolute; left: 28%; right: 28%; top: 50%; height: 10px; transform: translateY(-50%); background: var(--garnet-clue); border-radius: 999px; }
.tile-mark.portal { border: 10px solid var(--deep-sapphire); border-left-color: transparent; border-radius: 50%; }
.tile-mark.ledge::before { content: ""; position: absolute; left: 5%; right: 5%; bottom: 18%; height: 12px; background: var(--amethyst-shadow); border-radius: 999px; }
.tile-mark.ledge::after { content: ""; position: absolute; left: 12%; bottom: 18%; width: 12px; height: 64%; background: var(--soft-jade); border-radius: 999px; }

.rest-symbol { grid-column: 3 / 11; grid-row: 3 / 6; display: flex; justify-content: center; gap: clamp(.45rem, 2vw, 2rem); align-items: flex-end; font-family: var(--display); font-weight: 900; letter-spacing: .12em; font-size: clamp(3rem, 11vw, 10rem); color: var(--deep-sapphire); }
.stone { display: inline-block; transition: transform 1200ms cubic-bezier(.19, 1, .22, 1); }
.rest-symbol.breathe .r-one, .rest-symbol.breathe .d-one { transform: translateY(-1.5vh); }
.rest-symbol.breathe .r-two, .rest-symbol.breathe .d-two { transform: translateY(1vh); }
.rest-symbol.breathe .i-one { transform: scaleY(1.08); color: var(--temple-emerald); }
.rest-symbol.breathe .l-one { transform: translateX(1.2vw); color: var(--amethyst-shadow); }
.rest-card { grid-column: 8 / 10; grid-row: 7 / 10; width: clamp(150px, 18vw, 255px); height: clamp(110px, 13vw, 185px); transform: rotate(-2deg); }
.moon-disc { width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--soft-jade); }
.rest-line-shape { position: absolute; width: 66%; height: 10px; bottom: 28%; background: var(--deep-sapphire); border-radius: 999px; }

.progress { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 10; display: grid; gap: .9rem; }
.dot { width: 11px; height: 11px; border: 1px solid var(--soft-jade); border-radius: 50%; background: transparent; padding: 0; transition: background 400ms ease, transform 400ms ease; }
.dot.active { background: var(--garnet-clue); transform: scale(1.45); border-color: var(--garnet-clue); }

@media (max-width: 760px) {
  .chamber::before { inset: 5vh 5vw; border-radius: 28px; }
  .wordmark { grid-column: 2 / 12; letter-spacing: .32em; }
  .opening-card { grid-column: 2 / 6; grid-row: 5 / 8; }
  .opening-line, .mirror-line, .door-line, .clues-line, .rest-line { grid-column: 2 / 11; grid-row: 10 / 12; }
  .card-left { grid-column: 2 / 6; grid-row: 6 / 9; }
  .card-right { grid-column: 8 / 12; grid-row: 3 / 6; }
  .door-emblem { grid-column: 2 / 12; grid-row: 3 / 8; }
  .door-card { grid-column: 7 / 11; grid-row: 8 / 10; }
  .progress { right: 1rem; }
  .rest-symbol { grid-column: 2 / 12; gap: .25rem; letter-spacing: .03em; }
}