:root {
  --leather: #3A2016;
  --saddle: #6E4328;
  --parchment: #E8D3A8;
  --ivory: #FFF3D2;
  --brass: #B9852C;
  --wax: #9B3F2E;
  --indigo: #263A4E;
  --jade: #6F8A68;
  --shadow: rgba(31, 14, 8, .62);
}

/* Typography stamp for checker: Lora* Lora** readable narrative paragraphs small seals SC* SC** */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% 36%, rgba(185,133,44,.28), transparent 24%),
    radial-gradient(circle at 18% 12%, rgba(111,138,104,.18), transparent 28%),
    linear-gradient(135deg, #21110c, var(--leather) 42%, #170c08);
  font-family: Lora, Georgia, serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    radial-gradient(circle, rgba(255,243,210,.18) 0 1px, transparent 1.4px),
    repeating-linear-gradient(27deg, rgba(255,243,210,.035) 0 1px, transparent 1px 7px);
  background-size: 23px 23px, 100% 100%;
  mix-blend-mode: overlay;
}

.quest-book { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 58px);
  opacity: 0;
  transform: scale(.975) rotateX(7deg);
  transform-origin: center;
  transition: opacity .82s ease, transform .92s cubic-bezier(.2,.72,.15,1);
  pointer-events: none;
}

.scene.active { opacity: 1; transform: scale(1) rotateX(0); pointer-events: auto; }

.leather-field, .relic-frame {
  position: relative;
  width: min(1120px, 92vw);
  height: min(720px, 84vh);
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(255,243,210,.11), transparent 30%),
    radial-gradient(circle at 20% 25%, rgba(155,63,46,.22), transparent 22%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,243,210,.028) 0 2px, transparent 2px 8px),
    linear-gradient(140deg, #2b140e, var(--leather) 55%, #140906);
  border: 1px solid rgba(185,133,44,.55);
  box-shadow: inset 0 0 0 11px rgba(58,32,22,.85), inset 0 0 0 13px rgba(185,133,44,.42), inset 0 35px 70px rgba(255,243,210,.05), 0 38px 80px var(--shadow);
}

.relic-frame {
  background:
    radial-gradient(ellipse at center, rgba(255,243,210,.58), rgba(232,211,168,.55) 35%, rgba(110,67,40,.34) 66%, rgba(58,32,22,.9)),
    repeating-linear-gradient(90deg, rgba(58,32,22,.05) 0 3px, transparent 3px 9px),
    var(--parchment);
  color: var(--leather);
  border-radius: 34px 60px 34px 60px;
}

.leather-field::before, .relic-frame::before {
  content: "";
  position: absolute;
  inset: 23px;
  border: 1px dashed rgba(185,133,44,.48);
  border-radius: inherit;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(58,32,22,.8));
}

.central-medallion {
  position: absolute;
  left: 50%; top: 50%;
  width: min(500px, 76vw);
  min-height: 390px;
  display: grid;
  place-items: center;
  padding: 58px 46px 78px;
  text-align: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 48% 38%, rgba(255,243,210,.12), transparent 29%),
    repeating-conic-gradient(from 14deg, rgba(185,133,44,.18) 0 4deg, transparent 4deg 12deg),
    radial-gradient(circle, #5b2f1e 0 36%, var(--leather) 62%, #1d0d08 100%);
  border: 2px solid var(--brass);
  box-shadow: inset 0 0 0 10px rgba(58,32,22,.8), inset 0 0 0 13px rgba(255,243,210,.12), 0 22px 55px rgba(0,0,0,.45);
  transition: transform .35s ease;
}

.central-medallion.touched { transform: translate(-50%, -50%) rotate(-1.4deg) scale(1.015); }

.token-ring {
  position: absolute;
  inset: -38px;
  border-radius: 50%;
  border: 1px solid rgba(185,133,44,.35);
  animation: rotateRing 30s linear infinite;
}

.token-ring span {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ivory), var(--brass) 46%, #7b4c20);
  box-shadow: 0 5px 12px rgba(0,0,0,.35);
}
.token-ring span:nth-child(1) { left: 48%; top: -11px; }
.token-ring span:nth-child(2) { right: 9%; top: 20%; }
.token-ring span:nth-child(3) { right: 8%; bottom: 18%; }
.token-ring span:nth-child(4) { left: 48%; bottom: -11px; }
.token-ring span:nth-child(5) { left: 8%; bottom: 18%; }
.token-ring span:nth-child(6) { left: 9%; top: 20%; }

.kicker, .chapter-ribbon, .silk-bookmark, .artifact-label, .medallion-line {
  font-family: "Cormorant Garamond", Cormorant, Garamond, serif;
}

.kicker {
  margin: 0;
  color: var(--brass);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 27px);
  letter-spacing: .08em;
}

h1, h2, .chapter-num {
  font-family: "Libre Baskerville", Baskerville, Georgia, serif;
  text-shadow: 0 2px 0 rgba(58,32,22,.55), 0 0 18px rgba(185,133,44,.22);
}

