:root{
  --sky:#8fd0f5; --sky2:#cfeeff; --cream:#fff6e4; --cream2:#f3e3c6; --brown:#7a4320; --brown2:#a8754a;
  --green:#5cb83a; --green-d:#3d8a24; --orange:#f29a2e; --orange-d:#c86a10; --pink:#e86a9a; --blue:#4aa3e8;
  --r:28px; --clay:0 8px 0 #d9b48a, 0 18px 36px rgba(122,67,32,.18), inset 0 3px 0 rgba(255,255,255,.7);
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--brown);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.2;font-weight:900;letter-spacing:.5px}
h2{font-size:clamp(30px,4vw,46px);margin:10px 0 14px}
.muted{color:var(--brown2);font-size:14px}
.chip{display:inline-block;background:#fff;border-radius:999px;padding:6px 16px;font-weight:800;font-size:14px;color:var(--orange-d);box-shadow:0 4px 0 #ecd2ad}

/* 按钮：黏土质感 */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:900 18px var(--font);padding:16px 30px;border-radius:999px;transition:transform .15s, box-shadow .15s}
.btn:active{transform:translateY(5px)}
.btn-green{background:linear-gradient(#7fd35a,var(--green));color:#fff;box-shadow:0 7px 0 var(--green-d),0 14px 24px rgba(61,138,36,.3),inset 0 3px 0 rgba(255,255,255,.45);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn-green:hover{transform:translateY(-2px)}
.btn-cream{background:#fff;color:var(--brown);box-shadow:0 7px 0 #e2c79d,0 12px 22px rgba(122,67,32,.15),inset 0 3px 0 #fff}
.btn.small{padding:10px 20px;font-size:15px}

/* 导航 */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 28px));display:flex;align-items:center;gap:20px;
  background:rgba(255,246,228,.88);backdrop-filter:blur(10px);border-radius:999px;padding:8px 10px 8px 14px;box-shadow:0 6px 0 rgba(217,180,138,.6),0 12px 30px rgba(122,67,32,.15)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px}
