:root{color-scheme:dark;--ink:#f5f0e7;--muted:#a9b7ae;--green:#8ed0a1;--gold:#e5c878;--panel:rgba(25,42,35,.9);--line:rgba(224,238,226,.13)}*{box-sizing:border-box}html{background:#0d1814}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 75% 0,rgba(229,200,120,.13),transparent 28%),linear-gradient(155deg,#1b3027,#0c1713 68%);font-family:ui-rounded,"Noto Sans TC",system-ui,sans-serif}button,input{font:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.shell{width:min(100%,520px);min-height:100vh;margin:auto;padding:max(18px,env(safe-area-inset-top)) 20px max(25px,env(safe-area-inset-bottom))}.hero{padding:40px 3px 22px}.eyebrow{margin:0 0 7px;color:var(--green);font-size:9px;font-weight:900;letter-spacing:.17em}.hero h1{margin:0;font-size:42px;letter-spacing:-.055em}.hero>p:last-child{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.pet-stage{position:relative;height:310px;overflow:hidden;border:1px solid rgba(174,218,186,.18);border-radius:28px;background:linear-gradient(180deg,#15271f 0 65%,#263b2b 66%);box-shadow:0 24px 70px rgba(0,0,0,.28)}.moon{position:absolute;top:30px;right:45px;width:55px;height:55px;border-radius:50%;background:#e6d895;box-shadow:0 0 35px rgba(230,216,149,.25)}.bamboo{position:absolute;bottom:62px;left:22px;display:flex;gap:9px;align-items:end}.bamboo i{width:9px;height:145px;border-radius:7px 7px 0 0;background:repeating-linear-gradient(#4f8d60 0 31px,#285438 32px 36px);transform:rotate(-5deg)}.bamboo i:nth-child(2){height:185px;transform:rotate(4deg)}.bamboo i:nth-child(3){height:112px;transform:rotate(10deg)}.stage-floor{position:absolute;right:0;bottom:0;left:0;height:67px;background:radial-gradient(ellipse at 62% 0,rgba(142,208,161,.18),transparent 55%),#1a2b20}.speech{position:absolute;z-index:4;top:20px;left:20px;max-width:205px;padding:9px 12px;border-radius:14px 14px 14px 3px;color:#314237;background:#f0eadc;font-size:10px;font-weight:800;box-shadow:0 8px 25px rgba(0,0,0,.14)}.level-chip{position:absolute;z-index:5;right:15px;bottom:15px;padding:7px 10px;border-radius:999px;color:#2e2916;background:var(--gold);font-size:9px;font-weight:900}.panda{position:absolute;z-index:3;right:64px;bottom:39px;width:145px;height:190px;border:0;background:transparent;cursor:pointer;animation:breathe 2.8s ease-in-out infinite}.panda:active{transform:scale(.96)}.panda .ear{position:absolute;z-index:0;top:7px;width:49px;height:49px;border-radius:50%;background:#171a18}.panda .ear.left{left:13px}.panda .ear.right{right:13px}.panda .head{position:absolute;z-index:2;top:22px;left:18px;width:110px;height:99px;border-radius:48% 48% 43% 43%;background:#eee9df;box-shadow:inset 0 -7px rgba(185,181,173,.22)}.eye{position:absolute;top:33px;width:29px;height:36px;border-radius:50%;background:#202420;transform:rotate(17deg)}.eye::after{content:"";position:absolute;top:10px;left:10px;width:7px;height:9px;border-radius:50%;background:#eee}.eye.left{left:18px}.eye.right{right:18px;transform:rotate(-17deg)}.nose{position:absolute;bottom:19px;left:46px;width:18px;height:12px;border-radius:50%;background:#202420}.body{position:absolute;z-index:1;bottom:7px;left:24px;width:98px;height:99px;border-radius:48% 48% 38% 38%;background:linear-gradient(#202420 0 30%,#eee9df 31% 76%,#202420 77%)}.body i{position:absolute;bottom:-5px;width:35px;height:42px;border-radius:50%;background:#202420}.body i:first-child{left:-6px}.body i:last-child{right:-6px}.panda.is-happy{animation:happy .55s ease-in-out 2}.panda.is-playing{animation:roll .8s ease-in-out 2}.status-card,.error-card,.pet-card,.earn-card,.shop-card{margin-top:15px;padding:18px;border:1px solid var(--line);border-radius:21px;background:var(--panel);box-shadow:0 15px 40px rgba(0,0,0,.14)}.status-card{display:flex;align-items:center;gap:13px}.status-card p,.error-card p{margin:4px 0 0;color:var(--muted);font-size:12px}.spinner{width:22px;height:22px;border:2px solid rgba(142,208,161,.2);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}.pet-title,.section-title{display:flex;align-items:start;justify-content:space-between;gap:14px}.pet-title small{color:var(--muted);font-size:9px}.pet-title h2,.section-title h2,.earn-card h2{margin:2px 0 0;font-size:21px}.pet-title button{padding:6px 9px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:transparent;font-size:9px}.meters{display:grid;gap:10px;margin-top:16px}.meters>div>span{display:flex;justify-content:space-between;margin-bottom:5px;font-size:9px}.meters em{color:var(--muted);font-style:normal}.meters i{display:block;height:8px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}.meters u{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),#c2e4a4);text-decoration:none;transition:width .4s}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.actions button,.earn-card button,.food-actions button,.error-card button{min-height:44px;border:0;border-radius:12px;color:#14251b;background:var(--green);font-weight:900}.actions button:last-child{color:#332d16;background:var(--gold)}.action-message{min-height:17px;margin:8px 0 0;color:var(--muted);font-size:9px;text-align:center}.earn-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:linear-gradient(135deg,rgba(229,200,120,.12),var(--panel))}.earn-card p:not(.eyebrow){margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.earn-card>strong{text-align:right}.earn-card>strong b,.earn-card>strong small{display:block}.earn-card>strong b{color:var(--gold);font-size:30px}.earn-card>strong small{color:var(--muted);font-size:8px}.earn-card button{grid-column:1/-1;color:#332d16;background:var(--gold)}.earn-card button:disabled,.actions button:disabled,.food-actions button:disabled{opacity:.45}.section-title small{color:var(--muted);font-size:9px}.food-list{display:grid;gap:8px;margin-top:14px}.food-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.1)}.food-icon{font-size:26px;text-align:center}.food-copy b,.food-copy small{display:block}.food-copy b{font-size:12px}.food-copy small{margin-top:3px;color:var(--muted);font-size:8px}.food-actions{text-align:right}.food-actions small{display:block;margin-bottom:4px;color:var(--gold);font-size:8px}.food-actions button{min-height:31px;padding:0 10px;font-size:9px}.food-actions button+button{margin-left:4px;color:var(--ink);border:1px solid var(--line);background:transparent}dialog{width:min(calc(100% - 36px),420px);padding:22px;border:1px solid var(--line);border-radius:20px;color:var(--ink);background:#1b2a23}dialog::backdrop{background:rgba(3,10,7,.75);backdrop-filter:blur(7px)}dialog h2{margin:0 0 13px}dialog input{width:100%;height:47px;padding:0 12px;border:1px solid var(--line);border-radius:11px;outline:none;color:var(--ink);background:rgba(0,0,0,.2);font-size:16px}dialog form>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}dialog button{min-height:42px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:transparent}dialog button:last-child{color:#14251b;border:0;background:var(--green);font-weight:900}footer{display:flex;justify-content:space-between;padding:24px 3px 3px;color:#73867b;font-size:9px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{50%{transform:translateY(3px) scale(1.015)}}@keyframes happy{50%{transform:translateY(-13px) rotate(4deg)}}@keyframes roll{50%{transform:rotate(18deg) translateY(-5px)}}@media(max-width:370px){.shell{padding-inline:14px}.panda{right:38px}.hero h1{font-size:37px}}

/* Tap-to-dance is a local toy, separate from the account's care actions. */
.panda .arm { position:absolute; z-index:1; top:106px; width:28px; height:55px; border-radius:45%; background:#202420; transform-origin:50% 10%; pointer-events:none; }
.panda .arm.left { left:5px; transform:rotate(12deg); }
.panda .arm.right { right:5px; transform:rotate(-12deg); }
.panda { touch-action:manipulation; }
.panda.is-dancing { transform-origin:50% 90%; }
.panda.is-dancing .head { animation:dance-head .6s ease-in-out infinite; transform-origin:50% 80%; }
.panda.is-dancing .body i { animation:dance-feet .45s ease-in-out infinite alternate; }
.panda.is-dancing .body i:last-child { animation-delay:-.225s; }
.panda.dance-shuffle { animation:dance-shuffle .6s ease-in-out infinite; }
.panda.dance-shuffle .arm.left { animation:dance-arm .6s ease-in-out infinite alternate; }
.panda.dance-shuffle .arm.right { animation:dance-arm-other .6s ease-in-out infinite alternate; }
.panda.dance-disco { animation:dance-disco .7s ease-in-out infinite; }
.panda.dance-disco .arm.left { animation:dance-point .7s ease-in-out infinite; }
.panda.dance-disco .arm.right { animation:dance-point-other .7s ease-in-out infinite; }
.panda.dance-bounce { animation:dance-bounce .5s ease-in-out infinite; }
.panda.dance-bounce .arm.left { animation:dance-arm .5s ease-in-out infinite alternate; }
.panda.dance-bounce .arm.right { animation:dance-arm-other .5s ease-in-out infinite alternate; }
.dance-hint { position:absolute; z-index:5; bottom:12px; left:12px; min-height:44px; padding:8px 10px; border:0; background:transparent; color:#b9d4c4; font-size:12px; cursor:default; }
.dance-hint:focus-visible { outline:2px solid #a8d4b6; outline-offset:-2px; }
.dance-sparkles { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s; }
.dance-party .dance-sparkles { opacity:1; }
.dance-sparkles i { position:absolute; z-index:4; width:8px; height:8px; border-radius:2px; background:#e5c878; }
.dance-sparkles i:first-child { top:43%; right:16%; }
.dance-sparkles i:nth-child(2) { top:22%; right:45%; background:#c9a7ff; }
.dance-sparkles i:last-child { top:61%; right:55%; background:#a8d4b6; }
.dance-party .dance-sparkles i { animation:dance-sparkle .8s ease-in-out infinite alternate; }
.dance-party .dance-sparkles i:nth-child(2) { animation-delay:-.3s; }
.dance-party .dance-sparkles i:last-child { animation-delay:-.6s; }
@keyframes dance-shuffle { 0%,100% { transform:translateX(-8px) rotate(-7deg); } 25% { transform:translate(-3px,-8px) rotate(3deg); } 50% { transform:translateX(8px) rotate(7deg); } 75% { transform:translate(3px,-8px) rotate(-3deg); } }
@keyframes dance-disco { 0%,100% { transform:translateX(-9px) rotate(-9deg); } 50% { transform:translate(9px,-5px) rotate(9deg); } }
@keyframes dance-bounce { 0%,100% { transform:scale(1.04,.96); } 45% { transform:translateY(-18px) rotate(-5deg) scale(.98,1.02); } 70% { transform:translateY(-6px) rotate(5deg); } }
@keyframes dance-head { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg) translateY(-2px); } }
@keyframes dance-arm { from { transform:rotate(15deg); } to { transform:rotate(105deg); } }
@keyframes dance-arm-other { from { transform:rotate(-105deg); } to { transform:rotate(-15deg); } }
@keyframes dance-point { 0%,100% { transform:rotate(130deg); } 50% { transform:rotate(35deg); } }
@keyframes dance-point-other { 0%,100% { transform:rotate(-35deg); } 50% { transform:rotate(-130deg); } }
@keyframes dance-feet { from { transform:translateY(0) rotate(-8deg); } to { transform:translateY(-7px) rotate(8deg); } }
@keyframes dance-sparkle { from { transform:rotate(10deg) scale(.6); } to { transform:translateY(-5px) rotate(45deg) scale(1); } }
@media(prefers-reduced-motion:reduce) {
  .panda.is-dancing, .panda.is-dancing *, .dance-party .dance-sparkles i { animation:none !important; }
  .panda.is-dancing .arm.left { transform:rotate(80deg); }
  .panda.is-dancing .arm.right { transform:rotate(-80deg); }
  .dance-sparkles { transition:none; }
}
@media(max-width:370px) { .dance-hint { left:8px; max-width:110px; padding-inline:8px; font-size:11px; } }

/* ── Growth forms ─────────────────────────────────────────────────────────────
   The same panda dresses up as it levels. #pet-stage[data-form] carries the form id
   from the server (cub → sprout → scarf → traveler → moon → sage). */
body.portal-pets .pet-stage { height:292px; }
body.portal-pets .panda { right:44px; bottom:48px; transform-origin:50% 100%; transition:scale .55s cubic-bezier(.3,1.5,.5,1); }
body.portal-pets .speech { top:16px; left:16px; max-width:168px; line-height:1.45; transition:opacity .2s; }
.pet-stage.has-banner .speech { opacity:0; }

/* Face: a mouth, cheeks and a slow blink make the care state readable at a glance. */
.panda .mouth { position:absolute; left:49px; top:81px; width:12px; height:6px; border:2px solid #202420; border-top:0; border-radius:0 0 12px 12px; }
.panda.mood-low .mouth { top:84px; border:2px solid #202420; border-bottom:0; border-radius:12px 12px 0 0; }
.panda .cheek { position:absolute; top:63px; width:17px; height:10px; border-radius:50%; background:#f4c6c6; opacity:0; transition:opacity .4s; }
.panda .cheek.left { left:3px; }
.panda .cheek.right { right:3px; }
.panda.mood-happy .cheek { opacity:.85; }
.panda .eye::after { animation:blink 5.4s infinite; }
.panda.mood-low .eye::after { top:17px; }
@keyframes blink { 0%,93%,100% { transform:scaleY(1); } 96% { transform:scaleY(.12); } }

/* Outfit pieces. Head pieces live inside .head so they follow the dance head-bob. */
.panda :is(.sprout,.hat,.crown,.mark,.scarf,.cape,.aura) { position:absolute; display:none; pointer-events:none; }
.panda .sprout { left:53px; top:-13px; width:4px; height:17px; border-radius:3px; background:#5d9a6c; transform-origin:50% 100%; animation:sway 3.2s ease-in-out infinite; }
.panda .sprout::before, .panda .sprout::after { content:""; position:absolute; top:-6px; width:17px; height:10px; }
.panda .sprout::before { right:2px; border-radius:0 100% 0 100%; background:#a8d4b6; transform:rotate(18deg); }
.panda .sprout::after { left:2px; border-radius:100% 0 100% 0; background:#8ed0a1; transform:rotate(-18deg); }
.panda .hat { left:-15px; top:-26px; width:140px; height:46px; transform:rotate(-6deg); transform-origin:50% 100%; clip-path:polygon(50% 0,100% 84%,96% 100%,4% 100%,0 84%); background:repeating-linear-gradient(100deg,rgba(120,84,30,.16) 0 2px,transparent 2px 9px),linear-gradient(180deg,#f7dca6,#e2b769 70%,#c99746); }
.panda .hat::after { content:""; position:absolute; right:0; bottom:0; left:0; height:6px; background:rgba(120,84,30,.34); }
.panda .crown { left:34px; top:-21px; width:42px; height:27px; clip-path:polygon(0 100%,0 18%,24% 58%,50% 0,76% 58%,100% 18%,100% 100%); background:linear-gradient(180deg,#fbe3b0,#f4d095 55%,#d9a94f); }
.panda .crown::after { content:""; position:absolute; bottom:4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#f4c2f4; }
.panda .mark { left:48px; top:8px; width:14px; height:14px; border-radius:50%; box-shadow:inset 4px -3px 0 0 #e9c46a; transform:rotate(-20deg); }
.panda .scarf { z-index:3; left:27px; top:113px; width:92px; height:17px; border-radius:9px; background:var(--scarf,#f4c2f4); box-shadow:inset 0 -4px rgba(0,0,0,.12); }
.panda .scarf::after { content:""; position:absolute; top:9px; right:12px; width:17px; height:30px; border-radius:3px 3px 7px 7px; background:var(--scarf,#f4c2f4); box-shadow:inset -4px 0 rgba(0,0,0,.12); transform:rotate(-9deg); transform-origin:50% 0; }
.panda .cape { z-index:0; left:-9px; top:104px; width:163px; height:84px; clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); background:linear-gradient(180deg,var(--cape-a,#d9c4ea),var(--cape-b,#9c86bd)); }
.panda .aura { z-index:-1; left:-38px; top:-18px; width:221px; height:221px; border-radius:50%; background:radial-gradient(circle,var(--aura,rgba(224,206,233,.34)),transparent 66%); animation:aura 3.4s ease-in-out infinite; }
@keyframes sway { 50% { transform:rotate(7deg); } }
@keyframes aura { 50% { transform:scale(1.08); opacity:.72; } }

.pet-stage[data-form="cub"] .panda { scale:.78; }
.pet-stage[data-form="sprout"] .panda { scale:.9; }
.pet-stage:is([data-form="sprout"],[data-form="scarf"]) .sprout { display:block; }
.pet-stage:is([data-form="scarf"],[data-form="traveler"],[data-form="moon"],[data-form="sage"]) .scarf { display:block; }
.pet-stage[data-form="traveler"] .hat { display:block; }
.pet-stage[data-form="traveler"] .scarf { --scarf:#bee0c6; }
.pet-stage:is([data-form="moon"],[data-form="sage"]) :is(.mark,.cape,.aura) { display:block; }
.pet-stage[data-form="moon"] .scarf { --scarf:#e0cee9; }
.pet-stage[data-form="sage"] .crown { display:block; }
.pet-stage[data-form="sage"] .scarf { --scarf:#f4d095; }
.pet-stage[data-form="sage"] .cape { --cape-a:#7d68a3; --cape-b:#473a6b; }
.pet-stage[data-form="sage"] .aura { --aura:rgba(244,208,149,.4); }
.pet-stage[data-form="sage"] .panda { scale:1.04; }

/* Scenery grows with the panda: more bamboo, fireflies, stars, then sky lanterns. */
.bamboo i:nth-child(n+4) { display:none; }
.pet-stage:is([data-form="traveler"],[data-form="moon"],[data-form="sage"]) .bamboo i:nth-child(4) { display:block; height:160px; transform:rotate(-2deg); }
.pet-stage:is([data-form="moon"],[data-form="sage"]) .bamboo i:nth-child(5) { display:block; height:126px; transform:rotate(8deg); }
.pet-stage :is(.stars,.fireflies,.lanterns) { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .8s; }
.pet-stage:is([data-form="traveler"],[data-form="moon"],[data-form="sage"]) .fireflies,
.pet-stage:is([data-form="moon"],[data-form="sage"]) .stars,
.pet-stage[data-form="sage"] .lanterns { opacity:1; }
.stars i { position:absolute; width:3px; height:3px; border-radius:50%; background:#f5f3f7; animation:twinkle 2.6s ease-in-out infinite; }
.stars i:nth-child(1) { top:14%; left:39%; }
.stars i:nth-child(2) { top:8%; left:61%; animation-delay:-.7s; }
.stars i:nth-child(3) { top:27%; left:52%; animation-delay:-1.3s; }
.stars i:nth-child(4) { top:19%; left:92%; animation-delay:-.4s; }
.stars i:nth-child(5) { top:38%; left:31%; animation-delay:-1.9s; }
.stars i:nth-child(6) { top:6%; left:17%; animation-delay:-1s; }
.stars i:nth-child(7) { top:33%; left:6%; animation-delay:-2.2s; }
.fireflies i { position:absolute; width:5px; height:5px; border-radius:50%; background:#e9e39a; box-shadow:0 0 8px 2px rgba(233,227,154,.55); animation:firefly 6s ease-in-out infinite; }
.fireflies i:nth-child(1) { bottom:38%; left:13%; }
.fireflies i:nth-child(2) { bottom:52%; left:37%; animation-delay:-2s; animation-duration:7.5s; }
.fireflies i:nth-child(3) { bottom:30%; left:45%; animation-delay:-4s; }
.fireflies i:nth-child(4) { bottom:63%; left:93%; animation-delay:-1s; animation-duration:8s; }
.lanterns i { position:absolute; bottom:70px; width:15px; height:19px; border-radius:45% 45% 32% 32%; background:linear-gradient(#fbe6b6,#f4d095 55%,#e2a659); box-shadow:0 0 16px 4px rgba(244,208,149,.32); opacity:0; animation:lantern 11s linear infinite; }
.lanterns i:first-child { left:35%; }
.lanterns i:last-child { left:8%; width:11px; height:14px; animation-delay:-5.5s; animation-duration:13s; }
.pet-stage[data-form="moon"] { background:linear-gradient(180deg,#171f2e 0 65%,#243a31 66%); }
.pet-stage[data-form="sage"] { background:linear-gradient(180deg,#1d1a2e 0 65%,#263b2b 66%); }
.pet-stage:is([data-form="moon"],[data-form="sage"]) .moon { box-shadow:0 0 0 10px rgba(230,216,149,.08),0 0 55px 12px rgba(230,216,149,.35); }
@keyframes twinkle { 50% { opacity:.25; transform:scale(.6); } }
@keyframes firefly { 0%,100% { transform:translate(0,0); opacity:.2; } 25% { transform:translate(10px,-14px); opacity:1; } 50% { transform:translate(-6px,-24px); opacity:.5; } 75% { transform:translate(-14px,-8px); opacity:1; } }
@keyframes lantern { 0% { transform:translate(0,0); opacity:0; } 12% { opacity:.95; } 80% { opacity:.8; } 100% { transform:translate(18px,-190px); opacity:0; } }

/* Level chip now names the form. */
.level-chip { display:flex; align-items:center; gap:6px; }
.level-chip em { padding-left:6px; border-left:1px solid rgba(46,41,22,.3); font-style:normal; }
.level-chip.is-pop { animation:chip-pop .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes chip-pop { 40% { transform:scale(1.22); } }

/* Feedback layers: floating gains, level-up banner, confetti, evolution flash, preview tag. */
.gain-layer, .confetti { position:absolute; inset:0; z-index:6; overflow:hidden; pointer-events:none; }
.gain { position:absolute; top:calc(36% + var(--row,0) * 31px); right:198px; padding:4px 9px; border-radius:999px; color:#14251b; background:#bee0c6; box-shadow:0 6px 16px rgba(0,0,0,.25); font-size:12px; font-weight:800; white-space:nowrap; opacity:0; animation:gain-rise 1.6s ease-out var(--delay,0s) forwards; }
.gain.xp { color:#332d16; background:#f4d095; }
.gain.mood { color:#3a2140; background:#f4c2f4; }
@keyframes gain-rise { 0% { opacity:0; transform:translateY(12px) scale(.8); } 15% { opacity:1; transform:translateY(0) scale(1); } 78% { opacity:1; } 100% { opacity:0; transform:translateY(-62px); } }
.levelup { position:absolute; z-index:7; top:14px; left:14px; min-width:164px; padding:9px 18px 10px; border-radius:16px; color:#332d16; background:linear-gradient(180deg,#fbe9be,#f4d095); box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 3px rgba(244,208,149,.25); text-align:center; animation:levelup-pop 3.2s cubic-bezier(.2,1.4,.4,1) forwards; }
.levelup small { display:block; font-size:10px; font-weight:900; letter-spacing:.22em; }
.levelup b { display:block; margin-top:2px; font-size:20px; white-space:nowrap; }
.levelup.is-evolve { color:#3a2140; background:linear-gradient(180deg,#fbe1fb,#f4c2f4); box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 3px rgba(244,194,244,.28); }
@keyframes levelup-pop { 0% { opacity:0; transform:translateY(-14px) scale(.7); } 10% { opacity:1; transform:translateY(0) scale(1.06); } 16%,86% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:translateY(-10px) scale(.96); } }
.confetti i { position:absolute; top:50%; left:67%; width:7px; height:11px; border-radius:2px; background:var(--c,#f4d095); opacity:0; animation:confetti-fly var(--t,1.3s) cubic-bezier(.15,.6,.3,1) var(--d,0s) forwards; }
@keyframes confetti-fly { 0% { opacity:1; transform:translate(0,0) rotate(0) scale(.4); } 70% { opacity:1; } 100% { opacity:0; transform:translate(var(--x,0),var(--y,-80px)) rotate(var(--r,180deg)) scale(1); } }
.evolve-flash { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background:radial-gradient(circle at 67% 50%,#fff 0,rgba(245,243,247,.9) 24%,rgba(244,194,244,.4) 50%,transparent 74%); }
.pet-stage.is-evolving .evolve-flash { animation:evolve-flash 1.5s ease-in-out forwards; }
.pet-stage.is-evolving .panda { animation:evolve-panda 1.5s ease-in-out forwards; }
@keyframes evolve-flash { 0% { opacity:0; } 40%,56% { opacity:1; } 100% { opacity:0; } }
@keyframes evolve-panda { 0%,100% { transform:scale(1); filter:brightness(1); } 18% { transform:scale(1.06) rotate(-4deg); } 30% { transform:scale(.95) rotate(4deg); } 45% { transform:scale(.7); filter:brightness(3); } 62% { transform:scale(1.18); filter:brightness(2); } 80% { transform:scale(.97); filter:brightness(1); } }
.preview-tag { position:absolute; z-index:6; top:14px; right:14px; padding:5px 10px; border-radius:999px; color:#201d24; background:#b1deed; font-size:11px; font-weight:800; }
.pet-stage.is-preview { outline:2px dashed rgba(177,222,237,.55); outline-offset:-6px; }

/* Pet card: form line, growth path, two-button dock. */
.pet-sub { display:flex; flex-wrap:wrap; gap:4px 12px; margin:5px 0 0; color:var(--muted); font-size:12px; }
.pet-sub span:first-child { color:#f4c2f4; font-weight:700; }
.pet-sub b { color:var(--ink); }
#xp-bar { background:linear-gradient(90deg,#e5c878,#f4d095); }
/* Experience gets its own full-width row so long totals such as 12000 / 12960 never wrap. */
body.portal-pets .meters { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.portal-pets .meters > div:nth-child(3) { grid-column:1/-1; }
body.portal-pets .meters > div:nth-child(3) i { height:10px; }
.meters .is-gain u { animation:bar-flash .9s ease-out; }
@keyframes bar-flash { 30% { filter:brightness(1.7); } }
.growth { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.growth-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.growth-head b { font-size:14px; }
.growth-head small { color:var(--gold); font-size:12px; text-align:right; }
.growth-track { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:12px 0 0; padding:0; list-style:none; }
.growth-track li { position:relative; }
.growth-track li + li::before { content:""; position:absolute; top:22px; right:50%; width:100%; height:3px; background:rgba(255,255,255,.1); }
.growth-track li:is(.is-done,.is-current) + li:is(.is-done,.is-current)::before { background:var(--green); }
.node { position:relative; z-index:1; display:grid; justify-items:center; gap:4px; width:100%; min-height:66px; padding:0; border:0; color:var(--muted); background:transparent; cursor:pointer; }
.node small { font-size:11px; font-weight:700; }
.mini-wrap { display:grid; place-items:center; width:46px; height:46px; border:2px solid #3a4f44; border-radius:50%; background:#1e3329; transition:border-color .2s,box-shadow .2s; }
.is-done .mini-wrap { border-color:var(--green); }
.is-current .mini-wrap { border-color:var(--gold); box-shadow:0 0 0 4px rgba(229,200,120,.18); }
.is-current .node small { color:var(--gold); }
.is-locked .mini { filter:brightness(.45) saturate(.3); }
.node[aria-pressed="true"] .mini-wrap { border-color:#b1deed; box-shadow:0 0 0 4px rgba(177,222,237,.22); }
.node[aria-pressed="true"] .mini { filter:none; }
.node:focus-visible { outline:2px solid #b1deed; outline-offset:2px; border-radius:12px; }
.growth-caption { min-height:18px; margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }
.mini { position:relative; display:block; width:30px; height:30px; }
.mini::before { content:""; position:absolute; top:2px; left:1px; width:10px; height:10px; border-radius:50%; background:#171a18; box-shadow:18px 0 #171a18; }
.mini .f { position:absolute; top:6px; left:2px; width:26px; height:23px; border-radius:48% 48% 44% 44%; background:radial-gradient(ellipse 3.6px 4.6px at 30% 46%,#202420 96%,transparent),radial-gradient(ellipse 3.6px 4.6px at 70% 46%,#202420 96%,transparent),radial-gradient(ellipse 2.4px 1.7px at 50% 70%,#202420 96%,transparent),#eee9df; }
.mini .a { position:absolute; }
.mini[data-mini="cub"] { scale:.8; }
.mini[data-mini="sprout"] .a { top:-2px; left:14px; width:10px; height:7px; border-radius:100% 0 100% 0; background:#8ed0a1; }
.mini[data-mini="scarf"] .a, .mini[data-mini="moon"]::after { top:25px; left:5px; width:20px; height:6px; border-radius:4px; background:#f4c2f4; }
.mini[data-mini="traveler"] .a { top:-3px; left:-3px; width:36px; height:13px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#e2b769; }
.mini[data-mini="moon"] .a { top:8px; left:11px; width:8px; height:8px; border-radius:50%; box-shadow:inset 2.5px -2px 0 0 #e9c46a; }
.mini[data-mini="moon"]::after { content:""; position:absolute; background:#e0cee9; }
.mini[data-mini="sage"] .a { top:-4px; left:8px; width:14px; height:10px; clip-path:polygon(0 100%,0 18%,24% 58%,50% 0,76% 58%,100% 18%,100% 100%); background:#f4d095; }
body.portal-pets .actions button { display:grid; place-content:center; gap:1px; line-height:1.25; }
.actions button b { font-size:15px; }
.actions button small { font-size:11px; font-weight:700; opacity:.82; }
.actions button small:empty { display:none; }
.actions #play-button { color:#332d16; background:var(--gold); }
.actions #feed-button { color:#14251b; background:var(--green); }
.actions #play-button.is-cooling { border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.07); }
.basket-bar { display:block; height:6px; margin-top:9px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.basket-bar u { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e5c878,#f4d095); transition:width .4s; }
.basket-bar.is-full u { animation:basket-pulse 1.4s ease-in-out infinite; }
@keyframes basket-pulse { 50% { filter:brightness(1.35); } }
.earn-card p#earn-detail.is-warning { color:#f4c6c6; }
/* Narrow phones: slide the panda toward the edge so it clears the bamboo and the speech bubble. */
@media(max-width:370px) { body.portal-pets .panda { right:14px; } .gain { right:158px; } }
@media(prefers-reduced-motion:reduce) {
  .panda .eye::after, .panda .sprout, .panda .aura, .stars i, .fireflies i, .basket-bar.is-full u, .level-chip.is-pop, .meters .is-gain u { animation:none !important; }
  .lanterns i { animation:none !important; opacity:.9; }
  .lanterns i:last-child { bottom:150px; }
  .confetti { display:none; }
  .gain { animation:none; opacity:1; }
  .levelup { animation:none; }
  body.portal-pets .panda { transition:none; }
}

/* Companion cottage: quieter controls, visible lifetime progress and species-specific faces. */
body.portal-pets { --ink:#F5F3F7; --green:#BEE0C6; --gold:#F4D095; --muted:#b6c6bc; }
body.portal-pets .hero { position:relative; padding-bottom:24px; }
body.portal-pets .hero .eyebrow { color:#BEE0C6; font-size:11px; letter-spacing:.12em; margin-bottom:10px; }
body.portal-pets .hero h1 { font-size:34px; letter-spacing:.01em; font-weight:700; }
body.portal-pets .hero>p:last-of-type { margin:9px 0 0; color:var(--muted); font-size:13px; }
.home-label { position:absolute; right:0; top:34px; font-size:11px; border:1px solid var(--line); border-radius:99px; padding:6px 10px; color:#BEE0C6; }
body.portal-pets .pet-stage { height:300px; border-radius:22px; border-color:rgba(190,224,198,.2); }
body.portal-pets .pet-card { margin-top:14px; padding:22px; border-radius:22px; background:linear-gradient(145deg,#20372c,#182b23); }
body.portal-pets .pet-title h2 { margin-top:0; font-size:25px; letter-spacing:.02em; }
body.portal-pets .pet-sub { font-size:12px; gap:6px 10px; }
.pet-tools { display:flex; gap:6px; align-items:center; }
body.portal-pets .pet-tools button { min-height:40px; font-size:12px; padding:7px 10px; }
body.portal-pets #companion-button { color:#F4C2F4; border-color:rgba(244,194,244,.3); background:rgba(244,194,244,.05); }
.pet-tools button span { margin-left:4px; }
.bond-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; padding:14px 0; background:rgba(0,0,0,.1); border:1px solid var(--line); border-radius:14px; text-align:center; }
.bond-strip>div+div { border-left:1px solid var(--line); }
.bond-strip b { display:block; color:#E0CEE9; font-size:21px; font-variant-numeric:tabular-nums; }
.bond-strip small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
body.portal-pets .meters>div>span { font-size:12px; }
body.portal-pets .meters em { font-size:11px; font-variant-numeric:tabular-nums; }
body.portal-pets .meters { margin-top:20px; gap:14px; }
body.portal-pets .action-message { font-size:12px; line-height:1.6; }
body.portal-pets .earn-card,body.portal-pets .shop-card { padding:20px; border-radius:20px; }
body.portal-pets .earn-card p:not(.eyebrow),body.portal-pets .section-title small { font-size:12px; }
body.portal-pets .earn-card strong small { font-size:11px; }
body.portal-pets .food-row { grid-template-columns:34px minmax(0,1fr) auto; padding:12px 10px; }
body.portal-pets .food-copy b { font-size:13px; }
body.portal-pets .food-copy small { font-size:11px; line-height:1.5; }
body.portal-pets .food-actions { display:block; grid-column:auto; }
body.portal-pets .food-actions small { margin-bottom:6px; font-size:11px; }
body.portal-pets .food-actions button { min-height:40px; min-width:46px; font-size:12px; }
body.portal-pets .pet-stage .speech { max-width:180px; font-size:12px; }
body.portal-pets .panda:focus-visible,button:focus-visible,a.companion-choose:focus-visible { outline:2px solid #B1DEED; outline-offset:4px; }
body.portal-pets .level-chip { font-size:11px; }
body.portal-pets .dance-hint { bottom:14px; font-size:11px; }
body.portal-pets .game-help { margin-top:18px; border-top:1px solid var(--line); font-size:12px; line-height:1.8; }
body.portal-pets .game-help summary { cursor:pointer; padding:16px 2px; color:var(--muted); }
body.portal-pets footer { font-size:11px; }
body.portal-pets dialog { border-radius:24px; max-height:calc(100dvh - 32px); overflow:auto; }
body.portal-pets dialog p { color:var(--muted); font-size:13px; line-height:1.7; }
body.portal-pets dialog h2 { font-size:23px; }
body.portal-pets .companion-dialog { width:min(620px,calc(100% - 28px)); padding:24px; }
.dialog-heading { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.dialog-heading h2 { margin:0; }
.dialog-heading>button { flex:none; min-height:36px; width:36px; font-size:23px; border-radius:50%; }
.companion-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.companion-option { display:flex; flex-direction:column; align-items:center; padding:18px 14px 14px; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.12); text-align:center; }
.companion-option.is-selected { border-color:#BEE0C6; background:rgba(190,224,198,.07); }
.companion-avatar { display:grid; place-items:center; width:68px; height:68px; border-radius:22px; font-size:44px; background:rgba(224,206,233,.09); }
.companion-option[data-species="pig"] .companion-avatar { background:rgba(244,194,244,.13); }
.companion-option[data-species="fox"] .companion-avatar { background:rgba(244,208,149,.13); }
.companion-option h3 { font-size:17px; margin:12px 0 0; }
body.portal-pets .companion-option p { font-size:12px; line-height:1.65; margin:6px 0 12px; flex:1; }
.companion-price { color:#F4D095; font-size:11px; margin-bottom:12px; }
body.portal-pets .companion-choose { display:grid; place-items:center; min-height:44px; width:100%; padding:8px; font-size:13px; font-weight:700; background:#E0CEE9; color:#201D24; border:0; border-radius:10px; text-decoration:none; }
body.portal-pets .companion-choose:disabled { background:rgba(190,224,198,.12); color:#BEE0C6; cursor:default; }
#unlock-message,#companion-message { color:#F4C6C6; }
#unlock-form>p strong { color:#F4D095; }
.heart-layer { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.heart-layer span { position:absolute; right:106px; bottom:160px; color:#F4C2F4; font-size:25px; opacity:0; text-shadow:0 4px 12px #15271f; animation:heart-up 1.3s ease-out var(--heart-delay) forwards; }
@keyframes heart-up { 0% { opacity:0; transform:translate(0,10px) scale(.5); } 20% { opacity:1; } 100% { opacity:0; transform:translate(var(--heart-x),-100px) scale(1.15); } }
.snack { position:absolute; z-index:4; right:100px; bottom:112px; font-size:29px; pointer-events:none; opacity:0; }
.pet-stage:has(.is-eating) .snack { animation:snack-nibble 1.7s ease-out; }
.panda.is-eating .head { animation:chew .25s ease-in-out 6; transform-origin:50% 80%; }
.panda.is-eating .mouth { animation:chew-mouth .25s ease-in-out 6; }
@keyframes chew { 50% { transform:translateY(3px) rotate(3deg); } }
@keyframes chew-mouth { 50% { scale:1.3 1.4; } }
@keyframes snack-nibble { 0% { opacity:0; transform:translateY(12px); } 15%,50% { opacity:1; transform:translateY(0) rotate(-12deg); } 85% { opacity:1; transform:translateY(-10px) scale(.3); } 100% { opacity:0; transform:translateY(-10px) scale(0); } }

/* All species share earned accessories; their silhouettes and faces remain distinct. */
.panda .tail,.panda .wool { display:none; }
.pet-stage[data-species="pig"] .panda .head { background:#F1B7B9; box-shadow:inset 0 -7px rgba(172,91,107,.13); }
.pet-stage[data-species="pig"] .panda .ear { width:40px; height:51px; border-radius:7px 35px 8px 20px; background:#D990A1; top:6px; }
.pet-stage[data-species="pig"] .panda .ear.left { transform:rotate(-25deg); }
.pet-stage[data-species="pig"] .panda .ear.right { transform:scaleX(-1) rotate(-25deg); }
.pet-stage[data-species="pig"] .panda .eye { background:#4b303b; width:9px; height:12px; top:38px; transform:none; }
.pet-stage[data-species="pig"] .panda .eye.left { left:27px; }
.pet-stage[data-species="pig"] .panda .eye.right { right:27px; }
.pet-stage[data-species="pig"] .panda .eye::after { width:3px; height:3px; left:2px; top:2px; }
.pet-stage[data-species="pig"] .panda .nose { width:39px; height:25px; left:36px; bottom:19px; border:2px solid #D990A1; background:radial-gradient(ellipse 3px 5px at 32% 50%,#AF6C82 95%,transparent),radial-gradient(ellipse 3px 5px at 68% 50%,#AF6C82 95%,transparent),#E79FAF; }
.pet-stage[data-species="pig"] .panda .body { background:#F1B7B9; }
.pet-stage[data-species="pig"] .panda .body i,.pet-stage[data-species="pig"] .panda .arm { background:#D990A1; }
.pet-stage[data-species="pig"] .tail { display:block; position:absolute; left:4px; bottom:33px; height:24px; width:25px; border:6px solid #D990A1; border-radius:50%; }
.pet-stage[data-species="sheep"] .panda .head { background:#C1ADA1; width:83px; left:31px; border-radius:48%; box-shadow:0 -11px 0 7px #F5F0E7; }
.pet-stage[data-species="sheep"] .panda .ear { top:36px; width:42px; height:21px; background:#C1ADA1; }
.pet-stage[data-species="sheep"] .panda .ear.left { left:0; transform:rotate(25deg); }
.pet-stage[data-species="sheep"] .panda .ear.right { right:0; transform:rotate(-25deg); }
.pet-stage[data-species="sheep"] .panda .wool { display:block; position:absolute; top:-11px; left:13px; width:32px; height:28px; background:#F5F0E7; border-radius:50%; box-shadow:-17px 5px #F5F0E7,17px 0 #F5F0E7,35px 6px #F5F0E7; }
.pet-stage[data-species="sheep"] .panda .eye { width:8px; height:11px; top:40px; background:#41362F; transform:none; }
.pet-stage[data-species="sheep"] .panda .eye::after { width:2px; height:2px; left:2px; top:2px; }
.pet-stage[data-species="sheep"] .panda .nose { left:34px; width:14px; height:9px; background:#79645B; }
.pet-stage[data-species="sheep"] .panda .mouth { left:34px; border-color:#79645B; }
.pet-stage[data-species="sheep"] .panda .body { background:#F5F0E7; box-shadow:0 0 0 9px #F5F0E7; }
.pet-stage[data-species="sheep"] .panda .arm,.pet-stage[data-species="sheep"] .panda .body i { background:#A38D81; }
.pet-stage[data-species="fox"] .panda .head { background:linear-gradient(145deg,transparent 52%,#F8ECD6 53%) left/51% 100% no-repeat,linear-gradient(215deg,transparent 52%,#F8ECD6 53%) right/51% 100% no-repeat,#DD935D; border-radius:36% 36% 50% 50%; }
.pet-stage[data-species="fox"] .panda .ear { top:-10px; width:45px; height:66px; border-radius:8px; background:#DD935D; clip-path:polygon(10% 0,100% 100%,0 100%); }
.pet-stage[data-species="fox"] .panda .ear::after { content:""; position:absolute; inset:12px 9px 4px; background:#6B443B; clip-path:polygon(10% 0,100% 100%,0 100%); }
.pet-stage[data-species="fox"] .panda .ear.right { transform:scaleX(-1); }
.pet-stage[data-species="fox"] .panda .eye { top:37px; width:12px; height:15px; background:#3A302E; transform:none; }
.pet-stage[data-species="fox"] .panda .eye.left { left:23px; }
.pet-stage[data-species="fox"] .panda .eye.right { right:23px; }
.pet-stage[data-species="fox"] .panda .eye::after { width:3px; height:4px; top:3px; left:3px; }
.pet-stage[data-species="fox"] .panda .body { background:radial-gradient(ellipse at 50% 25%,#F8ECD6 0 38%,transparent 40%),#DD935D; }
.pet-stage[data-species="fox"] .panda .body i { background:#6B443B; }
.pet-stage[data-species="fox"] .panda .arm { background:#DD935D; }
.pet-stage[data-species="fox"] .tail { display:block; position:absolute; left:-21px; bottom:15px; width:66px; height:105px; background:linear-gradient(150deg,#F8ECD6 0 28%,#DD935D 29%); border-radius:85% 12% 70% 20%; transform:rotate(-33deg); }
body[data-species="pig"] .mini .f { background:radial-gradient(ellipse 2px 3px at 30% 46%,#4b303b 96%,transparent),radial-gradient(ellipse 2px 3px at 70% 46%,#4b303b 96%,transparent),radial-gradient(ellipse 6px 4px at 50% 70%,#D990A1 96%,transparent),#F1B7B9; }
body[data-species="pig"] .mini::before { background:#D990A1; box-shadow:18px 0 #D990A1; }
body[data-species="sheep"] .mini .f { background:radial-gradient(ellipse 2px 3px at 30% 46%,#41362F 96%,transparent),radial-gradient(ellipse 2px 3px at 70% 46%,#41362F 96%,transparent),#C1ADA1; box-shadow:0 -4px 0 3px #F5F0E7; }
body[data-species="sheep"] .mini::before { background:#F5F0E7; box-shadow:18px 0 #F5F0E7; }
body[data-species="fox"] .mini .f { background:radial-gradient(ellipse 2px 3px at 30% 46%,#3A302E 96%,transparent),radial-gradient(ellipse 2px 3px at 70% 46%,#3A302E 96%,transparent),linear-gradient(135deg,#DD935D 50%,#F8ECD6 51%); }
body[data-species="fox"] .mini::before { border-radius:2px; background:#DD935D; box-shadow:18px 0 #DD935D; transform:rotate(6deg); }
@media(max-width:440px){
  body.portal-pets .pet-card { padding:17px; }
  body.portal-pets .pet-title { gap:8px; }
  body.portal-pets .pet-tools { gap:4px; }
  body.portal-pets .pet-tools button { padding:7px; min-width:0; font-size:11px; }
  body.portal-pets .pet-tools button span { display:none; }
  body.portal-pets .food-row { grid-template-columns:28px minmax(0,1fr); }
  body.portal-pets .food-actions { display:flex; grid-column:1/-1; gap:8px; }
  body.portal-pets .food-actions small { margin:0 auto 0 0; }
  body.portal-pets .food-actions button { min-height:44px; min-width:62px; }
  .home-label { font-size:10px; top:38px; }
  .companion-list { gap:8px; }
  .companion-option { padding:14px 10px; }
  body.portal-pets .companion-dialog { padding:20px; }
  body.portal-pets .level-chip { font-size:10px; right:12px; bottom:18px; }
  body.portal-pets .dance-hint { max-width:125px; left:8px; line-height:1.5; padding-inline:4px; bottom:9px; }
}
@media(prefers-reduced-motion:reduce){
  .heart-layer span { animation-duration:.5s; }
  .panda.is-eating .head,.panda.is-eating .mouth { animation:none; }
  .snack { animation-duration:.5s !important; }
}

@media(max-width:620px){
  body.portal-pets #game-view:not([hidden]) .actions { position:static; margin:20px 0 0; padding:0; border:0; background:transparent; max-width:none; }
  body.portal-pets .shell:has(#game-view:not([hidden])) { padding-bottom:max(25px,env(safe-area-inset-bottom)); }
}

.companion-avatar img { width:62px; height:62px; display:block; }
.food-icon img { width:30px; height:34px; display:block; }
.snack img { width:34px; height:34px; display:block; }

/* A little raising game: a shared play scene, daily care and a lasting collection. */
body.portal-pets { background:radial-gradient(ellipse at 20% 0,rgba(190,224,198,.08),transparent 45%),#0f1b16; }
body.portal-pets .shell { width:min(100%,1080px); background:transparent; padding-inline:28px; overflow:visible; }
body.portal-pets .app-header { margin-inline:0; padding-inline:0; }
body.portal-pets .hero { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:38px 0 26px; }
body.portal-pets .hero .eyebrow { display:block; margin:0 0 9px; color:#BEE0C6; font-size:11px; }
body.portal-pets .hero h1 { font-size:34px; letter-spacing:.02em; }
body.portal-pets .hero p:not(.eyebrow) { font-size:13px; color:#b6c6bc; margin:10px 0 0; }
body.portal-pets .home-label { position:static; flex:none; color:#E0CEE9; border-color:rgba(224,206,233,.22); padding:9px 12px; background:rgba(224,206,233,.04); }
.home-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:18px; align-items:stretch; }
body.portal-pets #game-view:not([hidden]) { display:contents; }
body.portal-pets .pet-stage { height:auto; min-height:428px; border-radius:26px; margin:0; box-shadow:inset 0 0 50px rgba(0,0,0,.13); }
body.portal-pets .pet-card { margin:0; padding:22px; border-radius:26px; background:linear-gradient(150deg,#22372f,#1a2b25); }
body.portal-pets .pet-title h2 { font-size:25px; }
body.portal-pets .pet-tools { flex-wrap:wrap; justify-content:end; }
body.portal-pets .bond-strip { margin-top:18px; padding:11px 0; }
body.portal-pets .bond-strip b { font-size:20px; }
body.portal-pets .meters { margin-top:18px; gap:12px; }
body.portal-pets .actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:18px; }
body.portal-pets .actions button { min-height:56px; border-radius:13px; gap:3px; padding:7px 4px; }
body.portal-pets .actions button small { font-size:10px; }
body.portal-pets .actions button:active { scale:.97; }
.next-milestone { display:flex; align-items:center; gap:9px; margin-top:17px; padding:12px 0; border-block:1px solid var(--line); }
.milestone-star { color:#F4D095; font-size:23px; }
.next-milestone>div { min-width:0; flex:1; }
.next-milestone b,.next-milestone small { display:block; }
.next-milestone b { font-size:12px; color:#F4D095; }
.next-milestone small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.5; }
.next-milestone button { border:0; padding:5px 0 5px 4px; color:#B1DEED; background:transparent; font-size:10px; cursor:pointer; white-space:nowrap; }
body.portal-pets .panda { right:calc(50% - 72px); bottom:68px; scale:1.12; }
body.portal-pets .pet-stage[data-form="cub"] .panda { scale:.9; }
body.portal-pets .pet-stage[data-form="sprout"] .panda { scale:1; }
body.portal-pets .pet-stage[data-form="sage"] .panda { scale:1.17; }
.stage-address { position:absolute; z-index:5; left:18px; top:18px; display:flex; align-items:center; gap:7px; font-size:11px; color:#d3e5d9; letter-spacing:.07em; }
.home-dot { display:block; height:6px; width:6px; border-radius:50%; background:#BEE0C6; box-shadow:0 0 0 4px rgba(190,224,198,.12); }
body.portal-pets .pet-stage .speech { top:62px; left:18px; max-width:190px; font-size:12px; background:#F5F3E8; border-radius:15px 15px 15px 3px; padding:10px 13px; }
body.portal-pets .pet-stage .moon { top:52px; right:38px; width:48px; height:48px; }
body.portal-pets .bamboo { bottom:70px; left:26px; opacity:.7; }
body.portal-pets .stage-floor { height:80px; }
body.portal-pets .level-chip { right:18px; bottom:20px; font-size:11px; padding:8px 11px; }
body.portal-pets .dance-hint { bottom:19px; left:14px; max-width:150px; padding:8px 4px; font-size:11px; }
body.portal-pets .heart-layer span { right:calc(50% - 12px); bottom:210px; }
body.portal-pets .snack { right:calc(50% - 18px); bottom:146px; }
body.portal-pets .gain { right:calc(50% + 44px); top:calc(36% + var(--row,0) * 31px); }
body.portal-pets .confetti i { left:50%; }
body.portal-pets .evolve-flash { background:radial-gradient(circle at 50% 54%,#fff 0,rgba(245,243,247,.9) 24%,rgba(244,194,244,.4) 50%,transparent 74%); }
.room-preview-note { position:absolute; z-index:7; bottom:64px; left:50%; transform:translateX(-50%); padding:7px 11px; white-space:nowrap; font-size:11px; color:#201D24; background:#B1DEED; border-radius:99px; }
.room-sky,.room-flowers,.shooting-stars,.memory-lights { position:absolute; inset:0; pointer-events:none; }
.room-sky { overflow:hidden; }
.room-sky i { display:none; position:absolute; border-radius:60%; width:110px; height:30px; background:#edf0eb; opacity:.5; box-shadow:25px -12px 0 -5px #edf0eb,-20px -5px 0 -8px #edf0eb; }
.room-sky i:first-child { top:140px; left:-15px; }
.room-sky i:nth-child(2) { top:100px; right:-20px; scale:.7; }
.room-sky i:nth-child(3) { top:240px; left:40px; scale:.5; }
.room-flowers i { display:none; position:absolute; bottom:64px; left:14%; width:7px; height:7px; border-radius:50%; background:#F4D095; box-shadow:-5px 0 #F4C2F4,5px 0 #F4C2F4,0 -5px #F4C2F4,0 5px #F4C2F4; }
.room-flowers i:nth-child(2) { left:31%; bottom:91px; scale:.6; }
.room-flowers i:nth-child(3) { left:73%; bottom:72px; scale:.8; }
.room-flowers i:nth-child(4) { left:87%; bottom:99px; scale:.65; }
.room-flowers i:nth-child(5) { left:7%; bottom:116px; scale:.7; }
body.portal-pets .pet-stage[data-room="bamboo"] { background:linear-gradient(180deg,#142b23 0 68%,#294430 69%); }
body.portal-pets .pet-stage[data-room="meadow"] { background:linear-gradient(180deg,#3b6460,#5b8580 68%,#42614a 69%); }
.pet-stage[data-room="meadow"] .moon { background:#F4D095; box-shadow:0 0 70px rgba(244,208,149,.3); }
.pet-stage[data-room="meadow"] .room-flowers i,.pet-stage[data-room="meadow"] .room-sky i { display:block; }
.pet-stage[data-room="meadow"] .bamboo { opacity:.25; }
body.portal-pets .pet-stage[data-room="starlight"] { background:radial-gradient(ellipse at 60% 75%,#436178,transparent 55%),linear-gradient(#19263e 65%,#2e4f5c 66%); }
.pet-stage[data-room="starlight"] .stars { opacity:1; }
.pet-stage[data-room="starlight"] .stage-floor { background:repeating-linear-gradient(180deg,rgba(177,222,237,.08) 0 1px,transparent 1px 12px),linear-gradient(#2b4f54,#18332f); }
body.portal-pets .pet-stage[data-room="cloud"] { background:linear-gradient(180deg,#496d82,#91adb0 75%,#c5d3cd); }
.pet-stage[data-room="cloud"] .room-sky i { display:block; }
.pet-stage[data-room="cloud"] .bamboo { opacity:.12; }
.pet-stage[data-room="cloud"] .stage-floor { background:#d0dbd4; border-radius:55% 40% 0 0; box-shadow:20px -12px 0 #d0dbd4,-25px -6px 0 #d0dbd4; }
body.portal-pets .pet-stage[data-room="aurora"] { background:linear-gradient(125deg,transparent 12%,rgba(190,224,198,.35) 28%,transparent 42%,rgba(224,206,233,.33) 58%,transparent 75%),linear-gradient(#19283b,#3e3e69 70%,#274b48); }
.pet-stage[data-room="aurora"] .stars,.pet-stage[data-room="aurora"] .fireflies { opacity:1; }
.pet-stage[data-room="aurora"] .stage-floor { background:linear-gradient(#c1d4ce,#8caaa1); }
.pet-stage[data-room="aurora"] .bamboo { opacity:.25; filter:hue-rotate(30deg); }

.life-board { grid-column:1/-1; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#192a23; }
.life-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:9px; gap:6px; background:#14231d; border-bottom:1px solid var(--line); }
.life-tabs button { min-height:49px; border:0; border-radius:13px; background:transparent; color:var(--muted); font-size:13px; font-weight:650; cursor:pointer; }
.life-tabs button[aria-selected="true"] { color:#201D24; background:#E0CEE9; box-shadow:0 3px 12px rgba(0,0,0,.12); }
.life-tabs button span { display:inline-block; margin-left:7px; font-size:10px; opacity:.75; }
body.portal-pets .life-panel { padding:25px; margin:0; border:0; background:transparent; box-shadow:none; }
.life-panel .section-title { align-items:center; }
.life-panel .section-title h2 { font-size:21px; margin-top:2px; }
.life-panel .eyebrow { display:block; font-size:10px; color:#BEE0C6; letter-spacing:.05em; }
.panel-intro { font-size:12px; color:var(--muted); line-height:1.7; margin:10px 0 22px; }
.care-tasks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.care-task { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; padding:16px 12px; border:1px solid rgba(224,206,233,.17); border-radius:17px; background:#21362b; color:var(--ink); text-align:left; cursor:pointer; }
.care-task:not(:disabled):hover { background:#2c4034; border-color:rgba(224,206,233,.5); }
.task-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; font-size:27px; color:#F4C2F4; background:rgba(244,194,244,.09); }
.task-icon img { width:25px; height:30px; }
.task-copy b,.task-copy small { display:block; }
.task-copy b { font-size:13px; line-height:1.4; }
.task-copy small { font-size:10px; color:var(--muted); margin-top:5px; line-height:1.6; }
.task-mark { grid-column:1/-1; color:#B1DEED; font-size:11px; text-align:right; }
.care-task.is-done { border-color:rgba(190,224,198,.35); background:rgba(190,224,198,.04); cursor:default; }
.care-task.is-done .task-icon { color:#BEE0C6; background:rgba(190,224,198,.1); }
.care-task.is-done .task-mark { color:#BEE0C6; font-size:17px; }
.daily-gift { display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:18px; margin-top:18px; padding:18px 22px; border:1px solid rgba(244,208,149,.22); border-radius:18px; background:linear-gradient(100deg,rgba(244,208,149,.08),rgba(224,206,233,.04)); }
.gift-copy b,.gift-copy small { display:block; }
.gift-copy b { font-size:14px; color:#F4D095; }
.gift-copy small { margin-top:6px; font-size:11px; color:var(--muted); line-height:1.5; }
.daily-gift button { min-height:44px; padding:10px 20px; border:0; border-radius:12px; background:#F4D095; color:#201D24; font-size:12px; font-weight:750; cursor:pointer; }
.daily-gift button:disabled { color:var(--muted); background:rgba(255,255,255,.06); cursor:default; }
.gift-art { position:relative; width:66px; height:60px; margin-top:5px; }
.gift-art i { position:absolute; }
.gift-art i:first-child { left:4px; bottom:0; width:58px; height:43px; border-radius:4px 4px 10px 10px; background:linear-gradient(90deg,#cca46a,#F4D095 50%,#cca46a); box-shadow:inset 0 -5px rgba(0,0,0,.13); }
.gift-art i:nth-child(2) { left:0; top:12px; width:66px; height:15px; border-radius:5px; background:#F4D095; box-shadow:0 3px 5px rgba(0,0,0,.2); transition:transform .4s; }
.gift-art i:nth-child(3) { top:12px; left:27px; width:12px; height:48px; background:#b78eae; }
.gift-art::before,.gift-art::after { content:""; position:absolute; top:0; width:24px; height:16px; border:5px solid #E0CEE9; border-radius:50% 50% 0 50%; }
.gift-art::before { left:9px; rotate:12deg; }
.gift-art::after { left:30px; transform:scaleX(-1) rotate(12deg); }
.is-ready .gift-art { animation:gift-wiggle 2.4s ease-in-out infinite; filter:drop-shadow(0 0 14px rgba(244,208,149,.25)); }
.is-opened .gift-art i:nth-child(2) { transform:translateY(-15px) rotate(-12deg); }
.is-opened .gift-art { opacity:.65; }
@keyframes gift-wiggle { 0%,80%,100% { rotate:0deg; } 86% { rotate:-6deg; } 92% { rotate:6deg; } }
.care-journal { margin-top:25px; padding-top:20px; border-top:1px solid var(--line); }
.care-journal>div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.care-journal b { font-size:13px; }
.care-journal small { color:var(--muted); font-size:11px; }
.care-journal ol { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); list-style:none; padding:0; margin:16px 0 0; gap:10px; }
.care-journal li { display:grid; justify-items:center; gap:7px; }
.care-journal li b { display:grid; place-items:center; width:38px; height:38px; color:#789080; border:1px dashed #526a5b; border-radius:50%; font-size:20px; background:rgba(0,0,0,.08); }
.care-journal li.is-today b { border-color:#E0CEE9; color:#E0CEE9; }
.care-journal li.is-complete b { border-style:solid; border-color:#BEE0C6; color:#BEE0C6; background:rgba(190,224,198,.09); }
.care-journal p { color:#8ca694; font-size:10px; line-height:1.7; margin:15px 0 0; }
body.portal-pets .growth { margin:0; padding:0; border:0; }
.growth-head b { font-size:13px; }
body.portal-pets .growth-track { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
body.portal-pets .growth-track li+li::before { display:none; }
body.portal-pets .node { min-height:160px; padding:15px 9px 12px; gap:5px; border:1px solid var(--line); border-radius:17px; background:rgba(0,0,0,.09); }
body.portal-pets .is-current .node { border-color:rgba(244,208,149,.6); background:rgba(244,208,149,.05); }
body.portal-pets .mini-wrap { width:60px; height:60px; border:0; background:rgba(190,224,198,.05); margin-bottom:4px; }
body.portal-pets .mini { scale:1.3; }
body.portal-pets .mini[data-mini="cub"] { scale:1.05; }
.form-name { font-size:12px; font-weight:650; color:var(--ink); line-height:1.5; text-align:center; }
.form-status { font-size:10px; color:var(--muted); }
.is-current .form-status { color:#F4D095; }
.is-locked .form-name { color:#98afa0; }
body.portal-pets .growth-caption { margin-top:16px; padding:12px; background:rgba(190,224,198,.05); border-radius:10px; text-align:left; line-height:1.7; }
.room-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.room-option { overflow:hidden; padding:8px 8px 12px; border:1px solid var(--line); border-radius:17px; background:rgba(0,0,0,.09); }
.room-option.is-selected { border-color:#BEE0C6; }
.room-window { position:relative; display:block; width:100%; height:115px; overflow:hidden; border:0; border-radius:11px; background:linear-gradient(#203a2c 72%,#375b3e 73%); cursor:pointer; }
.room-window small { position:absolute; left:9px; top:9px; padding:4px 6px; border-radius:6px; color:#F5F3F7; background:rgba(0,0,0,.25); font-size:10px; }
.room-window i:first-child { position:absolute; right:18px; top:15px; width:26px; height:26px; background:#E4D5A4; border-radius:50%; box-shadow:0 0 23px rgba(244,208,149,.25); }
.room-window i:nth-child(2) { position:absolute; left:24px; bottom:22px; width:6px; height:65px; background:repeating-linear-gradient(#6c9877 0 17px,#385b43 18px 20px); rotate:-8deg; box-shadow:13px 8px #6c9877; }
.room-window i:nth-child(3) { position:absolute; left:50%; bottom:15px; width:35px; height:18px; margin-left:-17px; background:radial-gradient(ellipse,rgba(190,224,198,.2),transparent); border-radius:50%; }
.room-window[data-room="meadow"] { background:linear-gradient(#6a9291 72%,#65805a 73%); }
.room-window[data-room="meadow"] i:nth-child(2) { height:8px; width:8px; border-radius:50%; background:#F4D095; box-shadow:8px 0 #F4C2F4,-8px 0 #F4C2F4,0 -8px #F4C2F4,0 8px #F4C2F4,88px 8px #E0CEE9; }
.room-window[data-room="starlight"] { background:radial-gradient(ellipse at 70% 90%,#6b899a,transparent 50%),linear-gradient(#1f304c 72%,#355966 73%); }
.room-window[data-room="starlight"] i:nth-child(2) { left:45px; top:30px; width:2px; height:2px; background:#F5F3F7; box-shadow:16px 17px #F5F3F7,33px -2px #F5F3F7,100px 24px #F5F3F7; }
.room-window[data-room="cloud"] { background:linear-gradient(#7699af,#afc5ca); }
.room-window[data-room="cloud"] i:nth-child(2) { left:10px; bottom:0; width:160px; height:29px; background:#dce7de; border-radius:50%; box-shadow:50px -15px 0 3px #dce7de; }
.room-window[data-room="aurora"] { background:linear-gradient(125deg,transparent 10%,#648978 28%,transparent 43%,#767398 65%,transparent 85%),#233448; }
.room-window[data-room="aurora"] i:nth-child(2) { width:2px; height:2px; top:23px; background:#F5F3F7; box-shadow:20px 17px #F5F3F7,66px -4px #F5F3F7,133px 33px #F5F3F7; }
.room-option h3 { font-size:14px; margin:12px 5px 0; }
.room-option p { min-height:36px; font-size:11px; line-height:1.7; color:var(--muted); margin:6px 5px 12px; }
.room-choose { display:block; width:calc(100% - 10px); margin:0 5px; min-height:39px; border:1px solid var(--line); border-radius:10px; background:rgba(224,206,233,.1); color:#E0CEE9; font-size:12px; cursor:pointer; }
.room-choose:disabled { background:transparent; color:#91ab9b; cursor:default; }
.is-selected .room-choose:disabled { background:rgba(190,224,198,.08); color:#BEE0C6; }
#room-message { margin-bottom:0; color:#B1DEED; font-size:12px; line-height:1.6; }
body.portal-pets .food-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:20px; }
body.portal-pets .food-row { grid-template-columns:32px minmax(0,1fr); gap:11px; padding:15px 12px; border-radius:17px; }
body.portal-pets .food-actions { display:flex; grid-column:1/-1; align-items:center; gap:8px; }
body.portal-pets .food-actions small { margin:0 auto 0 0; font-size:10px; }
body.portal-pets .food-actions button { min-width:40px; min-height:40px; padding:0 9px; font-size:11px; }
body.portal-pets .food-actions button+button { margin:0; }
body.portal-pets .earn-card { grid-column:1/-1; margin:0; padding:20px 25px; grid-template-columns:1fr auto auto; gap:23px; border-radius:23px; background:linear-gradient(110deg,rgba(244,208,149,.07),#1b2c24); }
body.portal-pets .earn-card button { grid-column:auto; min-width:150px; min-height:45px; padding-inline:15px; font-size:13px; }
body.portal-pets .earn-card strong b { font-size:30px; }
body.portal-pets .earn-card .eyebrow { display:block; font-size:9px; margin-bottom:5px; }
body.portal-pets .earn-card h2 { font-size:17px; }
body.portal-pets .earn-card #earn-detail { font-size:11px; }
body.portal-pets .game-help { border-radius:14px; padding-inline:15px; background:rgba(255,255,255,.015); }
body.portal-pets .status-card,body.portal-pets .error-card { margin:0; }

/* Three new chapters: cloud feather crown, orbiting stars and the final flowering aurora. */
.panda :is(.halo,.pet-orbit,.feather-crown,.flower-crown) { display:none; position:absolute; pointer-events:none; }
.panda .halo { z-index:-1; left:-22px; top:-15px; width:190px; height:190px; border:1px solid rgba(244,208,149,.5); border-radius:50%; box-shadow:0 0 0 9px rgba(224,206,233,.08),0 0 35px rgba(224,206,233,.12); }
.panda .pet-orbit { z-index:4; inset:-12px -20px -10px; animation:orbit 16s linear infinite; }
.pet-orbit i { position:absolute; width:9px; height:9px; background:#F4D095; clip-path:polygon(50% 0,61% 36%,100% 50%,61% 63%,50% 100%,37% 63%,0 50%,37% 36%); }
.pet-orbit i:first-child { top:12px; left:10px; }
.pet-orbit i:nth-child(2) { bottom:24px; right:0; width:13px; height:13px; background:#B1DEED; }
.pet-orbit i:nth-child(3) { right:0; top:45px; width:7px; height:7px; }
.panda .feather-crown { z-index:4; left:27px; top:-27px; width:58px; height:30px; border-bottom:6px solid #B1DEED; border-radius:35%; background:linear-gradient(75deg,transparent 30%,#E0CEE9 31% 42%,transparent 43% 50%,#B1DEED 51% 63%,transparent 64%); clip-path:polygon(0 90%,8% 30%,35% 65%,48% 0,66% 65%,93% 25%,100% 90%); }
.panda .flower-crown { z-index:4; left:42px; top:-8px; width:10px; height:10px; background:#F4D095; border-radius:50%; box-shadow:-23px 5px #F4C2F4,-12px -3px #E0CEE9,13px -3px #F4C2F4,26px 4px #E0CEE9,1px -8px #BEE0C6; }
.pet-stage:is([data-form="cloud"],[data-form="astral"],[data-form="eternal"]) :is(.scarf,.cape,.aura) { display:block; }
.pet-stage[data-form="cloud"] .feather-crown { display:block; }
.pet-stage[data-form="cloud"] .scarf { --scarf:#B1DEED; }
.pet-stage[data-form="cloud"] .cape { --cape-a:#CBE3E9; --cape-b:#76A2B6; }
.pet-stage[data-form="cloud"] .aura { --aura:rgba(177,222,237,.35); }
.cloud-seat { position:absolute; z-index:2; bottom:62px; left:50%; width:180px; height:24px; margin-left:-90px; border-radius:50%; background:#e2e9e3; opacity:0; box-shadow:30px -8px 0 -4px #e2e9e3,-30px -6px 0 -5px #e2e9e3; pointer-events:none; }
.pet-stage:is([data-form="cloud"],[data-form="eternal"]) .cloud-seat { opacity:.8; }
.pet-stage:is([data-form="astral"],[data-form="eternal"]) :is(.halo,.pet-orbit,.mark) { display:block; }
.pet-stage[data-form="astral"] .scarf { --scarf:#E0CEE9; }
.pet-stage[data-form="astral"] .cape { --cape-a:#8882B6; --cape-b:#3F426A; }
.pet-stage[data-form="astral"] .aura { --aura:rgba(224,206,233,.4); }
.pet-stage[data-form="astral"] .halo { transform:rotateX(56deg) rotateZ(-15deg); top:-15px; border-width:3px; border-color:#F4D095; }
.pet-stage[data-form="eternal"] .flower-crown { display:block; }
.pet-stage[data-form="eternal"] .scarf { --scarf:#BEE0C6; }
.pet-stage[data-form="eternal"] .cape { --cape-a:#BEE0C6; --cape-b:#A29AC5; }
.pet-stage[data-form="eternal"] .aura { --aura:rgba(190,224,198,.42); }
.pet-stage[data-form="eternal"] .halo { border:2px solid rgba(190,224,198,.7); box-shadow:0 0 0 7px rgba(244,194,244,.09),0 0 0 15px rgba(177,222,237,.1),0 0 38px rgba(190,224,198,.35); }
.pet-stage:is([data-form="cloud"],[data-form="astral"],[data-form="eternal"]) .stars { opacity:1; }
.pet-stage:is([data-form="astral"],[data-form="eternal"]) .fireflies { opacity:1; }
.shooting-stars i { position:absolute; right:-50px; top:100px; width:70px; height:1px; opacity:0; background:linear-gradient(90deg,transparent,#B1DEED); rotate:-24deg; }
.pet-stage:is([data-form="astral"],[data-form="eternal"]) .shooting-stars i { animation:shooting-star 9s linear infinite; }
.shooting-stars i:nth-child(2) { top:130px; animation-delay:4s !important; }
.memory-lights i { position:absolute; width:4px; height:4px; border-radius:50%; background:#F4C2F4; box-shadow:0 0 13px 4px rgba(244,194,244,.3); opacity:0; }
.memory-lights i:first-child { left:20%; top:40%; }
.memory-lights i:nth-child(2) { right:22%; top:52%; animation-delay:-1s; background:#B1DEED; }
.memory-lights i:nth-child(3) { left:40%; top:29%; animation-delay:-2s; background:#BEE0C6; }
.memory-lights i:nth-child(4) { right:13%; top:72%; animation-delay:-3s; }
.memory-lights i:nth-child(5) { left:15%; top:69%; animation-delay:-4s; background:#F4D095; }
.pet-stage[data-form="eternal"] .memory-lights i { animation:memory-glow 5s ease-in-out infinite; }
@keyframes orbit { to { rotate:360deg; } }
@keyframes shooting-star { 0%,80% { opacity:0; transform:translate(0,0); } 82% { opacity:1; } 95%,100% { opacity:0; transform:translate(-460px,100px); } }
@keyframes memory-glow { 0%,100% { opacity:.15; transform:translateY(0); } 50% { opacity:1; transform:translateY(-13px); } }
.mini[data-mini="cloud"] .a { left:7px; top:-8px; width:18px; height:14px; background:#B1DEED; clip-path:polygon(0 100%,0 35%,30% 65%,50% 0,70% 65%,100% 35%,100% 100%); }
.mini[data-mini="astral"] .a { left:0; top:0; width:32px; height:12px; border:2px solid #F4D095; border-radius:50%; rotate:-15deg; }
.mini[data-mini="eternal"] .a { left:12px; top:2px; width:6px; height:6px; border-radius:50%; background:#F4D095; box-shadow:-8px 1px #F4C2F4,8px 1px #BEE0C6,0 -5px #E0CEE9; }
@media(max-width:820px){
  body.portal-pets .shell { width:min(100%,650px); padding-inline:20px; }
  body.portal-pets .hero { padding-top:27px; gap:12px; }
  body.portal-pets .hero h1 { font-size:28px; }
  body.portal-pets .hero .home-label { font-size:10px; padding:7px 9px; }
  .home-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
  body.portal-pets .pet-stage { min-height:350px; }
  body.portal-pets .pet-card { padding:21px; }
  body.portal-pets .pet-tools { flex-wrap:nowrap; }
  body.portal-pets .care-tasks { grid-template-columns:1fr; gap:9px; }
  .care-task { grid-template-columns:40px minmax(0,1fr) auto; padding:12px; }
  .task-mark { grid-column:auto; }
  .task-copy small { font-size:11px; }
  .room-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.portal-pets .food-list { grid-template-columns:1fr; }
  body.portal-pets .food-row { padding:15px; }
  body.portal-pets .food-actions button { min-width:62px; min-height:44px; font-size:12px; }
  body.portal-pets .earn-card { grid-template-columns:1fr auto; gap:13px; padding:20px; }
  body.portal-pets .earn-card button { grid-column:1/-1; }
  body.portal-pets .daily-gift { grid-template-columns:60px minmax(0,1fr); padding:17px; gap:12px; }
  .gift-art { scale:.8; transform-origin:0 50%; }
  .daily-gift button { grid-column:1/-1; }
}
@media(max-width:440px){
  body.portal-pets .shell { padding-inline:16px; }
  body.portal-pets .app-header { margin-inline:0; padding-inline:0; }
  body.portal-pets .hero { align-items:start; }
  body.portal-pets .hero h1 { font-size:25px; }
  body.portal-pets .hero .eyebrow { font-size:10px; }
  body.portal-pets .hero p:not(.eyebrow) { font-size:11px; }
  body.portal-pets .hero .home-label { font-size:9px; padding:6px 8px; margin-top:3px; }
  body.portal-pets .pet-card { padding:18px; }
  body.portal-pets .pet-stage { min-height:330px; border-radius:23px; }
  body.portal-pets .life-panel { padding:19px 15px; }
  body.portal-pets .life-panel .section-title h2 { font-size:19px; }
  .life-tabs { gap:3px; padding:6px; }
  .life-tabs button { font-size:11px; min-height:46px; padding:6px 2px; border-radius:10px; }
  .life-tabs button span { display:block; margin:3px 0 0; font-size:9px; }
  body.portal-pets .node { min-height:135px; padding:12px 5px 10px; gap:4px; }
  body.portal-pets .growth-track { gap:7px; }
  body.portal-pets .mini-wrap { width:48px; height:48px; }
  .form-name { font-size:10px; }
  .form-status { font-size:9px; }
  .growth-head { align-items:start; }
  .growth-head small { font-size:10px; }
  .care-journal ol { gap:5px; }
  .care-journal li b { width:31px; height:31px; font-size:17px; }
  .care-journal li small { font-size:9px; }
  .room-list { gap:9px; }
  .room-option h3 { font-size:12px; }
  .room-option p { font-size:10px; min-height:50px; }
  .room-window { height:95px; }
  .room-choose { font-size:11px; }
  .next-milestone { gap:7px; }
  .next-milestone b { font-size:11px; }
  .next-milestone button { font-size:9px; }
}
@media(prefers-reduced-motion:reduce){
  .is-ready .gift-art,.panda .pet-orbit,.shooting-stars i,.memory-lights i { animation:none !important; }
  .pet-stage[data-form="eternal"] .memory-lights i { opacity:.65; }
}

/* Override the older shared portal's fixed game-column width for this cottage. */
body.portal-refresh.portal-pets { background:radial-gradient(ellipse at 20% 0,rgba(190,224,198,.08),transparent 45%),#0f1b16; }
body.portal-pets #pet-app { width:min(100%,1080px); max-width:none; background:transparent; padding-inline:28px; overflow:visible; }
#pet-app>.app-header { margin-inline:0; padding-inline:0; }
@media(max-width:820px){ body.portal-pets #pet-app { width:min(100%,650px); padding-inline:20px; } }
@media(max-width:440px){ body.portal-pets #pet-app { padding-inline:16px; } }