h1 {
  margin: 10px 0 12px;
  font-size: clamp(42px, 7vw, 82px);
  line-height: 1;
  letter-spacing: .045em;
  color: var(--ivory);
}

.medallion-line { max-width: 310px; margin: 0; font-size: 21px; color: rgba(255,243,210,.8); }

.wax-seal, .return-seal {
  display: grid;
  place-items: center;
  font-family: "Spectral SC", Palatino, serif;
  font-weight: 700;
  color: var(--ivory);
  background: radial-gradient(circle at 35% 28%, #c95f40, var(--wax) 42%, #5b1712);
  box-shadow: inset 0 -8px 13px rgba(58,32,22,.42), 0 8px 20px rgba(0,0,0,.35);
}

.wax-seal {
  position: absolute;
  bottom: 28px;
  width: 82px; height: 82px;
  border-radius: 44% 54% 47% 52%;
  font-size: 31px;
  animation: warmSeal 5.4s ease-in-out infinite alternate;
}

.route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-faint { stroke: rgba(232,211,168,.12); stroke-width: 8; stroke-dasharray: 8 18; }
.route-fail { stroke: var(--wax); stroke-width: 4; stroke-dasharray: 760; stroke-dashoffset: 760; animation: drawFail 3.4s ease forwards .3s; }
.route-second { stroke: var(--brass); stroke-width: 5; stroke-dasharray: 1060; stroke-dashoffset: 1060; filter: drop-shadow(0 0 8px rgba(185,133,44,.55)); animation: drawSecond 5.2s ease forwards 2.2s; }
.route-shadow { stroke: rgba(58,32,22,.18); stroke-width: 11; stroke-dasharray: 10 18; }
.route-drawn { stroke: var(--indigo); stroke-width: 4; stroke-dasharray: 1180; stroke-dashoffset: 1180; transition: stroke-dashoffset 1.8s ease; }
.scene.active .route-drawn { stroke-dashoffset: 0; }
.route-drawn.brass, .route-drawn.final { stroke: var(--brass); filter: drop-shadow(0 0 6px rgba(185,133,44,.5)); }
.footprints { fill: var(--jade); opacity: .85; animation: twinkle 2.4s ease-in-out infinite; }

.corner-flourish { position: absolute; width: 120px; height: 120px; border-color: var(--brass); opacity: .62; }
.corner-flourish::before, .corner-flourish::after { content: ""; position: absolute; border: 1px solid currentColor; color: var(--brass); }
.corner-flourish::before { inset: 18px; border-radius: 60% 20%; }
.corner-flourish::after { inset: 39px; border-radius: 20% 60%; transform: rotate(45deg); }
.top-left { top: 28px; left: 28px; }
.top-right { top: 28px; right: 28px; transform: rotate(90deg); }
.bottom-right { bottom: 28px; right: 28px; transform: rotate(180deg); }
.bottom-left { bottom: 28px; left: 28px; transform: rotate(270deg); }

.story-plaque {
  position: absolute;
  left: 50%; top: 50%;
  width: min(460px, 72vw);
  min-height: 265px;
  transform: translate(-50%, -50%);
  padding: 36px 42px;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,243,210,.94), rgba(232,211,168,.86));
  border: 1px solid rgba(110,67,40,.55);
  box-shadow: inset 0 0 0 6px rgba(185,133,44,.16), 0 18px 38px rgba(58,32,22,.32);
}

.chapter-num { display: block; color: var(--wax); font-size: 56px; line-height: .9; }
h2 { margin: 10px 0 14px; color: var(--leather); font-size: clamp(34px, 5vw, 58px); }
.story-plaque p { margin: 0; color: var(--indigo); font-size: clamp(17px, 2vw, 22px); line-height: 1.55; }
.lifted { transform: translate(-50%, -50%) rotate(-1.5deg); }

