/* The room has two tracks: baby, then a caption that never changes height. */
.game{--caption-name:28px;--caption-state:48px}
.game>.stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) calc(var(--caption-name) + var(--caption-state));align-items:stretch;justify-items:center;gap:0;min-height:0}
.stage>.baby-scene{grid-area:1 / 1;width:100%;height:100%;max-height:none;min-height:0;min-width:0;align-self:stretch}
.stage>.baby-caption{grid-area:2 / 1;display:grid;grid-template-rows:var(--caption-name) var(--caption-state);width:100%;min-width:0;text-align:center;z-index:2;line-height:1.2;pointer-events:none}
.baby-caption>.baby-name{min-width:0;max-width:100%;margin:0;padding:0 12px;line-height:var(--caption-name);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.baby-caption>.baby-state{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;min-width:0;min-height:0}
.baby-state>.status,.baby-state>.milestone{grid-area:1 / 1;position:static;inset:auto;transform:none;width:calc(100% - 72px);max-width:520px;max-height:100%;min-height:0;margin:0;padding:0;line-height:1.25;overflow:auto;scrollbar-width:none;pointer-events:auto}
.baby-state>.status{font-size:clamp(.72rem,2.8vw,.87rem)}
.baby-state>.milestone{display:block;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;font:900 clamp(1rem,3.5vw,1.25rem)/1.15 'Nunito',sans-serif;color:var(--season-ink,#173e48);text-shadow:0 1px 3px #fffdf8;animation:caption-reveal .25s ease-out;cursor:pointer}
.baby-state>.milestone #milestoneTitle{font:inherit}
.baby-state>.milestone #milestoneText{display:none}
.baby-state>[hidden]{display:none}
@keyframes caption-reveal{from{opacity:0}to{opacity:1}}

/* Both tabs fit a keyboard-sized panel. Notices reuse one shallow strip. */
.game{--care-height:min(260px,38dvh);--care-feedback:32px;--care-row:calc((var(--care-height) - 104px) / 2);--care-footer:0px}
.game>.actions{display:grid;grid-template-rows:44px var(--care-feedback) minmax(0,1fr);gap:4px;min-width:0;min-height:0;height:var(--care-height);max-height:var(--care-height);padding:6px 12px 8px}
.actions>.section-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:44px;height:44px;align-items:center;gap:8px;margin:0}
.actions .care-tabs{grid-area:1 / 1;width:100%;max-width:240px;height:44px;padding:0}
.actions .care-tabs button{position:relative;height:44px;min-height:44px;flex:1;justify-content:center;white-space:nowrap}
.actions .care-pending{position:absolute;right:2px;top:-3px;pointer-events:none}
.actions #signalCount,.actions #miniHamper{grid-area:1 / 2;justify-self:end;align-self:center;margin:0;animation:none;transition:none}
.actions #signalCount{min-width:0;max-width:145px;line-height:1.25}
.actions #miniHamper{width:44px;height:44px;min-height:44px}
.actions #miniHamper.hamper-hit{animation:heart-merge .38s ease-out}
.actions .feedback-slot{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:var(--care-feedback);min-height:0;align-items:center;overflow:hidden}
.feedback-slot>*{grid-area:1 / 1;min-width:0;max-height:100%;overflow:auto;scrollbar-width:thin}
.feedback-slot>:is(.care-panel-hint,.need-hint){min-height:0;margin:0;padding:0 2px;font-size:.73rem;line-height:1.2;color:#537572}
.feedback-slot:has(.care-inline-controls:not([hidden]),.reward-pop.show,.toast.show)>:is(.care-panel-hint,.need-hint){visibility:hidden}
.feedback-slot .reward-pop,.feedback-slot .toast{min-height:0;max-height:100%;padding:1px 6px;line-height:1.2}
.feedback-slot .reward-pop img{max-height:calc(var(--care-feedback) - 2px)}
.feedback-slot .reward-copy small{display:none}
.feedback-slot .reward-copy>span{display:block}
.actions .care-panel-stack{height:100%;min-height:0;align-items:stretch}
.care-panel-stack>#nurturePanel{display:grid;grid-template-rows:minmax(0,1fr);height:100%;min-height:0}
#actions.fixed-care-grid{grid-area:1 / 1;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-rows:0;gap:6px;margin:0;height:100%;min-height:0;align-items:stretch}
#actions.fixed-care-grid>.action,.care-actions-grid>.action{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:22px minmax(0,1fr) 11px;align-items:center;justify-items:center;height:100%;min-height:44px;max-height:100%;border-width:3px;padding:3px 2px;gap:1px;line-height:1.1;min-width:0;overflow-wrap:normal}
#actions.fixed-care-grid>.action:hover,.care-actions-grid>.action:hover{transform:none}
#actions.fixed-care-grid>.action>.action-icon,.care-actions-grid>.action>.action-icon{grid-area:1 / 1;width:22px;height:22px;font-size:1.4rem;line-height:1}
/* The illustration uses the reserved icon box, including the larger bath tile.
   Its intrinsic em size must never change the panel or overlap the label. */
.action-icon>.care-icon{width:100%;height:100%}
#actions.fixed-care-grid>.action>[id^="label-"],#actions.fixed-care-grid>.action>.toy-basket-label,.care-actions-grid>.action>span:not(.action-icon){grid-area:2 / 1;max-width:100%;line-height:1.1}
#actions.fixed-care-grid>.action>.action-price,#actions.fixed-care-grid>.action>.action-lock-note,.care-actions-grid>.action>small{grid-area:3 / 1;margin:0;font-size:.63rem;line-height:1.1;max-width:100%;white-space:nowrap}
#actions.fixed-care-grid>.action.action-locked{border-width:3px}
.care-panel-stack>#hygienePanel{display:grid;grid-template-rows:minmax(0,1fr);height:100%;min-height:0}
#hygienePanel>.care-actions-grid{grid-area:1 / 1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;height:100%;min-height:0;align-items:stretch;margin:0}
#hygieneActions>#careButton{grid-area:1 / 1 / span 2;grid-template-rows:minmax(32px,1fr) auto minmax(22px,1fr);padding:8px;gap:5px}
#hygieneActions>#careButton>.action-icon{width:46px;height:46px;align-self:end}
#hygieneActions>#careButton>small{align-self:start;white-space:normal}
#hygieneActions>#faceWashButton{grid-area:1 / 2}
#hygieneActions>#clothesButton{grid-area:2 / 2}

/* Necessary guidance appears briefly, in the reserved strip, without a dismiss button. */
.feedback-slot>.care-inline-controls{width:100%;margin:0;padding:1px 5px;border-radius:8px;background:var(--season-soft,#edf7ef);color:var(--season-ink,#285f57)}
.care-inline-controls .care-instruction{display:flex;align-items:center;gap:6px;margin:0;min-width:0;font-size:.72rem;line-height:1.2;color:inherit}
.care-inline-controls .care-instruction img{display:block;flex:none;width:23px;height:28px;object-fit:contain}
.care-advice-copy{display:block;min-width:0}
.care-advice-copy>small{display:none}
.care-advice-copy>#careInstruction{display:block}
.care-inline-controls[hidden]{display:none}
#actions.fixed-care-grid .action-icon svg,.care-actions-grid .action-icon svg{display:block;width:100%;height:100%}
@media(max-width:610px){.game{--care-height:min(250px,38dvh)}.stage>.baby-scene{width:min(100%,290px);max-height:275px;align-self:center}}
@media(max-width:360px){.actions #signalCount{display:block;font-size:.61rem}.actions .care-tabs button{font-size:.75rem;padding:7px 3px}.actions .section-row{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
@media(max-height:660px){.game{--caption-name:25px;--caption-state:38px}#actions.fixed-care-grid>.action,.care-actions-grid>.action{grid-template-rows:18px minmax(0,1fr) 10px;font-size:.68rem;padding:2px 1px}#actions.fixed-care-grid>.action>.action-icon,.care-actions-grid>.action>.action-icon{width:18px;height:18px;font-size:1.2rem}.baby-state>.milestone{font-size:1rem}}
/* On the smallest phones, leave two lines for labels such as “Put baby to bed”. */
@media(max-height:620px){#actions.fixed-care-grid>.action,.care-actions-grid>.action{grid-template-rows:14px minmax(0,1fr) 10px;border-width:2px;padding:1px;gap:0}#actions.fixed-care-grid>.action>.action-icon,.care-actions-grid>.action>.action-icon{width:14px;height:14px}}
@media(max-height:540px){.game{--care-feedback:24px;--care-row:calc((var(--care-height) - 88px) / 2)}.game>.actions{padding:4px 10px;gap:3px}.feedback-slot>:is(.care-panel-hint,.need-hint){font-size:.68rem}.care-advice-copy>#careInstruction{font-size:.66rem}.care-inline-controls .care-instruction img{height:22px}#actions.fixed-care-grid>.action,.care-actions-grid>.action{grid-template-rows:14px minmax(0,1fr) 10px;padding:1px;gap:0}#actions.fixed-care-grid>.action>.action-icon,.care-actions-grid>.action>.action-icon{width:14px;height:14px}#hygieneActions>#careButton>.action-icon{width:32px;height:32px}}
@media(max-height:480px){.game{--care-feedback:16px}.feedback-slot>:is(.care-panel-hint,.need-hint){white-space:nowrap}#actions.fixed-care-grid>.action,.care-actions-grid>.action{grid-template-rows:minmax(0,1fr) 10px;min-height:0}#actions.fixed-care-grid>.action>.action-icon,.care-actions-grid>.action>.action-icon{display:none}#actions.fixed-care-grid>.action>[id^="label-"],#actions.fixed-care-grid>.action>.toy-basket-label,.care-actions-grid>.action>span:not(.action-icon){grid-area:1 / 1}#actions.fixed-care-grid>.action>.action-price,#actions.fixed-care-grid>.action>.action-lock-note,.care-actions-grid>.action>small{grid-area:2 / 1}}
@media(prefers-reduced-motion:reduce){.baby-state>.milestone,.actions #miniHamper.hamper-hit{animation:none}}