/* =====================================================
   interplanetary.quest — The Cosmonaut's Sticker Album
   Translucent-frost porthole voyage
   ===================================================== */

:root {
    --frost-lavender: #E8E0F4;
    --frost-sky:      #D8E8F4;
    --frost-mint:     #D8F0E5;
    --frost-peri:     #C8CFEC;
    --frost-champ:    #F2E8D8;

    --sherbet:    #FFB3C7;
    --mint:       #A8E5D2;
    --plum:       #3A2E55;
    --pearl:      #FAF6FF;
    --copper:     #C77E5C;
    --cobalt:     #3D4FB5;
    --gold:       #D9B96A;
    --plum-soft:  #5A4A7A;
    --frost-pale: #F4EFFF;

    --frost-base: var(--frost-lavender);
    --frost-accent: var(--mint);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --z-bg: 0;
    --z-noise: 1;
    --z-blob: 5;
    --z-content: 10;
    --z-rocket: 60;
    --z-toggle: 70;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Quicksand", system-ui, sans-serif;
    color: var(--plum);
    background: var(--frost-base);
    transition: background 1.2s ease;
    position: relative;
    line-height: 1.55;
    min-height: 100vh;
}

/* ---------- global background floor (cross-zone bleed) ---------- */
.frost-floor {
    position: fixed;
    inset: 0;
    z-index: var(--z-bg);
    background:
        radial-gradient(1100px 800px at 18% 12%, rgba(255,179,199,0.32), transparent 60%),
        radial-gradient(1200px 900px at 82% 38%, rgba(168,229,210,0.28), transparent 65%),
        radial-gradient(1000px 800px at 30% 78%, rgba(200,207,236,0.32), transparent 65%),
        radial-gradient(900px 700px at 78% 92%, rgba(217,185,106,0.22), transparent 60%),
        var(--frost-base);
    transition: background-color 1.4s ease;
    pointer-events: none;
}

/* ---------- paper noise overlay ---------- */
.paper-noise {
    position: fixed;
    inset: 0;
    z-index: var(--z-noise);
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: multiply;
}
.paper-noise svg { display: block; width: 100%; height: 100%; }

.defs { position: absolute; width: 0; height: 0; }

/* =====================================================
   VOYAGE / ZONES
   ===================================================== */

.voyage {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
}

.zone {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 8vh 6vw 12vh;
    overflow: hidden;
    isolation: isolate;
}

.zone--liftoff   { min-height: 100vh; }
.zone--inner     { min-height: 120vh; }
.zone--asteroid  { min-height: 100vh; }
.zone--outer     { min-height: 120vh; }
.zone--goldback  { min-height: 80vh;  padding-bottom: 18vh; }

/* frosted porthole pane behind each zone */
.frost-pane {
    position: absolute;
    inset: 6vh 4vw;
    border-radius: 38px;
    background: linear-gradient(180deg,
        rgba(250, 246, 255, 0.55) 0%,
        rgba(250, 246, 255, 0.30) 100%);
    backdrop-filter: blur(28px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(28px) saturate(1.4) brightness(1.05);
    border: 1px solid rgba(250, 246, 255, 0.65);
    box-shadow:
        0 30px 80px -40px rgba(58, 46, 85, 0.25),
        inset 0 0 0 1px rgba(250, 246, 255, 0.4),
        inset 0 60px 120px -60px rgba(255, 255, 255, 0.6);
    z-index: 0;
    pointer-events: none;
}
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .frost-pane { background: rgba(250,246,255,0.92); }
}

.zone--liftoff   .frost-pane { background: linear-gradient(180deg, rgba(232,224,244,0.55), rgba(216,232,244,0.42)); }
.zone--inner     .frost-pane { background: linear-gradient(180deg, rgba(216,232,244,0.55), rgba(216,240,229,0.42)); }
.zone--asteroid  .frost-pane { background: linear-gradient(180deg, rgba(216,240,229,0.55), rgba(200,207,236,0.42)); }
.zone--outer     .frost-pane { background: linear-gradient(180deg, rgba(200,207,236,0.55), rgba(242,232,216,0.42)); }
.zone--goldback  .frost-pane { background: linear-gradient(180deg, rgba(242,232,216,0.62), rgba(217,185,106,0.30)); }

