/* Zählwiese v22 – actual iPhone safe areas, vertically balanced home and touch-native care */
html,body{overscroll-behavior-x:none}
.device{background-size:cover!important;background-position:center center!important}
.home-header .brand{display:none!important}
.home-header{
  box-sizing:border-box!important;
  height:auto!important;min-height:0!important;
  flex:0 0 auto!important;
  padding:calc(env(safe-area-inset-top,0px) + 11px) 15px 2px!important;
  overflow:visible!important;align-items:center!important;
}
.home-header .parent-gear,.home-header #soundBtn{width:clamp(51px,14vw,59px)!important;height:clamp(51px,14vw,59px)!important}
.home-header .header-tools{margin-left:auto}
.intro-content{
  min-height:0!important;
  justify-content:center!important;
  gap:0!important;
  padding:clamp(9px,1.5dvh,15px) 14px max(15px,env(safe-area-inset-bottom,0px))!important;
}
.intro-content .rainbow-title{
  margin:0 auto 2px!important;
  font-size:clamp(42px,12vw,58px)!important;
  line-height:1.06!important;
  flex:0 0 auto;
}
.intro-content .intro-scene{
  height:clamp(164px,27dvh,235px)!important;
  width:min(96%,370px)!important;
  flex:0 1 auto!important;
  margin:1px auto 2px!important;
}
.intro-content .friends-name-row{
  width:min(96%,365px)!important;
  font-size:clamp(18px,5.1vw,22px)!important;
  margin:0 auto 8px!important;
  flex:0 0 auto;
}
.intro-content .welcome-subtitle{
  margin:1px auto 13px!important;
  font-size:clamp(17px,4.6vw,21px)!important;
  line-height:1.2!important;
}
.intro-content .mode-choices{
  max-width:390px!important;
  gap:clamp(10px,3vw,24px)!important;
  margin:2px auto 10px!important;
  padding:0 2px!important;
}
.mode-round{
  width:clamp(114px,36vw,154px)!important;
  height:clamp(114px,36vw,154px)!important;
}
.mode-choice{gap:4px!important}
.mode-label{padding-top:2px!important;line-height:1.12!important}
.intro-content .welcome-footer{
  margin:9px auto 0!important;
  padding:0!important;
  font-size:clamp(10px,2.85vw,12px)!important;
  line-height:1.25!important;
}
@media(max-width:679px){
  html,body{height:100%;min-height:100%;background:#a6d3e8}
  .device{
    height:100dvh!important;
    min-height:100svh!important;
    max-height:none!important;
    width:100%!important;
    border:0!important;border-radius:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    display:flex!important;flex-direction:column!important;
  }
  .intro-content{flex:1 0 auto!important}
}
@media(max-height:735px) and (orientation:portrait){
  .home-header{padding-top:calc(env(safe-area-inset-top,0px) + 7px)!important}
  .home-header .parent-gear,.home-header #soundBtn{height:48px!important;width:48px!important}
  .intro-content{padding-top:4px!important;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important}
  .intro-content .rainbow-title{font-size:clamp(37px,10.8vw,48px)!important}
  .intro-content .intro-scene{height:clamp(138px,24dvh,183px)!important}
  .intro-content .friends-name-row{font-size:clamp(16px,4.6vw,19px)!important;margin:0 auto 4px!important}
  .intro-content .welcome-subtitle{font-size:clamp(15px,4vw,18px)!important;margin:0 auto 5px!important}
  .mode-round{width:clamp(100px,32vw,128px)!important;height:clamp(100px,32vw,128px)!important}
  .intro-content .mode-choices{margin:0 auto 4px!important}
  .intro-content .welcome-footer{margin:4px auto 0!important}
}
@media(min-height:940px) and (orientation:portrait){
 .intro-content .intro-scene{height:clamp(230px,29dvh,275px)!important}
 .intro-content .mode-choices{margin-top:9px!important}
 .intro-content .welcome-footer{margin-top:12px!important}
}
@media(orientation:landscape) and (max-height:520px){
 .home-header{padding-top:max(6px,env(safe-area-inset-top,0px))!important}
 .intro-content{justify-content:flex-start!important;padding-top:2px!important}
 .intro-content .intro-scene{height:135px!important}
 .intro-content .mode-choices{margin-bottom:0!important}
 .mode-round{width:100px!important;height:100px!important}
}
/* Continuous finger movement, no native HTML drag image or Safari page scroll. */
.care-option{touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.care-option img{pointer-events:none;-webkit-user-drag:none}
.care-option.care-dragging{opacity:.38;transform:scale(.94)!important}
.care-drag-ghost{
 position:fixed!important;z-index:99999!important;
 width:clamp(86px,26vw,116px);height:clamp(86px,26vw,116px);
 transform:translate3d(-50%,-50%,0) rotate(-7deg) scale(1.1);
 pointer-events:none!important;will-change:left,top;
 border-radius:50%;
 background:url('/mode-hands-round.svg') center/100% 100% no-repeat;
 filter:drop-shadow(3px 9px 4px #566b5570);
 display:grid;place-items:center;
}
.care-drag-ghost img{display:block;width:75%;height:75%;object-fit:contain}
.care-drag-in-progress{touch-action:none!important}
.animal-care-stage[data-care-drop-zone]{transition:border-color .16s,background-color .16s,box-shadow .16s}
.animal-care-stage.care-drop-active{
 border-color:#459c61!important;
 background:#e9f9dbe9!important;
 box-shadow:0 0 0 5px #bdeba7b3,inset 0 0 20px #b6df9880!important;
}
.care-prompt-nudge{color:#92552b!important}
.animal-result-page .care-choice-area{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important}
.animal-result-page .care-option{min-height:86px}
.animal-result-page .care-reaction{min-height:43px}
.care-reduced-feedback{
 background:#f6e8b6;
 border:2px solid #85aa78;
 border-radius:20px;
 padding:8px 16px;
}
@media(max-height:735px) and (orientation:portrait){
 .animal-result-page .care-option{min-height:72px;width:clamp(76px,25vw,93px);height:clamp(76px,25vw,93px)}
 .animal-result-page .care-choice-area{padding-bottom:max(4px,env(safe-area-inset-bottom,0px))!important}
}
@media(prefers-reduced-motion:reduce){
 .animal-care-stage[data-care-drop-zone]{transition:none}
 .care-drag-ghost{transform:translate3d(-50%,-50%,0)}
}