/* 官网所有页面共用：配色、字体、Logo、导航、按钮、段落标题、漫画分格、子页面小首屏、页脚。
   每页自己的样式写在各自 index.html 的 <style> 里。 */
/* 站酷快乐体（SIL OFL 1.1，授权见 fonts/OFL.txt）：只含页面用到的字，改了文案运行 python3 官网制作/生成字体子集.py */
@font-face{font-family:'ZCOOL KuaiLe';src:url('/fonts/zcool-kuaile.woff2?v=98e75c46') format('woff2');font-display:swap}
/* 配色取自游戏：墨色 #2a241c、奶油纸 #f6ecd2、标题黄 #ffd23f、ZOO BOMBERS 红 */
:root{
 --ink:#2a241c;--ink2:#6b5a44;--cream:#f6ecd2;--paper:#fbf6e8;
 --sun:#ffd23f;--sun-d:#e0a920;--red:#e0452f;--red-d:#9c2a1a;--teal:#3f9ea0;
 --line:rgba(42,36,28,.16);--line2:rgba(42,36,28,.34);
 --fd:'ZCOOL KuaiLe','PingFang SC','Microsoft YaHei',sans-serif;
 --fb:-apple-system,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
 --fe:'Arial Black','Helvetica Neue',Arial,sans-serif;
 --nav-h:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{font-family:var(--fb);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b.hl{color:var(--red);font-weight:600}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
body:has(.jump) [id]{scroll-margin-top:calc(var(--nav-h) + 70px)}

/* ---------- 文字 Logo：和游戏标题页一样，黄字粗墨边 + 红色 ZOO BOMBERS 条 ---------- */
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.logo b{font-family:var(--fd);font-weight:400;color:var(--sun);-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;letter-spacing:.04em;text-shadow:0 .09em 0 var(--ink)}
.logo i{font-style:normal;font-family:var(--fe);color:#fff;background:var(--red);border:.12em solid var(--ink);border-radius:.3em;padding:.12em .7em .1em;letter-spacing:.14em;margin-top:-.15em;transform:rotate(-2deg)}

/* ---------- 顶部导航（固定，滚到哪都能点「立即游玩」） ----------
   栏目：首页 · 新闻 · 动物 · 关卡 · 常见问题，除首页外都是子页面；当前页面的栏目高亮。
   宽度按字数固定（--n 是字数），字体还没加载好时导航不会左右跳 */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:flex;align-items:center;gap:28px;padding:0 28px;
 background:rgba(246,236,210,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
.nav .brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav .brand img{width:44px;margin:-4px 0 -8px}
.nav .brand .logo{font-size:26px}.nav .brand .logo i{font-size:8px}
.nav ul{display:flex;gap:6px;list-style:none;margin:0 auto}
.nav ul a{display:block;position:relative;font-family:var(--fd);font-size:18px;line-height:24px;padding:8px 16px;width:calc(var(--n,2)*1em + 32px);text-align:center;color:var(--ink2);transition:color .2s;white-space:nowrap}
.nav ul a:hover,.nav ul a.on{color:var(--ink)}
.nav ul a::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:4px;border-radius:2px;background:var(--red);transform:translateX(-50%);transition:width .25s}
.nav ul a:hover::after,.nav ul a.on::after{width:26px}
.nav .go{display:flex;align-items:center;gap:6px;flex-shrink:0;font-family:var(--fd);font-size:18px;color:var(--ink);background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:4px 18px;box-shadow:0 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.nav .go:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.nav .go .pt-t{display:inline-block;width:calc(4em + 4px);line-height:24px;text-align:center;white-space:nowrap}
.nav .menu{display:none;width:40px;height:40px;border-radius:12px;background:#fff;border:2px solid var(--ink);font-size:20px;flex-shrink:0}

/* ---------- 大按钮「立即游玩」 ---------- */
.b-play{display:inline-flex;align-items:center;gap:10px;font-family:var(--fd);font-size:32px;letter-spacing:2px;color:var(--ink);
 background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:12px 40px 12px 14px;
 box-shadow:0 6px 0 var(--ink),0 12px 22px rgba(42,36,28,.25);transition:transform .15s,box-shadow .15s}
.b-play img{width:62px;margin:-12px 0 -8px}
.b-play:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink),0 16px 26px rgba(42,36,28,.3)}
.b-play:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink),0 6px 14px rgba(42,36,28,.2)}

/* ---------- 正文背景：奶油纸色 + 斜向浅色色块 + 很淡的老报纸网点 ---------- */
main{position:relative;overflow:hidden;background:
 radial-gradient(rgba(42,36,28,.07) 1px,transparent 1.3px) 0 0/8px 8px,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1400'%3E%3Cpolygon points='180,60 520,60 300,700 -40,700' fill='%23ffffff' fill-opacity='.5'/%3E%3Cpolygon points='1180,420 1460,420 1280,980 1000,980' fill='%23ffd23f' fill-opacity='.16'/%3E%3Cpolygon points='640,880 860,880 700,1340 480,1340' fill='%23ffffff' fill-opacity='.38'/%3E%3C/svg%3E") center top/1600px 1400px repeat,
 linear-gradient(180deg,#f6ecd2 0%,#f1e3c2 50%,#f6ecd2 100%)}

/* ---------- 段落标题：居中大字 + 两侧虚线 + 红色角标 + 英文小字 ---------- */
.pt{display:flex;flex-direction:column;align-items:center;margin-bottom:42px}
.pt .row{display:flex;align-items:center;gap:18px;width:100%}
.pt .row::before,.pt .row::after{content:'';flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line2) 0 8px,transparent 8px 14px)}
.pt h2{font-family:var(--fd);font-weight:400;font-size:42px;letter-spacing:6px;color:var(--ink);text-shadow:0 3px 0 #fff;white-space:nowrap}
.pt em{font-style:normal;font-family:var(--fe);font-size:11px;letter-spacing:6px;color:var(--ink2);opacity:.75;margin-top:6px}
.pt .cn{width:14px;height:14px;border:3px solid var(--red);flex:0 0 auto}
.pt .cn.l{border-right:0;border-bottom:0}.pt .cn.r{border-left:0;border-bottom:0}
.pt .intro{margin-top:16px;max-width:640px;text-align:center;font-size:15px;line-height:1.85;color:var(--ink2)}
.wm{position:absolute;left:-30px;top:120px;font-family:var(--fe);font-size:150px;line-height:1;letter-spacing:-2px;color:rgba(42,36,28,.05);pointer-events:none;white-space:nowrap;z-index:0}

/* 漫画分格：墨色细边 + 硬阴影 + 两个红色角标 */
.frame{position:relative;background:rgba(255,253,246,.9);border:2px solid var(--ink);border-radius:4px;box-shadow:4px 4px 0 rgba(42,36,28,.85)}
.frame::before,.frame::after{content:'';position:absolute;width:14px;height:14px;border:3px solid var(--red);z-index:3}
.frame::before{left:-7px;top:-7px;border-right:0;border-bottom:0}
.frame::after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.chip{display:inline-block;font-size:13px;font-weight:600;color:#fff;background:var(--c,var(--teal));border-radius:6px;padding:3px 10px}
.egg{display:inline-block;width:10px;height:13px;border-radius:50%/58% 58% 42% 42%;background:linear-gradient(#fffaf0,#f2dcb0);border:1px solid #c9a873;vertical-align:-2px;margin-right:3px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}

/* ---------- 子页面：缩小版首屏（游戏画面 + 面包屑 + 标题）+ 吸顶的跳转条 ---------- */
.ph{position:relative;padding:calc(var(--nav-h) + 44px) 24px 46px;overflow:hidden;background:#9fd3d8 var(--bgi) center 45%/cover no-repeat;border-bottom:2px solid var(--ink)}
.ph::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,236,210,.97) 0%,rgba(246,236,210,.9) 38%,rgba(246,236,210,.35) 64%,rgba(246,236,210,0) 80%)}
.ph .in{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.ph .crumb{font-size:13px;color:var(--ink2);margin-bottom:10px}
.ph .crumb a:hover{color:var(--red)}
.ph .crumb span{margin:0 8px;opacity:.6}
.ph .en{font-family:var(--fe);font-size:13px;letter-spacing:6px;color:var(--red)}
.ph h1{font-family:var(--fd);font-weight:400;font-size:56px;letter-spacing:6px;line-height:1.15;text-shadow:0 3px 0 #fff}
.ph .lead{font-size:16.5px;line-height:1.8;max-width:540px;margin-top:10px}
.ph .art{position:absolute;z-index:1;right:max(6%,calc(50% - 520px));bottom:-6px;height:86%;max-height:280px;width:auto;filter:drop-shadow(0 14px 10px rgba(0,0,0,.2));animation:bob 3s ease-in-out infinite}
.jump{position:sticky;top:var(--nav-h);z-index:40;background:rgba(251,246,232,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.jump .in{max-width:1100px;margin:0 auto;display:flex;gap:6px;padding:8px 24px;overflow-x:auto;scrollbar-width:none}
.jump a{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:4px 12px 4px 6px;border-radius:999px;font-size:14px;color:var(--ink2);border:2px solid transparent;transition:background .2s,border-color .2s}
.jump a img{width:30px;height:30px;object-fit:contain}
.jump a:hover,.jump a.on{background:#fff;border-color:var(--ink);color:var(--ink)}
.jump a b{font-family:var(--fe);font-size:11px;color:#fff;background:var(--c,var(--red));border-radius:999px;padding:2px 7px}
.wrap{position:relative;max-width:1100px;margin:0 auto;padding:56px 24px 40px}
.wrap>.pt{margin-top:24px}
.cta-band{text-align:center;padding:30px 24px 80px}
.cta-band h2{font-family:var(--fd);font-weight:400;font-size:30px;letter-spacing:3px;margin-bottom:20px}
.cta-band p{margin-top:16px;font-size:14px;color:var(--ink2)}

/* ---------- 页脚 ---------- */
footer{background:var(--ink);color:#a8987e;padding:36px 24px 40px;text-align:center;font-size:13px;line-height:2}
footer .lk{color:#f6ecd2;margin-bottom:12px}
footer .lk a{margin:0 10px}
footer .lk a:hover{color:var(--sun)}
footer .logo{font-size:30px;margin:18px auto 8px}footer .logo b{-webkit-text-stroke-color:#000}footer .logo i{font-size:9px;border-color:#000}

/* ---------- 手机 ---------- */
@media (max-width:860px){
 :root{--nav-h:58px}
 .nav{gap:10px;padding:0 12px}
 .nav .brand img{width:34px}.nav .brand .logo{font-size:20px}.nav .brand .logo i{font-size:6px}
 .nav ul{display:none;position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;margin:0;background:var(--cream);border-bottom:2px solid var(--ink);padding:8px 16px 16px;box-shadow:0 14px 30px rgba(0,0,0,.08)}
 .nav.open ul{display:flex}
 .nav ul a{font-size:19px;padding:12px 6px;border-bottom:1px dashed var(--line);width:auto;text-align:left}
 .nav ul a::after{display:none}
 .nav ul a.on{color:var(--red)}
 .nav .go{margin-left:auto;font-size:16px;padding:3px 14px}
 .nav .menu{display:block}
 .b-play{font-size:26px;padding:10px 30px 10px 12px}.b-play img{width:48px}
 .pt{margin-bottom:28px}
 .pt h2{font-size:30px;letter-spacing:4px}
 .wm{font-size:80px;top:100px;left:-10px}
 .ph{padding:calc(var(--nav-h) + 26px) 16px 30px;background-position:70% 50%}
 .ph::before{background:linear-gradient(90deg,rgba(246,236,210,.96) 0%,rgba(246,236,210,.86) 70%,rgba(246,236,210,.5) 100%)}
 .ph h1{font-size:38px;letter-spacing:4px}
 .ph .lead{font-size:15px;max-width:none;padding-right:70px}
 .ph .art{height:110px;right:8px;bottom:8px}
 .jump .in{padding:6px 12px}
 .wrap{padding:36px 16px 30px}
 footer .lk a{display:inline-block}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}