/* zone meta labels */
.zone-label {
    position: absolute;
    z-index: 4;
    font-family: "Space Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--plum-soft);
    opacity: 0.8;
    text-transform: lowercase;
}
.zone-label--tl { top: 8vh; left: 6vw; }
.zone-label--tr { top: 8vh; right: 6vw; }

.tag-sig {
    position: absolute;
    z-index: 4;
    font-family: "Space Mono", monospace;
    font-size: 13px;
    color: var(--plum);
    opacity: 0.7;
    transform: rotate(-3deg);
}
.tag-sig--bl { bottom: 5vh; left: 6vw; }
.tag-sig--br { bottom: 5vh; right: 6vw; transform: rotate(2deg); }

/* =====================================================
   BLOBS (organic, drifting characters)
   ===================================================== */

.blob {
    position: absolute;
    z-index: var(--z-blob);
    pointer-events: none;
    will-change: transform;
}

@keyframes drift-a {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%  { transform: translate(8px, -6px) rotate(2deg) scale(1.03); }
    66%  { transform: translate(-4px, 6px) rotate(-2deg) scale(0.98); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes drift-b {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate(-7px, 5px) rotate(-3deg) scale(1.04); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes drift-c {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(5px, 4px) scale(0.97); }
    75%  { transform: translate(-6px, -3px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}

.blob--liftoff-1 { top: 8vh;  left: -6vw; width: 38vw; height: 36vw; animation: drift-a 9.2s ease-in-out infinite; }
.blob--liftoff-2 { top: 56vh; right: -4vw; width: 30vw; height: 28vw; animation: drift-b 10.4s ease-in-out infinite; }
.blob--liftoff-3 { top: 36vh; left: 38vw; width: 22vw; height: 20vw; animation: drift-c 8.6s ease-in-out infinite; }

.blob--inner-1   { top: -4vh; right: -4vw; width: 36vw; height: 32vw; animation: drift-b 10.8s ease-in-out infinite; }
.blob--inner-2   { bottom: -6vh; left: -6vw; width: 32vw; height: 30vw; animation: drift-a 9.6s ease-in-out infinite; }

.blob--asteroid-1 { top: 6vh;  left: -8vw; width: 42vw; height: 38vw; animation: drift-c 11.2s ease-in-out infinite; }
.blob--asteroid-2 { bottom: -4vh; right: -6vw; width: 32vw; height: 28vw; animation: drift-a 9s ease-in-out infinite; }

.blob--outer-1   { top: -6vh; left: -8vw; width: 44vw; height: 38vw; animation: drift-b 10.2s ease-in-out infinite; }
.blob--outer-2   { bottom: 4vh; right: -8vw; width: 36vw; height: 32vw; animation: drift-c 9.8s ease-in-out infinite; }

.blob--gold-1    { top: -6vh; right: -6vw; width: 40vw; height: 36vw; animation: drift-a 10.6s ease-in-out infinite; }
.blob--gold-2    { bottom: -8vh; left: -6vw; width: 32vw; height: 28vw; animation: drift-b 9.4s ease-in-out infinite; }

/* =====================================================
   GRAFFITI THROW-UP HEADLINES
   ===================================================== */

.throwup {
    position: relative;
    font-family: "Bagel Fat One", "Fredoka", sans-serif;
    font-weight: 400;
    color: var(--mint);
    line-height: 0.88;
    letter-spacing: -0.02em;
    text-align: center;
    z-index: 3;
}

.throwup--hero {
    font-size: clamp(64px, 11vw, 168px);
    margin: 8vh auto 0;
    max-width: 1100px;
    padding: 0 2vw;
}
.throwup--hero .throwup__line--1 { display: block; }
.throwup--hero .throwup__line--2 { display: block; font-size: 1.2em; margin-top: 0.04em; }
.throwup--hero .throwup__dot {
    display: inline-block;
    color: var(--sherbet);
    font-size: 0.4em;
    vertical-align: 0.5em;
    margin: 0 0.04em;
    text-shadow: 6px 6px 0 var(--plum);
}

.throwup--quest {
    font-size: clamp(120px, 22vw, 320px);
    margin: 8vh auto 0;
    max-width: 1200px;
    text-align: center;
    line-height: 0.86;
}

.ltr {
    display: inline-block;
    position: relative;
    color: var(--mint);
    /* layered text shadow: drop = strawberry pink, outline = deep plum */
    text-shadow:
        6px 6px 0 var(--sherbet),
        -2px 0 0 var(--plum),
        2px 0 0 var(--plum),
        0 -2px 0 var(--plum),
        0 2px 0 var(--plum),
        -2px -2px 0 var(--plum),
        2px -2px 0 var(--plum),
        -2px 2px 0 var(--plum),
        2px 2px 0 var(--plum),
        7px 7px 0 var(--plum);
    transform: rotate(0deg);
    transition: transform 0.4s var(--ease-spring), color 0.6s ease;
}
.ltr::before {
    /* pearl shine */
    content: "";
    position: absolute;
    top: 8%;
    left: 12%;
    width: 22%;
    height: 22%;
    background: radial-gradient(ellipse at center, rgba(250,246,255,0.85) 0%, rgba(250,246,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.85;
    transform: rotate(-15deg);
}
.throwup .ltr:nth-child(odd)  { transform: rotate(-1.5deg); }
.throwup .ltr:nth-child(even) { transform: rotate(1.2deg); }
.throwup .ltr:nth-child(3n)   { transform: rotate(0.6deg); }

/* zone-specific tints for throwup letters */
.throwup--hero .ltr {
    color: var(--mint);
    text-shadow:
        6px 6px 0 var(--sherbet),
        -2px 0 0 var(--plum), 2px 0 0 var(--plum),
        0 -2px 0 var(--plum), 0 2px 0 var(--plum),
        -2px -2px 0 var(--plum), 2px -2px 0 var(--plum),
        -2px 2px 0 var(--plum), 2px 2px 0 var(--plum),
        7px 7px 0 var(--plum);
}

.throwup--quest .ltr {
    color: var(--mint);
}

/* graffiti accents */
.graffiti-accent { position: absolute; pointer-events: none; }

.star--a { width: 36px; height: 36px; top: -8%; left: 8%; animation: twinkle 3.6s ease-in-out infinite; }
.star--b { width: 28px; height: 28px; top: 18%; right: 6%; animation: twinkle 4.2s ease-in-out infinite 0.4s; }
.star--c { width: 44px; height: 44px; top: -16%; right: 12%; animation: twinkle 3.4s ease-in-out infinite 0.6s; }
.drip--a { width: 16px; height: 36px; bottom: -28px; left: 26%; }
.drip--b { width: 16px; height: 38px; bottom: -32px; left: 22%; }
.drip--c { width: 14px; height: 32px; bottom: -28px; right: 30%; }

@keyframes twinkle {
    0%, 100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
    50%      { opacity: 1;    transform: scale(1.18) rotate(8deg); }
}

/* =====================================================
   HERO TEXT (zone 1)
   ===================================================== */
.hero {
    position: relative;
    z-index: 4;
    text-align: center;
    padding-top: 4vh;
}
.hero__subtitle {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 2.2vw, 28px);
    color: var(--plum);
    margin: 4vh auto 0.6em;
    max-width: 36ch;
    line-height: 1.3;
}
.hero__byline {
    font-family: "Space Mono", monospace;
    font-size: 13px;
    color: var(--plum-soft);
    letter-spacing: 0.04em;
}

/* =====================================================
   ZONE HEADS / SUBTITLES / DIARY
   ===================================================== */

.zone__head {
    position: relative;
    z-index: 4;
    max-width: 38ch;
    margin: 4vh 0 6vh;
    padding-left: 2vw;
}
.zone__head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 0;
}

.zone__title {
    font-family: "Bagel Fat One", "Fredoka", sans-serif;
    font-weight: 400;
    font-size: clamp(48px, 7vw, 96px);
    color: var(--mint);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 0 0 0.2em;
    text-shadow:
        4px 4px 0 var(--sherbet),
        -1.5px 0 0 var(--plum), 1.5px 0 0 var(--plum),
        0 -1.5px 0 var(--plum), 0 1.5px 0 var(--plum),
        -1.5px -1.5px 0 var(--plum), 1.5px -1.5px 0 var(--plum),
        -1.5px 1.5px 0 var(--plum), 1.5px 1.5px 0 var(--plum),
        5px 5px 0 var(--plum);
}

.zone--asteroid .zone__title { color: var(--sherbet); }
.zone--outer    .zone__title { color: var(--pearl); }
.zone--goldback .zone__title { color: var(--gold); }

.zone__sub {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.8vw, 36px);
    color: var(--plum);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.zone__diary {
    position: relative;
    z-index: 4;
    max-width: 38ch;
    margin: 6vh 0 3vh 4vw;
    padding: 26px 30px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--plum);
    background: rgba(250, 246, 255, 0.72);
    border-radius: 28px 32px 36px 30px;
    box-shadow: 0 14px 40px -20px rgba(58, 46, 85, 0.3);
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
}
.zone__diary::before {
    /* word-balloon tail */
    content: "";
    position: absolute;
    bottom: -14px;
    left: 30px;
    width: 22px;
    height: 22px;
    background: rgba(250, 246, 255, 0.72);
    border-radius: 50% 50% 0 50%;
    transform: rotate(-12deg);
    box-shadow: 0 6px 12px -6px rgba(58, 46, 85, 0.25);
}
.zone__diary--center {
    margin: 6vh auto 3vh;
    text-align: center;
}
.zone__diary--center::before { left: 50%; transform: translateX(-50%) rotate(-12deg); }

/* =====================================================
   ISOMETRIC PLANET STICKERS
   ===================================================== */

.sticker-row {
    position: relative;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 4vw;
    margin: 4vh auto 0;
    max-width: 1300px;
    padding: 0 2vw;
}

.sticker {
    position: relative;
    flex: 0 1 280px;
    transform: rotate(var(--rot, 0deg));
}
.sticker--no-rot { transform: rotate(0deg); }

.sticker__card {
    position: relative;
    width: 100%;
    padding: 22px 22px 26px;
    background: rgba(250, 246, 255, 0.78);
    border-radius: 22px 26px 22px 28px;
    border: 1px solid rgba(250, 246, 255, 0.85);
    box-shadow:
        0 18px 40px -22px rgba(58, 46, 85, 0.4),
        inset 0 0 0 1px rgba(250,246,255,0.5);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    transition: transform 0.42s var(--ease-spring), box-shadow 0.42s ease;
    cursor: pointer;
    transform: scale(1) rotate(0deg);
    will-change: transform;
}

.sticker__card--big  { padding: 24px 24px 28px; }
.sticker__card--wide { padding: 24px 24px 28px; }

.sticker__art {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(2px 3px 0 rgba(58, 46, 85, 0.16));
}

.sticker__name {
    font-family: "Bagel Fat One", "Fredoka", sans-serif;
    font-weight: 400;
    font-size: 32px;
    color: var(--mint);
    margin: 0 0 0.18em;
    letter-spacing: -0.01em;
    text-shadow:
        3px 3px 0 var(--sherbet),
        -1px 0 0 var(--plum), 1px 0 0 var(--plum),
        0 -1px 0 var(--plum), 0 1px 0 var(--plum),
        4px 4px 0 var(--plum);
}

.sticker__caption {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--plum);
    margin: 0 0 0.4em;
    line-height: 1.35;
}

.sticker__mono {
    font-family: "Space Mono", monospace;
    font-size: 12px;
    color: var(--plum-soft);
    letter-spacing: 0.05em;
}

.sticker:hover .sticker__card,
.sticker.is-hover .sticker__card {
    transform: scale(1.18) rotate(var(--tilt, -3deg)) translateZ(0);
    box-shadow:
        0 26px 60px -22px rgba(58, 46, 85, 0.55),
        inset 0 0 0 1px rgba(250,246,255,0.6);
    z-index: 12;
}

.sticker__arrow {
    position: absolute;
    top: -10px;
    right: -28px;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--plum);
    background: var(--pearl);
    padding: 4px 10px;
    border-radius: 14px;
    border: 1.5px solid var(--plum);
    transform: rotate(8deg);
    box-shadow: 2px 2px 0 var(--plum);
    z-index: 5;
    pointer-events: none;
}
.sticker__arrow::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 22px;
    height: 14px;
    background:
        linear-gradient(transparent 6px, var(--plum) 6px, var(--plum) 8px, transparent 8px);
    transform: translateY(-50%) rotate(-12deg);
}
.sticker__arrow--right { left: auto; right: -32px; transform: rotate(-6deg); }
.sticker__arrow--down  { top: auto; bottom: -22px; right: 50%; transform: translateX(50%) rotate(-4deg); }

