#mascot-view{padding:0;color:#302c30;background:#f5f4f3;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
#mascot-view:before,#mascot-view:after{content:none;display:none}
#mascot-view::-webkit-scrollbar{display:none}
.mascot-room{--mascot-accent:#e79c84;--mascot-ink:#332c2b;--mascot-muted:#817b7c;width:100%;min-height:100%;font-family:Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(160deg,#f5f5f5,#eceff1 260px,#f7f5f2 520px);padding-bottom:24px;-webkit-font-smoothing:antialiased}
.mascot-room *{box-sizing:border-box}.mascot-room [hidden]{display:none!important}
.mascot-room button{font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mascot-room button:disabled{cursor:default}.mascot-room button:focus-visible,.mascot-room summary:focus-visible{outline:2px solid #9b6555;outline-offset:3px}
.mascot-head.mini-document-head{background:transparent;position:relative;z-index:2}
.mascot-level-badge{font-size:11px;line-height:1;border:0;border-radius:0;padding:0;color:#655b58;background:none;font-weight:600;white-space:nowrap}
.mascot-hero{text-align:center;padding:0 20px 17px;margin:0 auto;max-width:480px}
.mascot-stage{position:relative;width:100%;height:227px;display:grid;place-items:center;isolation:isolate}
.mascot-stage:before{content:none;display:none}
.mascot-pedestal{display:none}
.mascot-art{width:240px;height:240px;max-width:100%;display:grid;place-items:center;transform-origin:50% 88%;animation:mascot-breath 5.5s ease-in-out infinite;animation-play-state:paused}
.mascot-character{display:block;width:100%;height:100%;object-fit:contain;user-select:none;animation:mascot-art-appear .22s ease-out;filter:none}
.mascot-stage[data-loading="true"] .mascot-art{opacity:.7;transition:opacity .18s ease}.mascot-stage[data-loading="false"] .mascot-art{opacity:1}
.mascot-art-message{position:absolute;left:12%;right:12%;bottom:20px;display:flex;flex-direction:column;gap:4px;padding:10px;background:#fffffff2;border-radius:8px;box-shadow:0 4px 12px #45414c0a;font-size:12px;color:#6d6260}
.mascot-outfit-name{font-size:24px;font-weight:700;letter-spacing:-.7px;line-height:1.18;margin:9px 0 5px;text-wrap:balance;color:#2f2b2e}
.mascot-hero-note{font-size:12px;line-height:17px;color:#817b7c;margin:0;min-height:17px}
.mascot-tabs{display:grid;grid-template-columns:1fr 1fr;margin:0 22px 17px;padding:4px;background:#e4e4e7a3;border:1px solid #dadddf70;border-radius:8px;max-width:none}
.mascot-tab{padding:11px 8px;border:0;background:transparent;border-radius:6px;font-size:13px;font-weight:600;line-height:18px;color:#878083;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.mascot-tab[aria-selected="true"]{color:#3b3332;background:#fffffff2;box-shadow:0 2px 5px #34323c0a,0 1px 1px #34323c0c}
.mascot-panel{padding:0 22px}.mascot-development>*+*{margin-top:16px}
.mascot-progress-card{padding:17px 16px 0;background:#fff9;border:1px solid #fff;border-radius:10px}
.mascot-progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.mascot-progress-top strong{font-size:13px;line-height:18px;font-weight:600}.mascot-progress-top>span{font-size:11px;color:#8d7b75;white-space:nowrap}
.mascot-xp-track{height:6px;background:#e5e4e3;border-radius:3px;overflow:hidden;margin-top:12px}.mascot-xp-track>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#e5a18c,#edb59d);transform-origin:left;border-radius:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mascot-next-reward{display:flex;width:100%;align-items:center;gap:10px;text-align:left;margin-top:8px;padding:5px 0 6px;border:0;background:none;color:#443936}
.mascot-next-reward>img{width:52px;height:52px;object-fit:contain;flex:none}.mascot-next-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.mascot-next-copy small{font-size:10px;color:#928783;line-height:13px}.mascot-next-copy strong{font-size:13px;font-weight:600;line-height:16px}.mascot-next-arrow{font-size:24px;color:#aaa0a0;line-height:20px;padding-left:4px}
.mascot-passive{padding:17px 16px;border-radius:10px;background:linear-gradient(118deg,#f9e8df,#f6eee7 65%,#fcf6ec);border:1px solid #fff4;box-shadow:inset 0 1px #fff9}
.mascot-passive-top{display:flex;align-items:center;gap:10px}.mascot-coin{width:35px;height:35px;object-fit:contain;flex:none}.mascot-passive-top>div{flex:1;min-width:0}.mascot-passive h2{font-size:13px;line-height:17px;font-weight:600;margin:0 0 4px}.mascot-passive p{font-size:10px;line-height:14px;margin:0;color:#9a7e72;white-space:normal}.mascot-passive-amount{font-size:28px;line-height:32px;font-weight:650;letter-spacing:-1px;color:#734d3e;font-variant-numeric:tabular-nums;padding-left:6px}
.mascot-passive-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.mascot-passive-time{font-size:10px;line-height:14px;color:#947d74;max-width:148px}.mascot-primary{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:10px;background:#eeab93;color:#4a3025;font-size:12px;line-height:16px;font-weight:700;padding:12px 20px;min-height:42px;min-width:100px;box-shadow:inset 0 1px #ffffff50;transition:transform .15s ease,opacity .15s ease}.mascot-primary:active:not(:disabled){transform:scale(.98)}.mascot-primary:disabled{background:#dbcfc7;color:#a49288;box-shadow:none}
.mascot-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}.mascot-section-title h2{font-size:13px;line-height:18px;font-weight:600;margin:0}.mascot-section-title>span{font-size:10px;line-height:14px;color:#9b9190;white-space:nowrap}
.mascot-today{padding-top:4px}.mascot-sources{display:flex;flex-direction:column}.mascot-source{display:grid;grid-template-columns:minmax(0,1fr) auto 40px 9px;align-items:center;column-gap:10px;min-height:46px;width:100%;text-align:left;border:0;border-bottom:1px solid #d5d1d033;padding:8px 0;color:#555052;background:none}.mascot-source:last-child{border:0}.mascot-source-name{font-size:12px;line-height:16px;font-weight:500}.mascot-source-reward{font-size:10px;color:#a0877d}.mascot-source-count{text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:#8e8684}.mascot-source-arrow{font-size:19px;color:#b0a8a7;line-height:18px}.mascot-source.is-complete .mascot-source-count{color:#8e9c86}.mascot-source.is-complete .mascot-source-reward{color:#aba4a0}
.mascot-roadmap{border-top:1px solid #dedbd9;margin-top:13px!important;padding-top:3px}.mascot-roadmap summary{list-style:none;cursor:pointer;padding:14px 0;font-size:12px;line-height:18px;font-weight:600;color:#867b76;display:flex;justify-content:space-between}.mascot-roadmap summary::-webkit-details-marker{display:none}.mascot-roadmap summary:after{content:'+';font-size:18px;font-weight:400}.mascot-roadmap[open] summary:after{content:'−'}.mascot-roadmap ol{list-style:none;margin:0;padding:0}.mascot-roadmap li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0}.mascot-roadmap-level{width:26px;height:26px;border-radius:5px;border:1px solid #d8d3cf;display:grid;place-items:center;font-size:11px;color:#9e928a}.mascot-roadmap li.is-unlocked .mascot-roadmap-level{background:#e9d4c6;border-color:#e9d4c6;color:#805a45}.mascot-roadmap li>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.mascot-roadmap strong{font-size:12px;font-weight:600;line-height:16px}.mascot-roadmap small{font-size:10px;line-height:14px;color:#9b8f87}.mascot-roadmap-xp{font-size:10px;white-space:nowrap;color:#a09187}.mascot-roadmap .is-unlocked .mascot-roadmap-xp{color:#8c9b80}
.mascot-wardrobe .mascot-section-title{margin-bottom:12px}.mascot-outfit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.mascot-outfit-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;padding:6px 4px 10px;border:1px solid #fff;border-radius:10px;background:#ffffff75;color:#544744;box-shadow:0 1px 3px #57525a05;transition:border-color .15s ease,background .15s ease;overflow:hidden}.mascot-outfit-card.is-selected{border-color:#cd9c87;background:#f4e5db;box-shadow:inset 0 0 0 1px #cd9c8750}.mascot-outfit-card img{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:contain;max-width:110px}.mascot-outfit-card strong{font-size:10px;line-height:13px;min-height:26px;font-weight:600;display:grid;place-items:center;text-align:center;padding:0 3px;text-wrap:balance}.mascot-outfit-status{font-size:9px;line-height:13px;color:#a58a7d;margin-top:4px}.mascot-outfit-card.is-locked .mascot-outfit-status{color:#a2a0a1}.mascot-outfit-card.is-locked .mascot-outfit-status:before{content:'';display:inline-block;width:5px;height:5px;border:1px solid currentColor;border-radius:2px;margin-right:4px;transform:translateY(-1px)}
.mascot-equip-row{text-align:center;padding-top:16px;min-height:92px}.mascot-equip-row p{font-size:11px;line-height:16px;color:#97857d;margin:0 0 11px}.mascot-equip{width:100%;min-height:46px;font-size:13px}.mascot-equip:disabled{background:#e9e3de;color:#a09289}
.mascot-notice{margin:0 22px 15px;border-radius:10px;background:#eceee5;color:#6d795f;font-size:11px;line-height:16px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.mascot-notice.is-error{background:#f3e6df;color:#9a6453}.mascot-text-button{color:inherit;white-space:nowrap;border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;padding:4px 0;font-size:11px;line-height:16px}
.mascot-local-preview{margin:24px 22px 0;border-top:1px dashed #cfcac5;padding-top:12px;color:#a09994;font-size:10px}.mascot-local-preview summary{cursor:pointer;line-height:20px}.mascot-local-preview p{line-height:15px;margin:8px 0 12px}.mascot-preview-levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.mascot-preview-levels button,.mascot-preview-tools button{border:1px solid #d9d5d1;background:#fff8;border-radius:7px;min-height:33px;color:#8c817a;font-size:11px}.mascot-preview-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.mascot-local-preview button:disabled{opacity:.5}
#mascot-view.active .mascot-art{animation-play-state:running}.mascot-motion-paused .mascot-art,.app.paused .mascot-art{animation-play-state:paused!important}
@keyframes mascot-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.008)}}
@keyframes mascot-art-appear{from{opacity:.4}to{opacity:1}}
@media(max-width:350px){.mascot-tabs{margin-inline:16px}.mascot-panel{padding-inline:16px}.mascot-notice,.mascot-local-preview{margin-inline:16px}.mascot-hero{padding-inline:12px}.mascot-stage{height:201px}.mascot-art{width:215px;height:215px}.mascot-outfit-name{font-size:22px}.mascot-outfit-grid{gap:7px}.mascot-outfit-card{border-radius:8px}.mascot-outfit-card strong{font-size:9px}.mascot-source{column-gap:7px;grid-template-columns:minmax(0,1fr) auto 32px 8px}.mascot-progress-card,.mascot-passive{padding-inline:13px}.mascot-passive-top{gap:8px}.mascot-passive h2{font-size:12px}.mascot-progress-top strong{font-size:12px}.mascot-progress-top>span{font-size:10px}}
@media(max-height:700px){.mascot-stage{height:183px}.mascot-art{width:201px;height:201px}.mascot-outfit-name{margin-top:5px;font-size:22px}.mascot-hero{padding-bottom:13px}}
@media(prefers-reduced-motion:reduce){.mascot-room *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Feedback floats above the tab bar without moving the wardrobe or XP cards. */
.mascot-notice{position:fixed;z-index:45;left:50%;bottom:max(calc(72px + env(safe-area-inset-bottom,0px)),calc((100dvh - 980px)/2 + 72px));width:min(calc(100vw - 44px),396px);transform:translateX(-50%);margin:0;box-shadow:0 4px 18px #5c51451a}

.mascot-art{position:relative;cursor:pointer}.mascot-art.has-mascot-motion{animation:none!important}.mascot-art:focus-visible{outline:2px solid #c79c8d;outline-offset:0;border-radius:8px}
.mascot-next-bonus{font-size:11px;line-height:15px;color:#8b5c49}
.mascot-roadmap-note{margin:9px 0 0;font-size:10px;line-height:15px;color:#9b8f87}
/* Keep the outgoing screen in its existing layout for the short crossfade. */
.view.companion-view-transition{transition:none!important;will-change:transform,opacity}
.view.companion-view-exit{visibility:visible;pointer-events:none;z-index:2}
#profile-view.companion-view-exit{display:flex}
.view.companion-view-enter{z-index:3}
/* Fixed art boxes keep WebKit's intrinsic image sizes out of card layout. */
#mascot-view{scroll-padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.mascot-room{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.mascot-outfit-grid{align-items:stretch;grid-auto-rows:1fr}
.mascot-outfit-card{flex:none;gap:0;padding-top:7px;padding-bottom:11px}
.mascot-outfit-frame{display:block;position:relative;flex:0 0 auto;width:100%;height:0;padding-bottom:100%;margin-bottom:5px;overflow:visible}
.mascot-outfit-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;flex:none}
.mascot-outfit-card strong{flex:none;width:100%;height:28px;min-height:28px;line-height:14px;align-content:center}
.mascot-outfit-status{flex:none;display:block;width:100%;height:14px;line-height:14px;text-align:center;margin-top:5px;white-space:nowrap}
.mascot-equip-row{padding-bottom:8px}
.mascot-ui-icon{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mascot-reward-icon{display:block;flex:none;width:18px;height:18px;object-fit:contain}
.mascot-reward-part{display:inline-flex;align-items:center;gap:5px;min-width:0;line-height:18px}
.mascot-next-bonus{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.mascot-next-bonus .mascot-ui-icon,.mascot-next-bonus .mascot-reward-icon{width:17px;height:17px}
.mascot-section-title h2{display:flex;align-items:center;gap:7px}.mascot-section-title h2>.mascot-ui-icon{color:#a78270}
.mascot-source{grid-template-columns:20px minmax(0,1fr) auto 34px 8px;column-gap:9px}
.mascot-source>.mascot-ui-icon{color:#a18d80}.mascot-source-count{display:flex;justify-content:flex-end;align-items:center}
.mascot-source-count .mascot-ui-icon{width:16px;height:16px}
.mascot-roadmap li{grid-template-columns:52px minmax(0,1fr) auto;gap:10px;min-height:82px;padding:12px 0;border-bottom:1px solid #ddd7d047}
.mascot-roadmap li:last-child{border-bottom:0}
.mascot-roadmap-art{display:block;width:52px;height:62px;object-fit:contain;flex:none}
.mascot-roadmap li>.mascot-roadmap-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.mascot-roadmap .mascot-roadmap-level,.mascot-roadmap li.is-unlocked .mascot-roadmap-level{display:block;width:auto;height:auto;border:0;border-radius:0;background:none;padding:0;color:#a0948a;font-size:9px;line-height:12px}
.mascot-roadmap-rewards{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;font-size:10px;line-height:16px;color:#8d7565}
.mascot-roadmap-rewards .mascot-ui-icon,.mascot-roadmap-rewards .mascot-reward-icon{width:17px;height:17px}
.mascot-roadmap-xp{display:flex;align-items:center;gap:4px;font-size:9px;line-height:14px}
.mascot-roadmap-xp .mascot-ui-icon{width:13px;height:13px}
@media(max-width:350px){.mascot-source{grid-template-columns:18px minmax(0,1fr) auto 29px 7px;column-gap:6px}.mascot-source-name{font-size:11px}.mascot-source-reward{font-size:9px}.mascot-roadmap li{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}.mascot-roadmap-art{width:44px;height:56px}.mascot-roadmap strong{font-size:11px}.mascot-roadmap-rewards{font-size:9px}.mascot-roadmap-xp{font-size:8px;gap:3px}}