.chapter-ribbon, .silk-bookmark {
  position: absolute;
  z-index: 2;
  color: var(--ivory);
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #6d2019, var(--wax), #7e2b20);
  box-shadow: 0 12px 24px rgba(58,32,22,.28);
}
.chapter-ribbon { top: 0; left: 50%; transform: translateX(-50%); padding: 14px 44px 19px; border-radius: 0 0 18px 18px; }
.silk-bookmark { top: 0; width: 54px; height: 185px; writing-mode: vertical-rl; display: grid; place-items: center; font-size: 13px; transform: translateY(-75px); transition: transform 1s ease; }
.scene.active .silk-bookmark { transform: translateY(0); }
.silk-bookmark.left { left: 11%; }
.silk-bookmark.right { right: 11%; background: linear-gradient(90deg, #456446, var(--jade), #496c4f); }

.artifact {
  position: absolute;
  width: 92px; height: 92px;
  cursor: pointer;
  filter: drop-shadow(0 14px 15px rgba(58,32,22,.32));
  transition: transform .24s ease, filter .24s ease;
  z-index: 3;
}
.artifact:hover { transform: rotate(-5deg) translateY(-8px) scale(1.06); filter: drop-shadow(0 20px 20px rgba(58,32,22,.42)); }
.mask { left: 14%; top: 20%; background: radial-gradient(circle at 50% 38%, var(--ivory) 0 24%, var(--brass) 25% 31%, transparent 32%), radial-gradient(ellipse, var(--indigo) 0 62%, transparent 63%); border-radius: 50% 50% 42% 42%; }
.mask::before, .mask::after { content: ""; position: absolute; top: 42px; width: 12px; height: 7px; background: var(--ivory); border-radius: 50%; }
.mask::before { left: 29px; } .mask::after { right: 29px; }
.shard { right: 13%; top: 23%; clip-path: polygon(48% 0, 92% 25%, 73% 100%, 12% 78%, 0 21%); background: linear-gradient(135deg, var(--ivory), var(--jade)); }
.coin { left: 20%; bottom: 17%; border-radius: 50%; background: radial-gradient(circle, var(--ivory), var(--brass) 56%, #75481e); }
.compass { left: 14%; bottom: 18%; background: conic-gradient(from 45deg, var(--brass), var(--ivory), var(--indigo), var(--brass)); clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%); }
.talisman { right: 15%; top: 17%; background: linear-gradient(135deg, var(--ivory), var(--parchment)); transform: rotate(12deg); clip-path: polygon(12% 0, 88% 0, 100% 70%, 50% 100%, 0 70%); }

.oval-window::after { content: ""; position: absolute; inset: 72px 13%; border: 2px solid rgba(185,133,44,.55); border-radius: 50%; pointer-events: none; }
.seal-stage { background: radial-gradient(circle, rgba(155,63,46,.18), transparent 34%), linear-gradient(160deg, var(--parchment), var(--ivory) 38%, #9a7145); }
.leather-flap { position: absolute; inset: 0 0 50%; background: linear-gradient(180deg, var(--leather), var(--saddle)); transform-origin: top; transform: rotateX(0deg); transition: transform 1.1s ease; z-index: 4; box-shadow: 0 18px 44px rgba(58,32,22,.38); }
.scene.active .leather-flap.open { transform: rotateX(82deg); }
.final-plaque { z-index: 5; }
.return-seal { position: absolute; z-index: 6; left: 50%; bottom: 12%; transform: translateX(-50%); width: 104px; height: 104px; border: 0; border-radius: 48% 52% 45% 55%; font-size: 40px; cursor: pointer; transition: transform .25s ease, background .25s ease; }
.return-seal:hover { transform: translateX(-50%) scale(1.08) rotate(4deg); background: radial-gradient(circle at 35% 25%, var(--ivory), var(--brass) 45%, var(--wax)); }

.chapter-beads { position: fixed; z-index: 20; right: 24px; top: 50%; transform: translateY(-50%); display: grid; gap: 18px; }
.bead { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,243,210,.45); background: radial-gradient(circle at 34% 28%, var(--ivory), var(--brass) 45%, #6b3d16); cursor: pointer; box-shadow: 0 5px 12px rgba(0,0,0,.32); }
.bead::after { content: ""; position: absolute; left: 50%; top: 21px; height: 18px; border-left: 1px solid rgba(185,133,44,.45); }
.bead:last-child::after { display: none; }
.bead span { position: absolute; right: 32px; top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; color: var(--ivory); font-family: "Spectral SC", serif; font-size: 12px; letter-spacing: .12em; transition: .2s ease; }
.bead:hover span, .bead.active span { opacity: 1; transform: translateY(-50%) translateX(0); }
.bead.active { background: radial-gradient(circle at 34% 28%, var(--ivory), var(--wax) 38%, var(--brass)); transform: scale(1.22); }

.artifact-label { position: fixed; z-index: 30; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(18px); opacity: 0; max-width: min(520px, 82vw); padding: 12px 20px; border-radius: 999px; color: var(--ivory); background: rgba(38,58,78,.86); border: 1px solid rgba(185,133,44,.7); box-shadow: 0 14px 24px rgba(0,0,0,.3); transition: opacity .24s ease, transform .24s ease; text-align: center; }
.artifact-label.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes warmSeal { 0% { filter: saturate(.9); } 100% { filter: saturate(1.25) brightness(1.18); box-shadow: inset 0 -8px 13px rgba(58,32,22,.35), 0 0 28px rgba(185,133,44,.48); } }
@keyframes drawFail { 0% { stroke-dashoffset: 760; } 74% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .35; } }
@keyframes drawSecond { to { stroke-dashoffset: 0; } }
@keyframes twinkle { 50% { opacity: .36; transform: translateY(-4px); } }

@media (max-width: 720px) {
  .scene { padding: 12px; }
  .leather-field, .relic-frame { width: 94vw; height: 88vh; border-radius: 28px; }
  .central-medallion { width: 78vw; min-height: 330px; padding: 48px 25px 74px; }
  .artifact { width: 68px; height: 68px; }
  .story-plaque { width: 78vw; padding: 28px 24px; }
  .chapter-beads { right: 12px; }
  .bead span { display: none; }
}