/* Zählwiese · Premium Tierwiese + kindgerechte Spielauswahl · 2026 */
.mode-choices{
 width:100%;max-width:390px;margin:3px auto 7px;padding:0 7px;
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;
 gap:clamp(10px,3vw,19px);
}
.mode-choice{font:inherit;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;
 padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;
 touch-action:manipulation;transform:translateZ(0)}
.mode-round{
 display:grid;place-items:center;width:clamp(114px,37vw,154px);height:clamp(114px,37vw,154px);
 aspect-ratio:1/1; flex-shrink:0;
 border:0;box-shadow:none;background:transparent center/100% 100% no-repeat;
 transition:transform .2s cubic-bezier(.2,.85,.3,1),filter .2s ease; position:relative;
 filter:drop-shadow(2px 6px 1px #6c744549);
}
.mode-hands .mode-round{background-image:url('/mode-hands-round.svg')}
.mode-animals .mode-round{background-image:url('/mode-animals-round.svg')}
.mode-round img{
 display:block;width:75%;height:76%;object-fit:contain;object-position:center;
 filter:drop-shadow(1px 3px 0 #7354433a);
 pointer-events:none;
}
.mode-hands .mode-round img{width:72%;height:77%;transform:translateY(3px)}
.mode-animals .mode-round img{width:78%;height:81%;transform:translateY(-1px)}
.mode-label{
 display:block;white-space:nowrap;padding:3px 2px 4px;
 font:900 clamp(17px,4.8vw,22px) "Chalkboard SE","Marker Felt","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
 color:#3d6848;text-shadow:1.5px 1.5px #fff8d8,-1px -1px #fff6d3;
}
.mode-hands .mode-label{color:#3b6b78}
.mode-choice:active .mode-round{transform:scale(.95) translateY(2px);filter:drop-shadow(0px 2px 1px #6c744549)}
.mode-choice:focus-visible{outline:4px solid #355c9b;outline-offset:3px;border-radius:23px}
.mode-choice:focus-visible .mode-round{transform:scale(1.035)}
/* Compact but airy hero: two large circular choices always accessible on phone */
.home-header{min-height:48px!important}
.intro-content{justify-content:flex-start!important;padding-top:0!important;gap:0!important;min-height:0!important;}
.intro-content .rainbow-title{margin:3px auto 0!important}
.intro-content .intro-scene{height:clamp(174px,29dvh,245px)!important;max-width:360px!important;margin:0 auto 0!important}
.intro-content .friends-name-row{margin:-5px auto 4px!important}
.intro-content .welcome-subtitle{margin:1px auto 5px!important;line-height:1.22!important;font-size:clamp(16px,4.4vw,20px)!important}
.intro-content .welcome-footer{margin:5px auto 3px!important;font-size:11px!important}
@media(min-height:865px) and (orientation:portrait){
 .intro-content .intro-scene{height:clamp(235px,30dvh,282px)!important}
 .mode-round{width:clamp(137px,36vw,170px);height:clamp(137px,36vw,170px)}
 .mode-choices{margin-top:7px;gap:15px}
 .intro-content .welcome-subtitle{margin-bottom:10px!important}
}
@media(max-height:700px) and (orientation:portrait){
 .home-header{min-height:44px!important;height:44px!important}
 .intro-content .rainbow-title{font-size:clamp(37px,11vw,46px)!important;margin:0 auto!important}
 .intro-content .intro-scene{height:clamp(142px,25dvh,177px)!important}
 .intro-content .friends-name-row{font-size:clamp(15px,4.2vw,18px)!important;margin:-8px auto 1px!important}
 .intro-content .welcome-subtitle{font-size:clamp(14px,4vw,17px)!important; margin:0 auto 2px!important}
 .mode-round{width:clamp(109px,34vw,129px);height:clamp(109px,34vw,129px)}
 .mode-label{font-size:clamp(16px,4.5vw,19px)}
 .intro-content .welcome-footer{font-size:10px!important;margin-top:0!important}
}
/* Tierwelt: no Moritz and Igor during animal challenges; animals themselves receive more room. */
.visual-board:has(.animal-group){align-items:center!important}
.count-card:has(.animal-group){overflow:visible!important;min-width:0}
.count-card .animal-group{max-width:100%;overflow:visible!important;align-content:center!important}
.animal-card{overflow:visible!important}
.animal-card .animal-svg{
 object-fit:contain!important;object-position:center!important;width:100%!important;height:100%!important;
 filter:drop-shadow(1px 2px 0 #6c70463a)!important;
}
.animal-group .animal-card{margin:-5px -5px!important}
.animal-pet .animal-card{margin:0!important}
.result-animals{overflow:visible!important;align-items:center;justify-content:center}
.result-animals .animal-card{margin:0 -1px!important}
.answer-wrap:has(.friend-peek-pair){margin-top:auto}
.answer-wrap:not(:has(.friend-peek-pair)){min-height:170px;justify-content:flex-end;gap:5px}
.answer-wrap:not(:has(.friend-peek-pair)) .answer-label{margin-top:4px}
@media(max-height:700px){
 .answer-wrap:not(:has(.friend-peek-pair)){min-height:133px}
 .animal-group .animal-card{margin:-7px -5px!important}
}
@media(prefers-reduced-motion:reduce){.mode-round{transition:none}}

/* Keep the illustrated title characters inside their actual hero frame on narrow iPhones. */
.intro-content .intro-scene{position:relative!important}
.intro-content .intro-scene picture{
 position:absolute!important;inset:0!important;
 display:block!important;width:100%!important;height:100%!important;
 max-height:100%!important;overflow:visible!important;
}
.intro-content .intro-scene picture img,
.intro-content .intro-scene > img{
 display:block!important;width:100%!important;height:100%!important;max-height:100%!important;
 object-fit:contain!important;object-position:center!important;
}