:root {font-family: ui-rounded,"SF Pro Rounded","PingFang SC","Microsoft Yahei",system-ui,sans-serif; color:#4d4c61; background:#f7f5ff; font-synthesis:none;-webkit-tap-highlight-color:transparent;}
* {box-sizing:border-box} html,body {margin:0;min-height:100%;overscroll-behavior:none;} body {background:radial-gradient(circle at 0 0,#fff2d4,transparent 44%),radial-gradient(circle at 100% 85%,#e2f9fb,transparent 38%),#f7f5ff;}
button,input {font:inherit} button {cursor:pointer;touch-action:manipulation} button:disabled {cursor:not-allowed;opacity:.5} button:focus-visible,input:focus-visible {outline:3px solid #726cf3;outline-offset:3px} a {color:#7965cc} small {font-size:.77em} h1,h2,h3,p {margin:0} h1 {font-size:clamp(24px,3vw,35px);letter-spacing:-.04em} h2 {font-size:clamp(20px,2.5vw,27px)} h3 {font-size:18px}
.app {max-width:1600px;margin:0 auto;min-height:100dvh; padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.topbar {height:85px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px clamp(14px,3vw,34px)}.identity {display:flex;align-items:center;gap:12px}.identity .mark {font-size:34px;display:grid;place-items:center;width:57px;height:57px;border-radius:19px;background:#fff;box-shadow:0 6px 18px #7b77a01a}.identity strong {display:block;font-size:23px;letter-spacing:1px;color:#6f54a4}.identity small {display:block;margin-top:2px;color:#a49aa9}.topstats{display:flex;align-items:center;gap:9px}.currency,.icon-btn {border:2px solid #fff;background:#fffaf8;box-shadow:0 3px 12px #8877a019;border-radius:18px;min-height:47px;padding:9px 13px;font-weight:800;white-space:nowrap}.currency b {font-size:18px}.icon-btn {min-width:47px;padding:8px;font-size:23px}
.layout {display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:0 22px 18px;min-height:calc(100dvh - 85px)}.nav {background:#fff;border:2px solid #fff;box-shadow:0 6px 30px #9581a015;border-radius:29px;display:flex;flex-direction:column;align-items:stretch;padding:13px 8px;gap:7px;align-self:start;position:sticky;top:16px}.nav-btn {border:0;background:transparent;border-radius:19px;padding:10px 4px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#8d879e}.nav-btn span {font-size:26px;line-height:1}.nav-btn b {font-size:12px}.nav-btn.active {background:#f1eaff;color:#7552ae;box-shadow:inset 0 0 0 1px #e4dafa}.nav-btn:hover {background:#f7f3ff}
#main{min-width:0;align-self:start;padding-bottom:12px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 17px}.subtext{color:#958fa3;font-weight:600;font-size:13px;margin-top:5px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.1em;color:#a68bc3;text-transform:uppercase;margin-bottom:5px}.bubble-tag {background:white;border-radius:999px;border:1px solid #f0e8ff;color:#a078b3;padding:9px 13px;white-space:nowrap;font-size:13px;font-weight:800}.panel{background:#fff;border-radius:28px;box-shadow:0 10px 30px #857d9915;border:2px solid #ffffff;padding:20px}.home-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.95fr);gap:17px}.home-left,.home-right{display:flex;flex-direction:column;gap:16px;min-width:0}.scene-card{overflow:hidden;padding:0}.scene-top {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 22px 0}.scene-top h2 {font-size:23px;color:#635081}.scene-top .chip{background:#ffffffbd;border:1px solid white;border-radius:30px;padding:7px 11px;color:#746c85;font-weight:750;font-size:12px}
.scene{height:clamp(285px,40vw,425px);overflow:hidden;position:relative;margin:10px 13px 0;border-radius:25px;background:linear-gradient(180deg,#bbebff,#e9faff 62%,#e7fbe3 62%);isolation:isolate}.scene.blossom{background:linear-gradient(180deg,#ffe1f0,#fff5fa 63%,#fce0ed 63%)}.scene.beach{background:linear-gradient(180deg,#a5e7f9,#def9ff 58%,#98e7e1 58%,#70cdd7 72%,#ffeaba 72%)}.scene.night{background:linear-gradient(180deg,#6b78aa,#bfafd0 63%,#9db7c4 63%)}.scene.sunset{background:linear-gradient(180deg,#ffd1a5,#ffebd4 65%,#cbe8b2 65%)}
.scene::before{content:"";position:absolute;width:95px;height:95px;border-radius:50%;top:27px;right:19%;background:#fff8b8;box-shadow:0 0 0 19px #ffffff49;opacity:.9}.scene.night::before {background:#fff9d7;box-shadow:0 0 0 15px #ffffff18}.cloud{position:absolute;width:134px;height:36px;background:#fff;opacity:.8;border-radius:35px;top:70px;left:8%;box-shadow:0 5px 0 #fff5}.cloud:before {content:"";position:absolute;background:inherit;border-radius:50%;height:67px;width:66px;left:25px;top:-33px}.cloud:nth-of-type(2){left:auto;right:4%;top:120px;transform:scale(.65)}.hill{position:absolute;bottom:21%;left:-10%;width:72%;height:36%;border-radius:70% 70% 0 0;background:#91d3aa;opacity:.72}.hill:nth-of-type(4){left:38%;width:85%;height:31%;background:#6fc89a}.scene.blossom .hill{background:#f3b5d4}.scene.blossom .hill:nth-of-type(4){background:#eaa3c3}.scene.beach .hill{opacity:0}.scene.night .hill{background:#7191a4}.scene.night .hill:nth-of-type(4){background:#668997}.ground{position:absolute;bottom:0;height:23%;width:100%;background:#b9eac2;border-radius:60% 60% 0 0/25% 25% 0 0}.scene.blossom .ground{background:#ffd2e5}.scene.beach .ground{background:#fee8b1}.scene.night .ground{background:#81a9b0}.scene.sunset .ground{background:#aad48d}
.scene-stickers{pointer-events:none}.scene-decor{position:absolute;z-index:2;font-size:clamp(25px,4.6vw,52px);filter:drop-shadow(0 6px 3px #4b776626)}.scene-decor.left{bottom:15%;left:6%}.scene-decor.right{bottom:18%;right:6%}.scene-decor.extra{bottom:29%;left:15%;font-size:24px}.pet-platform{position:absolute;z-index:4;inset:15% 5% 5%;display:grid;place-items:center}.pet-shadow{position:absolute;bottom:2%;width:40%;height:9%;background:#4c73513d;border-radius:50%;filter:blur(7px)}.pet-avatar-main{position:relative;z-index:3;display:grid;place-items:center;border:0;background:none;padding:0;width:clamp(175px,32vw,310px);height:clamp(175px,32vw,310px);transform-origin:center bottom;animation:bob 3.1s ease-in-out infinite}.pet-avatar-main:active{transform:scale(.93)}.pet-avatar-main svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 0 #736e9a1b)}.pet-emoji{font-size:clamp(100px,17vw,180px);filter:drop-shadow(0 12px 2px #a081921c)}.pet-hat{position:absolute;top:0%;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:clamp(40px,5vw,65px);z-index:7;filter:drop-shadow(0 2px 1px #a58a6659)}.pet-speech{z-index:6;position:absolute;top:4%;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:20px;background:#fffdfa;box-shadow:0 3px 10px #847a991c;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:850;color:#826c9d}.pet-speech:after{content:"";position:absolute;border:7px solid transparent;border-top-color:#fffdfa;top:100%;left:50%}.float-heart{position:absolute;z-index:9;pointer-events:none;top:43%;left:50%;font-size:25px;animation:heartfloat 1s ease-out forwards}.scene-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px 17px}.pet-info{display:flex;align-items:center;gap:9px}.pet-mini{font-size:29px;width:45px;height:45px;background:#fff5fb;border-radius:14px;display:grid;place-items:center}.pet-info strong{display:block;font-size:18px}.pet-info small{display:block;color:#9b93a1}.xp-meta{text-align:right;font-size:12px;font-weight:800;color:#907c9a;min-width:105px}.xp-bar,.meter{height:10px;border-radius:30px;background:#f2eef5;overflow:hidden;margin-top:5px}.xp-bar i,.meter i{display:block;height:100%;background:linear-gradient(90deg,#b6a0ff,#ff9cb8);border-radius:inherit;transition:width .4s}
.action-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.action-tile {border:0;border-radius:21px;min-height:105px;padding:13px 4px;background:#fff;box-shadow:0 5px 20px #aa99bc17;display:flex;flex-direction:column;align-items:center;gap:4px;color:#625e7d}.action-tile span{font-size:32px}.action-tile b{font-size:14px}.action-tile small{font-size:11px;color:#a89db0}.action-tile:active,.card-button:active,.primary:active {transform:scale(.97)}
.stats-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 15px;margin-top:16px}.stat-row{min-width:0}.stat-label{display:flex;justify-content:space-between;gap:4px;font-weight:850;font-size:12px}.stat-label span:last-child{color:#9690a6}.stat-row:nth-child(1) .meter i{background:#ffbb75}.stat-row:nth-child(2) .meter i{background:#f8a2bf}.stat-row:nth-child(3) .meter i{background:#84dce2}.stat-row:nth-child(4) .meter i{background:#c3aaff}.tip{font-weight:700;font-size:12px;color:#a18aa4;margin-top:15px}.heading-row{display:flex;align-items:center;justify-content:space-between;gap:7px}.heading-row h3{font-size:18px}.see-all{border:0;color:#8b76c1;background:#f2eafa;border-radius:20px;padding:7px 11px;font-size:12px;font-weight:850;white-space:nowrap}.quest-row {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px dashed #f0ecf3}.quest-row:last-child{border:0;padding-bottom:0}.quest-info{min-width:0;display:flex;align-items:center;gap:8px}.quest-emoji{font-size:24px}.quest-info b{display:block;font-size:13px}.quest-info small{display:block;color:#a89bac;margin-top:2px}.mini-reward{border:0;border-radius:13px;background:#ffecaa;color:#956e24;font-size:12px;padding:9px 10px;font-weight:900;white-space:nowrap}.mini-reward.done{background:#f1eef5;color:#998ca1}.primary{border:0;border-radius:17px;background:linear-gradient(110deg,#9882ee,#d49de9);color:white;font-weight:900;padding:13px 20px;box-shadow:0 5px 14px #9585d845;min-height:45px}.secondary{border:2px solid #e9e0f9;border-radius:17px;background:#fff;color:#8665ba;font-weight:850;padding:11px 16px;min-height:45px}.danger{color:#bd6280;border-color:#f7dae7}.banner{border-radius:25px;background:linear-gradient(120deg,#f9dff7,#e4eafa);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}.banner p{font-size:13px;color:#9582a4;margin-top:4px}.banner-emoji{font-size:51px}.collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:15px}.pet-card{border-radius:24px;padding:13px;background:white;box-shadow:0 5px 18px #8a77921d;min-height:192px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:space-between;text-align:center;border:2px solid transparent}.pet-card.selected{border-color:#baa5f2;background:#fffcff}.pet-card .pet-illustration{height:89px;display:grid;place-items:center;width:100%;background:linear-gradient(145deg,#fff5ed,#f5ebff);border-radius:19px;overflow:hidden}.pet-card .pet-illustration svg{height:107px;width:107px;transform:translateY(10px)}.pet-card .pet-illustration .pet-emoji{font-size:76px}.pet-card b{font-size:16px}.pet-card small{font-size:12px;color:#9f96a5}.pet-card button{width:100%;padding:9px;font-weight:800;min-height:39px;border-radius:13px;border:0;background:#f2eaff;color:#775bb6}.pet-card button.owned{background:#e4f7ec;color:#3e9d78}.filters{display:flex;gap:9px;margin:0 0 17px;overflow-x:auto;padding-bottom:3px}.filter{border:1px solid #eae1f5;background:#fff;padding:9px 16px;border-radius:999px;font-weight:800;color:#93819f;white-space:nowrap}.filter.active{background:#8f76d5;color:white;border-color:#8f76d5}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.game-card{border:0;border-radius:25px;min-height:185px;padding:25px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;color:#66557c;background:linear-gradient(135deg,#fff3be,#ffdfdb)}.game-card:nth-child(2){background:linear-gradient(135deg,#d4f8ea,#dbf6ff)}.game-card:nth-child(3){background:linear-gradient(135deg,#ede2ff,#fbe2ff)}.game-card:nth-child(4){background:linear-gradient(135deg,#e1edff,#fff1d7)}.game-card .game-emoji{font-size:48px}.game-card b{font-size:21px}.game-card small{color:#7a7194}.game-card .go{margin-top:auto;background:#ffffffad;border-radius:12px;padding:7px 12px;font-size:13px;font-weight:850}
.zone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.zone{border:0;border-radius:24px;padding:20px;min-height:169px;display:flex;flex-direction:column;align-items:start;justify-content:space-between;text-align:left;color:#625a7b}.zone:nth-child(1){background:#daf8e5}.zone:nth-child(2){background:#ffe3ee}.zone:nth-child(3){background:#d6f5fa}.zone:nth-child(4){background:#e6e4ff}.zone span{font-size:44px}.zone strong{font-size:19px}.zone small{color:#827891}.zone .tag{background:#ffffffb5;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}.zone.visited{filter:saturate(.6)}.sticker-collection{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.sticker{background:#fff8f1;border-radius:17px;min-width:65px;padding:9px;text-align:center;font-size:27px}.sticker small{display:block;color:#8f829b;font-size:10px}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.shop-card{border-radius:22px;background:#fff;border:2px solid transparent;padding:13px;text-align:center;display:grid;justify-items:center;gap:9px;min-height:162px}.shop-card.equipped{border-color:#e9c7f6}.shop-card>span{font-size:48px;background:#fff3f7;border-radius:18px;min-width:84px;padding:7px}.shop-card b{font-size:15px}.shop-card small{color:#a193a1}.shop-card button{width:100%;border:0;border-radius:12px;background:#f4e8ff;color:#8468b5;min-height:36px;font-weight:850}
.diary-list{display:flex;flex-direction:column;gap:10px}.diary-entry{display:flex;align-items:center;gap:12px;background:#fcf9ff;border:1px solid #f5edf9;border-radius:17px;padding:13px}.diary-entry span{font-size:28px}.diary-entry b{display:block;font-size:13px}.diary-entry small{display:block;color:#9a8ca4;margin-top:4px}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}.award{background:#fff8ed;border-radius:20px;text-align:center;padding:15px 7px}.award.locked{opacity:.55;filter:grayscale(.8)}.award>span{font-size:40px}.award b{display:block;margin-top:5px;font-size:14px}.award small{color:#97889a;font-size:11px}
.modal-root:empty{display:none}.modal-root{position:fixed;inset:0;z-index:50;background:#3b31537d;display:grid;place-items:center;padding:16px;backdrop-filter:blur(6px)}.modal{background:#fffdfd;border:3px solid #fff;max-width:min(680px,96vw);width:100%;max-height:min(91dvh,850px);overflow:auto;border-radius:28px;padding:23px;box-shadow:0 26px 75px #382b5360;position:relative}.modal.wide{max-width:min(810px,96vw)}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.modal-header h2{font-size:23px}.close{border:0;background:#f5effa;border-radius:15px;width:44px;height:44px;font-size:23px;flex-shrink:0}.modal-content{font-size:14px;color:#8b7e9a}.modal-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.modal-buttons button{flex:1}.form-input{border:2px solid #e9ddf7;border-radius:15px;padding:13px;width:100%;min-height:48px;background:#fff;font-size:16px;color:#554468;margin-top:12px}.name-preview{font-size:70px;text-align:center;margin:15px}.mini-game-header{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px;font-weight:850}.mini-stage{height:350px;background:linear-gradient(150deg,#eaf9ff,#f9e6ff);border:2px dashed #d9caf2;border-radius:23px;position:relative;overflow:hidden;touch-action:manipulation}.target{position:absolute;display:grid;place-items:center;border:0;background:transparent;font-size:clamp(40px,9vw,60px);width:75px;height:75px;animation:pop .22s ease both;filter:drop-shadow(0 5px 1px #a8888222)}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.memory-tile{aspect-ratio:1/1;border:2px solid #e7dbff;border-radius:16px;background:linear-gradient(135deg,#bca1f5,#8ccae9);color:white;font-size:clamp(25px,5vw,41px);font-weight:900;display:grid;place-items:center}.memory-tile.flipped{background:#fff9ef;border-color:#ffd998}.memory-tile.matched{background:#e6f7e8;border-color:#9ad9b0}.song-pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px auto;max-width:370px}.song-pad{border:5px solid #ffffffb8;border-radius:26px;min-height:110px;font-size:44px;transition:filter .1s, transform .1s}.song-pad:nth-child(1){background:#ffb3c6}.song-pad:nth-child(2){background:#b7e5a6}.song-pad:nth-child(3){background:#f9dc80}.song-pad:nth-child(4){background:#a7d9ff}.song-pad.lit{filter:brightness(1.16) saturate(1.5);transform:scale(.93);box-shadow:0 0 0 5px #b7a4ea}.math-equation{font-size:clamp(30px,6vw,48px);font-weight:900;text-align:center;padding:23px 0;color:#7d63b1}.math-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.math-opt{border:2px solid #dbcdfa;background:#f8f2ff;border-radius:19px;padding:18px;font-weight:900;font-size:24px;color:#7e6ba7}.math-opt:active{background:#e5fbf1}.confetti{font-size:68px;text-align:center;margin:14px}.result{font-size:20px;text-align:center;font-weight:900;color:#8a68bd}.micro{font-size:12px;color:#9d91a6;line-height:1.6}.note{padding:11px;border-radius:13px;background:#fff4d9;color:#9d7d48;margin:12px 0;font-size:12px}.section-gap{margin-top:15px}.empty{background:#fff;text-align:center;padding:25px;border-radius:20px;color:#9c8fa6}.settings-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.settings-actions button{min-height:55px}.flex-spacer{flex:1}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}} @keyframes pop{0%{scale:.3;opacity:0}100%{scale:1;opacity:1}} @keyframes heartfloat{to{opacity:0;transform:translate(-8px,-95px) rotate(20deg)}}
.toast{position:fixed;z-index:80;pointer-events:none;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;transition:.25s;background:#56466d;color:white;border-radius:999px;padding:13px 19px;font-weight:850;max-width:90vw;text-align:center;box-shadow:0 8px 25px #4d38634a}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1030px){.home-layout{grid-template-columns:1fr}.home-right{display:grid;grid-template-columns:1fr 1fr}.home-right .banner{grid-column:span 2}.scene{height:340px}}
@media(max-width:700px){.topbar{height:70px;padding:6px 13px}.identity .mark{width:44px;height:44px;font-size:27px;border-radius:13px}.identity strong{font-size:18px}.identity small{font-size:10px}.topstats{gap:5px}.currency,.icon-btn{min-height:39px;padding:7px 8px;border-radius:13px;font-size:13px}.currency b{font-size:14px}.icon-btn{min-width:39px;font-size:18px}.layout{display:flex;flex-direction:column;padding:0 10px 82px;gap:7px;min-height:calc(100dvh - 70px)}.nav{order:2;position:fixed;bottom:0;left:0;right:0;top:auto;z-index:20;border-radius:19px 19px 0 0;flex-direction:row;padding:7px 5px calc(7px + env(safe-area-inset-bottom));justify-content:space-around;gap:1px;box-shadow:0 -3px 20px #9884b124}.nav-btn{min-height:53px;flex:1;border-radius:13px;padding:5px 1px}.nav-btn span{font-size:22px}.nav-btn b{font-size:10px}.page-head{margin:6px 5px 13px}.bubble-tag{display:none}.home-right{display:flex}.home-right .banner{grid-column:auto}.scene{height:340px}.scene-top{padding:15px 14px 0}.scene-top h2{font-size:20px}.scene-bottom{padding:12px}.panel{padding:15px}.scene-card{padding:0}.action-row{gap:7px}.action-tile{min-height:92px}.action-tile span{font-size:26px}.action-tile b{font-size:12px}.action-tile small{font-size:10px}.game-card{min-height:173px;padding:16px}.game-card b{font-size:18px}.shop-grid{grid-template-columns:repeat(2,1fr)}.mini-stage{height:310px}}
@media(max-width:380px){.currency:last-of-type{display:none}.identity small{display:none}.game-grid,.zone-grid{grid-template-columns:1fr}.scene{height:295px}.pet-avatar-main{width:190px;height:190px}.pet-speech{font-size:11px}}
@media(min-width:701px) and (max-height:750px){.nav-btn{min-height:58px}.scene{height:300px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}