#picnic-screen{max-width:1200px;margin:auto;padding:8px 12px 20px}.picnic-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.picnic-heading h1{margin:0;color:#76519b;font-size:clamp(25px,3vw,38px)}.picnic-heading button,#picnic-finish{border:3px solid white;border-radius:22px;padding:12px 19px;background:linear-gradient(#fff5cc,#ffdb83);color:#624377;font-weight:900;box-shadow:0 5px 0 #c7a76a;font-size:17px;min-height:52px}.picnic-scene{position:relative;isolation:isolate;aspect-ratio:1.75;min-height:360px;max-height:620px;background-size:cover;background-position:center;border:5px solid #fffdf1;border-radius:30px;overflow:hidden;box-shadow:0 9px 0 #93b6a2,0 16px 28px #38795322}.picnic-place{position:absolute;left:50%;top:3%;transform:translateX(-50%);padding:8px 22px;background:#fff8e5eb;border:2px solid white;border-radius:40px;color:#52644b;font-weight:900;white-space:nowrap;box-shadow:0 4px 8px #353e2822;z-index:4}.picnic-friend{position:absolute;top:7%;left:13%;width:29%;height:70%;border:0;background:transparent;padding:0;box-shadow:none!important;touch-action:manipulation;z-index:3;opacity:1!important;cursor:pointer}.picnic-friend.second{left:58%}.picnic-model{position:absolute;inset:0;display:block;filter:drop-shadow(0 10px 5px #57412244)}.picnic-model svg{width:100%;height:100%;overflow:visible}.picnic-friend:disabled{filter:none}.picnic-model .lisa-character-idle{animation:picnic-breathe 3.8s ease-in-out infinite;transform-origin:50% 90%}.picnic-friend.second .lisa-character-idle{animation-delay:-1.4s}.picnic-mouth{position:absolute;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid transparent;border-radius:50%;pointer-events:none;display:grid;place-items:center;transition:background .18s,box-shadow .18s,border-color .18s}.picnic-mouth>span{opacity:0;color:#f695a4;font-size:27px}.picnic-feeding .picnic-mouth{border-color:#fffbd3;background:#ffea8830;box-shadow:0 0 0 7px #ffe18144,0 0 22px #fff8b3;animation:picnic-target 1.2s ease-in-out infinite}.picnic-over .picnic-mouth{border-color:#efffe2;box-shadow:0 0 0 9px #b5ffb666,0 0 30px #baff9a;background:#d6ff9633}.picnic-friend-name{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);background:#fff9ebed;border:2px solid white;border-radius:30px;padding:3px 14px;color:#66497a;font-size:clamp(13px,1.6vw,19px);font-weight:900}.picnic-hearts{position:absolute;bottom:-2%;left:0;width:100%;font-size:19px;color:#da5273;text-shadow:0 1px white;letter-spacing:3px}.picnic-foods{position:absolute;z-index:6;bottom:2%;left:4%;right:4%;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;padding:10px;border:3px solid #fff9dc;border-radius:30px;background:linear-gradient(#fff9e9ee,#edcca5ed);box-shadow:0 6px 0 #9c6b42,0 14px 22px #49362144}.picnic-food{position:relative;aspect-ratio:1;border:2px solid #fff9e9;border-radius:50%;padding:0;background:radial-gradient(ellipse at 40% 25%,#fff,#f3eadb 65%,#ceb995 72%,#fff4dc 78%);box-shadow:0 4px 2px #88614344;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s,opacity .2s;min-width:0}.picnic-food img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #62472e44)}.picnic-food.selected{outline:4px solid #e5ae44;transform:translateY(-6px)}.picnic-food.lifting img{opacity:.25}.picnic-food.eaten img{opacity:0}.picnic-food.eaten:after{content:'✓';color:#a0b78e;font-size:23px}.picnic-food:disabled{opacity:.65}.picnic-drag{position:fixed;z-index:10020;width:clamp(75px,10vw,120px);height:clamp(75px,10vw,120px);pointer-events:none;transform:translate(-50%,-50%) rotate(-7deg);filter:drop-shadow(0 14px 9px #533e4c66);will-change:left,top,transform}.picnic-drag img{width:100%;height:100%;object-fit:contain}.picnic-bite{transition:left .23s ease-out,top .23s ease-out;animation:picnic-nibble 1.15s ease-in-out forwards}.picnic-bite.sipping{animation-name:picnic-sip}.picnic-eating .picnic-model{animation:picnic-chew .22s ease-in-out 5;transform-origin:50% 75%}.picnic-chomp>span{animation:picnic-heart 1.1s ease-out forwards}.picnic-full .picnic-model{animation:picnic-happy .55s ease-in-out 3}.picnic-footer{display:flex;gap:16px;align-items:center;margin:20px 5px 0}.picnic-feedback{flex:1;text-align:center}.picnic-progress{height:18px;background:#d7e5d6;border:3px solid white;border-radius:30px;overflow:hidden}.picnic-progress span{display:block;height:100%;background:linear-gradient(90deg,#9fd67c,#ffd776,#ff9fa8);border-radius:30px;transition:width .35s}.picnic-feedback p{margin:5px 0;font-weight:800;color:#5e6570}#picnic-finish{background:linear-gradient(#bdf1b0,#7acd91);box-shadow:0 5px 0 #5a9e6e}#picnic-finish:disabled{opacity:.5}.picnic-petals{position:absolute;inset:0;pointer-events:none;z-index:2}.picnic-petals i{position:absolute;top:-10%;left:var(--x);width:10px;height:6px;border-radius:80% 0 80% 0;background:#fff4b1;animation:picnic-petal 12s linear infinite;animation-delay:var(--delay)}.picnic-cover{position:relative;background:url('picnic-art/scene-0.webp') center/cover!important}.picnic-cover-friend{position:absolute;left:16%;top:8%;height:88%;width:37%}.picnic-cover-friend.second{left:51%}.picnic-cover-friend svg{width:100%;height:100%}.picnic-cover-basket{position:absolute;width:30%;height:45%;object-fit:contain;bottom:0;left:35%}.picnic-paused *{animation-play-state:paused!important}body:has(#picnic-screen.picnic-paused) .picnic-bite{animation-play-state:paused!important}
@keyframes picnic-breathe{50%{transform:translateY(-2px) scale(1.008,1.012)}}@keyframes picnic-target{50%{box-shadow:0 0 0 11px #ffe18122,0 0 26px #fff8b3}}@keyframes picnic-chew{50%{transform:translateY(2px) rotate(.6deg)}}@keyframes picnic-nibble{0%,25%{transform:translate(-50%,-50%) scale(.85)}40%{transform:translate(-50%,-50%) rotate(8deg) scale(.67)}65%{transform:translate(-50%,-50%) rotate(-5deg) scale(.43)}85%,100%{transform:translate(-50%,-50%) scale(.08);opacity:0}}@keyframes picnic-sip{25%,65%{transform:translate(-50%,-50%) rotate(-27deg) scale(.75)}100%{transform:translate(-50%,-50%) scale(.2);opacity:0}}@keyframes picnic-heart{30%{opacity:1}100%{transform:translateY(-65px) scale(1.5);opacity:0}}@keyframes picnic-happy{50%{transform:translateY(-10px) rotate(-2deg)}}@keyframes picnic-petal{to{transform:translate(70px,700px) rotate(280deg)}}
@media(max-width:650px){.picnic-scene{aspect-ratio:1.1;min-height:400px}.picnic-friend{left:3%;width:43%;height:66%;top:6%}.picnic-friend.second{left:54%}.picnic-foods{grid-template-columns:repeat(6,minmax(0,1fr));left:2%;right:2%;padding:7px;gap:4px}.picnic-food{max-height:65px}.picnic-place{font-size:13px}.picnic-footer{gap:8px}.picnic-heading button,#picnic-finish{font-size:14px;padding:9px}.picnic-feedback p{font-size:13px}.picnic-friend-name{bottom:9%}.picnic-hearts{bottom:3%}}
.picnic-bite.nibbling img{animation:picnic-bites 1.1s steps(1) forwards}@keyframes picnic-bites{0%,24%{mask-image:linear-gradient(black,black)}35%{mask-image:radial-gradient(circle at 90% 25%,transparent 22%,black 23%)}65%,100%{mask-image:radial-gradient(circle at 60% 5%,transparent 35%,black 36%)}}
@media(prefers-reduced-motion:reduce){#picnic-screen *, .picnic-drag,.picnic-drag img{animation:none!important;transition:none!important}.picnic-bite{opacity:.75}}

/* Keep mouth coordinates in the same 360:400 frame as the animal art. */
.picnic-friend{width:32%;height:auto;aspect-ratio:360/400;left:11%;top:3%}.picnic-friend.second{left:57%}@media(max-width:650px){.picnic-friend{width:43%;height:auto;left:3%;top:13%}.picnic-friend.second{left:54%}}
body:has(#picnic-screen.picnic-paused) .picnic-drag{display:none}

@media(min-width:651px){.picnic-scene{height:clamp(350px,calc(100svh - 260px),620px);aspect-ratio:auto}.picnic-friend{height:70%;width:auto;left:14%;top:4%}.picnic-friend.second{left:auto;right:12%}}

.picnic-food{display:block}.picnic-food img{position:absolute;inset:0;display:block}.picnic-food.eaten:after{position:absolute;inset:0;display:grid;place-items:center}.picnic-foods{align-items:center}

.picnic-scene{width:100%;box-sizing:border-box}@media(max-width:650px){.picnic-scene{aspect-ratio:auto;height:400px}.picnic-foods{gap:3px;padding:5px}.picnic-food{border-width:1px}}

/* Drinks stay whole at the straw, with three gentle sips, then lower away. */
.picnic-bite.sipping{animation:picnic-drink 2.4s ease-in-out forwards;transform-origin:50% 50%;transition:left .28s ease-out,top .28s ease-out}
.picnic-sip-flow{position:absolute;left:var(--sip-x);top:var(--sip-y);width:5px;height:24px;transform:translate(-50%,-80%)}
.picnic-sip-flow i{position:absolute;bottom:0;left:0;width:4px;height:5px;background:#fff2d0;border-radius:50%;box-shadow:0 0 4px #ffcf77;animation:picnic-sip-drop .55s ease-in 3;animation-delay:.4s}
.picnic-sip-flow i:nth-child(2){animation-delay:.53s}.picnic-sip-flow i:nth-child(3){animation-delay:.66s}
.picnic-drinking .picnic-model{animation:picnic-gulp .65s ease-in-out 3;transform-origin:50% 90%}
@keyframes picnic-drink{0%{transform:translate(-50%,-50%) scale(.82);opacity:1}15%,82%{transform:translate(-50%,-50%) scale(.82) rotate(-3deg);opacity:1}92%{transform:translate(-50%,-20%) scale(.82) rotate(1deg);opacity:1}100%{transform:translate(-50%,15%) scale(.82);opacity:0}}
@keyframes picnic-sip-drop{0%{opacity:0;transform:translateY(0)}20%{opacity:.85}100%{opacity:0;transform:translateY(-17px)}}
@keyframes picnic-gulp{40%{transform:translateY(1px) rotate(-.5deg)}65%{transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.picnic-sip-flow{display:none}.picnic-drinking .picnic-model{animation:none!important}}