/* V246 – picture-only species selection for preschoolers, and clear game controls.
All pictures are prepainted WebP; no Canvas or SVG game graphics. */
#app:has(.zw246-selection){
 position:relative!important;
 isolation:isolate!important;
 height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
 background:#9fd492 url('/animal-feeding-v85/meadow-portrait.webp') center/cover no-repeat!important;
 overflow:hidden!important;
}
#app:has(.zw246-selection)>.app-header{
 flex:0 0 auto!important;min-height:0!important;height:0!important;padding:0!important;
 position:absolute!important;inset:0 0 auto 0!important;
 background:transparent!important;z-index:80!important;pointer-events:none!important;
}
#app:has(.zw246-selection)>.app-header .header-tools{pointer-events:auto}
#app .main-content.zw246-selection{
 display:flex!important;flex:1 1 0!important;flex-direction:column!important;
 align-items:center!important;justify-content:space-between!important;
 height:100%!important;max-height:100%!important;min-height:0!important;
 width:100%!important;max-width:none!important;
 margin:0!important;padding:0 clamp(9px,2.7vw,24px) max(14px,env(safe-area-inset-bottom,0px))!important;
 background:transparent!important;overflow:hidden!important;
 position:relative!important;isolation:isolate!important;
 user-select:none!important;-webkit-user-select:none!important;touch-action:manipulation!important;
}
#app .zw246-selection *,#app .zw246-selection *::before,#app .zw246-selection *::after{box-sizing:border-box}
#app .zw246-selection .zw246-sr{
 position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
 clip-path:inset(50%)!important;white-space:nowrap!important;
}
#app .zw246-selection .zw246-selection-head{
 position:relative;flex:0 0 auto;z-index:15;
 width:100%;height:clamp(127px,17dvh,158px);
 display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
 padding-top:max(55px,env(safe-area-inset-top,0px));
}
#app .zw246-selection .zw246-selection-title{
 display:block;max-width:65%;width:clamp(190px,55vw,282px);height:clamp(46px,7dvh,61px);
 object-fit:contain;filter:drop-shadow(0 3px 2px #70513d5c);pointer-events:none;
}
#app .zw246-selection .zw246-selection-paws{
 width:clamp(22px,6vw,34px);height:clamp(22px,6vw,34px);
 object-fit:contain;pointer-events:none;opacity:.72;transform:rotate(16deg);
 animation:zw246-paw 3.7s ease-in-out infinite;
}
#app .zw246-selection .zw246-choice-grid{
 --zw-cols:3;
 flex:1 1 0;min-height:0;width:min(100%,570px);height:100%;
 padding:clamp(7px,1.8vh,15px) 0 clamp(4px,1vh,9px);
 max-height:650px;display:grid!important;
 grid-template-columns:repeat(var(--zw-cols),minmax(0,1fr));
 grid-template-rows:repeat(4,minmax(0,1fr));
 align-items:stretch;justify-items:center;align-content:center;
 gap:clamp(5px,1.4vw,12px);position:relative;z-index:5;
}
#app .zw246-selection button.zw246-choice{
 -webkit-appearance:none!important;appearance:none!important;
 display:grid!important;place-items:center!important;min-width:0!important;min-height:0!important;
 width:100%!important;height:100%!important;max-height:166px!important;max-width:165px!important;
 padding:0!important;margin:0!important;background:transparent!important;border:0!important;
 box-shadow:none!important;border-radius:28%!important;cursor:pointer;touch-action:manipulation!important;
 position:relative!important;isolation:isolate!important;
 transform:translateY(0) rotate(calc((var(--zw-i, 0) - 5) * .12deg));
 transition:transform .18s ease,filter .18s ease;
 filter:drop-shadow(0 3px 2px #5a483958);
}
#app .zw246-selection button.zw246-choice:active{transform:scale(.92) rotate(-5deg)!important;filter:brightness(1.07)}
#app .zw246-selection button.zw246-choice:focus-visible{outline:4px dashed #a26c4a!important;outline-offset:-3px!important}
#app .zw246-selection button.zw246-choice.zw246-picked{transform:scale(1.11) rotate(5deg)!important;filter:drop-shadow(0 5px 9px #fff4b4a0)}
#app .zw246-selection button.zw246-choice.zw246-mix .zw246-card-art{filter:drop-shadow(0 0 3px #ffe1a5)}
#app .zw246-selection .zw246-card-art{
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
 object-fit:contain!important;pointer-events:none!important;
}
#app .zw246-selection .zw246-baby{
 position:relative;z-index:3;display:block!important;width:81%!important;height:82%!important;
 max-width:81%!important;max-height:82%!important;object-fit:contain!important;
 pointer-events:none!important;filter:drop-shadow(0 2px 2px #71594b33);
}
#app .zw246-selection .zw246-finger-hint{position:absolute;z-index:4;right:6%;bottom:4%;width:clamp(15px,4vw,24px);height:clamp(15px,4vw,24px);pointer-events:none;opacity:.75}
#app .zw246-selection .zw246-finger-hint img{width:100%;height:100%;object-fit:contain}
#app .zw246-selection .zw246-choice-flower{
 position:absolute;z-index:2;width:clamp(29px,7vw,52px);height:clamp(29px,7vw,52px);
 object-fit:contain;pointer-events:none;bottom:3%;opacity:.76;
}
#app .zw246-selection .zw246-flower-left{left:0;transform:rotate(-15deg)}
#app .zw246-selection .zw246-flower-right{right:0;transform:rotate(11deg)}
#app .zw243-game button.zw246-switch-animal{
 -webkit-appearance:none!important;appearance:none!important;
 position:absolute!important;z-index:32!important;
 top:clamp(115px,16.5dvh,147px)!important;right:clamp(9px,3vw,21px)!important;
 width:clamp(44px,11vw,59px)!important;height:clamp(44px,11vw,59px)!important;
 border:0!important;border-radius:30%!important;background:transparent!important;
 padding:0!important;margin:0!important;cursor:pointer;touch-action:manipulation;
 filter:drop-shadow(0 2px 3px #5c483656);
}
#app .zw243-game button.zw246-switch-animal img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#app .zw243-game button.zw246-switch-animal:active{transform:scale(.88) rotate(-8deg)}
#app .zw243-game button.zw246-switch-animal:focus-visible{outline:3px dashed #a76745!important}
@keyframes zw246-paw{0%,100%{opacity:.5;transform:rotate(-12deg) scale(.88)}50%{opacity:.95;transform:rotate(13deg) scale(1.13)}}
@media(orientation:landscape){
 #app:has(.zw246-selection){background-image:url('/animal-feeding-v85/meadow-landscape.webp')!important}
 #app .zw246-selection .zw246-selection-head{
  height:clamp(51px,16dvh,88px)!important;padding-top:0!important;
  flex-direction:row!important;justify-content:center;align-items:center;
 }
 #app .zw246-selection .zw246-selection-title{height:clamp(42px,14dvh,65px);width:clamp(190px,28vw,270px);max-width:39%}
 #app .zw246-selection .zw246-selection-paws{height:32px;width:32px;margin-left:11px}
 #app .zw246-selection .zw246-choice-grid{
  --zw-cols:6;width:min(96%,930px)!important;max-height:300px!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:clamp(3px,1vw,12px)!important;padding:2px 0 5px!important;
 }
 #app .zw246-selection button.zw246-choice{max-height:137px!important;max-width:137px!important}
 #app .zw243-game button.zw246-switch-animal{top:clamp(51px,12.5dvh,83px)!important;width:48px!important;height:48px!important}
}
@media(max-width:360px) and (orientation:portrait){
 #app .zw246-selection .zw246-selection-head{height:105px;padding-top:49px}
 #app .zw246-selection .zw246-choice-grid{gap:4px;padding:3px 0}
 #app .zw246-selection button.zw246-choice{max-height:105px!important}
 #app .zw246-selection .zw246-selection-title{height:40px;width:195px}
 #app .zw246-selection .zw246-selection-paws{width:22px;height:22px}
 #app .zw243-game button.zw246-switch-animal{top:99px!important;width:42px!important;height:42px!important}
}
@media(min-width:950px){
 #app:has(.zw246-selection){width:min(100vw,1020px)!important;max-width:1020px!important;margin:0 auto!important}
 #app .zw246-selection .zw246-choice-grid{
  width:min(94%,750px)!important;--zw-cols:4!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;max-height:620px!important;
 }
 #app .zw246-selection button.zw246-choice{max-height:180px!important;max-width:175px!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw246-selection .zw246-selection-paws{animation:none!important}
}

/* Pencil paw appears immediately while an illustrated animal is being decoded. */
#app .zw246-selection button.zw246-choice{
 background-color:#efe2bd!important;
}
#app .zw246-selection .zw246-loading-paw{
 display:block!important;position:absolute!important;z-index:2!important;
 width:36%!important;height:36%!important;object-fit:contain!important;
 opacity:.5;pointer-events:none!important;
 animation:zw246-loading-breathe 1.9s ease-in-out infinite;
}
#app .zw246-selection .zw246-baby{opacity:0;transition:opacity .22s ease}
#app .zw246-selection .zw246-choice.zw246-art-ready .zw246-baby{opacity:1}
#app .zw246-selection .zw246-choice.zw246-art-ready .zw246-loading-paw{opacity:0;animation:none}
@keyframes zw246-loading-breathe{0%,100%{transform:rotate(-9deg) scale(.86)}50%{transform:rotate(11deg) scale(1.06)}}
@media(prefers-reduced-motion:reduce){#app .zw246-selection .zw246-loading-paw{animation:none}}