:root {
    --near-black: #05030A;
    --chamber: #120A24;
    --violet-plane: #24103F;
    --amber: #FFB347;
    --teal: #2ED3C6;
    --bone: #F6E7C8;
    --wax-red: #7A2E12;
    --font-primary: "Commissioner", sans-serif;
    --font-serif: "Cormorant Garamond", serif;
    --font-mono: "JetBrains Mono", monospace;
    /* Design font note: JetBrains Mono only for tiny clue numbers. */
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-primary);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 179, 71, 0.13), transparent 22rem),
        radial-gradient(circle at 88% 30%, rgba(46, 211, 198, 0.12), transparent 28rem),
        linear-gradient(180deg, var(--chamber), var(--near-black) 48%, var(--chamber));
    overflow-x: hidden;
}

.riddle-page { position: relative; isolation: isolate; }

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 8rem 1.5rem;
    overflow: hidden;
}

.scene::before {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(246, 231, 200, 0.06);
    border-radius: 50%;
    transform: rotateX(64deg) rotateZ(var(--ring-angle, 0deg));
    box-shadow: 0 0 90px rgba(255, 179, 71, 0.07), inset 0 0 60px rgba(46, 211, 198, 0.04);
    pointer-events: none;
}

.riddle-chamber { min-height: 100svh; background: radial-gradient(circle at center, rgba(36, 16, 63, 0.9), var(--chamber) 42%, var(--near-black)); }

.ambient-vignette,
.teal-counterglow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ambient-vignette { background: radial-gradient(circle at center, transparent 0 26%, rgba(5, 3, 10, 0.82) 78%); }

.teal-counterglow { background: radial-gradient(circle at 82% 56%, rgba(46, 211, 198, 0.2), transparent 20rem); mix-blend-mode: screen; }

.wordmark-stage { position: relative; z-index: 4; text-align: center; transform: translateY(-5vh); }

