:root {
    --ink: #10131F;
    --vellum: #EAF3F2;
    --paper: #D7C7A1;
    --blue: #2D7DD2;
    --green: #1F6F5B;
    --brass: #B88746;
    --red: #C83E4D;
    --yellow: #F6D84C;
    --word: "Bowlby One SC", Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
    --small: "Space Grotesk", "Segoe UI", Inter, system-ui, sans-serif;
    --story: Fraunces, Georgia, "Times New Roman", serif;
}

/* DESIGN TOKEN TRACE: Interaction should physical: movement nudges labels Grotesk** */

@keyframes paper-breathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(246,216,76,0)); } 50% { filter: drop-shadow(0 0 1.35rem rgba(246,216,76,.32)); } }
@keyframes tooth-glint { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes lens-pulse { 0%, 100% { box-shadow: 0 0 0 999px rgba(16,19,31,.10), 0 0 1.4rem rgba(246,216,76,.45); } 50% { box-shadow: 0 0 0 999px rgba(16,19,31,.18), 0 0 2.5rem rgba(246,216,76,.72); } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--vellum);
    background:
        radial-gradient(circle at 17% 12%, rgba(45,125,210,.24), transparent 28rem),
        radial-gradient(circle at 76% 84%, rgba(31,111,91,.26), transparent 34rem),
        linear-gradient(135deg, #10131F 0%, #171B2D 50%, #090B12 100%);
    font-family: var(--small);
}

.desk-grain, .desk-light { position: fixed; inset: 0; pointer-events: none; }
.desk-grain {
    z-index: 0;
    opacity: .34;
    background-image:
        repeating-linear-gradient(3deg, transparent 0 13px, rgba(234,243,242,.04) 14px 15px),
        repeating-linear-gradient(92deg, transparent 0 18px, rgba(184,135,70,.04) 19px 20px),
        radial-gradient(circle at 50% 50%, transparent 0 2px, rgba(234,243,242,.025) 2.5px 3px, transparent 3.5px);
}
.desk-light { z-index: 0; background: radial-gradient(ellipse at 35% 35%, rgba(246,216,76,.08), transparent 38rem); }

.floating-clues { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.clue {
    position: absolute;
    padding: .42rem .7rem;
    border: 1px dashed rgba(234,243,242,.42);
    color: rgba(234,243,242,.72);
    background: rgba(16,19,31,.48);
    font: 700 .68rem/1 var(--small);
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: rotate(var(--tilt));
    transition: transform .6s ease, opacity .6s ease;
}
.clue-a { top: 10vh; left: 7vw; --tilt: -8deg; }
.clue-b { top: 18vh; right: 7vw; --tilt: 7deg; }
.clue-c { bottom: 17vh; left: 8vw; --tilt: 5deg; }
.clue-d { bottom: 10vh; right: 12vw; --tilt: -6deg; }
.clue-e { top: 57vh; right: 4vw; --tilt: 12deg; }

.mini-map {
    position: fixed;
    top: 1.15rem;
    right: 1.15rem;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(5, 18px);
    gap: 7px;
    padding: .78rem;
    background: rgba(16,19,31,.76);
    border: 1px solid rgba(234,243,242,.28);
    transform: rotate(3deg);
}
.mini-map span { width: 18px; height: 18px; overflow: hidden; text-indent: 60px; white-space: nowrap; background: rgba(234,243,242,.26); clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%); transition: background .35s ease, transform .35s ease; }
.mini-map span.active { background: var(--yellow); transform: translateY(-4px) rotate(-8deg); }

.puzzle-story { position: relative; z-index: 1; }
.panel { min-height: 100vh; display: grid; place-items: center; padding: clamp(1.4rem, 4vw, 4rem); position: relative; perspective: 1200px; }
.panel::before { content: ''; position: absolute; left: 50%; top: -1px; width: min(78vw, 860px); height: 36px; transform: translateX(-50%); background-image: radial-gradient(circle, rgba(234,243,242,.55) 0 2px, transparent 2.6px); background-size: 18px 10px; opacity: .55; }
.panel-number, .hinge-label, .scroll-instruction, .leak-label, .tab-note, .caption, .seal-button, .rotate-button, .restart-link, .decoder-window { font-family: var(--small); letter-spacing: .08em; text-transform: uppercase; }
.panel-number { position: absolute; top: 2rem; left: 2rem; color: rgba(234,243,242,.62); font-size: .75rem; }
.hinge-label { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); color: var(--yellow); font-size: .8rem; text-align: center; }

