/* Zählwiese · Zahlen-Picknick & Tiere füttern. Eigenständige, konsistente Illustrationswelt */
.mode-picnic .mode-round{background-image:url('/mode-hands-round.svg')}
.mode-feeding .mode-round{background-image:url('/mode-animals-round.svg')}
.mode-picnic .mode-round img{width:80%;height:82%;transform:translateY(0)}
.mode-feeding .mode-round img{width:79%;height:84%;transform:translateY(0)}
.mode-picnic .mode-label{color:#916243}
.mode-feeding .mode-label{color:#547a59}
.mode-choices{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(8px,2vw,18px);row-gap:clamp(0px,.7dvh,8px);margin:1px auto!important}
.mode-round{width:clamp(103px,32vw,137px);height:clamp(103px,32vw,137px)}
.mode-label{font-size:clamp(15px,4.3vw,19px);line-height:1.17;text-align:center;padding:2px 0 3px}
.intro-content .intro-scene{height:clamp(137px,23dvh,188px)!important;margin:0 auto!important}
.intro-content .rainbow-title{font-size:clamp(39px,10vw,51px)!important;margin:0 auto!important}
.intro-content .friends-name-row{margin:-7px auto 1px!important}
.intro-content .welcome-subtitle{font-size:clamp(16px,4.2vw,20px)!important;margin:0 auto 4px!important}
.intro-content .welcome-footer{margin:4px auto 3px!important;padding-top:1px}
@media(min-height:860px) and (orientation:portrait){
 .intro-content .intro-scene{height:clamp(170px,24dvh,212px)!important}
 .mode-round{width:clamp(126px,33vw,148px);height:clamp(126px,33vw,148px)}
 .mode-choices{row-gap:8px}
}
@media(max-height:700px) and (orientation:portrait){
 .intro-content .intro-scene{height:clamp(107px,20dvh,138px)!important}
 .mode-round{width:clamp(90px,29vw,112px);height:clamp(90px,29vw,112px)}
 .mode-label{font-size:clamp(13px,3.9vw,17px)}
 .intro-content .friends-name-row{font-size:clamp(14px,3.9vw,17px)!important}
}
@media(max-width:360px) and (orientation:portrait){
 .mode-round{width:clamp(89px,30vw,108px);height:clamp(89px,30vw,108px)}
 .mode-choices{column-gap:3px}
 .intro-content .intro-scene{height:clamp(110px,20dvh,150px)!important}
}
/* Strict mobile content bounds: avoid notch, home indicator and clipped activity controls */
.main-content.extra-page{position:relative;min-height:0!important;flex:1;gap:0;padding:1px max(12px,4vw) max(14px,calc(env(safe-area-inset-bottom,0px) + 10px));overflow:visible;isolation:isolate}
.extra-page button{font-family:var(--font);-webkit-tap-highlight-color:transparent}
.extra-page button:focus-visible{outline:3px solid #305586!important;outline-offset:3px!important}
.extra-top{display:flex;flex-direction:column;align-items:center;width:100%;gap:4px;flex-shrink:0}
.extra-sign.wood-heading{min-height:48px;display:grid;place-items:center;font-size:clamp(21px,5.4vw,25px);padding:6px 28px;line-height:1.15;margin:3px auto 0}
.extra-progress{display:flex;gap:5px;justify-content:center;align-items:center;margin:3px auto 0;height:12px}
.extra-progress i{display:block;width:10px;height:10px;background:#c3d9c0;border:1.7px solid #8fa278;border-radius:50%;box-shadow:1px 1px #fff2c6}
.extra-progress i.current{background:#edc36f;transform:scale(1.22)}
.extra-progress i.done{background:#70aa70}
.extra-subtitle{font-size:clamp(14px,4vw,18px);font-weight:900;color:#466c4e;text-shadow:1px 1px #fff2c8;margin:0;text-align:center;line-height:1.1}
.extra-page .extra-scene{position:relative;width:100%;max-width:380px;flex:1 1 auto;min-height:117px;max-height:175px}
.extra-mascot{display:block;object-fit:contain;object-position:center bottom;pointer-events:none;-webkit-user-drag:none;user-select:none}
.picnic-scene .extra-mascot{position:absolute;bottom:0;width:clamp(90px,31%,142px);height:clamp(102px,96%,168px);z-index:2;filter:drop-shadow(0px 3px 0 #775b4333)}
.picnic-scene .extra-mouse{left:0;transform:rotate(-3deg)}
.picnic-scene .extra-hedgehog{right:0;transform:rotate(3deg)}
.extra-bubble{position:relative;z-index:3;max-width:65%;width:max-content;min-width:162px;margin:4px auto 0;text-align:center;background:#ffefc7;border:3px solid #a8734d;border-radius:22px 19px 23px 16px;box-shadow:2px 3px 0 #8f815a55, inset 1px 2px #fff9de;color:#6f5137;font-size:clamp(15px,4vw,19px);font-weight:950;line-height:1.18;padding:11px 9px;transform:rotate(-1.5deg)}
.picnic-cloth{position:relative;width:95%;max-width:370px;height:20px;margin:0 auto -15px;z-index:1;flex-shrink:0;background:repeating-linear-gradient(90deg,#efd4bd 0 33px,#edaca6 33px 64px);border-radius:55% 40% 10% 20%;border:3px solid #b17d65;transform:rotate(-1deg)}
.picnic-basket{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(125px,20dvh,187px);max-height:200px;width:min(100%,350px);margin:0 auto;flex:1 1 auto;z-index:3;transition:filter .15s ease,transform .18s ease}
.picnic-handle{position:absolute;z-index:0;top:1%;width:68%;height:75%;border:11px solid #946540;border-bottom:0;border-radius:55% 55% 8% 8%;box-shadow:inset 0 0 0 4px #d9a774,0 0 0 2px #e8cc9a;opacity:.96}
.picnic-basket-inner{z-index:2;position:relative;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;gap:2px 1px;width:92%;min-height:102px;padding:14px 6px 15px;margin-top:22px;background:linear-gradient(165deg,#f2dfb6e8,#d5a672fa);border:4px solid #8f6146;border-radius:17px 17px 32px 31px;box-shadow:3px 6px 0 #84512e55,inset 0 0 12px #af7b4d40}
.picnic-basket-front{z-index:1;position:absolute;bottom:1%;width:91%;height:27%;border-radius:0 0 35px 33px;background:repeating-linear-gradient(89deg,#ba8652 0 9px,#d5a476 11px 20px);border:3px solid #96633e;box-shadow:inset 0 7px #f1cb9b80;pointer-events:none}
.picnic-place{width:clamp(38px,10vw,56px);height:clamp(43px,10vw,60px);display:grid;place-items:center;border-radius:50%;border:2px dashed #ad855c88;background:#fff3d55e}
.picnic-place .extra-food-icon{width:95%;height:95%;filter:drop-shadow(1px 2px #97735242)}
.picnic-place.occupied{background:#fff2cc99;border-color:transparent}
.picnic-place.placed .extra-food-icon{animation:extra-land .36s cubic-bezier(.16,1.4,.5,1)}
.picnic-place-empty{width:55%;height:55%;border:2px dotted #bc946f;border-radius:50%;opacity:.75}
.extra-food-icon{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.extra-status{font-size:clamp(19px,5.1vw,24px);font-weight:900;color:#476448;text-shadow:1px 1px #fff7d4;margin:3px auto 2px;min-height:29px;text-align:center;flex-shrink:0}
.extra-status strong{color:#a66b47;font-size:1.22em}
.extra-hint{font-size:clamp(14px,4vw,17px);line-height:1.2;color:#4c684b;font-weight:900;margin:0 auto 4px;max-width:350px;min-height:21px;text-align:center;text-shadow:1px 1px #fff2d0;flex-shrink:0}
.extra-food-tray{display:flex;justify-content:center;align-items:center;gap:clamp(5px,2vw,11px);width:100%;max-width:398px;margin:1px auto;flex-shrink:0}
.extra-food-choice{display:grid;place-items:center;flex:0 0 auto;width:clamp(63px,17vw,81px);height:clamp(63px,17vw,81px);padding:7px;border:4px solid #976749;border-radius:50%;background:radial-gradient(circle at 36% 28%,#fff5d7,#ecd0a2 71%);box-shadow:inset 0 0 0 3px #fff0cf,2px 4px 0 #7d644650,0 6px 12px #7a65442a;touch-action:none;user-select:none;-webkit-user-select:none;transition:filter .12s ease,transform .14s ease}
.extra-food-choice:nth-child(2n){background:radial-gradient(circle at 36% 28%,#f6fae2,#bcd4b0)}
.extra-food-choice:nth-child(3n){background:radial-gradient(circle at 36% 28%,#fff5da,#edc6b4)}
.extra-food-choice:active{transform:scale(.94)}
.extra-food-choice.extra-dragging{opacity:.56}
.extra-drag-ghost{position:fixed;left:0;top:0;z-index:99999;width:85px;height:85px;pointer-events:none;transform:translate(-50%,-50%) rotate(-7deg) scale(1.13);filter:drop-shadow(1px 7px 4px #65513780);will-change:left,top}
.extra-drop-over{filter:drop-shadow(0 0 12px #fffbb7);transform:scale(1.03)}
.extra-pop{animation:extra-pop .36s ease-out}
.extra-shake{animation:extra-wiggle .32s ease-in-out}
.extra-next-area{min-height:50px;width:100%;display:flex;align-items:center;justify-content:center;margin:3px auto 0;flex-shrink:0}
.extra-next{min-width:155px;min-height:45px;padding:6px 22px;color:#62482f;background:#f1c77d;border:3px solid #8f653f;border-radius:18px;font-weight:900;font-size:21px;box-shadow:2px 4px 0 #8064447a;transition:transform .12s,opacity .12s}
.extra-next:disabled{opacity:0;pointer-events:none;visibility:hidden}
.extra-next:active{transform:translateY(3px)}
.extra-success .extra-mascot,.extra-success .feed-main-pet{animation:extra-celebrate .68s ease-in-out 4;transform-origin:50% 90%}
.extra-page .confetti{pointer-events:none;z-index:15}
.extra-back-choice{background:#f8e5b6;border:2px solid #b2875e;border-radius:19px;padding:4px 12px;min-height:30px;font-size:14px;color:#74583a;font-weight:900}
.feed-select .extra-subtitle{font-size:clamp(18px,4.8vw,22px);margin-top:10px}
.feed-choice-grid{width:min(100%,400px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(5px,2dvh,18px) 8px;justify-items:center;align-content:center;flex:1;margin:10px auto}
.extra-animal-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:0;padding:0;min-width:0;width:100%;font-weight:900}
.extra-animal-round{display:grid;place-items:center;position:relative;width:clamp(110px,36vw,151px);height:clamp(110px,36vw,151px);aspect-ratio:1;background:url('/mode-animals-round.svg') center/100% 100% no-repeat;filter:drop-shadow(1px 5px 2px #715d4042);transition:transform .2s ease}
.extra-animal-choice:nth-child(even) .extra-animal-round{background-image:url('/mode-hands-round.svg')}
.extra-animal-round img{width:84%;height:85%;object-fit:contain;filter:drop-shadow(1px 2px #856b404a)}
.extra-animal-choice:active .extra-animal-round{transform:scale(.94)}
.extra-animal-name{font-size:clamp(19px,5vw,23px);color:#41674c;text-shadow:1px 1px #fff8d1}
.extra-selection-footer{font-size:16px;font-weight:900;text-shadow:1px 1px #fff5d4;color:#617648;margin:5px auto 13px}
.feed-scene{position:relative;flex:1 1 auto;min-height:190px;width:100%;max-width:375px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column}
.feed-bubble{position:relative;max-width:94%;margin:5px auto 1px;min-height:61px;flex-shrink:0;transform:rotate(-1deg);font-size:clamp(15px,4vw,19px)}
.feed-pet-drop{height:clamp(130px,23dvh,205px);width:clamp(170px,58vw,240px);flex:1 1 auto;min-height:116px;display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto;transition:filter .15s ease,transform .14s ease}
.feed-pet-drop:before{content:"";position:absolute;inset:12% 7% 1%;border-radius:50%;background:radial-gradient(circle,#fff5d0af 0,#c0d8a3a6 58%,#abd0a433 74%,transparent 76%);border:3px dashed #8aa46b66;pointer-events:none}
.feed-main-pet{width:100%;height:98%;position:relative;z-index:2;filter:drop-shadow(2px 3px 1px #6d593955)}
.feed-hearts{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0}
.feed-hearts span{color:#d9747e;font-size:25px;position:absolute;left:48%;bottom:34%;text-shadow:2px 2px #fff2cc}
.feed-hearts span:nth-child(1){--mx:-50px;--my:-95px}
.feed-hearts span:nth-child(2){--mx:34px;--my:-110px}
.feed-hearts span:nth-child(3){--mx:-7px;--my:-125px}
.extra-success .feed-hearts{opacity:1}
.extra-success .feed-hearts span{animation:extra-heart 1.4s ease-out infinite;animation-delay:calc((var(--mx) + 50px) * 0s)}
.feed-food-bowl{width:clamp(130px,40vw,195px);height:32px;margin:-10px auto 0;border:5px solid #98714f;border-radius:50% 50% 18px 18px;background:linear-gradient(#f9e0b7 0 30%,#d39a69 33%,#bb8458);position:relative;z-index:4;box-shadow:1px 4px 0 #654c3766;display:flex;align-items:center;justify-content:center;gap:0}
.eaten-item{width:clamp(24px,7vw,35px);height:clamp(24px,7vw,35px);display:block;margin:0 -3px;transform:translateY(-14px) rotate(calc((var(--idx) - 2) * 6deg));animation:extra-land .3s both}
.feed-food-tray{max-width:395px;flex-wrap:wrap;gap:7px;min-height:82px}
.feed-food-tray .extra-food-choice{width:clamp(58px,16vw,72px);height:clamp(58px,16vw,72px);padding:5px}
.feed-select .extra-top{margin-bottom:0}
@keyframes extra-land{0%{opacity:.3;transform:translateY(-15px) scale(.7) rotate(-9deg)}70%{transform:translateY(3px) scale(1.18)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes extra-pop{0%{transform:scale(1)}48%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes extra-wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes extra-celebrate{0%,100%{transform:translateY(0) rotate(0)}34%{transform:translateY(-16px) rotate(-6deg)}65%{transform:translateY(-5px) rotate(6deg)}}
@keyframes extra-heart{from{opacity:0;transform:translateY(0) scale(.5)}35%{opacity:1}to{opacity:0;transform:translate(var(--mx),var(--my)) scale(1.3)}}
@media(max-height:730px) and (orientation:portrait){
 .extra-sign.wood-heading{min-height:38px;font-size:19px;padding:4px 17px}
 .extra-progress{height:9px;margin:0 auto}.extra-progress i{width:8px;height:8px}
 .extra-subtitle{font-size:14px}
 .picnic-scene .extra-mascot{height:98%}
 .extra-page .extra-scene{max-height:130px;min-height:92px}
 .extra-bubble{font-size:clamp(13px,3.75vw,16px);padding:7px 7px;min-width:135px}
 .picnic-basket{min-height:111px;max-height:139px}
 .picnic-basket-inner{min-height:87px;margin-top:17px;padding:7px 4px 9px}
 .picnic-place{width:clamp(34px,9.5vw,42px);height:clamp(36px,9.5vw,45px)}
 .extra-food-choice{width:clamp(56px,15vw,67px);height:clamp(56px,15vw,67px)}
 .extra-next-area{min-height:42px}
 .extra-next{min-height:39px;font-size:19px}
 .feed-bubble{min-height:45px}
 .feed-scene{min-height:150px;max-height:245px}
 .feed-pet-drop{max-height:155px;min-height:110px}
 .feed-food-tray .extra-food-choice{height:56px;width:56px}
 .feed-food-tray{min-height:65px}
 .extra-animal-round{width:clamp(97px,29vw,117px);height:clamp(97px,29vw,117px)}
 .extra-animal-name{font-size:18px}
}
@media(max-width:350px){
 .extra-food-choice{width:clamp(55px,17vw,63px);height:clamp(55px,17vw,63px)}
 .feed-food-tray .extra-food-choice{height:53px;width:53px}
 .picnic-place{width:clamp(34px,9vw,41px);height:clamp(34px,9vw,41px)}
 .extra-page{padding-left:9px!important;padding-right:9px!important}
}
@media(orientation:landscape) and (max-height:520px){
 .main-content.extra-page{min-height:470px!important;padding-top:4px;overflow:visible}
 .extra-page .extra-scene{min-height:125px;flex:0 0 130px}
 .picnic-basket{height:150px;flex:0 0 150px}
 .feed-scene{min-height:165px;flex:0 0 170px}
 .feed-pet-drop{max-height:130px}
 .feed-choice-grid{max-width:430px;gap:7px;grid-template-columns:repeat(4,minmax(0,1fr))}
 .extra-animal-round{width:99px;height:99px}
}
@media(prefers-reduced-motion:reduce){
 .extra-page *, .extra-page *:before, .extra-page *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* v25: reliable native iPhone touch drag + scripted feedback */
.extra-food-choice{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none!important}
.extra-drag-ghost{pointer-events:none!important;touch-action:none!important;z-index:99999!important}
.feed-main-pet,.picnic-basket{transform-origin:center bottom;will-change:transform}

/* Landscape is a deliberately re-composed layout, not a stretched phone column. */
@media (max-height:620px) and (orientation:portrait){
 .intro-content .welcome-footer{display:none!important}
}
@media (orientation:landscape) and (max-height:520px){
 .app-header.home-header{height:48px!important;min-height:48px!important;padding-top:3px!important;padding-bottom:1px!important}
 .intro-content{display:grid!important;grid-template-columns:minmax(190px,34%) minmax(0,1fr);grid-template-rows:46px 128px 33px;gap:0 10px!important;align-content:center;justify-content:center;height:calc(100dvh - 52px);min-height:0!important;padding:0 max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))!important}
 .intro-content .rainbow-title{grid-column:1;grid-row:1;align-self:center;margin:0 auto!important;font-size:clamp(33px,5vw,47px)!important}
 .intro-content .intro-scene{grid-column:1;grid-row:2;height:123px!important;width:100%;max-width:200px!important;align-self:center;margin:0 auto!important}
 .intro-content .friends-name-row{grid-column:1;grid-row:3;margin:0 auto!important;font-size:clamp(12px,1.9vw,17px)}
 .intro-content .welcome-subtitle{grid-column:2;grid-row:1;align-self:center;font-size:clamp(16px,2.1vw,20px)!important;margin:0 auto!important}
 .intro-content .mode-choices{grid-column:2;grid-row:2/4;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:center;justify-items:center;gap:5px!important;width:100%;max-width:100%!important;margin:0!important}
 .intro-content .mode-round{height:clamp(68px,11vw,97px)!important;width:clamp(68px,11vw,97px)!important}
 .intro-content .mode-label{font-size:clamp(11px,1.55vw,15px)!important;white-space:normal;max-width:115px}
 .intro-content .welcome-footer{display:none!important}
 .main-content.extra-page{height:calc(100dvh - 55px);min-height:0!important;max-height:400px;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);grid-template-rows:70px minmax(110px,1fr) 25px 65px;align-items:center;justify-items:center;column-gap:6px;overflow:visible;padding:0 max(14px,env(safe-area-inset-right,0px)) 4px max(14px,env(safe-area-inset-left,0px))}
 .extra-page .extra-top{grid-column:1/-1;grid-row:1;align-self:start}
 .extra-page .extra-sign.wood-heading{min-height:37px;padding:3px 15px;font-size:19px;margin:0 auto}
 .extra-page .extra-progress{height:8px;margin:0 auto;gap:3px}
 .extra-page .extra-progress i{width:7px;height:7px}
 .extra-page .extra-subtitle{font-size:13px}
 .picnic-page .picnic-scene{grid-column:1;grid-row:2;width:100%;height:125px!important;min-height:110px!important;max-height:130px!important}
 .picnic-page .picnic-scene .extra-mascot{height:100%;width:35%}
 .picnic-page .picnic-scene .extra-bubble{max-width:72%;font-size:12px;padding:6px 8px;min-width:0}
 .picnic-page .picnic-cloth{display:none}
 .picnic-page .picnic-basket{grid-column:2;grid-row:2;margin:0;height:125px;min-height:105px!important;max-height:127px!important;width:min(100%,280px);align-self:center}
 .picnic-page .picnic-basket-inner{min-height:84px;margin-top:20px;padding:4px 3px}
 .picnic-page .picnic-place{width:36px;height:36px}
 .picnic-page .extra-status{grid-column:1;grid-row:3;margin:0}
 .picnic-page .extra-hint{grid-column:2;grid-row:3;margin:0;font-size:13px;min-height:0}
 .picnic-page .extra-food-tray{grid-column:2;grid-row:4;gap:8px}
 .picnic-page .extra-food-choice{width:52px;height:52px;padding:4px}
 .picnic-page .extra-next-area{grid-column:1;grid-row:4}
 .feeding-page:not(.feed-select) .feed-scene{grid-column:1;grid-row:2/4;min-height:128px!important;height:155px;max-height:170px;width:95%;margin:0 auto}
 .feeding-page:not(.feed-select) .feed-bubble{font-size:13px;padding:5px 8px;min-height:0;max-width:100%}
 .feeding-page:not(.feed-select) .feed-pet-drop{max-height:113px;min-height:92px;width:155px}
 .feeding-page:not(.feed-select) .feed-food-bowl{height:23px;width:123px;margin:-13px auto 0}
 .feeding-page:not(.feed-select) .extra-status{grid-column:2;grid-row:2;align-self:end;margin-bottom:6px}
 .feeding-page:not(.feed-select) .extra-hint{grid-column:2;grid-row:3;font-size:13px}
 .feeding-page:not(.feed-select) .feed-food-tray{grid-column:2;grid-row:4;min-height:52px;gap:6px}
 .feeding-page:not(.feed-select) .feed-food-tray .extra-food-choice{width:45px;height:45px}
 .feeding-page:not(.feed-select) .extra-next-area{grid-column:1;grid-row:4}
 .extra-page .extra-next{font-size:16px;min-height:37px;min-width:130px}
 .feed-select .feed-choice-grid{grid-column:1/-1;grid-row:2/4;display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;max-width:650px;align-self:center;margin:0 auto}
 .feed-select .extra-animal-round{width:clamp(75px,11vw,100px)!important;height:clamp(75px,11vw,100px)!important}
 .feed-select .extra-animal-name{font-size:15px}
 .feed-select .extra-selection-footer{grid-column:1/-1;grid-row:4;font-size:13px;margin:0}
}