/* =====================================================
   ASTEROID FIELD (zone 3)
   ===================================================== */

.asteroid-field {
    position: relative;
    z-index: 3;
    width: 90vw;
    max-width: 1200px;
    height: 60vh;
    margin: 4vh auto;
    pointer-events: none;
}
.ast {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: scale(var(--s, 0.7));
    width: 80px;
    height: 70px;
    pointer-events: auto;
    animation: ast-drift var(--d, 9s) ease-in-out infinite;
    filter: drop-shadow(2px 3px 0 rgba(58,46,85,0.18));
}
.ast svg { width: 100%; height: auto; display: block; }
.ast em {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Space Mono", monospace;
    font-style: normal;
    font-size: 11px;
    color: var(--plum);
    background: var(--pearl);
    padding: 2px 8px;
    border-radius: 9px;
    border: 1px solid var(--plum);
    white-space: nowrap;
    opacity: 0.92;
}
@keyframes ast-drift {
    0%, 100% { transform: scale(var(--s, 0.7)) translate(0, 0) rotate(0deg); }
    25%      { transform: scale(var(--s, 0.7)) translate(6px, -4px) rotate(3deg); }
    50%      { transform: scale(var(--s, 0.7)) translate(-4px, 6px) rotate(-2deg); }
    75%      { transform: scale(var(--s, 0.7)) translate(8px, 2px) rotate(2deg); }
}

