/* NeverMuseum tactile care station artwork.
   Shared across Wander Mode and the accessible 2D Care Garden. */
.care-play{font-family:system-ui,sans-serif;color:#345140;margin:10px auto 16px;max-width:590px}
.care-play-instructions{font-size:.8rem;line-height:1.55;text-align:center;color:#496756;margin:4px 0 10px}
.care-play-stage{
 --care-sky:#e6ecdb;--care-earth:#a8b998;
 background:linear-gradient(180deg,var(--care-sky) 0%,#f5f1df 63%,var(--care-earth) 63%,#8eaa83 100%);
 height:192px;position:relative;border:1.5px solid #a3b8a0;border-radius:17px;
 overflow:hidden;isolation:isolate;box-shadow:inset 0 2px 15px #ffffff88,0 3px 0 #7b9a80;
}
.care-play-backdrop{position:absolute;inset:0;pointer-events:none;color:#f7df97}
.care-play-sun{position:absolute;top:11px;right:21px;font-size:2rem;opacity:.7}
.care-play-hill{position:absolute;bottom:-28px;right:12%;font:normal 6rem Georgia;color:#b8cfa4;opacity:.3}
.care-play-targets{position:absolute;inset:21px 20px 57px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end}
.care-play-target{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;
 border:1.5px solid #8ca28d;border-radius:13px;
 background:#fff8eccc;color:#365543;min-height:92px;padding:9px 5px 7px;
 box-shadow:0 3px 0 #7f9d80;text-align:center;touch-action:manipulation;
 cursor:pointer;transition:background .14s ease,transform .14s ease,border-color .14s ease}
.care-play-target:hover:not(:disabled),.care-play-target:focus-visible{background:#f2f8da;transform:translateY(-3px);outline:2px solid #bd8d6b;outline-offset:1px}
.care-play-target.is-next{background:#fffae7;border:2.5px solid #5e8b61;box-shadow:0 0 0 4px #a5c89669,0 4px 0 #799879;animation:care-pulse 2.4s ease-in-out infinite}
.care-play-target.is-done{opacity:.65;background:#eff4e7}
.care-play-target:disabled{cursor:default;opacity:.62}
.care-play-object{font-size:1.7rem;line-height:1}
.care-play-target-title{font:750 .65rem/1.3 system-ui;color:#3e6150}
.care-play-tool{position:absolute;bottom:6px;left:50%;display:flex;align-items:center;gap:6px;
 border:2px solid #546f54;border-radius:100px;padding:5px 12px 5px 10px;background:#fff2d6;
 color:#395544;box-shadow:0 3px 0 #56775a;transform:translate(-50%,0);touch-action:none;
 cursor:grab;z-index:4;user-select:none;will-change:transform}
.care-play-tool span{font-size:1.6rem;line-height:1}
.care-play-tool small{font:800 .65rem system-ui;letter-spacing:.03em;white-space:nowrap}
.care-play-tool.is-dragging{cursor:grabbing;background:#ffdbac;box-shadow:0 9px 19px #29453340}
.care-play-hint{font:.67rem/1.5 system-ui;color:#627764;text-align:center;margin:8px auto 0}
.care-play[data-care-play=water]{--care-sky:#d5e9e1;--care-earth:#8cb69a}
.care-play[data-care-play=dust]{--care-sky:#e1d9cc;--care-earth:#c6ad8e}
.care-play[data-care-play=polish]{--care-sky:#eee3c2;--care-earth:#bd9568}
.care-play[data-care-play=tidy]{--care-sky:#eddee0;--care-earth:#c6a49c}
.care-play[data-care-play=trim]{--care-sky:#e2eacb;--care-earth:#87aa7d}
.care-play[data-care-play=plant]{--care-sky:#d7e9d5;--care-earth:#8fb88c}
.care-play[data-care-play=plant] .care-play-target{background:#fbf5e8;border-radius:12px 12px 4px 4px}
.care-play[data-care-play=plant] .care-play-target.is-next{border-color:#5f9269}
@keyframes care-pulse{0%,100%{box-shadow:0 0 0 4px #a5c89650,0 4px 0 #799879}50%{box-shadow:0 0 0 7px #b0cf9c50,0 4px 0 #799879}}
@media(max-width:650px){
 .care-play-stage{height:170px;border-radius:14px}
 .care-play-targets{inset:17px 8px 51px;gap:5px}
 .care-play-target{min-height:88px;padding:6px 2px}
 .care-play-target-title{font-size:.56rem}
 .care-play-object{font-size:1.5rem}
 .care-play-tool{bottom:4px;padding:4px 9px}
 .care-play-instructions{font-size:.73rem}
}
@media(prefers-reduced-motion:reduce){.care-play-target{transition:none}.care-play-target.is-next{animation:none}}

/* Keep the entire activity reachable on short phones and landscape tablets. */
#careGame,#ritual{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
#careGame .care-game-art{min-height:62px;margin:8px 0}
#careGame #careGameGlyph{font-size:2.5rem}
#ritual .ritual-art{min-height:56px;margin:8px 0;font-size:2.45rem}
#careGame .care-play-instructions,#ritual .care-play-instructions{margin:4px 0 6px}
@media(max-width:650px){
 #careGame .care-game-art{min-height:49px;margin:5px 0}
 #careGame #careGameGlyph{font-size:1.9rem}
 #careGame h2,#ritual h2{font-size:1.58rem;line-height:1.08}
 #careGameIntro,#ritualIntro{margin:8px 0}
 #careGame .care-game-actions,#ritual .ritual-actions{margin-top:9px;gap:6px}
 #careGame .care-game-actions button,#ritual .ritual-actions button{padding:9px 10px;font-size:.73rem}
 #ritual .ritual-art{min-height:45px;font-size:2rem}
 #careGameStep,#ritualStep{min-height:30px;margin:5px 0;font-size:.75rem}
 .care-play-stage{height:152px}
 .care-play-targets{inset:13px 8px 43px}
 .care-play-target{min-height:76px}
 .care-play-tool{bottom:2px}
}