:root{ --ink:#2c2631;--muted:#8e8392;--surface:#fffafd;--surface2:#fff;--pink:#ff6fae;--pink2:#ffb4d2; --lav:#9b7cf5;--mint:#67d9b5;--aqua:#67c9ee;--gold:#ffc85c;--danger:#ef667a;--green:#4eb785; --border:rgba(70,48,78,.09);--shadow:0 24px 70px rgba(69,42,73,.16); --safe-top:max(12px,env(safe-area-inset-top));--safe-bottom:max(10px,env(safe-area-inset-bottom)); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;width:100%;min-height:100%;font-family:Inter,ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#ede8ee;color:var(--ink);overscroll-behavior:none} body{display:grid;place-items:center;min-height:100dvh;overflow:hidden} button,input,select{font:inherit;color:inherit;touch-action:manipulation} button{cursor:pointer} button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(155,124,245,.34);outline-offset:2px} .app-shell{position:relative;width:100%;height:100dvh;max-width:430px;overflow:hidden;background:linear-gradient(180deg,#fffbfe,#f8f2f8);isolation:isolate} @media(min-width:650px){body{padding:20px}.app-shell{height:min(900px,calc(100dvh - 40px));width:min(430px,calc(100vw - 40px));border-radius:42px;box-shadow:0 30px 100px rgba(49,31,54,.22);border:1px solid rgba(255,255,255,.8)}} .game{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:var(--safe-top);background:linear-gradient(180deg,#fffafd,#faf5fa)} .app-topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 14px 6px;z-index:70;flex:0 0 auto} .identity-btn{min-width:0;border:0;background:none;padding:0;display:flex;align-items:center;gap:9px;text-align:left} .avatar-dot{width:44px;height:44px;flex:0 0 44px;border-radius:16px;background:linear-gradient(145deg,#ff91be,#9a7df5);display:grid;place-items:center;color:#fff;font-weight:1000;font-size:18px;box-shadow:0 8px 20px rgba(193,91,154,.22)} .identity-copy{display:flex;flex-direction:column;min-width:0}.identity-copy small{font-size:10px;font-weight:1000;letter-spacing:.095em;color:var(--muted);white-space:nowrap}.identity-copy strong{font-size:20px;line-height:1.05;letter-spacing:-.04em;max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-actions{display:flex;align-items:center;gap:7px}.coin-pill,.circle-btn{height:44px;border:1px solid var(--border);background:rgba(255,255,255,.88);box-shadow:0 7px 22px rgba(68,46,71,.06);backdrop-filter:blur(14px)} .coin-pill{min-width:82px;padding:0 12px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:6px}.coin-pill span{color:#d79e1b;font-size:18px}.coin-pill b{font-size:14px;font-weight:1000;font-variant-numeric:tabular-nums} .circle-btn{width:44px;border-radius:15px;font-size:20px} .screen{position:absolute;left:0;right:0;top:64px;bottom:calc(74px + var(--safe-bottom));opacity:0;visibility:hidden;pointer-events:none;transform:translateX(18px);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .2s} .screen.active{opacity:1;visibility:visible;pointer-events:auto;transform:none} .home-screen{display:flex;flex-direction:column;padding:0 12px 6px;gap:8px} .home-stage{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:31px;border:1px solid rgba(255,255,255,.72);background:#f4dce9;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 36px rgba(75,47,80,.1);isolation:isolate} .world-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lighting-layer{position:absolute;inset:0;z-index:2;pointer-events:none;transition:background .5s ease}.lighting-layer.night{background:linear-gradient(180deg,rgba(19,24,62,.43),rgba(31,27,62,.3));mix-blend-mode:multiply}.lighting-layer.sunset{background:linear-gradient(180deg,rgba(255,143,121,.18),rgba(110,76,166,.15))} .weather-layer,.ambient-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden} .weather-layer.rain:before{content:"";position:absolute;inset:-80px 0 0;background-image:repeating-linear-gradient(105deg,transparent 0 18px,rgba(255,255,255,.55) 19px 21px,transparent 22px 39px);animation:rainMove .7s linear infinite;opacity:.58} .weather-layer.snow:before{content:"• · • · • · • · • ·";position:absolute;inset:-20px 0 0;color:#fff;font-size:28px;line-height:65px;letter-spacing:14px;animation:snowMove 6s linear infinite;opacity:.7} .weather-layer.stars:before{content:"✦ · ✧ · ✦ · ✧";position:absolute;inset:20px 10px auto;color:rgba(255,255,255,.9);font-size:20px;letter-spacing:13px;animation:twinkle 2.4s ease-in-out infinite alternate} @keyframes rainMove{to{transform:translateY(65px)}}@keyframes snowMove{to{transform:translateY(120px)}}@keyframes twinkle{to{opacity:.35}} .wish-bubble{position:absolute;z-index:20;left:18px;top:70px;max-width:185px;min-height:54px;border:1px solid rgba(255,255,255,.72);border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.9);box-shadow:0 11px 28px rgba(56,39,63,.13);padding:7px 11px;display:flex;align-items:center;gap:8px;animation:wishBob 2.4s ease-in-out infinite}.wish-bubble.hidden{display:none}.wish-icon{font-size:25px}.wish-bubble span:last-child{display:flex;flex-direction:column;text-align:left;min-width:0}.wish-bubble small{font-size:7px;letter-spacing:.12em;font-weight:1000;color:var(--pink)}.wish-bubble b{font-size:10px;line-height:1.25;max-width:130px;overflow:hidden;text-overflow:ellipsis}.wish-bubble:after{content:"";position:absolute;left:20px;bottom:-9px;border:10px solid transparent;border-top-color:rgba(255,255,255,.9);border-left-width:3px}@keyframes wishBob{50%{transform:translateY(-4px)}} .pet-zone{position:absolute;inset:56px 0 58px;z-index:10;display:flex;align-items:center;justify-content:center}.pet-button{position:relative;width:min(280px,74vw);height:min(330px,46vh);max-height:330px;border:0;background:none;padding:0;display:grid;place-items:center;transform-origin:50% 90%;animation:petIdle 3.1s ease-in-out infinite;z-index:6}.pet-svg-wrap{width:100%;height:100%;display:grid;place-items:center;filter:drop-shadow(0 18px 13px rgba(73,46,74,.17));transition:transform .18s ease}.pet-svg-wrap svg{width:100%;height:100%;overflow:visible}.pet-svg-wrap .eyes-closed,.pet-svg-wrap .eyes-annoyed,.pet-svg-wrap .mouth-annoyed{opacity:0}.pet-svg-wrap .blush{opacity:.5;transition:.15s}.pet-button.enjoy{animation:petEnjoy .65s cubic-bezier(.18,.85,.25,1.16),petIdle 3.1s .65s ease-in-out infinite}.pet-button.enjoy .eyes-open,.pet-button.sleeping .eyes-open{opacity:0}.pet-button.enjoy .eyes-closed,.pet-button.sleeping .eyes-closed{opacity:1}.pet-button.enjoy .blush{opacity:1}.pet-button.grumpy .eyes-open{opacity:0}.pet-button.grumpy .eyes-annoyed,.pet-button.grumpy .mouth-annoyed{opacity:1}.pet-button.grumpy .mouth-happy{opacity:0}.pet-button.sick{filter:saturate(.58)}.pet-button.playing{animation:petPlay .7s ease-in-out infinite alternate}.pet-button.chase{animation:petChase .45s ease-in-out infinite alternate}.pet-button.wash-shake{animation:shake .5s ease-in-out 2}.pet-button.wander{animation:wander 4.2s ease-in-out 1}.pet-button.stretch .pet-svg-wrap{transform:scaleX(1.08) scaleY(.92)} @keyframes petIdle{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-11px) rotate(.7deg)}}@keyframes petEnjoy{35%{transform:translateY(5px) scale(.91,.87)}75%{transform:translateY(-13px) scale(1.07,1.1)}}@keyframes petPlay{to{transform:translateY(-15px) rotate(3deg) scale(1.03)}}@keyframes petChase{to{transform:translateX(13px) translateY(-8px) rotate(2deg)}}@keyframes shake{20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(4deg)}}@keyframes wander{25%{transform:translateX(-24px)}60%{transform:translateX(26px)}100%{transform:none}} .pet-shadow{position:absolute;left:50%;bottom:8%;width:150px;height:26px;border-radius:50%;background:rgba(44,39,53,.17);filter:blur(4px);transform:translateX(-50%);z-index:-1}.head-item{position:absolute;left:50%;top:1%;transform:translateX(-50%);font-size:52px;z-index:12;filter:drop-shadow(0 5px 5px rgba(50,30,55,.16));pointer-events:none}.head-item:empty{display:none}.companion{position:absolute;right:11%;top:40%;font-size:34px;filter:drop-shadow(0 5px 4px rgba(50,30,55,.14));animation:companionFloat 2.8s ease-in-out infinite}.companion:empty{display:none}@keyframes companionFloat{50%{transform:translateY(-10px) rotate(5deg)}}.pet-aura{position:absolute;width:275px;height:275px;border-radius:50%;pointer-events:none}.pet-aura.hearts:before{content:"♡ ♥ ♡ ♥";position:absolute;inset:0;color:rgba(255,88,151,.65);font-size:27px;word-spacing:34px;animation:auraSpin 7s linear infinite}.pet-aura.stars:before{content:"✦ ✧ ✦ ✧";position:absolute;inset:0;color:rgba(255,218,87,.85);font-size:25px;word-spacing:35px;animation:auraSpin 8s linear infinite}@keyframes auraSpin{to{transform:rotate(360deg)}} .thought-pop{position:absolute;right:22%;top:24%;font-size:34px;z-index:15;animation:thought 1.2s ease-in-out infinite alternate}.thought-pop.hidden{display:none}@keyframes thought{to{transform:translateY(-5px) scale(1.05)}} .relationship-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:0 0 auto}.relationship-pill{height:45px;border-radius:15px;border:1px solid var(--border);background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;gap:6px}.relationship-pill>span{font-size:17px}.relationship-pill div{display:flex;flex-direction:column;line-height:1}.relationship-pill small{font-size:6px;letter-spacing:.08em;color:var(--muted);font-weight:1000}.relationship-pill b{font-size:11px;margin-top:3px} .app-page{overflow:auto;padding:4px 14px 24px;scrollbar-width:none}.app-page::-webkit-scrollbar{display:none}.page-title{display:flex;justify-content:space-between;align-items:flex-end;padding:9px 1px 13px}.page-title small{font-size:8px;letter-spacing:.14em;color:var(--muted);font-weight:1000}.page-title h2{font-size:32px;line-height:1;margin:3px 0 0;letter-spacing:-.055em}.page-icon{font-size:34px;color:var(--pink)} .hero-card{min-height:126px;border-radius:24px;padding:18px;background:linear-gradient(145deg,#fff1f7,#eee9ff);display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 30px rgba(73,47,78,.08)}.hero-card small,.play-balance-card small{font-size:8px;font-weight:1000;letter-spacing:.12em;color:#9b7392}.hero-card h3{font-size:21px;margin:4px 0 5px;letter-spacing:-.04em}.hero-card p,.play-balance-card p{font-size:11px;line-height:1.45;color:#7f7482;margin:0}.hero-card>span{font-size:51px} .section-head{display:flex;justify-content:space-between;align-items:end;margin:20px 2px 10px}.section-head strong{font-size:15px}.section-head span{font-size:9px;color:var(--muted);font-weight:800} .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.feature-card{min-height:154px;border:0;border-radius:23px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;overflow:hidden;box-shadow:0 9px 24px rgba(68,46,72,.08)}.feature-card:active,.activity-card:active{transform:scale(.985)}.feature-card .feature-icon{font-size:35px}.feature-card small{display:block;font-size:7px;letter-spacing:.1em;font-weight:1000;margin-top:12px;opacity:.65}.feature-card h3{font-size:18px;margin:3px 0 4px;letter-spacing:-.04em}.feature-card p{font-size:10px;line-height:1.38;margin:0;opacity:.72}.feature-card i{position:absolute;right:13px;bottom:10px;font-size:26px;font-style:normal;opacity:.5}.feature-card.strawberry{background:linear-gradient(145deg,#fff0f5,#ffdbe9)}.feature-card.aqua{background:linear-gradient(145deg,#eafcff,#cdeefa)}.feature-card.lavender{background:linear-gradient(145deg,#f3efff,#ded5ff)}.feature-card.mint{background:linear-gradient(145deg,#effff8,#d1f3e4)}.feature-card.peach{background:linear-gradient(145deg,#fff7ed,#ffe2cd)}.feature-card.rose{background:linear-gradient(145deg,#fff2f9,#f7ddf0)} .play-balance-card{min-height:115px;border-radius:24px;padding:17px;background:linear-gradient(135deg,#26283f,#4d3f72);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 12px 30px rgba(46,39,75,.18)}.play-balance-card small{color:#d4cbed}.play-balance-card strong{display:block;font-size:18px;margin:5px 0}.play-balance-card p{color:#cfc7dd}.play-balance-card>span{font-size:50px} .activity-list{display:flex;flex-direction:column;gap:10px}.activity-card{min-height:132px;border:0;border-radius:23px;padding:14px;display:grid;grid-template-columns:58px 1fr auto;gap:11px;align-items:center;text-align:left;box-shadow:0 9px 24px rgba(68,46,72,.08)}.activity-card.fetch{background:linear-gradient(145deg,#fff2d9,#ffe7a6)}.activity-card.feather{background:linear-gradient(145deg,#edf4ff,#d9e7ff)}.activity-card.bubbles{background:linear-gradient(145deg,#ebfbff,#cdeff6)}.activity-art{font-size:42px}.activity-card small{font-size:7px;letter-spacing:.11em;font-weight:1000;opacity:.55}.activity-card h3{font-size:18px;margin:3px 0}.activity-card p{font-size:10px;line-height:1.35;margin:0 0 7px;opacity:.7}.activity-card>b{align-self:center;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.72);font-size:10px}.costs{display:flex;gap:4px;flex-wrap:wrap}.costs i{font-style:normal;font-size:7px;font-weight:900;padding:4px 6px;border-radius:999px;background:rgba(255,255,255,.54)} .segmented{position:sticky;top:0;z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:5px;background:#f1ecf2;border-radius:16px;margin:0 0 12px}.segmented button{min-height:43px;border:0;border-radius:12px;background:transparent;font-size:10px;font-weight:950;color:#8a7d8d}.segmented button.active{background:#fff;color:var(--ink);box-shadow:0 4px 13px rgba(67,48,70,.07)} .page-panel{display:none}.page-panel.active{display:block}.section-title{display:flex;justify-content:space-between;align-items:end;margin:16px 2px 9px}.section-title strong{font-size:14px}.section-title span{font-size:8px;color:var(--muted)} .card-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.game-card{min-width:0;border:1px solid var(--border);border-radius:21px;background:#fff;padding:12px;box-shadow:0 7px 22px rgba(68,48,72,.05)}.game-card.full{grid-column:1/-1}.game-card h3{font-size:13px;margin:6px 0 3px}.game-card p{font-size:9px;line-height:1.4;color:var(--muted);margin:0}.game-card .big-icon{font-size:35px}.game-card .card-art{height:108px;border-radius:17px;background:linear-gradient(145deg,#fff4f9,#efe9ff);display:grid;place-items:center;overflow:hidden}.game-card .card-art svg{width:96px;height:96px}.card-btn{width:100%;min-height:43px;margin-top:9px;border:0;border-radius:13px;background:#f3edf6;font-size:9px;font-weight:1000}.card-btn.primary,.primary-btn{background:linear-gradient(145deg,#ff74ae,#9b7cf5);color:#fff;box-shadow:0 8px 20px rgba(184,86,158,.19)}.card-btn:disabled,.primary-btn:disabled{opacity:.42}.tiny-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.tiny-tag{padding:5px 7px;border-radius:999px;background:#f2edf4;font-size:7px;font-weight:950;color:#756a78}.tiny-tag.gold{background:#fff4d7;color:#9a6d00}.tiny-tag.green{background:#eaf9f1;color:#3c8e67} .empty-card{grid-column:1/-1;padding:26px 16px;border:1px dashed rgba(93,72,98,.18);border-radius:20px;text-align:center;color:var(--muted);font-size:10px;line-height:1.55} .form-field{display:flex;flex-direction:column;gap:4px;margin-top:8px}.form-field label{font-size:8px;font-weight:900;color:var(--muted)}.form-field input,.form-field select{height:45px;border:1px solid var(--border);border-radius:13px;background:#fff;padding:0 11px;font-size:11px} .memory-card{display:flex;gap:10px;align-items:center;padding:11px;border-radius:18px;background:#fff;border:1px solid var(--border);margin-bottom:7px}.memory-card .memory-icon{width:45px;height:45px;border-radius:14px;background:#f6eff7;display:grid;place-items:center;font-size:24px}.memory-card div{min-width:0}.memory-card strong{display:block;font-size:11px}.memory-card p{font-size:8px;color:var(--muted);margin:3px 0 0;line-height:1.35} .family-node{padding:12px;border-radius:18px;border:1px solid var(--border);background:#fff;margin-bottom:8px}.family-node strong{font-size:12px}.family-node small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.family-link{font-size:16px;color:#c392b3;text-align:center;margin:-2px 0 5px} .nav-dot{position:absolute;right:15px;top:7px;width:8px;height:8px;border-radius:50%;background:#ff557d;box-shadow:0 0 0 3px rgba(255,85,125,.12)}.nav-dot.hidden{display:none} .activity-scene{position:absolute;inset:0;z-index:130;background:#f4eff5;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:.24s ease;isolation:isolate}.activity-scene.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.activity-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.activity-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 26%,rgba(255,255,255,.12));pointer-events:none}.activity-header{position:absolute;z-index:10;left:0;right:0;top:0;height:84px;padding:calc(var(--safe-top) + 4px) 14px 7px;display:grid;grid-template-columns:48px 1fr auto;gap:8px;align-items:center}.activity-header>div:nth-child(2) small{font-size:8px;letter-spacing:.13em;font-weight:1000;color:#786c7a}.activity-header h2{font-size:22px;margin:2px 0 0;letter-spacing:-.045em}.activity-back{width:46px;height:46px;border:1px solid rgba(255,255,255,.5);border-radius:16px;background:rgba(255,255,255,.76);backdrop-filter:blur(12px);font-size:30px}.activity-counter{min-width:48px;height:42px;border-radius:14px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);display:grid;place-items:center;font-size:10px;font-weight:1000}.activity-body{position:absolute;z-index:6;left:0;right:0;top:82px;bottom:94px;overflow:hidden}.activity-footer{position:absolute;left:12px;right:12px;bottom:calc(var(--safe-bottom) + 8px);z-index:10;min-height:70px;border:1px solid rgba(255,255,255,.6);border-radius:22px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);padding:10px 12px;box-shadow:0 10px 28px rgba(50,36,54,.1)} .activity-pet{position:absolute;left:50%;bottom:5%;width:260px;height:300px;transform:translateX(-50%);filter:drop-shadow(0 18px 13px rgba(73,46,74,.15));transition:transform .18s ease}.activity-pet svg{width:100%;height:100%}.activity-pet.enjoy .eyes-open{opacity:0}.activity-pet.enjoy .eyes-closed{opacity:1}.activity-pet .eyes-closed{opacity:0}.activity-pet .blush{opacity:.6} .activity-instruction{text-align:center}.activity-instruction strong{display:block;font-size:13px}.activity-instruction span{display:block;font-size:9px;color:var(--muted);margin-top:3px} .progress-card{display:flex;align-items:center;gap:10px}.progress-card>span{font-size:25px}.progress-copy{flex:1}.progress-copy strong{font-size:11px}.progress-copy small{display:block;font-size:8px;color:var(--muted);margin-top:2px}.progress-bar{height:7px;border-radius:999px;background:#efe9f1;margin-top:6px;overflow:hidden}.progress-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#70d9c0,#70bdec);width:0;transition:width .18s} .food-shelf{position:absolute;left:12px;right:12px;bottom:4px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.food-choice{height:74px;border:1px solid rgba(255,255,255,.7);border-radius:18px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.food-choice span{font-size:28px}.food-choice b{font-size:8px}.food-choice small{font-size:7px;color:#8b7d8c} .scrub-zone{position:absolute;left:50%;top:50%;width:275px;height:320px;transform:translate(-50%,-47%);touch-action:none}.bath-bubble{position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(198,239,255,.35);pointer-events:none;animation:bubblePop 1.4s ease forwards}@keyframes bubblePop{to{transform:translateY(-35px) scale(1.25);opacity:0}}.soap-bottle{position:absolute;right:24px;bottom:14%;font-size:50px;filter:drop-shadow(0 7px 5px rgba(49,53,70,.12))}.water-drop{position:absolute;color:#87d9f5;font-size:19px;animation:drop .8s linear forwards}@keyframes drop{to{transform:translateY(110px);opacity:0}} .training-buttons{position:absolute;left:14px;right:14px;bottom:5px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.command-btn{height:57px;border:1px solid rgba(255,255,255,.7);border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);font-size:11px;font-weight:1000} .play-object{position:absolute;touch-action:none;user-select:none}.fetch-ball{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7ae,#ffca57 55%,#f39a43);border:4px solid rgba(255,255,255,.7);box-shadow:0 10px 20px rgba(96,68,38,.18);bottom:25px;left:calc(50% - 32px)}.feather-toy{font-size:59px;left:calc(50% - 30px);top:20%;filter:drop-shadow(0 8px 5px rgba(55,45,72,.13))}.play-bubble{position:absolute;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.95),rgba(175,230,255,.42) 36%,rgba(178,145,255,.18));box-shadow:inset 0 0 12px rgba(255,255,255,.8),0 7px 18px rgba(68,87,114,.1);animation:rise 3.4s linear forwards}@keyframes rise{from{transform:translateY(80px) scale(.82)}to{transform:translateY(-450px) scale(1.08)}} .modal-backdrop{position:absolute;inset:0;z-index:180;display:flex;align-items:flex-end;background:rgba(35,27,39,.42);backdrop-filter:blur(9px);opacity:0;visibility:hidden;pointer-events:none;transition:.22s}.modal-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}.sheet{width:100%;max-height:88%;overflow:auto;border-radius:30px 30px 0 0;background:#fffafd;padding:16px 14px calc(17px + var(--safe-bottom));box-shadow:0 -25px 75px rgba(43,31,47,.25);transform:translateY(28px);transition:.25s cubic-bezier(.2,.9,.25,1);scrollbar-width:none}.modal-backdrop.open .sheet{transform:none}.sheet::-webkit-scrollbar{display:none}.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.sheet-head small{font-size:8px;font-weight:1000;letter-spacing:.13em;color:var(--muted)}.sheet-head h2{font-size:26px;line-height:1;margin:4px 0 0;letter-spacing:-.05em}.close-btn{width:46px;height:46px;border:1px solid var(--border);border-radius:15px;background:#fff;font-size:22px}.compact-sheet{max-height:none}.wish-detail{min-height:115px;border-radius:22px;background:linear-gradient(145deg,#fff1f7,#eee9ff);display:flex;align-items:center;gap:15px;padding:16px;margin-bottom:11px}.wish-detail>span{font-size:50px}.wish-detail h3{font-size:17px;margin:0 0 5px}.wish-detail p{font-size:10px;line-height:1.4;color:var(--muted);margin:0}.primary-btn,.secondary-btn,.danger-btn{width:100%;min-height:50px;border-radius:15px;font-weight:1000}.primary-btn{border:0;background:linear-gradient(145deg,#ff73ae,#9b7cf5);color:#fff}.secondary-btn{border:1px solid var(--border);background:#fff}.danger-btn{border:1px solid rgba(239,102,122,.2);background:rgba(239,102,122,.08);color:#d94b63}.button-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-row{min-height:68px;padding:10px 12px;border:1px solid var(--border);border-radius:18px;background:#fff;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}.settings-row strong{font-size:12px}.settings-row p{font-size:8px;color:var(--muted);margin:3px 0 0;line-height:1.35}.switch{width:52px;height:32px;flex:0 0 52px;border:0;border-radius:999px;background:#ddd5df;position:relative}.switch:before{content:"";position:absolute;width:24px;height:24px;left:4px;top:4px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(58,43,62,.17);transition:.18s}.switch.on{background:linear-gradient(145deg,#ff78b1,#9c7cf5)}.switch.on:before{transform:translateX(20px)}.select-setting{height:42px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 9px;font-size:9px;font-weight:900}.settings-data,.danger-zone{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(100,80,104,.16)}.settings-data h3,.danger-zone h3{font-size:12px;margin:0 0 8px}.danger-zone p{font-size:9px;color:var(--muted);line-height:1.4}.file-btn{display:grid;place-items:center;font-size:10px}.file-btn input{display:none}.version-line{text-align:center;color:var(--muted);font-size:8px;margin-top:16px} .choice-overlay,.offline-overlay{position:absolute;inset:0;z-index:240;background:rgba(32,25,37,.52);backdrop-filter:blur(11px);display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:.22s}.choice-overlay.open,.offline-overlay.open{opacity:1;visibility:visible;pointer-events:auto}.choice-card,.milestone-card,.passing-card,.offline-card{width:min(350px,100%);border-radius:30px;background:#fffafd;padding:23px 18px 18px;text-align:center;box-shadow:0 30px 90px rgba(35,25,39,.31);position:relative;overflow:hidden}.choice-emoji,.milestone-icon{font-size:60px}.choice-card>small,.milestone-card>small,.passing-card>small,.offline-card>small{display:block;font-size:8px;letter-spacing:.15em;font-weight:1000;color:var(--pink);margin-top:4px}.choice-card h2,.milestone-card h2,.passing-card h2,.offline-card h2{font-size:24px;line-height:1.05;margin:5px 0 8px;letter-spacing:-.045em}.choice-card p,.milestone-card p,.passing-card p,.offline-card p{font-size:10px;line-height:1.5;color:var(--muted);margin:0 0 14px}.choice-actions{display:grid;grid-template-columns:1fr;gap:7px}.choice-actions button{min-height:56px;border:1px solid var(--border);border-radius:16px;background:#fff;text-align:left;padding:8px 12px}.choice-actions b{display:block;font-size:11px}.choice-actions small{font-size:8px;color:var(--muted)}.milestone-rays{position:absolute;inset:-120px;background:repeating-conic-gradient(from 0deg,rgba(255,215,91,.18) 0 10deg,transparent 10deg 20deg);animation:spin 14s linear infinite;z-index:-1}@keyframes spin{to{transform:rotate(360deg)}}.passing-card{background:linear-gradient(180deg,#f7f3ff,#fffafd)}.passing-sky{font-size:18px;color:#ae96d7;margin-bottom:8px}.passing-portrait{width:150px;height:150px;margin:0 auto 8px}.passing-portrait svg{width:100%;height:100%}.passing-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:12px 0}.passing-stats div{padding:9px;border-radius:14px;background:#f3eef7}.passing-stats small{display:block;font-size:7px;color:var(--muted)}.passing-stats b{font-size:11px}.offline-card>span{font-size:50px} .toast-stack{position:absolute;left:14px;right:14px;top:calc(var(--safe-top) + 63px);z-index:310;display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none}.toast{max-width:285px;min-height:46px;padding:10px 13px;border-radius:15px;background:rgba(47,39,51,.93);color:#fff;box-shadow:0 12px 30px rgba(35,29,38,.18);display:flex;align-items:center;gap:8px;font-size:10px;font-weight:900;animation:toastIn .2s ease}.toast.hide{animation:toastOut .2s ease forwards}@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.96)}}@keyframes toastOut{to{opacity:0;transform:translateY(-8px) scale(.96)}} .fx-particle{position:absolute;z-index:80;pointer-events:none;font-size:26px;animation:particle .95s cubic-bezier(.15,.75,.3,1) forwards}@keyframes particle{0%{transform:translate(-50%,-20%) scale(.4);opacity:0}18%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-140px + var(--dy))) scale(1.25) rotate(var(--rot));opacity:0}} .onboarding{position:absolute;inset:0;z-index:500;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#fffafd,#f1e9ff);text-align:center;transition:.55s ease;overflow:hidden}.onboarding.hidden{opacity:0;visibility:hidden;transform:scale(1.03)}.onboarding-orb{position:absolute;border-radius:50%;filter:blur(30px)}.orb-a{width:310px;height:310px;background:rgba(255,128,183,.17);left:-100px;top:-70px}.orb-b{width:360px;height:360px;background:rgba(148,120,245,.15);right:-140px;bottom:-110px}.onboarding-card{position:relative;width:min(350px,100%)}.eyebrow{font-size:9px;letter-spacing:.17em;font-weight:1000;color:#9a8298}.onboarding h1{font-size:39px;line-height:.98;letter-spacing:-.06em;margin:7px 0 10px}.onboarding p{max-width:310px;margin:0 auto 14px;font-size:11px;line-height:1.55;color:#817483}.starter-egg{position:relative;width:210px;height:238px;border:0;background:none}.egg-glow{position:absolute;width:180px;height:180px;border-radius:50%;left:15px;top:32px;background:rgba(255,139,190,.22);filter:blur(20px);animation:pulseGlow 1.8s ease-in-out infinite alternate}.egg-shape{position:absolute;left:39px;top:26px;width:132px;height:174px;border-radius:54% 54% 46% 46%/61% 61% 39% 39%;background:radial-gradient(circle at 34% 22%,rgba(255,255,255,.96),transparent 22%),linear-gradient(150deg,#fff9fc,#ffd6e8 68%,#cbb8ff);box-shadow:inset -13px -15px 23px rgba(137,77,118,.08),0 20px 30px rgba(82,54,85,.14);animation:eggIdle 2.4s ease-in-out infinite}.egg-shape i{position:absolute;border-radius:50%;background:#ff8ebd;opacity:.6}.egg-shape i:nth-child(1){width:23px;height:17px;left:25px;top:64px;transform:rotate(18deg)}.egg-shape i:nth-child(2){width:18px;height:23px;right:25px;top:50px;transform:rotate(-15deg)}.egg-shape i:nth-child(3){width:15px;height:12px;left:58px;top:105px;background:#9b7cf5}.egg-shape b{position:absolute;left:50%;top:60px;width:4px;height:55px;background:#bc7ba1;opacity:0;transform:translateX(-50%) rotate(7deg);clip-path:polygon(40% 0,100% 0,58% 40%,100% 40%,25% 100%,45% 55%,0 55%)}.starter-egg.crack1 .egg-shape b{opacity:.35}.starter-egg.crack2 .egg-shape b{opacity:.7}.starter-egg.crack3 .egg-shape b{opacity:1}.starter-egg.hatching{animation:hatchBurst .9s cubic-bezier(.15,.88,.2,1.18) both}@keyframes pulseGlow{to{transform:scale(1.14);opacity:.55}}@keyframes eggIdle{50%{transform:translateY(-9px) rotate(1.5deg)}}@keyframes hatchBurst{35%{transform:scale(1.16);filter:brightness(1.35)}70%{transform:scale(.45);opacity:.3}100%{transform:scale(0);opacity:0}}.hatch-pips{display:flex;justify-content:center;gap:7px;margin:0 0 10px}.hatch-pips i{width:11px;height:11px;border-radius:50%;background:#e7dce9}.hatch-pips i.on{background:linear-gradient(145deg,var(--pink),var(--lav));transform:scale(1.12)}.hatch-copy{font-size:10px;color:#7f6e85} .motion-off *,.motion-off *:before,.motion-off *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} @media(max-height:760px){.app-topbar{height:57px}.screen{top:57px}.home-stage{border-radius:25px}.pet-zone{inset:49px 0 51px}.pet-button{width:min(235px,66vw);height:min(270px,39vh)}.relationship-pill{height:39px}.page-title h2{font-size:28px}.feature-card{min-height:137px}.screen{bottom:calc(69px + var(--safe-bottom))}} @media(max-width:374px){.app-topbar{padding-left:9px;padding-right:9px}.home-screen{padding-left:8px;padding-right:8px}.identity-copy strong{font-size:18px}.coin-pill{min-width:70px;padding:0 8px}.circle-btn{width:40px}.feature-grid{gap:7px}.activity-card{grid-template-columns:50px 1fr auto;padding:11px}.segmented button{font-size:9px}} /* v3.1 — living pet animation layer */ .pet-svg-wrap .pupil{transition:transform .16s ease;transform:translate(var(--look-x,0),var(--look-y,0))} .pet-svg-wrap .ears,.pet-svg-wrap .tail,.pet-svg-wrap .paw{transform-box:fill-box;transform-origin:center} .pet-button.blink .eyes-open{opacity:0} .pet-button.blink .eyes-closed{opacity:1} .pet-button.ear-twitch .ears{animation:earsTwitch .5s ease-in-out} .pet-button.tail-wag .tail,.pet-button.tail-happy .tail{animation:tailWag .42s ease-in-out infinite alternate} .pet-button.tickle{animation:ticklePet .18s ease-in-out 4} .pet-button.tickle .eyes-open{opacity:0}.pet-button.tickle .eyes-closed{opacity:1}.pet-button.tickle .mouth-open{opacity:1}.pet-button.tickle .mouth-happy{opacity:0} .pet-button.sit-cute .pet-svg-wrap{transform:translateY(11px) scale(.96,.9)} .pet-button.peek{animation:peekPet 1.5s ease-in-out} .pet-button.low-energy{animation-duration:4.2s} .pet-button.low-energy .pet-svg-wrap{transform:translateY(6px) scaleY(.96)} .pet-button.enjoy .tail{animation:tailWag .28s ease-in-out infinite alternate} .pet-button.enjoy .mouth-open{opacity:.7} @keyframes earsTwitch{20%{transform:rotate(-4deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-2deg)}} @keyframes tailWag{from{transform:rotate(-7deg)}to{transform:rotate(10deg)}} @keyframes ticklePet{25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}} @keyframes peekPet{0%,100%{transform:none}40%{transform:translateX(18px) rotate(2deg)}70%{transform:translateX(-8px) rotate(-1deg)}} .activity-pet{will-change:transform} .activity-pet .tail{transform-box:fill-box;transform-origin:center} .activity-pet.playing .tail,.activity-pet.fetch-carry .tail{animation:tailWag .22s ease-in-out infinite alternate} .activity-pet.fetch-carry .mouth-happy{opacity:0}.activity-pet.fetch-carry .mouth-open{opacity:1} .activity-pet.refuse-play{animation:refusePet .5s ease-in-out 2} .activity-pet.refuse-play .eyes-open{opacity:0}.activity-pet.refuse-play .eyes-annoyed{opacity:1} .activity-pet.refuse-play .mouth-happy{opacity:0}.activity-pet.refuse-play .mouth-annoyed{opacity:1} .activity-pet.curious-play{animation:sniffPet .55s ease-in-out infinite alternate} .fetch-mouth{position:absolute;z-index:20;font-size:34px;pointer-events:none;transition:left .5s ease,top .5s ease,opacity .2s ease;filter:drop-shadow(0 5px 4px rgba(55,38,55,.13))} .fetch-mouth.hidden{opacity:0} @keyframes refusePet{25%{transform:translateX(calc(-50% - 5px)) rotate(-2deg)}75%{transform:translateX(calc(-50% + 5px)) rotate(2deg)}} @keyframes sniffPet{to{filter:drop-shadow(0 18px 13px rgba(73,46,74,.15));transform:translate(-50%,4px) scale(.98) rotate(1deg)}} .activity-pet .eyes-closed,.activity-pet .eyes-annoyed,.activity-pet .mouth-annoyed,.activity-pet .mouth-open{opacity:0} .activity-pet.refuse-play .eyes-open{opacity:0} .activity-pet.refuse-play .eyes-annoyed,.activity-pet.refuse-play .mouth-annoyed{opacity:1} .activity-pet.fetch-carry .mouth-open{opacity:1} /* ===================== v4 PET-FIRST REDESIGN ===================== */ .hidden-nav{display:none!important} .pet-button{transition:width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1)} .pet-button[data-life-stage="Newborn"] .pet-svg-wrap{filter:drop-shadow(0 10px 8px rgba(73,46,74,.12))} .pet-button[data-life-stage="Baby"] .pet-svg-wrap{filter:drop-shadow(0 12px 9px rgba(73,46,74,.14))} .pet-svg-wrap .head,.pet-svg-wrap .torso,.pet-svg-wrap .paw{transition:all .7s cubic-bezier(.2,.8,.2,1)} .pet-svg-wrap .muzzle{filter:drop-shadow(0 2px 1px rgba(255,255,255,.3))} .pet-button[data-life-stage="Newborn"]{animation:newbornWobble 3.2s ease-in-out infinite} .pet-button[data-life-stage="Baby"]{animation:babyBounce 2.8s ease-in-out infinite} @keyframes newbornWobble{0%,100%{transform:translateY(4px) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}} @keyframes babyBounce{0%,100%{transform:translateY(1px) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}} .locked-activity{filter:saturate(.45);opacity:.68} .locked-activity>b{background:rgba(255,255,255,.8)!important;color:#766b78} .pets-destination-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:16px} .pets-destination-grid button{min-height:82px;border:1px solid var(--border);border-radius:21px;background:#fff;padding:12px 14px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;text-align:left;box-shadow:0 8px 22px rgba(65,45,68,.05)} .pets-destination-grid button>span{font-size:33px} .pets-destination-grid button>b{font-size:15px} .pets-destination-grid button>small{grid-column:2;font-size:9px;color:var(--muted);margin-top:-23px} .pets-destination-grid button>i{grid-column:3;grid-row:1/3;font-style:normal;font-size:25px;color:#ad9aaf} .living-pets-strip{display:flex;gap:9px;overflow-x:auto;padding:1px 1px 8px;scrollbar-width:none;scroll-snap-type:x proximity} .living-pets-strip::-webkit-scrollbar{display:none} .living-pet-card{min-width:225px;min-height:117px;border:1px solid var(--border);border-radius:22px;background:#fff;padding:9px;display:grid;grid-template-columns:82px 1fr;gap:8px;align-items:center;text-align:left;position:relative;scroll-snap-align:start} .living-pet-card.active{outline:3px solid rgba(255,111,174,.18);background:linear-gradient(145deg,#fff,#fff4f9)} .living-pet-art{width:80px;height:96px}.living-pet-art svg{width:100%;height:100%} .living-pet-card div:nth-child(2){display:flex;flex-direction:column;min-width:0} .living-pet-card small{font-size:7px;color:var(--muted);font-weight:950;text-transform:uppercase} .living-pet-card b{font-size:16px;margin:3px 0} .living-pet-card span{font-size:8px;color:#756a78} .living-pet-card i{position:absolute;right:8px;top:8px;font-size:7px;font-style:normal;font-weight:1000;padding:4px 6px;border-radius:999px;background:#f4edf4;color:#9b7a91} .living-pet-card.active i{background:#ffe4ef;color:#d3598e} .active-pet-summary{border-radius:23px;background:linear-gradient(145deg,#fff1f7,#f1ecff);padding:13px;margin:10px 0 16px;border:1px solid rgba(255,255,255,.8);display:grid;grid-template-columns:86px 1fr;gap:9px} .active-pet-mini{width:82px;height:100px}.active-pet-mini svg{width:100%;height:100%} .active-pet-summary small{font-size:7px;color:#8d718a;font-weight:1000} .active-pet-summary h3{font-size:21px;margin:2px 0}.active-pet-summary p{font-size:9px;color:#776b78;margin:0} .active-pet-summary .form-field,.active-pet-summary>.card-btn{grid-column:1/-1} .personality-summary{min-height:83px;border:1px solid var(--border);border-radius:20px;background:#fff;padding:12px;display:flex;align-items:center;gap:11px} .personality-summary>span{font-size:35px}.personality-summary div{display:flex;flex-direction:column}.personality-summary small{font-size:7px;color:var(--muted);font-weight:1000}.personality-summary b{font-size:14px;margin:2px 0}.personality-summary p{font-size:8px;color:var(--muted);margin:0} .subpage-back{min-height:43px;border:0;background:#f2ecf4;border-radius:14px;padding:0 12px;font-size:10px;font-weight:950;margin-bottom:10px} .subpage-title{display:flex;align-items:center;gap:10px;margin:2px 1px 15px}.subpage-title>span{font-size:40px}.subpage-title small{font-size:7px;letter-spacing:.12em;color:var(--muted);font-weight:1000}.subpage-title h3{font-size:22px;margin:2px 0 0;letter-spacing:-.04em} .location-choice-grid{display:flex;flex-direction:column;gap:8px} .location-choice{min-height:75px;border:1px solid var(--border);border-radius:19px;background:#fff;padding:10px 12px;display:grid;grid-template-columns:45px 1fr auto;gap:9px;align-items:center;text-align:left} .location-choice>span{font-size:31px}.location-choice div{display:flex;flex-direction:column}.location-choice b{font-size:12px}.location-choice small{font-size:8px;color:var(--muted);margin-top:3px;line-height:1.3}.location-choice i{font-size:7px;font-style:normal;font-weight:1000;padding:5px 7px;border-radius:999px;background:#f3edf4;color:#8b7a8d}.location-choice.current{background:linear-gradient(145deg,#fff2f8,#f0ebff);outline:2px solid rgba(255,111,174,.14)} .location-choice:disabled{opacity:.5} .shop-categories{grid-template-columns:repeat(4,1fr);grid-auto-flow:unset;grid-auto-columns:unset} .shop-categories button{font-size:9px} .shop-balance{min-height:75px;border-radius:21px;background:linear-gradient(145deg,#2e2d45,#554574);color:#fff;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.shop-balance span{font-size:8px;letter-spacing:.12em;color:#ddd3ec;font-weight:1000}.shop-balance b{font-size:21px} .daily-shop-card{width:100%;min-height:66px;border:0;border-radius:19px;background:linear-gradient(145deg,#fff2ce,#ffe4a3);display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;text-align:left;padding:9px 12px;margin-bottom:10px}.daily-shop-card>span{font-size:30px}.daily-shop-card div{display:flex;flex-direction:column}.daily-shop-card small{font-size:7px;font-weight:1000;color:#9b730e}.daily-shop-card b{font-size:11px}.daily-shop-card i{font-style:normal;font-size:9px;font-weight:1000} .shop-product-list,.style-list{display:flex;flex-direction:column;gap:8px} .shop-product{min-height:105px;border:1px solid var(--border);border-radius:20px;background:#fff;padding:10px;display:grid;grid-template-columns:57px 1fr auto;gap:10px;align-items:center} .shop-product-art{width:56px;height:56px;border-radius:17px;background:#f8f0f6;display:grid;place-items:center;font-size:31px}.shop-product-copy small{font-size:7px;color:var(--muted);font-weight:1000}.shop-product-copy h3{font-size:13px;margin:2px 0}.shop-product-copy p{font-size:8px;line-height:1.35;color:var(--muted);margin:0}.shop-effects{display:flex;gap:4px;margin-top:5px}.shop-effects span{font-size:7px;padding:4px 6px;border-radius:999px;background:#f4eef4} .shop-buy{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.shop-buy b{font-size:10px}.shop-buy button{min-height:36px;border:0;border-radius:11px;background:linear-gradient(145deg,#ff73ae,#9b7cf5);color:#fff;padding:0 11px;font-size:8px;font-weight:1000}.shop-buy button:disabled{opacity:.35} .shop-intro{min-height:91px;border-radius:21px;background:linear-gradient(145deg,#fff2d8,#e9efff);padding:13px;display:flex;align-items:center;gap:11px;margin-bottom:11px}.shop-intro>span{font-size:42px}.shop-intro b{font-size:13px}.shop-intro p{font-size:9px;line-height:1.35;color:var(--muted);margin:3px 0 0} .style-hero{min-height:132px;border-radius:23px;background:linear-gradient(145deg,#fff0f7,#eae5ff);display:flex;align-items:center;gap:12px;padding:11px;margin-bottom:10px}.style-pet-preview{width:115px;height:120px}.style-pet-preview svg{width:100%;height:100%}.style-hero small{font-size:7px;color:#9b718e;font-weight:1000}.style-hero b{display:block;font-size:18px;margin:2px 0}.style-hero p{font-size:8px;color:var(--muted);margin:0} .style-product{min-height:79px;border:1px solid var(--border);border-radius:18px;background:#fff;padding:9px;display:grid;grid-template-columns:48px 1fr auto;gap:9px;align-items:center}.style-product.equipped{background:linear-gradient(145deg,#fff5f9,#f2efff)}.style-preview{width:48px;height:48px;border-radius:14px;background:#f6f0f6;display:grid;place-items:center;font-size:27px}.style-product small{font-size:7px;color:var(--muted);font-weight:1000}.style-product h3{font-size:12px;margin:2px 0}.style-product p{font-size:8px;color:var(--muted);margin:0}.style-product button{min-height:36px;border:0;border-radius:11px;background:#f1ebf3;padding:0 10px;font-size:8px;font-weight:1000}.style-product.equipped button{background:linear-gradient(145deg,#ff73ae,#9b7cf5);color:#fff} @media(max-height:760px){ .pet-button{max-width:245px;max-height:285px} } .locked-feature-card{opacity:.55;filter:saturate(.4)} .locked-feature-card:active{transform:none} .pet-button[data-life-stage="Newborn"] .head-item{font-size:34px} .pet-button[data-life-stage="Baby"] .head-item{font-size:40px} /* v4.1 — stable interactive bath */ .bath-foam-layer{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden} .bath-hand{position:absolute;z-index:22;font-size:38px;pointer-events:none;filter:drop-shadow(0 5px 5px rgba(45,48,61,.15));transform:rotate(-15deg);transition:opacity .15s} .bath-hand.hidden{opacity:0} .bath-soap-button{position:absolute;right:18px;bottom:12%;z-index:25;min-width:104px;min-height:74px;border:1px solid rgba(255,255,255,.75);border-radius:20px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 9px 23px rgba(47,50,64,.1)} .bath-soap-button span{font-size:32px}.bath-soap-button b{font-size:9px}.bath-soap-button.used{opacity:.35;pointer-events:none;transform:scale(.92)} .bath-next-btn{margin-top:8px} .activity-body.bath-mode{touch-action:none;user-select:none;-webkit-user-select:none} .activity-body.bath-mode .activity-pet{z-index:8} .activity-body.bath-mode .bath-foam-layer{z-index:12} /* Tug-of-War */ .activity-card.tug{background:linear-gradient(145deg,#fff2e7,#ffd6be)} .activity-card.hidegame{background:linear-gradient(145deg,#f2edff,#dcd2ff)} .tug-rope{position:absolute;left:0;right:0;bottom:12%;height:115px;z-index:20} .tug-knot.pet-end{position:absolute;right:26%;top:30px;font-size:31px;z-index:3} .tug-line{position:absolute;right:27%;top:48px;width:150px;height:10px;border-radius:999px;background:repeating-linear-gradient(90deg,#be8a58 0 12px,#e5bb81 12px 24px);transform-origin:right center} .tug-handle{position:absolute;left:32%;top:18px;width:58px;height:58px;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.9);font-size:29px;z-index:5;box-shadow:0 8px 20px rgba(70,45,40,.1);touch-action:none} /* Hide & Seek */ .seek-countdown{position:absolute;left:50%;top:8%;transform:translateX(-50%);z-index:30;min-width:170px;padding:12px 15px;border-radius:20px;background:rgba(255,255,255,.86);backdrop-filter:blur(13px);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 8px 22px rgba(56,40,62,.09)} .seek-countdown{font-size:30px}.seek-countdown b{font-size:13px;margin-top:2px}.seek-countdown small{font-size:8px;color:var(--muted);margin-top:3px} .hide-spot{position:absolute;transform:translate(-50%,-50%);width:88px;min-height:72px;border:1px solid rgba(255,255,255,.68);border-radius:20px;background:rgba(255,255,255,.77);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 7px 18px rgba(57,43,61,.08)} .hide-spot span{font-size:32px}.hide-spot small{font-size:7px;font-weight:900;color:#756a78}.hide-spot:disabled{opacity:.45} .seek-pet{position:absolute;width:110px;height:130px;transform:translate(-50%,-50%);z-index:28;filter:drop-shadow(0 8px 7px rgba(66,45,66,.16));animation:seekPop .35s cubic-bezier(.18,.9,.25,1.18)} .seek-pet svg{width:100%;height:100%}.seek-pet.hidden{display:none} .seek-pet.peek-wrong{animation:seekPeek .7s ease} @keyframes seekPop{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}} @keyframes seekPeek{0%{transform:translate(-50%,-50%) translateY(20px);opacity:0}50%{transform:translate(-50%,-50%) translateY(-8px);opacity:1}100%{transform:translate(-50%,-50%)}} .pet-button.nose-boop{animation:noseBoop .55s cubic-bezier(.2,.8,.2,1)} .pet-button.nose-boop .nose{transform-box:fill-box;transform-origin:center;animation:noseSquish .45s ease} .pet-button.high-five .paw-right{transform-box:fill-box;transform-origin:center;animation:highFivePaw .7s cubic-bezier(.2,.9,.2,1)} .pet-button.paw-touch .paw-right{transform-box:fill-box;transform-origin:center;animation:pawPull .65s ease} @keyframes noseBoop{35%{transform:translateY(4px) scale(.96)}70%{transform:translateY(-4px) scale(1.02)}} @keyframes noseSquish{45%{transform:scale(1.25,.65)}} @keyframes highFivePaw{45%{transform:translate(-24px,-40px) rotate(-28deg) scale(1.12)}} @keyframes pawPull{45%{transform:translate(12px,6px) rotate(12deg)}} /* ========================================================== v4.2 — CLEAN LAYERING / NO OVERLAP ========================================================== */ .app-topbar{z-index:120;height:66px;padding-top:8px;background:linear-gradient(180deg,rgba(255,251,254,.98),rgba(255,251,254,.88));backdrop-filter:blur(18px)} .screen{top:66px;bottom:calc(82px + var(--safe-bottom));overflow:hidden} .app-page{overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 34px} .page-title{position:sticky;top:0;z-index:35;background:linear-gradient(180deg,#fffafd 0%,rgba(255,250,253,.96) 72%,rgba(255,250,253,0) 100%);padding-top:10px;padding-bottom:15px} .segmented{top:67px;z-index:32} .modal-backdrop{z-index:420} .activity-scene{z-index:360} .choice-overlay,.offline-overlay{z-index:520} .toast-stack{z-index:620} .sheet{max-height:calc(100% - 74px);padding-bottom:calc(24px + var(--safe-bottom))} @media(max-height:760px){ .app-topbar{height:60px} .screen{top:60px;bottom:calc(75px + var(--safe-bottom))} .segmented{top:60px} } /* ========================================================== v4.2 — TRUST / FINGER MOVEMENT ========================================================== */ .pet-button{ translate:var(--pet-x,0px) var(--pet-y,0px); transition:translate .22s cubic-bezier(.2,.75,.2,1),width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1); } .pet-button.shy .mouth-happy{opacity:0} .pet-button.shy .mouth-shy,.pet-button.shy .brow-shy{opacity:1} .pet-button.shy .blush{opacity:.26} .pet-button.shy .pupil{transform:translate(calc(var(--look-x,0px) * .5 - 2px),calc(var(--look-y,0px) * .5))} .pet-button.finger-wary{filter:saturate(.92)} .pet-button.finger-wary .ears{animation:waryEars .42s ease-in-out} .pet-button.finger-play .tail{animation:tailWag .22s ease-in-out infinite alternate} .pet-button.finger-play .pet-svg-wrap{filter:drop-shadow(0 18px 14px rgba(73,46,74,.18))} .pet-button.finger-sniff{animation:fingerSniff .9s cubic-bezier(.2,.8,.2,1)} .pet-button.shy-retreat{animation:shyRetreat .6s cubic-bezier(.2,.8,.2,1)} @keyframes waryEars{50%{transform:rotate(-3deg) scale(.97)}} @keyframes fingerSniff{45%{transform:translateY(-8px) scale(1.08)}70%{transform:translateY(-3px) scale(1.04)}} @keyframes shyRetreat{35%{transform:translateY(4px) scale(.92) rotate(-2deg)}70%{transform:translateY(-2px) scale(.96) rotate(2deg)}} /* ========================================================== v4.2 — RANDOM LIVING / SILLY ACTIONS ========================================================== */ .pet-button.screen-sniff{z-index:30;animation:screenSniff 2.15s cubic-bezier(.18,.8,.22,1)} .pet-button.screen-sniff .nose{animation:noseSniff .35s ease-in-out 4} .pet-button.silly-freeze{animation:tinyFreeze 1s ease} .pet-button.tiny-run{animation:tinyRun 1.15s cubic-bezier(.2,.75,.2,1)} .pet-button.sniff-floor{animation:sniffFloor 1.45s ease-in-out} .pet-button.wrong-way{animation:wrongWay 1.75s cubic-bezier(.2,.75,.2,1)} .pet-button.silly-trip{animation:sillyTrip 1.25s cubic-bezier(.15,.8,.2,1)} .pet-button.zoomies{animation:zoomies 2.1s cubic-bezier(.2,.75,.2,1)} .pet-button.tail-chase{animation:tailChase 1.85s ease-in-out} .pet-button.silly-roll{animation:sillyRoll 1.65s cubic-bezier(.2,.8,.2,1)} .pet-button.silly-sneeze{animation:sillySneeze .82s ease} .pet-button.toy-confusion{animation:toyConfusion 1.45s ease-in-out} @keyframes screenSniff{ 0%,100%{transform:translateY(0) scale(1)} 42%{transform:translateY(38px) scale(1.48)} 58%{transform:translateY(42px) scale(1.52)} 76%{transform:translateY(22px) scale(1.30)} } @keyframes noseSniff{50%{transform:scale(1.38,.72)}} @keyframes tinyFreeze{20%,80%{transform:translateY(3px) scale(.97)}} @keyframes tinyRun{20%{transform:translateX(-35px) rotate(-3deg)}45%{transform:translateX(28px) rotate(3deg)}70%{transform:translateX(-14px)}} @keyframes sniffFloor{35%{transform:translateY(16px) rotate(-2deg) scale(.98)}65%{transform:translateY(12px) translateX(10px) rotate(2deg)}} @keyframes wrongWay{25%{transform:translateX(36px) rotate(4deg)}55%{transform:translateX(50px) rotate(-2deg)}75%{transform:translateX(22px) rotate(3deg)}} @keyframes sillyTrip{28%{transform:translateX(17px) translateY(-7px) rotate(3deg)}52%{transform:translateX(25px) translateY(12px) rotate(11deg) scale(.96)}68%{transform:translateX(20px) translateY(15px) rotate(7deg) scale(.94)}} @keyframes zoomies{15%{transform:translateX(-58px) rotate(-6deg) scale(.96)}36%{transform:translateX(62px) rotate(7deg) scale(1.02)}58%{transform:translateX(-42px) rotate(-5deg)}78%{transform:translateX(52px) rotate(5deg)}} @keyframes tailChase{0%{transform:rotate(0)}25%{transform:rotate(10deg) translateX(15px)}50%{transform:rotate(-10deg) translateX(-12px)}75%{transform:rotate(8deg) translateX(10px)}} @keyframes sillyRoll{35%{transform:translateY(11px) rotate(18deg) scale(.94)}60%{transform:translateY(13px) rotate(-14deg) scale(.95)}80%{transform:translateY(7px) rotate(7deg)}} @keyframes sillySneeze{35%{transform:translateY(5px) scale(.92,.86)}55%{transform:translateY(-10px) scale(1.08,1.12)}} @keyframes toyConfusion{30%{transform:translateX(-8px) rotate(-4deg)}65%{transform:translateX(8px) rotate(4deg)}} /* More readable compact navigation */ /* ========================================================== v4.3 — IMMERSIVE ROOM APP LAYOUT ========================================================== */ .app-topbar{ height:64px!important; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:4px 10px 5px; } .identity-btn{min-width:0;overflow:hidden;display:flex;align-items:center} .identity-copy{min-width:0;overflow:hidden} .identity-copy small,.identity-copy strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .identity-copy small{font-size:9px;letter-spacing:.075em} .identity-copy strong{font-size:19px} .topbar-actions{flex:0 0 auto;gap:5px} .coin-pill{min-width:69px;height:40px;padding:0 9px;border-radius:13px} .coin-pill span{font-size:16px}.coin-pill b{font-size:13px} .circle-btn{width:40px;height:40px;border-radius:13px} .screen{top:64px!important;bottom:calc(78px + var(--safe-bottom))!important} .home-screen{padding:0!important;gap:0!important} .home-stage{ flex:1; width:100%; border-radius:0!important; border-left:0;border-right:0; box-shadow:none; } .pet-zone{inset:72px 0 52px} .room-action{ position:absolute;z-index:28;right:10px;bottom:60px;min-width:151px;height:48px; border:1px solid rgba(255,255,255,.74);border-radius:16px;background:rgba(255,255,255,.82); backdrop-filter:blur(15px);box-shadow:0 8px 22px rgba(52,38,56,.09); display:grid;grid-template-columns:32px 1fr 13px;align-items:center;gap:6px;padding:0 9px;text-align:left } .room-action>span:first-child{font-size:24px}.room-action>span:nth-child(2){display:flex;flex-direction:column;min-width:0} .room-action small{font-size:6px;font-weight:1000;letter-spacing:.1em;color:#9a8298} .room-action b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .room-action i{font-size:18px;font-style:normal;color:#9f8ca2} .room-object-layer{position:absolute;inset:0;z-index:13;pointer-events:none} .room-swipe-left .world-art{animation:roomLeft .32s ease} .room-swipe-right .world-art{animation:roomRight .32s ease} @keyframes roomLeft{from{transform:translateX(7%);opacity:.55}to{transform:none;opacity:1}} @keyframes roomRight{from{transform:translateX(-7%);opacity:.55}to{transform:none;opacity:1}} .room-investigate .ears{animation:earsTwitch .45s ease} .room-investigate .pupil{transform:translate(var(--look-x,0),var(--look-y,0))} /* Safe bottom navigation: no overlap, no floating home button */ @media(max-width:350px){ .identity-copy small{font-size:8px}.identity-copy strong{font-size:17px} .avatar-dot{width:36px;height:36px;flex-basis:36px;border-radius:12px} .coin-pill{min-width:61px;padding:0 7px}.circle-btn{width:37px;height:37px} .room-action{min-width:132px;right:7px} } /* ========================================================== v4.3 — SWEETER FINGER CHASE ========================================================== */ .pet-button.finger-chasing .ears{animation:earsTwitch .5s ease-in-out infinite alternate} .pet-button.finger-chasing .tail{animation:tailWag .18s ease-in-out infinite alternate} .pet-button.finger-chasing .paw-left{animation:walkPaw .28s ease-in-out infinite alternate} .pet-button.finger-chasing .paw-right{animation:walkPaw .28s .14s ease-in-out infinite alternate} .pet-button.finger-play{animation:petChaseFinger .42s ease-in-out infinite alternate} @keyframes walkPaw{to{transform:translateY(-5px) rotate(5deg)}} @keyframes petChaseFinger{to{rotate:1.6deg;scale:1.015}} /* Care screen now owns relationship stats */ .care-screen .relationship-row,.relationship-row{margin:9px 0 4px} /* v4.4 nav and topbar fix */ .app-topbar{height:68px!important;padding:8px 10px 7px!important;align-items:center!important} .identity-btn{min-width:0!important;display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;align-items:center!important} .avatar-dot{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:15px!important;font-size:15px!important} .identity-copy small,.identity-copy strong{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} .identity-copy small{font-size:9px!important;line-height:1.15!important} .identity-copy strong{font-size:19px!important;line-height:1.05!important} .topbar-actions{display:flex!important;align-items:center!important;gap:6px!important} .coin-pill,.circle-btn{flex:0 0 auto!important} .coin-pill{height:42px!important;min-width:72px!important;padding:0 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important} .coin-pill b{font-size:13px!important} .circle-btn{width:42px!important;height:42px!important;border-radius:14px!important} .screen{top:68px!important;bottom:calc(82px + var(--safe-bottom))!important} @media(max-width:360px){.screen{top:66px!important;bottom:calc(78px + var(--safe-bottom))!important}.app-topbar{height:66px!important;padding:7px 8px 6px!important}.identity-btn{grid-template-columns:38px minmax(0,1fr)!important;gap:8px!important}.avatar-dot{width:38px!important;height:38px!important}.identity-copy strong{font-size:17px!important}.coin-pill{min-width:64px!important;height:39px!important;padding:0 8px!important}.circle-btn{width:39px!important;height:39px!important}} .pet-button.dont-touch .mouth-annoyed{opacity:1!important}.pet-button.dont-touch .mouth-happy,.pet-button.dont-touch .mouth-shy{opacity:0!important}.pet-button.dont-touch .brow-shy{opacity:1!important;stroke:#5d3c53!important} .pet-menu-sheet{max-width:430px}.pet-menu-topline{margin:-4px 0 12px;font-size:12px;color:#7e7182;line-height:1.35}.pet-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px} .pet-quick-btn,.pet-place-btn{border:1px solid rgba(255,255,255,.78);border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 10px 22px rgba(76,57,81,.08);padding:13px 12px;text-align:left} .pet-quick-btn{display:grid;grid-template-columns:34px 1fr;grid-template-areas:"icon title" "icon sub";column-gap:10px;align-items:center}.pet-quick-btn span{grid-area:icon;font-size:28px}.pet-quick-btn b{grid-area:title;font-size:14px}.pet-quick-btn small{grid-area:sub;font-size:11px;color:#8a7f8d} .pet-places-grid{display:grid;gap:10px}.pet-place-btn{display:grid;grid-template-columns:34px 1fr;align-items:start;gap:10px}.pet-place-btn span{font-size:27px}.pet-place-btn b{display:block;font-size:14px}.pet-place-btn small{display:block;margin-top:3px;font-size:11px;color:#8a7f8d;line-height:1.35}.pet-place-btn.current{background:linear-gradient(145deg,#fff1f8,#f0e8ff);border-color:rgba(255,255,255,.92)} .home-stage{background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.42),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03))!important} .room-action{min-width:170px!important;height:52px!important;border-radius:18px!important}.room-action small{font-size:6.5px!important}.room-action b{font-size:10px!important}.relationship-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} /* v4.4 final interaction + menu polish */ .pet-button.wary-run{animation:waryRunAway .96s cubic-bezier(.18,.78,.2,1)!important} .pet-button.wary-run .eyes-open{opacity:0!important} .pet-button.wary-run .eyes-annoyed{opacity:1!important} .pet-button.wary-run .mouth-happy,.pet-button.wary-run .mouth-shy{opacity:0!important} .pet-button.wary-run .mouth-annoyed{opacity:1!important} @keyframes waryRunAway{ 0%{transform:translateX(0) translateY(0) scale(1)} 28%{transform:translateX(calc(var(--wary-run) * .42)) translateY(-5px) scale(.93) rotate(-3deg)} 62%{transform:translateX(var(--wary-run)) translateY(5px) scale(.91) rotate(3deg)} 100%{transform:translateX(0) translateY(0) scale(1)} } .pet-button.wake-grumpy .eyes-open{opacity:0!important} .pet-button.wake-grumpy .eyes-annoyed{opacity:1!important} .pet-button.wake-grumpy .mouth-happy{opacity:0!important} .pet-button.wake-grumpy .mouth-annoyed{opacity:1!important} .pet-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} .pet-quick-btn{min-height:82px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:3px!important;padding:9px 6px!important} .pet-quick-btn span{font-size:27px!important} .pet-quick-btn b{font-size:11px!important} .pet-quick-btn small{font-size:8px!important} .pet-menu-sheet{max-height:min(82%,720px)!important} @media(max-width:350px){ .pet-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .pet-quick-btn{min-height:72px!important} } /* ========================================================== v4.5 NEW APP DOCK Historical dock rules removed in v4.9. ========================================================== */ #gameApp>.screen{bottom:calc(86px + var(--safe-bottom))!important} @media(max-width:360px){ #gameApp>.screen{bottom:calc(82px + var(--safe-bottom))!important} } .pet-place-btn:disabled{opacity:.42!important;filter:saturate(.45)!important} /* ========================================================= v4.6 — MOBILE INPUT / FULLSCREEN / PORTRAIT ========================================================= */ html,body,#gameApp{ -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; -webkit-tap-highlight-color:transparent; overscroll-behavior:none; } .home-stage{touch-action:pan-y} input,textarea{ -webkit-user-select:text!important; user-select:text!important; -webkit-touch-callout:default!important; } .orientation-guard{ display:none; position:fixed; inset:0; z-index:5000; background:linear-gradient(145deg,#fff7fb,#ede7ff); align-items:center; justify-content:center; padding:28px; text-align:center; } .orientation-guard>div{ max-width:340px; padding:28px 24px; border:1px solid rgba(103,78,110,.10); border-radius:30px; background:rgba(255,255,255,.90); box-shadow:0 22px 60px rgba(60,43,65,.15); } .orientation-guard span{display:block;font-size:52px;animation:rotatePhone 1.7s ease-in-out infinite} .orientation-guard strong{display:block;font-size:22px;letter-spacing:-.03em;margin-top:9px} .orientation-guard p{font-size:12px;line-height:1.5;color:#776b79;margin:7px 0 0} @keyframes rotatePhone{50%{transform:rotate(90deg)}} @media (orientation:landscape) and (max-height:650px){ .orientation-guard{display:flex} } /* solid pet — no ears visible through head */ .pet-svg-wrap .head,.pet-svg-wrap .torso{ fill-opacity:1!important; opacity:1!important; } /* sleepy newborn */ .pet-button[data-life-stage="Newborn"].low-energy{ animation:newbornSleepy 2.4s ease-in-out infinite!important; } @keyframes newbornSleepy{ 0%,100%{transform:translateY(4px) rotate(-.5deg)} 50%{transform:translateY(8px) rotate(.5deg) scale(.985)} } /* ========================================================== v4.7 — FINAL DOCK: Pets · Care · EXPOSED Home · Settings ========================================================== */ #gameApp>.screen{bottom:calc(84px + var(--safe-bottom))!important} /* no separate room action button */ .room-action{display:none!important} /* room hotspots are the gameplay layer */ /* ========================================================== v4.7 — EXPRESSION ENGINE (23 visual states) ========================================================== */ .pet-svg-wrap .expression-decor>*{opacity:0} .pet-button[data-expression="neutral"] .mouth-happy{opacity:.82} .pet-button[data-expression="tiny-happy"] .mouth-happy{opacity:1} .pet-button[data-expression="tiny-happy"] .blush{opacity:.82} .pet-button[data-expression="tiny-happy"] .eyes-open{transform:scaleY(.92);transform-origin:center} .pet-button[data-expression="ecstatic"] .mouth-open{opacity:1!important} .pet-button[data-expression="ecstatic"] .mouth-happy{opacity:0!important} .pet-button[data-expression="ecstatic"] .spark-eye{opacity:1!important} .pet-button[data-expression="ecstatic"] .blush{opacity:1!important} .pet-button[data-expression="affectionate"] .eyes-closed{opacity:1!important} .pet-button[data-expression="affectionate"] .eyes-open{opacity:0!important} .pet-button[data-expression="affectionate"] .mouth-happy{opacity:1!important} .pet-button[data-expression="affectionate"] .blush{opacity:1!important} .pet-button[data-expression="curious"] .brow-up.right{opacity:1!important} .pet-button[data-expression="curious"] .pupil-right{transform:translate(4px,-2px)} .pet-button[data-expression="curious"] .pupil-left{transform:translate(4px,-2px)} .pet-button[data-expression="curious"] .mouth-shy{opacity:.72!important} .pet-button[data-expression="curious"] .mouth-happy{opacity:0!important} .pet-button[data-expression="suspicious"] .brow-down.left{opacity:1!important} .pet-button[data-expression="suspicious"] .pupil-left{transform:translate(5px,2px)} .pet-button[data-expression="suspicious"] .pupil-right{transform:translate(5px,2px)} .pet-button[data-expression="suspicious"] .mouth-shy{opacity:1!important} .pet-button[data-expression="suspicious"] .mouth-happy{opacity:0!important} .pet-button[data-expression="wary"] .brow-shy{opacity:1!important} .pet-button[data-expression="wary"] .mouth-shy{opacity:1!important} .pet-button[data-expression="wary"] .mouth-happy{opacity:0!important} .pet-button[data-expression="wary"] .blush{opacity:.28!important} .pet-button[data-expression="scared"] .brow-up{opacity:1!important} .pet-button[data-expression="scared"] .eyes-open{transform:scale(1.08);transform-origin:center} .pet-button[data-expression="scared"] .mouth-open{opacity:.65!important} .pet-button[data-expression="scared"] .mouth-happy{opacity:0!important} .pet-button[data-expression="scared"] .sweat{opacity:1!important} .pet-button[data-expression="dont-touch"] .eyes-open{opacity:0!important} .pet-button[data-expression="dont-touch"] .eyes-annoyed{opacity:1!important} .pet-button[data-expression="dont-touch"] .mouth-happy{opacity:0!important} .pet-button[data-expression="dont-touch"] .mouth-annoyed{opacity:1!important} .pet-button[data-expression="dont-touch"] .brow-down{opacity:1!important} .pet-button[data-expression="grumpy"] .eyes-open{opacity:0!important} .pet-button[data-expression="grumpy"] .eyes-annoyed{opacity:1!important} .pet-button[data-expression="grumpy"] .mouth-happy{opacity:0!important} .pet-button[data-expression="grumpy"] .mouth-annoyed{opacity:1!important} .pet-button[data-expression="grumpy"] .brow-down{opacity:.78!important} .pet-button[data-expression="angry"] .eyes-open{opacity:0!important} .pet-button[data-expression="angry"] .eyes-annoyed{opacity:1!important} .pet-button[data-expression="angry"] .mouth-happy{opacity:0!important} .pet-button[data-expression="angry"] .mouth-annoyed{opacity:1!important} .pet-button[data-expression="angry"] .brow-down{opacity:1!important} .pet-button[data-expression="angry"]{animation:angryTiny .34s ease-in-out infinite alternate} @keyframes angryTiny{to{rotate:.8deg}} .pet-button[data-expression="mischievous"] .brow-down.left{opacity:.8!important} .pet-button[data-expression="mischievous"] .mouth-happy{opacity:1!important} .pet-button[data-expression="mischievous"] .pupil-left{transform:translate(5px,2px)} .pet-button[data-expression="mischievous"] .pupil-right{transform:translate(5px,2px)} .pet-button[data-expression="mischievous"] .tongue{opacity:.74!important} .pet-button[data-expression="proud"] .eyes-open{transform:scaleY(.72);transform-origin:center} .pet-button[data-expression="proud"] .mouth-happy{opacity:1!important} .pet-button[data-expression="proud"] .blush{opacity:.6!important} .pet-button[data-expression="proud"] .brow-up{opacity:.42!important} .pet-button[data-expression="confused"] .brow-up.left{opacity:1!important} .pet-button[data-expression="confused"] .brow-down.right{opacity:.7!important} .pet-button[data-expression="confused"] .mouth-shy{opacity:1!important} .pet-button[data-expression="confused"] .mouth-happy{opacity:0!important} .pet-button[data-expression="surprised"] .brow-up{opacity:1!important} .pet-button[data-expression="surprised"] .mouth-open{opacity:1!important} .pet-button[data-expression="surprised"] .mouth-happy{opacity:0!important} .pet-button[data-expression="surprised"] .eyes-open{transform:scale(1.10);transform-origin:center} .pet-button[data-expression="hungry"] .mouth-open{opacity:.72!important} .pet-button[data-expression="hungry"] .mouth-happy{opacity:0!important} .pet-button[data-expression="hungry"] .tongue{opacity:1!important} .pet-button[data-expression="hungry"] .pupil-left, .pet-button[data-expression="hungry"] .pupil-right{transform:translateY(4px)} .pet-button[data-expression="sleepy"] .eyes-open{opacity:0!important} .pet-button[data-expression="sleepy"] .eyes-closed{opacity:1!important} .pet-button[data-expression="sleepy"] .mouth-shy{opacity:.8!important} .pet-button[data-expression="sleepy"] .mouth-happy{opacity:0!important} .pet-button[data-expression="exhausted"] .eyes-open{opacity:0!important} .pet-button[data-expression="exhausted"] .eyes-closed{opacity:1!important} .pet-button[data-expression="exhausted"] .mouth-open{opacity:.42!important} .pet-button[data-expression="exhausted"] .mouth-happy{opacity:0!important} .pet-button[data-expression="exhausted"]{filter:saturate(.83)} .pet-button[data-expression="dirty"] .eyes-annoyed{opacity:.7!important} .pet-button[data-expression="dirty"] .eyes-open{opacity:.4!important} .pet-button[data-expression="dirty"] .mouth-annoyed{opacity:1!important} .pet-button[data-expression="dirty"] .mouth-happy{opacity:0!important} .pet-button[data-expression="dirty"] .sweat{opacity:.7!important} .pet-button[data-expression="sick"] .eyes-open{opacity:0!important} .pet-button[data-expression="sick"] .eyes-closed{opacity:1!important} .pet-button[data-expression="sick"] .mouth-annoyed{opacity:.85!important} .pet-button[data-expression="sick"] .mouth-happy{opacity:0!important} .pet-button[data-expression="sick"] .tear.left{opacity:.5!important} .pet-button[data-expression="sick"]{filter:saturate(.66)} .pet-button[data-expression="embarrassed"] .eyes-open{transform:scaleY(.76);transform-origin:center} .pet-button[data-expression="embarrassed"] .blush{opacity:1!important} .pet-button[data-expression="embarrassed"] .mouth-shy{opacity:1!important} .pet-button[data-expression="embarrassed"] .mouth-happy{opacity:0!important} .pet-button[data-expression="food-excited"] .spark-eye{opacity:1!important} .pet-button[data-expression="food-excited"] .mouth-open{opacity:1!important} .pet-button[data-expression="food-excited"] .tongue{opacity:1!important} .pet-button[data-expression="food-excited"] .mouth-happy{opacity:0!important} .pet-button[data-expression="toy-excited"] .spark-eye{opacity:1!important} .pet-button[data-expression="toy-excited"] .mouth-open{opacity:.85!important} .pet-button[data-expression="toy-excited"] .mouth-happy{opacity:0!important} .pet-button[data-expression="toy-excited"] .tail{animation:tailWag .16s ease-in-out infinite alternate} /* ========================================================== v4.8 — LIVING CREATURE / TOILET SYSTEM ========================================================== */ .pet-button.free-roam{ transition:translate 1.35s cubic-bezier(.18,.72,.22,1),width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1)!important; } .pet-button.free-roam .paw-left{animation:walkPaw .28s ease-in-out infinite alternate} .pet-button.free-roam .paw-right{animation:walkPaw .28s .14s ease-in-out infinite alternate} .pet-button.free-roam .ears{animation:earsTwitch .8s ease-in-out infinite alternate} .pet-button.free-roam .tail{animation:tailWag .3s ease-in-out infinite alternate} .pet-button.toilet-relief{animation:toiletRelief 1.2s ease-in-out} .pet-button.accident-shame .brow-shy{opacity:1!important} .pet-button.accident-shame .mouth-shy{opacity:1!important} .pet-button.accident-shame .mouth-happy{opacity:0!important} .pet-button.accident-shame{animation:accidentShame .55s ease-in-out 2} @keyframes toiletRelief{ 35%{transform:translateY(12px) scale(.97)} 65%{transform:translateY(10px) scale(.98)} } @keyframes accidentShame{ 35%{transform:translateX(-4px) rotate(-1deg) scale(.96)} 70%{transform:translateX(4px) rotate(1deg) scale(.96)} } @keyframes messPulse{ 50%{transform:translate(-50%,-50%) scale(1.08)} } /* v4.9 ONLY BOTTOM MENU CSS */ #gameApp>.screen{bottom:calc(84px + var(--safe-bottom))!important} .pet-button.poke-angry .eyes-open{opacity:0!important}.pet-button.poke-angry .eyes-annoyed{opacity:1!important}.pet-button.poke-angry .mouth-happy{opacity:0!important}.pet-button.poke-angry .mouth-annoyed{opacity:1!important} .pet-button.cuddle-loving{animation:cuddleLove 1.65s cubic-bezier(.18,.82,.2,1)!important}.pet-button.cuddle-loving .eyes-open{opacity:0!important}.pet-button.cuddle-loving .eyes-closed{opacity:1!important}.pet-button.cuddle-loving .blush{opacity:1!important}.pet-button.cuddle-refuse{animation:cuddleRefuse .7s ease-in-out 2!important}.pet-button.cuddle-refuse .eyes-open{opacity:0!important}.pet-button.cuddle-refuse .eyes-annoyed{opacity:1!important}.pet-button.playroom-party{animation:playroomParty .48s ease-in-out 5!important}.pet-button.playroom-party .tail{animation:tailWag .14s ease-in-out infinite alternate!important}.pet-button.playroom-refuse{animation:cuddleRefuse .7s ease-in-out 2!important}.pet-button.silly-fart{animation:sillyFart .5s ease!important} @keyframes cuddleLove{35%{transform:translateY(-7px) scale(1.06) rotate(-2deg)}65%{transform:translateY(-4px) scale(1.07) rotate(2deg)}}@keyframes cuddleRefuse{35%{transform:translateX(-7px) rotate(-2deg)}70%{transform:translateX(7px) rotate(2deg)}}@keyframes playroomParty{50%{transform:translateY(-14px) scale(1.04) rotate(3deg)}}@keyframes sillyFart{45%{transform:translateX(5px) translateY(-2px) rotate(2deg)}} .pounce-ring{position:absolute;width:86px;height:86px;border:3px dashed rgba(255,93,151,.75);border-radius:50%;z-index:18;pointer-events:none;animation:pouncePulse .52s ease-in-out infinite alternate}.pounce-ring.hidden{display:none}.feather-toy.caught-feather{filter:drop-shadow(0 0 10px rgba(255,93,151,.6));transform:scale(.82) rotate(-16deg)}@keyframes pouncePulse{to{transform:scale(1.16);opacity:.35}} /* v5.0 — Sleep lighting + visible charging */ @keyframes energyCharge{to{background-position:-220% 0}} @keyframes chargeText{to{opacity:.45}} .home-stage .lighting-layer.night{background:linear-gradient(180deg,rgba(25,31,68,.38),rgba(30,24,58,.28))!important} /* Wish: fulfill or set a boundary */ .wish-decision-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;margin-top:10px} .wish-decision-row>button{width:100%} /* Discipline choices */ #behaviorOverlay .choice-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} #behaviorOverlay .choice-actions button{min-height:68px!important} /* ========================================================== v5.0.1 — CANONICAL HOME UI This is the only layout definition for the Home HUD / dock. ========================================================== */ /* Header: compact, safe and balanced */ .app-topbar{ height:64px!important; padding:5px 10px!important; grid-template-columns:minmax(0,1fr) auto!important; gap:8px!important; overflow:hidden!important; } .identity-btn{min-width:0!important;width:100%!important} .identity-copy{min-width:0!important;overflow:hidden!important} .identity-copy small{ max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; font-size:8px!important; letter-spacing:.07em!important; } .identity-copy strong{font-size:18px!important} .avatar-dot{width:38px!important;height:38px!important;flex:0 0 38px!important} .topbar-actions{gap:6px!important;min-width:max-content!important} .coin-pill{height:38px!important;min-width:66px!important;padding:0 9px!important;border-radius:13px!important} .circle-btn{width:38px!important;height:38px!important;border-radius:13px!important} /* Home scene owns the visual attention */ .home-screen{gap:0!important;padding:0!important} .home-stage{ border-radius:0!important; border-left:0!important; border-right:0!important; box-shadow:none!important; overflow:hidden!important; } .pet-zone{ inset:62px 0 58px!important; display:flex!important; align-items:center!important; justify-content:center!important; } .pet-button{ max-width:300px!important; max-height:350px!important; } /* Top room controls: smaller, quieter */ .scene-top{ position:absolute!important; left:10px!important; right:10px!important; top:9px!important; z-index:22!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:7px!important; } .scene-chip{ min-height:34px!important; height:34px!important; padding:0 9px!important; border-radius:12px!important; background:rgba(255,255,255,.84)!important; border:1px solid rgba(255,255,255,.92)!important; backdrop-filter:blur(13px)!important; -webkit-backdrop-filter:blur(13px)!important; box-shadow:0 5px 14px rgba(55,39,60,.07)!important; font-size:9px!important; } #locationChip{ max-width:235px!important; overflow:hidden!important; } #locationChip b{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #timeChip{ flex:0 0 auto!important; padding:0 10px!important; font-size:8px!important; font-weight:900!important; } /* Wish is a subtle thought, not a second giant panel */ .wish-bubble{ left:12px!important; top:54px!important; max-width:148px!important; min-height:46px!important; padding:6px 9px!important; gap:6px!important; border-radius:15px 15px 15px 6px!important; background:rgba(255,255,255,.90)!important; box-shadow:0 8px 20px rgba(55,39,60,.10)!important; } .wish-bubble .wish-icon{font-size:23px!important} .wish-bubble small{font-size:6px!important} .wish-bubble b{ max-width:99px!important; font-size:9px!important; white-space:nowrap!important; } /* No permanent tiny swipe pill — dots are enough */ .swipe-room-hint{display:none!important} /* Interactive objects share one visual language */ .room-hotspot{ position:absolute!important; transform:translate(-50%,-50%)!important; width:44px!important; height:44px!important; border-radius:50%!important; border:1px solid rgba(255,255,255,.96)!important; background:rgba(255,255,255,.88)!important; backdrop-filter:blur(11px)!important; -webkit-backdrop-filter:blur(11px)!important; box-shadow:0 6px 17px rgba(51,37,56,.10)!important; display:grid!important; place-items:center!important; opacity:.96!important; } .room-hotspot span{font-size:23px!important;line-height:1!important} .room-hotspot:active{transform:translate(-50%,-50%) scale(.90)!important} /* The page dots MUST sit above the mood bar, never inside it */ .room-nav-dots{ position:absolute!important; z-index:24!important; left:50%!important; bottom:66px!important; transform:translateX(-50%)!important; display:flex!important; align-items:center!important; gap:5px!important; padding:4px 6px!important; border-radius:999px!important; background:rgba(255,255,255,.56)!important; backdrop-filter:blur(9px)!important; -webkit-backdrop-filter:blur(9px)!important; pointer-events:auto!important; } .room-nav-dots button{ width:6px!important; height:6px!important; padding:0!important; margin:0!important; border:0!important; border-radius:999px!important; background:rgba(73,57,78,.24)!important; } .room-nav-dots button.active{ width:17px!important; background:linear-gradient(90deg,#ff78ad,#9a7bec)!important; } /* Clean readable mood strip */ .pet-dialogue{ position:absolute!important; z-index:25!important; left:10px!important; right:10px!important; bottom:9px!important; height:47px!important; min-height:47px!important; box-sizing:border-box!important; padding:7px 10px!important; border-radius:16px!important; border:1px solid rgba(255,255,255,.88)!important; background:rgba(255,255,255,.88)!important; backdrop-filter:blur(16px)!important; -webkit-backdrop-filter:blur(16px)!important; box-shadow:0 7px 20px rgba(50,35,54,.09)!important; display:grid!important; grid-template-columns:30px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; overflow:hidden!important; } .mood-face{ width:30px!important; height:30px!important; border-radius:11px!important; display:grid!important; place-items:center!important; font-size:20px!important; background:#fff2c9!important; } .pet-dialogue>div{ display:grid!important; grid-template-rows:10px 17px!important; align-content:center!important; min-width:0!important; overflow:hidden!important; } .pet-dialogue small{ display:block!important; min-width:0!important; font-size:6px!important; line-height:10px!important; letter-spacing:.10em!important; font-weight:1000!important; color:#d25a91!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .pet-dialogue b{ display:block!important; min-width:0!important; max-width:100%!important; font-size:9px!important; line-height:17px!important; font-weight:850!important; color:#3f3543!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } /* Lighter rain: atmosphere, not white stripes over the game */ .weather-layer.rain:before{ background-image:repeating-linear-gradient(105deg,transparent 0 27px,rgba(255,255,255,.30) 28px 29px,transparent 30px 57px)!important; animation:rainMove .95s linear infinite!important; opacity:.23!important; } /* Compact needs strip, separated from navigation */ .needs-dock{ flex:0 0 56px!important; height:56px!important; box-sizing:border-box!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:5px!important; padding:5px 8px 4px!important; background:#fffafd!important; backdrop-filter:none!important; } .need{ position:relative!important; min-width:0!important; height:47px!important; min-height:47px!important; padding:6px 6px 8px!important; box-sizing:border-box!important; border-radius:14px!important; border:1px solid rgba(91,68,98,.09)!important; background:#fff!important; box-shadow:0 4px 13px rgba(63,43,67,.045)!important; display:grid!important; grid-template-columns:18px minmax(0,1fr)!important; grid-template-rows:17px 9px 3px!important; column-gap:4px!important; align-items:center!important; overflow:hidden!important; } .need>span{ grid-column:1!important; grid-row:1 / 3!important; font-size:17px!important; line-height:1!important; align-self:center!important; } .need>div{ grid-column:2!important; grid-row:1 / 3!important; min-width:0!important; display:flex!important; flex-direction:column!important; justify-content:center!important; } .need b{ font-size:11px!important; line-height:13px!important; font-weight:950!important; } .need small{ font-size:6px!important; line-height:8px!important; color:#8b7e8d!important; } .need>i{ grid-column:1 / 3!important; grid-row:3!important; align-self:end!important; width:100%!important; height:3px!important; border-radius:999px!important; overflow:hidden!important; background:#f1ebf2!important; } .need>i>em{ display:block!important; height:100%!important; border-radius:999px!important; } .need.charging::after{ right:5px!important; top:4px!important; font-size:5px!important; } /* ========================================================== v5.0.1 — FINAL NAVIGATION Home is exposed, but only slightly — no overlap with labels. ========================================================== */ #gameApp>.screen{ bottom:calc(82px + var(--safe-bottom))!important; } @media(max-width:360px){ .needs-dock{padding-left:5px!important;padding-right:5px!important;gap:3px!important} .need{padding-left:4px!important;padding-right:4px!important;column-gap:2px!important} .wish-bubble{max-width:134px!important} } /* tighter short-screen handling */ @media(max-height:760px){ .pet-zone{inset:58px 0 56px!important} .pet-dialogue{height:45px!important;min-height:45px!important} .room-nav-dots{bottom:62px!important} } /* ========================================================== v5.0.2 — INPUT ROUTING FIX Visible controls must actually receive pointer events. ========================================================== */ /* The room overlay itself must not block the scene, but every rendered hotspot must explicitly opt back into pointer input. */ .room-object-layer{ pointer-events:none!important; } .room-object-layer .room-hotspot, .room-hotspot{ pointer-events:auto!important; touch-action:manipulation!important; cursor:pointer; } /* The pet zone spans most of the room; only the pet itself should capture input so blank areas continue to work for swiping. */ .pet-zone{ pointer-events:none!important; } .pet-button{ pointer-events:auto!important; touch-action:none!important; } .companion,.head-item,.pet-aura,.pet-shadow{ pointer-events:none!important; } /* All real UI controls are explicitly interactive. */ /* Hidden / disabled controls stay non-interactive. */ button:disabled, [aria-disabled="true"]{ pointer-events:none!important; } /* Mood/status UI should never sit invisibly on top of game actions. */ .pet-dialogue, .needs-dock{ pointer-events:none!important; } .needs-dock .need{ pointer-events:none!important; } /* Make the dock itself sit above screens but don't create a giant invisible hit region outside its visible card. */ /* ========================================================== v5.0.3 — SINGLE BOTTOM DOCK Five columns prevent Home from colliding with Care. col1 Pets | col2 Care | col3 Home | col4 spacer | col5 Settings ========================================================== */ #gameApp>.screen{bottom:calc(82px + var(--safe-bottom))!important} /* Daily hidden reward: only reveals itself after the correct icon was tapped. */ .room-hotspot.found-coins{ animation:foundCoinIcon .7s cubic-bezier(.2,.85,.2,1)!important; box-shadow:0 0 0 5px rgba(255,225,111,.28),0 8px 22px rgba(113,82,24,.18)!important; } @keyframes foundCoinIcon{ 35%{transform:translate(-50%,-50%) scale(1.24) rotate(-7deg)} 70%{transform:translate(-50%,-50%) scale(1.12) rotate(6deg)} } /* Current mood is visibly readable in the face. */ .pet-button[data-expression="sad"] .brow-up{opacity:1!important} .pet-button[data-expression="sad"] .mouth-happy{opacity:0!important} .pet-button[data-expression="sad"] .mouth-shy{opacity:1!important} .pet-button[data-expression="sad"] .tear.left{opacity:.76!important} .pet-button[data-expression="sad"] .eyes-open{transform:scaleY(.82);transform-origin:center} .pet-button[data-expression="needy"] .brow-up{opacity:.86!important} .pet-button[data-expression="needy"] .mouth-happy{opacity:0!important} .pet-button[data-expression="needy"] .mouth-shy{opacity:1!important} .pet-button[data-expression="needy"] .blush{opacity:.92!important} .pet-button[data-expression="needy"] .eyes-open{transform:scale(1.05);transform-origin:center} .pet-button[data-expression="bored"] .mouth-happy{opacity:0!important} .pet-button[data-expression="bored"] .mouth-shy{opacity:.72!important} .pet-button[data-expression="bored"] .eyes-open{transform:scaleY(.52);transform-origin:center} .pet-button[data-expression="bored"] .brow-down.left{opacity:.34!important} /* ========================================================== v5.0.4 — DESKTOP MOUSE SWIPE FIX ========================================================== */ .home-stage, .world-art, .world-layer, .lighting-layer, .weather-layer, .ambient-layer, .room-object-layer{ -webkit-user-select:none!important; user-select:none!important; -webkit-user-drag:none!important; -moz-user-select:none!important; -ms-user-select:none!important; } .world-art{ pointer-events:none!important; transform:translateX(var(--swipe-preview-x,0px)); transition:transform .16s ease; } .home-stage{ cursor:grab; touch-action:none!important; } .home-stage.swipe-grab, .home-stage.swipe-dragging{ cursor:grabbing!important; } .home-stage.swipe-dragging .world-art{ transition:none!important; } .home-stage::selection, .world-art::selection{ background:transparent!important; } /* v5.1 — five action dock */ #bottomNav.main-dock-v51{position:absolute!important;left:10px!important;right:10px!important;bottom:calc(9px + var(--safe-bottom))!important;height:68px!important;z-index:290!important;margin:0!important;padding:6px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:1fr 1fr 72px 1fr 1fr!important;gap:3px!important;align-items:center!important;overflow:visible!important;border:1px solid rgba(79,61,86,.10)!important;border-radius:24px!important;background:rgba(255,253,255,.98)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;box-shadow:0 12px 32px rgba(48,34,53,.13)!important} #bottomNav.main-dock-v51>button{position:relative!important;min-width:0!important;height:52px!important;margin:0!important;padding:4px 2px!important;border:0!important;border-radius:16px!important;background:transparent!important;color:#817584!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;overflow:hidden!important;pointer-events:auto!important;touch-action:manipulation!important} #bottomNav.main-dock-v51 .dock-pets{grid-column:1!important}#bottomNav.main-dock-v51 .dock-care{grid-column:2!important}#bottomNav.main-dock-v51 .dock-home{grid-column:3!important;width:68px!important;height:68px!important;justify-self:center!important;margin-top:-11px!important;border-radius:23px!important;background:linear-gradient(145deg,#ff79b0,#9878eb)!important;color:#fff!important;box-shadow:0 8px 20px rgba(165,76,150,.23),0 0 0 4px rgba(255,253,255,.98)!important;overflow:visible!important}#bottomNav.main-dock-v51 .dock-shop{grid-column:4!important}#bottomNav.main-dock-v51 .dock-settings{grid-column:5!important} #bottomNav.main-dock-v51>button>span{height:24px!important;font-size:20px!important;line-height:24px!important}#bottomNav.main-dock-v51 .dock-home>span{height:29px!important;font-size:27px!important;line-height:29px!important} #bottomNav.main-dock-v51>button>b{width:100%!important;font-size:9px!important;line-height:11px!important;font-weight:950!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}#bottomNav.main-dock-v51 .dock-home>b{color:#fff!important;font-size:9px!important} #bottomNav.main-dock-v51>button.active:not(.dock-home){background:#f3edf5!important;color:#655a69!important}#bottomNav.main-dock-v51 .nav-dot{position:absolute!important;top:7px!important;right:10px!important;width:6px!important;height:6px!important;border-radius:50%!important;background:#ff557e!important} #gameApp>.screen{bottom:calc(84px + var(--safe-bottom))!important} /* readability */ .page-title small{font-size:9px!important}.page-title h2{font-size:25px!important}.scene-chip{font-size:10px!important}.wish-bubble small{font-size:7px!important}.wish-bubble b{font-size:10px!important}.pet-dialogue small{font-size:7px!important}.pet-dialogue b{font-size:10px!important}.need b{font-size:12px!important}.need small{font-size:7px!important}.shop-product-copy small,.style-product small,.living-pet-card small,.personality-summary small{font-size:8px!important}.shop-product-copy p,.style-product p,.living-pet-card span,.personality-summary p{font-size:9px!important}.shop-product-copy h3,.style-product h3{font-size:14px!important}.pet-quick-btn b{font-size:11px!important}.pet-quick-btn small,.pet-place-btn small{font-size:9px!important} /* baby behaviors */ .pet-button.baby-wobble{animation:babyWobbleFall .75s cubic-bezier(.2,.8,.2,1)!important}.pet-button.baby-tantrum{animation:babyTantrum .28s ease-in-out 6 alternate!important}.pet-button.angry-corner{filter:saturate(.75)!important}.pet-button.angry-corner .eyes-open{opacity:0!important}.pet-button.angry-corner .eyes-annoyed{opacity:1!important}.pet-button.angry-corner .mouth-happy{opacity:0!important}.pet-button.angry-corner .mouth-annoyed{opacity:1!important} @keyframes babyWobbleFall{35%{transform:translateY(-5px) rotate(5deg)}65%{transform:translateY(8px) rotate(-8deg) scale(.95)}}@keyframes babyTantrum{to{transform:translateX(5px) translateY(3px) rotate(2deg)}} /* feather must receive direct drag input */ .feather-toy{pointer-events:auto!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;cursor:grab!important}.feather-toy:active{cursor:grabbing!important} @media(max-width:360px){#bottomNav.main-dock-v51{left:6px!important;right:6px!important;grid-template-columns:1fr 1fr 62px 1fr 1fr!important;gap:1px!important}#bottomNav.main-dock-v51>button>b{font-size:8px!important}#bottomNav.main-dock-v51>button>span{font-size:18px!important}#bottomNav.main-dock-v51 .dock-home{width:60px!important;height:60px!important;margin-top:-8px!important}} /* ========================================================== v5.1.1 — ROOM ICON HARD INPUT FIX ========================================================== */ .room-object-layer{ pointer-events:none!important; } .room-object-layer .room-hotspot{ pointer-events:auto!important; touch-action:manipulation!important; cursor:pointer!important; position:absolute!important; z-index:5!important; } .room-object-layer .room-hotspot>span{ pointer-events:none!important; user-select:none!important; -webkit-user-select:none!important; } .room-object-layer .room-hotspot:disabled{ pointer-events:none!important; } /* ========================================================== v5.2 — LIVING WORLD ========================================================== */ .world-life-layer{ position:absolute!important; inset:0!important; z-index:9!important; pointer-events:none!important; overflow:hidden!important; user-select:none!important; -webkit-user-select:none!important; } .npc-pet{ position:absolute; left:var(--npc-x,22%); top:var(--npc-y,55%); width:112px; height:132px; transform:translate(-50%,-50%); transform-origin:50% 90%; filter:drop-shadow(0 10px 9px rgba(55,39,60,.13)); } .npc-pet-svg{width:100%;height:100%} .npc-pet-svg svg{width:100%;height:100%;overflow:visible} .npc-tag{ position:absolute; left:50%;bottom:-9px; transform:translateX(-50%); min-width:82px;max-width:132px; padding:4px 7px; border-radius:10px; background:rgba(255,255,255,.88); box-shadow:0 4px 11px rgba(54,38,59,.09); text-align:center; white-space:nowrap; } .npc-tag b{display:block;font-size:8px;line-height:10px} .npc-tag small{display:block;font-size:5px;line-height:7px;color:#9a879b;font-weight:900;letter-spacing:.03em} .npc-pet.social-play{animation:npcFriendPlay .62s ease-in-out infinite alternate} .npc-pet.social-play .mouth-happy{opacity:1!important} .npc-pet.social-play .blush{opacity:.8!important} .npc-pet.social-clash{animation:npcClashAway 1.15s cubic-bezier(.2,.8,.2,1) both} .npc-pet.social-clash .eyes-open{opacity:0!important} .npc-pet.social-clash .eyes-annoyed{opacity:1!important} .npc-pet.social-clash .mouth-happy{opacity:0!important} .npc-pet.social-clash .mouth-annoyed{opacity:1!important} .npc-pet.social-cautious{animation:npcCautiousSniff 1.1s ease-in-out infinite alternate} .pet-button.social-play-main{animation:mainFriendPlay .58s ease-in-out infinite alternate!important} .pet-button.social-clash-main{animation:mainClashAway .9s ease-out both!important} .pet-button.social-cautious-main{animation:mainCautiousSniff 1s ease-in-out 3 alternate!important} @keyframes npcFriendPlay{to{transform:translate(-50%,-62%) rotate(4deg) scale(1.04)}} @keyframes mainFriendPlay{to{transform:translate(var(--pet-x,0),calc(var(--pet-y,0) - 13px)) rotate(-3deg) scale(1.02)}} @keyframes npcClashAway{35%{transform:translate(-50%,-50%) scale(1.04)}100%{transform:translate(calc(-50% + 38px),-50%) rotate(5deg) scale(.95)}} @keyframes mainClashAway{to{transform:translate(calc(var(--pet-x,0) - 42px),var(--pet-y,0)) rotate(-4deg) scale(.97)}} @keyframes npcCautiousSniff{to{transform:translate(-50%,-53%) rotate(-2deg)}} @keyframes mainCautiousSniff{to{transform:translate(calc(var(--pet-x,0) + 15px),var(--pet-y,0)) scale(1.01)}} /* wildlife always escapes; Mochi only chases/watches */ .wildlife-creature{ position:absolute; left:var(--wild-x,75%); top:var(--wild-y,34%); transform:translate(-50%,-50%); z-index:2; font-size:29px; filter:drop-shadow(0 4px 4px rgba(49,35,52,.12)); } .wildlife-creature.being-chased{animation:wildlifeEscape 5.8s cubic-bezier(.25,.1,.25,1) both} .wildlife-creature.being-watched{animation:wildlifeFlutter 1s ease-in-out infinite alternate} .pet-button.wildlife-chase{animation:mochiWildlifeChase .45s ease-in-out infinite alternate!important} .pet-button.wildlife-watch{animation:mochiWildlifeWatch 1.1s ease-in-out 3 alternate!important} @keyframes wildlifeEscape{ 0%{transform:translate(-50%,-50%) rotate(0)} 28%{transform:translate(calc(-50% - 52px),calc(-50% - 21px)) rotate(-12deg)} 58%{transform:translate(calc(-50% + 48px),calc(-50% - 48px)) rotate(10deg)} 100%{transform:translate(calc(-50% + 150px),calc(-50% - 95px)) rotate(18deg);opacity:.1} } @keyframes wildlifeFlutter{to{transform:translate(-50%,calc(-50% - 9px)) rotate(5deg)}} @keyframes mochiWildlifeChase{ to{transform:translate(calc(var(--pet-x,0) + 27px),calc(var(--pet-y,0) - 7px)) rotate(4deg) scale(1.015)} } @keyframes mochiWildlifeWatch{ to{transform:translate(calc(var(--pet-x,0) + 9px),var(--pet-y,0)) rotate(2deg)} } @media(max-width:360px){ .npc-pet{width:94px;height:112px} .npc-tag{min-width:72px;padding:3px 5px} .npc-tag b{font-size:7px}.npc-tag small{font-size:5px} .wildlife-creature{font-size:25px} } /* ========================================================== v5.3 — MALL / TEMPER / COMMUNICATION REFRESH ========================================================== */ .mall-shop-intro{background:linear-gradient(135deg,#fff7fb,#f4f0ff)!important;border:1px solid rgba(126,89,139,.10)!important} .shop-product{position:relative} .shop-buy{gap:5px!important} .shop-buy button{min-height:30px!important} .shop-buy .use-care-btn{background:#f0ebff!important;color:#6556a3!important;border:1px solid rgba(101,86,163,.12)!important} /* Mall feels busier without blocking the playable scene */ .home-stage[data-place="mall"] .room-hotspot{box-shadow:0 7px 18px rgba(83,54,96,.11),0 0 0 1px rgba(255,255,255,.42)!important} .home-stage[data-place="mall"] .room-hotspot:nth-child(odd){animation:mallIconFloat 2.8s ease-in-out infinite alternate} @keyframes mallIconFloat{to{margin-top:-3px}} .pet-button.sleep-refuse{animation:sleepRefusal .26s ease-in-out 5 alternate!important} @keyframes sleepRefusal{to{transform:translate(var(--pet-x,0),calc(var(--pet-y,0) - 7px)) rotate(3deg) scale(1.015)}} /* Strong temper is deliberately visible */ .pet-button[data-mood="stubborn"] .eyes-open{opacity:0!important} .pet-button[data-mood="stubborn"] .eyes-annoyed{opacity:1!important} .pet-button[data-mood="stubborn"] .mouth-happy{opacity:0!important} .pet-button[data-mood="stubborn"] .mouth-annoyed{opacity:1!important} .pet-button[data-mood="angry"]{filter:saturate(.9) contrast(1.02)!important} .pet-button[data-mood="angry"] .brow-down{opacity:1!important} /* slightly more readable thoughts because Mochi communicates more */ .thought-pop{max-width:178px!important;min-width:42px!important;padding:7px 10px!important;font-size:10px!important;line-height:1.2!important;font-weight:850!important;text-align:center!important} @media(max-width:360px){ .thought-pop{max-width:148px!important;font-size:9px!important;padding:6px 8px!important} .shop-product-copy p{font-size:10px!important;line-height:1.25!important} } /* ========================================================== v5.3.1 — DARK MODE ========================================================== */ html.dark-mode{ color-scheme:dark; background:#0f0d13; } html.dark-mode body{ background:#0f0d13!important; color:#f7f1f8!important; } html.dark-mode .app-shell{ --ink:#f8f2fa; --muted:#aaa0af; --surface:#1d1922; --surface2:#241f29; --border:rgba(255,255,255,.085); --shadow:0 24px 70px rgba(0,0,0,.40); background:linear-gradient(180deg,#1b1720,#121016)!important; border-color:rgba(255,255,255,.07)!important; } html.dark-mode .game{ background:linear-gradient(180deg,#1c1821,#131017)!important; } /* top chrome */ html.dark-mode .coin-pill, html.dark-mode .circle-btn{ background:rgba(38,32,43,.92)!important; border-color:rgba(255,255,255,.08)!important; box-shadow:0 7px 22px rgba(0,0,0,.18)!important; } html.dark-mode .identity-copy small{color:#aca1b1!important} /* world: keep the illustrated room visible, but integrate it */ html.dark-mode .home-stage{ border-color:rgba(255,255,255,.08)!important; background:#29202d!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 36px rgba(0,0,0,.22)!important; } html.dark-mode .home-stage:after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(180deg,rgba(17,14,24,.10),rgba(17,14,24,.20)); mix-blend-mode:multiply; } html.dark-mode .world-art{filter:saturate(.84) brightness(.82)!important} html.dark-mode .lighting-layer{z-index:5!important} html.dark-mode .weather-layer, html.dark-mode .ambient-layer{z-index:6!important} html.dark-mode .world-life-layer{z-index:9!important} html.dark-mode .room-object-layer{z-index:13!important} html.dark-mode .pet-zone{z-index:14!important} html.dark-mode .scene-top, html.dark-mode .wish-bubble, html.dark-mode .room-nav-dots, html.dark-mode .pet-dialogue{z-index:25!important} /* glass HUD */ html.dark-mode .scene-chip, html.dark-mode .wish-bubble, html.dark-mode .pet-dialogue, html.dark-mode .room-nav-dots{ background:rgba(29,25,34,.88)!important; border-color:rgba(255,255,255,.09)!important; color:#f6eff7!important; box-shadow:0 7px 22px rgba(0,0,0,.20)!important; } html.dark-mode .wish-bubble:after{border-top-color:rgba(29,25,34,.88)!important} html.dark-mode .pet-dialogue b{color:#f5eef7!important} html.dark-mode .mood-face{background:#332c26!important} html.dark-mode .room-hotspot{ background:rgba(34,29,39,.90)!important; border-color:rgba(255,255,255,.10)!important; box-shadow:0 6px 17px rgba(0,0,0,.22)!important; } html.dark-mode .room-nav-dots button{background:rgba(255,255,255,.22)!important} /* needs */ html.dark-mode .needs-dock{ background:#17141b!important; } html.dark-mode .need{ background:#242029!important; border-color:rgba(255,255,255,.07)!important; box-shadow:0 4px 13px rgba(0,0,0,.15)!important; } html.dark-mode .need small{color:#aaa0ae!important} html.dark-mode .need>i{background:#3a333f!important} html.dark-mode .need.charging{ background:linear-gradient(145deg,#28243b,#201d31)!important; outline-color:rgba(156,129,255,.25)!important; } /* global app cards / panels */ html.dark-mode .hero-card, html.dark-mode .feature-card, html.dark-mode .activity-card, html.dark-mode .relationship-pill, html.dark-mode .game-card, html.dark-mode .personality-summary, html.dark-mode .location-choice, html.dark-mode .shop-product, html.dark-mode .style-product, html.dark-mode .living-pet-card, html.dark-mode .settings-row, html.dark-mode .empty-card, html.dark-mode .form-field, html.dark-mode .progress-card, html.dark-mode .activity-instruction, html.dark-mode .pet-place-btn, html.dark-mode .pet-quick-btn, html.dark-mode .choice-card, html.dark-mode .milestone-card, html.dark-mode .passing-card, html.dark-mode .offline-card, html.dark-mode .memory-card, html.dark-mode .family-node{ background:#242029!important; color:#f6eff7!important; border-color:rgba(255,255,255,.075)!important; } html.dark-mode .feature-card.strawberry, html.dark-mode .feature-card.aqua, html.dark-mode .feature-card.lavender, html.dark-mode .feature-card.mint, html.dark-mode .feature-card.peach, html.dark-mode .feature-card.rose, html.dark-mode .activity-card.fetch, html.dark-mode .activity-card.feather, html.dark-mode .activity-card.bubbles, html.dark-mode .activity-card.tug, html.dark-mode .activity-card.hidegame{ background:linear-gradient(145deg,#29232f,#211d27)!important; } html.dark-mode .active-pet-summary, html.dark-mode .living-pet-card.active, html.dark-mode .location-choice.current, html.dark-mode .style-product.equipped{ background:linear-gradient(145deg,#302435,#29243b)!important; } html.dark-mode .shop-intro, html.dark-mode .style-hero{ background:linear-gradient(145deg,#2d2833,#222633)!important; } html.dark-mode .daily-shop-card{ background:linear-gradient(145deg,#4a3b20,#372d1d)!important; color:#fff4d3!important; } html.dark-mode .shop-product-art, html.dark-mode .style-preview{ background:#302a35!important; } /* text inside cards */ html.dark-mode .feature-card p, html.dark-mode .activity-card p, html.dark-mode .shop-product-copy p, html.dark-mode .style-product p, html.dark-mode .style-hero p, html.dark-mode .active-pet-summary p, html.dark-mode .personality-summary p, html.dark-mode .location-choice small, html.dark-mode .living-pet-card span, html.dark-mode .settings-row p, html.dark-mode .shop-intro p, html.dark-mode .activity-instruction span, html.dark-mode .progress-copy small{ color:#aca1b0!important; } html.dark-mode .tiny-tag, html.dark-mode .shop-effects span{ background:#37303c!important; color:#d9cedd!important; } /* tabs/buttons */ html.dark-mode .segmented, html.dark-mode .shop-categories{ background:#1d1922!important; } html.dark-mode .segmented button, html.dark-mode .shop-categories button{ color:#aaa0af!important; } html.dark-mode .segmented button.active, html.dark-mode .shop-categories button.active{ background:#332d38!important; color:#fff!important; box-shadow:0 4px 14px rgba(0,0,0,.22)!important; } html.dark-mode .secondary-btn, html.dark-mode .subpage-back, html.dark-mode .card-btn:not(.primary), html.dark-mode .style-product button{ background:#342e39!important; color:#f4edf6!important; border-color:rgba(255,255,255,.07)!important; } /* sheets / modals */ html.dark-mode .modal-backdrop, html.dark-mode .choice-overlay{ background:rgba(5,4,7,.62)!important; } html.dark-mode .sheet, html.dark-mode .settings-sheet, html.dark-mode .pet-menu-sheet, html.dark-mode .compact-sheet{ background:#1d1922!important; color:#f7f1f8!important; border-color:rgba(255,255,255,.07)!important; box-shadow:0 -18px 50px rgba(0,0,0,.40)!important; } html.dark-mode .close-btn{ background:#322c37!important; color:#f5eef6!important; } html.dark-mode .settings-data, html.dark-mode .danger-zone{ border-color:rgba(255,255,255,.08)!important; } html.dark-mode .switch{ background:#433a48!important; } html.dark-mode .switch.on{ background:linear-gradient(145deg,#ff73ae,#9b7cf5)!important; } /* activities */ html.dark-mode .activity-scene{ background:#151219!important; } html.dark-mode .activity-head, html.dark-mode .activity-footer{ background:#1d1922!important; border-color:rgba(255,255,255,.07)!important; } html.dark-mode .food-choice, html.dark-mode .command-btn, html.dark-mode .hide-spot, html.dark-mode .bath-soap-button{ background:rgba(36,31,42,.94)!important; color:#f6eff7!important; border-color:rgba(255,255,255,.09)!important; } html.dark-mode .seek-countdown{ background:rgba(31,27,36,.92)!important; color:#f6eff7!important; } /* social world */ html.dark-mode .npc-tag{ background:rgba(31,27,36,.91)!important; color:#f6eff7!important; } html.dark-mode .npc-tag small{color:#b2a7b5!important} /* bottom dock */ html.dark-mode #bottomNav.main-dock-v51{ background:rgba(29,25,34,.985)!important; border-color:rgba(255,255,255,.08)!important; box-shadow:0 12px 32px rgba(0,0,0,.32)!important; } html.dark-mode #bottomNav.main-dock-v51>button{ color:#aaa0ae!important; } html.dark-mode #bottomNav.main-dock-v51>button.active:not(.dock-home){ background:#342e39!important; color:#fff!important; } html.dark-mode #bottomNav.main-dock-v51 .dock-home{ box-shadow:0 8px 20px rgba(154,92,166,.28),0 0 0 4px rgba(29,25,34,.985)!important; } /* forms */ html.dark-mode input, html.dark-mode select, html.dark-mode textarea{ background:#2b2630!important; color:#f6eff7!important; border-color:rgba(255,255,255,.09)!important; } html.dark-mode input::placeholder, html.dark-mode textarea::placeholder{ color:#8e8491!important; } /* onboarding follows the chosen theme after reset */ html.dark-mode .onboarding{ background:linear-gradient(180deg,#17131b,#211824)!important; color:#f8f1f9!important; } html.dark-mode .onboarding-card{ background:rgba(35,29,40,.90)!important; border-color:rgba(255,255,255,.08)!important; box-shadow:0 24px 70px rgba(0,0,0,.36)!important; } /* desktop frame */ @media(min-width:650px){ html.dark-mode body{background:#0b090d!important} html.dark-mode .app-shell{ box-shadow:0 30px 100px rgba(0,0,0,.58)!important; } } /* ========================================================== v5.4 — PACING / CARE / LIVELINESS / GAMES ========================================================== */ .care-supplies-head{margin-top:14px!important} .care-items-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:12px} .care-item-card{min-height:66px;border:1px solid rgba(83,62,91,.09);border-radius:18px;background:#fff;padding:8px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:7px;text-align:left;box-shadow:0 5px 15px rgba(55,39,60,.05)} .care-item-card>span{font-size:25px}.care-item-card>div{min-width:0}.care-item-card b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.care-item-card small{display:block;font-size:7px;color:#8b7e8d;margin-top:2px} .care-item-card>i{min-width:30px;height:26px;padding:0 6px;border-radius:9px;display:grid;place-items:center;font-size:7px;font-style:normal;font-weight:1000;background:#f4edf7;color:#8b5d9a} .care-item-card.helpful>i{background:linear-gradient(145deg,#ff79b0,#9c7cf3);color:#fff}.care-item-card:disabled{opacity:.48} .pet-button.super-lively:not(.free-roam):not(.zoomies):not(.playing):not(.wander):not(.screen-sniff){animation:superLivelyIdle 1.35s ease-in-out infinite!important} .pet-button.super-lively .tail{animation:tailWag .25s ease-in-out infinite alternate!important} .pet-button.super-lively .paw-left{animation:walkPaw .42s ease-in-out infinite alternate}.pet-button.super-lively .paw-right{animation:walkPaw .42s .21s ease-in-out infinite alternate}.pet-button.super-lively .ears{animation:earsTwitch .62s ease-in-out infinite alternate} @keyframes superLivelyIdle{0%,100%{transform:translateY(0) rotate(-1deg)}26%{transform:translateY(-7px) rotate(1deg)}52%{transform:translateY(-2px) rotate(-.5deg)}78%{transform:translateY(-10px) rotate(1.2deg)}} .activity-body{touch-action:none!important;user-select:none!important;-webkit-user-select:none!important} .game-interaction-hint{position:absolute;z-index:31;left:50%;top:8px;transform:translateX(-50%);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.92);box-shadow:0 6px 17px rgba(52,38,56,.10);font-size:7px;font-weight:1000;letter-spacing:.08em;color:#6f6274;pointer-events:none;white-space:nowrap} .feather-toy{z-index:40!important;width:82px!important;height:82px!important;display:grid!important;place-items:center!important;left:calc(50% - 41px)!important;top:23%!important;border-radius:50%!important;background:radial-gradient(circle at 35% 28%,#fff,#fff8fc 58%,#ffddec)!important;border:3px solid rgba(255,118,174,.48)!important;box-shadow:0 0 0 8px rgba(255,255,255,.28),0 12px 30px rgba(83,49,78,.20)!important;filter:none!important;font-size:55px!important;cursor:grab!important;pointer-events:auto!important} .feather-toy:active{cursor:grabbing!important;transform:scale(.94)}.feather-hint{top:10px}.pounce-ring{z-index:42!important} .fetch-ball{width:76px!important;height:76px!important;left:calc(50% - 38px)!important;border-width:5px!important;z-index:35!important;cursor:grab!important}.fetch-ball:active{cursor:grabbing!important} .play-bubble{min-width:48px!important;min-height:48px!important;z-index:35!important;cursor:pointer!important} .tug-handle{width:70px!important;height:70px!important;font-size:34px!important;z-index:36!important;border:3px solid rgba(255,255,255,.88)!important} .hide-spot{width:96px!important;min-height:78px!important;z-index:34!important} html.dark-mode .care-item-card{background:#242029!important;color:#f6eff7!important;border-color:rgba(255,255,255,.075)!important} html.dark-mode .care-item-card small{color:#aaa0af!important}html.dark-mode .care-item-card>i{background:#37303d!important;color:#d8cedc!important}html.dark-mode .care-item-card.helpful>i{background:linear-gradient(145deg,#ff73ae,#9b7cf5)!important;color:#fff!important} html.dark-mode .game-interaction-hint{background:rgba(35,30,40,.90)!important;color:#eee5f1!important;border-color:rgba(255,255,255,.08)!important} html.dark-mode .feather-toy{background:radial-gradient(circle at 35% 28%,#403744,#302933 62%,#442a39)!important;border-color:rgba(255,122,177,.65)!important;box-shadow:0 0 0 8px rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.32)!important} @media(min-width:650px){ .feather-toy{width:94px!important;height:94px!important;left:calc(50% - 47px)!important;font-size:63px!important} .fetch-ball{width:84px!important;height:84px!important;left:calc(50% - 42px)!important} .play-bubble{min-width:54px!important;min-height:54px!important} .hide-spot{width:108px!important;min-height:84px!important} } /* ========================================================== v5.4.1 — CROSS-PLATFORM FEATHER SVG No emoji-font dependency. ========================================================== */ .mochi-feather-svg{ display:block; width:100%; height:100%; overflow:visible; pointer-events:none; } .feather-toy .mochi-feather-svg{ width:72px; height:72px; filter:drop-shadow(0 5px 5px rgba(89,54,89,.18)); } .room-hotspot .mochi-feather-svg{ width:30px!important; height:30px!important; } .feather-card-art .mochi-feather-svg{ width:42px!important; height:42px!important; margin:auto; } html.dark-mode .feather-toy .mochi-feather-svg{ filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); } @media(min-width:650px){ .feather-toy .mochi-feather-svg{ width:82px; height:82px; } } /* ========================================================== v5.5 — TRUE TWO-SIDED PLAY ========================================================== */ .tug-arena{position:absolute;inset:10% 0 4%;z-index:22;pointer-events:none}.tug-rope.physics-rope{position:absolute;left:0;right:0;bottom:7%;height:130px;pointer-events:none}.tug-rope.physics-rope .tug-handle{pointer-events:auto!important;cursor:grab!important;will-change:left,transform}.tug-rope.physics-rope .tug-handle:active{cursor:grabbing!important}.tug-rope.physics-rope .tug-line{right:auto!important;transform:none!important;transition:none!important;will-change:left,width}.tug-balance{position:absolute;left:12%;right:12%;top:4%;height:15px;border-radius:999px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);overflow:visible;box-shadow:0 5px 13px rgba(55,39,60,.08)}.tug-balance:after{content:"";position:absolute;left:50%;top:-3px;width:2px;height:19px;background:rgba(76,61,81,.25)}.tug-balance i{position:absolute;left:0;top:0;height:100%;width:50%;border-radius:999px;background:linear-gradient(90deg,#75d8bc,#ffd46d,#ff769e);transition:width .08s linear}.tug-balance b,.tug-balance span{position:absolute;top:20px;font-size:7px;font-weight:1000;letter-spacing:.07em;color:#756978}.tug-balance b{left:0}.tug-balance span{right:0}html.dark-mode .tug-balance{background:rgba(47,40,52,.88);border-color:rgba(255,255,255,.08)}html.dark-mode .tug-balance b,html.dark-mode .tug-balance span{color:#b5a9b8} .play-bubble{touch-action:none!important}.play-bubble.pet-target-bubble{outline:4px dashed rgba(255,104,160,.65);outline-offset:5px}.play-bubble.bubble-pop{animation:bubblePop .13s ease-out both!important;pointer-events:none!important}.gold-bubble{background:radial-gradient(circle at 35% 30%,#fff9c6,#ffd456 55%,#ffaf4d)!important;box-shadow:0 0 0 5px rgba(255,213,85,.18),inset 0 0 12px rgba(255,255,255,.88)!important}@keyframes bubblePop{to{transform:scale(1.45);opacity:0}} .seek-call-btn{position:absolute;right:12px;top:12px;z-index:38;min-height:42px;padding:0 12px;border:1px solid rgba(255,255,255,.8);border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 6px 16px rgba(53,39,57,.09);font-size:8px;font-weight:1000;color:#665b69}.seek-call-btn:disabled{opacity:.42}.hide-spot.real-clue{animation:seekRealClue .36s ease-in-out 2}.hide-spot.fake-clue{animation:seekFakeClue .22s ease-in-out 3}.seek-sound{position:absolute;right:-5px;top:-13px;padding:3px 6px;border-radius:999px;background:#fff;color:#8a5a94;font-size:8px;font-weight:1000;box-shadow:0 4px 10px rgba(54,38,59,.1)}.seek-pet.quick-peek{animation:seekQuickPeek .34s ease!important}@keyframes seekRealClue{50%{transform:translate(-50%,-50%) scale(1.09)}}@keyframes seekFakeClue{50%{transform:translate(-50%,-50%) rotate(4deg)}}@keyframes seekQuickPeek{0%{opacity:0;transform:translate(-50%,-30%) scale(.72)}60%{opacity:1;transform:translate(-50%,-58%) scale(1)}100%{opacity:0;transform:translate(-50%,-48%) scale(.9)}}html.dark-mode .seek-call-btn,html.dark-mode .seek-sound{background:rgba(38,32,43,.94)!important;color:#f4ecf6!important;border-color:rgba(255,255,255,.08)!important} .pounce-ring{box-shadow:0 0 0 7px rgba(255,95,151,.09),0 0 24px rgba(255,95,151,.23)!important} /* ========================================================== v5.5.2 — CROSS-PLATFORM CARE ICONS Avoid Windows/browser missing emoji glyph squares. ========================================================== */ .mochi-cuddle-svg, .mochi-care-svg{ display:block; width:100%; height:100%; color:currentColor; pointer-events:none; } .feature-icon.cuddle-icon, .feature-icon.health-icon{ width:42px!important; height:42px!important; display:grid!important; place-items:center!important; color:#9f6497!important; } .feature-icon.cuddle-icon .mochi-cuddle-svg{ width:38px!important; height:38px!important; } .feature-icon.health-icon{ color:#b76d70!important; } .feature-icon.health-icon .mochi-care-svg{ width:36px!important; height:36px!important; } .pet-menu-svg-icon{ width:30px!important; height:30px!important; display:grid!important; place-items:center!important; color:#9a67a0!important; } .pet-menu-svg-icon .mochi-cuddle-svg{ width:28px!important; height:28px!important; } html.dark-mode .feature-icon.cuddle-icon, html.dark-mode .pet-menu-svg-icon{ color:#e1a6da!important; } html.dark-mode .feature-icon.health-icon{ color:#e8a1a3!important; } /* ========================================================== v5.6 — DETAILED BATH + KITCHEN / DINING ========================================================== */ .room-safe-svg{display:block;width:30px;height:30px;color:#765f80;pointer-events:none} html.dark-mode .room-safe-svg{color:#d6c3dc} /* Bath */ .detailed-bath .activity-pet{z-index:10!important} .bath-water-layer{position:absolute;inset:0;pointer-events:none;z-index:13;overflow:hidden} .bath-water-drop{position:absolute;width:8px;height:13px;border-radius:60% 60% 70% 70%;background:linear-gradient(#dff7ff,#7fd4f1);opacity:.82;animation:bathDrop .78s ease-out forwards} @keyframes bathDrop{to{transform:translateY(36px) scale(.7);opacity:0}} .bath-tool{position:absolute;z-index:28;width:58px;height:42px;border-radius:14px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.92);box-shadow:0 7px 18px rgba(50,42,58,.11);display:grid;place-items:center;pointer-events:none;transform:rotate(-8deg)} .bath-tool b{font-size:8px;letter-spacing:.08em;color:#695e6d} .bath-tool.hidden{display:none!important} .bath-spray-tool:before{content:"";width:28px;height:8px;border:3px solid #72b9d5;border-radius:8px} .bath-sponge-tool{background:linear-gradient(145deg,#fff2a8,#ffd75e)} .bath-towel-tool{background:linear-gradient(145deg,#fff,#f2d9e9)} .bath-stage-button{position:absolute;right:14px;bottom:12%;z-index:29;min-width:122px;min-height:48px;padding:0 12px;border:0;border-radius:16px;background:linear-gradient(145deg,#ff79b0,#997bea);color:#fff;font-size:8px;font-weight:1000;letter-spacing:.06em;box-shadow:0 8px 20px rgba(116,71,132,.18)} .bath-stage-button.hidden{display:none!important} .bath-zone-panel{position:absolute;left:10px;top:10px;z-index:27;width:126px;display:grid;gap:5px} .bath-zone-chip{padding:5px 6px;border-radius:11px;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(50,38,54,.07);display:grid;grid-template-columns:1fr 28px;gap:2px 5px;align-items:center} .bath-zone-chip b{font-size:7px}.bath-zone-chip span{font-size:6px;text-align:right;color:#7d7180}.bath-zone-chip i{grid-column:1/3;height:4px;border-radius:999px;background:#eee5ef;overflow:hidden}.bath-zone-chip em{display:block;height:100%;background:linear-gradient(90deg,#7fd4f1,#a982ef);border-radius:999px}.bath-zone-chip.done{outline:2px solid rgba(101,201,162,.23)} .shake-drop{position:absolute;z-index:24;width:7px;height:11px;border-radius:50%;background:#8bd9f4;animation:shakeDrop .9s ease-out forwards} @keyframes shakeDrop{to{transform:translate(var(--dx,22px),-48px) rotate(20deg);opacity:0}} .activity-pet.towel-rub{animation:towelRub .16s ease-in-out alternate!important} .activity-pet.bath-fluffy{animation:fluffyPop .7s ease-in-out!important} @keyframes towelRub{to{transform:translateX(5px) rotate(2deg)}} @keyframes fluffyPop{50%{transform:scale(1.07) translateY(-6px)}} /* Meal / Dining */ .meal-step-title{position:absolute;left:12px;top:10px;z-index:32;display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(55,39,60,.08)} .meal-step-title>b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ff79b0,#9879eb);color:#fff;font-size:8px} .meal-step-title>span{font-size:8px;font-weight:1000;letter-spacing:.04em} .detailed-food-shelf{bottom:8px!important;grid-template-columns:repeat(3,1fr)!important;max-height:178px;overflow:auto;padding-right:2px} .bowl-choice-row{position:absolute;left:12px;right:12px;bottom:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:31} .bowl-choice{height:92px;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.84);display:grid;place-items:center;align-content:center;gap:6px} .bowl-choice i,.prep-dish,.meal-dish,.meal-bowl{display:grid;place-items:center;border-radius:50% 50% 42% 42%;border:5px solid rgba(255,255,255,.84);box-shadow:inset 0 -9px 16px rgba(82,64,94,.08),0 7px 16px rgba(55,39,60,.08)} .bowl-choice i{width:50px;height:27px}.bowl-choice.cozy i,.bowl-cozy{background:#ffd9e9}.bowl-choice.deep i,.bowl-deep{background:#cfeef4}.bowl-choice.plate i,.bowl-plate{background:#efe8d9} .bowl-choice b{font-size:8px} .selected-food-preview{position:absolute;left:50%;top:23%;transform:translateX(-50%);width:150px;padding:10px;border-radius:18px;background:rgba(255,255,255,.82);text-align:center;box-shadow:0 7px 18px rgba(55,39,60,.08)} .selected-food-preview span{font-size:34px}.selected-food-preview b{display:block;font-size:11px}.selected-food-preview small{font-size:7px;color:#8a7e8c} .prep-counter{position:absolute;left:12px;right:12px;bottom:15px;display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:end} .prep-dish{width:105px;height:58px;font-size:35px} .prep-actions{display:grid;gap:7px}.prep-actions button{height:43px;border:0;border-radius:14px;background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-shadow:0 5px 14px rgba(55,39,60,.06)}.prep-actions button b{font-size:9px}.prep-actions button small{font-size:7px;color:#8b7d8c}.prep-actions button.done{background:#dcf4e9}.prep-actions button:disabled:not(.done){opacity:.42} .serve-table{position:absolute;inset:12% 8% 6%;z-index:26}.serve-target{position:absolute;left:50%;top:20%;transform:translateX(-50%);width:150px;height:80px;border:3px dashed rgba(151,117,172,.35);border-radius:26px;display:grid;place-items:center;align-content:center}.serve-target b{font-size:11px}.serve-target small{font-size:7px;color:#8a7d8c}.meal-dish{position:absolute;left:20%;bottom:3%;width:86px;height:52px;border:0;font-size:32px;touch-action:none;z-index:31} .eating-station{position:absolute;left:10px;right:10px;bottom:10px;z-index:31;display:grid;justify-items:center;gap:7px}.meal-bowl{position:relative;width:100px;height:58px;font-size:34px;overflow:hidden}.meal-bowl>i{position:absolute;left:0;right:0;bottom:0;height:100%;background:rgba(255,255,255,.23);transition:height .25s ease}.offer-bite-btn,.water-after-btn,.meal-finish-btn{min-width:150px;height:42px;border:0;border-radius:14px;background:linear-gradient(145deg,#ff79b0,#9878eb);color:#fff;font-size:8px;font-weight:1000;letter-spacing:.05em}.water-after-btn{background:linear-gradient(145deg,#7bd6ea,#7e9fe8)}.water-after-btn.hidden{display:none}.bite-pips{display:flex;gap:5px}.bite-pips i{width:10px;height:10px;border-radius:50%;background:#eee4ef}.bite-pips i.eaten{background:#82d5ae;transform:scale(.86)}.meal-splat{position:absolute;left:42%;bottom:20%;font-size:60px;color:#e6a67d;opacity:.6;transform:scaleX(2.2)} .activity-pet.meal-chew .mouth-open{opacity:1!important}.activity-pet.meal-chew{animation:mealChew .22s ease-in-out 2 alternate!important} @keyframes mealChew{to{transform:translateY(3px) scale(.99)}} /* Dark mode */ html.dark-mode .bath-tool,html.dark-mode .bath-zone-chip,html.dark-mode .meal-step-title,html.dark-mode .bowl-choice,html.dark-mode .selected-food-preview,html.dark-mode .prep-actions button{background:rgba(36,31,42,.93)!important;color:#f6eff7!important;border-color:rgba(255,255,255,.08)!important} html.dark-mode .bath-tool b,html.dark-mode .bowl-choice b,html.dark-mode .meal-step-title>span{color:#f3ebf5!important} html.dark-mode .bath-zone-chip span,html.dark-mode .selected-food-preview small,html.dark-mode .prep-actions button small,html.dark-mode .serve-target small{color:#aaa0af!important} html.dark-mode .serve-target{border-color:rgba(205,176,224,.3)!important} html.dark-mode .bowl-choice i,html.dark-mode .prep-dish,html.dark-mode .meal-dish,html.dark-mode .meal-bowl{border-color:rgba(255,255,255,.14)!important} /* ========================================================== v5.7 — UNIVERSAL SVG ICONS + SCORE + HIGH-JUMP PLAY ========================================================== */ .room-safe-svg{ display:block!important;width:30px!important;height:30px!important; color:#6f5a79!important;pointer-events:none!important;overflow:visible!important } html.dark-mode .room-safe-svg{color:#d8c6de!important} .room-hotspot .room-safe-svg{width:29px!important;height:29px!important} /* Game score is always visible and does not depend on an emoji glyph. */ .game-score-hud{ position:absolute;right:12px;top:10px;z-index:45; min-width:68px;height:48px;padding:5px 10px; border-radius:15px;background:rgba(255,255,255,.91); border:1px solid rgba(255,255,255,.94); box-shadow:0 7px 18px rgba(50,38,55,.10); display:flex;flex-direction:column;align-items:center;justify-content:center; pointer-events:none } .game-score-hud small{font-size:6px;font-weight:1000;letter-spacing:.11em;color:#8b7c8e} .game-score-hud b{font-size:17px;line-height:18px;color:#443849} html.dark-mode .game-score-hud{background:rgba(35,30,40,.94)!important;border-color:rgba(255,255,255,.08)!important} html.dark-mode .game-score-hud small{color:#b1a5b4!important}html.dark-mode .game-score-hud b{color:#fff!important} /* Feather chase: Mochi visibly leaps high, not just horizontally. */ .activity-pet.feather-high-jump{ filter:drop-shadow(0 24px 14px rgba(66,42,73,.12)); } .feather-high-jump .paw-left,.feather-high-jump .paw-right{ transform:translateY(-8px) rotate(12deg)!important } .feather-high-jump .ears{animation:earsTwitch .18s ease-in-out 2 alternate!important} /* Fetch mouth ball is SVG, not an emoji glyph. */ .fetch-mouth-svg{display:block;width:42px;height:42px;color:#e96d83;pointer-events:none} .fetch-mouth{font-size:0!important} /* Tug graphics are pure CSS — no rope/fist emoji required. */ .tug-knot.pet-end{ width:45px!important;height:45px!important;border-radius:50%!important; background:repeating-linear-gradient(45deg,#bd8b57 0 6px,#8c6543 6px 11px)!important; border:4px solid rgba(91,64,46,.55)!important; box-shadow:inset 0 0 0 5px rgba(255,255,255,.14)!important } .tug-handle{ background:linear-gradient(145deg,#ffe7bd,#d99b72)!important; border:4px solid rgba(99,67,57,.22)!important; display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important } .tug-handle>i{display:block;width:35px;height:5px;border-radius:999px;background:rgba(98,64,55,.55)} html.dark-mode .tug-handle{background:linear-gradient(145deg,#b88467,#77584b)!important} /* Hide & Seek targets are all inline SVG pictograms. */ .game-spot-svg{display:block;width:34px;height:34px;color:#755e80;pointer-events:none;margin:auto} html.dark-mode .game-spot-svg{color:#dac7df} /* Safe Play-card art */ .safe-play-art{position:relative!important;display:grid!important;place-items:center!important} .safe-ball-art>i{width:36px;height:36px;border:4px solid currentColor;border-radius:50%;position:relative} .safe-ball-art>i:before,.safe-ball-art>i:after{content:"";position:absolute;inset:8px -2px;border-top:3px solid currentColor;border-radius:50%;transform:rotate(35deg)} .safe-ball-art>i:after{transform:rotate(-35deg)} .safe-bubbles-art{position:relative} .safe-bubbles-art>i{position:absolute;border:3px solid currentColor;border-radius:50%} .safe-bubbles-art>i:nth-child(1){width:26px;height:26px;left:7px;top:14px} .safe-bubbles-art>i:nth-child(2){width:19px;height:19px;right:7px;top:7px} .safe-bubbles-art>i:nth-child(3){width:14px;height:14px;right:11px;bottom:7px} .safe-rope-art>i{width:43px;height:24px;border-top:5px solid currentColor;border-bottom:5px solid currentColor;border-radius:50%;transform:rotate(-12deg)} .safe-hide-art>i{width:35px;height:35px;border:4px solid currentColor;border-radius:50%;position:relative} .safe-hide-art>i:after{content:"";position:absolute;width:17px;height:4px;background:currentColor;right:-12px;bottom:-6px;transform:rotate(45deg);border-radius:4px} /* Bigger vertical jump allowance in play space. */ .activity-body .activity-pet{will-change:transform} @media(min-width:650px){ .game-score-hud{right:16px;top:12px;min-width:76px;height:52px} .room-hotspot .room-safe-svg{width:32px!important;height:32px!important} }