/* =====================================================
   SCATTERED SCRAPBOOK LAYOUT (zone 4)
   ===================================================== */

.scatter {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1200px;
    margin: 4vh auto 0;
    min-height: 760px;
    padding: 0 2vw;
}

.scatter__item {
    position: absolute;
    width: 22vw;
    min-width: 220px;
    max-width: 320px;
}

.scatter__item--mars     { top: 0;     left: 6%;  width: 22vw; min-width: 220px; max-width: 280px; }
.scatter__item--jupiter  { top: 40px;  left: 36%; width: 26vw; min-width: 260px; max-width: 340px; }
.scatter__item--saturn   { top: 320px; left: 10%; width: 30vw; min-width: 300px; max-width: 380px; }
.scatter__item--uranus   { top: 280px; right: 22%; width: 22vw; min-width: 220px; max-width: 280px; }
.scatter__item--neptune  { top: 60px;  right: 4%;  width: 22vw; min-width: 220px; max-width: 280px; }

@media (max-width: 900px) {
    .scatter { min-height: auto; display: flex; flex-direction: column; gap: 32px; align-items: center; }
    .scatter__item { position: static; width: 80%; max-width: 360px; }
}

/* =====================================================
   FINAL PIECE (zone 5 — goldback)
   ===================================================== */

