/* Герой: Сафия + собачка */
.hero { position: relative; display: inline-flex; align-items: flex-end; gap: 0; }
.hero-saf { width: auto; filter: drop-shadow(0 5px 4px rgba(47, 59, 76, .22)); }
.hero-dog { width: auto; margin-left: -10px; filter: drop-shadow(0 4px 3px rgba(47, 59, 76, .2)); animation: ctBob 2.2s ease-in-out infinite; }
.ct-dog { position: absolute; right: -44px; bottom: 0; height: 52px; width: auto; filter: drop-shadow(0 3px 3px rgba(47, 59, 76, .2)); animation: ctBob 2.2s ease-in-out infinite; }
.world-hero { position: absolute; right: 130px; bottom: 4px; z-index: 2; pointer-events: none; }

/* Панель потребностей в городе */
.needs-bar { position: absolute; left: 150px; top: 18px; z-index: 12; display: flex; gap: 8px; padding: 6px 10px; border-radius: 26px; background: rgba(255, 255, 255, .88); box-shadow: var(--press-sm); }
.need { position: relative; width: 58px; height: 58px; border-radius: 18px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.need img { width: 40px; height: 40px; object-fit: contain; position: relative; z-index: 1; }
.need i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--v); background: rgba(63, 185, 111, .25); }
.need.low { animation: kidsPulse 1.4s ease-in-out infinite; }
.need.low i { background: rgba(255, 143, 90, .35); }
.world-need-acts { position: absolute; right: 42px; top: 196px; z-index: 5; display: flex; gap: 8px; }
.world-need-btn { background: #fff3c4 !important; font-weight: 900; }

/* Сцены: сон, туалет, ванна */
.need-scene { position: absolute; inset: 0; z-index: 40; background: linear-gradient(#e8f1ff 0 70%, #d9c3a5 70%); display: block; transition: background .8s; }
.need-scene.dark { background: linear-gradient(#27304a 0 70%, #4a4050 70%); }
.need-scene.morning { background: linear-gradient(#fff4d6 0 70%, #e6cfa8 70%); }
.need-hero { position: absolute; left: 480px; bottom: 150px; }
.need-lamp { position: absolute; left: 240px; top: 300px; background: none; }
.need-z { position: absolute; left: 720px; top: 200px; font-size: 60px; font-weight: 900; color: #fff; animation: ctBob 1.6s ease-in-out infinite; }
.need-z.hidden { display: none; }
.need-done { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); }
.need-door { position: absolute; left: 530px; top: 250px; background: none; transition: transform .5s; transform-origin: left center; }
.need-door.closed { transform: perspective(600px) rotateY(0deg); filter: brightness(.9); }
.need-tub { position: absolute; left: 330px; top: 250px; width: 620px; }
.need-tub img { width: 620px; height: auto; }
.need-bubble { position: absolute; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 20%, rgba(200, 230, 255, .85) 40%, rgba(160, 205, 245, .65)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9); animation: ctBob 2s ease-in-out infinite; }

/* Гардероб */
.wd { position: absolute; inset: 120px 24px 16px; display: grid; grid-template-columns: 430px 1fr; gap: 16px; }
.wd-stage { display: flex; align-items: flex-end; justify-content: center; border-radius: 36px; background: radial-gradient(#fff 0 40%, #f3e8ff 70%); }
.wd-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wd-tabs .hs-tab { width: auto; padding: 8px 14px; font-size: 17px; }
.wd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; overflow-y: auto; max-height: 520px; padding: 4px; }
.wd-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 24px; background: #fff; box-shadow: var(--press-sm); color: #2f3b4c; }
.wd-card img { height: 150px; width: auto; }
.wd-card strong { font-size: 16px; font-weight: 800; text-align: center; line-height: 1.1; }
.wd-card.placed { outline: 4px solid #3fb96f; }

/* Мечеть */
.mq { position: absolute; inset: 0; background: linear-gradient(#e2f2ea 0 60%, #cfe3c8 60%); }
.mq.is-art { background: url(../art/mosque_in.webp) center / cover no-repeat; }
.mq-hero { position: absolute; left: 30px; bottom: 20px; }
.mq-grid { position: absolute; left: 330px; right: 30px; top: 120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mq-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; border-radius: 26px; background: rgba(255, 255, 255, .94); box-shadow: var(--press-sm); color: #2f3b4c; }
.mq-card strong { font-size: 19px; font-weight: 900; text-align: center; line-height: 1.1; }

/* Азан: мягкий вопрос */
.azan-ask { position: absolute; inset: 0; z-index: 60; background: rgba(47, 59, 76, .35); display: grid; place-items: center; }
.azan-box { width: 640px; padding: 24px; border-radius: 40px; background: #fff9ef; box-shadow: var(--press); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; justify-items: center; }
.azan-box img { grid-column: 1 / -1; width: 200px; height: auto; }
.azan-box p { grid-column: 1 / -1; margin: 0; font-size: 30px; font-weight: 900; text-align: center; }
.azan-go, .azan-later { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 88px; border-radius: 30px; font-size: 28px; font-weight: 900; }
.azan-go { background: var(--go, #3fb96f); color: #fff; box-shadow: 0 7px 0 var(--go-dark, #2c8e53); }
.azan-go svg { width: 44px; height: 44px; }
.azan-later { background: #fff; color: #2f3b4c; box-shadow: var(--press-sm); }
.rest-screen { position: absolute; inset: 0; z-index: 70; background: rgba(39, 48, 74, .85); display: grid; place-items: center; }
.rest-box { width: 720px; padding: 30px; border-radius: 40px; background: #fff9ef; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.rest-box p { margin: 0; font-size: 34px; font-weight: 900; }
.rest-more { font-size: 16px; color: #6b7280; background: #eef1f4; border-radius: 16px; padding: 10px 16px; }
.parent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; font-size: 18px; }
.parent-secs { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 17px; }
.parent-secs label { display: flex; align-items: center; gap: 6px; }
.parent-progress { font-weight: 700; }
.ct-park.hidden { display: none; }

/* Постепенное открытие мест и проводник */
.ct-place.is-locked, .ct-neighbor.is-locked, .ct-park.is-locked { filter: grayscale(.85) brightness(1.08); opacity: .8; }
.lock-cloud { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 110px; height: 60px; border-radius: 40px; background: #fff; box-shadow: 30px -18px 0 -4px #fff, -30px -10px 0 -8px #fff, 0 6px 14px rgba(47, 59, 76, .18); opacity: .95; pointer-events: none; }
.guide-target { z-index: 9 !important; animation: guidePulse 1.2s ease-in-out infinite; }
@keyframes guidePulse { 50% { filter: drop-shadow(0 0 18px #ffe066) brightness(1.08); } }
.guide-arrow { position: absolute; left: 50%; top: -70px; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-top: 44px solid #ff8f5a; transform: translateX(-50%); animation: arrowBob .8s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 4px 0 #d86c3a); }
@keyframes arrowBob { 50% { margin-top: 12px; } }
.is-fresh { animation: freshPop 1s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes freshPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.new-place-toast { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); z-index: 20; padding: 10px 26px; border-radius: 26px; background: #ffe9a8; font-size: 28px; font-weight: 900; box-shadow: var(--press-sm); animation: freshPop .6s; }

/* Сегодня в городке */
.ct-story { position: absolute; right: 16px; top: 96px; z-index: 12; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 8px 12px; border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: var(--press-sm); color: #2f3b4c; }
.ct-story b { font-size: 17px; font-weight: 900; }
.ct-story-tasks { display: flex; gap: 6px; }
.ct-story-tasks i { width: 46px; height: 46px; border-radius: 14px; background: #f1f3f6; display: grid; place-items: center; position: relative; }
.ct-story-tasks i img { max-width: 38px; max-height: 38px; }
.ct-story-tasks i.now { background: #ffe9a8; outline: 3px solid #f0b93a; }
.ct-story-tasks i.ok { background: #d9f3e2; }
.ct-story-tasks i.ok:after { content: '✓'; position: absolute; right: -4px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: #3fb96f; color: #fff; font-size: 15px; font-weight: 900; display: grid; place-items: center; }
.ct-story.done { background: #e2f5d6; }

/* Альбом, цель, подарок, собачка */
.ct-tools { position: absolute; left: 16px; top: 96px; z-index: 12; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ct-album, .ct-goal, .ct-showmom { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: var(--press-sm); font-size: 18px; font-weight: 900; color: #2f3b4c; overflow: hidden; }
.ct-goal img { height: 36px; width: auto; }
.ct-goal svg { width: 22px; height: 22px; vertical-align: -4px; }
.ct-goal i { position: absolute; left: 0; bottom: 0; height: 5px; width: var(--p); background: #3fb96f; }
.ct-goal.ready { background: #ffe9a8; animation: kidsPulse 1.4s ease-in-out infinite; }
.ct-gift { position: absolute; left: 340px; top: 470px; z-index: 7; background: none; animation: ctBob 1.6s ease-in-out infinite; }
.ct-gift img { height: auto; }
.ct-gift.opened { transform: scale(1.4); opacity: 0; transition: .8s; }
.ct-dogbtn { position: absolute; z-index: 7; background: none; display: flex; flex-direction: column; align-items: center; }
.ct-dogbtn img { height: 54px; width: auto; filter: drop-shadow(0 3px 3px rgba(47, 59, 76, .2)); animation: ctBob 2.2s ease-in-out infinite; }
.ct-dogbtn.is-happy img { animation: safJump .5s ease-out 2; }
.ct-dog-name { font-size: 14px; font-weight: 900; background: #fff; border-radius: 10px; padding: 0 8px; box-shadow: var(--press-sm); }
.dog-box { grid-template-columns: repeat(3, 1fr); }
.dog-box h2 img { height: 90px; width: auto; }
.dog-name { height: 110px; border-radius: 30px; background: #fff; box-shadow: var(--press-sm); font-size: 32px; font-weight: 900; color: #2f3b4c; }
.hs-goal { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 12px; border-radius: 14px; background: #eef1f4; font-size: 15px; font-weight: 800; color: #2f3b4c; }
.hs-goal svg { width: 18px; height: 18px; }
.hs-goal.on { background: #ffe9a8; }
.salon-goal { background: #fff3c4 !important; color: #2f3b4c !important; box-shadow: var(--press-sm) !important; }
.alb { position: absolute; inset: 110px 24px 16px; display: flex; flex-direction: column; gap: 10px; }
.alb-tabs .hs-tab { width: auto; padding: 8px 16px; font-size: 18px; }
.alb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; overflow-y: auto; padding: 4px; }
.alb-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 22px; background: #f1f3f6; color: #9aa3ad; font-weight: 800; font-size: 15px; text-align: center; }
.alb-card.got { background: #fff; color: #2f3b4c; box-shadow: var(--press-sm); }
.alb-pic { height: 100px; display: grid; place-items: center; }
.alb-pic img { max-height: 100px; max-width: 120px; }
.alb-card:not(.got) .alb-pic { filter: grayscale(1) brightness(.3); opacity: .35; }
.alb-empty { font-size: 26px; font-weight: 800; color: #6b7280; }

/* Сезоны и праздники */
.ct-fall { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.ct-fall i { position: absolute; top: -30px; width: 16px; height: 12px; border-radius: 60% 0; animation: fall 9s linear infinite; }
.ct-fall.autumn i { background: #f0a23a; }
.ct-fall.autumn i:nth-child(3n) { background: #e0613a; }
.ct-fall.autumn i:nth-child(4n) { background: #f4c542; }
.ct-fall.winter i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .1); }
@keyframes fall { to { transform: translate(60px, 860px) rotate(360deg); } }
.ct-garland { position: absolute; left: 0; right: 0; top: 150px; gap: 20px; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.ct-garland img { height: auto; }
.ct-hol-moon { position: absolute; left: 180px; top: 14px; z-index: 2; pointer-events: none; }

/* Нарисованные фоны разделов */
#stage[data-screen="kitchenDishes"], #stage[data-screen="kitchenRecipe"] { background: #f6ead6 url(../art/bg_kitchen.webp) center / cover no-repeat; }
#stage[data-screen="garden"] .gd-big { background: #bfe3a4 url(../art/bg_garden.webp) center / cover no-repeat; }
#stage[data-screen="shop"] { background: #f3eee6 url(../art/bg_shop.webp) center / cover no-repeat; }
#stage[data-screen="minis"], #stage[data-screen="minilevels"] { background: #dff2ff url(../art/bg_park.webp) center / cover no-repeat; }
#stage[data-screen="house"] { background: #f3eee6 url(../art/bg_room.webp) center / cover no-repeat; }
#stage[data-screen="minis"] .game-card, #stage[data-screen="kitchenDishes"] .kd-dish, #stage[data-screen="shop"] .world-shop-shelves > * { box-shadow: 0 6px 0 rgba(47, 59, 76, .12), 0 10px 24px rgba(47, 59, 76, .12); }
#stage[data-screen="kitchenDishes"] .kd-shell, #stage[data-screen="kitchenRecipe"] .kd-shell { background: rgba(246, 241, 230, .55); }
/* Заголовок экрана читается на любом фоне */
#stage .banner { left: 50%; right: auto; transform: translateX(-50%); width: auto; max-width: 620px; padding: 6px 26px; background: rgba(255, 255, 255, .9); border-radius: 26px; box-shadow: 0 4px 14px rgba(47, 59, 76, .12); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage[data-screen="house"] .world-shell > h1 { display: inline-block; padding: 4px 24px; border-radius: 24px; background: rgba(255, 255, 255, .88); }
/* Готовим праздник */
.fest-hud { position: absolute; left: 50%; transform: translateX(-50%); top: 92px; z-index: 12; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: var(--press-sm); color: #2f3b4c; }
.fest-hud b { font-size: 17px; font-weight: 900; }
.fest-slots { display: flex; gap: 5px; }
.fest-slots i { width: 44px; height: 44px; border-radius: 14px; background: #f1f3f6; display: grid; place-items: center; }
.fest-slots i img { max-width: 36px; max-height: 36px; filter: grayscale(1) opacity(.35); }
.fest-slots i.ok { background: #fff1c9; }
.fest-slots i.ok img { filter: none; }
.fest-slots i.now { outline: 3px dashed #f0b93a; }
.fest-dots { display: flex; gap: 4px; }
.fest-dots u { width: 14px; height: 14px; border-radius: 50%; background: #e3e6ec; }
.fest-dots u.ok { background: #f0b93a; }
.fest-deco { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fest-deco .fd { position: absolute; display: flex; gap: 30px; }
.fest-deco .fd.fresh { animation: festIn 1.4s ease-out both; }
.fd-lanterns { left: 0; top: 178px; gap: 10px; } .fd-lanterns img { width: 180px; }
.fd-bunting { left: 520px; top: 186px; gap: 6px; } .fd-bunting img { width: 150px; }
.fd-moon { left: 700px; top: 120px; } .fd-moon img { width: 80px; }
.fd-balloons { left: 395px; top: 160px; } .fd-balloons img { width: 100px; }
.fd-gift { left: 860px; top: 600px; } .fd-gift img { width: 80px; }
.fd-table { left: 10px; top: 520px; } .fd-table img { width: 160px; }
.fest-toast { top: 170px; display: flex; align-items: center; gap: 10px; }
@keyframes festIn { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }