/* A wash ends on release. The held cloth remains under the finger until then. */
.care-toolbar[hidden]{display:none}
.care-surface.scrubbing .bath-cloth{opacity:1}
.care-surface:focus-visible{outline:2px solid #368c80;outline-offset:-3px}

/* Short mouth movements follow the active baby recording, including muted play. */
.avatar[data-voice="babble"] .smile,
.avatar[data-voice="coo"] .smile,
.avatar[data-voice="laugh"] .smile,
.avatar[data-voice="babble"] .newborn-mouth,
.avatar[data-voice="coo"] .newborn-mouth,
.avatar[data-voice="laugh"] .newborn-mouth{display:none!important}
.avatar[data-voice="babble"] .surprise-mouth,
.avatar[data-voice="coo"] .surprise-mouth{
  display:inline!important;opacity:1!important;
  transform-box:fill-box;transform-origin:center;
  animation:voice-babble .32s ease-in-out infinite!important;
}
.avatar[data-voice="laugh"] .giggle-mouth{
  display:inline!important;opacity:1!important;
  transform-box:fill-box;transform-origin:center;
  animation:voice-laugh .24s ease-in-out infinite!important;
}
.avatar[data-voice="quiet"]:is(.motion-giggle,.motion-celebrate) .giggle-mouth{opacity:0}
.avatar[data-voice="quiet"]:is(.motion-giggle,.motion-celebrate) .smile{opacity:1}
/* A yawn has one mouth, including during the handover from a recorded laugh. */
.avatar.cue-sleepy :is(.giggle-mouth,.smile,.newborn-mouth){display:none!important}
.avatar.cue-sleepy .surprise-mouth{display:inline!important;opacity:1!important;animation:cue-yawn 4s ease-in-out infinite!important}
@keyframes voice-babble{0%,100%{transform:scale(.8,.35)}38%{transform:scale(1.12,1)}70%{transform:scale(.85,.6)}}
@keyframes voice-laugh{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* The selected baby's choices sit next to that baby's name and progress. */
.welcome[data-view="babies"] .welcome-card{
  width:min(760px,100%);height:auto;min-height:0;
  max-height:calc(100dvh - 24px);
  grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);
  grid-template-rows:minmax(0,1fr);
}
.welcome[data-view="babies"] .welcome-copy{
  justify-content:flex-start;overflow-y:auto;padding:22px;
}
.welcome[data-view="babies"] .welcome-art{display:grid;min-height:180px}
.welcome[data-view="babies"] .welcome-art .avatar{width:min(100%,250px);height:250px;max-height:50dvh}
.welcome[data-view="babies"] #profilePicker{justify-content:flex-start;flex-shrink:0}
.welcome[data-view="babies"] #welcomeIntro{margin-bottom:12px}
.selected-baby-profile{
  margin:12px 0 4px;padding:12px;border:1px solid #d4e5dc;
  border-radius:14px;background:#f4f9f5;color:#284e50;
}
.selected-baby-profile>strong{font:900 .92rem 'Nunito',sans-serif}
.selected-baby-profile .feeding-choice{margin:8px 0 0}
.selected-baby-profile .feeding-title{font-size:.78rem}
.selected-baby-profile .feeding-options{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0}
.selected-baby-profile .feeding-options button{flex:1;min-height:44px}
.selected-baby-profile .feeding-note{display:block;line-height:1.3;font-size:.72rem}
.selected-baby-profile .welcome-continue{margin:5px 0 0;padding:8px 0;text-align:left}

/* A persistent banner precedes three categories; the full category scrolls. */
.shop-view .shop{display:flex;flex:1;min-height:0;overflow:hidden}
.shop-view .shop-recommendation{
  flex:none;height:auto;min-height:0;overflow:visible;
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;
  gap:3px 10px;align-items:center;justify-content:normal;text-align:left;
  padding:10px 12px;margin:0 0 10px;border-radius:14px;
  background:linear-gradient(115deg,#fff4d6,#e5f3e9);
}
.shop-view .recommendation-kicker{grid-column:2;font-size:.65rem;letter-spacing:.03em}
.shop-view .recommendation-icon{display:grid;place-items:center;grid-column:1;grid-row:1 / 5;width:40px;height:40px;font-size:2rem;line-height:1}
.shop-view .recommendation-icon svg{display:block;width:100%;height:100%}
.shop-view .shop-recommendation h3{grid-column:2;font-size:1rem;line-height:1.15}
.shop-view .shop-recommendation strong{grid-column:2;font-size:.77rem;line-height:1.25}
.shop-view .shop-recommendation p{grid-column:2;margin:0;max-width:none;font-size:.72rem;line-height:1.3}
.shop-view .shop-recommendation button{grid-column:3;grid-row:1 / 5;max-width:170px;padding:10px;min-height:44px;font-size:.76rem;margin:0}
.shop-view .shop-recommendation small{display:none}
.shop-view .shop-categories{display:grid;grid-template-columns:repeat(4,auto);gap:7px;margin-bottom:8px}
.shop-categories [data-shop-category="care"]{--category-bg:#e4f2e8;--category-ink:#245c47;--category-border:#9ac4a9}
.shop-categories [data-shop-category="daily"]{--category-bg:#e3eff8;--category-ink:#285b7a;--category-border:#9ebfd7}
.shop-categories [data-shop-category="extra"]{--category-bg:#f1e9f7;--category-ink:#68467d;--category-border:#c4acd5}
.shop-categories [data-shop-category="toys"]{--category-bg:#fbf0dc;--category-ink:#806037;--category-border:#d2bb94}
.toy-age-note{display:block;margin-top:3px;color:var(--season-muted,#617c70);font-size:.68rem;line-height:1.3}
.shop-view .shop-categories button{min-width:0;background:var(--category-bg);color:var(--category-ink);border-color:var(--category-border);min-height:44px}
.shop-view .shop-categories button[aria-pressed="true"]{background:var(--category-ink);color:#fff;border-color:var(--category-ink);box-shadow:0 0 0 2px var(--category-bg)}
.shop-view .upgrades{
  flex:1;min-height:72px;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:#6d9d91 #edf5ef;
  align-content:start;grid-auto-rows:max-content;padding:3px 5px 10px 1px;
}
.shop-view .upgrades:focus-visible{outline:2px solid #79ab9a;outline-offset:-2px;border-radius:8px}
.shop-view .upgrade{min-width:0;flex-shrink:0}
.shop-view .upgrade[hidden]{display:none}
.shop-list-status{display:flex;justify-content:space-between;gap:10px;flex:none;padding:6px 3px;color:#4e746c;font-size:.72rem;line-height:1.3}
.shop-list-status [hidden]{display:none}
.shop-view .shop-actions{flex:none;position:static;padding-bottom:env(safe-area-inset-bottom)}

@media(max-width:610px){
  .welcome[data-view="babies"] .welcome-card{
    width:min(480px,100%);grid-template-columns:1fr;
    grid-template-rows:100px minmax(0,1fr);max-height:calc(100dvh - 16px);
  }
  .welcome[data-view="babies"] .welcome-art{min-height:0}
  .welcome[data-view="babies"] .welcome-art .avatar{width:125px;height:100px;max-height:100%}
  .welcome[data-view="babies"] .welcome-copy{padding:14px 18px}
  .selected-baby-profile{padding:10px;margin-top:10px}
  .shop-view .shop-recommendation{grid-template-columns:32px minmax(0,1fr);padding:9px;gap:3px 8px;margin-bottom:8px}
  .shop-view .recommendation-icon{width:32px;height:32px;grid-row:1 / 4}
  .shop-view .shop-recommendation p{display:none}
  .shop-view .shop-recommendation button{grid-column:1 / -1;grid-row:4;max-width:none;width:100%;padding:8px;margin-top:4px}
  .shop-view .shop-recommendation h3{font-size:.95rem}
}
@media(max-height:600px){
  .welcome[data-view="babies"] .welcome-card{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .welcome[data-view="babies"] .welcome-art{display:none}
  .welcome[data-view="babies"] .welcome-copy{padding:12px 16px}
  .welcome[data-view="babies"] #welcomeIntro{display:none}
  .shop-view .shop-recommendation{grid-template-columns:minmax(0,1fr) auto;padding:7px 9px;gap:3px 8px}
  .shop-view .recommendation-icon,.shop-view .recommendation-kicker,.shop-view .shop-recommendation p{display:none}
  .shop-view .shop-recommendation h3,.shop-view .shop-recommendation strong{grid-column:1}
  .shop-view .shop-recommendation button{grid-column:2;grid-row:1 / 3;max-width:155px;width:auto;margin:0}
}
@media(max-height:420px){
  .app:has(.shop-view:not([hidden])){height:auto;min-height:100dvh;overflow:visible}
  .app:has(.shop-view:not([hidden])) .shop-view{height:auto;max-height:none;overflow:visible}
  .shop-view .shop{flex:none;overflow:visible}
  .shop-view .upgrades{flex:none;max-height:42dvh;min-height:100px}
}
@media(prefers-reduced-motion:reduce){
  .avatar[data-voice] .surprise-mouth,.avatar[data-voice] .giggle-mouth{animation:none!important}
}

/* Keep new labels inside the scrollable shop cards. */
.shop-view .upgrade.is-new{padding-top:26px}
.shop-view .new-sticker{top:6px;right:8px;transform:none}

/* Prices name both the pack and its contents; freight is charged once. */
.supply-pack-price{display:block;margin-top:4px;font-size:.85rem;font-weight:900;color:#245e55}
.supply-pack-size{display:block;margin-top:2px;font-size:.72rem;color:#52756d}
.supply-quantity{display:grid;gap:5px;justify-items:center}
.supply-quantity-label{font-size:.69rem;font-weight:800;color:#52756d}
.household-breakdown{display:grid;gap:5px;margin:0;font-size:.8rem}
.household-breakdown[hidden]{display:none}
.household-breakdown>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.household-breakdown dt,.household-breakdown dd{margin:0}
.household-breakdown dd{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.household-breakdown .grand-total{border-top:1px solid #d4e4dc;padding-top:7px;font-weight:900;font-size:.93rem;color:#173e48}
.household-page .household-items{overflow-y:auto;overscroll-behavior:contain}
.household-total{color:#52756d}

/* The laundry stays below the title and hearts, with a compact machine scene. */
.household-view[data-kind="laundry"] .household-page{padding:10px;gap:4px}
.household-view[data-kind="laundry"] #laundryPanel{overflow-y:auto;overscroll-behavior:contain;gap:6px;font-size:.8rem}
.household-view[data-kind="laundry"] .laundry-scene{flex:none!important;height:106px;min-height:70px!important;max-height:106px!important}
.household-view[data-kind="laundry"] .laundry-scene svg{min-height:45px!important;max-height:88px!important}
.household-view[data-kind="laundry"] .laundry-scene>span{font-size:.68rem}
.household-view[data-kind="laundry"] #laundryStatus{font-size:.74rem;padding:6px}
.household-view[data-kind="laundry"] #laundryButton{position:sticky;bottom:0;min-height:44px;margin-top:auto}
@media(max-height:440px){
 .household-view[data-kind="laundry"] .laundry-scene{height:70px;max-height:70px!important}
 .household-view[data-kind="laundry"] .laundry-scene svg{max-height:52px!important}
 .household-breakdown{gap:3px;font-size:.73rem}
 .household-breakdown .grand-total{font-size:.8rem;padding-top:4px}
 .household-bottom{gap:5px}
}
/* The flying cloth replaces the held cloth in the same rendering frame. */
.laundry-piece svg{display:block}

/* A clean face gets a gentle glow and an unambiguous, persistent check. */
.face-clean-celebration{opacity:0;pointer-events:none}
.care-surface.freshly-clean .face-clean-celebration{opacity:1}
.face-clean-aura{transform-origin:160px 98px;opacity:.85}
.face-clean-check{transform-origin:238px 51px}
.face-clean-glints{transform-origin:160px 90px}
.freshly-clean .face-clean-aura{animation:face-clean-glow 1.1s ease-out both}
.freshly-clean .face-clean-check{animation:face-clean-check .42s cubic-bezier(.2,.75,.3,1.15) both}
.freshly-clean .face-clean-glints{animation:face-clean-glints .8s ease-out both}
@keyframes face-clean-glow{0%{opacity:0;transform:scale(.94)}40%{opacity:1;transform:scale(1.035)}100%{opacity:.85;transform:scale(1)}}
@keyframes face-clean-check{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes face-clean-glints{0%{opacity:0;transform:scale(.9)}40%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.freshly-clean .face-clean-aura,.freshly-clean .face-clean-check,.freshly-clean .face-clean-glints{animation:none}}

/* The bath uses the sleeping rig, awake, viewed from above. */
.timed-bath .sit-pose{animation:none!important;transform:none!important;opacity:1}
.timed-bath .body,.timed-bath .arm,.timed-bath .leg{animation:none;opacity:1}
.timed-bath[data-age="0"] .sit-pose>.body,
.timed-bath[data-age="0"] .sit-pose>.leg,
.timed-bath[data-age="0"] .sit-pose>.arm{display:inline}
.timed-bath .bath-limb{opacity:1;transition:transform .25s;transform-box:view-box}
.timed-bath .bath-arm-left{transform-origin:115px 160px}
.timed-bath .bath-arm-right{transform-origin:205px 160px}
.timed-bath .bath-leg-left{transform-origin:133px 218px}
.timed-bath .bath-leg-right{transform-origin:185px 213px}
.timed-bath[data-bath-mood="laugh"] .forearm-left{animation:bath-elbow .9s ease-in-out infinite;--bath-swing:1}
.timed-bath[data-bath-mood="laugh"] .forearm-right{animation:bath-elbow .9s ease-in-out -.3s infinite;--bath-swing:-1}
@keyframes bath-arm-play{0%,100%{transform:none}45%,60%{transform:rotate(calc(46deg*var(--bath-swing,1)))}}
@keyframes bath-elbow{0%,100%{transform:none}45%,60%{transform:rotate(calc(35deg*var(--bath-swing,1)))}}
@keyframes bath-kick{0%,100%{transform:none}45%,60%{transform:rotate(calc(10deg*var(--bath-swing,1)))}}
@media(prefers-reduced-motion:reduce){.timed-bath .forearm{animation:none!important}}

.timed-bath[data-bath-mood="calm"] .eyelids,.timed-bath[data-bath-mood="smile"] .eyelids{opacity:0}

/* Short windows can scroll the full basket instead of clipping the checkout. */
.household-view[data-kind="stock"][data-compact="true"] .household-page{overflow-y:auto;overscroll-behavior:contain}
.household-view[data-kind="stock"][data-compact="true"] .household-items{flex:none;overflow:visible}

/* A native portrait lock is preferred; unsupported mobile browsers pause here. */
.orientation-card{width:min(390px,100%);text-align:center;color:#173e48}
.orientation-card svg{display:block;width:82px;height:82px;margin:0 auto 12px}
.orientation-card h2{font:900 1.4rem/1.2 'Nunito',sans-serif;margin:0 0 10px}
.orientation-card p{font-size:.9rem;line-height:1.45;margin:0;color:#4c7371}
.orientation-card button{min-height:44px;margin-top:18px;padding:11px 18px;border:0;border-radius:12px;background:#173e48;color:white;font-weight:800}
#orientationGuard{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:20px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left));overflow-y:auto;background:radial-gradient(ellipse at 50% 40%,#fffaf0,#e7f5ef);touch-action:manipulation;outline:none}
#orientationGuard[hidden],#orientationContinue[hidden]{display:none}
html[data-orientation-blocked="true"] body{overflow:hidden}
html[data-orientation-blocked="true"] .avatar,html[data-orientation-blocked="true"] .avatar *,html[data-orientation-blocked="true"] .washer-drum{animation-play-state:paused!important}
@media(max-height:360px){.orientation-card svg{width:54px;height:54px;margin-bottom:8px}.orientation-card h2{font-size:1.2rem}.orientation-card p{font-size:.8rem}.orientation-card button{margin-top:12px}}

/* One choice per tap, with quantity and an undo control belonging to each item. */
.shop-view .upgrade:has(.buy:not(:disabled)){cursor:pointer}
.item-purchase{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:74px}
.item-purchase>.buy{width:100%;min-height:40px}
.item-adjust{display:flex;align-items:center;justify-content:space-between;gap:5px}.item-adjust[hidden]{display:none}
.item-quantity{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:99px;background:var(--season-soft,#e7f1e8);color:var(--season-ink,#2f6657);font-size:.75rem;font-weight:900}
.item-undo{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:36px!important;padding:7px!important;border:1px solid var(--season-border,#c8dacf)!important;border-radius:10px;background:var(--season-surface,#fffdf6)!important;color:var(--season-ink,#426b60)!important}
.item-undo[hidden]{display:none!important}.item-undo svg{display:block;width:21px;height:21px;pointer-events:none}
.shop-view .recommendation-actions{grid-column:3;grid-row:1 / 5;display:flex;align-items:center;gap:6px;width:170px}
.shop-view .recommendation-actions>#recommendationChoose{flex:1;min-width:0;max-width:none;width:100%;margin:0}
.shop-view .recommendation-actions>.item-undo{flex:none;max-width:36px;width:36px;margin:0}
@media(max-width:610px){.shop-view .recommendation-actions{grid-column:1 / -1;grid-row:4;width:100%;margin-top:4px}.item-purchase{min-width:68px}}
@media(max-height:600px){.shop-view .recommendation-actions{grid-column:2;grid-row:1 / 3;width:155px;margin:0}.item-undo{height:32px;min-height:32px!important}.item-purchase{gap:2px}}
/* Counts sit on the tab edge, leaving the full name centered and the row compact. */
.shop-view .shop-categories{padding-top:7px;flex-shrink:0}
.shop-view .shop-categories [data-shop-category]{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:9px 4px;overflow:visible;font-size:.84rem;line-height:1.2}
.shop-category-label{min-width:0;white-space:nowrap;overflow-wrap:normal}
.shop-category-count{position:absolute;top:-7px;right:4px;z-index:1;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--season-surface,#fffdf6);border-radius:99px;background:var(--category-ink,#315e57);color:#fff;font-size:.66rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;pointer-events:none}
@media(max-width:610px){
 .shop-view .shop-categories{gap:5px}
 .shop-view .shop-categories [data-shop-category]{font-size:.8rem}
}

/* Hard difficulty relies on baby's visible and audible cues, never a need gauge. */
.app[data-difficulty="busy"] .action:is(.revealed,.need-urgent){background:var(--season-surface,#fff)!important;border-color:var(--season-border,#dbe8e5)!important;box-shadow:none!important;animation:none!important}

/* A brief, mild illness reaction takes precedence over laughter and yawning. */
.avatar.vomiting .head{animation:illness-retch .6s ease-in-out 2!important}.avatar.vomiting .smile,.avatar.vomiting .newborn-mouth,.avatar.vomiting .giggle-mouth,.avatar.vomiting .sad-mouth{display:none!important}.avatar.vomiting .surprise-mouth{display:inline!important;opacity:1!important;animation:none!important}
@keyframes illness-retch{40%{transform:translateY(3px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.avatar.vomiting .head{animation:none!important}}

/* Face care keeps the head still under the cloth; the mouth and tears react. */
.inline-face-avatar[data-face-mood="cry"] :is(.smile,.newborn-mouth,.giggle-mouth,.surprise-mouth){display:none!important}
.inline-face-avatar[data-face-mood="cry"] .sad-mouth{display:inline!important;opacity:1!important}
.inline-face-avatar[data-face-mood="cry"] :is(.tears,.sad-brows){opacity:1!important}
.inline-face-avatar[data-face-mood="wary"] .brows{opacity:0}
.inline-face-avatar[data-face-mood="wary"] .sad-brows{opacity:.6}