/* Moonpip — styles */
:root {
  --bg: #FBF4EA; --card: #FFFFFF; --ink: #2E2448; --ink2: #6F6688; --line: #F0E7DB; --edge: #E7DACA;
  --violet: #7B5CFF; --violet-d: #5A3FE0; --t-violet: #EFEAFF;
  --c-hunger: #FF8A4C; --t-hunger: #FFF0E6;
  --c-happy: #F5A90F; --t-happy: #FFF5D9;
  --c-energy: #5F86FF; --t-energy: #EAF0FF;
  --c-hygiene: #1FB5CC; --t-hygiene: #E2F7FA;
  --c-health: #FF5C86; --t-health: #FFE8EF;
  --c-clean: #35B06A; --t-clean: #E6F7EC;
  --shadow: 0 3px 0 var(--edge), 0 8px 18px rgba(80, 56, 30, .06);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; }
body { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
svg { display: block; }

.app { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 520px; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px 6px; min-height: 60px; flex: none; }
.who { flex: 1; min-width: 0; }
.pet-name { font-size: 23px; font-weight: 900; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-sub { font-size: 13px; font-weight: 700; color: var(--ink2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--card); display: grid; place-items: center; box-shadow: var(--shadow);
  transition: transform .1s ease, box-shadow .1s ease; color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.icon-btn.small { width: 40px; height: 40px; border-radius: 12px; }
.icon-btn.tinted { width: 50px; height: 50px; background: var(--t-violet); color: var(--violet); box-shadow: none; }

/* ---------- meters ---------- */
.meters { flex: none; margin: 4px 12px 0; background: var(--card); border-radius: 20px; padding: 10px 10px 12px; display: grid;
  grid-template-columns: repeat(5, 1fr); gap: 8px; box-shadow: var(--shadow); }
.meter { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.meter-ic { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; }
.meter-ic svg { width: 19px; height: 19px; }
.meter-track { width: 100%; height: 8px; border-radius: 99px; background: #F3ECE2; overflow: hidden; display: block; }
.meter-fill { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .6s ease, background-color .3s; }
.m-hunger .meter-ic { background: var(--t-hunger); color: var(--c-hunger); } .m-hunger .meter-fill { background: var(--c-hunger); }
.m-happy .meter-ic { background: var(--t-happy); color: var(--c-happy); } .m-happy .meter-fill { background: var(--c-happy); }
.m-energy .meter-ic { background: var(--t-energy); color: var(--c-energy); } .m-energy .meter-fill { background: var(--c-energy); }
.m-hygiene .meter-ic { background: var(--t-hygiene); color: var(--c-hygiene); } .m-hygiene .meter-fill { background: var(--c-hygiene); }
.m-health .meter-ic { background: var(--t-health); color: var(--c-health); } .m-health .meter-fill { background: var(--c-health); }
.meter.low .meter-ic { background: #FFE3E0; color: #F04A4A; animation: lowpulse 1.3s ease-in-out infinite; }
.meter.low .meter-fill { background: #F04A4A; }
.meters-off .meter-ic { background: #F4EFE8; color: #CDC3B6; }
@keyframes lowpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- scene ---------- */
.scene { position: relative; flex: 1 1 auto; min-height: 240px; margin: 10px 12px; border-radius: 28px; overflow: hidden; isolation: isolate;
  box-shadow: 0 3px 0 var(--edge), 0 10px 24px rgba(60, 40, 90, .10);
  --sky1: #8ED0FF; --sky2: #DDF3FF; --hill1: #A9E092; --hill2: #7FCB78; --hill3: #67B864; --pet: 190px; }
.scene.phase-dawn { --sky1: #FFAFA0; --sky2: #FFE7C6; --hill1: #BFDC92; --hill2: #94C57D; --hill3: #7CB16A; }
.scene.phase-dusk { --sky1: #6F5CD2; --sky2: #FFB0A0; --hill1: #86A884; --hill2: #658F70; --hill3: #557D60; }
.scene.phase-night { --sky1: #121846; --sky2: #3B2F7C; --hill1: #304F68; --hill2: #233C53; --hill3: #1B3045; }
.scene.dark { --sky1: #0A0920; --sky2: #191536; --hill1: #17162F; --hill2: #111027; --hill3: #0D0C20; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky1), var(--sky2)); transition: background .8s; }
.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.phase-night .stars, .dark .stars { opacity: 1; }
.stars i, .mem-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF6D8; transform: scale(var(--z, 1));
  animation: twinkle 3.2s ease-in-out var(--d, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sun { position: absolute; top: 9%; right: 11%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #FFF5BE, #FFC83A 70%); box-shadow: 0 0 0 10px rgba(255, 214, 90, .25), 0 0 0 22px rgba(255, 214, 90, .12);
  transition: opacity .8s, transform .8s; }
.phase-dawn .sun { transform: translateY(40%); background: radial-gradient(circle at 40% 38%, #FFE9B0, #FF9F5A 70%); }
.phase-dusk .sun { transform: translateY(70%); background: radial-gradient(circle at 40% 38%, #FFD9A0, #FF7F6B 70%); box-shadow: 0 0 0 10px rgba(255, 140, 110, .25); }
.phase-night .sun, .dark .sun { opacity: 0; }
.moon { position: absolute; top: 9%; right: 16%; width: 44px; height: 44px; border-radius: 50%; box-shadow: 11px 6px 0 0 #FFF0B5; opacity: 0; transition: opacity .8s; }
.phase-night .moon, .dark .moon { opacity: 1; }
.cloud { position: absolute; height: 22px; width: 64px; background: #fff; border-radius: 99px; animation: drift 70s linear infinite; transition: opacity .8s; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 30px; height: 30px; left: 10px; top: -15px; }
.cloud::after { width: 22px; height: 22px; left: 32px; top: -9px; }
.cloud-a { top: 16%; animation-delay: -20s; }
.cloud-b { top: 30%; transform: scale(.75); animation-duration: 95s; animation-delay: -70s; }
.phase-dusk .cloud { background: #FFD9D0; } .phase-dusk .cloud::before, .phase-dusk .cloud::after { background: #FFD9D0; }
.phase-night .cloud, .dark .cloud { opacity: 0; }
@keyframes drift { from { left: -90px; } to { left: 105%; } }
.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 32%; }
.hill-back { fill: var(--hill1); transition: fill .8s; }
.hill-front { fill: var(--hill2); transition: fill .8s; }
.tufts { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s; }
.dark .tufts { opacity: .25; } .phase-night .tufts { opacity: .6; }
.tuft { position: absolute; width: 18px; height: 14px; }
.tuft::before, .tuft::after { content: ''; position: absolute; bottom: 0; width: 6px; height: 14px; border-radius: 6px 6px 0 0; background: var(--hill3); transform-origin: 50% 100%; }
.tuft::before { left: 3px; transform: rotate(-18deg); } .tuft::after { left: 9px; transform: rotate(16deg); height: 11px; }
.t1 { left: 8%; bottom: 17%; } .t2 { left: 84%; bottom: 19%; } .t3 { left: 30%; bottom: 5%; }
.flower { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #FFD84A;
  box-shadow: 0 -6px 0 -1px #fff, 0 6px 0 -1px #fff, -6px 0 0 -1px #fff, 6px 0 0 -1px #fff; }
.f1 { left: 16%; bottom: 9%; } .f2 { left: 76%; bottom: 6%; }

/* ---------- pet ---------- */
.pet-wrap { position: absolute; bottom: 11%; left: 50%; width: var(--pet); height: var(--pet); transform: translateX(-50%); z-index: 3;
  transition: left 1.5s cubic-bezier(.45, .05, .35, 1), filter .8s; }
.dark .pet-wrap { filter: brightness(.62) saturate(.8); }
.pet-shadow { position: absolute; bottom: -1%; left: 24%; right: 24%; height: 8%; background: rgba(30, 20, 60, .16); border-radius: 50%; }
.pet-hop, .pet-bob, .pet { position: absolute; inset: 0; transform-origin: 50% 100%; }
.pet { cursor: pointer; outline: none; border-radius: 30%; }
.pet svg { width: 100%; height: 100%; overflow: visible; transform: scaleX(var(--face, 1)); transition: transform .25s ease; }
.pet-bob { animation: breathe 2.8s ease-in-out infinite; }
[data-mood="happy"] .pet-bob { animation: bounce 1.5s ease-in-out infinite; }
[data-mood="sleep"] .pet-bob { animation: breathe-slow 4s ease-in-out infinite; }
[data-mood="sad"] .pet-bob, [data-mood="sleepy"] .pet-bob, [data-mood="hungry"] .pet-bob { animation: breathe 3.8s ease-in-out infinite; }
[data-mood="sick"] .pet-bob { animation: sway 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .972); } }
@keyframes breathe-slow { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .955); } }
@keyframes bounce { 0%, 100% { transform: translateY(0) scale(1.02, .98); } 45% { transform: translateY(-6px) scale(.985, 1.02); } 70% { transform: translateY(0) scale(1.03, .97); } }
@keyframes sway { 0%, 100% { transform: rotate(-2deg) scale(1, .98); } 50% { transform: rotate(2deg) scale(1, 1); } }
.pet-bob.squish { animation: squish .42s ease-out; }
.pet-bob.shake { animation: shake .5s ease-in-out; }
.pet-bob.wiggle { animation: wiggle .3s ease-in-out 4; }
.pet-bob.wobble { animation: wobble .5s ease-in-out; }
.pet-bob.pop-in { animation: popin .7s cubic-bezier(.3, 1.6, .5, 1); }
.pet-bob.snore { animation: snore .7s ease-in-out; }
.pet-bob.nudge { animation: nudge .6s ease-in-out; }
.pet-hop.hop { animation: hop .6s ease-out; }
.pet-hop.walking { animation: walk .375s ease-in-out 4; }
@keyframes squish { 0% { transform: scale(1, 1); } 30% { transform: scale(1.14, .84); } 60% { transform: scale(.94, 1.08); } 100% { transform: scale(1, 1); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-5deg) scale(1.03, .97); } 75% { transform: rotate(5deg) scale(1.03, .97); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } 85% { transform: rotate(3deg); } }
@keyframes popin { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes snore { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06, .94); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px) scale(.98, 1.03); } 60% { transform: translateY(0) scale(1.03, .97); } }
@keyframes hop { 0% { transform: translateY(0); } 35% { transform: translateY(-26px); } 65% { transform: translateY(0); } 80% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes walk { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-7px) rotate(-3deg); } 75% { transform: translateY(-7px) rotate(3deg); } }

/* face states */
#pet [data-e], #pet [data-m], #pet [data-x] { display: none; }
#pet[data-eyes="open"] [data-e="open"], #pet[data-eyes="happy"] [data-e="happy"], #pet[data-eyes="closed"] [data-e="closed"],
#pet[data-eyes="squint"] [data-e="squint"], #pet[data-eyes="sleepy"] [data-e="sleepy"],
#pet[data-mouth="smile"] [data-m="smile"], #pet[data-mouth="grin"] [data-m="grin"], #pet[data-mouth="o"] [data-m="o"],
#pet[data-mouth="frown"] [data-m="frown"], #pet[data-mouth="wavy"] [data-m="wavy"], #pet[data-mouth="chomp"] [data-m="chomp"],
#pet[data-mouth="sleep"] [data-m="sleep"], #pet[data-brows="1"] [data-x="brows"], #pet[data-sick="1"] [data-x="sick"],
#pet[data-dirty="1"] [data-x="dirty"] { display: inline; }
.pet .eyes-open { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .07s ease; }
.pet.blink .eyes-open { transform: scaleY(.1); }
.pet .chomp { transform-box: fill-box; transform-origin: 50% 0; animation: chomp .24s ease-in-out infinite; }
@keyframes chomp { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.3); } }
.pet .ant-star { transform-box: fill-box; transform-origin: 50% 50%; animation: antglow 2.6s ease-in-out infinite; }
@keyframes antglow { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(8deg); } }
.pet .arm { transform-box: fill-box; }
.pet .arm-r { transform-origin: 15% 85%; } .pet .arm-l { transform-origin: 85% 85%; }
.pet.wave .arm-r { animation: waveR .4s ease-in-out 4; }
@keyframes waveR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
.pet .aura { transform-box: fill-box; transform-origin: 50% 50%; animation: aura 3s ease-in-out infinite; }
@keyframes aura { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.pet .tw { animation: twinkle 2.2s ease-in-out infinite; } .pet .tw2 { animation-delay: .7s; } .pet .tw3 { animation-delay: 1.4s; }
.pet [data-crack] { opacity: 0; transition: opacity .2s; } .pet [data-crack].on { opacity: 1; }
.pet-wrap.evolving .pet { animation: evo 1.2s ease-in-out; }
@keyframes evo { 0% { filter: brightness(1); transform: scale(1); } 25% { filter: brightness(1.8); transform: scale(1.1); } 50% { filter: brightness(2.6); transform: scale(.9); }
  75% { filter: brightness(3.2); transform: scale(1.12); } 100% { filter: brightness(1); transform: scale(1); } }
.pet-wrap.hatching .pet { animation: hatchflash .65s ease-in forwards; }
@keyframes hatchflash { 0% { filter: brightness(1); transform: scale(1); } 60% { filter: brightness(2.6); transform: scale(1.15); } 100% { filter: brightness(3); transform: scale(0); } }
.pet-wrap.departing { animation: depart 2.6s ease-in forwards; transition: none; }
@keyframes depart { 0% { transform: translateX(-50%) translateY(0) scale(1); filter: brightness(1); opacity: 1; }
  25% { transform: translateX(-50%) translateY(4%) scale(1.05, .92); }
  45% { transform: translateX(-50%) translateY(-30%) scale(.8); filter: brightness(1.8); }
  100% { transform: translateX(-50%) translateY(-190%) scale(.1); filter: brightness(3); opacity: 0; } }

/* ---------- poops, props, particles ---------- */
.poops { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.poop { position: absolute; width: 44px; height: 44px; transform: translateX(-50%); pointer-events: auto; animation: poopin .45s cubic-bezier(.3, 1.6, .5, 1); transition: filter .8s; }
.poop > svg { width: 100%; height: 100%; }
.dark .poop { filter: brightness(.55); }
.stink { position: absolute; left: 10px; top: -18px; width: 24px; height: 20px; animation: stink 2.2s ease-in-out infinite; }
.stink svg { width: 100%; height: 100%; }
.poop.swept { animation: swept .45s ease-in forwards; pointer-events: none; }
@keyframes poopin { 0% { transform: translateX(-50%) scale(0); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes swept { to { transform: translateX(-50%) scale(0) rotate(90deg); opacity: 0; } }
@keyframes stink { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-5px); opacity: .5; } }
.props { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.prop { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.prop svg { width: 100%; height: 100%; transition: transform .15s ease, opacity .15s; }
.food-drop { animation: fooddrop .45s cubic-bezier(.3, 1.35, .6, 1) both; }
.food-drop.pill { width: 46px; height: 46px; margin: -23px 0 0 -23px; animation: pilldrop 1s ease both; }
.prop.bite1 svg { transform: scale(.78); } .prop.bite2 svg { transform: scale(.52); } .prop.bite3 svg { transform: scale(.2); opacity: 0; }
@keyframes fooddrop { 0% { transform: translateY(-150px) scale(.7) rotate(-20deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; } }
@keyframes pilldrop { 0% { transform: translateY(-150px) rotate(-40deg); opacity: 0; } 40% { transform: translateY(0) rotate(0); opacity: 1; } 55% { transform: scale(.4); opacity: 1; } 60%, 100% { transform: scale(0); opacity: 0; } }
.rain-cloud { width: 120px; height: 60px; margin: -30px 0 0 -60px; animation: cloudin 2s ease both; }
@keyframes cloudin { 0% { transform: translateY(-50px) scale(.6); opacity: 0; } 15% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateX(-6px); } 80% { transform: translateX(6px); opacity: 1; } 100% { transform: translateY(-40px) scale(.8); opacity: 0; } }
.broom-sweep { width: 72px; height: 72px; margin: -46px 0 0 -36px; animation: sweep 1.15s ease-in-out forwards; }
@keyframes sweep { 0% { transform: translateX(-40px) rotate(-10deg); } 25% { transform: translateX(calc(var(--w) * .25)) rotate(12deg); } 50% { transform: translateX(calc(var(--w) * .5)) rotate(-10deg); }
  75% { transform: translateX(calc(var(--w) * .75)) rotate(12deg); } 100% { transform: translateX(calc(var(--w) + 40px)) rotate(-10deg); } }
.fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.p { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; will-change: transform, opacity; }
.p svg { width: 100%; height: 100%; }
.p-float { animation: pfloat 1.4s ease-out both; }
.p-pop { animation: ppop .8s cubic-bezier(.2, .7, .3, 1) both; }
.p-fall { animation: pfall .7s ease-in both; }
.p-z { width: auto; height: auto; margin: 0; font-size: 24px; font-weight: 900; color: #D9CFFF; line-height: 1; }
@keyframes pfloat { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 15% { transform: translate(calc(var(--dx) * .15), calc(var(--dy) * .15)) scale(var(--s)); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--r)); opacity: 0; } }
@keyframes ppop { 0% { transform: translate(0, 0) scale(.2); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--r)); opacity: 0; } }
@keyframes pfall { 0% { transform: translate(0, 0) scale(var(--s)); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--r)); opacity: 0; } }

/* ---------- speech bubble ---------- */
.bubble { position: absolute; left: 0; bottom: 60%; z-index: 6; max-width: min(260px, 74%); width: max-content; background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1.3; padding: 9px 14px; border-radius: 16px; pointer-events: none; text-align: center;
  box-shadow: 0 3px 0 rgba(46, 36, 72, .10), 0 8px 18px rgba(46, 36, 72, .14); opacity: 0; visibility: hidden;
  transform: translateY(6px) scale(.7); transform-origin: var(--tail, 50%) 100%;
  transition: opacity .16s ease, transform .2s cubic-bezier(.3, 1.5, .5, 1), visibility 0s .2s, left 1.5s cubic-bezier(.45, .05, .35, 1), bottom .3s; }
.bubble.show { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .22s cubic-bezier(.3, 1.5, .5, 1), left 1.5s cubic-bezier(.45, .05, .35, 1), bottom .3s; }
.bubble::after { content: ''; position: absolute; bottom: -6px; left: var(--tail, 50%); width: 14px; height: 14px; background: #fff; border-radius: 3px; transform: translateX(-50%) rotate(45deg); }
.bubble span { position: relative; z-index: 1; }

/* ---------- dock ---------- */
.dock { flex: none; padding: 0 12px 12px; min-height: 172px; }
.panel-in { animation: panelin .28s ease both; }
@keyframes panelin { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.act { position: relative; height: 76px; border-radius: 20px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; box-shadow: var(--shadow); transition: transform .1s ease, box-shadow .1s ease; }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.act-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; transition: background .2s, color .2s; }
.act-ic svg { width: 22px; height: 22px; }
.act-label { font-size: 14px; font-weight: 800; transition: color .2s; }
.ic-feed { background: var(--t-hunger); color: var(--c-hunger); }
.ic-play { background: var(--t-happy); color: var(--c-happy); }
.ic-clean { background: var(--t-clean); color: var(--c-clean); }
.ic-bath { background: var(--t-hygiene); color: var(--c-hygiene); }
.ic-sleep { background: var(--t-violet); color: var(--violet); }
.ic-heal { background: var(--t-health); color: var(--c-health); }
.act.muted .act-ic { background: #F3EFE9; color: #BDB4C9; } .act.muted .act-label { color: #B3AAC0; }
.badge { position: absolute; top: 9px; right: 11px; width: 11px; height: 11px; border-radius: 50%; background: #FF5C5C; box-shadow: 0 0 0 3px #fff; display: none; }
.act.needs .badge { display: block; animation: badge 1.4s ease-in-out infinite; }
@keyframes badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.dock.locked { pointer-events: none; }
.dock.locked .act-ic { background: #F3EFE9; color: #BDB4C9; } .dock.locked .act-label { color: #B3AAC0; }

.panel-head { display: flex; align-items: center; gap: 12px; height: 44px; }
.panel-head h2 { margin: 0; font-size: 18px; font-weight: 900; }
.feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.food-card { height: 108px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; transition: transform .1s ease, box-shadow .1s ease; }
.food-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.food-art { width: 50px; height: 50px; } .food-art svg { width: 100%; height: 100%; }
.food-txt { display: flex; flex-direction: column; align-items: center; }
.food-title { font-size: 15px; font-weight: 900; } .food-desc { font-size: 12px; font-weight: 700; color: var(--ink2); margin-top: 1px; }

.egg-card, .name-card { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 16px 18px; }
.egg-card { text-align: center; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.brand { margin: 0 0 6px; font-size: 30px; font-weight: 900; letter-spacing: -.02em; color: var(--violet); }
.egg-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--ink2); max-width: 300px; }
.egg-dots { display: flex; gap: 8px; }
.egg-dots i { width: 10px; height: 10px; border-radius: 50%; background: #EDE6DC; transition: background .2s, transform .2s; }
.egg-dots i.on { background: var(--violet); transform: scale(1.15); }
.name-label { display: block; font-size: 16px; font-weight: 900; margin-bottom: 10px; }
.name-row { display: flex; gap: 8px; }
.name-row input { flex: 1; min-width: 0; height: 50px; border-radius: 14px; border: 2px solid #EDE4D8; background: #FFFCF8; padding: 0 14px;
  font: inherit; font-size: 18px; font-weight: 800; color: var(--ink); -webkit-user-select: text; user-select: text; outline: none; }
.name-row input:focus { border-color: var(--violet); background: #fff; }
.name-row input::placeholder { color: #C4BAD3; }
.primary-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 10px; border-radius: 16px; background: var(--violet);
  color: #fff; font-size: 17px; font-weight: 900; box-shadow: 0 4px 0 var(--violet-d); transition: transform .1s ease, box-shadow .1s ease; }
.primary-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--violet-d); }
.primary-btn:disabled { background: #CFC8DF; box-shadow: 0 4px 0 #B5ADC8; cursor: default; }
.secondary-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin-top: 10px; border-radius: 16px; background: #F3EEE6;
  color: var(--ink); font-size: 16px; font-weight: 900; }
.secondary-btn:active { background: #EAE3D8; }

/* ---------- pages ---------- */
.page { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  transform: translateY(100%); visibility: hidden; transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s .34s; }
.page.open { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.2, .8, .2, 1); }
.page > * { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.page-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 60px; flex: none; }
.page-head h2 { flex: 1; margin: 0; text-align: center; font-size: 18px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-spacer { width: 44px; flex: none; }
.page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.card { background: var(--card); border-radius: 20px; padding: 14px 16px; margin-top: 12px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; color: var(--ink2); }
.hero-card { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.portrait { width: 96px; height: 96px; flex: none; border-radius: 26px; background: linear-gradient(180deg, #DDF0FF, #F3EDFF); padding: 6px; }
.portrait svg { width: 100%; height: 100%; overflow: visible; }
.portrait.big { width: 150px; height: 150px; border-radius: 40px; padding: 10px; margin: 12px auto 0; }
.hero-txt { min-width: 0; }
.hero-name { font-size: 23px; font-weight: 900; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 99px; background: var(--t-violet); color: var(--violet); font-size: 13px; font-weight: 900; }
.chip-pink { background: #FFE8EF; color: #E5486A; }
.hero-blurb { margin: 8px 0 0; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--ink2); }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tile { background: var(--card); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.tile-k { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 900; color: var(--ink2); }
.tile-v { display: block; margin-top: 4px; font-size: 20px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stars-v { display: flex; gap: 2px; height: 26px; align-items: center; }
.cs { width: 21px; height: 21px; } .cs svg { width: 100%; height: 100%; }
.cs:not(.on) svg path { fill: #EEE7DD; stroke: #DCD2C4; }
.need-row { display: grid; grid-template-columns: 32px 62px 1fr 34px; align-items: center; gap: 10px; margin: 9px 0; }
.need-name { font-size: 15px; font-weight: 800; }
.need-val { text-align: right; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.need-row .meter-track { height: 10px; }
.muted { color: var(--ink2); } .small { font-size: 14px; font-weight: 700; line-height: 1.4; margin: 6px 0 2px; }
.count-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.count { background: #FAF6F0; border-radius: 14px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.count dt { font-size: 14px; font-weight: 800; color: var(--ink2); } .count dd { margin: 0; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.album { list-style: none; margin: 0; padding: 0; }
.album li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.album li:first-child { border-top: 0; }
.album-pic { width: 50px; height: 50px; flex: none; border-radius: 14px; background: #F2EDFF; padding: 3px; }
.album-pic svg { width: 100%; height: 100%; }
.album-txt b { display: block; font-size: 16px; font-weight: 900; } .album-txt small { display: block; font-size: 13px; font-weight: 700; color: var(--ink2); margin-top: 2px; }
.album-empty { font-size: 14px; font-weight: 700; color: var(--ink2); line-height: 1.4; }
.setting { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 16px; font-weight: 800; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.switch { position: relative; width: 52px; height: 32px; border-radius: 99px; background: #E4DCD0; transition: background .2s; flex: none; }
.switch i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(40, 30, 60, .2); transition: transform .2s; }
.switch.on { background: #4CC38A; } .switch.on i { transform: translateX(20px); }
.ghost-danger { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 16px; border-radius: 16px; background: var(--card);
  color: #E0405F; font-size: 16px; font-weight: 900; box-shadow: var(--shadow); }
.ghost-danger:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.foot { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink2); margin: 18px 0 0; line-height: 1.6; }
.center-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.center-body > button { max-width: 380px; }
.confirm-title { margin: 18px 0 8px; font-size: 25px; font-weight: 900; line-height: 1.2; }
.confirm-text { margin: 0 0 22px; font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--ink2); max-width: 330px; }

/* game */
.page-game { background: #1B1646; color: #fff; }
.game-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 60px; flex: none; }
.icon-btn.on-dark { background: #2E2766; color: #fff; box-shadow: 0 3px 0 #120F33; }
.icon-btn.on-dark:active { box-shadow: 0 1px 0 #120F33; }
.game-title { flex: 1; text-align: center; font-size: 19px; font-weight: 900; }
.game-score { min-width: 76px; height: 44px; padding: 0 12px; border-radius: 14px; background: #2E2766; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.score-ic { color: #FFD84A; } .score-ic svg { width: 18px; height: 18px; fill: #FFD84A; }
.game-timer { flex: none; height: 8px; margin: 0 16px 10px; width: auto; border-radius: 99px; background: #2E2766; overflow: hidden; }
.game-timer-fill { height: 100%; background: linear-gradient(90deg, #FFD84A, #FF9E5E); transform-origin: 0 50%; }
.game-stage { position: relative; flex: 1; margin: 0 12px calc(12px + env(safe-area-inset-bottom)); width: auto; border-radius: 24px; overflow: hidden; touch-action: none; background: #211A55; }
.page-game > .game-stage, .page-game > .game-timer { max-width: 496px; }
@media (min-width: 521px) { .page-game > .game-stage, .page-game > .game-timer { margin-left: auto; margin-right: auto; width: 100%; } }
#gameCanvas { display: block; touch-action: none; }
.game-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(180deg, #211A55, #3A2B7C); }
.cover-card { background: #fff; color: var(--ink); border-radius: 26px; padding: 22px 20px 20px; width: 100%; max-width: 340px; text-align: center; box-shadow: 0 6px 0 #160F3E; }
.cover-art { width: 74px; height: 74px; margin: 0 auto; } .cover-art svg { width: 100%; height: 100%; }
.cover-card h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 900; }
.cover-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--ink2); }
.result-score { font-size: 66px; font-weight: 900; color: var(--violet); line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.result-score small { display: block; font-size: 13px; font-weight: 900; color: var(--ink2); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.result-row { display: flex; gap: 8px; justify-content: center; margin: 12px 0 14px; }

/* memorial */
.page-night { background: linear-gradient(180deg, #141239, #2D2468 60%, #4A3A8C); color: #fff; }
.mem-stars { position: absolute; inset: 0; max-width: none; }
.mem-body { position: relative; justify-content: center; min-height: 100%; padding-top: 24px; }
.portrait.glow { background: radial-gradient(circle at 50% 45%, #FFF7DB, #E9DDFF 75%); box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 0 60px rgba(255, 220, 130, .45); }
.mem-title { margin: 24px 0 8px; font-size: 25px; line-height: 1.2; font-weight: 900; max-width: 340px; }
.mem-text { margin: 0 0 20px; font-size: 16px; line-height: 1.5; font-weight: 700; color: #D3CAF7; max-width: 330px; }
.mem-card { background: #fff; color: var(--ink); border-radius: 20px; padding: 4px 16px; width: 100%; max-width: 380px; margin-bottom: 8px; text-align: left; }
.mem-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.mem-row:first-child { border-top: 0; }
.mem-row span { color: var(--ink2); font-weight: 800; } .mem-row b { font-weight: 900; }
.page-night .primary-btn { background: #FFD84A; color: #3A2C55; box-shadow: 0 4px 0 #D9A92A; margin-top: 14px; }

/* small phones */
@media (max-height: 700px) {
  .topbar { min-height: 52px; padding-top: 4px; }
  .meters { padding: 8px 8px 10px; } .meter-ic { width: 28px; height: 28px; }
  .act { height: 66px; } .act-ic { width: 34px; height: 34px; } .dock { min-height: 152px; }
  .food-card { height: 92px; }
  .scene { margin: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pet-bob, .cloud, .stars i, .pet .ant-star, .pet .aura, .act.needs .badge, .meter.low .meter-ic { animation: none !important; }
}