.brand img{width:44px;height:44px;border-radius:12px}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{padding:8px 14px;border-radius:999px;font-weight:800;font-size:15px}
.nav nav a:hover{background:#fff}

/* 首屏 */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url(img/hero.jpg) center/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,246,228,.92) 0%,rgba(255,246,228,.75) 32%,rgba(255,246,228,0) 58%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:120px 24px 140px}
.hero-copy{max-width:540px}
.hero h1{font-size:clamp(46px,7vw,86px);margin:18px 0;color:var(--brown);text-shadow:0 4px 0 #fff}
.hero h1 em{font-style:normal;color:var(--orange);-webkit-text-stroke:2px #fff;paint-order:stroke fill}
.hero p{font-size:18px;margin-bottom:28px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.stats{list-style:none;display:flex;gap:14px;margin-top:34px}
.stats li{background:#fff;border-radius:22px;padding:12px 18px;box-shadow:var(--clay);text-align:center}
.stats b{display:block;font-size:30px;color:var(--green-d);line-height:1.1}
.stats span{font-size:13px;color:var(--brown2);font-weight:700}
.hero-wave{position:absolute;left:0;right:0;bottom:-2px;height:90px;background:var(--cream);border-radius:50% 50% 0 0/100% 100% 0 0;z-index:3}
.leaves{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.leaves img{position:absolute;top:-80px;width:48px;animation:fall linear infinite;opacity:.95}
@keyframes fall{0%{transform:translate(0,0) rotate(0) rotateY(0)}50%{transform:translate(60px,55vh) rotate(180deg) rotateY(180deg)}100%{transform:translate(-30px,115vh) rotate(360deg) rotateY(360deg)}}

/* 试玩 */
.play{padding:60px 0 100px}
.play-grid{display:grid;grid-template-columns:auto 1fr;gap:70px;align-items:center}
.phone-col{display:flex;flex-direction:column;align-items:center;gap:18px}
/* 手机：全面屏、窄边框、灵动岛、状态栏叠在游戏画面上（沉浸式） */
.stage{position:relative}
.phone{--s:1;position:relative;width:calc(390px * var(--s) + 20px);height:calc(844px * var(--s) + 20px);padding:10px;border-radius:calc(54px * var(--s) + 10px);
  background:linear-gradient(145deg,#4a3020,#1f140b);box-shadow:0 0 0 3px #c99a6a,0 26px 60px rgba(60,30,10,.45),0 6px 0 #8a5a30,inset 0 0 0 2px rgba(255,255,255,.08)}
.screen{position:relative;width:calc(390px * var(--s));height:calc(844px * var(--s));border-radius:calc(46px * var(--s));overflow:hidden;background:#8fd0f5;isolation:isolate}
.screen iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform:scale(var(--s));transform-origin:0 0;display:block}
.statusbar{position:absolute;left:0;right:0;top:0;height:calc(46px * var(--s));display:flex;align-items:center;justify-content:space-between;padding:0 calc(26px * var(--s));
  pointer-events:none;color:#fff;font:700 calc(15px * var(--s)) -apple-system,"SF Pro Text",var(--font);text-shadow:0 1px 2px rgba(0,0,0,.35);z-index:2}
.island{position:absolute;left:50%;top:calc(10px * var(--s));transform:translateX(-50%);width:calc(118px * var(--s));height:calc(32px * var(--s));border-radius:99px;background:#0b0704}
.sys{display:flex;gap:calc(6px * var(--s));align-items:center}
.sys i{display:block;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sig{width:calc(17px * var(--s));height:calc(11px * var(--s));clip-path:polygon(0 100%,100% 0,100% 100%);border-radius:2px}
.wifi{width:calc(15px * var(--s));height:calc(11px * var(--s));clip-path:polygon(50% 100%,0 25%,20% 0,80% 0,100% 25%)}
.bat{position:relative;width:calc(24px * var(--s));height:calc(12px * var(--s));border-radius:calc(3px * var(--s));background:transparent!important;border:calc(1.5px * var(--s)) solid #fff}
.bat b{position:absolute;left:1px;top:1px;bottom:1px;width:75%;background:#fff;border-radius:2px}
.homebar{position:absolute;left:50%;bottom:calc(8px * var(--s));transform:translateX(-50%);width:calc(134px * var(--s));height:calc(5px * var(--s));border-radius:9px;background:rgba(255,255,255,.85);box-shadow:0 0 3px rgba(0,0,0,.3);pointer-events:none;z-index:2}
.close-focus{display:none}
/* 沉浸模式：全屏暗场 + 放大手机 */
body.focus{overflow:hidden}
body.focus .stage{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(80,50,20,.75),rgba(15,8,2,.95));backdrop-filter:blur(6px);animation:fadein .3s}
body.focus .nav{opacity:0;pointer-events:none}
body.focus .close-focus{display:grid;place-items:center;position:fixed;top:20px;right:24px;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;font:900 22px var(--font);color:var(--brown);background:#fff6e4;box-shadow:0 5px 0 #d9b48a;z-index:101}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.phone-tools{display:flex;gap:12px}
.steps{list-style:none;margin:26px 0;display:grid;gap:16px}
.steps li{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--clay)}
.steps i{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:900 22px var(--font);font-style:normal;color:#fff;background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}
.steps b{font-size:19px}
.steps p{font-size:15px;color:var(--brown2)}
.tip{background:var(--sky2);border-radius:20px;padding:14px 18px;font-size:15px;font-weight:700}

/* 卡片 */
.sec-head{text-align:center;margin-bottom:40px}
.sec-head p{color:var(--brown2)}
.features{padding:90px 0;background:linear-gradient(var(--cream),#eaf7e2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--clay);transition:transform .2s}
.card:hover{transform:translateY(-6px) rotate(-.6deg)}
.card>img{width:84px;height:84px;object-fit:contain;margin-bottom:12px}
.card h3{font-size:22px;margin-bottom:8px}
.card p{font-size:15px;color:var(--brown2)}
.tool-row{display:flex;gap:6px;margin-bottom:12px}.tool-row img{width:64px}

/* 天气 */
.weather{padding:100px 0;background:linear-gradient(#eaf7e2,var(--sky2))}
.wtabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.wtab{display:flex;align-items:center;gap:8px;background:#fff;border:0;border-radius:999px;padding:8px 20px 8px 10px;font:900 17px var(--font);color:var(--brown);cursor:pointer;box-shadow:0 5px 0 #d9b48a}
.wtab img{width:40px}
.wtab.on{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-d)}
.wshow{display:grid;grid-template-columns:340px 1fr;gap:50px;align-items:center;max-width:900px;margin:0 auto}
.wshot{border-radius:36px;overflow:hidden;box-shadow:0 12px 0 #9fc8e0,0 26px 50px rgba(40,90,130,.25);border:8px solid #fff;aspect-ratio:9/16}
.wshot img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.wtext>img{width:110px;margin-bottom:8px}
.wtext h3{font-size:36px}
.wtext p{font-size:18px;margin:8px 0 16px}
.wtext ul{list-style:none;display:grid;gap:10px}
.wtext li{background:#fff;border-radius:18px;padding:12px 16px;font-weight:700;box-shadow:0 4px 0 #cfe3ee}

/* 图鉴 */
.atlas{padding:100px 0;background:var(--cream)}
.filters{display:flex;justify-content:center;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.filters button{border:0;background:#fff;border-radius:999px;padding:8px 18px;font:900 15px var(--font);color:var(--brown);cursor:pointer;box-shadow:0 4px 0 #e2c79d}
.filters button.on{background:var(--orange);color:#fff;box-shadow:0 4px 0 var(--orange-d)}
.species{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.sp{perspective:800px;height:200px;cursor:pointer}
.sp-in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.sp:hover .sp-in,.sp.flip .sp-in{transform:rotateY(180deg)}
.sp-f,.sp-b{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;background:#fff;box-shadow:0 6px 0 #e2c79d,0 12px 24px rgba(122,67,32,.12);padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sp-f img{width:100px;height:100px;object-fit:contain;transition:transform .3s}
.sp:hover .sp-f img{transform:scale(1.1) rotate(-6deg)}
.sp-f b{margin-top:8px;font-size:17px}
.sp-f small{font-size:12px;color:var(--brown2);font-style:italic}
.sp-b{transform:rotateY(180deg);background:var(--cream2);font-size:12.5px;line-height:1.5;justify-content:flex-start;overflow:hidden}
.sp-b b{font-size:15px;margin-bottom:4px}
.tag{position:absolute;top:10px;right:10px;font-size:11px;font-weight:900;color:#fff;border-radius:999px;padding:2px 9px}

/* 好友 */
.friends{padding:100px 0;background:linear-gradient(var(--cream),#ffeccc)}
.friends-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:380px}
.pod{display:flex;flex-direction:column;align-items:center;position:relative}
.pod img{width:110px;animation:bob 2.2s ease-in-out infinite}
.pod.p1 img{width:130px;animation-delay:.3s}.pod.p3 img{animation-delay:.6s}
.pod .crown{position:absolute;top:-50px;width:70px}
.step{width:150px;border-radius:24px 24px 10px 10px;display:grid;place-items:center;font:900 46px var(--font);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.18);margin-top:8px}
.p1 .step{height:190px;background:linear-gradient(#ffd75a,#f2a922);box-shadow:0 8px 0 #c47f10}
.p2 .step{height:140px;background:linear-gradient(#d6e7f2,#9fbfd6);box-shadow:0 8px 0 #7a9ab2}
.p3 .step{height:100px;background:linear-gradient(#f2c29a,#d6905a);box-shadow:0 8px 0 #a86a3a}
@keyframes bob{50%{transform:translateY(-10px)}}
.ranks{list-style:none;display:grid;gap:12px;margin:22px 0}
.ranks li{background:#fff;border-radius:20px;padding:14px 18px;box-shadow:var(--clay)}
.ranks b{margin-right:12px}

/* 路线图 */
.roadmap{padding:100px 0;background:#eaf7e2}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.timeline::before{content:"";position:absolute;top:22px;left:4%;right:4%;height:10px;border-radius:10px;background:repeating-linear-gradient(90deg,#d9b48a 0 22px,transparent 22px 34px)}
.timeline li{position:relative;background:#fff;border-radius:var(--r);padding:56px 20px 22px;box-shadow:var(--clay)}
.timeline li::before{content:"";position:absolute;top:10px;left:20px;width:34px;height:34px;border-radius:50%;background:#e2d2b8;box-shadow:0 4px 0 #c8b08a}
.timeline li.done::before{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.timeline li.now::before{background:var(--orange);box-shadow:0 4px 0 var(--orange-d);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.timeline span{position:absolute;top:14px;left:66px;font-size:13px;font-weight:900;color:var(--brown2)}
.timeline h4{font-size:20px;margin-bottom:6px}
.timeline p{font-size:14px;color:var(--brown2)}

/* 页脚 */
.foot{background:var(--brown);color:#ffe9c8;padding:50px 0}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.brand.big img{width:72px;height:72px;border-radius:18px}
.brand.big b{display:block;font-size:26px}.brand.big span{font-size:14px;opacity:.8}
.qr-box{width:120px;height:120px;border-radius:20px;background:#fff6e4;color:var(--brown);display:grid;place-content:center;text-align:center;font-weight:900;border:4px dashed #d9b48a}
.qr-box small{font-size:12px;color:var(--brown2)}
.foot .muted{grid-column:1/-1;color:#d9b48a}

/* 出现动画 */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s, transform .7s cubic-bezier(.2,.8,.3,1.2)}
.reveal.in{opacity:1;transform:none}

@media (max-width:960px){
  .nav nav{display:none}
  .play-grid,.friends-grid,.wshow{grid-template-columns:1fr}
  .wshow{justify-items:center;text-align:center}.wshot{width:300px}
  .cards{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}.timeline::before{display:none}
  .hero-bg::after{background:linear-gradient(180deg,rgba(255,246,228,.9) 0%,rgba(255,246,228,.6) 60%,rgba(255,246,228,.2))}
}
@media (max-width:600px){ .cards,.timeline{grid-template-columns:1fr} .stats{flex-wrap:wrap} .podium{transform:scale(.8)} }
.nav>.btn{margin-left:auto}@media(min-width:961px){.nav>.btn{margin-left:0}}

.brand-logo{width:auto!important;height:40px!important;border-radius:0!important}
.hero-logo{width:min(420px,80%);margin:0 0 6px -10px;filter:drop-shadow(0 8px 14px rgba(122,67,32,.25))}

/* 手机：不在页面里嵌小窗口，改成“全屏开始玩”，点开后游戏铺满整个屏幕 */
.mobile-play{display:none;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:10px 0 4px}
.mobile-play img{width:min(78vw,360px);filter:drop-shadow(0 8px 10px rgba(122,67,32,.25))}
.mobile-play .btn{font-size:22px;padding:16px 34px}
.mobile-play p{font-size:13px;max-width:320px;margin:0;display:none}
body.is-mobile .mobile-play{display:flex}
body.is-mobile.is-ios .mobile-play p{display:block}
body.is-mobile .stage,body.is-mobile .phone-tools{display:none}
.fullplay{position:fixed;inset:0;z-index:1000;background:#1d140c;height:100vh;height:100dvh}
.fullplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.fullplay .x{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:0;
  background:rgba(255,246,228,.85);color:#7a4320;font:900 16px var(--font);box-shadow:0 3px 0 rgba(122,74,34,.4)}
body.playing{overflow:hidden}

/* 联系我们 */
.contact{padding:56px 0 64px}
.contact-box{text-align:center;background:#fff6e4;border:3px solid #e8b46a;border-radius:28px;padding:34px 22px;box-shadow:0 8px 0 #e3c08c}
.contact-box h2{margin:12px 0 10px}
.contact-box .mail{font-weight:900;font-size:22px;color:#c0560e;text-decoration:none;border-bottom:3px dashed #f0a050}
.contact-box .muted{margin-top:12px}