:root{--bg:#c8e27c;--sky:#95e1f3;--text:#000000e6;--muted:#00000073;--accent:#ff5331;--card-stroke:#b87f1ff2;--card-fill:#fff;--shadow:0 2px 8px #0000000f;--radius-lg:26px;--radius-card:22px;--nav-h:78px;--mobile-w:min(430px, 100vw);--mobile-h:100vh;--w:430px;--font:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background:#2c2c2e}body{font-family:var(--font);color:var(--text);min-height:100dvh;background:#2c2c2e;justify-content:center;align-items:center;min-height:-webkit-fill-available;margin:0;display:flex;overflow:hidden}@media (width<=430px){html,body{background:var(--sky)}}.stage{width:var(--mobile-w);max-width:430px;height:var(--mobile-h);background:var(--bg);height:100dvh;max-height:932px;position:relative;overflow:hidden}@media (width<=430px){.stage{width:100vw;max-width:none;height:100dvh;max-height:none}}.top{min-height:231px;height:calc(231px + constant(safe-area-inset-top, 0px));height:calc(231px + env(safe-area-inset-top,0px));padding-top:constant(safe-area-inset-top, 0px);padding-top:env(safe-area-inset-top,0px);box-sizing:border-box;background:linear-gradient(#44d9fc 0%,#95e1f3 89.361%);position:relative;overflow:visible}.bgFlowers{left:-11px;top:calc(242px + env(safe-area-inset-top,0px));pointer-events:none;z-index:1;background:radial-gradient(80% 50% at 50% 30%,#c299ff26,#0000 60%),radial-gradient(60% 40% at 80% 70%,#a2e1451f,#0000 50%);width:423px;height:450px;position:absolute}.bgGrass{left:0;top:calc(190px + env(safe-area-inset-top,0px));pointer-events:none;z-index:1;background:url(https://www.figma.com/api/mcp/asset/46746dec-472e-4fa2-a2a3-5b6840c48989) 50%/cover no-repeat;width:100%;height:41px;position:absolute}.status{width:100%;max-width:var(--w);justify-content:space-between;align-items:center;height:54px;padding:18px 16px 0;font-size:16px;font-weight:650;display:flex;position:absolute;inset:0 0 auto;display:none!important}.status>div:first-child{flex:none}.status .right{flex:none;align-items:center;gap:8px;display:flex}.status img{object-fit:contain;flex-shrink:0;width:auto;height:12px;max-height:12px;display:block}.stage.nav-cloud-me .listitem,.stage.nav-cloud-me .search,.stage.nav-cloud-me .icPokeBall{visibility:hidden;pointer-events:none}.listitem{left:20px;top:calc(229px + env(safe-area-inset-top,0px));z-index:2;align-items:center;gap:34px;font-size:16px;display:flex;position:absolute}.listitem .tabs{align-items:center;gap:34px;font-size:16px;display:flex;position:relative}.tab-indicator{background:linear-gradient(90deg, #ff553200, var(--accent));pointer-events:none;border-radius:37px;width:48px;height:5px;transition:transform .28s cubic-bezier(.4,0,.2,1);position:absolute;bottom:-7px;left:0}.tab{appearance:none;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:6px 0;position:relative}.tab[aria-selected=true]{color:var(--accent);font-weight:700}.tab-search-only{text-align:center;justify-content:center;align-items:center;min-width:48px;display:inline-flex}.tab-search-only[hidden]{display:none!important}.icCloud{left:24px;top:calc(35px + env(safe-area-inset-top,0px));pointer-events:none;z-index:1;width:103px;height:41px;animation:12s ease-in-out infinite cloudFloat;position:absolute}.icCloud svg{width:100%;height:100%;display:block}@keyframes cloudFloat{0%,to{transform:translate(0)}50%{transform:translate(60px)}}.bannerName{right:36px;top:calc(80px + env(safe-area-inset-top,0px));z-index:2;pointer-events:none;width:136px;height:37px;position:absolute}.bannerName svg{width:100%;height:100%;display:block}.search{left:16px;right:16px;top:calc(111px + env(safe-area-inset-top,0px));background:linear-gradient(#fff,#fff) 0 0/100% 100% padding-box padding-box,linear-gradient(90deg,#b69eff 0%,#ff8e9e 12.5%,#ffc163 25%,#d3ff52 37.5%,#b69eff 50%,#ff8e9e 62.5%,#ffc163 75%,#d3ff52 87.5%,#b69eff 100%) 0 0/200% 100% border-box;border:1.5px solid #0000;border-radius:9999px;align-items:center;gap:10px;height:46px;padding:0 16px;animation:3s linear infinite searchGradientFlow;display:flex;position:absolute}@keyframes searchGradientFlow{to{background-position:0 0,100% 0}}.searchIcon{flex-shrink:0;align-items:center;width:20px;height:21px;display:flex}.searchIcon svg{width:100%;height:100%;display:block}.search input{background:0 0;border:none;outline:none;width:100%;font-size:16px}.search input::placeholder{color:var(--muted)}.midBg{left:0;right:0;top:calc(231px + env(safe-area-inset-top,0px));bottom:var(--nav-h);opacity:.55;pointer-events:none;background:url(https://www.figma.com/api/mcp/asset/1c04bbb7-38e9-4ed5-89c1-e5f51c9b9ceb) 0 0/295px 295px;position:absolute}.icPokeBall{left:338px;top:calc(183px + env(safe-area-inset-top,0px));z-index:2;pointer-events:none;width:40px;height:40px;position:absolute}.icPokeBall img{object-fit:contain;width:100%;height:100%;display:block}.content{top:calc(280px + env(safe-area-inset-top,0px));left:0;right:0;bottom:var(--nav-h);-webkit-overflow-scrolling:touch;z-index:1;scrollbar-width:none;-ms-overflow-style:none;padding:10px 16px 18px;position:absolute;overflow:auto}.content::-webkit-scrollbar{display:none}.placeholder-screen{z-index:9;background:var(--bg);pointer-events:none;display:none;position:absolute;inset:0}.placeholder-screen.show{display:block}.placeholder-screen img{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.content-panel{opacity:1;transition:opacity .22s,transform .22s;transform:translateY(0)}.content-panel.exiting{opacity:0;transform:translateY(6px)}.content-panel.hidden{visibility:hidden;pointer-events:none}.grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.grid[data-tab=habitat]{grid-template-columns:1fr;gap:12px}.grid[data-search=global]{display:block}.search-section{margin-bottom:24px}.search-section:last-child{margin-bottom:0}.search-section-title{color:#000000b3;margin:0 0 12px;font-size:18px;font-weight:590}.search-section-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.search-section-grid-habitat{grid-template-columns:1fr;gap:12px}.card{appearance:none;cursor:pointer;color:#000000e6;-webkit-tap-highlight-color:transparent;background:url(/card_bg.svg) 50%/100% 100% no-repeat;border:none;border-radius:0;place-items:center;height:140px;padding:12px 10px 10px;transition:transform .14s,box-shadow .14s;display:grid;position:relative}.card:active{transform:scale(.985)}.card:focus-visible{outline:none;box-shadow:0 0 0 4px #ff533138}.card img:not(.card-habitat-icon){object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:74px;height:84px;margin-top:2px;display:block}.card .name{letter-spacing:.2px;color:#000000e6;-webkit-tap-highlight-color:transparent;margin-top:3px;font-size:16px;font-weight:800;transform:translateY(-4px)}.card-habitat{border:2px solid #b37319;border-radius:30px;flex-direction:row;align-items:stretch;position:relative;overflow:hidden;box-shadow:inset 0 -6px #b37319;background:#fff!important;height:116px!important;padding:0!important;display:flex!important}.card-habitat-img{flex-shrink:0;justify-content:center;align-items:center;width:120px;height:79px;margin:14px 0 23px 15px;display:flex}.card-habitat-img svg{width:100%;height:100%;display:block}.card-habitat-info{text-align:left;flex-direction:column;flex:1;justify-content:center;gap:6px;min-width:0;margin-top:-4px;padding:16px 16px 16px 18px;display:flex}.card-habitat-name{color:#000000e6;font-size:18px;font-weight:590;line-height:1.22}.card-habitat-recipe{color:#0006;white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:14px;font-weight:400;line-height:1.29;overflow:hidden}.card-habitat-icons{flex-wrap:nowrap;gap:8px;margin-top:4px;display:flex}.card-habitat-icon{object-fit:contain;background:#0000000a;border:1px solid #0000001a;border-radius:6px;flex-shrink:0;width:28px;min-width:28px;height:28px;min-height:28px;display:block}.bottomNav{height:calc(var(--nav-h) + constant(safe-area-inset-bottom, 0px));height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:constant(safe-area-inset-bottom, 0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;z-index:10;background:url(https://www.figma.com/api/mcp/asset/9409b701-5fae-460a-88d8-0be480f33581) 50%/cover no-repeat;grid-template-columns:repeat(3,1fr);place-items:center;display:grid;position:absolute;bottom:0;left:0;right:0}.navItem{appearance:none;cursor:pointer;color:#0006;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:16px;font-weight:400;display:flex}.navItem[aria-selected=true]{color:#000c;font-weight:600}.navIcon{place-items:center;width:40px;height:40px;display:grid;position:relative}.navIcon .iconActive{display:none}.navIcon .iconInactive,.navItem[aria-selected=true] .navIcon .iconActive{display:block}.navItem[aria-selected=true] .navIcon .iconInactive{display:none}.navIcon img{object-fit:contain;width:100%;height:100%;display:block}.detail-overlay{z-index:20;background:var(--bg);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;position:absolute;inset:0;overflow-y:auto}.detail-overlay::-webkit-scrollbar{display:none}.detail-overlay[hidden]{display:none!important}.detail-overlay[data-mode=habitat]{flex-direction:column;display:flex}.detail-overlay[data-mode=habitat] .detail-stats,.detail-overlay[data-mode=habitat] .detail-skills-specialties{display:none!important}.detail-overlay[data-mode=habitat] .detail-top{flex:none;justify-content:center;align-items:flex-start;height:318px;min-height:0;display:flex;position:relative}.detail-overlay[data-mode=habitat] .detail-hero{aspect-ratio:1;width:100%;height:100%;min-height:0;position:relative;top:auto;left:auto;transform:none}.detail-overlay[data-mode=habitat] .detail-hero img{object-fit:cover;width:100%;height:100%}.detail-overlay[data-mode=habitat] .detail-wave{z-index:1;flex-shrink:0;height:24px;min-height:24px;margin-top:-20px;margin-bottom:0;padding-top:0;padding-bottom:0;position:relative}.detail-overlay[data-mode=habitat] .detail-wave img{vertical-align:bottom;display:block}.detail-overlay[data-mode=habitat] .detail-name,.detail-overlay[data-mode=habitat] .detail-desc{display:block!important}.detail-overlay[data-mode=habitat] .detail-panel{z-index:2;flex-shrink:0;position:relative}.detail-overlay[data-mode=habitat] .detail-name{color:#000000b3;margin:0 0 12px;font-size:26px;font-weight:590;line-height:1.15}.detail-overlay[data-mode=habitat] .detail-desc{color:#0006;max-width:354px;margin:0 0 20px;font-size:16px;line-height:1.43}.detail-habitat-pokemon-section{margin-top:0}.detail-habitat-pokemon-section>.detail-section{border-top:1px solid #e7dfd3;margin-top:0;padding-top:20px}.detail-habitat-pokemon-list{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;display:grid}.detail-close{z-index:3;cursor:pointer;background:#fffc;border:none;border-radius:50%;place-items:center;width:36px;height:36px;font-size:16px;display:grid;position:absolute;top:48px;left:17px;box-shadow:0 2px 8px #0000001a}.detail-top{background:#c8e27c;height:318px;position:relative}.detail-hero{place-items:center;width:233px;height:233px;display:grid;position:absolute;top:44px;left:50%;transform:translate(-50%)}.detail-hero img{object-fit:contain;width:100%;height:100%}.detail-wave{justify-content:stretch;align-items:flex-end;width:100%;height:24px;display:flex;position:relative;overflow:hidden}.detail-wave img{object-fit:fill;object-position:center bottom;width:100%;height:19px}.detail-panel{background:#f1ede3;min-height:calc(100vh - 318px);padding:30px 24px 90px}.detail-name{color:#000000b3;margin:0 0 12px;font-size:26px;font-weight:590;line-height:1.15}.detail-desc{color:#0006;max-width:354px;margin:0 0 20px;font-size:16px;line-height:1.43}.detail-stats{border-top:1px solid #e7dfd3;flex-wrap:wrap;gap:0 24px;padding:20px 0;font-size:14px;display:flex}.detail-stat{align-items:center;gap:6px;display:flex}.detail-stat-label{color:#0006}.detail-stat-val{color:#000c}.detail-skills-specialties{border-top:1px solid #e7dfd3;flex-wrap:wrap;gap:16px 24px;padding:12px 0;font-size:14px;display:flex}.detail-stat-tags{flex-direction:row;align-items:center;gap:8px}.detail-tags{flex-wrap:wrap;gap:8px;display:flex}.detail-tag{color:#000c;height:26px;box-shadow:none;background:#fff;border:1px solid #0000000f;border-radius:13px;align-items:center;padding:0 12px;font-size:14px;display:inline-flex}#detailSpecialties .detail-tag{color:#ff9420}.detail-section-first-visible{border-top:1px solid #e7dfd3;margin-top:0;padding-top:20px}.detail-section{color:#000000b3;margin:20px 0 14px;font-size:20px;font-weight:590;line-height:1.4}.detail-section:first-of-type{border-top:1px solid #e7dfd3;margin-top:0;padding-top:20px}.detail-habitats{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;gap:20px;margin:0 -24px;padding:0 24px;display:flex;overflow:auto hidden}.detail-habitats::-webkit-scrollbar{display:none}.detail-habitat-card{appearance:none;cursor:pointer;width:120px;font:inherit;text-align:left;background:0 0;border:none;border-radius:12px;flex-shrink:0;padding:0;overflow:hidden}.detail-habitat-img{width:120px;height:79px;display:block}.detail-habitat-img svg{width:100%;height:100%;display:block}.detail-habitat-name{text-align:center;color:#000000b3;padding:8px;font-size:14px}.detail-timeweather{color:#0006;min-height:28px;font-size:14px}#detailSectionTimeWeather,#detailTimeWeather{display:none!important}.detail-btn-own{color:#fff;cursor:pointer;z-index:21;text-align:center;background:#b37319;border:none;border-radius:44px;width:min(354px,100% - 48px);height:46px;font-size:14px;font-weight:400;transition:transform .1s,box-shadow .1s,width .2s;position:fixed;bottom:84px;left:50%;transform:translate(-50%);box-shadow:inset 0 -4px #00000040}.detail-btn-own.owned{width:auto;min-width:120px;padding:0 32px}.detail-btn-own:active:not(.owned){transform:translate(-50%)translateY(1px);box-shadow:inset 0 -2px #00000040}.toast{left:50%;bottom:calc(var(--nav-h) + 12px);opacity:0;pointer-events:none;color:#fff;background:#000000b3;border-radius:999px;padding:10px 12px;font-size:12px;transition:opacity .18s,transform .18s;position:absolute;transform:translate(-50%)translateY(12px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}