.puzzle-envelope, .connected-paper {
    position: relative;
    color: var(--ink);
    background:
        linear-gradient(135deg, rgba(234,243,242,.58), transparent 42%),
        repeating-linear-gradient(87deg, rgba(16,19,31,.018) 0 2px, transparent 2px 8px),
        linear-gradient(135deg, #D7C7A1, #EAF3F2 58%, #CBB98E);
    box-shadow: 0 3rem 6rem rgba(0,0,0,.48), inset 0 0 0 1px rgba(16,19,31,.2);
    transform-style: preserve-3d;
}
.puzzle-envelope { width: min(78vw, 630px); min-height: min(78vw, 630px); display: grid; place-items: center; padding: 3rem; transform: rotate(-4deg); transition: transform .9s cubic-bezier(.2,.9,.15,1), border-radius .9s ease; animation: paper-breathe 4.8s ease-in-out infinite; }
.puzzle-envelope.opened { transform: rotate(0deg) rotateX(7deg) scale(.96); border-radius: 0 0 3rem 3rem; }
.paper-shadow { position: absolute; inset: 9%; background: radial-gradient(circle, rgba(246,216,76,.38), transparent 56%); filter: blur(18px); }

.fold-line { position: absolute; inset: 8%; pointer-events: none; }
.fold-line-x { background: linear-gradient(45deg, transparent 49.6%, rgba(16,19,31,.25) 50%, transparent 50.4%); }
.fold-line-y { background: linear-gradient(-45deg, transparent 49.6%, rgba(16,19,31,.25) 50%, transparent 50.4%); }
.side-hinge { position: absolute; top: 6%; bottom: 6%; left: 2rem; width: 10px; background-image: radial-gradient(circle, var(--brass) 0 3px, transparent 3.8px); background-size: 10px 22px; opacity: .75; }
.postage-grid { position: absolute; top: 2.3rem; right: 2.2rem; display: grid; grid-template-columns: repeat(2, 34px); gap: 7px; transform: rotate(6deg); }
.postage-grid span { aspect-ratio: 1; border: 2px solid var(--blue); background: repeating-linear-gradient(45deg, rgba(45,125,210,.15) 0 4px, transparent 4px 8px); }
.registration-cross { position: absolute; width: 36px; height: 36px; opacity: .7; }
.registration-cross::before, .registration-cross::after { content: ''; position: absolute; background: var(--red); }
.registration-cross::before { left: 16px; top: 0; width: 3px; height: 36px; }
.registration-cross::after { left: 0; top: 16px; width: 36px; height: 3px; }
.cross-one { left: 2rem; bottom: 2.1rem; transform: rotate(-7deg); }
.cross-two { right: 8rem; bottom: 3.2rem; transform: rotate(11deg); }
.corner { position: absolute; width: 24%; aspect-ratio: 1; background: linear-gradient(135deg, rgba(184,135,70,.45), transparent 62%); }
.corner-one { top: 0; left: 0; } .corner-two { right: 0; bottom: 0; transform: rotate(180deg); }
.zipper-ghost { position: absolute; left: 10%; right: 10%; top: 34%; display: flex; justify-content: space-between; opacity: .24; }
.zipper-ghost i { width: 18px; height: 34px; background: var(--brass); transform: skewX(-18deg); }

.wordmark { position: relative; z-index: 1; margin: 0; display: flex; align-items: baseline; gap: .035em; font: clamp(3.8rem, 13vw, 9rem)/.85 var(--word); text-shadow: 0 .08em 0 rgba(16,19,31,.11), 0 0 2.4rem rgba(246,216,76,.86); filter: drop-shadow(0 0 1rem rgba(246,216,76,.65)); }
.wordmark span, .wordmark em { display: inline-block; color: transparent; -webkit-text-stroke: 3px var(--ink); background: linear-gradient(var(--yellow), var(--yellow)) text; transform: translateY(var(--lift,0)); transition: transform .5s ease; }
.wordmark em { font-style: normal; -webkit-text-stroke-color: var(--red); }
.puzzle-envelope.opened .wordmark span:nth-child(1), .puzzle-envelope.opened .wordmark span:nth-child(2) { --lift: .08em; }
.puzzle-envelope.opened .wordmark span:nth-child(3), .puzzle-envelope.opened .wordmark span:nth-child(4) { --lift: -.06em; }
.leak-label { position: absolute; bottom: 5rem; left: 50%; width: 80%; transform: translateX(-50%); text-align: center; color: rgba(16,19,31,.68); font-size: .72rem; }
.scroll-instruction { position: absolute; bottom: 2rem; color: rgba(234,243,242,.7); font-size: .72rem; }

.seal-button, .rotate-button, .restart-link { border: 0; background: var(--red); color: var(--vellum); padding: .9rem 1.2rem; font-weight: 800; text-decoration: none; box-shadow: .35rem .35rem 0 var(--ink); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.seal-button { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%) rotate(-1deg); }
.seal-button:hover, .rotate-button:hover, .restart-link:hover { transform: translate(-.12rem,-.12rem); box-shadow: .52rem .52rem 0 var(--ink); }
.seal-button:hover { transform: translateX(-50%) translate(-.12rem,-.12rem) rotate(-1deg); }

.connected-paper { width: min(86vw, 890px); min-height: min(82vh, 650px); padding: clamp(2rem, 5vw, 5rem); transform: rotate(var(--angle)); transition: transform .8s cubic-bezier(.2,.9,.15,1); clip-path: polygon(0 0, 96% 0, 100% 5%, 100% 100%, 4% 100%, 0 94%); }
.press-paper { --angle: 2deg; } .pair-paper { --angle: -2.5deg; } .zip-paper { --angle: 1.5deg; } .reveal-paper { --angle: -1deg; }
.connected-paper::before, .connected-paper::after { content: ''; position: absolute; background: var(--vellum); box-shadow: inset 0 0 0 1px rgba(16,19,31,.2); }
.connected-paper::before { top: 42%; left: -28px; width: 56px; height: 92px; border-radius: 50% 0 0 50%; }
.connected-paper::after { top: 42%; right: -28px; width: 56px; height: 92px; border-radius: 0 50% 50% 0; }
.panel.in-view .connected-paper { transform: rotate(0deg) translateY(-.6rem); }

.tab-row { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: clamp(1rem,4vw,3rem); margin-bottom: 2rem; }
.press-tab { position: relative; min-height: 260px; border: 0; color: var(--vellum); background: linear-gradient(135deg, var(--blue), var(--green)); box-shadow: 0 1.5rem 0 rgba(16,19,31,.22), inset 0 0 0 .35rem rgba(234,243,242,.35); cursor: pointer; transform: translateY(0) rotate(var(--tab-tilt)); transition: transform .28s ease, box-shadow .28s ease; clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 0 100%); }
.press-tab:first-child { --tab-tilt: -3deg; } .press-tab:last-child { --tab-tilt: 3deg; }
.press-tab.pressed { transform: translateY(1rem) rotate(0deg); box-shadow: 0 .45rem 0 rgba(16,19,31,.28), inset 0 0 0 .35rem rgba(246,216,76,.45); }
.tab-letter { display: block; font: clamp(7rem,18vw,12rem)/.8 var(--word); }
.tab-note { display: block; color: var(--yellow); font-size: .72rem; }
.vellum-card { position: relative; max-width: 640px; margin: 0 auto; padding: 1.6rem 2rem; background: rgba(234,243,242,.64); border: 1px solid rgba(16,19,31,.2); font: 1.35rem/1.45 var(--story); transform: translateX(-18%); opacity: .78; transition: transform .7s ease, opacity .7s ease; }
.press-paper.solved .vellum-card { transform: translateX(0); opacity: 1; }
.stamp-x { position: absolute; top: -1.1rem; right: 1rem; color: var(--red); font: 3rem/1 var(--word); transform: rotate(12deg); }
.perforation { position: absolute; left: 10%; right: 10%; bottom: 2rem; height: 2px; background-image: linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 22px); opacity: .35; }

