:root {
    --cream: #FFF3D6;
    --tomato: #E84A2A;
    --pickle: #4E9F3D;
    --pink: #FF9DB2;
    --blueberry: #2D2A6E;
    --ink: #2A2118;
    --gold: #FFC83D;
    --teal: #23B7A7;
    --title: 'Bungee', 'Inter', sans-serif;
    --story: 'Fraunces', 'Lora', serif;
    --body: 'Nunito', sans-serif;
    --scribble: 'Gaegu', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--body);
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 200, 61, .35) 0 9px, transparent 10px),
        radial-gradient(circle at 86% 18%, rgba(255, 157, 178, .35) 0 12px, transparent 13px),
        linear-gradient(115deg, rgba(35, 183, 167, .18), transparent 34%),
        var(--cream);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(42, 33, 24, .14) 1px, transparent 1px);
    background-size: 18px 18px;
    mix-blend-mode: multiply;
    opacity: .28;
    z-index: 0;
}

.crumb-field span {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(42, 33, 24, .18);
    box-shadow: 1px 2px 0 rgba(255, 200, 61, .45);
    z-index: 1;
    pointer-events: none;
}

.tray-map {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 0 22px;
}

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 8vh 0;
    perspective: 1000px;
}

.tray-compartment {
    width: min(760px, 92vw);
    min-height: 520px;
    position: relative;
    padding: clamp(28px, 5vw, 56px);
    border: 5px solid var(--ink);
    border-radius: 42px;
    background: rgba(255, 243, 214, .92);
    box-shadow: 14px 18px 0 var(--blueberry), inset 0 0 0 10px rgba(255,255,255,.28);
    transform: rotate(var(--tilt, -2deg));
    overflow: hidden;
}

.tray-compartment::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 3px dashed rgba(42, 33, 24, .24);
    border-radius: 30px;
    pointer-events: none;
}

h1, h2 {
    font-family: var(--title);
    line-height: .9;
    margin: 0;
    letter-spacing: .02em;
    color: var(--blueberry);
    text-shadow: 4px 4px 0 var(--gold), 7px 7px 0 var(--ink);
}

h1 { font-size: clamp(3.9rem, 12vw, 8.5rem); max-width: 8ch; }
h2 { font-size: clamp(2.4rem, 8vw, 5.7rem); max-width: 9ch; }

.story {
    font-family: var(--story);
    font-size: clamp(1.18rem, 2.2vw, 1.65rem);
    line-height: 1.25;
    max-width: 540px;
    margin: 24px 0;
    color: var(--ink);
}

.scribble, .sticker, .napkin-cloud, .soy-river, .ants, .flag {
    font-family: var(--scribble);
    font-weight: 700;
}

.inventory {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(1.5deg);
    z-index: 10;
    width: 178px;
    padding: 14px;
    border: 4px solid var(--ink);
    border-radius: 22px;
    background: var(--gold);
    box-shadow: 8px 9px 0 var(--blueberry);
}

.inventory__title {
    font-family: var(--title);
    font-size: .72rem;
    margin-bottom: 8px;
}

.inventory a {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0;
    padding: 5px 7px;
    border: 2px solid var(--ink);
    border-radius: 99px;
    color: var(--ink);
    text-decoration: none;
    background: var(--cream);
    font-size: .84rem;
    font-weight: 900;
    transition: transform .2s ease, background .2s ease;
}

.inventory a.is-active { background: var(--pink); transform: translateX(-6px); }

.scroll-straw {
    position: fixed;
    left: 24px;
    top: 8vh;
    bottom: 8vh;
    width: 18px;
    z-index: 8;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background: repeating-linear-gradient(45deg, var(--teal) 0 13px, var(--cream) 13px 25px);
    box-shadow: 5px 5px 0 var(--ink);
    overflow: hidden;
}

.scroll-straw span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: rgba(232, 74, 42, .75);
}

.quest-token {
    position: fixed;
    left: 50%;
    top: 18%;
    width: 58px;
    height: 52px;
    z-index: 9;
    transform: translate(-50%, -50%);
    transition: filter .25s ease;
    filter: drop-shadow(5px 8px 0 rgba(42, 33, 24, .35));
}

.token-face {
    width: 100%;
    height: 100%;
    background: var(--cream);
    border: 4px solid var(--ink);
    border-radius: 48% 48% 42% 42%;
    position: relative;
    transform: rotate(45deg);
    animation: tokenWake 1.8s ease-in-out infinite;
}

.token-face::before, .token-face::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
    top: 20px;
}
.token-face::before { left: 17px; }
.token-face::after { right: 17px; }
.token-face i {
    position: absolute;
    left: 19px;
    top: 30px;
    width: 16px;
    height: 8px;
    border-bottom: 3px solid var(--ink);
    border-radius: 0 0 30px 30px;
}
.token-face b {
    position: absolute;
    right: -5px;
    bottom: 8px;
    width: 23px;
    height: 18px;
    background: var(--blueberry);
    border: 3px solid var(--ink);
    border-radius: 4px;
}