.piece {
    position: relative;
    z-index: 4;
    text-align: center;
    margin: 8vh auto 4vh;
    max-width: 1100px;
    padding: 0 2vw;
    font-family: "Bagel Fat One", "Fredoka", sans-serif;
    line-height: 0.88;
    letter-spacing: -0.02em;
}
.piece__line--big   { font-size: clamp(56px, 9vw, 132px); }
.piece__line--small { font-size: clamp(80px, 13vw, 200px); margin-top: 0.06em; }

.piece .ltr {
    color: var(--gold);
    text-shadow:
        4px 4px 0 var(--sherbet),
        8px 8px 0 var(--cobalt),
        -2px 0 0 var(--plum), 2px 0 0 var(--plum),
        0 -2px 0 var(--plum), 0 2px 0 var(--plum),
        -2px -2px 0 var(--plum), 2px -2px 0 var(--plum),
        -2px 2px 0 var(--plum), 2px 2px 0 var(--plum),
        9px 9px 0 var(--plum);
}

.star--gold-a { width: 28px; height: 28px; top: 4%;  left: 8%;  animation: twinkle 3.4s ease-in-out infinite; }
.star--gold-b { width: 32px; height: 32px; top: 22%; right: 12%; animation: twinkle 4s   ease-in-out infinite 0.3s; }
.star--gold-c { width: 24px; height: 24px; bottom: 18%; left: 20%; animation: twinkle 3.8s ease-in-out infinite 0.6s; }
.sparkle--a   { width: 28px; height: 28px; top: 0;     right: 24%; animation: twinkle 3.2s ease-in-out infinite 0.2s; }
.sparkle--b   { width: 22px; height: 22px; bottom: 10%; right: 8%;  animation: twinkle 4.2s ease-in-out infinite 0.5s; }