.cipher-label {
    margin: 0 0 1rem;
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: clamp(0.64rem, 1.2vw, 0.78rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.rriddl-wordmark,
.solved-letters {
    display: flex;
    justify-content: center;
    gap: clamp(0.2rem, 1.5vw, 1.1rem);
    margin: 0;
    color: var(--bone);
    font-family: var(--font-primary);
    font-size: clamp(4.4rem, 15vw, 13rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.08em;
    text-shadow: 0 0 18px rgba(255, 179, 71, 0.35), 0 20px 70px rgba(5, 3, 10, 0.95);
}

.rriddl-wordmark span,
.solved-letters span { display: inline-block; transform: translateY(var(--letter-y, 0)) rotate(var(--letter-r, 0)); transition: transform 900ms cubic-bezier(.2,.8,.2,1), color 600ms; }

.scene.is-visible .rriddl-wordmark span:nth-child(1), .scene.is-visible .solved-letters span:nth-child(1) { --letter-y: -0.06em; --letter-r: -2deg; }
.scene.is-visible .rriddl-wordmark span:nth-child(2), .scene.is-visible .solved-letters span:nth-child(2) { --letter-y: 0.03em; --letter-r: 2deg; }
.scene.is-visible .rriddl-wordmark span:nth-child(3), .scene.is-visible .solved-letters span:nth-child(3) { --letter-y: -0.1em; --letter-r: 0deg; color: var(--amber); }
.scene.is-visible .rriddl-wordmark span:nth-child(4), .scene.is-visible .solved-letters span:nth-child(4) { --letter-y: 0.04em; --letter-r: -1deg; }
.scene.is-visible .rriddl-wordmark span:nth-child(5), .scene.is-visible .solved-letters span:nth-child(5) { --letter-y: -0.02em; --letter-r: 1deg; }
.scene.is-visible .rriddl-wordmark span:nth-child(6), .scene.is-visible .solved-letters span:nth-child(6) { --letter-y: 0.08em; --letter-r: -4deg; color: var(--teal); }

.ceremony-line,
.quote {
    max-width: 42rem;
    margin: 1.5rem auto 0;
    color: rgba(246, 231, 200, 0.82);
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 3vw, 2.25rem);
    font-style: italic;
}

.candle-core { position: absolute; z-index: 5; width: min(28vw, 180px); bottom: 8vh; filter: drop-shadow(0 0 42px rgba(255, 179, 71, 0.48)); }
.flame-aura { fill: url(#flameGlow); opacity: 0.62; transform-origin: 90px 82px; animation: pulseAura 3.4s ease-in-out infinite; }
.amber-flame { fill: var(--amber); transform-origin: 91px 83px; animation: flicker 1.7s ease-in-out infinite alternate; }
.blue-flame { fill: var(--teal); opacity: 0.9; transform-origin: 91px 84px; animation: flicker 1.3s ease-in-out infinite alternate-reverse; }
.wax-shadow { fill: rgba(122, 46, 18, 0.36); }
.wax-drip { fill: none; stroke: var(--wax-red); stroke-width: 5; stroke-linecap: round; opacity: 0.54; }
.candle-foot { fill: rgba(5, 3, 10, 0.7); }

body.clue-warmed .amber-flame { fill: var(--bone); }
body.clue-cooled .blue-flame { fill: var(--bone); }

.clue-orbit {
    position: absolute;
    z-index: 3;
    width: min(76vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: rotateX(62deg) rotateZ(var(--orbit-spin, 0deg));
    transition: transform 500ms ease-out;
}

.clue-token {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin: -1.7rem;
    border: 1px solid rgba(255, 179, 71, 0.28);
    border-radius: 50%;
    color: rgba(246, 231, 200, 0.72);
    background: rgba(36, 16, 63, 0.58);
    font-family: var(--font-mono);
    box-shadow: 0 0 30px rgba(5, 3, 10, 0.9), inset 0 0 18px rgba(255, 179, 71, 0.08);
    cursor: crosshair;
    transition: color 260ms, border-color 260ms, box-shadow 260ms, transform 260ms;
}

.clue-token:nth-child(1) { transform: rotate(0deg) translateX(min(38vw, 380px)) rotate(0deg) rotateX(-62deg); }
.clue-token:nth-child(2) { transform: rotate(60deg) translateX(min(38vw, 380px)) rotate(-60deg) rotateX(-62deg); }
.clue-token:nth-child(3) { transform: rotate(120deg) translateX(min(38vw, 380px)) rotate(-120deg) rotateX(-62deg); }
.clue-token:nth-child(4) { transform: rotate(180deg) translateX(min(38vw, 380px)) rotate(-180deg) rotateX(-62deg); }
.clue-token:nth-child(5) { transform: rotate(240deg) translateX(min(38vw, 380px)) rotate(-240deg) rotateX(-62deg); }
.clue-token:nth-child(6) { transform: rotate(300deg) translateX(min(38vw, 380px)) rotate(-300deg) rotateX(-62deg); }
.clue-token:hover { color: var(--amber); border-color: var(--teal); box-shadow: 0 0 28px rgba(46, 211, 198, 0.35), inset 0 0 18px rgba(255, 179, 71, 0.2); }

.scroll-sigil { position: absolute; bottom: 2rem; color: rgba(246, 231, 200, 0.46); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; }

.riddle-card,
.false-door,
.answer-plate,
.final-emblem {
    position: relative;
    width: min(90vw, 680px);
    padding: clamp(2rem, 5vw, 4.8rem);
    text-align: center;
    border: 1px solid rgba(246, 231, 200, 0.13);
    border-radius: 2.2rem;
    background: linear-gradient(145deg, rgba(36, 16, 63, 0.84), rgba(18, 10, 36, 0.72)), radial-gradient(circle at 50% 0, rgba(255, 179, 71, 0.16), transparent 24rem);
    box-shadow: 0 50px 130px rgba(5, 3, 10, 0.74), inset 0 0 50px rgba(255, 179, 71, 0.04);
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(4rem);
    opacity: 0;
    transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms, box-shadow 300ms;
    transform-style: preserve-3d;
}

.scene.is-visible .riddle-card,
.scene.is-visible .false-door,
.scene.is-visible .answer-plate,
.scene.is-visible .final-emblem { opacity: 1; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0); }

.riddle-card h2,
.false-door h2,
.answer-plate h2 {
    margin: 0;
    color: var(--bone);
    font-size: clamp(2.4rem, 7vw, 5.7rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
}

.riddle-card p:not(.cipher-label),
.answer-plate p:not(.cipher-label),
.false-door p:not(.cipher-label) {
    color: rgba(246, 231, 200, 0.74);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.75;
}

.smoke-script { position: absolute; inset: 0; pointer-events: none; }
.smoke-script span { position: absolute; color: rgba(246, 231, 200, 0.08); font-family: var(--font-serif); font-size: clamp(5rem, 15vw, 16rem); filter: blur(1px); animation: smokeDrift 10s ease-in-out infinite; }
.smoke-script span:nth-child(1) { left: 12%; top: 10%; }
.smoke-script span:nth-child(2) { right: 10%; top: 26%; animation-delay: -2s; }
.smoke-script span:nth-child(3) { left: 20%; bottom: 14%; animation-delay: -4s; }
.smoke-script span:nth-child(4) { right: 18%; bottom: 8%; animation-delay: -6s; }

.constellation { height: 9rem; margin-top: 2.4rem; position: relative; }
.constellation::before { content: ""; position: absolute; inset: 48% 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), var(--teal), transparent); transform: rotate(-8deg); }
.constellation i { position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--bone); box-shadow: 0 0 22px var(--amber); }
.constellation i:nth-child(1) { left: 13%; top: 55%; }
.constellation i:nth-child(2) { left: 27%; top: 34%; }
.constellation i:nth-child(3) { left: 44%; top: 58%; background: var(--teal); }
.constellation i:nth-child(4) { left: 58%; top: 38%; }
.constellation i:nth-child(5) { left: 72%; top: 54%; background: var(--amber); }
.constellation i:nth-child(6) { left: 86%; top: 28%; }

.keyhole-scene { background: radial-gradient(circle at center, rgba(122, 46, 18, 0.23), transparent 22rem), linear-gradient(180deg, var(--near-black), var(--chamber)); }
.keyhole-aperture { position: absolute; width: min(44vw, 360px); height: min(66vw, 540px); border-radius: 48% 48% 12% 12%; background: radial-gradient(circle at 50% 34%, rgba(46, 211, 198, 0.25), transparent 2rem), linear-gradient(180deg, var(--near-black), #000); box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.16), 0 0 120px rgba(255, 179, 71, 0.11); opacity: 0.7; }
.eye-glint { position: absolute; left: 50%; top: 33%; width: 4.8rem; height: 1.8rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--teal), transparent 64%); }
.false-door { background: linear-gradient(160deg, rgba(122, 46, 18, 0.48), rgba(36, 16, 63, 0.82)); }
.wax-seal { display: grid; place-items: center; width: 6rem; height: 6rem; margin: -1rem auto 2rem; border-radius: 50%; color: var(--bone); background: radial-gradient(circle at 35% 28%, #9b3c18, var(--wax-red)); font-family: var(--font-serif); font-size: 4rem; box-shadow: 0 1rem 3rem rgba(5, 3, 10, 0.48), inset 0 0 24px rgba(5, 3, 10, 0.32); }

.reveal-scene { background: radial-gradient(circle at 50% 40%, rgba(46, 211, 198, 0.12), transparent 26rem), var(--near-black); }
.answer-plate { background: linear-gradient(145deg, rgba(5, 3, 10, 0.92), rgba(36, 16, 63, 0.8)); }
.answer-plate::after { content: ""; position: absolute; inset: 1rem; border-radius: 1.5rem; border: 1px solid rgba(46, 211, 198, 0.18); transform: translateZ(30px); }
.inscription { margin-top: 2rem; color: var(--teal); font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0; transform: translateY(1rem); transition: opacity 500ms, transform 500ms; }
.answer-plate:hover .inscription { opacity: 1; transform: translateY(0); }
.loop-key { position: absolute; width: min(70vw, 560px); bottom: 8%; opacity: 0.42; filter: drop-shadow(0 0 28px rgba(255, 179, 71, 0.25)); }
.key-stroke, .key-teeth { fill: none; stroke: var(--amber); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1800ms ease; }
.scene.is-visible .key-stroke, .scene.is-visible .key-teeth { stroke-dashoffset: 0; }

.afterglow-scene { background: radial-gradient(circle at center, rgba(255, 179, 71, 0.16), transparent 28rem), linear-gradient(180deg, var(--chamber), var(--near-black)); }
.final-emblem { width: min(94vw, 900px); }
.solved-letters { font-size: clamp(3.5rem, 12vw, 10rem); }
.afterglow-scene.is-visible .solved-letters span { color: var(--bone); transform: translateY(0) rotate(0deg); }

@keyframes flicker { 0% { transform: scaleX(0.92) skewX(-2deg); } 100% { transform: scaleX(1.08) skewX(3deg) translateY(-2px); } }
@keyframes pulseAura { 0%, 100% { opacity: 0.45; transform: scale(0.92); } 50% { opacity: 0.78; transform: scale(1.08); } }
@keyframes smokeDrift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); opacity: 0.05; } 50% { transform: translate3d(1rem, -1.4rem, 0) rotate(4deg); opacity: 0.14; } }

@media (max-width: 720px) {
    .scene { padding: 6rem 1rem; }
    .clue-token { width: 2.5rem; height: 2.5rem; margin: -1.25rem; }
    .candle-core { width: 130px; bottom: 10vh; }
    .wordmark-stage { transform: translateY(-8vh); }
    .riddle-card, .false-door, .answer-plate, .final-emblem { border-radius: 1.4rem; }
}