/* Twelve friends keep their space, names and generous touch targets. */
#picnicView .toolbar{position:sticky;top:6px;z-index:10;display:flex;flex-wrap:wrap;justify-content:space-around;gap:8px;padding:10px 14px;background:#fffdf3;box-shadow:0 3px 12px #354d3c22}
.basket-current{flex-basis:100%;text-align:center;font-size:15px;border-bottom:1px solid #dbeac9;padding-bottom:6px}
#picnicView .toolbar .clock{flex:1;max-width:240px}

.game-choices .choice-art{height:285px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:8px;padding:42px 20px 12px}
.game-choices .choice-art img:nth-child(n){position:static;inset:auto;width:100%;height:100%;max-width:none;min-height:0;object-fit:contain;transform:none}
.game-choices .choice-art>span:not(.preview-bush){position:absolute;top:7px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);font-size:26px;line-height:1}
.preview-bush,.picnic-art:before,.picnic-art:after{display:none}
.garden{padding:90px 4% 24px}
.garden .pets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 28px;align-items:end}
.garden .pet:nth-child(n){width:100%;max-width:none;margin:0}
.garden .pet-name{font-size:15px;max-width:100%}
.garden .owner{font-size:11px}
#zoomPets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px auto;max-width:850px}
#zoomPets .zoom-pet{width:100%;padding:12px 6px}
#zoomPets .zoom-pet img{height:110px}
#zoomPets .zoom-pet strong{font-size:16px}
#zoomPets .zoom-pet small{font-size:11px}
#foundPortraits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#foundPortraits>div{width:100%;font-size:12px}
#foundPortraits img{height:72px}
#seekComplete{inset:24px 8%;padding:20px}
#seekComplete h2{font-size:27px;margin:8px 0 14px}
@media(max-width:700px){
 .garden{padding:70px 5% 24px}
 .garden .pets{grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 22px}
 .garden .pet-name{font-size:12px;padding:3px}
 .garden .owner{font-size:10px;padding:1px 3px}
 .garden .pet img{height:100px}
 .garden .basket-wrap{margin-top:40px}
}
@media(max-width:600px){
 .game-choices .choice-art{height:280px}
 #zoomPets{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 #zoomPets .zoom-pet img{height:100px}
 #zoomPets .zoom-pet small{font-size:11px}
 #foundPortraits{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #foundPortraits img{height:60px}
 .seek-garden #seekComplete{inset:20px 3%;padding:14px 10px}
 #seekComplete h2{font-size:24px}
}
@media(max-width:360px){
 .garden .pets{grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 32px}
 .garden .pet-name{font-size:14px}
 .garden .pet img{height:112px}
 .garden .owner{font-size:11px}
}

/* Mobile keeps generous scrolling targets and a persistent serving HUD. */
@media(max-width:700px){
 main:has(#picnicView:not([hidden])){padding-top:10px}
 #picnicView{position:relative}
 #picnicView>.menu-button{position:absolute;top:0;left:0;margin:0;padding:8px 10px}
 #picnicView header{height:54px;display:flex;align-items:center;justify-content:flex-end}
 #picnicView header .eyebrow,#picnicView header p,#picnicView h1 i{display:none}
 #picnicView h1{font-size:30px;letter-spacing:-1px;margin:0}
 #picnicView .basket-current{font-size:17px;padding-bottom:8px}
 #picnicView .toolbar{top:6px}
 #picnicView .garden{padding-top:38px;margin-top:12px}
 #picnicView .pet{scroll-margin-top:160px;scroll-margin-bottom:16px}
}
/* Desktop play keeps every request and the serving basket in one view. */
@media(min-width:1000px){
 main:has(#picnicView:not([hidden])){max-width:1500px;padding:12px 28px 10px}
 #picnicView{position:relative}
 #picnicView>.menu-button{position:absolute;left:0;top:8px;margin:0}
 #picnicView header{height:64px}
 #picnicView header .eyebrow{display:none}
 #picnicView header .eyebrow{font-size:9px}
 #picnicView h1{font-size:38px;letter-spacing:-1.5px;margin:0;line-height:1.15}
 #picnicView h1 i{font-size:25px;margin:3px 0 0 8px}
 #picnicView header p{font-size:13px;margin:2px 0 8px}
 #picnicView .toolbar{position:relative;top:auto;max-width:1040px;flex-wrap:nowrap;gap:24px;padding:4px 22px;min-height:76px}
 #picnicView .basket-current{order:1;flex:1.4;min-width:280px;display:grid;grid-template-columns:48px 1fr;text-align:left;border:0;border-right:1px solid #dbeac9;padding:0 24px 0 0;column-gap:10px;align-items:center}
 #picnicView .basket-current>span{grid-row:1 / 3;font-size:40px}
 #picnicView .basket-current:before{content:'IN YOUR BASKET';grid-column:2;font-size:10px;font-weight:800;letter-spacing:1.4px}
 #picnicView #basketCurrent{grid-column:2;font-size:21px;line-height:1.3;white-space:nowrap}
 #picnicView .clock{order:2;min-width:180px}
 #picnicView .stat{order:3;min-width:110px}
 #picnicView .best{order:4;min-width:90px}
 #picnicView .garden{margin-top:12px;padding:36px 24px 16px;border-radius:26px}
 #picnicView .pets{grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 24px}
 #picnicView .pet img{height:clamp(104px,14vh,145px)}
 #picnicView .pet-name{font-size:14px}
 #picnicView .owner{font-size:11px}
 #picnicView .bubble{height:40px;width:52px;min-width:52px;font-size:26px}
 #picnicView .blanket{inset:90px 6% 18px}
 #picnicView .basket-wrap{display:none}
 #picnicView .below{margin-top:12px;min-height:44px}
 #picnicView .hint{margin:8px 0 0;font-size:11px}
 #picnicView footer{display:none}
}