.goldback__transmission {
    position: relative;
    z-index: 4;
    text-align: center;
    font-family: "Space Mono", monospace;
    font-size: 14px;
    color: var(--plum-soft);
    letter-spacing: 0.06em;
    margin: 4vh auto 1vh;
}
.goldback__diary {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 44ch;
    margin: 0 auto 4vh;
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: var(--plum);
    line-height: 1.6;
}
.goldback__diary em { color: var(--plum-soft); font-style: italic; }
.goldback__signoff {
    text-align: center;
    margin: 0 auto;
    z-index: 4;
    position: relative;
}
.goldback__sig {
    font-family: "Space Mono", monospace;
    font-size: 13px;
    color: var(--plum);
    background: var(--pearl);
    padding: 6px 14px;
    border-radius: 18px;
    border: 1.5px solid var(--plum);
    box-shadow: 2px 2px 0 var(--plum);
    display: inline-block;
    transform: rotate(-2deg);
}

/* =====================================================
   WAYFINDING ROCKET (drifts down right gutter)
   ===================================================== */

.wayfinder {
    position: fixed;
    top: 8vh;
    right: 24px;
    width: 72px;
    z-index: var(--z-rocket);
    pointer-events: none;
    transform: translateY(0);
    will-change: transform;
}
.wayfinder svg { display: block; filter: drop-shadow(2px 3px 0 rgba(58,46,85,0.22)); }

@keyframes rocket-bob {
    0%,100% { transform: translateY(0) rotate(-2deg); }
    50%     { transform: translateY(4px) rotate(2deg); }
}
.rocket-body {
    transform-origin: 40px 60px;
    animation: rocket-bob 2.6s ease-in-out infinite;
}

.exhaust {
    position: absolute;
    top: 92px;
    left: 8px;
    width: 60px;
    height: 60px;
    pointer-events: none;
}
.exhaust .puff {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,179,199,0.95), rgba(168,229,210,0.5) 70%, transparent);
    border: 1.2px solid var(--plum);
    opacity: 0.85;
    transform: translate(0, 0) scale(1);
    animation: puff-fall var(--puff-d, 1.8s) ease-out forwards;
}
@keyframes puff-fall {
    0%   { opacity: 0.95; transform: translate(0, 0) scale(0.6); }
    50%  { opacity: 0.7;  transform: translate(var(--puff-x, 4px), 26px) scale(1); }
    100% { opacity: 0;    transform: translate(var(--puff-x, 4px), 56px) scale(1.3); }
}

/* =====================================================
   SOUND TOGGLE
   ===================================================== */

.sound-toggle {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: var(--z-toggle);
    background: var(--pearl);
    border: 1.5px solid var(--plum);
    border-radius: 999px;
    padding: 8px 14px;
    font-family: "Space Mono", monospace;
    font-size: 12px;
    color: var(--plum);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 2px 2px 0 var(--plum);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sound-toggle:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--plum); }
.sound-toggle[data-active="true"] { background: var(--mint); }
.sound-icon { font-size: 14px; }

