@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fredoka:wght@500;600;700&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#261641;background:#251341;font-size:16px}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:radial-gradient(circle at 70% -20%,#55409a 0,#251341 45%);overflow-x:hidden}
button{font:inherit;cursor:pointer}
.topbar{height:76px;padding:0 clamp(18px,3vw,44px);display:flex;align-items:center;gap:20px;color:#fff}
.brand{display:flex;align-items:center;gap:8px;font:700 clamp(24px,2.2vw,34px) 'Fredoka',sans-serif;white-space:nowrap;letter-spacing:-.04em}
.brand-flower{font-size:32px;color:#ffca31;text-shadow:2px 2px #fa5d96,-2px -1px #55d3f4;animation:spin 15s linear infinite}
.dot{color:#ffcf43}
.topline{font-weight:700;color:#eacbff;margin-left:auto;font-size:.92rem}
.topline span{color:#ffd449;margin-left:7px}
.pill-button,.shuffle-button{border:0;border-radius:999px;font-weight:800;box-shadow:0 4px 0 #160d2b;transition:transform .2s,box-shadow .2s}
.pill-button:hover,.shuffle-button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #160d2b}
.pill-button:active,.shuffle-button:active{transform:translateY(2px);box-shadow:0 2px 0 #160d2b}
.pill-button{background:#fff;color:#281643;padding:12px 18px;white-space:nowrap}
main{max-width:1800px;margin:0 auto;padding:0 clamp(10px,2vw,28px) 20px}
.intro{height:38px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.14em;padding:0 10px}
.live-dot{display:inline-block;width:8px;height:8px;background:#a7f94b;border-radius:50%;box-shadow:0 0 0 4px #a7f94b31;margin-right:7px;animation:pulse 1.5s ease-in-out infinite}
.sparkle{margin:0 7px;color:#fdd34e}
.intro-right{letter-spacing:0;font-weight:600;color:#c6b9d6;font-size:.88rem}
.stage-scroll{width:100%;overflow-x:auto;overflow-y:hidden;border:4px solid #f4cb7a;border-radius:28px;box-shadow:0 12px 0 #100b20,0 20px 50px #130920aa;background:#e6a978;scrollbar-color:#f5bd62 #42245c;scrollbar-width:thin}
.stage{position:relative;width:100%;min-width:850px;aspect-ratio:1672/941;overflow:hidden;touch-action:pan-x pan-y;isolation:isolate}
.room{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.occluder{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.occluder-bed{z-index:32;clip-path:polygon(47% 3%,76% 2%,76% 27%,64% 27%,58% 24%,48% 22%)}
.occluder-sofa{z-index:56;clip-path:polygon(18% 31%,31% 30%,45% 39%,45% 57%,39% 61%,18% 48%)}
.occluder-table{z-index:71;clip-path:polygon(48% 40%,66% 39%,73% 52%,73% 68%,65% 71%,46% 57%)}
.zone{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);visibility:hidden;pointer-events:none}
.zone span{display:none}
.actors{position:absolute;inset:0;pointer-events:none}
.actor{position:absolute;width:var(--size);aspect-ratio:1;transform:translate(-50%,-83%);pointer-events:auto;touch-action:none;cursor:grab;user-select:none;filter:drop-shadow(0 7px 2px #21152655);outline:none}
.actor::before{content:'';position:absolute;left:20%;right:20%;bottom:4%;height:10%;border-radius:50%;background:#23172855;filter:blur(3px);transform:translateY(5px)}
.actor.flower{width:clamp(45px,5.9%,96px)}
.actor.pet{width:clamp(65px,8%,135px)}
.actor.mastiff{width:clamp(95px,10.5%,175px)}
.actor img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;animation:idle 2.4s ease-in-out infinite;animation-delay:var(--delay);transform-origin:50% 88%}
.actor.flower img{filter:hue-rotate(var(--hue)) saturate(1.2)}
.actor.dragging{cursor:grabbing;transition:none;filter:drop-shadow(0 17px 7px #21152665);z-index:190!important}
.actor.dragging img{animation:none;transform:rotate(-8deg) scale(1.12)}
.actor.walking img{animation:walk .42s ease-in-out infinite;scale:var(--facing,1) 1}
.actor.action-dance img{animation:dance .52s ease-in-out infinite}
.actor.action-rest img{animation:snooze 2.8s ease-in-out infinite}
.actor.action-eat img,.actor.action-drink img{animation:nibble .48s ease-in-out infinite}
.actor.action-bath img{animation:shake .22s ease-in-out infinite}
.actor.action-tv img{animation:watch 2.2s ease-in-out infinite}
.actor.action-greet img{animation:greet .8s ease-in-out infinite}
.actor:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:50%}
.bubble{position:absolute;left:50%;bottom:94%;transform:translateX(-50%) scale(.8);padding:7px 10px;background:#fff;color:#281643;border:2px solid #281643;border-radius:13px;box-shadow:3px 4px 0 #281643;white-space:nowrap;font:700 .78rem 'Fredoka',sans-serif;opacity:0;pointer-events:none;transition:.2s}
.bubble.show{opacity:1;transform:translateX(-50%) scale(1)}
.actor:hover .bubble,.actor:focus-visible .bubble{opacity:1;transform:translateX(-50%) scale(1)}
.confetti-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:10}
.confetti{position:absolute;width:7px;height:12px;border-radius:2px;background:var(--color);animation:confetti 1s ease-out forwards}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 5px 5px;color:#fff}
.footer-copy{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.footer-copy strong{font:600 1.18rem 'Fredoka',sans-serif}
.footer-copy span{color:#d6c8e8;font-size:.9rem}
.shuffle-button{background:#ffcf4a;color:#2c1942;padding:12px 20px;white-space:nowrap}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-4deg) scaleY(1)}25%{transform:translateY(-7px) rotate(2deg) scaleY(1.03)}50%{transform:translateY(0) rotate(5deg) scaleY(.97)}75%{transform:translateY(-5px) rotate(-2deg) scaleY(1.02)}}
@keyframes dance{0%,100%{transform:translateY(0) rotate(-9deg)}25%{transform:translateY(-10px) rotate(7deg)}50%{transform:translateY(0) rotate(10deg)}75%{transform:translateY(-12px) rotate(-6deg)}}
@keyframes snooze{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(3px)}}
@keyframes nibble{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(5px)}}
@keyframes shake{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes watch{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(2deg) translateY(2px)}}
@keyframes greet{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(8deg) scale(1.08)}}
@keyframes pulse{50%{box-shadow:0 0 0 8px #a7f94b11}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes confetti{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(630deg)}}
@media(max-width:760px){.topbar{height:68px}.topline{display:none}.pill-button{margin-left:auto;padding:10px 13px;font-size:.82rem}.intro{height:auto;min-height:44px;line-height:1.5;flex-wrap:wrap;gap:0}.intro-right{display:none}.stage-scroll{border-radius:18px}.footer{align-items:flex-start;flex-direction:column;padding-top:19px}.footer-copy{gap:4px}.shuffle-button{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important}.actor{transition-duration:.1s!important}}

/* A quiet, frameless room. All controls remain reachable on touch screens. */
body{background:#201c24;overflow:hidden}
main{padding:0;max-width:none;height:100dvh}
.topbar{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);height:auto;padding:7px;gap:6px;border-radius:28px;background:#261b38b8;backdrop-filter:blur(12px);z-index:500}
.brand{font-size:18px;padding:0 10px;letter-spacing:-.03em}.brand-flower{font-size:23px;animation:none}
.pill-button{width:44px;height:44px;padding:0;box-shadow:none;font-size:22px;display:grid;place-items:center;margin:0}
.stage-scroll{border:0;border-radius:0;box-shadow:none;height:100dvh;display:grid;place-items:center;overflow:auto;background:transparent;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom}
.stage{width:min(100vw,177.68dvh);min-width:0;flex:none;touch-action:pan-x pan-y pinch-zoom}
.stage-scroll.zoomed{display:block}.stage-scroll.zoomed .stage{width:max(100vw,177.68dvh);min-height:100dvh}
.bubble{display:none!important}
.actor{filter:none;transform:translate(-50%,-90%);will-change:left,top}
.actor.flower{width:5.9%}.actor.pet{width:7.8%}.actor.mastiff{width:10.5%}
.actor img{animation:none}.actor.walking img{animation:none;scale:1}
.actor::before{bottom:6%;height:6%;background:#241d2938;filter:blur(2px)}
.pet-rig{position:absolute;inset:0;transform:scaleX(var(--facing,1));transform-origin:50% 90%}
.pet-rig img{position:absolute;inset:0;animation:none!important;transform:none;scale:1;transform-origin:50% 76%}
.pet-rig .torso{clip-path:inset(0 0 25% 0)}
.pet-rig .paw{clip-path:inset(74.8% var(--right) 0 var(--left))}
.walking .pet-rig .paw{animation:paw-step var(--stride,.65s) linear infinite!important;animation-delay:var(--phase)!important}
.pet.action-rest .pet-rig{transform:scaleX(var(--facing,1)) scaleY(.78) translateY(10%);transition:transform 1.4s ease}
.pet.action-rest .torso{animation:breathing 4s ease-in-out infinite!important}
.pet.action-eat .pet-rig,.pet.action-drink .pet-rig{animation:pet-sniff 1.8s ease-in-out infinite;transform-origin:65% 86%}
.pet.action-dance .pet-rig{animation:none}
.pet.action-tv img,.pet.action-greet img,.pet.action-bath img{animation:none!important}
.flower.walking img{animation:flower-step .6s linear infinite;scale:var(--facing,1) 1}
.flower.action-rest img{animation:none;transform:rotate(-12deg) scaleY(.9)}
.flower.action-tv img{animation:none}
.paused *{animation-play-state:paused!important}
@keyframes paw-step{0%,100%{transform:translateX(-1.5%) rotate(-2deg)}25%{transform:translate(0,-2%)}50%{transform:translateX(1.5%) rotate(2deg)}75%{transform:translate(0,0)}}
@keyframes breathing{50%{transform:scaleY(1.012)}}
@keyframes pet-sniff{0%,60%,100%{transform:scaleX(var(--facing,1)) rotate(0)}25%,40%{transform:scaleX(var(--facing,1)) rotate(3deg)}}
@keyframes flower-step{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(-2px) rotate(2deg)}}
@media(max-width:600px){.brand{display:none}.topbar{padding:6px}.actor:before{filter:blur(1px)}}
@media(prefers-reduced-motion:reduce){.pet-rig .paw,.pet-rig .torso,.pet-rig,.flower img{animation:none!important}}