.map-contours { position: absolute; inset: 8%; opacity: .45; pointer-events: none; }
.map-contours span { position: absolute; border: 2px solid var(--green); border-radius: 50%; transform: rotate(var(--r)); }
.map-contours span:nth-child(1) { inset: 7% 20% 30% 10%; --r: 8deg; } .map-contours span:nth-child(2) { inset: 18% 12% 20% 18%; --r: -12deg; } .map-contours span:nth-child(3) { inset: 34% 30% 10% 26%; --r: 18deg; } .map-contours span:nth-child(4) { inset: 8% 8% 54% 58%; --r: 30deg; }
.stamp-wheel { position: relative; z-index: 1; width: min(72vw,430px); aspect-ratio: 1; margin: 0 auto 2rem; border: 2px dashed var(--ink); border-radius: 50%; display: grid; place-items: center; transform: rotate(var(--stamp-rotation,0deg)); transition: transform .7s cubic-bezier(.2,.9,.15,1); }
.stamp-square { position: absolute; width: 105px; aspect-ratio: 1; border: 3px solid var(--ink); background: var(--brass); color: var(--ink); font: 3.2rem/1 var(--word); box-shadow: .45rem .45rem 0 rgba(16,19,31,.18); cursor: pointer; }
.stamp-square:nth-child(1) { top: 4%; left: 50%; transform: translateX(-50%) rotate(-8deg); background: var(--yellow); }
.stamp-square:nth-child(2) { top: 50%; right: 4%; transform: translateY(-50%) rotate(8deg); background: var(--blue); color: var(--vellum); }
.stamp-square:nth-child(3) { bottom: 4%; left: 50%; transform: translateX(-50%) rotate(12deg); background: var(--green); color: var(--vellum); }
.stamp-square:nth-child(4) { top: 50%; left: 4%; transform: translateY(-50%) rotate(-12deg); background: var(--red); color: var(--vellum); }
.decoder-window { width: 96px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(246,216,76,.62), rgba(16,19,31,.18)); color: var(--ink); font-size: .75rem; }
.caption { position: relative; z-index: 1; max-width: 660px; margin: 0 auto 1.3rem; color: rgba(16,19,31,.75); text-align: center; line-height: 1.6; text-transform: none; letter-spacing: .02em; }
.rotate-button { display: block; margin: 0 auto; background: var(--green); }

