:root { --ink:#405747; --cream:#f5f4df; }
body { background:#dce7d3; background-image:radial-gradient(ellipse at 18% 15%,#f5f4df 0,transparent 45%),radial-gradient(ellipse at 90% 90%,#afc9a6 0,transparent 55%); }
.phone { background:#f5f4df; box-shadow:0 20px 60px #435e3f33; }
.title-wrap h1 { color:#47654d; letter-spacing:2px; }
.eyebrow { color:#8c9e75; letter-spacing:1.5px; }
.hud { background:#fffef0; border-color:#dedfc4; }
.stat strong { color:#58735a; }
.notice { background:#e6edcf; }
.notice b { color:#85935d; }
.notice div span { color:#4f6b4a; }
.notice-dot { background:#95ad6b; box-shadow:0 0 0 4px #d6e3b6; }
.factory { background-color:#edf0d9; background-image:radial-gradient(ellipse at 15% 72%,#bfd1aa66,transparent 45%),linear-gradient(#a9be8f2e 1px,transparent 1px),linear-gradient(90deg,#a9be8f2e 1px,transparent 1px); background-size:100% 100%,45px 45px,45px 45px; background-repeat:no-repeat,repeat,repeat; transition:background-color 1s; }
.factory.rescue-success { background-color:#deedbd; }
.window { border-color:#758d66; background:linear-gradient(#d9ece0 0 67%,#bad4ac 67%); box-shadow:inset 0 0 0 3px #f5f4df,0 5px 0 #cbd3b5; }
.window-frame { border-color:#8fa67b; }
.hill { background:#a5c38e; }
.tag-a { background:#acbf82; color:#4b6841; }
.tag-b { background:#e6cc86; color:#8d7f45; }
.belt { background:#91a080; border-color:#65795d; box-shadow:0 9px 0 #c3c5a5,0 12px 0 #a8b293; }
.belt-front { background:#7f9574; }
.belt-seams { background:repeating-linear-gradient(90deg,transparent 0 calc(var(--cookie-spacing,88px)/2 - 2px),#546b50 calc(var(--cookie-spacing,88px)/2 - 2px) calc(var(--cookie-spacing,88px)/2 + 2px),transparent calc(var(--cookie-spacing,88px)/2 + 2px) var(--cookie-spacing,88px)); }
.belt-label { color:#bdc99f; font-size:7px; }
.rollers i { background:#d9dfb9; }
.machine { background:#91a785; border-color:#5f775b; color:#fbf9dc; box-shadow:0 7px 0 #bbc49f; }
.machine .slot { background:#647950; border-color:#beca9c; border-radius:50%; }
.slot i { background:#aecb82; border-radius:0 80% 0 80%; }
.machine-a:after { content:''; position:absolute; width:25px; height:13px; left:8px; bottom:15px; background:#b4cc8b; border:1.5px solid #668652; border-radius:0 90% 0 90%; transform:rotate(-25deg); }
.floor-tile { border-color:#bfd19d; border-radius:70% 0 70% 0; }
.qc-rabbit .ear { background:#d9e8aa; border-color:#697e50; }
.qc-rabbit .ear:after { content:''; position:absolute; left:50%; top:9px; bottom:8px; width:1px; background:#9eb774; transform:rotate(-8deg); }
.rabbit-head,.rabbit-body { background:#faf3d5; border-color:#74815c; }
.coat { background:#b8cf8b; border-color:#8eaa68; border-radius:0 75% 15% 75%; }
.badge { color:#f8f7dd; background:#7a9d62; }
.clipboard { background:#adbe83; border-color:#6b8156; border-radius:5px 14px 5px 14px; }
.clipboard:after { content:'✿'; position:absolute; inset:8px 0; text-align:center; color:#fff1ba; font-size:23px; }
.clipboard i { opacity:0; }
.clipboard span { background:#ecedc3; border-color:#758a59; }
.rabbit-speech,.rabbit-speech:after { background:#faf9e2; border-color:#a7bc8c; color:#6b8951; }
.belt-items .cookie { background:transparent!important; border:0; box-shadow:none; border-radius:0; padding:0; background-image:url('assets/art/seed-good.svg')!important; background-size:contain!important; background-repeat:no-repeat!important; }
.belt-items .cookie.crack { background-image:url('assets/art/seed-crack.svg')!important; }
.belt-items .cookie.stamp { background-image:url('assets/art/seed-stamp.svg')!important; }
.belt-items .cookie.sad { background-image:url('assets/art/seed-sad.svg')!important; }
.belt-items .cookie:before,.belt-items .cookie:after,.belt-items .cookie .face { display:none; }
.legend .cookie { border:0; border-radius:0; width:19px; height:19px; background:transparent url('assets/art/seed-good.svg') center/contain; color:transparent; }
.legend .cookie.bad-cookie { background-image:url('assets/art/seed-crack.svg'); }
.legend .cookie:before { display:none; }
.bottom-panel { grid-template-columns:1fr 96px; border-color:#d6dfbd; }
.rescue-progress small { color:#82936d; font-size:8px; }
.rescue-track { background:#dde4c6; }
.rescue-track i { background:linear-gradient(90deg,#b8cc7f,#7ba26b); }
.modal { background:#fffef0; box-shadow:0 12px 0 #c7cfac,0 20px 45px #364f3940; }
.modal:before { border-color:#d4dfb4; }
.modal h2 { color:#4d714d; font-size:21px; }
.modal-art { width:145px; height:126px; margin-top:-15px; }
.modal p:not(.modal-kicker) { color:#7c8a6b; }
.modal-kicker { color:#9ba979; letter-spacing:2px; }
.modal .result-stats { color:#8d9364; }
.best-score { background:#eef1dd; color:#899875; }
#startBtn { background:#95b478; box-shadow:0 4px 0 #6d8d56; }
#startBtn:active { box-shadow:0 1px 0 #6d8d56; }
.outcome-banner { background:#fffde8; color:#6b8d4d; border-color:#b7cd8f; }
.rescue-failure .outcome-banner { color:#8c8263; border-color:#bfba96; }
.packing-crate { height:85px; }
.crate-back { border-radius:65% 65% 45% 45%; background:#a2b083; border-color:#71845b; }
.crate-front { border-radius:0 0 65% 65%; background:#c6d3a2; border-color:#71845b; color:#6e8459; height:38px; font-size:8px; }
.crate-lid { left:0; width:108px; height:35px; border-color:#71845b; background:#a8c28a; border-radius:90% 90% 10% 10%; }
.packed-cake { width:112px; height:100px; left:-2px; }
.packing-puff { color:#dce8b2; }
.rescue-failure .rescue-confetti { display:none; }
.rescue-confetti i { color:#efcb79; }
footer { color:#91a17b; letter-spacing:1px; }
.spring-garden { position:absolute; inset:0; pointer-events:none; z-index:1; }
.spring-garden i { position:absolute; bottom:2%; left:19%; height:38px; width:4px; border-radius:10px; background:#9eaa7d; transform-origin:center bottom; transform:scaleY(.35); opacity:.45; transition:transform .6s,background .6s,opacity .6s; }
.spring-garden i:before,.spring-garden i:after { content:''; position:absolute; width:20px; height:11px; border-radius:0 85% 0 85%; background:#b0b98f; border:1px solid #8e9e70; top:10px; left:-18px; transform:rotate(15deg); }
.spring-garden i:after { left:3px; top:1px; transform:rotate(-80deg); }
.spring-garden i:nth-child(2) {left:32%;height:48px;bottom:4%;}
.spring-garden i:nth-child(3) {left:48%;height:40px;bottom:2%;}
.spring-garden i:nth-child(4) {left:65%;height:55px;bottom:4%;}
.spring-garden i:nth-child(5) {left:82%;height:43px;bottom:3%;}
.spring-garden i:nth-child(6) {left:92%;height:65px;bottom:1%;}
.spring-garden i:nth-child(7) {left:60%;height:28px;bottom:41%;}
.spring-garden i:nth-child(8) {left:81%;height:32px;bottom:35%;}
.spring-garden i.awakened { transform:scaleY(1); opacity:1; background:#83a068; }
.spring-garden i.awakened:before,.spring-garden i.awakened:after { background:#9dbe71; border-color:#789a57; }
.rescue-success .spring-garden i:after { width:17px; height:17px; left:-7px; top:-8px; border-radius:50%; border:4px solid #f1ce77; background:#a1af63; box-shadow:7px 0 #f4db97,-7px 0 #f4db97,0 7px #f4db97,0 -7px #f4db97; transform:none; }
.rescue-success .spring-garden i { animation:spring-sway 2s ease-in-out infinite alternate; }
.rescue-failure .spring-garden { filter:saturate(.25); }
@keyframes spring-sway { to {transform:rotate(7deg);} }
@media(max-height:730px) { .modal-art {height:90px;} }
@media(prefers-reduced-motion:reduce) { .spring-garden i {transition:none;} .rescue-success .spring-garden i {animation:none;} }
#soundBtn[aria-pressed="true"] { opacity:.55; }

/* Spring nursery: open garden, wooden seed channels, living flower beds. */
body { background-color:#d5e4cf; background-image:radial-gradient(ellipse at 15% 5%,#fff6df,transparent 55%),radial-gradient(ellipse at 95% 90%,#a8c8aa,transparent 65%); }
.phone { background:#f8f5e4; }
.topbar { background:linear-gradient(#f9f6e6,#f8f5e4); }
.title-wrap h1 { color:#355f50; letter-spacing:2px; }
.hud { border-color:#dce3c5; box-shadow:0 3px 0 #e0e5c9; }
.factory { isolation:isolate; background:#dce7bc url('assets/art/spring-garden.svg') center/100% 100% no-repeat; border-top:1px solid #d2debc; transition:filter .8s; }
.factory::before { content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 66% 15%,#fff9bdbb,transparent 65%); opacity:calc(var(--growth,0) * .8); pointer-events:none; transition:opacity .6s; }
.factory .window,.factory .machine-b,.factory .floor-tile { display:none; }
.factory .belt { left:-12.5%; width:125%; height:68px; border:3px solid #927857; border-radius:18px; background:linear-gradient(#f5dfab 0 7%,#dfc797 7% 15%,#e9d7ad 15% 84%,#c6a879 84% 94%,#eed6a2 94%); box-shadow:0 5px 0 #b3946d,0 9px 0 #7b8f6440,inset 0 0 0 2px #f9e5bb; opacity:1; }
.factory .belt-back { --belt-angle:10deg; top:27%; }
.factory .belt-front { --belt-angle:-10deg; top:65%; height:72px; }
.factory .belt-seams { inset:12px 0; opacity:.42; background:repeating-linear-gradient(90deg,transparent 0 calc(var(--cookie-spacing,88px)/2 - 1px),#a5875c calc(var(--cookie-spacing,88px)/2 - 1px) calc(var(--cookie-spacing,88px)/2 + 1px),transparent calc(var(--cookie-spacing,88px)/2 + 1px) var(--cookie-spacing,88px)); }
.factory .belt-slot-marks { display:block; position:absolute; left:0; right:0; bottom:1px; height:5px; opacity:.5; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='5'%3E%3Cpath d='m18 0 4 2.5-4 2.5' fill='none' stroke='%23927857' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x; pointer-events:none; }
.factory .belt-front .belt-slot-marks { transform:scaleX(-1); }
.factory .rollers { display:none; }
.factory .belt-items .cookie { width:46px; height:46px; filter:drop-shadow(0 3px 1px #8b79522b); }
.factory .belt-items .tutorial-target { filter:drop-shadow(0 0 6px #fff2a1); }
.factory .qc-rabbit { left:4%; top:40%; transform:scale(.78) rotate(-4deg); transform-origin:top left; }
.factory .rabbit-speech { left:3%; top:calc(40% - 28px); padding:5px 8px; font-size:9px; border-color:#a9bd8e; box-shadow:0 2px 0 #90a36b20; }
.factory .machine-a { right:5%; top:9%; width:40px; height:60px; border:0; border-radius:0; background:none; box-shadow:none; padding:0; transform:rotate(10deg); pointer-events:none; }
.factory .machine-a::before { content:''; position:absolute; left:19px; top:20px; width:3px; height:38px; background:#87a477; border-radius:3px; }
.factory .machine-a::after { left:2px; bottom:12px; width:19px; height:10px; background:#b2cc92; border-color:#8da86f; }
.factory .machine-light { position:absolute; left:10px; top:3px; width:21px; height:21px; margin:0; border:2px solid #a58f64; background:#f0c778; box-shadow:8px 0 0 -2px #f5deac,-8px 0 0 -2px #f5deac,0 8px 0 -2px #f5deac,0 -8px 0 -2px #f5deac; }
.factory[data-mood=hopeful] .machine-light { background:#e6cf7b; border-color:#a5b278; }
.factory .spring-garden { z-index:1; }
.factory .spring-garden i { bottom:1%; left:17%; height:44px; width:3px; opacity:.55; background:#91a572; }
.factory .spring-garden i:nth-child(2) { left:31%; height:53px; bottom:3%; }
.factory .spring-garden i:nth-child(3) { left:48%; height:40px; bottom:1%; }
.factory .spring-garden i:nth-child(4) { left:68%; height:58px; bottom:4%; }
.factory .spring-garden i:nth-child(5) { left:84%; height:43px; bottom:2%; }
.factory .spring-garden i:nth-child(6) { left:94%; height:60px; bottom:2%; }
.factory .spring-garden i:nth-child(7) { left:61%; height:35px; bottom:42%; }
.factory .spring-garden i:nth-child(8) { left:76%; height:45px; bottom:41%; }
.factory .spring-garden i.awakened { opacity:1; background:#719b59; }
.factory .spring-garden i.awakened::before { background:#90b46c; }
.factory .spring-garden i.awakened:nth-child(even)::after { width:13px; height:13px; left:-5px; top:-5px; border:3px solid #e6b974; border-radius:50%; background:#f8e6a2; box-shadow:5px 0 #fff0ca,-5px 0 #fff0ca,0 5px #fff0ca,0 -5px #fff0ca; transform:none; }
.factory.rescue-success { background-color:#dce7bc; }
.factory.rescue-success::before { opacity:1; }
.factory.rescue-failure { filter:saturate(.65); }
.factory .packing-stage { left:3%; bottom:4%; }
.factory .crate-back { background:#a6bd83; border-color:#718b5c; border-radius:70% 70% 40% 40%; }
.factory .crate-front { height:28px; background:repeating-linear-gradient(80deg,#b7cd94 0 18px,#a9c288 19px 21px,#b7cd94 22px 39px); border-color:#718b5c; border-radius:0 0 55% 55%; font-size:0; }
.factory .crate-lid { background:#a4c181; border-radius:80% 80% 10% 10%; border-color:#718b5c; }
.factory .outcome-banner { top:7%; font-size:15px; padding:10px 6px; box-shadow:0 4px 0 #6e855717; }
.factory.rescue-success .qc-rabbit { animation-name:garden-celebrate; }
@keyframes garden-celebrate { 50% { transform:translateY(-12px) scale(.78) rotate(2deg); } }
@media(max-height:650px) { .factory .qc-rabbit { top:42%; transform:scale(.6) rotate(-4deg); } .factory .rabbit-speech { top:calc(42% - 25px); } }
@media(prefers-reduced-motion:reduce) { .factory,.factory::before { transition:none; } .factory.rescue-success .qc-rabbit { animation:none; } }