/* ==========================================================================
   pokemm 介绍站 · 共享样式
   设计原则：
     · 像素素材一律 image-rendering:pixelated，禁止被浏览器平滑成糊团
     · 深色底 + 单色主强调（红 #e3474a / 蓝 #4d7cfe），避免彩虹配色
     · 全部用 CSS 变量，改一处即换肤
   注意：本文件只服务【介绍站】（index/account/community），不影响游戏与后台。
   ========================================================================== */
/* ★[hidden] 必须压过组件自身的 display（.btn=inline-flex / .card=block / .sec=block ...），
   否则 hidden 属性会被无声忽略 —— 未登录的社区入口就藏不掉。放最前面，靠 !important 兜底。 */
[hidden]{ display:none !important; }
:root{
  --ink:#0f1013;
  --bg:#0f1013;
  --bg-2:#15171c;
  --panel:#191b21;
  --panel-2:#1f2229;
  --line:#2a2d36;
  --line-2:#363a45;
  --text:#e8eaf0;
  --text-2:#a8adbb;
  --text-3:#6f7688;
  --muted:#767c8c;
  --red:#e3474a;
  --red-d:#b83235;
  --blue:#4d7cfe;
  --blue-d:#3a63d8;
  --gold:#f3b73f;
  --green:#3fb950;
  --purple:#a371f7;
  --radius:14px;
  --radius-s:9px;
  --shadow:0 18px 44px rgba(0,0,0,.42);
  --shadow-s:0 4px 14px rgba(0,0,0,.28);
  --maxw:1160px;
  --nav-h:62px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img.pix{ image-rendering:pixelated; image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; }
::selection{ background:var(--red); color:#fff; }

/* 滚动条 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2c3039; border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#3b4150; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ===================== 顶部导航 ===================== */
.nav{
  position:sticky; top:0; z-index:200; height:var(--nav-h);
  background:rgba(15,16,19,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ height:100%; display:flex; align-items:center; gap:26px; }
.nav-logo{
  display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px;
  letter-spacing:.14em; text-transform:lowercase; flex:none;
}
.nav-ball{
  width:22px; height:22px; border-radius:50%; flex:none; position:relative;
  background:linear-gradient(#e3474a 0 47%, #1a1c22 47% 53%, #eef0f4 53% 100%);
  border:2px solid #1a1c22; box-shadow:0 0 0 1px #3a3f4a;
}
.nav-ball::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%; background:#f4f6fa; border:2px solid #1a1c22;
}
.nav-links{ display:flex; align-items:center; gap:4px; flex:1; }
.nav-links a{
  padding:8px 13px; border-radius:8px; font-size:14px; color:var(--text-2);
  transition:color .16s, background .16s; white-space:nowrap;
}
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.055); }
.nav-links a.on{ color:#fff; background:rgba(227,71,74,.16); }
.nav-user{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-avatar{
  width:32px; height:32px; border-radius:8px; background:var(--panel-2);
  border:1px solid var(--line-2); display:grid; place-items:center; overflow:hidden;
}
.nav-avatar img{ width:26px; height:26px; }
.nav-uname{ font-size:13.5px; font-weight:600; }
/* ===== 头像（有图显示图；没图用名字首字做色块字标） ===== */
.pk-av{
  display:inline-grid; place-items:center; flex:none; overflow:hidden;
  border-radius:9px; background:var(--panel-2); border:1px solid var(--line-2);
  font-weight:800; line-height:1; user-select:none; color:#fff;
  vertical-align:middle;
}
.pk-av.has-img{ background:var(--panel-2); padding:0; }
.pk-av img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 首字字标的 6 个稳定色调 */
.pk-av.ton0{ background:linear-gradient(160deg,#e3474a,#b83a3d); border-color:#e3474a55; }
.pk-av.ton1{ background:linear-gradient(160deg,#4d7cfe,#3a5fc4); border-color:#4d7cfe55; }
.pk-av.ton2{ background:linear-gradient(160deg,#3fb950,#2e8f3c); border-color:#3fb95055; }
.pk-av.ton3{ background:linear-gradient(160deg,#f3b73f,#c4912c); border-color:#f3b73f55; }
.pk-av.ton4{ background:linear-gradient(160deg,#a371f7,#7f56c9); border-color:#a371f755; }
.pk-av.ton5{ background:linear-gradient(160deg,#22b8a6,#1a8b7d); border-color:#22b8a655; }
/* 登录后：头像+名字整体是一个通往账号中心的链接 */
.nav-me{
  display:flex; align-items:center; gap:9px; padding:3px 10px 3px 4px; border-radius:10px;
  color:var(--text); text-decoration:none; transition:background .15s, border-color .15s;
  border:1px solid transparent;
}
.nav-me:hover{ background:var(--panel-2); border-color:var(--line); }
.nav-me:hover .nav-uname{ color:#fff; }
.nav-burger{
  display:none; width:38px; height:34px; border:1px solid var(--line-2); border-radius:8px;
  background:transparent; color:var(--text); cursor:pointer; padding:0; place-items:center;
}

/* ===================== 按钮 ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--text); font-size:14px; font-weight:600;
  cursor:pointer; transition:transform .12s, background .16s, border-color .16s, box-shadow .16s;
  white-space:nowrap;
}
.btn:hover{ background:#262a33; border-color:#454b59; }
.btn:active{ transform:translateY(1px); }
.btn--pri{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--pri:hover{ background:#ef5256; border-color:#ef5256; box-shadow:0 6px 20px rgba(227,71,74,.32); }
.btn--blue{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn--blue:hover{ background:#5c88ff; border-color:#5c88ff; box-shadow:0 6px 20px rgba(77,124,254,.3); }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:rgba(255,255,255,.06); }
.btn--sm{ padding:7px 13px; font-size:13px; border-radius:8px; }
.btn--lg{ padding:13px 26px; font-size:15.5px; border-radius:12px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ===================== 通用块 ===================== */
.sec{ padding:88px 0; position:relative; }
.sec--tight{ padding:56px 0; }
.sec-head{ margin-bottom:40px; }
.sec-kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-bottom:13px;
}
.sec-kicker::before{ content:""; width:22px; height:2px; background:var(--red); border-radius:2px; }
.sec-title{ font-size:clamp(25px,3.6vw,38px); font-weight:800; line-height:1.24; margin:0 0 12px; letter-spacing:-.01em; }
.sec-sub{ color:var(--text-2); font-size:15.5px; max-width:660px; margin:0; }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; transition:border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow-s); }

.grid{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
/* 5 张卡：前 3 张一行，后 2 张各占 1.5 列宽 —— 不留空洞 */
.g5{ grid-template-columns:repeat(6,1fr); }
.g5 > *{ grid-column:span 2; }
.g5 > *:nth-child(4){ grid-column:2 / span 2; }
.g5 > *:nth-child(5){ grid-column:4 / span 2; }

/* ===================== 英雄区 ===================== */
.hero{
  position:relative; padding:86px 0 74px; overflow:hidden;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(227,71,74,.16), transparent 66%),
    radial-gradient(760px 420px at 92% 8%, rgba(77,124,254,.15), transparent 66%),
    var(--bg);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 88% 68% at 50% 34%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 88% 68% at 50% 34%, #000 30%, transparent 78%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:52px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:6px 13px 6px 8px;
  border:1px solid var(--line-2); border-radius:999px; background:rgba(25,27,33,.72);
  font-size:12.5px; color:var(--text-2); margin-bottom:22px;
}
.hero-badge b{ color:var(--gold); font-weight:700; }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(63,185,80,.16); }
.hero h1{
  font-size:clamp(34px,5.4vw,62px); line-height:1.06; font-weight:900; margin:0 0 20px;
  letter-spacing:-.025em;
}
.hero h1 .hl{
  background:linear-gradient(100deg, var(--red), #ff8a5c 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ font-size:17px; color:var(--text-2); margin:0 0 30px; max-width:540px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.hstat .n{ font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hstat .l{ font-size:12.5px; color:var(--muted); letter-spacing:.04em; }

/* 英雄区右侧：像素舞台 */
.stage{ position:relative; height:400px; }
.stage-bg{
  position:absolute; inset:0; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(170deg,#1b1e25,#14161b 62%);
  overflow:hidden;
}
.stage-bg::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:16px 16px; opacity:.5;
}
.stage-floor{
  position:absolute; left:0; right:0; bottom:0; height:150px;
  background:linear-gradient(#1f232b,#171a20);
  border-top:1px solid #2b2f39;
}
.stage-floor::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:24px 24px;
}
.stage-sp{ position:absolute; image-rendering:pixelated; }
.sp-a{ width:118px; left:7%;  bottom:98px; animation:bob 2.6s ease-in-out infinite; }
.sp-b{ width:132px; right:7%; bottom:102px; animation:bob 3s ease-in-out .4s infinite; }
.sp-c{ width:100px; left:50%; bottom:76px; transform:translateX(-50%); animation:bob 2.2s ease-in-out .8s infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* ===================== 特性卡 ===================== */
.feat{ display:flex; gap:15px; }
.feat-ico{
  width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
  font-size:19px; background:rgba(255,255,255,.05); border:1px solid var(--line-2);
}
.feat h3{ margin:2px 0 7px; font-size:16.5px; font-weight:700; }
.feat p{ margin:0; color:var(--text-2); font-size:14px; }
.feat-ico.i-red{ color:var(--red); background:rgba(227,71,74,.12); border-color:rgba(227,71,74,.3); }
.feat-ico.i-blue{ color:var(--blue); background:rgba(77,124,254,.12); border-color:rgba(77,124,254,.3); }
.feat-ico.i-gold{ color:var(--gold); background:rgba(243,183,63,.12); border-color:rgba(243,183,63,.3); }
.feat-ico.i-green{ color:var(--green); background:rgba(63,185,80,.12); border-color:rgba(63,185,80,.3); }
.feat-ico.i-purple{ color:var(--purple); background:rgba(163,113,247,.12); border-color:rgba(163,113,247,.3); }

/* ===================== 流程 / 时间线 ===================== */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{ display:grid; grid-template-columns:52px 1fr; gap:18px; padding-bottom:26px; position:relative; }
.step:last-child{ padding-bottom:0; }
.step::before{
  content:""; position:absolute; left:25px; top:48px; bottom:0; width:1px;
  background:linear-gradient(var(--line-2), transparent);
}
.step:last-child::before{ display:none; }
.step-n{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line-2);
  font-weight:800; font-size:17px; color:var(--red); font-variant-numeric:tabular-nums;
}
.step h3{ margin:8px 0 6px; font-size:16.5px; }
.step p{ margin:0; color:var(--text-2); font-size:14px; }

/* ===================== CTA 条 ===================== */
.cta{
  border:1px solid var(--line); border-radius:20px; padding:44px; text-align:center;
  background:
    radial-gradient(620px 240px at 50% -30%, rgba(227,71,74,.2), transparent 70%),
    var(--panel);
}
.cta h2{ font-size:clamp(23px,3.2vw,32px); margin:0 0 12px; font-weight:800; }
.cta p{ color:var(--text-2); margin:0 0 24px; }

/* ===================== 页脚 ===================== */
.foot{ border-top:1px solid var(--line); padding:42px 0 34px; margin-top:20px; background:var(--bg-2); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
.foot h4{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 13px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot ul a{ color:var(--text-2); font-size:14px; transition:color .15s; }
.foot ul a:hover{ color:var(--text); }
.foot-brand p{ color:var(--muted); font-size:13px; margin:12px 0 0; max-width:280px; line-height:1.7; }
.foot-bot{
  border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; color:var(--muted); font-size:12.5px;
}

/* ===================== 表单 ===================== */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:7px; }
.inp{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--text); font-size:14.5px; outline:none;
  font-family:inherit; transition:border-color .16s, box-shadow .16s;
}
.inp::placeholder{ color:#5c6273; }
.inp:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(77,124,254,.16); }
.inp.bad{ border-color:var(--red); box-shadow:0 0 0 3px rgba(227,71,74,.16); }
textarea.inp{ resize:vertical; min-height:96px; line-height:1.6; }
.field-hint{ font-size:12.5px; color:var(--muted); margin-top:6px; }
.field-err{ font-size:12.5px; color:var(--red); margin-top:6px; display:none; }
.field-err.on{ display:block; }

.pw-wrap{ position:relative; }
.pw-wrap .inp{ padding-right:44px; }
.pw-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; background:transparent; color:var(--muted);
  cursor:pointer; border-radius:7px; display:grid; place-items:center; padding:0;
}
.pw-eye:hover{ color:var(--text-2); background:rgba(255,255,255,.06); }
.pw-eye svg{ width:18px; height:18px; }
.pw-eye .slash{ display:none; }
.pw-eye.off .slash{ display:block; }

.check{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--text-2); cursor:pointer; user-select:none; }
.check input{ display:none; }
.check .box{
  width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line-2);
  flex:none; margin-top:2px; display:grid; place-items:center; transition:all .15s;
}
.check input:checked + .box{ background:var(--red); border-color:var(--red); }
.check input:checked + .box::after{ content:""; width:4px; height:8px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg) translate(-1px,-1px); }
.check a{ color:var(--blue); }

/* ===================== 提示条 ===================== */
.toast{
  position:fixed; left:50%; top:18px; transform:translate(-50%,-22px); z-index:9999;
  padding:11px 18px; border-radius:11px; font-size:14px; font-weight:600;
  background:#23262e; border:1px solid var(--line-2); color:var(--text);
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s; max-width:min(560px,92vw);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }
.toast.ok{ background:#12301a; border-color:#1f5c2c; color:#8ee6a0; }
.toast.err{ background:#3a1416; border-color:#7a2a2e; color:#ffb3b6; }
.toast.warn{ background:#3a2f10; border-color:#7a6120; color:#ffd98a; }

/* ===================== 空状态 ===================== */
.empty{ text-align:center; padding:64px 20px; color:var(--muted); }
.empty .ico{ font-size:38px; opacity:.5; margin-bottom:12px; }
.empty h3{ color:var(--text-2); font-size:16px; margin:0 0 7px; }
.empty p{ margin:0; font-size:13.5px; }

/* ===================== 动效 =====================
   ★关键：入场动画只在【JS 明确加上 .js-reveal】时才隐藏元素。
   默认状态可见 —— 这样即使脚本没跑、IntersectionObserver 不可用、
   或者页面在无头环境里被整页截图（视口外的元素永远不会触发 IO），
   内容也不会变成一片空白。 */
.js-reveal.reveal{ opacity:0; transform:translateY(22px); }
.js-reveal.reveal.in{ opacity:1; transform:none; }
.reveal{ transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce){
  .js-reveal.reveal{ opacity:1; transform:none; transition:none; }
  .stage-sp{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ===================== 响应式 ===================== */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .stage{ height:320px; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  :root{ --nav-h:56px; }
  .wrap{ padding:0 16px; }
  .sec{ padding:60px 0; }
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:2px; background:var(--bg-2); border-bottom:1px solid var(--line); padding:10px 14px 16px;
    transform:translateY(-118%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .nav-links.open{ transform:none; box-shadow:0 20px 40px rgba(0,0,0,.5); }
  .nav-links a{ padding:12px 14px; font-size:15px; }
  .nav-burger{ display:grid; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .g5{ grid-template-columns:1fr; }
  .g5 > *,.g5 > *:nth-child(4),.g5 > *:nth-child(5){ grid-column:auto; }
  .hero{ padding:56px 0 48px; }
  .stage{ height:270px; }
  .foot-grid{ grid-template-columns:1fr; gap:22px; }
  .cta{ padding:30px 22px; }
}