.zip-track { position: relative; width: min(76vw,760px); height: 190px; margin: 4rem auto 2rem; overflow: visible; }
.zip-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 8px; background: var(--ink); transform: translateY(-50%); }
.zip-teeth { position: absolute; left: 0; right: 0; height: 50%; background-image: linear-gradient(90deg, var(--brass) 0 14px, transparent 14px 28px); background-size: 28px 100%; transition: clip-path .7s ease; animation: tooth-glint 1.6s steps(2,end) infinite; }
.zip-teeth-top { top: 0; clip-path: inset(0 calc(100% - var(--zip-progress, 0%)) 0 0); }
.zip-teeth-bottom { bottom: 0; transform: translateX(14px); clip-path: inset(0 calc(100% - var(--zip-progress, 0%)) 0 0); }
.zip-pull { position: absolute; top: 50%; left: var(--zip-progress, 0%); transform: translate(-50%,-50%); width: 88px; height: 118px; border: 0; border-radius: 48% 48% 42% 42%; background: var(--red); color: var(--yellow); font: 2rem/1 var(--word); box-shadow: .45rem .45rem 0 rgba(16,19,31,.25); cursor: grab; transition: left .45s ease; }
.zip-pull:active { cursor: grabbing; }
.pine-line { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.pine-line i { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 46px solid var(--green); filter: drop-shadow(0 12px 0 rgba(31,111,91,.34)); }

.eyelets { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; }
.eyelets span { width: 54px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 35%, var(--brass) 36% 48%, var(--vellum) 49% 100%); box-shadow: inset 0 0 0 2px rgba(16,19,31,.18), 0 0 1.1rem rgba(246,216,76,.25); }
.reveal-picture { position: relative; min-height: 320px; margin: 0 auto 2rem; max-width: 680px; border: 3px solid var(--ink); overflow: hidden; background: linear-gradient(#2D7DD2 0 45%, #1F6F5B 45% 100%); }
.hidden-ink { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%) rotate(-3deg); width: 80%; color: rgba(246,216,76,.34); font: clamp(1.7rem,4vw,3.6rem)/.95 var(--word); text-align: center; text-transform: uppercase; }
.decoder-lens { position: absolute; z-index: 4; left: var(--lens-x,50%); top: var(--lens-y,50%); width: 104px; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid var(--yellow); border-radius: 50%; color: var(--yellow); background: radial-gradient(circle, rgba(16,19,31,.1), rgba(16,19,31,.68)); font: 1.6rem/1 var(--word); transform: translate(-50%,-50%); pointer-events: none; transition: left .16s ease, top .16s ease; animation: lens-pulse 3.2s ease-in-out infinite; }
.moon { position: absolute; top: 32px; right: 72px; width: 82px; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 2rem rgba(246,216,76,.7); }
.island { position: absolute; bottom: 48px; background: var(--ink); border-radius: 50% 50% 0 0; }
.island-one { left: 70px; width: 260px; height: 86px; } .island-two { right: 80px; width: 170px; height: 58px; }
.solved-emblem { position: absolute; left: 46%; bottom: 60px; width: 90px; height: 74px; background: var(--paper); clip-path: polygon(12% 30%, 36% 0, 72% 10%, 100% 45%, 68% 100%, 20% 82%); box-shadow: inset 0 0 0 4px var(--brass); }
.solved-emblem span { position: absolute; right: 20px; top: 18px; width: 18px; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.water-lines span { position: absolute; left: 8%; right: 8%; height: 3px; background: rgba(234,243,242,.62); }
.water-lines span:nth-child(1) { bottom: 38px; } .water-lines span:nth-child(2) { bottom: 25px; left: 18%; } .water-lines span:nth-child(3) { bottom: 14px; right: 18%; }
.reveal-paper h2 { margin: 0 0 1rem; color: var(--ink); font: clamp(2rem,6vw,4.6rem)/.95 var(--word); text-align: center; }
.reveal-paper p { max-width: 740px; margin: 0 auto 1.7rem; color: rgba(16,19,31,.78); font: clamp(1.2rem,2.4vw,1.8rem)/1.35 var(--story); text-align: center; }
.restart-link { display: block; width: max-content; margin: 0 auto; background: var(--blue); }

@media (max-width: 720px) {
    .puzzle-envelope, .connected-paper { width: 92vw; min-height: 72vh; }
    .tab-row { grid-template-columns: 1fr; }
    .press-tab { min-height: 180px; }
    .stamp-square { width: 78px; }
    .clue { display: none; }
    .hinge-label { width: 72vw; }
}