/* =====================================================
   STAMP-DOWN ENTRANCE (used by JS via .is-in)
   ===================================================== */

.sticker {
    opacity: 0;
    transform: rotate(var(--rot,0deg)) scale(0.6) translateY(28px);
    transition: opacity 0.6s ease, transform 0.7s var(--ease-spring);
}
.sticker.is-in {
    opacity: 1;
    transform: rotate(var(--rot,0deg)) scale(1) translateY(0);
}

.zone__diary, .hero__subtitle, .hero__byline,
.zone__head, .goldback__transmission, .goldback__diary, .goldback__signoff {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s var(--ease-spring);
}
.zone.is-active .zone__diary,
.zone.is-active .hero__subtitle,
.zone.is-active .hero__byline,
.zone.is-active .zone__head,
.zone.is-active .goldback__transmission,
.zone.is-active .goldback__diary,
.zone.is-active .goldback__signoff {
    opacity: 1;
    transform: translateY(0);
}

.throwup {
    opacity: 0;
    transition: opacity 1s ease;
}
.throwup.is-in { opacity: 1; }
.throwup .ltr {
    transform: translateY(20px) scale(0.6);
    opacity: 0;
    transition: transform 0.7s var(--ease-spring), opacity 0.5s ease;
}
.throwup.is-in .ltr {
    transform: translateY(0) scale(1);
    opacity: 1;
}
/* trace-stagger letters */
.throwup .ltr:nth-child(1)  { transition-delay: 0.05s; }
.throwup .ltr:nth-child(2)  { transition-delay: 0.10s; }
.throwup .ltr:nth-child(3)  { transition-delay: 0.15s; }
.throwup .ltr:nth-child(4)  { transition-delay: 0.20s; }
.throwup .ltr:nth-child(5)  { transition-delay: 0.25s; }
.throwup .ltr:nth-child(6)  { transition-delay: 0.30s; }
.throwup .ltr:nth-child(7)  { transition-delay: 0.35s; }
.throwup .ltr:nth-child(8)  { transition-delay: 0.40s; }
.throwup .ltr:nth-child(9)  { transition-delay: 0.45s; }
.throwup .ltr:nth-child(10) { transition-delay: 0.50s; }
.throwup .ltr:nth-child(11) { transition-delay: 0.55s; }
.throwup .ltr:nth-child(12) { transition-delay: 0.60s; }
.throwup .ltr:nth-child(13) { transition-delay: 0.65s; }
.throwup .ltr:nth-child(14) { transition-delay: 0.70s; }

.piece .ltr { transform: translateY(20px) scale(0.5); opacity: 0; transition: transform 0.7s var(--ease-spring), opacity 0.5s ease; }
.piece.is-in .ltr { transform: translateY(0) scale(1); opacity: 1; }
.piece .ltr:nth-child(1)  { transition-delay: 0.10s; }
.piece .ltr:nth-child(2)  { transition-delay: 0.16s; }
.piece .ltr:nth-child(3)  { transition-delay: 0.22s; }
.piece .ltr:nth-child(4)  { transition-delay: 0.28s; }
.piece .ltr:nth-child(5)  { transition-delay: 0.34s; }
.piece .ltr:nth-child(6)  { transition-delay: 0.40s; }
.piece .ltr:nth-child(7)  { transition-delay: 0.46s; }
.piece .ltr:nth-child(8)  { transition-delay: 0.52s; }

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 720px) {
    .frost-pane { inset: 4vh 3vw; border-radius: 28px; }
    .zone { padding: 6vh 6vw 10vh; }
    .throwup--hero { font-size: clamp(54px, 14vw, 120px); }
    .throwup--quest { font-size: clamp(110px, 28vw, 220px); }
    .sticker-row { gap: 28px; }
    .sticker { flex: 0 1 80%; }
    .asteroid-field { height: 70vh; }
    .ast em { font-size: 10px; padding: 2px 6px; }
    .wayfinder { right: 8px; width: 56px; }
    .wayfinder svg { width: 44px; height: 66px; }
    .zone-label, .tag-sig { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
}