* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --pink: #ff6b9d; --pink-dark: #e04e83; --bg: #fdf6ec;
  --card: #ffffff; --ink: #3d405b; --soft: #ffe3ee;
}

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #b8e6ff 0%, #e8f7ff 100%);
  color: var(--ink); height: 100dvh; overflow: hidden; user-select: none;
  font-weight: 600;
}

#app { display: flex; flex-direction: column; height: 100dvh; max-width: 520px; margin: 0 auto; background: var(--bg); box-shadow: 0 0 40px rgba(0,0,0,.12); }

/* Top bar */
#topbar { padding: 10px 12px; background: rgba(255,255,255,.92); border-bottom: 2px solid #f3d9e2; z-index: 20; }
#coin-display { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
#needs-bar { display: flex; gap: 8px; }
.need { flex: 1; display: flex; align-items: center; gap: 4px; }
.need-icon { font-size: 17px; }
.need-track { flex: 1; height: 11px; background: #eee7ea; border-radius: 6px; overflow: hidden; }
.need-fill { height: 100%; border-radius: 6px; background: #6fce62; width: 100%; transition: width .5s, background .5s; }
.need.mid .need-fill { background: #ffc53d; }
.need.low .need-fill { background: #ff6b6b; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* Scene */
#scene { flex: 1; position: relative; overflow: hidden; }
#room { position: absolute; inset: 0; }
#room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#night-overlay { position: absolute; inset: 0; background: rgba(18, 22, 58, .48); opacity: 0; transition: opacity 1.2s; pointer-events: none; z-index: 4; }
#room.night #night-overlay { opacity: 1; }
/* Rooms bar */
#rooms-bar { display: flex; gap: 6px; padding: 8px 10px; background: #fff; border-bottom: 2px solid var(--soft); overflow-x: auto; }
.room-btn { flex: 1; white-space: nowrap; border: 2px solid var(--soft); background: #fff5f8; border-radius: 999px; padding: 7px 4px; font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--ink); cursor: pointer; }
.room-btn.selected { background: var(--pink); border-color: var(--pink); color: #fff; }

.hotspot { position: absolute; z-index: 3; cursor: pointer; border-radius: 12px; display: none; }
.hotspot:active { background: rgba(255,255,255,.18); }
#room[data-room="kitchen"] .hs-kitchen { display: block; }
#room[data-room="bedroom"] .hs-bedroom { display: block; }
#room[data-room="bathroom"] .hs-bathroom { display: block; }
#room[data-room="backyard"] .hs-backyard { display: block; }
#room[data-room="closet"] .hs-closet { display: block; }
#hs-c-shirt1 { left: 0; top: 37%; width: 16%; height: 26%; }
#hs-c-shirt2 { left: 13%; top: 35%; width: 20%; height: 22%; }
#hs-c-shirt3 { left: 27%; top: 43%; width: 16%; height: 30%; }
#hs-c-shirt4 { left: 39%; top: 45%; width: 12%; height: 27%; }
#hs-c-shorts1 { display: none !important; }
#hs-c-shorts2 { display: none !important; }
#hs-c-shorts3 { display: none !important; }
#hs-c-folded { left: 44%; top: 65%; width: 50%; height: 28%; }
#hs-c-shoe1 { display: none !important; }
#hs-c-shoe2 { display: none !important; }
#hs-c-shoe3 { display: none !important; }
#hs-c-shoe4 { display: none !important; }
#hs-c-mirror { left: 52%; top: 11%; width: 36%; height: 42%; }
#hs-c-dresser { left: 19%; top: 73%; width: 24%; height: 18%; }
#hs-y-grass { left: 66%; top: 25%; width: 22%; height: 17%; }
#yard-ball { position: absolute; left: 58%; bottom: 12%; z-index: 6; cursor: pointer; display: none; transition: left .5s ease-in, bottom .5s ease-in; }
#yard-ball img { width: 36px; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); pointer-events: none; }
#room[data-room="backyard"] #yard-ball { display: block; }
#dig-mound { position: absolute; left: 4%; bottom: 13%; z-index: 6; cursor: pointer; display: none; }
#dig-mound img { width: 84px; display: block; pointer-events: none; }
#room[data-room="backyard"] #dig-mound { display: block; }
#hs-k-fridge { left: 0; top: 22%; width: 44%; height: 30%; }
#hs-k-stove { left: 0; top: 60%; width: 40%; height: 27%; }
#hs-k-sink { left: 44%; top: 68%; width: 34%; height: 24%; }
#hs-k-table { left: 66%; top: 24%; width: 34%; height: 44%; }
#hs-k-window { left: 48%; top: 6%; width: 16%; height: 30%; }
#hs-b-bed { left: 6%; top: 60%; width: 92%; height: 31%; }
#hs-b-dresser { left: 79%; top: 46%; width: 21%; height: 26%; }
#hs-b-piano { display: none !important; }
#hs-b-bookshelf { left: 0; top: 20%; width: 18%; height: 52%; }
#hs-b-window { left: 26%; top: 16%; width: 50%; height: 40%; }
#hs-b-dogbed { left: 74%; top: 84%; width: 26%; height: 14%; }
#hs-ba-tub { left: 0; top: 42%; width: 78%; height: 46%; }
#hs-ba-shower { left: 84%; top: 21%; width: 16%; height: 26%; }
#hs-ba-sink { left: 70%; top: 51%; width: 30%; height: 20%; }
#hs-ba-toilet { left: 71%; top: 69%; width: 29%; height: 18%; }
#room[data-room="living"] .hs-living { display: block; }
#hs-l-tv { left: 56%; top: 49%; width: 28%; height: 20%; }
#hs-l-console { left: 57%; top: 65%; width: 26%; height: 9%; }
#hs-l-couch { left: 0; top: 45%; width: 55%; height: 38%; }
#hs-l-desk { left: 0; top: 31%; width: 13%; height: 16%; }
#hs-l-rug { left: 12%; top: 78%; width: 72%; height: 17%; }
#hs-l-hammock { left: 84%; top: 40%; width: 16%; height: 36%; }
#bath-kid { position: absolute; z-index: 5; left: 16%; bottom: 48%; width: 35%; pointer-events: none; }
#tv-screen { position: absolute; z-index: 3; left: 61%; top: 51%; width: 20%; height: 15%; background: #263859; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 0 24px rgba(56,189,248,.55); pointer-events: none; }
.race-track { position: relative; background: #eef2f7; border-radius: 12px; height: 46px; margin: 8px 0; overflow: hidden; }
.race-car { position: absolute; left: 0; top: 4px; font-size: 32px; transition: left .12s linear; }
.race-flag { position: absolute; right: 6px; top: 8px; font-size: 24px; }
#hs-y-tree { left: 9%; top: 6%; width: 29%; height: 45%; }
#hs-y-doghouse { left: 30%; top: 56%; width: 44%; height: 24%; }
#hs-y-flowers { left: 0; top: 47%; width: 21%; height: 22%; }
#hs-y-window { left: 83%; top: 37%; width: 17%; height: 26%; }
#dog-bowl { position: absolute; left: 84%; bottom: 3%; width: 74px; z-index: 6; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); transition: transform .15s; display: none; }
#room[data-room="kitchen"] #dog-bowl { display: block; }
#dog-bowl:active { transform: scale(.9); }

/* Person */
#person { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); z-index: 10; transition: left 1.6s ease-in-out; cursor: pointer; }
#person-anim { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: bottom center; animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.016); } }
#person-anim.walking { animation: walkBob .24s ease-in-out infinite alternate; }
@keyframes walkBob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-8px) rotate(2deg); } }
#kid-img { height: min(297px, 41dvh); width: auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); pointer-events: none; }
#person.bounce #person-anim { animation: bounce .35s 4 alternate ease-in-out; }
#person.dance #person-anim { animation: dance .3s infinite alternate ease-in-out; }
#person.jump #person-anim { animation: jump .45s ease-out; }
#person.spin #person-anim { animation: spin .6s ease-in-out; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes dance { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-8px); } }
@keyframes jump { 40% { transform: translateY(-34px) scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }

.person-hat { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-6deg); font-size: 44px; line-height: 1; z-index: 3; pointer-events: none; }

#speech-bubble { position: absolute; bottom: 104%; left: 50%; transform: translateX(-50%); background: #fff; padding: 8px 14px; border-radius: 16px; font-size: 15px; font-weight: 800; white-space: nowrap; border: 2px solid var(--soft); box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 12; animation: pop .25s; }
#speech-bubble.hidden { display: none; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
#hearts { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 18px; animation: floatUp 1.2s forwards; }
#hearts.hidden { display: none; }
#zzz { position: absolute; top: -24px; right: -16px; font-size: 26px; animation: floatUp 2s infinite; }
#zzz.hidden { display: none; }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }

#dog { position: absolute; bottom: 4%; left: 13%; z-index: 9; transition: left 2.4s ease-in-out; cursor: pointer; }
#dog-img { height: 110px; width: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); pointer-events: none; }
#dog.happy #dog-img { animation: wag .25s infinite alternate; }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
#dog-bubble { position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); background: #fff; padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
#dog-bubble.hidden { display: none; }

#fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
.fx-emoji { position: absolute; font-size: 26px; animation: fxFall 1.1s ease-in forwards; }
@keyframes fxFall { 0% { transform: translateY(-10px) rotate(0); opacity: 1; } 100% { transform: translateY(120px) rotate(40deg); opacity: 0; } }
.bubble-fx { position: absolute; font-size: 22px; cursor: pointer; pointer-events: auto; animation: rise 2.6s linear forwards; }
@keyframes rise { from { transform: translateY(0); opacity: .95; } to { transform: translateY(-46vh); opacity: .5; } }

/* Action bar */
#actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; background: rgba(255,255,255,.96); border-top: 2px solid #f3d9e2; z-index: 20; }
.action-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 2px; font-size: 26px; background: #fff5f9; border: 2px solid var(--soft); border-radius: 16px; cursor: pointer; font-family: inherit; transition: transform .1s, background .1s; }
.action-btn span { font-size: 11px; font-weight: 800; color: #8a5a70; }
.action-btn:active { transform: scale(.9); background: #ffe0ed; }

/* Sheets / overlays */
.sheet { position: fixed; inset: 0; background: rgba(40,20,35,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
.sheet.hidden { display: none; }
.sheet-card { background: #fff; width: 100%; max-width: 520px; max-height: 86dvh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 22px 20px 30px; text-align: center; animation: slideUp .3s ease-out; }
.sheet-card.wide { text-align: center; }
@keyframes slideUp { from { transform: translateY(60px); opacity: 0; } }
.sheet-card h3 { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.sheet-sub { color: #8b8fa3; font-size: 14px; margin: 8px 0; }
.sheet-card input { width: 100%; padding: 13px; margin: 4px 0 10px; border: 2px solid var(--soft); border-radius: 14px; font-size: 16px; font-family: inherit; font-weight: 700; text-align: center; }
.welcome-emoji { font-size: 52px; margin-bottom: 4px; }

.big-btn { background: var(--pink); color: #fff; border: none; padding: 15px 30px; border-radius: 16px; font-size: 18px; font-weight: 900; font-family: inherit; cursor: pointer; margin-top: 10px; box-shadow: 0 4px 0 var(--pink-dark); width: 100%; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-dark); }
.close-btn { background: #f1f2f6; color: var(--ink); border: none; padding: 12px 26px; border-radius: 14px; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; margin-top: 14px; }
.mini-btn { background: #e8f4ff; color: #2f6fb2; border: none; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; margin-top: 10px; display: block; margin-left: auto; margin-right: auto; }

.snack-grid, .game-grid, .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.snack-btn, .game-btn, .shop-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 4px; font-size: 34px; background: #fff8fb; border: 2px solid var(--soft); border-radius: 18px; cursor: pointer; font-family: inherit; transition: transform .1s; }
.snack-btn:active, .game-btn:active, .shop-btn:active { transform: scale(.93); }
.snack-btn span, .game-btn span, .shop-btn span { font-size: 12px; font-weight: 800; color: #8a5a70; }
.shop-btn.owned { border-color: #95e08a; background: #f2fff0; }
.shop-btn.cant { opacity: .45; }

.swatch-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 4px; }
.swatch { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #eee; cursor: pointer; }
.swatch.selected { border-color: var(--ink); transform: scale(1.12); }
.hat-btn { font-size: 24px; padding: 8px 12px; background: #fff8fb; border: 2px solid var(--soft); border-radius: 14px; cursor: pointer; font-family: inherit; font-weight: 800; }
.hat-btn.selected { border-color: var(--ink); background: #ffe0ed; }

/* Piano */
#piano-keys { display: flex; gap: 3px; margin: 14px 0 4px; justify-content: center; }
.pkey { flex: 1; max-width: 46px; height: 110px; background: #fff; border: 2px solid #3d405b; border-radius: 0 0 8px 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; cursor: pointer; font-weight: 900; }
.pkey.target { background: #38bdf8; box-shadow: 0 0 16px #38bdf8, inset 0 0 8px rgba(255,255,255,.55); color: #fff; }
.pkey.playing { background: var(--soft); }
.pkey.good { background: #95e08a !important; }
.pkey.bad { background: #ff9a9a !important; }

/* Memory */
#memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.mem-card { aspect-ratio: 1; font-size: 30px; background: linear-gradient(145deg, #ff8fab, #ff6b9d); border: none; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s; font-family: inherit; }
.mem-card .face { display: none; }
.mem-card.flipped { background: #fff3f7; border: 2px solid var(--soft); }
.mem-card.flipped .face { display: block; }
.mem-card .back { color: #fff; font-size: 22px; font-weight: 900; }
.mem-card.flipped .back { display: none; }
.mem-card.matched { background: #d8ffd2; border: 2px solid #95e08a; }

/* Catch */
#catch-area { position: relative; height: 300px; background: linear-gradient(180deg, #cdeffd, #eafbf0); border-radius: 16px; overflow: hidden; margin-top: 10px; touch-action: none; }
#catch-basket { position: absolute; bottom: 8px; left: 50%; font-size: 40px; transform: translateX(-50%); }
.falling { position: absolute; font-size: 28px; top: -30px; }

/* Fridge, books, school */
#fridge-img { width: 100%; border-radius: 14px; margin-bottom: 10px; }
.book-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.book-btn { display: flex; align-items: center; gap: 10px; background: #fff5f8; border: 2px solid var(--soft); border-radius: 14px; padding: 10px 14px; font-family: inherit; font-size: 16px; font-weight: 800; color: var(--ink); cursor: pointer; text-align: left; }
.book-btn:active { transform: scale(.97); }
#book-art { font-size: 74px; text-align: center; padding: 16px 0 6px; letter-spacing: 4px; }
#book-text { font-size: 19px; font-weight: 700; text-align: center; line-height: 1.45; min-height: 84px; padding: 0 6px; }
#book-page-num { text-align: center; color: #b08; font-weight: 800; font-size: 13px; }
.book-nav { display: flex; gap: 10px; justify-content: center; margin: 8px 0 12px; }
.mini-btn { background: var(--pink); color: #fff; border: none; border-radius: 999px; padding: 10px 20px; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.mini-btn:disabled { opacity: .35; }
#school-art { font-size: 40px; text-align: center; letter-spacing: 3px; min-height: 52px; padding-top: 8px; }
#school-q { font-size: 30px; font-weight: 800; text-align: center; margin: 6px 0 12px; }
#school-progress { text-align: center; font-weight: 800; color: #b08; }
#school-answers { display: flex; gap: 10px; justify-content: center; }
.school-ans { background: #fff5f8; border: 3px solid var(--soft); border-radius: 16px; width: 74px; height: 62px; font-family: inherit; font-size: 26px; font-weight: 800; color: var(--ink); cursor: pointer; }
.school-ans.right { background: #b8f7c1; border-color: #4caf50; }
.school-ans.wrong { background: #ffc9c9; border-color: #e63946; }
#school-feedback { text-align: center; font-size: 18px; font-weight: 800; min-height: 26px; margin-top: 10px; }
#fridge-wrap { position: relative; }
#fridge-wrap #fridge-img { margin-bottom: 0; display: block; }
.fridge-spot { position: absolute; background: transparent; border: none; border-radius: 12px; cursor: pointer; padding: 0; }
.fridge-spot:active { background: rgba(255, 214, 64, .35); }
#sleep-kid { position: absolute; z-index: 5; left: 26%; bottom: 13%; width: 48%; pointer-events: none; }
#sleep-dog { position: absolute; z-index: 5; left: 1%; bottom: 2%; width: 30%; pointer-events: none; }
.toy { position: absolute; z-index: 4; font-size: 42px; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); user-select: none; -webkit-user-select: none; }
#toy-ball { left: 22%; bottom: 8%; }
#toy-kite { left: 66%; bottom: 57%; font-size: 46px; }
#toy-plant2 { left: 6%; bottom: 11%; }
#toy-guitar { left: 28%; bottom: 5%; }
#toy-rocket { left: 44%; bottom: 43%; font-size: 36px; }
#toy-puppy-toy { left: 23%; bottom: 5%; font-size: 34px; }
@keyframes kiteSway { 0%,100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(16px,-30px) rotate(9deg); } }
#toy-kite.flying { animation: kiteSway 1.2s ease-in-out 4; }
@keyframes kickBall { 0% { transform: translate(0,0) rotate(0); } 30% { transform: translate(110px,-64px) rotate(130deg); } 62% { transform: translate(200px,0) rotate(250deg); } 100% { transform: translate(0,0) rotate(360deg); } }
#toy-ball.kicked { animation: kickBall 1.1s ease-in-out; }
#toy-rocket.launch { transition: transform 1.1s ease-in, opacity 1.1s ease-in; transform: translateY(-290px); opacity: 0; }
@keyframes growPulse { 50% { transform: scale(1.35); } }
#toy-plant2.grow { animation: growPulse .5s ease-in-out 3; }

.hidden { display: none !important; }

/* --- Squirrel era: touch zones, accessories, bird --- */
.tzone { position: absolute; z-index: 4; cursor: pointer; border-radius: 40%; }
#zone-head { left: 0; top: 24%; width: 68%; height: 34%; }
#zone-belly { left: 10%; top: 58%; width: 48%; height: 27%; }
#zone-feet { left: 8%; top: 85%; width: 50%; height: 15%; }
.person-hat.acc-flower { top: 21%; left: 3%; transform: rotate(-8deg); font-size: 42px; }
.person-hat.acc-leaf { top: 16%; left: 27%; transform: rotate(10deg); font-size: 46px; }
.person-hat.acc-scarf { top: 54%; left: 28%; transform: none; font-size: 46px; }
#bird { position: absolute; width: 19%; z-index: 8; cursor: pointer; }
#bird img { width: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(0,0,0,.25)); pointer-events: none; }
#bird.perched { animation: birdBob 1.8s ease-in-out infinite; }
@keyframes birdBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#bird-say { position: absolute; bottom: 103%; left: 50%; transform: translateX(-50%); background: #fff; border: 2px solid #bde3ff; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15); color: var(--ink); }
#bird-say.hidden { display: none; }
#room[data-room="backyard"] #dig-mound { display: none; }
#room[data-room="backyard"] #yard-ball { bottom: 24%; }


/* ===== v5 mega-round: new rooms, games, scrub bath, sit TV, dog needs ===== */
#room[data-room="dogroom"] .hs-dogroom { display: block; }
#room[data-room="ground"] .hs-ground { display: block; }
#hs-c-bow { left: 79%; top: 39%; width: 19%; height: 17%; }
#hs-d-bed { left: 12%; top: 46%; width: 58%; height: 38%; }
#hs-d-food { left: 1%; top: 73%; width: 16%; height: 21%; }
#hs-d-water { left: 16%; top: 73%; width: 15%; height: 21%; }
#hs-d-toys { left: 63%; top: 55%; width: 29%; height: 29%; }
#hs-g-opening { left: 73%; top: 46%; width: 27%; height: 40%; }
#hs-g-pond { left: 0; top: 55%; width: 26%; height: 25%; }
#hs-g-slide { left: 27%; top: 60%; width: 36%; height: 30%; }
#hs-g-flowers { left: 75%; top: 79%; width: 25%; height: 19%; }
#hs-g-grass { left: 25%; top: 79%; width: 45%; height: 19%; }
#room[data-room="backyard"] #yard-ball, #room[data-room="backyard"] #dig-mound { display: none !important; }
#room[data-room="ground"] #yard-ball { display: block; bottom: 10%; }
#room[data-room="ground"] #dig-mound { display: block; bottom: 6%; }
#room[data-room="backyard"] #toy-ball { bottom: 25%; }
#room[data-room="backyard"] #toy-plant2 { bottom: 26%; }
#canopy-slide { position: absolute; right: 1%; top: 35%; font-size: 54px; z-index: 7; cursor: pointer; display: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); animation: slideNudge 1.6s ease-in-out infinite; }
#room[data-room="backyard"] #canopy-slide { display: block; }
@keyframes slideNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
#sit-kid { position: absolute; left: 8%; bottom: 29%; width: 33%; z-index: 8; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
#sit-dog { position: absolute; left: 51%; bottom: 5%; width: 25%; z-index: 8; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
#soap { position: absolute; left: 68%; bottom: 50%; font-size: 42px; z-index: 9; cursor: grab; touch-action: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
#clean-wrap { position: absolute; top: 3%; left: 50%; transform: translateX(-50%); width: 58%; max-width: 260px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 5px 10px; z-index: 9; text-align: center; font-size: 12px; font-weight: 800; }
#clean-fill { height: 10px; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #7bed9f, #2ed573); transition: width .2s; margin-bottom: 2px; }
#dog-stats { position: absolute; left: 3%; top: 2%; z-index: 9; background: rgba(255,255,255,.9); border-radius: 14px; padding: 6px 9px; width: 126px; display: none; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
#room[data-room="dogroom"] #dog-stats { display: block !important; }
.ds-row { display: flex; align-items: center; gap: 5px; margin: 2px 0; font-size: 13px; }
.ds-bar { flex: 1; height: 9px; background: #eee; border-radius: 999px; overflow: hidden; }
.ds-bar div { height: 100%; border-radius: 999px; transition: width .3s; }
#ds-food { background: #ff9f43; }
#ds-water { background: #48dbfb; }
#speech-bubble { max-width: 76vw; white-space: normal; text-align: center; line-height: 1.25; }
.person-hat.acc-bow { top: 17%; left: 31%; transform: rotate(8deg); font-size: 44px; }
.person-hat.acc-berry { top: 29%; left: 5%; transform: none; font-size: 36px; }
.person-hat.acc-acorn { top: 14%; left: 27%; transform: none; font-size: 40px; }
.person-hat.acc-butterfly { top: 19%; left: 57%; transform: none; font-size: 38px; }
#sleep-dog { left: 64%; bottom: 4%; width: 27%; }
#zzz { animation: zFloat 2.6s ease-in-out infinite; }
@keyframes zFloat { 0% { transform: translateY(6px) scale(.8); opacity: .4; } 55% { opacity: 1; } 100% { transform: translateY(-26px) scale(1.25); opacity: .35; } }
.mad { animation: madShake .45s !important; }
@keyframes madShake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-6px) rotate(-3deg); } 75% { transform: translateX(6px) rotate(3deg); } }
#dog.walking #dog-img { animation: dogBob .28s infinite alternate; }
@keyframes dogBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
#bath-kid.scrubbing { animation: scrubWig .18s infinite alternate; }
@keyframes scrubWig { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
#room.slide-next { animation: roomInR .38s ease; }
#room.slide-prev { animation: roomInL .38s ease; }
@keyframes roomInR { from { transform: translateX(30px); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes roomInL { from { transform: translateX(-30px); opacity: .35; } to { transform: none; opacity: 1; } }
#slide-stage { position: relative; height: 330px; border-radius: 16px; overflow: hidden; background: linear-gradient(#79bfe8 0%, #bfe8ff 45%, #8ed081 100%); touch-action: none; }
#slide-path { position: absolute; left: 50%; top: 0; width: 112px; height: 100%; transform: translateX(-50%); background: repeating-linear-gradient(180deg, #cf9250 0 46px, #c08340 46px 92px); border-radius: 44px; opacity: .9; }
.slide-item { position: absolute; font-size: 30px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
#slide-kid { position: absolute; width: 79px; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
#slide-dog { position: absolute; width: 58px; bottom: 104px; left: 57%; transform: translateX(-50%); z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
#slide-hud { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.92); padding: 4px 14px; border-radius: 999px; font-weight: 900; z-index: 4; white-space: nowrap; }
#slide-stage.bump { animation: madShake .3s; }
#maze-canvas { width: 100%; max-width: 306px; display: block; margin: 0 auto; border-radius: 12px; background: #7a4a21; }
#maze-btns { text-align: center; margin-top: 8px; }
#maze-btns button { font-size: 24px; padding: 7px 18px; margin: 2px; border-radius: 12px; border: 2px solid #f3c6d3; background: #fff; cursor: pointer; }

/* ===== v6: scarf fix, outdoor neighborhood, slide image, arrows ===== */
.person-hat.acc-scarf { top: 63%; left: 29%; }
#bath-kid { left: 17%; bottom: 47%; width: 28%; }
#soap { left: 7%; bottom: 45%; font-size: 38px; }
#canopy-slide { right: -3%; top: 46%; width: 47%; height: auto; font-size: 0; animation: none; z-index: 7; filter: drop-shadow(0 5px 5px rgba(0,0,0,.25)); }
#room[data-room="pond"] .hs-pond { display: block; }
#room[data-room="dogpark"] .hs-dogpark { display: block; }
#room[data-room="treedoor"] .hs-treedoor { display: block; }
#hs-d-rug { left: 30%; top: 80%; width: 42%; height: 17%; }
#hs-p-water { left: 2%; top: 44%; width: 70%; height: 32%; }
#hs-p-dock { left: 74%; top: 48%; width: 26%; height: 24%; }
#hs-p-reeds { left: 0; top: 60%; width: 14%; height: 24%; }
#hs-dp-hoop { left: 0; top: 34%; width: 14%; height: 22%; }
#hs-dp-tunnel { left: 15%; top: 38%; width: 19%; height: 16%; }
#hs-dp-ramp { left: 26%; top: 47%; width: 16%; height: 13%; }
#hs-dp-bench { left: 51%; top: 36%; width: 21%; height: 15%; }
#hs-dp-balls { left: 33%; top: 56%; width: 42%; height: 20%; }
#hs-t-door { left: 35%; top: 34%; width: 30%; height: 32%; }
#hs-t-steps { left: 18%; top: 64%; width: 64%; height: 18%; }
#hs-t-shrooms { left: 76%; top: 64%; width: 22%; height: 18%; }
#walk-left, #walk-right { position: absolute; top: 46%; z-index: 11; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.88); font-size: 30px; font-weight: 900; color: #b06a8a; display: none; align-items: center; justify-content: center; box-shadow: 0 3px 9px rgba(0,0,0,.25); cursor: pointer; }
#walk-left { left: 6px; }
#walk-right { right: 6px; }
#room[data-room="pond"] #sit-kid { left: 64%; bottom: 33%; width: 26%; }
#room[data-room="dogpark"] #sit-kid { left: 55%; bottom: 37%; width: 25%; }
#dog.jumping #dog-img { animation: dogJump .55s ease; }
@keyframes dogJump { 40% { transform: translateY(-26px); } }
#dog.rolling #dog-img { animation: rollOver .7s ease; }
@keyframes rollOver { to { transform: rotate(360deg); } }
#room[data-room="backyard"] #toy-ball { left: 30%; bottom: 26.5%; }

/* v7: slide sits IN the deck edge — only its top shows, middle of the edge */
#canopy-slide { left: 35%; right: auto; top: auto; bottom: -4%; width: 45%; }

/* v8: Lily Pad Leap */
#hs-p-lily { left: 16%; top: 50%; width: 36%; height: 22%; }
#lily-canvas { width: 100%; max-width: 340px; display: block; margin: 0 auto; border-radius: 12px; background: #3d9dbd; }
#lily-hud { text-align: center; font-size: 17px; margin-bottom: 4px; }
#lily-btns { text-align: center; margin-top: 8px; }
#lily-btns button { font-size: 24px; padding: 7px 18px; margin: 2px; border-radius: 12px; border: 2px solid #f3c6d3; background: #fff; cursor: pointer; }

/* v9: front-facing wide slide, connected to the canopy edge */
#canopy-slide { left: 22%; right: auto; top: auto; bottom: -1%; width: 56%; }
/* v9: the ball stays behind the rope too */
#room[data-room="backyard"] #toy-ball { bottom: 30%; }

/* v11: the show plays INSIDE the TV's glass */
#tv-screen { left: 65.5%; top: 54%; width: 19%; height: 11.5%; border-radius: 14px / 12px; font-size: 21px; overflow: hidden; box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 18px rgba(56,189,248,.45); }
#bird-img { color: transparent; }

/* v13: no box on the TV — the show plays on the TV's own screen, just the star moving */
#tv-screen { background: transparent !important; box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.tv-drv { animation: tvDrv 1.1s ease-in-out infinite alternate; }
.tv-lnch { animation: tvLnch 2.2s ease-in-out infinite; }
.tv-stomp { animation: tvStomp .7s ease-in-out infinite; }
.tv-swim { animation: tvDrv 2.6s ease-in-out infinite alternate; }
@keyframes tvDrv { from { transform: translate(-17%, 0); } to { transform: translate(17%, -4%); } }
@keyframes tvLnch { 0%, 100% { transform: translateY(24%); } 55% { transform: translateY(-26%); } }
@keyframes tvStomp { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-15%); } }

/* v15: dog park balls + Gigi's Obstacle Dash */
.park-ball { position: absolute; width: 9%; z-index: 6; display: none; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
#room[data-room="dogpark"] .park-ball { display: block; }
#gigi-hud { text-align: center; font-size: 16px; margin-bottom: 5px; }
#gigi-stage { position: relative; height: 280px; border-radius: 14px; overflow: hidden; background: linear-gradient(#aee3ff 0 62%, #8ed081 62% 100%); touch-action: none; }
#gigi-track { position: absolute; left: 0; right: 0; bottom: 22%; height: 8%; background: #c98d5a; border-top: 3px solid #a9743f; }
#gigi-runner { position: absolute; left: 14%; width: 54px; z-index: 3; }
.gigi-ob { position: absolute; z-index: 2; }
.ob-log { font-size: 30px; line-height: 1; }
.ob-tunnel { width: 62px; height: 54px; background: #4aa3d8; border-radius: 31px 31px 0 0; box-shadow: inset 0 -18px 0 -6px #2c6e99, inset 0 0 0 4px #7cc0e8; }
.ob-ramp { width: 52px; height: 30px; background: #b07a45; clip-path: polygon(0 100%, 100% 100%, 100% 25%); }

/* v17: profile running Gigi is wider than tall */
#gigi-runner { width: 76px; }

/* v21: the kite lives in a forest tree now, ball down in the clearing */
#room[data-room="ground"] #toy-kite { left: 71%; bottom: 63%; transform: rotate(16deg); }
#room[data-room="ground"] #toy-ball { left: 18%; bottom: 7%; }

/* v22: tap the big forest tree to call Pippa */
#hs-g-tree { left: 2%; top: 2%; width: 40%; height: 30%; }

/* v26: guitar is a real instrument now, leaning by the bookshelf */
#toy-guitar { left: 5%; bottom: 13%; font-size: 148px; transform: rotate(-12deg); }

/* v27: first-person 3D tree maze */
#maze-3d { width: 100%; height: 300px; border-radius: 12px; overflow: hidden; background: #243014; touch-action: none; }
#maze-3d canvas { display: block; }
#maze-hud { text-align: center; font-weight: 700; margin-top: 7px; color: #7a4d16; font-size: 16px; }

/* v28: window hotspot onto the actual window; lantern + lamp are light switches */
#hs-k-window { left: 67%; top: 27%; width: 31%; height: 45%; }
#hs-k-lantern { left: 48%; top: 6%; width: 16%; height: 30%; }
#hs-b-lamp { left: 79%; top: 44%; width: 19%; height: 27%; }
#dark-overlay { position: absolute; inset: 0; background: rgba(12, 14, 44, .55); opacity: 0; transition: opacity .8s; pointer-events: none; z-index: 45; }
#room.lights-off #dark-overlay { opacity: 1; }

/* v30: pantry goes full-bleed and big */
.pantry-card { max-width: 660px; max-height: 95dvh; padding: 14px 0 16px; }
.pantry-card h3 { margin-bottom: 0; }
.pantry-card .sheet-sub { margin: 2px 0 8px; }
.pantry-card #fridge-wrap { margin: 0; }
.pantry-card #fridge-img { border-radius: 10px; }
.pantry-card .close-btn { margin-top: 12px; }
/* 2D/3D chooser + Dash 3D */
.pick-row { display: flex; gap: 10px; margin: 10px 0 4px; }
.pick-btn { flex: 1; font-family: inherit; font-size: 32px; font-weight: 900; padding: 16px 6px 12px; border-radius: 18px; border: 2px solid var(--soft); background: #fff8fb; color: #5a3a4d; cursor: pointer; }
.pick-btn span { display: block; font-size: 13px; font-weight: 800; color: #8a5a70; margin-top: 2px; }
.pick-btn:active { transform: scale(.96); }
#dash3d { width: 100%; height: 300px; border-radius: 12px; overflow: hidden; background: #9fd8ef; touch-action: none; }
#dash3d canvas { display: block; }
#dash3d-hud { text-align: center; font-size: 16px; margin-bottom: 5px; }
.dash3d-row { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 10px; }
.jump-btn { font-family: inherit; font-size: 20px; font-weight: 900; padding: 13px 30px; border-radius: 999px; border: none; background: #4aa3d8; color: #fff; cursor: pointer; box-shadow: 0 4px 0 #2c6e99; }
.jump-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2c6e99; }
#maze-canvas { border-radius: 12px; max-width: 100%; }

/* v32: potty, cooking, teeth */
#potty-kid { position: absolute; left: 35%; bottom: 33%; width: 30%; z-index: 7; }
#brush-cup { position: absolute; left: 87%; bottom: 32%; width: 8.5%; display: none; z-index: 6; cursor: pointer; }
#room[data-room="bathroom"] #brush-cup { display: block; }
#room[data-room="potty"] .hs-potty { display: block; }
#hs-potty-toilet { left: 23%; top: 17%; width: 54%; height: 71%; }
#hs-k-stove { left: 5%; top: 52%; width: 33%; height: 37%; }
.potty-dance { animation: pottyWiggle .5s ease-in-out 2; }
@keyframes pottyWiggle { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
.cook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cook-grid .snack-btn.picked { background: #ffe9a8; border-color: #f2b134; }
#cook-bowl { font-size: 40px; min-height: 52px; letter-spacing: 2px; }
#cook-chop-item { font-size: 92px; cursor: pointer; user-select: none; -webkit-user-select: none; line-height: 1.15; }
#cook-chop-count { font-weight: 800; color: #8a5a70; margin-bottom: 6px; }
#cook-pot { touch-action: none; }
#cook-steam { height: 26px; font-size: 20px; }
#cook-pot-emoji { font-size: 104px; line-height: 1.1; }
#cook-fire { font-size: 34px; margin-top: -14px; transition: font-size .3s; }
.cook-track { margin: 12px auto 4px; max-width: 260px; }
#cook-action { margin-top: 10px; }
#teeth-stage { position: relative; width: 320px; max-width: 100%; margin: 0 auto; }
#teeth-canvas { width: 100%; display: block; border-radius: 14px; touch-action: none; }
#teeth-foam { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.foam-dot { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #ffffff, rgba(255,255,255,.88) 55%, rgba(205,232,255,.55)); box-shadow: inset -2px -2px 4px rgba(150,195,235,.55), inset 1px 1px 2px #fff, 0 1px 2px rgba(110,150,195,.25); animation: foamPop 1s ease-out forwards; }
@keyframes foamPop { 0% { transform: scale(.35) translate(0,0); opacity: 0; } 15% { opacity: 1; } 55% { transform: scale(1.05) translate(var(--dx, 0px), -5px); opacity: 1; } 100% { transform: scale(1.4) translate(var(--dx, 0px), -13px); opacity: 0; } }
#teeth-brush { position: absolute; right: 4px; bottom: 4px; width: 50px; z-index: 5; cursor: grab; touch-action: none; transform: rotate(3deg); filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
#teeth-brush.held { position: fixed; z-index: 300; transform: none; }
#teeth-brush.buzzing { animation: buzzShake .07s linear infinite; }
#teeth-brush.hint-wiggle { animation: pottyWiggle .5s ease-in-out 2; }
@keyframes buzzShake { 0% { margin-left: 0; } 50% { margin-left: 2px; } 100% { margin-left: -1px; } }
#teeth-progress { font-weight: 900; margin-top: 8px; color: #5a3a4d; }
.opt-btn { font-family: inherit; font-size: 17px; font-weight: 900; padding: 12px 22px; border-radius: 999px; border: none; background: #ff9d5c; color: #fff; cursor: pointer; box-shadow: 0 4px 0 #d96f2e; margin: 6px auto 2px; display: block; }
.opt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d96f2e; }
.opt-btn.hidden { display: none; }

#need-potty { cursor: pointer; }

#ds-potty { background: #a55eea; }
#poop { position: absolute; left: 62%; bottom: 4.5%; font-size: 36px; z-index: 8; cursor: pointer; animation: poopPulse 1s ease-in-out infinite; }
/* v41: Gigi potty spots — one in every forest scene */
.potty-spot { z-index: 7; }
#spot-ground { left: 25%; top: 82%; width: 21%; height: 15%; }
#spot-pond { left: 74%; top: 70%; width: 24%; height: 24%; }
#spot-dogpark { left: 58%; top: 74%; width: 26%; height: 21%; }
#spot-treedoor { left: 2%; top: 68%; width: 24%; height: 25%; }
.spot-hint { display: none; position: absolute; right: 6%; top: 4%; font-size: 19px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 2px 7px; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: poopPulse 1s ease-in-out infinite; }
.potty-spot.hinting .spot-hint { display: block; }
#dog.squatting #dog-img { transform: scaleY(.9); }
#dog-img { transition: transform .3s; }
#dog.good-shake { animation: dogShake .45s ease-in-out; }
@keyframes dogShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
.animated-poop { position: absolute; font-size: 30px; z-index: 8; pointer-events: none; animation: poopDrop .45s ease-in forwards; }
.animated-poop.wiggle { animation: poopWiggle .45s ease-in-out 2; }
.animated-poop.away { transition: opacity .5s, transform .5s; opacity: 0; transform: scale(.35) translateY(-10px); }
@keyframes poopDrop { 0% { transform: translateY(-18px) scale(1.2, .75); opacity: 0; } 55% { transform: translateY(2px) scale(.85, 1.18); opacity: 1; } 78% { transform: translateY(0) scale(1.12, .88); } 100% { transform: translateY(0) scale(1, 1); opacity: 1; } }
@keyframes poopWiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 70% { transform: rotate(7deg); } }
@keyframes poopPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Cook 3D kitchen */
#cook3d-game .sheet-card { max-width: 680px; }
#c3-stage { position: relative; width: 100%; aspect-ratio: 1344 / 703; border-radius: 16px; overflow: hidden; background: #8a5a33; touch-action: none; }
#c3-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#c3-tray { display: flex; gap: 6px; justify-content: center; margin-top: 10px; min-height: 74px; }
.c3-tray-item { width: 15%; max-width: 76px; cursor: grab; text-align: center; touch-action: none; -webkit-user-select: none; user-select: none; }
.c3-tray-item img { width: 100%; pointer-events: none; }
.c3-tray-item span { display: block; font-size: 11px; font-weight: 800; color: #7a4a21; }
.c3-tray-item.used { opacity: .25; pointer-events: none; }
.c3-item { position: absolute; width: 23%; aspect-ratio: 1.15; z-index: 5; cursor: pointer; touch-action: none; }
.c3-item .half { position: absolute; top: 0; width: 50.5%; height: 100%; overflow: hidden; transition: transform .18s; }
.c3-item .hl { left: 0; } .c3-item .hr { right: 0; }
.c3-item .half img { position: absolute; top: 0; width: 198%; height: 100%; max-width: none; }
.c3-item .hl img { left: 0; } .c3-item .hr img { left: -98%; }
.c3-item.chop1 .hl { transform: translateX(-5px) rotate(-5deg); }
.c3-item.chop1 .hr { transform: translateX(5px) rotate(5deg); }
.c3-item.chop2 .hl { transform: translateX(-11px) rotate(-10deg); }
.c3-item.chop2 .hr { transform: translateX(11px) rotate(10deg); }
.c3-item .pile { display: none; position: absolute; inset: 0; }
.c3-item.diced .half { display: none; }
.c3-item.diced .pile { display: block; }
.c3-item .pile img { position: absolute; width: 58%; }
.c3-item .pile img:nth-child(1) { left: 2%; top: 22%; transform: rotate(-10deg); }
.c3-item .pile img:nth-child(2) { left: 38%; top: 30%; transform: rotate(8deg); }
.c3-item .pile img:nth-child(3) { left: 20%; top: 2%; transform: rotate(18deg); }
.c3-drag { position: fixed; z-index: 120; pointer-events: none; filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); }
#c3-knife { position: absolute; width: 33%; left: 55%; top: 3%; z-index: 7; transform: rotate(6deg); transition: left .16s, top .16s, transform .13s; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
#c3-spoon { position: absolute; width: 29%; right: 1%; bottom: 2%; z-index: 7; transform: rotate(-12deg); cursor: grab; touch-action: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
#c3-spoon.held { position: fixed; z-index: 81; pointer-events: none; transform: rotate(-32deg); }
#c3-fire { position: absolute; left: 63%; top: 55%; width: 30%; z-index: 4; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
#c3-fire span { font-size: clamp(20px, 6vw, 40px); animation: c3flick .38s ease-in-out infinite alternate; }
#c3-fire span:nth-child(2) { animation-delay: .14s; }
#c3-fire span:nth-child(3) { animation-delay: .27s; }
@keyframes c3flick { from { transform: scale(1) translateY(0); } to { transform: scale(1.18) translateY(-3px); } }
#c3-knob { position: absolute; left: 66%; top: 76%; z-index: 9; border: none; border-radius: 999px; background: #ff6b4a; color: #fff; font-weight: 900; font-size: clamp(13px, 3.6vw, 17px); padding: 10px 16px; cursor: pointer; box-shadow: 0 4px 0 #d14a2e; animation: poopPulse 1s ease-in-out infinite; }
.c3-puff { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.85); pointer-events: none; animation: c3rise 1.15s ease-out forwards; z-index: 6; }
@keyframes c3rise { to { transform: translateY(-56px) scale(2.1); opacity: 0; } }
#c3-progwrap { height: 14px; background: #f3e3d3; border-radius: 999px; margin-top: 10px; position: relative; overflow: visible; }
#c3-prog { height: 100%; width: 0%; background: linear-gradient(90deg, #ffb35c, #ff7847); border-radius: 999px; transition: width .2s; }
#c3-progwrap span { position: absolute; right: 8px; top: -1px; font-size: 11px; font-weight: 800; color: #a35b1e; }
#c3-steam { position: absolute; inset: 0; pointer-events: none; }

/* Divergent fork: Girl/Boy picker chip — dress-up corner (closet room) only */
#char-pick { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); z-index: 9; display: none; gap: 8px; background: rgba(255,255,255,.93); padding: 6px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
#room[data-room="closet"] #char-pick { display: flex; }
#char-pick .char-btn { font-size: 15px; padding: 7px 16px; }