.sauce-trail {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(720px, 92vw);
    height: 700vh;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
}

.trail-shadow, .trail-draw {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.trail-shadow { stroke: rgba(42, 33, 24, .18); stroke-width: 5; stroke-dasharray: 1 13; }
.trail-draw { stroke: var(--tomato); stroke-width: 7; stroke-dasharray: 1 17; filter: drop-shadow(2px 3px 0 var(--ink)); }

.hero-ticket {
    --tilt: -3deg;
    background: linear-gradient(100deg, var(--cream), #fff8e5 56%, rgba(255, 200, 61, .4));
}

.ticket-stamp {
    display: inline-block;
    border: 3px solid var(--tomato);
    color: var(--tomato);
    font-family: var(--title);
    padding: 7px 12px;
    transform: rotate(-8deg);
    margin-bottom: 18px;
}

.noon-clock {
    position: absolute;
    right: 52px;
    top: 50px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 6px solid var(--ink);
    background: var(--pink);
    display: grid;
    place-items: center;
    box-shadow: 8px 8px 0 var(--teal);
}
.noon-clock span {
    position: absolute;
    width: 6px;
    height: 54px;
    background: var(--ink);
    transform-origin: bottom;
    bottom: 50%;
    animation: clockSweep 8s linear infinite;
}
.noon-clock em { font-family: var(--title); font-style: normal; color: var(--cream); text-shadow: 2px 2px 0 var(--ink); }

.fork-compass {
    position: absolute;
    right: 88px;
    bottom: 66px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px dashed var(--ink);
    background: rgba(35, 183, 167, .28);
}
.fork-compass .fork, .fork-compass .spoon {
    position: absolute;
    left: 55px;
    top: 16px;
    width: 10px;
    height: 88px;
    background: var(--ink);
    border-radius: 10px;
}
.fork-compass .fork { transform: rotate(44deg); }
.fork-compass .spoon { transform: rotate(-44deg); }
.fork-compass strong { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-family: var(--title); color: var(--tomato); }

.napkin-cloud, .sticker, .soy-river, .ants {
    position: absolute;
    padding: 14px 18px;
    border: 3px solid var(--ink);
    border-radius: 18px;
    background: var(--pink);
    box-shadow: 6px 7px 0 var(--ink);
    font-size: 1.35rem;
}
.cloud-a { left: 7%; bottom: 14%; transform: rotate(6deg); }
.note { right: 8%; top: 18%; background: var(--gold); transform: rotate(9deg); }
.helmet-pea { left: 8%; top: 20%; background: var(--pickle); color: var(--cream); transform: rotate(-10deg); }

.soup-bowl { --tilt: 2deg; background: radial-gradient(circle at 66% 60%, var(--tomato) 0 24%, transparent 25%), var(--cream); }
.flag { display:inline-block; background: var(--tomato); color: var(--cream); border: 3px solid var(--ink); padding: 5px 12px; transform: rotate(8deg); }
.lava-pool { position: absolute; right: 48px; bottom: 42px; width: 310px; height: 230px; border: 5px solid var(--ink); border-radius: 48%; background: radial-gradient(circle, var(--gold) 0 9%, transparent 10%), var(--tomato); box-shadow: inset 0 0 0 14px rgba(255, 200, 61, .45); }
.lava-pool span { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); animation: bubble 3s ease-in-out infinite; }
.lava-pool span:nth-child(1) { left: 42px; bottom: 38px; }
.lava-pool span:nth-child(2) { left: 112px; bottom: 82px; animation-delay: .4s; }
.lava-pool span:nth-child(3) { left: 190px; bottom: 52px; animation-delay: .9s; }
.lava-pool span:nth-child(4) { left: 236px; bottom: 128px; animation-delay: 1.3s; }
.lava-pool span:nth-child(5) { left: 66px; bottom: 146px; animation-delay: 1.8s; }
.pea-steps { position: absolute; left: 76px; bottom: 62px; display:flex; gap: 18px; transform: rotate(-16deg); }
.pea-steps i { width: 34px; height: 34px; border-radius: 50%; background: var(--pickle); border: 3px solid var(--ink); animation: peaHop 2.2s ease-in-out infinite; }
.pea-steps i:nth-child(even) { animation-delay: .25s; }

.rice-pass { --tilt: -4deg; background: linear-gradient(160deg, var(--cream), rgba(35,183,167,.26)); }
.mountains { position: absolute; right: 54px; bottom: 70px; width: 360px; height: 260px; }
.peak { position:absolute; bottom: 0; width: 170px; height: 170px; background: #fffaf0; border: 5px solid var(--ink); transform: rotate(45deg); border-radius: 24px 12px 22px 12px; box-shadow: 8px 8px 0 var(--teal); animation: wobble 2.8s ease-in-out infinite; }
.peak-one { left: 0; }
.peak-two { left: 100px; bottom: 42px; animation-delay: .35s; }
.peak-three { right: 0; transform: rotate(45deg) scale(.78); animation-delay: .7s; }
.peak::after { content:""; position:absolute; left: 28px; top: 28px; width: 45px; height: 45px; background: var(--cream); border-radius: 50%; }
.rice-snow span { position:absolute; width: 12px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid rgba(42,33,24,.25); animation: snow 4s linear infinite; }
.rice-snow span:nth-child(1) { left: 58%; top: 22%; }
.rice-snow span:nth-child(2) { left: 70%; top: 14%; animation-delay: .8s; }
.rice-snow span:nth-child(3) { left: 82%; top: 28%; animation-delay: 1.4s; }
.rice-snow span:nth-child(4) { left: 55%; top: 44%; animation-delay: 2s; }
.rice-snow span:nth-child(5) { left: 75%; top: 48%; animation-delay: 2.8s; }
.rice-snow span:nth-child(6) { left: 90%; top: 42%; animation-delay: 3.2s; }

.noodle-maze { --tilt: 3deg; background: linear-gradient(150deg, rgba(255,200,61,.36), var(--cream)); }
.noodle-lines { position: absolute; right: 46px; bottom: 60px; width: 390px; height: 270px; border: 5px solid var(--ink); border-radius: 32px; background: rgba(255,157,178,.24); overflow: hidden; }
.noodle-lines span { position:absolute; left: -30px; width: 450px; height: 54px; border: 9px solid var(--gold); border-color: var(--gold) transparent transparent transparent; border-radius: 50%; filter: drop-shadow(2px 3px 0 var(--ink)); transition: transform .8s cubic-bezier(.2,1.4,.36,1), border-color .4s ease; }
.noodle-lines span:nth-child(1) { top: 30px; transform: rotate(18deg); }
.noodle-lines span:nth-child(2) { top: 82px; transform: rotate(-12deg); }
.noodle-lines span:nth-child(3) { top: 126px; transform: rotate(25deg); }
.noodle-lines span:nth-child(4) { top: 176px; transform: rotate(-22deg); }
.noodle-lines span:nth-child(5) { top: 216px; transform: rotate(9deg); }
.noodle-maze.is-untangled .noodle-lines span { transform: rotate(0deg) translateX(20px); border-color: var(--teal) transparent transparent transparent; }
.ingredient-button { font-family: var(--title); color: var(--ink); background: var(--gold); border: 4px solid var(--ink); border-radius: 999px; padding: 13px 20px; box-shadow: 5px 6px 0 var(--ink); cursor: pointer; }
.soy-river { right: 10%; bottom: 12%; background: var(--blueberry); color: var(--cream); transform: rotate(-8deg); }

.sandwich-bridge { --tilt: -2deg; background: linear-gradient(130deg, var(--cream), rgba(78,159,61,.18)); }
.sandwich-stack { position: absolute; right: 50px; bottom: 65px; width: 360px; height: 240px; }
.sandwich-stack span { position: absolute; left: 0; right: 0; height: 52px; border: 5px solid var(--ink); border-radius: 22px; transition: transform .55s cubic-bezier(.2,1.5,.35,1); }
.bread { background: #d99846; }
.bread.top { top: 28px; transform-origin: left center; }
.cheese { top: 82px; background: var(--gold); }
.lettuce { top: 136px; background: var(--pickle); border-radius: 50% 20% 55% 15%; }
.bread.bottom { top: 190px; }
.sandwich-bridge:hover .bread.top, .sandwich-bridge.is-open .bread.top { transform: rotate(-18deg) translateY(-26px); }
.sandwich-bridge:hover .cheese, .sandwich-bridge.is-open .cheese { transform: translateX(26px); }
.utensil-bridge { position: absolute; left: 5%; bottom: 18%; width: 280px; height: 28px; background: var(--ink); border-radius: 999px; transform: rotate(-19deg); box-shadow: 0 -14px 0 var(--teal), 0 14px 0 var(--cream); }

.snack-cave { --tilt: 4deg; background: linear-gradient(145deg, var(--blueberry) 0 34%, var(--cream) 35%); color: var(--ink); }
.snack-cave h2 { color: var(--pink); text-shadow: 4px 4px 0 var(--gold), 7px 7px 0 var(--ink); }
.cave-mouth { position:absolute; right: 58px; bottom: 54px; width: 360px; height: 260px; border: 6px solid var(--ink); border-radius: 48% 48% 20px 20px; background: radial-gradient(circle at 50% 80%, var(--ink) 0 38%, #6b583f 39%); overflow:hidden; }
.cave-mouth i { position:absolute; top: 0; width: 42px; height: 100px; background: var(--gold); border: 4px solid var(--ink); clip-path: polygon(0 0,100% 0,50% 100%); animation: crumbDrift 3s ease-in-out infinite; }
.cave-mouth i:nth-child(1){ left: 32px; }.cave-mouth i:nth-child(2){ left: 112px; animation-delay:.3s }.cave-mouth i:nth-child(3){ left: 202px; animation-delay:.6s }.cave-mouth i:nth-child(4){ left: 292px; animation-delay:.9s }
.coin { position:absolute; width: 44px; height: 44px; border-radius:50%; background: #f27f2f; border:4px solid var(--ink); bottom: 32px; animation: coinGlint 2s ease-in-out infinite; }
.coin-one{ left: 106px; }.coin-two{ left: 168px; animation-delay:.4s }.coin-three{ left: 226px; animation-delay:.8s }
.ants { left: 8%; top: 17%; background: var(--cream); transform: rotate(7deg); }

.dessert-room { --tilt: -1deg; background: radial-gradient(circle at 68% 52%, rgba(255,157,178,.55) 0 24%, transparent 25%), var(--cream); }
.dessert-boss { position:absolute; right: 80px; bottom: 85px; width: 270px; height: 270px; animation: bossBounce 2.5s ease-in-out infinite; }
.cupcake { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:155px; height:148px; background: linear-gradient(var(--pink) 0 48%, var(--gold) 49%); border:5px solid var(--ink); border-radius: 80px 80px 24px 24px; box-shadow: 10px 12px 0 var(--blueberry); }
.cupcake::before, .cupcake::after { content:""; position:absolute; width:13px; height:13px; background:var(--ink); border-radius:50%; top:55px; }
.cupcake::before{ left:48px; }.cupcake::after{ right:48px; }
.dessert-boss i { position:absolute; left:50%; top:50%; width:18px; height:38px; border-radius:10px; background:var(--teal); border:3px solid var(--ink); transform: rotate(calc(var(--r) * 1deg)) translateY(-116px); transform-origin: 0 0; animation: sprinkleOrbit 4s linear infinite; }
.dessert-boss i:nth-child(2){ --r:0; background:var(--tomato); }.dessert-boss i:nth-child(3){ --r:60; background:var(--gold); }.dessert-boss i:nth-child(4){ --r:120; background:var(--pickle); }.dessert-boss i:nth-child(5){ --r:180; background:var(--pink); }.dessert-boss i:nth-child(6){ --r:240; background:var(--teal); }.dessert-boss i:nth-child(7){ --r:300; background:var(--cream); }
.receipt { width: 300px; margin-top: 34px; padding: 22px; border: 4px solid var(--ink); background: #fffaf0; box-shadow: 7px 8px 0 var(--tomato); transform: rotate(3deg); font-family: var(--scribble); font-size: 1.25rem; }
.receipt strong { display:block; font-family:var(--title); color:var(--tomato); font-size:1.1rem; }
.receipt span { display:block; border-top:2px dashed rgba(42,33,24,.35); padding-top:8px; margin-top:8px; }

.scene .tray-compartment { opacity: .55; transform: translateY(45px) rotate(var(--tilt)); transition: opacity .7s ease, transform .7s cubic-bezier(.19,1,.22,1); }
.scene.is-current .tray-compartment { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }

@keyframes tokenWake { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(-8px); } }
@keyframes clockSweep { to { transform: rotate(360deg); } }
@keyframes bubble { 0%,100% { transform: translateY(0) scale(.85); } 50% { transform: translateY(-36px) scale(1.08); } }
@keyframes peaHop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-15px); } }
@keyframes wobble { 0%,100% { transform: rotate(45deg); } 50% { transform: rotate(40deg) translate(-5px, 5px); } }
@keyframes snow { from { transform: translateY(-20px) rotate(0); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(180px) rotate(180deg); opacity: 0; } }
@keyframes crumbDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes coinGlint { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(25deg) scale(1.13); } }
@keyframes bossBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes sprinkleOrbit { to { rotate: 360deg; } }

@media (max-width: 820px) {
    .inventory { display: none; }
    .scroll-straw { left: 8px; width: 12px; }
    .tray-compartment { min-height: 620px; padding-top: 42px; }
    .noon-clock, .fork-compass { transform: scale(.75); transform-origin: right top; }
    .lava-pool, .mountains, .noodle-lines, .sandwich-stack, .cave-mouth, .dessert-boss { right: 22px; transform: scale(.72); transform-origin: right bottom; }
    .quest-token { width: 48px; height: 44px; }
}