/* Лицо */
.monkey[data-mood="scared"] .smile, .monkey[data-mood="sick"] .smile, .monkey[data-mood="dead"] .smile,
.monkey[data-mood="tired"] .smile, .monkey[data-mood="flat"] .smile, .monkey[data-mood="sigma"] .smile,
.monkey[data-mood="oh"] .smile, .monkey[data-mood="live"] .smile, .monkey[data-mood="tears"] .smile,
.monkey[data-mood="sleep"] .smile { display: none; }
.monkey[data-mood="scared"] .eye-open, .monkey[data-mood="dead"] .eye-open, .monkey[data-mood="tears"] .eye-open,
.monkey[data-mood="sick"] .eye-open, .monkey[data-mood="tired"] .eye-open, .monkey[data-mood="sigma"] .eye-open,
.monkey[data-mood="closed"] .eye-open, .monkey[data-mood="sleep"] .eye-open { display: none; }
.monkey[data-mood="scared"] .eye-scared, .monkey[data-mood="dead"] .eye-scared, .monkey[data-mood="tears"] .eye-scared { display: block; }
.monkey[data-mood="sick"] .eye-half, .monkey[data-mood="tired"] .eye-half, .monkey[data-mood="sigma"] .eye-half { display: block; }
.monkey[data-mood="closed"] .eye-closed, .monkey[data-mood="sleep"] .eye-closed { display: block; }
.monkey[data-mood="scared"] .wavy, .monkey[data-mood="tears"] .wavy, .monkey[data-mood="sick"] .wavy { display: block; }
.monkey[data-mood="tired"] .flat, .monkey[data-mood="flat"] .flat, .monkey[data-mood="dead"] .flat { display: block; }
.monkey[data-mood="sigma"] .smirk { display: block; }
.monkey[data-mood="live"] .live { display: block; }
.monkey[data-mood="oh"] .oh, .monkey[data-mood="sleep"] .oh { display: block; }
.monkey[data-mood="scared"] .sweat, .monkey[data-mood="sick"] .sweat { display: block; }
.monkey[data-mood="tears"] .tears { display: block; }
.monkey[data-mood="sick"] .red-nose { display: block; }
.monkey[data-mood="dead"] { filter: grayscale(.75) brightness(.85); }
.monkey[data-mood="dead"] .tiny { transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.monkey[data-mood="sigma"] .head-group { filter: contrast(1.25); }
.monkey.fever { filter: hue-rotate(-14deg) saturate(1.3); animation: shiver .18s linear infinite; }

.monkey.mimi { filter: hue-rotate(-16deg) saturate(.8) brightness(1.18); cursor: default; }
.monkey.mimi .bow { display: block; }
.monkey.mimi .tuft, .monkey.mimi .scarf, .monkey.mimi .coat, .monkey.mimi .stubble { display: none; }
.monkey.mimi .dress { display: block; }

.monkey.backpacked .backpack, .monkey.backpacked .straps, .monkey.shod .sneaker, .monkey.tucked .blanket { display: block; }
.monkey[data-age="adult"].tucked .blanket { transform: translateY(-14px) scaleY(.8); transform-origin: 120px 196px; }
.monkey.flip { scale: -1 1; }

/* Вид со спины */
.monkey.from-back .face-only, .monkey.from-back .mouth, .monkey.from-back .sweat, .monkey.from-back .front-only, .monkey.from-back .limb, .monkey.from-back .toy-heart { display: none !important; }
.monkey.from-back .back-arms { display: block; }
.monkey.friend-a { filter: hue-rotate(14deg) brightness(.82); }
.monkey.friend-a .cap { display: block; }
.monkey.friend-a .tuft { display: none; }
.monkey.friend-a .hoodie > path:first-child { fill: #b5583a; }
.monkey[data-age].friend-a .sleeve { stroke: #b5583a; }
.monkey.friend-b { filter: hue-rotate(-10deg) brightness(1.1); }
.monkey.friend-b .hoodie > path:first-child { fill: #5f7355; }
.monkey[data-age].friend-b .sleeve { stroke: #5f7355; }
.monkey.twitch .head-group { animation: twitch .14s linear infinite; }

.monkey[data-age="teen"] .sleeve { stroke: #8fb4dc; }
.monkey[data-age="adult"] .sleeve { stroke: #5f7355; }
.monkey.mimi[data-age] .sleeve { stroke: #b9764a; }
.limb { transform-box: view-box; }
.limb-l { transform-origin: 70px 192px; }
.limb-r { transform-origin: 170px 192px; }
.head-group, .body-group { transition: transform .3s; }

/* Движения */
.monkey.panic { animation: panic .16s linear infinite; }
.monkey.panic .limb-l { transform: rotate(120deg); }
.monkey.panic .limb-r { transform: rotate(-120deg); }
.monkey.worry { animation: lookaround 2.4s ease-in-out infinite; }
.monkey.run { animation: run .28s ease-in-out infinite; }
.monkey.run .limb-l { animation: swing .28s ease-in-out infinite; }
.monkey.run .limb-r { animation: swing .28s ease-in-out infinite reverse; }
.monkey.run .foot-l { animation: step .28s ease-in-out infinite; }
.monkey.run .foot-r { animation: step .28s ease-in-out infinite reverse; }
.monkey.walk { animation: walk .5s ease-in-out infinite; }
.monkey.walk .foot-l { animation: step .5s ease-in-out infinite; }
.monkey.walk .foot-r { animation: step .5s ease-in-out infinite reverse; }
.monkey.shiver { animation: shiver .08s linear infinite; }
.monkey.sucking { animation: suck .3s ease-in-out infinite; }
.monkey.inflate { animation: inflate .8s ease-in forwards; }
.monkey.recoil { animation: recoil .7s cubic-bezier(.3, 1.8, .5, 1); }
.monkey.sway { animation: sway .7s ease-in-out infinite; }
.monkey.bowing { animation: bowing 1.6s ease-in-out; }
.monkey.bowing .head-group { animation: bowhead 1.6s ease-in-out; }
.monkey.crouch { animation: crouch .24s ease-out; }
.monkey.land { animation: crouch .28s ease-out reverse; }
.monkey.leap .limb-l, .monkey.leap .limb-r { transform: rotate(30deg); }
.monkey.hang { animation: none; }
.monkey.hang .limb-l, .monkey.hang .limb-r { display: none; }
.monkey.hang .hang-arms { display: block; }
.monkey.hang .foot-l { transform: translateY(14px) rotate(8deg); }
.monkey.hang .foot-r { transform: translateY(14px) rotate(-8deg); }
.monkey.hang { transform-origin: 50% 0; }
.monkey.swinging { animation: swinging 1s ease-in-out infinite; }
.monkey.swinging .foot-l { animation: kick .5s ease-in-out infinite; }
.monkey.swinging .foot-r { animation: kick .5s ease-in-out infinite reverse; }
.monkey.climb .reach-l { animation: reach .42s ease-in-out infinite; }
.monkey.climb .reach-r { animation: reach .42s ease-in-out infinite reverse; }
.foot { transform-box: fill-box; transform-origin: 50% 20%; }
.monkey.strain { animation: shiver .1s linear infinite; }
.monkey.lean-left { transition: transform .5s; transform: rotate(-20deg); animation: none; }
.monkey.lean-right { transition: transform .5s; transform: rotate(20deg); animation: none; }
.monkey.fall-left { transition: transform .35s ease-in; transform: rotate(-90deg) translateY(30px); animation: none; }
.monkey.fall-right { transition: transform .35s ease-in; transform: rotate(90deg) translateY(30px); animation: none; }
.monkey.arms-crossed { animation: none; }
.monkey.arms-crossed .limb-l { transform: rotate(-26deg) translate(14px, -8px); }
.monkey.arms-crossed .limb-r { transform: rotate(26deg) translate(-14px, -8px); }
.monkey.fumble .limb-l, .monkey.fumble .limb-r { animation: swing .5s ease-in-out infinite; }
.monkey.fumble .head-group { transform: translateY(26px) rotate(8deg); }
.monkey.phone .head-group { transform: translateY(16px) scale(.84) rotate(3deg); transform-origin: 120px 170px; }
.monkey.phone .limb-l, .monkey.phone .limb-r { display: none; }
.monkey.phone .phone-arms, .monkey.phone .phone-glow { display: block; }
.monkey.wave-small .limb-r { display: none; }
.monkey.wave-small .wave-arm { display: block; }
.monkey[data-age="adult"] .wave-arm { transform: translate(-10px, -32px); }
.wave-swing { transform-box: view-box; transform-origin: 172px 198px; animation: wave .4s ease-in-out infinite alternate; }
.monkey.shout { animation: shout .2s ease-in-out infinite; }
.monkey.sigh { animation: sigh 1.4s ease-in-out; }
.monkey.chad-on { animation: none; }
.monkey.chad-on .chad { display: block; }
.monkey.chad-on .head-group { transform: translateY(14px) rotate(-6deg); transform-origin: 120px 170px; transition: transform 2.4s linear; }
.monkey.chad-on .chad path:nth-child(2) { transition: transform .25s; }
.monkey.brow .chad path:nth-child(2) { transform: translateY(-9px); }
.monkey.shades-on .shades { display: block; animation: shades .5s cubic-bezier(.5, 0, 1, .6); }
.monkey.blushing .blush { filter: saturate(2.4) brightness(.9); }

/* Предметы */
.props { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.art { display: block; width: 1em; height: 1em; overflow: visible; }
.pad .art { width: 34px; height: 34px; margin: 0 auto; }
.paw .art { width: 42px; height: 42px; margin-left: auto; }
.steam { opacity: var(--steam, 1); }
.prop { position: absolute; font-size: 26px; line-height: 1; pointer-events: auto; transform: translate(-50%, -50%); cursor: pointer; touch-action: none; }
.prop.big { font-size: 46px; }
.prop.huge { font-size: 96px; }
.prop.draggable { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); animation: nudge 1.4s ease-in-out infinite; }
.prop.draggable.held { animation: none; transform: translate(-50%, -50%) scale(1.15); }
.prop.fill { inset: 0; transform: none; }
.prop.fill svg { display: block; width: 100%; height: 100%; }
.prop.wobble { animation: wobble .5s ease-in-out; }
.prop.fade { animation: fadeout 1.2s forwards; pointer-events: none; }
.prop.side { padding: 16px 14px; color: #fff; font-size: 24px; border-radius: 16px; background: rgba(30, 24, 20, .55); }
.prop.handle { width: 56px; height: 56px; border: 4px dashed #fff; border-radius: 50%; background: rgba(255, 255, 255, .22); animation: pullhint 1.2s ease-in-out infinite; }
.prop.snatched { font-size: 62px; animation: snatched .8s ease-in forwards; }
.prop.impact { z-index: 5; color: #fff; font: 900 58px/1 Impact, "Arial Black", sans-serif; letter-spacing: .03em; text-shadow: 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000; pointer-events: none; animation: pop .15s; }
.prop.aura { z-index: 5; color: #ffd66b; font-size: 19px; font-weight: 900; pointer-events: none; animation: rise 1s ease-out; }
.prop.park { overflow: hidden; }
.walker { position: absolute; bottom: 6px; width: 134px; height: 156px; margin-left: -67px; transition: transform 2s ease-in; }
.walker.away { transform: translate(150px, -60px) scale(.5); }
.prop.burp { z-index: 4; color: #fff; font-size: 36px; font-weight: 900; pointer-events: none; text-shadow: 0 3px 0 #4b2a1b; animation: burp .8s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.prop.reading { padding: 6px 14px; color: #2c3440; font-size: 24px; font-weight: 900; border-radius: 12px; background: #fff; }
.prop.reading.hot { color: #d9402a; }
.prop.stain { width: 30px; height: 26px; border-radius: 48% 52% 60% 40%; background: #f3d95f; box-shadow: inset 0 -4px 0 #d9b93a; pointer-events: none; transition: opacity .25s; }
.prop.tape { padding: 10px; color: #4b2a1b; font-weight: 900; border-radius: 8px; background: rgba(255, 245, 190, .85); }
.prop.tape.stuck { pointer-events: none; opacity: .75; }
.prop.photo { width: 210px; padding: 8px 8px 26px; background: #fffaf0; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transition: all .8s; }
.prop.photo svg, .prop.photo img { display: block; width: 100%; }
.prop.photo .caption { position: absolute; left: 0; right: 0; bottom: 4px; color: #4b2a1b; font-size: 15px; text-align: center; }
.prop.photo .scribble { position: absolute; inset: 8px 8px 26px; }
.prop.photo .scribble svg > rect, .prop.photo .scribble svg > g:first-of-type { display: none; }
.prop.photo.to-wall { transform: translate(-50%, -10%) scale(.28) rotate(-3deg); }
.prop.paper-out { width: 90px; background: #fffaf0; animation: slideout 1.2s ease-out; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); transition: all .4s; }
.prop.paper-out.open { left: 50% !important; top: 46% !important; width: 220px; }
.prop.paper-out svg { display: block; width: 100%; }
.prop.snatch { transition: all .4s ease-in; top: 74% !important; transform: translate(-50%, -50%) scale(.4); opacity: 0; }
.prop.breath-glow { pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 214, 107, .05) 30%, rgba(255, 214, 107, .55)); animation: breathglow 1.8s ease-in-out infinite; }
@keyframes breathglow { 0%, 100% { opacity: 1; } 50% { opacity: .08; } }
.prop.hall.rattle { animation: rattle .3s linear 2; }
.polaroid { display: grid; place-items: center; width: 180px; height: 170px; padding: 12px; font-size: 76px; text-align: center; background: #fffaf0; color: #4b2a1b; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transform: rotate(-3deg); }
.polaroid.small { width: 128px; height: 110px; padding: 6px; font-size: 44px; animation: pop .2s; }
.polaroid.small span { font-size: 13px; font-weight: 800; line-height: 1.1; }
.polaroid.scene { display: flex; align-items: flex-end; justify-content: center; width: 210px; height: 170px; padding: 8px 8px 22px; background: linear-gradient(#c7dbe6 0 70%, #c9b28c 70%); box-shadow: inset 0 0 0 8px #fffaf0, 0 8px 20px rgba(0, 0, 0, .35); }
.polaroid.scene .monkey { width: 92px; height: 120px; animation: none; }

.mug { position: relative; width: 92px; height: 104px; overflow: hidden; border: 5px solid #f3e9d6; border-top: 0; border-radius: 0 0 22px 22px; background: rgba(255, 255, 255, .1); }
.mug .cocoa { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #6e4326; }
.mug u { position: absolute; left: 0; right: 0; bottom: 74%; height: 2px; background: #ffd66b; opacity: .9; }

.chat { display: flex; flex-direction: column; width: 264px; height: 280px; overflow: hidden; color: #1d2733; font-size: 14px; border: 5px solid #14201f; border-radius: 26px; background: #eaf0f5; }
.chat header { padding: 7px; font-weight: 800; text-align: center; background: #fff; }
.chat .log { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 8px; overflow-y: auto; }
.chat p { max-width: 86%; margin: 0; padding: 5px 9px; line-height: 1.3; border-radius: 12px; animation: pop .2s; }
.chat .her { align-self: flex-start; background: #fff; }
.chat .me { align-self: flex-end; background: #cfe9c0; }

.guest { position: absolute; z-index: 1; left: 58%; bottom: 34px; width: 170px; height: 198px; }
.guest .monkey { animation: breathe 3.4s ease-in-out infinite; }
.guest.arrive { animation: arrive 1s ease-out; }
.guest.hug { transition: transform .8s; transform: translateX(-36px); }
.guest.leave { transition: transform .9s ease-in, opacity .9s; transform: translate(60px, -50px) scale(.5); opacity: 0; }
.prop.table { width: 100%; font-size: 400px; pointer-events: none; transform: translateX(-50%); }
.prop.table .art { height: auto; width: 100%; }

/* Свидетельство и кнопки */
.cert { padding: 14px; color: #3b2c20; border: 3px double #8a6420; border-radius: 12px; background: #fff8e6; }
.cert h3 { margin: 0 0 6px; font-size: 16px; text-align: center; }
.cert p { margin: 3px 0; font-size: 14px; }
.cert label { display: block; margin-top: 6px; font-size: 14px; }
.cert input { margin-top: 4px; background: #efe5ca !important; color: #3b2c20 !important; }
.cert .second { color: #75684f; font-size: 13px; }
.cert.shake { animation: shiver .08s linear 5; }
.paw { font-size: 42px; text-align: right; animation: pop .3s; }
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; transition: opacity .2s; }
.pad.off { opacity: .35; pointer-events: none; }
.pad button { font-size: 28px; }

/* Комната */
.dark-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle var(--fr, 130px) at var(--fx, 50%) var(--fy, 50%), rgba(6, 7, 16, .15), rgba(6, 7, 16, .98));
}
.room.lamp-on .lamp-glow { display: block; opacity: .85; }
.room.shock { animation: rattle .25s linear 3; }
.room.sigma .backdrop { filter: grayscale(1) brightness(.16); transition: filter .8s; }
.room.sigma .rig { filter: grayscale(1) contrast(1.5); }
.room.sigma::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, transparent 34%, rgba(0, 0, 0, .85)); }
.room-door { transform-box: fill-box; }
.room-door.rattle { animation: rattle .3s linear infinite; }
.room-door.open .room-door-leaf { fill: #120a06; }

/* Лента и экраны от первого лица */
.overlay { position: fixed; z-index: 10; inset: 0; overflow: hidden; color: #fff; background: #000; }
.feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; background: #fff; color: #14201f; }
.post { display: flex; flex-direction: column; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.post header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 800; }
.post header i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(45deg, #f9b43c, #d6336c); }
.post .shot { position: relative; flex: none; height: min(calc(100% - 140px), 125vw); aspect-ratio: 4 / 5; margin: 0 auto; overflow: hidden; }
.post .shot .monkey { position: absolute; height: auto; aspect-ratio: 240 / 280; margin-left: 0; translate: -50% 0; animation: breathe 3.4s ease-in-out infinite; }
.rain path { stroke-linecap: round; }
.smoke { animation: bob 1.6s ease-in-out infinite; }
.post .shot .monkey.head-only { z-index: 1; }
.monkey.head-only .tail, .monkey.head-only .body-group { display: none; }
.post .shot .monkey.shake { animation: shiver .12s linear infinite; }
.post .shot .monkey.hop-loop { animation: hop 1.1s ease-in-out infinite; }
.scenery { position: absolute; inset: 0; width: 100%; height: 100%; }
.rain { animation: rain .5s linear infinite; }
.post footer { padding: 10px 14px 20px; font-size: 15px; }
.post footer b { display: block; }
.shot .deco { position: absolute; translate: -50% -50%; }
.shot .deco .art { width: 100%; height: auto; }
.deco.bob { animation: bob 2s ease-in-out infinite; }
.deco.shake { animation: shiver .3s linear infinite; }
.deco.glow { filter: drop-shadow(0 0 22px #ffd66b); }
.feed-hint { position: fixed; z-index: 11; right: 14px; bottom: 16px; padding: 7px 13px; color: #fff; font-weight: 800; border-radius: 999px; background: rgba(0, 0, 0, .6); }
.call { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #101418; text-align: center; }
.call .monkey { width: 250px; height: 292px; animation: talking 2.6s ease-in-out infinite; }
.call.ended .monkey { animation: none; filter: brightness(.55); }
.call .self { position: absolute; top: 60px; right: 14px; display: grid; place-items: center; width: 92px; height: 130px; font-size: 13px; border-radius: 14px; background: #3a4450; }
.call .line { position: absolute; left: 16px; right: 16px; bottom: 96px; padding: 10px 14px; font-size: 17px; font-weight: 700; border-radius: 14px; background: rgba(0, 0, 0, .55); }
.call .actions { position: absolute; bottom: 24px; display: flex; gap: 22px; }
.call button { width: 62px; height: 62px; color: #fff; font-size: 24px; border: 0; border-radius: 50%; background: #2fb350; cursor: pointer; }
.call button.end { background: #e0342a; }
.call.ringing .monkey { filter: blur(14px) brightness(.7); }
.call.static .monkey { animation: glitch .15s steps(2) infinite; }
.finale { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 28px; font-size: 19px; line-height: 1.5; text-align: center; background: #05060c; }
.finale p { margin: 0 0 16px; animation: rise 1.4s ease-out; }
.finale button { margin-top: 18px; padding: 14px 20px; color: #2a1c12; font: inherit; font-weight: 800; border: 0; border-radius: 16px; background: #e0a94a; cursor: pointer; }
.finale .letter { font-size: 110px; margin-bottom: 14px; }
.finale .dying { margin-bottom: 18px; font-size: 96px; animation: flicker 2.4s steps(1) infinite; filter: drop-shadow(0 0 26px #ffd66b); }
.finale .dying.out { animation: none; opacity: .18; filter: grayscale(1); }

@keyframes rain { to { transform: translateY(26px); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes talking { 25% { transform: rotate(-2deg) translateY(3px); } 75% { transform: rotate(2deg); } }
@keyframes flicker { 0%, 60%, 74%, 100% { opacity: 1; } 62%, 72% { opacity: .35; } }
@keyframes panic { 0%, 100% { transform: translateX(-5px) rotate(-3deg); } 50% { transform: translateX(5px) rotate(3deg); } }
@keyframes lookaround { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes run { 50% { transform: translateY(-16px); } }
@keyframes walk { 25% { transform: rotate(-4deg) translateY(-6px); } 75% { transform: rotate(4deg) translateY(-6px); } }
@keyframes swing { 0%, 100% { transform: rotate(-34deg); } 50% { transform: rotate(34deg); } }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes shiver { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes suck { 50% { transform: scale(1.03, .97); } }
@keyframes inflate { to { transform: scale(1.22, 1.18); } }
@keyframes recoil { 0% { transform: scale(1.25); } 30% { transform: translateY(14px) rotate(-10deg) scale(.9); } 100% { transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes bowing { 40%, 70% { transform: scale(1.02, .9); } }
@keyframes bowhead { 40%, 70% { transform: translateY(46px) scale(.96); } }
@keyframes crouch { 50% { transform: scale(1.12, .8); } }
@keyframes swinging { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes kick { 50% { transform: translateY(6px) rotate(14deg); } }
@keyframes reach { 50% { transform: translateY(26px); } }
@keyframes step { 50% { transform: translateY(-14px); } }
@keyframes twitch { 50% { transform: rotate(4deg); } }
@keyframes shades { from { transform: translateY(-190px); } }
@keyframes snatched { 30% { transform: translate(-50%, -50%) scale(1.15); } to { left: 115%; top: 40%; } }
@keyframes shout { 50% { transform: scale(1.1, 1.12) translateY(-6px); } }
@keyframes sigh { 40% { transform: scale(1.04, 1.08); } 80% { transform: scale(1.03, .92) translateY(8px); } }
@keyframes nudge { 50% { transform: translate(-50%, -58%); } }
@keyframes wobble { 25% { transform: translate(-50%, -50%) rotate(-9deg); } 75% { transform: translate(-50%, -50%) rotate(9deg); } }
@keyframes pullhint { 50% { transform: translate(-50%, -66%); } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes burp { from { transform: translate(-50%, -50%) scale(.2); } to { transform: translate(-50%, -80%) scale(1.3); } }
@keyframes rattle { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes slideout { from { top: 92%; opacity: 0; } }
@keyframes arrive { from { transform: translateX(150px) scale(.5); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes glitch { 50% { transform: translateX(6px); filter: contrast(1.8) grayscale(1); } }

@media (prefers-reduced-motion: reduce) {
  .monkey.panic, .monkey.run, .monkey.walk, .monkey.shiver, .monkey.fever, .monkey.shout { animation: none; }
}

/* Маршрут и «Наше окно» */
body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
body[data-tab="room"] .window-tab { display: none; }
body[data-tab="window"] #app > .pet, body[data-tab="window"] #scene, body[data-tab="window"] #notes-section, body[data-tab="window"] #home-call { display: none; }
.window-tab { display: grid; gap: 12px; }
.route { position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: 0 -6px 22px rgba(30, 20, 10, .16); }
.route button { flex: none; width: 76px; padding: 6px 2px; color: var(--muted); font: 800 12px/1.2 inherit; font-family: inherit; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.route button.on { color: var(--accent-ink); background: var(--accent); }
.route-line { flex: 1; min-width: 0; text-align: center; }
.route-track { position: relative; display: block; height: 22px; margin: 0 12px; }
.route-track::before { content: ""; position: absolute; top: calc(50% - 1px); left: 0; right: 0; height: 3px; opacity: .6; background: repeating-linear-gradient(90deg, var(--muted) 0 8px, transparent 8px 16px); animation: routeflow 1.4s linear infinite; }
.route-track::after { content: ""; position: absolute; top: calc(50% - 5px); right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--love); }
.route-track i { position: absolute; z-index: 1; top: -9px; width: 40px; height: 26px; margin-left: -20px; transition: left .6s; }
.route-track i .art { display: block; width: 100%; height: 100%; animation: planebob 2.8s ease-in-out infinite; transform-origin: 40% 60%; }
.route-track i::before, .route-track i::after { content: ""; position: absolute; top: 13px; right: 100%; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: exhaust 1.8s ease-out infinite; }
.route-track i::after { animation-delay: -.9s; }
.route-line small { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.cities { overflow: hidden; border-radius: 20px; }
.cities .art, .piter-map .art { display: block; width: 100%; height: auto; }
.presence { margin: 12px 4px 2px; color: var(--muted); font-size: 14px; font-weight: 700; text-align: center; }
.piter-map { position: relative; overflow: hidden; margin-top: 10px; border-radius: 16px; cursor: pointer; }
#piter-form { margin-top: 10px; }
#piter-form input, .guess input { width: 100%; padding: 12px; color: var(--text); font: inherit; border: 0; border-radius: 12px; background: var(--card-soft); }
.place { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card-soft); }
.place p { margin: 6px 0 0; white-space: pre-wrap; }
.place button { margin-top: 8px; color: var(--muted); font: inherit; font-weight: 700; border: 0; background: none; cursor: pointer; }
.glass { position: relative; aspect-ratio: 1; overflow: hidden; border: 5px solid #7a5238; border-radius: 10px; background: radial-gradient(circle at 30% 20%, #dbe7ea, #a8bfc6); }
.glass svg { display: block; width: 100%; height: 100%; }
.glass path { fill: none; stroke: #33406b; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.glass.big { width: 100%; max-width: 340px; margin: 10px auto; touch-action: none; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
#glass .wide, .draw button { padding: 13px 18px; color: var(--accent-ink); font: inherit; font-weight: 800; border: 0; border-radius: 14px; background: var(--accent); cursor: pointer; }
#glass .wide { width: 100%; margin-top: 10px; }
.draw { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 100%; padding: 20px; color: var(--text); text-align: center; background: var(--bg); }
.draw h2 { margin: 0; }
.draw .plain { color: var(--muted); background: none; }
.draw-row { display: flex; justify-content: center; gap: 10px; }
.map-gull { animation: mapgull 26s linear infinite; }
.map-boat { offset-path: path("M286 150Q262 150 240 166T222 190Q196 226 144 242"); offset-rotate: 0deg; animation: mapboat 32s ease-in-out infinite alternate; }
.map-wave { animation: mapwave 4s ease-in-out infinite alternate; }
.star { animation: twinkle 3s ease-in-out infinite; }
.cloud-drift { animation: drift 46s linear infinite; }
.flake { animation: snowfall 8s linear infinite; }
.beacon { animation: twinkle 1.8s steps(2) infinite; }
.beacon.slow { animation: twinkle 4s ease-in-out infinite; }
.beacon.two { animation-delay: 1.4s; }
.gull { animation: gull 19s linear infinite; }
.ripple { animation: ripple 3.4s ease-in-out infinite alternate; }
.ripple.two { animation-delay: -1.6s; }
.wall-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5.5s ease-in-out infinite; }
.loose { transform-box: fill-box; transform-origin: 50% 50%; animation: loose 2.6s ease-in-out infinite; }
.dust { animation: dustfall 7s ease-in infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
@keyframes drift { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }
@keyframes snowfall { to { transform: translate(14px, 430px); } }
@keyframes gull { from { transform: translate(190px, 18px); } to { transform: translate(410px, 44px); } }
@keyframes ripple { to { transform: translateX(14px); } }
@keyframes mapwave { to { transform: translateX(6px); } }
@keyframes sway { 0%, 64%, 100% { transform: rotate(0); } 70% { transform: rotate(.8deg); } 76% { transform: rotate(-.9deg); } 82% { transform: rotate(.5deg); } 88% { transform: rotate(-.3deg); } }
@keyframes loose { 0%, 100% { translate: 0 0; } 50% { translate: .8px .6px; } }
@keyframes dustfall { 0%, 40% { opacity: 0; transform: translateY(0); } 48% { opacity: .9; } 100% { opacity: 0; transform: translateY(330px); } }
.car-run { --a: -30px; --b: 200px; animation-name: carright; animation-timing-function: linear; animation-iteration-count: infinite; }
.car-run.road { --a: 170px; --b: 420px; }
.car-run.to-left { animation-name: carleft; }
.wheel { transform-box: view-box; transform-origin: 52px 238px; animation: spin 48s linear infinite; }
.chair { offset-path: path("M14 142L78 92"); animation: lift 16s linear infinite; }
.chair.two { animation-delay: -8s; }
.gondola { offset-path: path("M152 168L66 232"); offset-rotate: 0deg; animation: gondola 26s ease-in-out infinite alternate; }
.flag { transform-box: fill-box; transform-origin: 0 0; animation: flutter 1.6s ease-in-out infinite alternate; }
.boat { animation: sail 38s linear infinite; }
.boat.slow { animation-duration: 60s; animation-delay: -30s; }
.leaf.left { transform-box: view-box; transform-origin: 268px 202px; animation: leftleaf 24s ease-in-out infinite; }
.leaf.right { transform-box: view-box; transform-origin: 336px 202px; animation: rightleaf 24s ease-in-out infinite; }
.leaf.left.raised { animation: none; transform: rotate(-62deg); }
.leaf.right.raised { animation: none; transform: rotate(62deg); }
@keyframes carright { from { transform: translateX(var(--a)); } to { transform: translateX(var(--b)); } }
@keyframes carleft { from { transform: translateX(var(--b)); } to { transform: translateX(var(--a)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lift { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes gondola { from { offset-distance: 2%; } to { offset-distance: 98%; } }
@keyframes flutter { to { transform: skewY(9deg) scaleX(.86); } }
@keyframes sail { from { transform: translateX(170px); } to { transform: translateX(420px); } }
@keyframes leftleaf { 0%, 30%, 100% { transform: rotate(0); } 48%, 76% { transform: rotate(-62deg); } }
@keyframes rightleaf { 0%, 30%, 100% { transform: rotate(0); } 48%, 76% { transform: rotate(62deg); } }
.leaf.far-left { transform-box: view-box; transform-origin: 286px 162px; animation: leftleaf 24s ease-in-out -7s infinite; }
.leaf.far-right { transform-box: view-box; transform-origin: 336px 162px; animation: rightleaf 24s ease-in-out -7s infinite; }
.leaf.far-left.raised { animation: none; transform: rotate(-62deg); }
.leaf.far-right.raised { animation: none; transform: rotate(62deg); }
.verdict { margin-top: 10px; padding: 12px; text-align: center; border-radius: 14px; background: var(--card-soft); }
.verdict .note-hint { margin: 0; }
.verdict .answer { margin: 6px 0 12px; font-size: 22px; font-weight: 900; overflow-wrap: anywhere; }
#glass .reminder { color: var(--text); font-weight: 800; text-align: center; }
#glass .note-hint, #glass .feedback { text-align: center; }
#glass .guess { margin-top: 8px; }
.draw input { width: 100%; padding: 13px; color: var(--text); font: inherit; border: 0; border-radius: 14px; background: var(--card-soft); }
.archive { margin-top: 12px; color: var(--muted); font-weight: 800; }
.archive summary { cursor: pointer; }
.sky-flight { offset-path: path("M-60 120Q200 40 470 90"); offset-rotate: auto; animation: skyflight 34s linear infinite; }
.sky-trail { animation: trail 1s linear infinite; }
@keyframes planebob { 0%, 100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes exhaust { from { opacity: .7; transform: translateX(6px) scale(1); } to { opacity: 0; transform: translateX(-14px) scale(.3); } }
@keyframes routeflow { to { background-position: 16px 0; } }
@keyframes skyflight { 0% { offset-distance: 0%; } 45%, 100% { offset-distance: 100%; } }
@keyframes trail { to { stroke-dashoffset: 13; } }
@keyframes mapgull { from { transform: translate(-20px, 130px); } to { transform: translate(420px, 80px); } }
@keyframes mapboat { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.verdict button { flex: 1; padding: 12px; color: var(--accent-ink); font: inherit; font-weight: 800; border: 0; border-radius: 12px; background: var(--accent); cursor: pointer; }
.verdict button.plain { color: var(--text); background: var(--card); }
.district-name { fill: #4b2a1b; stroke: #fff8e4; stroke-width: 3px; paint-order: stroke; font: 700 15px Caveat, cursive; text-anchor: middle; }
.near-label { fill: #4b2a1b; stroke: #fff8e4; stroke-width: 2px; paint-order: stroke; font: 800 6.5px Nunito, sans-serif; text-anchor: middle; }
.doodle { stroke-width: 1.800; }
.map-near, .map-far { transition: opacity .35s; }
.map-near { opacity: 0; }
.map-far { pointer-events: none; }
.piter-map[data-zoom="near"] .map-near { opacity: 1; }
.piter-map[data-zoom="near"] .map-far { opacity: 0; }
.map-water, .map-near, .map-far, .map-gull, .map-boat { pointer-events: none; }
.map-pin { cursor: pointer; transition: opacity .35s; }
.piter-map[data-zoom="far"] .map-pin { opacity: 0; pointer-events: none; }
.map-count { pointer-events: none; transition: opacity .35s; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.map-count circle { stroke-width: 2; }
.map-count text { fill: #fffaf0; stroke: none; font-size: 10px; font-weight: 900; text-anchor: middle; }
.piter-map[data-zoom="near"] .map-count { opacity: 0; }
.map-pin .pin-body.busy { transform-box: fill-box; transform-origin: 50% 100%; animation: pin-busy .5s ease-in-out; }
@keyframes pin-busy { 20% { transform: rotate(-14deg) scale(1.15); } 50% { transform: rotate(12deg) scale(1.15); } 80% { transform: rotate(-6deg); } }
.map-pin.draft > .pin-body > path:first-child { fill: #ffd66b; }
.map-pin.draft .pin-body { transform-box: fill-box; transform-origin: 50% 100%; animation: pin-drop .7s cubic-bezier(.3, 1.6, .5, 1) var(--since, 0s) both; }
.map-pin.draft circle[r="17"] { stroke: #e0533f; }
#piter-form.placing { display: grid; gap: 8px; }
.place-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; color: var(--text); font: inherit; font-weight: 800; border: 2px dashed var(--muted); border-radius: 14px; background: none; cursor: pointer; }
.place-add span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--accent-ink); font-size: 16px; border-radius: 50%; background: var(--accent); }
.place-add:active { transform: scale(.98); }
.placing-card { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card-soft); cursor: pointer; animation: pop .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.placing-card svg { flex: none; width: 40px; height: 40px; }
.placing-card b { display: block; font-family: Caveat, cursive; font-size: 22px; line-height: 1; }
.placing-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.placing-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.placing-actions button, .place-fields button { padding: 12px; color: var(--accent-ink); font: inherit; font-weight: 900; border: 0; border-radius: 12px; background: var(--accent); cursor: pointer; transition: opacity .2s; }
.placing-actions .soft { color: var(--text); background: var(--card-soft); }
.placing-actions button:disabled, .place-fields button:disabled { opacity: .45; cursor: default; }
.icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.icon-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; color: var(--text); font: inherit; font-size: 12px; font-weight: 800; border: 3px solid transparent; border-radius: 16px; background: var(--card); cursor: pointer; transition: border-color .2s, transform .2s; animation: pop .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.icon-tile:nth-child(2n) { animation-delay: .04s; }
.icon-tile:nth-child(3n) { animation-delay: .08s; }
.icon-tile svg { width: 50px; height: 50px; overflow: visible; }
.icon-tile.chosen { border-color: var(--accent); transform: translateY(-2px); }
.icon-tile.chosen svg { animation: icon-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
.place-fields { display: grid; gap: 8px; margin-top: 12px; }
.place-fields input, .place-fields textarea { width: 100%; padding: 12px; color: var(--text); font: inherit; border: 0; border-radius: 12px; background: var(--card-soft); resize: none; }
.place-icon { width: 26px; height: 26px; margin-right: 6px; vertical-align: -7px; }
@keyframes pin-drop { 0% { transform: translateY(-40px) scale(.6); opacity: 0; } 60% { transform: translateY(0) scale(1.15, .85); opacity: 1; } }
@keyframes icon-hop { 40% { transform: translateY(-8px) rotate(-8deg); } }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame .9s ease-in-out infinite alternate; }
.map-card { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card-soft); }
.map-card[hidden] { display: none; }
.map-card button { flex: none; padding: 8px 10px; color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 800; border: 0; border-radius: 10px; background: var(--accent); cursor: pointer; }
.map-card b { display: block; font-family: Caveat, cursive; font-size: 22px; line-height: 1; }
.map-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
@keyframes flame { to { transform: scale(.8, 1.15); } }

/* Живая обезьяна: части тела двигаются врозь и чуть с опозданием. */
.head-life { transform-origin: 120px 170px; transition: transform .45s; animation: headidle 3.4s ease-in-out -.4s infinite; }
.ear-l { transform-origin: 62px 102px; transition: transform .4s; }
.ear-r { transform-origin: 178px 102px; transition: transform .4s; }
.limb-l { animation: arml 3.4s ease-in-out -.2s infinite; }
.limb-r { animation: armr 3.4s ease-in-out -.2s infinite; }
.brows { display: none; }
.brow-l, .brow-r { transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.eye-open, .eye-open .pupil { translate: var(--look-x, 0) var(--look-y, 0); transition: translate .14s; }
.monkey.ear-flick-l .ear-l { animation: earflick .3s ease-in-out; }
.monkey.ear-flick-r .ear-r { animation: earflick .3s ease-in-out reverse; }

.monkey[data-mood="frown"] .brows, .monkey[data-mood="tears"] .brows, .monkey[data-mood="sick"] .brows,
.monkey[data-mood="tired"] .brows, .monkey[data-mood="scared"] .brows { display: block; }
.monkey[data-mood="frown"] .brow-l, .monkey[data-mood="tears"] .brow-l, .monkey[data-mood="sick"] .brow-l { transform: translateY(-2px) rotate(-16deg); }
.monkey[data-mood="frown"] .brow-r, .monkey[data-mood="tears"] .brow-r, .monkey[data-mood="sick"] .brow-r { transform: translateY(-2px) rotate(16deg); }
.monkey[data-mood="tired"] .brow-l, .monkey[data-mood="tired"] .brow-r { transform: translateY(4px); }
.monkey[data-mood="scared"] .brow-l, .monkey[data-mood="scared"] .brow-r { transform: translateY(-9px); }
.monkey[data-mood="frown"] .head-life, .monkey[data-mood="tears"] .head-life { transform: translateY(6px) rotate(-3deg); }
.monkey[data-mood="tired"] .head-life, .monkey[data-mood="sick"] .head-life, .monkey[data-mood="flat"] .head-life { transform: translateY(5px) rotate(3deg); }
.monkey[data-mood="sleep"] .head-life, .monkey[data-mood="dead"] .head-life { transform: translateY(9px) rotate(7deg); animation-duration: 5.6s; }
.monkey[data-mood="beam"] .head-life { transform: translateY(-3px); }
.monkey[data-mood="tears"] .head-life { animation: sob 1s ease-in-out infinite; }
.monkey[data-mood="frown"] .ear-l, .monkey[data-mood="tears"] .ear-l, .monkey[data-mood="tired"] .ear-l,
.monkey[data-mood="sick"] .ear-l, .monkey[data-mood="sleep"] .ear-l, .monkey[data-mood="dead"] .ear-l { transform: translateY(8px) rotate(-17deg); }
.monkey[data-mood="frown"] .ear-r, .monkey[data-mood="tears"] .ear-r, .monkey[data-mood="tired"] .ear-r,
.monkey[data-mood="sick"] .ear-r, .monkey[data-mood="sleep"] .ear-r, .monkey[data-mood="dead"] .ear-r { transform: translateY(8px) rotate(17deg); }
.monkey[data-mood="scared"] .ear-l, .monkey[data-mood="scared"] .ear-r { transform: scale(.86); }
.monkey[data-mood="beam"] .tail { animation-duration: .8s; }
.monkey[data-mood="frown"] .tail, .monkey[data-mood="tears"] .tail, .monkey[data-mood="tired"] .tail, .monkey[data-mood="sleep"] .tail { animation-duration: 7s; }
.monkey[data-mood="scared"] .tail { animation-duration: .24s; }

.monkey.hop .head-life { animation: headlag .55s ease-out; }
.monkey.hop .ear-l, .monkey.hop .ear-r { animation: earflop .55s ease-out; }
.monkey.squish .head-life { animation: headlag .64s ease-in-out infinite; }
.monkey.touch-head .head-life { animation: pat .5s ease-in-out infinite alternate; }
.monkey.touch-head .ear-l { transform: translateY(6px) rotate(-14deg); }
.monkey.touch-head .ear-r { transform: translateY(6px) rotate(14deg); }
.monkey.touch-belly { animation: giggle .13s linear infinite; }
.monkey.touch-belly .head-life { animation: headlag .4s ease-in-out infinite; }
.monkey.touch-tail .tail { animation: whip .3s ease-in-out infinite alternate; }
.monkey.touch-tail .head-life { transform: translate(8px, 4px) rotate(9deg); animation: none; }
.monkey.touch-tail .eye-open, .monkey.touch-tail .eye-open .pupil { translate: 3px 2px; }
.monkey.touch-foot .foot-r, .monkey.touch-foot .foot-l { animation: step .3s ease-in-out infinite; }
.monkey.touch-foot .head-life { transform: translateY(5px) rotate(-5deg); animation: none; }

.monkey.yawn .head-life { animation: yawn 2.4s ease-in-out; }
.monkey.yawn .eye-open { display: none; }
.monkey.yawn .eye-closed { display: block; }
.monkey.yawn .oh { transform-box: fill-box; transform-origin: center; animation: yawnmouth 2.4s ease-in-out; }
.monkey.sneeze .head-life { animation: sneeze 1.3s ease-in; }
.monkey.glance .head-life { animation: glance 2.8s ease-in-out; }
.monkey.tailpeek .head-life { transform: translate(8px, 4px) rotate(9deg); animation: none; }
.monkey.tailpeek .tail { animation: whip .4s ease-in-out infinite alternate; }
.monkey.doze .head-life { animation: doze 4.2s ease-in; }
.monkey.scratch .limb-r { display: none; }
.monkey.scratch .scratch-arm { display: block; }
.monkey.scratch .head-life { transform: rotate(-5deg); }
.scratch-hand { transform-box: fill-box; transform-origin: center; }
.monkey.scratch .scratch-hand { animation: scratching .18s linear infinite alternate; }
.monkey[data-age="baby"] .scratch-arm { translate: 2px 30px; }
.monkey[data-age="teen"] .scratch-arm { translate: -8px 18px; }
.monkey[data-age="adult"] .scratch-arm { translate: -22px 0; }

@keyframes headidle { 50% { translate: 0 2px; rotate: .9deg; } }
@keyframes arml { 50% { rotate: 2.5deg; } }
@keyframes armr { 50% { rotate: -2.5deg; } }
@keyframes earflick { 50% { rotate: 9deg; } }
@keyframes earflop { 30% { translate: 0 7px; } 70% { translate: 0 -3px; } }
@keyframes headlag { 35% { translate: 0 6px; } 70% { translate: 0 -3px; } }
@keyframes sob { 50% { translate: 0 3px; } }
@keyframes pat { to { translate: 0 8px; rotate: -3deg; } }
@keyframes giggle { 50% { translate: 4px 0; } }
@keyframes whip { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }
@keyframes yawn { 35%, 70% { translate: 0 -5px; rotate: -5deg; } }
@keyframes yawnmouth { 35%, 70% { transform: scale(1.5, 1.8); } }
@keyframes sneeze { 70% { translate: 0 -8px; rotate: -8deg; } 82% { translate: 0 12px; rotate: 8deg; } }
@keyframes glance { 25%, 38% { translate: -8px 0; rotate: -6deg; } 62%, 76% { translate: 8px 0; rotate: 6deg; } }
@keyframes doze { 80% { translate: 0 15px; rotate: 11deg; } 86% { translate: 0 -5px; rotate: -2deg; } }
@keyframes scratching { from { rotate: -14deg; translate: -3px 0; } to { rotate: 14deg; translate: 3px 0; } }
.monkey[data-age="kid"] .brows { display: none; }
.monkey[data-age="kid"] .cap { transform-origin: 120px 72px; transform: translateY(-10px) scale(1.34, 1.14); }

/* Спокойной ночи */
.sleep-call { display: block; width: 100%; margin-top: 10px; padding: 12px; color: var(--text); font: inherit; font-weight: 800; border: 0; border-radius: 14px; background: var(--card-soft); cursor: pointer; }
.sleep-call[hidden] { display: none; }
.night { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #05071a; }
.night-room { position: relative; width: min(100vw, 62dvh, 460px); aspect-ratio: 360 / 560; }
.night-room.night-city { width: min(100vw, 460px); aspect-ratio: 400 / 420; }
.night-back, .night-front, .night-marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.night-front { pointer-events: none; }
.night-head { position: absolute; left: 27%; top: 32%; width: 46%; height: auto; aspect-ratio: 240 / 280; cursor: default; animation: none; pointer-events: none; }
.night-head > ellipse, .night .night-head.monkey[data-age] .cap { display: none; }
.night .night-head.monkey[data-age] .head-group { transform: none; }
.night-blanket { transform-origin: 180px 450px; transition: transform .9s; }
.night-blanket.tucked-l { transform: translateY(-8px) rotate(-1.200deg); }
.night-blanket.tucked-l.tucked-r { transform: translateY(-16px); }
.night-blanket.breathing { animation: nightbreath 5.2s ease-in-out infinite; }
.night-curtain path { transition: transform 1.200s ease-in-out; transform-box: fill-box; transform-origin: center; transform: scaleX(.26); }
.night-curtain path:first-child { transform-origin: left; }
.night-curtain path:last-child { transform-origin: right; }
.night-curtain.shut path { transform: scaleX(1); }
.night-toy { position: absolute; left: 56%; top: 60%; width: 20%; pointer-events: none; }
.night-spot { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid rgba(255, 233, 180, .7); border-radius: 50%; background: rgba(255, 214, 107, .14); cursor: pointer; animation: nightpulse 2.2s ease-in-out infinite; }
.night-banana { position: absolute; left: 0; top: 7%; width: 26%; padding: 0; border: 0; background: none; cursor: pointer; animation: nightfloat 4s ease-in-out forwards; }
.night-dim { position: absolute; inset: 0; opacity: 0; background: #020310; pointer-events: none; transition: opacity 1.500s; }
.lamp-off .night-back { filter: brightness(.55); transition: filter 1.200s; }
.night-line { position: absolute; left: 20px; right: 20px; bottom: calc(26px + env(safe-area-inset-bottom)); margin: 0; color: #f3e9d6; font-size: 18px; font-weight: 800; text-align: center; transition: opacity .6s; }
.night-close { position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top)); right: 14px; padding: 7px 10px; color: rgba(243, 233, 214, .62); font: inherit; font-size: 13px; font-weight: 700; border: 0; background: none; cursor: pointer; }
.own-dark, .their-dark { transition: opacity 1.100s; }
.night-light { cursor: pointer; animation: nightglow 2.4s ease-in-out infinite; }
@keyframes nightbreath { 40% { transform: translateY(-16px) scaleY(1.050); } }
@keyframes nightpulse { 50% { transform: scale(1.14); opacity: .55; } }
@keyframes nightfloat { from { transform: translate(-40%, 30%); } 50% { transform: translate(145%, -8%); } to { transform: translate(330%, 30%); } }
@keyframes nightglow { 50% { opacity: .68; } }
@media (prefers-reduced-motion: reduce) {
  .night-spot, .night-light, .night-blanket.breathing { animation: none; }
}
.night-city > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.night-toy svg, .night-banana svg { display: block; width: 100%; height: auto; }

/* Живая комната: небо за окном, снег, шторы и свет. */
.sky-cloud { fill: var(--cloud); animation: sky-drift 44s linear infinite; }
.sky-cloud.far { opacity: .7; animation-duration: 70s; animation-delay: -30s; }
.snow { fill: #fff; opacity: 0; animation: snowfall var(--t) linear var(--d) infinite; }
.curtain-l, .curtain-r { transform-box: fill-box; animation: curtain 8s ease-in-out infinite; }
.curtain-l { transform-origin: 30% 0; }
.curtain-r { transform-origin: 70% 0; animation-delay: -3s; }
.room-beam { fill: #fff3c4; opacity: .14; transform-box: fill-box; transform-origin: 0 0; animation: beam 16s ease-in-out infinite; }
.mote { fill: #fff3c4; opacity: 0; animation: mote var(--t) ease-in-out var(--d) infinite; }
.moth { display: none; }
.moth-body { animation: flutter .16s linear infinite alternate; }
.lamp-glow { animation: lamp-breath 6s ease-in-out infinite; }
.window .night-only circle:not(:first-child) { animation: twinkle 4s ease-in-out infinite; }
.window .night-only circle:nth-child(odd) { animation-delay: -1.700s; }
:root[data-time="morning"] .room-beam { fill: #ffe2b8; }
:root[data-time="evening"] .room-beam { fill: #f4a86a; opacity: .12; }
:root[data-time="evening"] .mote { fill: #f8c48c; }
:root[data-time="night"] .room-beam { fill: #9db7e8; opacity: .07; animation: none; }
:root[data-time="night"] .sky-cloud, :root[data-time="night"] .motes { display: none; }
:root[data-time="night"] .moth { display: block; offset-path: path("M46 190c34-6 52 18 34 38s-58 18-68-4 8-40 34-34z"); animation: moth-round 11s linear infinite; }

@keyframes sky-drift { from { transform: translateX(-60px); } to { transform: translateX(150px); } }
@keyframes snowfall { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: .9; } 50% { transform: translate(7px, 62px); } 92% { opacity: .9; } 100% { opacity: 0; transform: translate(-3px, 128px); } }
@keyframes curtain { 50% { transform: rotate(1.4deg) scaleX(.97); } }
@keyframes beam { 50% { transform: skewX(-3deg); opacity: .22; } }
@keyframes mote { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .75; } 70% { opacity: .5; } 99% { transform: translate(16px, -44px); } }
@keyframes flutter { to { transform: scaleX(.45); } }
@keyframes moth-round { to { offset-distance: 100%; } }
@keyframes lamp-breath { 50% { opacity: .42; } }

@media (prefers-reduced-motion: reduce) {
  .sky-cloud, .snow, .curtain-l, .curtain-r, .room-beam, .mote, .moth, .moth-body, .lamp-glow, .window .night-only circle { animation: none; }
  .snow, .mote { display: none; }
}

/* Милые мелочи: привет при входе, танец, потягивание, воздушный поцелуй. */
.monkey.hello { animation: hello .8s cubic-bezier(.3, 1.5, .5, 1); }
.monkey.wiggle { animation: wiggle .65s ease-in-out 3; }
.monkey.wiggle .tail { animation-duration: .35s; }
.monkey.stretch { animation: stretch 2.2s ease-in-out; }
.monkey.stretch .limb-l { transform-origin: 70px 192px; animation: arm-up-l 2.2s ease-in-out; }
.monkey.stretch .limb-r { transform-origin: 170px 192px; animation: arm-up-r 2.2s ease-in-out; }
.monkey.puff .head-life { animation: puff 1.8s ease-in-out; }
.monkey.toes .head-life { animation: none; transform: translateY(6px) rotate(2deg); }
.monkey.toes .foot-l { transform-origin: 84px 262px; animation: toe .32s ease-in-out infinite alternate; }
.monkey.toes .foot-r { transform-origin: 156px 262px; animation: toe .32s ease-in-out -.16s infinite alternate; }
.monkey .pupil { transform-box: fill-box; transform-origin: center; animation: glint 3.4s ease-in-out infinite; }
.float-up { position: absolute; color: #fff8e6; font-weight: 900; font-size: 22px; text-shadow: 0 0 3px #4b2a1b, 0 1px 2px #4b2a1b; animation: float-up 1.700s ease-out forwards; }
.tap-spark { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #ffd66b; box-shadow: 0 0 0 1.500px #4b2a1b; animation: tap-spark .5s ease-out forwards; }

@keyframes hello { from { scale: .8; } 60% { scale: 1.06 .96; } to { scale: 1; } }
@keyframes wiggle { 25% { rotate: -5deg; translate: 0 -4px; } 75% { rotate: 5deg; translate: 0 -4px; } }
@keyframes stretch { 45%, 60% { scale: .95 1.09; } 80% { scale: 1.03 .97; } }
@keyframes arm-up-l { 45%, 60% { rotate: 165deg; } }
@keyframes arm-up-r { 45%, 60% { rotate: -165deg; } }
@keyframes puff { 45% { scale: 1.07; } 60% { scale: .97; } }
@keyframes toe { to { rotate: -7deg; } }
@keyframes glint { 50% { scale: 1.2; } }
@keyframes float-up { from { opacity: 0; transform: translateY(8px) scale(.7); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-46px) translateX(10px) scale(1.15) rotate(10deg); } }
@keyframes tap-spark { to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } }

@media (prefers-reduced-motion: reduce) {
  .monkey.hello, .monkey.wiggle, .monkey.stretch, .monkey.stretch .limb-l, .monkey.stretch .limb-r, .monkey.puff .head-life, .monkey.toes .foot-l, .monkey.toes .foot-r, .monkey .pupil { animation: none; }
  .float-up, .tap-spark { display: none; }
}

/* Цельное тело: контур рисует один силуэт снизу, детали лежат поверх без своих линий. */
.silhouette { pointer-events: none; }
.monkey.head-only .neck-shade, .monkey.from-back .neck-shade { display: none; }
.monkey[data-age="adult"] .tail { scale: 1.1 .72; }

/* Гардероб: вещи живут в голове и растут вместе с ним. */
.wear > g { display: none; }
.monkey[data-wear~="glasses"] .wear-glasses, .monkey[data-wear~="flower"] .wear-flower, .monkey[data-wear~="banana"] .wear-banana,
.monkey[data-wear~="phones"] .wear-phones, .monkey[data-wear~="ushanka"] .wear-ushanka, .monkey[data-wear~="tubeteika"] .wear-tubeteika,
.monkey[data-wear~="santa"] .wear-santa, .monkey[data-wear~="crown"] .wear-crown, .monkey[data-wear~="nightcap"] .wear-nightcap { display: block; }
.monkey[data-hat] .tuft, .monkey[data-age][data-hat] .cap { display: none; }
.monkey.from-back .wear-glasses { display: none !important; }
.wear-sway { transform-box: view-box; animation: wear-sway 2.6s ease-in-out infinite; }
.wear-sway.late { animation-delay: -1.300s; }
.wear-notes g { transform-box: fill-box; opacity: 0; animation: wear-note 2.400s ease-out infinite; }
.wear-notes .note-b { animation-delay: -1.200s; }
.wear-glint { transform-box: fill-box; transform-origin: center; animation: wear-glint 2.800s ease-in-out infinite; }
.monkey .wear > g.dropping { animation: wear-drop .7s cubic-bezier(.3, 1.5, .5, 1); transform-box: view-box; transform-origin: 120px 60px; }
.night-head .wear-glasses, .night-head .wear-notes { display: none !important; }
@keyframes wear-sway { 50% { rotate: 5deg; } }
@keyframes wear-note { 0% { opacity: 0; translate: 0 6px; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 -30px; rotate: 14deg; } }
@keyframes wear-glint { 0%, 70%, 100% { scale: 0; } 85% { scale: 1.2; } }
@keyframes wear-drop { from { translate: 0 -120px; scale: 1.15 .85; opacity: 0; } 40% { opacity: 1; } 70% { translate: 0 6px; scale: .94 1.06; } }
@media (prefers-reduced-motion: reduce) {
  .wear-sway, .wear-notes g, .wear-glint, .monkey .wear > g.dropping { animation: none; }
}

/* Кошелёк и шкаф */
.pet-pills { display: flex; gap: 6px; align-items: center; }
.streak-badge.thaw .art { animation: thaw 1.600s ease-out 2; }
.purse { position: relative; display: flex; align-items: center; gap: 4px; padding: 5px 12px 5px 9px; color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 900; border: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 3px 0 rgba(75, 42, 27, .35); cursor: pointer; transition: transform .15s; }
.purse[hidden] { display: none; }
.purse:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(75, 42, 27, .35); }
.purse .art { width: 18px; height: 18px; }
.purse.bump { animation: purse-bump .35s cubic-bezier(.3, 1.8, .5, 1); }
.purse.fresh::after { content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border: 2px solid var(--card); border-radius: 50%; background: #e0533f; animation: fresh-dot 1.400s ease-in-out infinite; }
.coin { position: fixed; z-index: 40; width: 26px; height: 26px; margin: -13px; pointer-events: none; animation: coin-fly .8s cubic-bezier(.5, -0.4, .7, 1) both; }
.coin .art, .burst .art { width: 100%; height: 100%; }
.coin-text { z-index: 40; color: #ffd66b; pointer-events: none; }
.burst { position: fixed; z-index: 60; width: 24px; height: 24px; margin: -12px; pointer-events: none; animation: burst .9s cubic-bezier(.2, .8, .4, 1) forwards; }

.sheet-back { position: fixed; z-index: 50; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 8, 6, .5); animation: fade-in .25s ease-out; }
.sheet-back.closing { animation: fade-in .25s ease-in reverse forwards; }
.sheet { width: min(100%, 520px); max-height: 88dvh; overflow-y: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); color: var(--text); border-radius: 26px 26px 0 0; background: var(--bg); box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); animation: sheet-up .45s cubic-bezier(.2, 1.2, .4, 1); }
.sheet-back.closing .sheet { animation: sheet-up .25s ease-in reverse forwards; }
.sheet-grip { width: 42px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--card-soft); }
.sheet header { display: flex; align-items: center; gap: 10px; }
.sheet h2 { flex: 1; margin: 0; font-size: 22px; }
.sheet-purse { display: flex; align-items: center; gap: 4px; padding: 5px 12px; color: var(--accent-ink); font-weight: 900; border-radius: 999px; background: var(--accent); }
.sheet-purse .art { width: 18px; height: 18px; }
.sheet-close { width: 34px; height: 34px; color: var(--muted); font-size: 16px; border: 0; border-radius: 50%; background: var(--card-soft); cursor: pointer; }
.mirror { position: relative; display: flex; justify-content: center; height: 190px; margin: 12px 0 6px; overflow: hidden; border-radius: 20px; background: radial-gradient(ellipse at 50% 120%, var(--rug) 0 34%, transparent 35%), var(--wall); }
.mirror::before { content: ""; position: absolute; inset: 10px 22%; border: 4px solid rgba(255, 250, 240, .14); border-radius: 50% 50% 14px 14px; }
.mirror-monkey { position: relative; width: 150px; height: auto; margin-top: 18px; cursor: default; }
.sheet-hint { min-height: 2.6em; margin: 4px 2px 10px; color: var(--muted); font-size: 14px; text-align: center; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.item { display: flex; flex-direction: column; padding: 10px; border: 3px solid transparent; border-radius: 20px; background: var(--card); cursor: pointer; transition: transform .2s, border-color .2s; animation: pop .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.item:nth-child(2n) { animation-delay: .04s; }
.item:nth-child(3n) { animation-delay: .08s; }
.item:active { transform: scale(.97); }
.item.trying { border-color: var(--accent); }
.item.worn { border-color: #5f7355; }
.item.nope { animation: nope .35s ease-in-out; }
.item-pic { position: relative; display: grid; place-items: center; height: 78px; border-radius: 14px; background: var(--card-soft); }
.item-art { width: 92px; height: 70px; overflow: visible; }
.item-pic i { position: absolute; left: 6px; bottom: 5px; padding: 1px 7px; color: var(--accent-ink); font-size: 11px; font-style: normal; font-weight: 800; border-radius: 999px; background: #f3e9d6; }
.ice-pic .art { width: 58px; height: 58px; animation: wear-sway 2.600s ease-in-out infinite; }
.item h3 { margin: 8px 2px 2px; font-size: 15px; }
.item p { flex: 1; margin: 0 2px 8px; color: var(--muted); font-size: 12.500px; line-height: 1.3; }
.item button { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 9px; overflow: hidden; color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 900; border: 0; border-radius: 12px; background: var(--accent); cursor: pointer; }
.item button .art { width: 17px; height: 17px; }
.item button.soft { color: var(--text); background: var(--card-soft); }
.item button.short { opacity: .55; }
.item button.goal { color: var(--text); font-size: 12px; background: var(--card-soft); cursor: default; }
.goal-bar { position: absolute; inset: 0; transform: scaleX(var(--p)); transform-origin: left; background: rgba(224, 169, 74, .35); }
.item button.goal span:last-child { position: relative; }

@keyframes purse-bump { 40% { transform: scale(1.18) rotate(-4deg); } }
@keyframes fresh-dot { 50% { transform: scale(1.3); } }
@keyframes coin-fly { 0% { transform: scale(.4); opacity: 0; } 20% { transform: scale(1.2) translateY(-24px); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.6) rotate(360deg); opacity: .9; } }
@keyframes burst { from { transform: scale(.3); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1) rotate(200deg); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes nope { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@keyframes thaw { 30% { transform: scale(1.5) rotate(-12deg); filter: brightness(1.6); } 60% { transform: scale(.9) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  .coin, .burst, .item, .icon-tile, .map-pin .pin-body, .placing-card, .sheet, .sheet-back, .purse.bump, .purse.fresh::after, .ice-pic .art { animation: none; }
}

/* Ночные помехи */
.night-flash { position: absolute; left: 9%; top: 8%; width: 34%; height: 23%; border-radius: 40% 40% 6px 6px; background: #eef4ff; opacity: 0; pointer-events: none; animation: lightning 3s linear infinite; }
.night-flash.gone { animation: none; opacity: 0; transition: opacity .6s; }
.night-heart { position: absolute; top: 40%; width: 9%; pointer-events: none; animation: night-heart 1.300s ease-out forwards; }
.night-heart svg, .night-cup svg, .night-sock svg { display: block; width: 100%; height: auto; }
.night-cup { position: absolute; left: 79%; top: 57%; width: 16%; padding: 0; border: 0; background: none; cursor: pointer; animation: nightpulse 2.200s ease-in-out infinite; transition: left .8s cubic-bezier(.4, 1.3, .5, 1), top .8s cubic-bezier(.4, 1.3, .5, 1), rotate .8s; }
.night-cup.drink { left: 50%; top: 41%; rotate: -35deg; animation: none; }
.night-eyes { position: absolute; left: 42%; top: 84%; display: flex; gap: 12px; pointer-events: none; }
.night-eyes i { width: 10px; height: 6px; border-radius: 50%; background: #ffd66b; box-shadow: 0 0 8px #ffd66b; animation: blink-eyes 2.600s ease-in-out infinite; }
.night-torch { position: absolute; left: 50%; top: 86%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 190, .55), rgba(255, 240, 190, 0) 70%); pointer-events: none; animation: torch-on .5s ease-out; transition: opacity .8s; }
.night-sock { position: absolute; left: 44%; top: 80%; width: 12%; rotate: 70deg; pointer-events: none; animation: pop .4s cubic-bezier(.3, 1.5, .5, 1); transition: opacity .8s; }
.night-torch.gone, .night-sock.gone { opacity: 0; }
.night-choices { position: absolute; left: 20px; right: 20px; bottom: calc(76px + env(safe-area-inset-bottom)); display: grid; gap: 8px; animation: pop .35s ease-out; }
.night-choices button { padding: 12px; color: #f3e9d6; font: inherit; font-weight: 800; border: 2px solid rgba(255, 233, 180, .5); border-radius: 14px; background: rgba(12, 14, 44, .88); cursor: pointer; }
@keyframes lightning { 0%, 8%, 14%, 100% { opacity: 0; } 4% { opacity: .9; } 11% { opacity: .6; } }
@keyframes night-heart { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: translateY(-70px) scale(1.2); } }
@keyframes blink-eyes { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes torch-on { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .night-flash, .night-eyes i, .night-cup { animation: none; }
}

/* Балконы в окне: свет зажёгся, человек вышел и машет */
.balcony-person { opacity: 0; transform: translateY(9px); transition: opacity .4s, transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.balcony.on .balcony-person { opacity: 1; transform: none; }
.balcony-arm { transform-box: fill-box; transform-origin: 0 100%; }
.balcony.on .balcony-arm { animation: balcony-wave 3.200s ease-in-out .5s infinite; }
.balcony.on .balcony-person.her .balcony-arm { animation-delay: 1.300s; }
@keyframes balcony-wave { 0%, 45%, 100% { rotate: 0deg; } 8%, 24% { rotate: -38deg; } 16%, 32% { rotate: 22deg; } }
@media (prefers-reduced-motion: reduce) {
  .balcony.on .balcony-arm { animation: none; }
}

/* Прохожие вдали */
.walker { animation: walker-right linear infinite; }
.walker.to-left { animation-name: walker-left; }
.walker-step { animation: walker-step .5s ease-in-out infinite; }
@keyframes walker-right { to { transform: translateX(220px); } }
@keyframes walker-left { to { transform: translateX(-220px); } }
@keyframes walker-step { 50% { transform: translateY(-.8px); } }
@media (prefers-reduced-motion: reduce) {
  .walker, .walker-step { animation: none; }
}

/* Шалости */
.sheet-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 12px; padding: 4px; border-radius: 14px; background: var(--card-soft); }
.sheet-tabs button { padding: 9px; color: var(--muted); font: inherit; font-size: 14px; font-weight: 900; border: 0; border-radius: 11px; background: none; cursor: pointer; transition: background .25s, color .25s; }
.sheet-tabs button.on { color: var(--accent-ink); background: var(--accent); }
.prank-art { width: 64px; height: 64px; }
.item.prank.trying .prank-art { animation: icon-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
.prank-butt, .prank-tongue, .prank-lips { display: none; }
.monkey.from-back.mooning .prank-butt { display: block; }
.monkey.mooning { animation: mooning .26s ease-in-out infinite alternate; }
.monkey.licking .mouth, .monkey.kissing .mouth { display: none !important; }
.monkey.licking .prank-tongue { display: block; transform-box: fill-box; transform-origin: 50% 0; animation: tongue-wag .22s ease-in-out infinite alternate; }
.monkey.kissing .prank-lips { display: block; transform-box: fill-box; transform-origin: 50% 50%; animation: pucker .5s ease-in-out infinite alternate; }
.monkey.kissing .eye-open, .monkey.licking .eye-open { display: none; }
.monkey.kissing .eye-closed, .monkey.licking .eye-happy { display: block; }
.prank-glass { position: fixed; z-index: 60; inset: 0; width: 100vw; height: 100dvh; touch-action: none; cursor: grab; transition: opacity .6s; }
.prank-glass.gone { opacity: 0; pointer-events: none; }
.prank-wipe { position: fixed; z-index: 61; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); margin: 0; padding: 9px 16px; color: #fff; font-weight: 800; white-space: nowrap; border-radius: 999px; background: rgba(30, 24, 20, .7); transform: translateX(-50%); pointer-events: none; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both, wipe-nudge 1.6s ease-in-out .6s infinite; }
.prank-tongue-big { position: fixed; z-index: 62; left: 0; top: 0; transform-origin: 50% 100%; pointer-events: none; }
.prank-tongue-big svg { display: block; width: 100%; height: auto; overflow: visible; }
.prank-pie { position: fixed; z-index: 62; width: 80px; height: 80px; pointer-events: none; }
.prank-pie svg { width: 100%; height: 100%; overflow: visible; }
.prank-pow { position: fixed; z-index: 62; color: #b6cf7e; font: 900 40px/1 Impact, "Arial Black", sans-serif; letter-spacing: .04em; text-shadow: 3px 3px 0 #4b2a1b, -3px -3px 0 #4b2a1b, 3px -3px 0 #4b2a1b, -3px 3px 0 #4b2a1b; pointer-events: none; transform: translate(-50%, -50%); animation: prank-pow 1.3s ease-out forwards; }
.room.pranking .tap:not(.prank-revenge) { opacity: 0; pointer-events: none; }
.prank-revenge { z-index: 4; background: #8c3f2b; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes mooning { from { transform: rotate(-8deg) translateY(-2px); } to { transform: rotate(8deg) translateY(2px); } }
@keyframes tongue-wag { from { transform: rotate(-12deg) scaleY(.9); } to { transform: rotate(12deg) scaleY(1.15); } }
@keyframes pucker { to { transform: scale(1.18, 1.1); } }
@keyframes wipe-nudge { 50% { translate: 0 -5px; } }
@keyframes prank-pow { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-10deg); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.25) rotate(6deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1) rotate(-4deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .monkey.mooning, .monkey.licking .prank-tongue, .monkey.kissing .prank-lips, .prank-wipe, .prank-pow { animation: none; }
}

/* Погода в окнах */
.cloud-drift.slow { animation-duration: 70s; }
.city-rain { animation: city-rain .7s linear infinite; }
.city-snow { animation: city-snow 8s linear infinite; }
.fog-band { animation: fog-band 26s ease-in-out infinite alternate; }
.city-flash { opacity: 0; animation: city-flash 7s linear infinite; }
.stats span i { font-style: normal; }
@keyframes city-rain { to { transform: translate(-30px, 440px); } }
@keyframes city-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, 215px); } 100% { transform: translate(-4px, 440px); } }
@keyframes fog-band { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes city-flash { 0%, 88%, 91%, 94%, 100% { opacity: 0; } 89%, 92.5% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .city-rain, .city-snow, .fog-band, .city-flash { animation: none; }
}

/* Ответ на шалость */
.prank-react { position: absolute; z-index: 5; left: 50%; bottom: 12px; padding: 10px 12px 12px; text-align: center; border-radius: 20px; background: rgba(30, 24, 20, .78); transform: translateX(-50%); animation: react-up .45s cubic-bezier(.3, 1.5, .5, 1) both; transition: opacity .3s, transform .3s; }
.prank-react.gone { opacity: 0; transform: translate(-50%, 16px); }
.prank-react p { margin: 0 0 8px; color: #fff; font-weight: 900; }
.prank-react div { display: flex; gap: 8px; }
.prank-react button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 70px; padding: 8px 4px 6px; color: #fff; font: inherit; font-size: 12px; font-weight: 800; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .12); cursor: pointer; transition: transform .2s, background .2s; }
.prank-react button span { font-size: 30px; line-height: 1; }
.prank-react button:active { transform: scale(.92); }
.prank-react button.picked { background: var(--accent); transform: scale(1.12); }
.monkey.fuming { animation: fume .12s linear infinite alternate; }
.monkey.fuming .head-life { filter: sepia(.4) saturate(2.4) hue-rotate(-28deg); transition: filter .4s; }
.monkey.fuming .red-nose { display: block; }
.monkey.cracking { animation: crack-up .3s ease-in-out infinite alternate; }
.monkey.cracking .tears { display: block; }
.monkey.melting { animation: melt 1.4s ease-in-out infinite alternate; }
.steam { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #f3f0ea; opacity: 0; pointer-events: none; animation: steam 1s ease-out forwards; }
@keyframes react-up { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } }
@keyframes fume { from { transform: translateX(-3px) rotate(-1.5deg); } to { transform: translateX(3px) rotate(1.5deg); } }
@keyframes crack-up { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-8px); } }
@keyframes melt { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(1.08, .9) rotate(3deg); } }
@keyframes steam { 0% { opacity: .9; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.8); } }
@media (prefers-reduced-motion: reduce) {
  .monkey.fuming, .monkey.cracking, .monkey.melting, .steam, .prank-react { animation: none; }
}

/* Рисование на стекле */
.glass .draw-cursor { fill: none; stroke: #fffaf0; stroke-width: 5; stroke-dasharray: 10 8; opacity: 0; transition: opacity .15s; }
.glass .draw-cursor.eraser { stroke: #e0533f; stroke-dasharray: none; fill: rgba(224, 83, 63, .12); }
.glass.drawing .draw-cursor { opacity: .95; }
.glass .draw-ripple { fill: none; stroke: #33406b; stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: draw-ripple .55s ease-out forwards; }
.glass .draw-ripple.eraser { stroke: #e0533f; }
.loupe { position: absolute; top: 8px; right: 8px; width: 34%; aspect-ratio: 1; overflow: hidden; border: 4px solid #7a5238; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #dbe7ea, #a8bfc6); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .15s, transform .2s cubic-bezier(.3, 1.5, .5, 1); }
.loupe.left { right: auto; left: 8px; }
.loupe.bottom { top: auto; bottom: 8px; }
.glass.drawing .loupe { opacity: 1; transform: scale(1); }
.loupe .draw-cursor { opacity: 1; stroke: #33406b; stroke-width: 3; stroke-dasharray: 6 5; }
.loupe .draw-cursor.eraser { stroke: #e0533f; stroke-dasharray: none; }
.draw-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 340px; margin: 0 auto; }
.draw .tool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; color: var(--muted); font-size: 12px; font-weight: 800; border: 3px solid transparent; border-radius: 14px; background: var(--card-soft); transition: border-color .2s, transform .15s, opacity .2s; }
.draw .tool svg { width: 26px; height: 26px; stroke: #4b2a1b; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.draw .tool.on { color: var(--text); border-color: var(--accent); }
.draw .tool:active { transform: scale(.94); }
.draw .tool:disabled { opacity: .4; cursor: default; }
.draw .tool.undo svg, .draw .tool.wipe svg { stroke: var(--text); }
.draw .draw-send { width: 100%; max-width: 340px; margin: 0 auto; }
@keyframes draw-ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .glass .draw-ripple { animation: none; opacity: 0; }
}

/* Невидимое не анимируется */
.still, .still * { animation-play-state: paused !important; }

/* Вечерние сцены */
.prop.tub { font-size: 150px; pointer-events: none; }
.prop.crib { font-size: 130px; pointer-events: none; }
.prop.crib .art { width: 2em; }
.prop.flash { z-index: 6; background: #fff; pointer-events: none; animation: fadeout .45s forwards; }
.prop.flying { z-index: 4; }
.prop.hazard { z-index: 3; }
.prop.secured { pointer-events: none; transition: transform .6s, opacity .6s; transform: translate(-50%, -260%) scale(.6); opacity: 0; }
.prop.rope { font-size: 80px; pointer-events: none; }
.prop.rope .art { width: 1.6em; height: .32em; }
.prop.rope.cut { transition: transform .9s ease-in, opacity .9s; transform: translate(-50%, 40%) rotate(14deg); opacity: 0; }
.prop.paint { width: 26px; height: 22px; border-radius: 48% 52% 60% 40%; pointer-events: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.prop.found { font-size: 40px; pointer-events: none; transition: left .5s, top .5s; }
.prop.fort-frame { width: 180px; height: 120px; border: 4px dashed rgba(75, 42, 27, .45); border-radius: 22px 22px 8px 8px; pointer-events: none; }
.prop.built { pointer-events: none; font-size: 64px; }
.prop.meter-prop { pointer-events: none; }
.meter { position: relative; width: 220px; height: 22px; border: 3px solid #4b2a1b; border-radius: 12px; background: #e9b8a8; }
.meter i { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: #9fd4b0; }
.meter b { position: absolute; top: -8px; width: 6px; height: 34px; margin-left: -3px; border-radius: 3px; background: #4b2a1b; }
.prop.wardrobe { font-size: 150px; }
.prop.flying .mini-drawing svg { display: block; width: 1.3em; height: 1em; }
.prop.landed { pointer-events: none; opacity: .85; }
.sign-note { white-space: nowrap; padding: 8px 12px; color: #4b2a1b; font-size: 15px; font-weight: 900; line-height: 1.25; text-align: center; border: 3px solid #4b2a1b; border-radius: 6px; background: #fffaf0; transform: rotate(-3deg); }
.sofa-back { position: absolute; z-index: 0; left: 50%; bottom: 16px; font-size: 320px; transform: translateX(-50%); pointer-events: none; }
.sofa-back .art { width: 1.1em; height: .55em; }
.prop.screen-glow { pointer-events: none; background: radial-gradient(ellipse at 50% 120%, rgba(150, 200, 255, .35), transparent 60%); animation: screen-flicker 2.6s steps(3) infinite; }
@keyframes screen-flicker { 50% { opacity: .6; } }
.prop.paw-reach { font-size: 54px; pointer-events: none; }
.prop.paw-reach .art, .prop.thief .art { filter: drop-shadow(0 0 3px #fffaf0) drop-shadow(0 0 6px rgba(255, 250, 240, .7)); }
.prop.phone-light { width: 110px; height: 70px; border-radius: 50%; pointer-events: none; background: radial-gradient(rgba(190, 225, 255, .95), transparent 70%); opacity: 0; transition: opacity .12s; }
.prop.phone-light.on { opacity: 1; }
.prop.memory-thing.seen { opacity: .45; }
.prop.memory-thing:not(:has(.polaroid)) { display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid #4b2a1b; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 0 6px rgba(255, 250, 240, .35), 0 6px 14px rgba(0, 0, 0, .25); }
.prop.memory-thing .polaroid.snap.mini { transform: scale(.56) rotate(-6deg); }

/* Костюмы для сцен: поверх головы, обновки и кепка на это время снимаются */
.costume, .costume > g { display: none; }
.monkey.pirate .costume, .monkey.pirate .costume-pirate, .monkey.chef .costume, .monkey.chef .costume-chef { display: block; }
.monkey.socks .costume, .monkey.socks .costume-socks { display: block; }
.monkey.pirate .wear, .monkey.pirate .clothes.cap, .monkey.chef .wear, .monkey.chef .clothes.cap { display: none; }
.prop.bulb-prop.lit { filter: drop-shadow(0 0 14px #ffd66b); }
.monkey.stir { animation: stir .5s ease-in-out 2; }
@keyframes stir { 30% { transform: rotate(-4deg); } 70% { transform: rotate(4deg); } }
.prop.garland { font-size: 340px; pointer-events: none; }
.prop.garland .art { width: 1em; height: .1em; }
.prop.audience { z-index: 3; font-size: 420px; pointer-events: none; transform: translate(-50%, -100%); }
.prop.audience .art { width: 1em; height: .225em; }
.prop.audience.clap { animation: clap .3s ease-in-out 3; }
@keyframes clap { 50% { transform: translate(-50%, -104%); } }
.dog-guest { left: 60%; width: 130px; height: 150px; }
.dog-guest .dog { width: 100%; height: 100%; animation: breathe 3.4s ease-in-out infinite; }
.prop.fort { font-size: 250px; pointer-events: none; }
.prop.fort .art { width: 1em; height: .7em; }
.prop.fort .fort-glow, .prop.fort .fort-eyes { opacity: 0; transition: opacity .6s; }
.prop.fort.lit .fort-glow { opacity: .6; }
.prop.fort.lit .fort-eyes { opacity: 1; animation: fort-blink 3s infinite; }
.prop.fort .fort-lights circle { animation: fort-twinkle 1.6s ease-in-out infinite; }
.prop.fort .fort-lights circle:nth-child(2n) { animation-delay: .8s; }
@keyframes fort-twinkle { 50% { opacity: .35; } }
@keyframes fort-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.prop.fort .fort-eyes { transform-box: fill-box; transform-origin: center; }
.polaroid.snap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; width: 176px; height: 172px; padding: 8px 8px 9px; font-size: 16px; }
.polaroid.snap.mini { transform: scale(.74) rotate(-3deg); animation: pop .2s; }
.polaroid.snap span { font-size: 14px; font-weight: 800; line-height: 1.1; }
.snap-stage { position: relative; width: 158px; height: 124px; overflow: hidden; border-radius: 3px; background: linear-gradient(#c7dbe6 0 64%, #c9b28c 64%); }
.snap-stage.tub, .snap-stage.bath { background: linear-gradient(#cfe4ee 0 64%, #a9c7d8 64%); }
.snap-stage .monkey { position: absolute; bottom: -4px; left: 50%; width: 94px; height: 110px; transform: translateX(-50%); animation: none; }
.snap-stage.socks .monkey { left: 33%; }
.snap-stage .snap-tub { position: absolute; left: 50%; bottom: -26px; font-size: 128px; line-height: 0; transform: translateX(-50%); }
.snap-stage .snap-dot { position: absolute; left: 106px; top: 46px; width: 12px; height: 10px; border-radius: 50%; background: #3f6fa8; }
.snap-stage .dog { position: absolute; right: 2px; bottom: 0; width: 70px; height: 82px; }
.prop.keys { font-size: 64px; filter: drop-shadow(0 0 10px #ffd66b); }
.meter.oven { background: linear-gradient(90deg, #f3e0b0, #c8924f 55%, #7a5238 72%, #2c2018); }
.prop.slice-prop { font-size: 40px; }
.prop .slice { position: absolute; left: 50%; top: 40%; font-size: 30px; line-height: 0; transform: translate(-50%, -50%); }
.prop.thief { z-index: 4; }
.hall-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hall-stage svg { width: 100%; height: 100%; display: block; }
.chef-jacket { display: none; }
.monkey.chef .chef-jacket { display: block; }
.monkey.chef .clothes.scarf, .monkey.chef .clothes.straps { display: none; }
.prop.insta-post { z-index: 5; pointer-events: none; }
.insta { width: 190px; overflow: hidden; color: #1d2733; font-size: 13px; border: 4px solid #14201f; border-radius: 18px; background: #fff; }
.insta header { padding: 6px 10px; font-weight: 800; }
.insta .shot { height: 150px; overflow: hidden; background: linear-gradient(#f6c98b, #e88f6e); }
.insta .shot .monkey { width: 100%; height: 100%; }
.insta p { margin: 0; padding: 6px 10px 8px; line-height: 1.3; }
.snap-stage.tub .monkey { bottom: 20px; width: 104px; height: 120px; }
.snap-stage.bath .monkey { bottom: 30px; }
.prop.mash { pointer-events: none; }
body.choosing #scene { margin-top: 10px; padding: 14px 16px; }
body.choosing #scene h1 { font-size: 18px; margin-bottom: 4px; }
body.choosing #scene-text { font-size: 14px; line-height: 1.35; }
body.choosing #controls { margin-top: 10px; gap: 7px; }
body.choosing #controls:has(.option:nth-child(3)) { grid-template-columns: 1fr 1fr; }
body.choosing #controls button.option { padding: 11px 10px; font-size: 14px; line-height: 1.2; }
.monkey[data-age="adult"] .scarf { transform: translateY(-11px) scale(.92, .78); transform-origin: 120px 172px; }
.dog .dog-socks { display: none; }
.snap-stage.socks .dog .dog-socks { display: block; }
.prop.fort.camp { pointer-events: auto; cursor: pointer; }
.camp-door { position: absolute; left: 50%; bottom: .02em; width: 64px; height: 40px; overflow: hidden; transform: translateX(-50%); pointer-events: none; }
.camp-door .dog { position: absolute; left: 0; top: 100%; width: 64px; height: 74px; transition: top .35s ease-out; }
.prop.fort.camp.peek .camp-door .dog { top: 4px; }
.prop.fort.camp.peek .fort-eyes { opacity: 0; }
.look-arm, .look-muscle-body { display: none; }
.monkey.look-papakha .costume, .monkey.look-papakha .costume-papakha, .monkey.look-papakha .costume-beard, .monkey.look-papakha .finger-arm,
.monkey.look-emo .costume, .monkey.look-emo .costume-emo,
.monkey.look-muscle .look-muscle-body, .monkey.look-muscle .flex-arms { display: block; }
.monkey[class*="look-"] .wear, .monkey[class*="look-"] .clothes.cap { display: none; }
.monkey.look-papakha .limb-r, .monkey.look-muscle .limb, .monkey.look-muscle .clothes, .monkey.look-muscle .toy-heart { display: none; }
.monkey.look-papakha .brows { display: block; }
.monkey.look-papakha .brow-l { transform: translateY(4px) rotate(16deg); }
.monkey.look-papakha .brow-r { transform: translateY(4px) rotate(-16deg); }
.snap-stage.look-papakha, .insta .shot.look-papakha { background: linear-gradient(#bcd3e0 0 52%, #8aa07a 52% 64%, #c9b28c 64%); }
.snap-stage.look-emo, .insta .shot.look-emo { background: linear-gradient(#3b3346 0 64%, #251f2d 64%); }
.snap-stage.look-muscle, .insta .shot.look-muscle { background: linear-gradient(#f2b866 0 64%, #a8653f 64%); }
.snap-stage[class*="look-"] .monkey { bottom: -10px; width: 112px; height: 128px; }
.prop.look-card { z-index: 4; transition: left .3s, top .3s, opacity .3s; }
.prop.look-card .polaroid { transform: scale(.54); transition: transform .3s; }
.prop.look-card:nth-child(2) .polaroid { transform: scale(.54) rotate(2deg); }
.prop.look-card:nth-child(1) .polaroid, .prop.look-card:nth-child(3) .polaroid { transform: scale(.54) rotate(-3deg); }
.prop.look-card.chosen { z-index: 6; left: 50% !important; top: 46% !important; }
.prop.look-card.chosen .polaroid { transform: scale(1); }
.prop.look-card.dim { opacity: 0; pointer-events: none; }
.snap-stage.look-muscle .monkey { bottom: 6px; width: 104px; }
.insta .shot.look-muscle .monkey { transform: translateY(12px); }
.snap-stage.pirate { background: linear-gradient(90deg, #c83c44 0 14%, #e9d7b8 14% 86%, #c83c44 86%); }
.snap-stage.pirate .monkey { bottom: -14px; }
.pet-head { gap: 8px; }
.pet-head h2 { min-width: 0; font-size: 16px; line-height: 1.2; }
.pet-pills { flex-shrink: 0; gap: 4px; }
.pet-pills .streak-badge { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; font-size: 13px; }
.pet-pills .purse { padding: 4px 8px 4px 7px; font-size: 13px; }
.day-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.day-badge .art { width: 15px; height: 15px; vertical-align: -2px; }
/* Эдит утренника: кино-полосы, наезд, у удачи тёплый свет, у провала синий дождь */
.mog-face, .mog-jaw { display: none; }
.monkey.mog-on .mog-face, .monkey.mog-on .mog-jaw { display: block; }
.monkey.mog-on .eyes, .monkey.mog-on .blush, .monkey.mog-on .brows { display: none; }
.prop.edit-layer { z-index: 5; overflow: hidden; pointer-events: none; transition: opacity .35s; }
.prop.edit-layer.out { opacity: 0; }
.edit-fx { position: absolute; inset: 0; }
.edit-bar { position: absolute; left: 0; right: 0; height: 13%; background: #050505; animation: edit-bar .6s cubic-bezier(.2, .8, .2, 1); }
.edit-bar.top { top: 0; }
.edit-bar.bottom { bottom: 0; transform-origin: bottom; }
.edit-title { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; }
.edit-caption { position: absolute; left: 6%; right: 6%; bottom: 3.5%; z-index: 1; text-align: center; }
.room.edit-mog .backdrop, .room.edit-mog .hall-stage, .room.edit-mog .props .audience, .room.edit-mog .props .garland { filter: brightness(.38) sepia(.6) saturate(1.3); transition: filter .8s; }
.room.edit-mog .rig { animation: edit-push 3.6s cubic-bezier(.2, .7, .3, 1) forwards; filter: drop-shadow(-7px 0 12px rgba(255, 190, 90, .75)) contrast(1.12); }
.edit-layer.mog .edit-fx { background: linear-gradient(90deg, rgba(255, 176, 74, .38), transparent 46%, rgba(0, 0, 0, .55)); animation: edit-fade .8s; }
.edit-glint { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 22%; background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .55), transparent); transform: skewX(-18deg); opacity: 0; }
.edit-layer.glint .edit-glint { animation: edit-glint 1s ease-in-out; }
.edit-layer.mog .edit-title { color: #ffd66b; font: 700 38px/1 Georgia, "Times New Roman", serif; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); animation: edit-title 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.edit-layer.mog .edit-caption { color: #f3e9d6; font-size: 12px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; animation: edit-fade 1.2s .3s both; }
.room.edit-sad .backdrop, .room.edit-sad .hall-stage, .room.edit-sad .props .audience, .room.edit-sad .props .garland { filter: grayscale(.75) brightness(.6); transition: filter .6s; }
.room.edit-sad .rig { animation: edit-push 3.2s ease-out forwards; filter: drop-shadow(0 0 12px rgba(110, 160, 255, .5)) saturate(.6); }
.edit-layer.sad .edit-fx { background: linear-gradient(rgba(28, 56, 124, .4), rgba(28, 56, 124, .4)), repeating-linear-gradient(100deg, transparent 0 14px, rgba(220, 235, 255, .35) 14px 15px, transparent 15px 31px); background-size: auto, 120px 120px; animation: edit-rain .5s linear infinite, edit-fade .6s; }
.edit-layer.sad .edit-caption { color: #e3edff; font-style: italic; font-weight: 700; font-size: 14px; text-shadow: 0 0 8px #6aa0ff; }
.edit-tear { position: absolute; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #bfe4ff; box-shadow: 0 0 6px rgba(160, 210, 255, .9); animation: edit-tear 1.6s ease-in .4s both; }
@keyframes edit-bar { from { transform: scaleY(0); } }
@keyframes edit-push { from { scale: 1; } to { scale: 1.26; } }
@keyframes edit-glint { from { left: -40%; opacity: 1; } to { left: 120%; opacity: 1; } }
@keyframes edit-title { from { opacity: 0; letter-spacing: -.1em; transform: translateY(8px); } to { opacity: 1; letter-spacing: .14em; transform: none; } }
@keyframes edit-rain { to { background-position: 0 0, -30px 120px; } }
@keyframes edit-tear { from { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; transform: translateY(4px) scale(1); } to { opacity: 0; transform: translateY(54px) scale(.8); } }
@keyframes edit-fade { from { opacity: 0; } }