/* ==========================================================
   我的世界 RPG 服务器官网 — 深色 + 草绿方块风样式
   ========================================================== */

:root{
  color-scheme:dark;
  --bg:        #0B0F0A;
  --bg-2:      #0E130D;
  --panel:     rgba(120,205,108,.05);
  --panel-2:   rgba(120,205,108,.10);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(140,222,120,.30);
  --text:      #E9F1E4;
  --muted:     #9CAB94;
  --muted-2:   #6E7D66;
  --green:     #74D36A;
  --green-2:   #43C2A0;
  --gold:      #F2C14E;
  --red:       #F2786B;
  --grad:      linear-gradient(135deg,#8FE07C 0%,#43C2A0 100%);
  --radius:    14.4px;
  --radius-sm: 10.8px;
  --shadow:    0 21.6px 54px -18px rgba(0,0,0,.7);
  --maxw:      1080px;
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",
          -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* 图片自适应兜底：任何图片都不超出容器宽度，高度按比例 */
img{ max-width:100%; height:auto; }

html{
  scroll-behavior:smooth;
  /* 吸顶导航高 57.6px，锚点跳转时给标题留出空间，否则会被导航盖住 */
  scroll-padding-top:75.6px;
  /* 阻止 iOS 横屏时自动放大文字 */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:14.4px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------- 我的世界主题：夜晚星空背景 ---------- */
/* 层次：像素星星（平铺，大而亮）→ 像素月亮 → 柔和月光 → 夜空渐变 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' shape-rendering='crispEdges'><g fill='%23FFFFFF'><rect x='16' y='24' width='4' height='4'/><rect x='70' y='10' width='3' height='3' opacity='.8'/><rect x='118' y='40' width='5' height='5'/><rect x='168' y='22' width='3' height='3' opacity='.7'/><rect x='40' y='88' width='3' height='3' opacity='.75'/><rect x='96' y='112' width='4' height='4'/><rect x='148' y='100' width='3' height='3' opacity='.7'/><rect x='184' y='84' width='4' height='4'/><rect x='24' y='148' width='3' height='3' opacity='.7'/><rect x='80' y='168' width='5' height='5'/><rect x='132' y='156' width='3' height='3' opacity='.7'/><rect x='176' y='142' width='4' height='4'/><rect x='8' y='60' width='2' height='2' opacity='.5'/><rect x='56' y='64' width='2' height='2' opacity='.45'/><rect x='110' y='74' width='2' height='2' opacity='.5'/><rect x='156' y='58' width='2' height='2' opacity='.45'/><rect x='48' y='126' width='2' height='2' opacity='.5'/><rect x='104' y='186' width='2' height='2' opacity='.45'/><rect x='152' y='180' width='2' height='2' opacity='.5'/></g><g fill='%23CFE8FF'><rect x='69' y='8' width='1' height='7' opacity='.75'/><rect x='66' y='11' width='7' height='1' opacity='.75'/><rect x='117' y='38' width='1' height='9' opacity='.8'/><rect x='114' y='42' width='7' height='1' opacity='.8'/><rect x='79' y='166' width='1' height='9' opacity='.7'/><rect x='76' y='170' width='7' height='1' opacity='.7'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><rect x='10' y='0' width='12' height='4' fill='%23F2E9C9'/><rect x='6' y='4' width='20' height='6' fill='%23F2E9C9'/><rect x='4' y='10' width='24' height='12' fill='%23F2E9C9'/><rect x='6' y='22' width='20' height='6' fill='%23F2E9C9'/><rect x='10' y='28' width='12' height='4' fill='%23F2E9C9'/><rect x='12' y='8' width='6' height='6' fill='%23E3D5A8'/><rect x='18' y='18' width='5' height='5' fill='%23E3D5A8'/><rect x='8' y='20' width='4' height='4' fill='%23E3D5A8'/></svg>"),
    radial-gradient(810px 468px at 78% -8%, rgba(150,200,255,.08), transparent 62%),
    radial-gradient(900px 540px at 10% 4%, rgba(116,211,106,.08), transparent 60%),
    linear-gradient(180deg,#04070F 0%,#08111D 42%,#0B1210 78%,var(--bg) 100%);
  background-size:180px 180px, 58px 58px, auto, auto, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:0 0, calc(100% - 81px) 99px, 0 0, 0 0, 0 0;
}

/* ---------- 夜晚场景：像素云 + 像素人物 + 草地 ---------- */
.mc-scene{
  position:relative; height:171px; margin-top:50.4px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16%);
}
.mc-scene__clouds{
  position:absolute; left:0; right:0; top:0; height:86.4px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='96' shape-rendering='crispEdges'><g fill='%23DCE9F5' opacity='.5'><rect x='16' y='46' width='44' height='8'/><rect x='24' y='38' width='22' height='8'/><rect x='46' y='30' width='14' height='8'/><rect x='150' y='26' width='38' height='8'/><rect x='158' y='18' width='18' height='8'/><rect x='176' y='12' width='12' height='6'/><rect x='244' y='58' width='48' height='8'/><rect x='254' y='50' width='22' height='8'/></g><g fill='%23A8C4E0' opacity='.3'><rect x='92' y='20' width='28' height='6'/><rect x='100' y='14' width='14' height='6'/><rect x='206' y='66' width='26' height='6'/></g></svg>");
  background-size:288px 86px; background-repeat:repeat-x; background-position:center top;
}
/* 地面 SVG：320×112，草地 y44-58，泥土 y58-112，三个像素人物站在草地上（脚底 y=44） */
.mc-scene__ground{
  position:absolute; left:0; right:0; bottom:0; height:100.8px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='112' shape-rendering='crispEdges'><rect y='44' width='320' height='8' fill='%235aa83c'/><rect y='52' width='320' height='6' fill='%234b8f31'/><rect y='58' width='320' height='54' fill='%237a5a36'/><rect x='10' y='58' width='12' height='8' fill='%236b4d2c'/><rect x='74' y='64' width='12' height='8' fill='%236b4d2c'/><rect x='150' y='58' width='12' height='8' fill='%236b4d2c'/><rect x='214' y='66' width='12' height='8' fill='%236b4d2c'/><rect x='286' y='58' width='12' height='8' fill='%236b4d2c'/><g><rect x='30' y='12' width='12' height='4' fill='%235A3A1E'/><rect x='30' y='16' width='12' height='8' fill='%23B58867'/><rect x='32' y='18' width='2' height='3' fill='%23332A22'/><rect x='38' y='18' width='2' height='3' fill='%23332A22'/><rect x='30' y='24' width='12' height='10' fill='%232E6BA8'/><rect x='26' y='24' width='4' height='10' fill='%23B58867'/><rect x='42' y='24' width='4' height='10' fill='%23B58867'/><rect x='30' y='34' width='4' height='10' fill='%232A2A6B'/><rect x='38' y='34' width='4' height='10' fill='%232A2A6B'/></g><g><rect x='152' y='12' width='12' height='4' fill='%233A2A18'/><rect x='152' y='16' width='12' height='8' fill='%23C89A72'/><rect x='154' y='18' width='2' height='3' fill='%23332A22'/><rect x='160' y='18' width='2' height='3' fill='%23332A22'/><rect x='152' y='24' width='12' height='10' fill='%233E7A3A'/><rect x='148' y='24' width='4' height='10' fill='%23C89A72'/><rect x='164' y='24' width='4' height='10' fill='%23C89A72'/><rect x='152' y='34' width='4' height='10' fill='%234A3728'/><rect x='160' y='34' width='4' height='10' fill='%234A3728'/></g><g><rect x='262' y='12' width='12' height='4' fill='%232A2A3A'/><rect x='262' y='16' width='12' height='8' fill='%23B58867'/><rect x='264' y='18' width='2' height='3' fill='%23332A22'/><rect x='270' y='18' width='2' height='3' fill='%23332A22'/><rect x='262' y='24' width='12' height='10' fill='%237A3E8F'/><rect x='258' y='24' width='4' height='10' fill='%23B58867'/><rect x='274' y='24' width='4' height='10' fill='%23B58867'/><rect x='262' y='34' width='4' height='10' fill='%233A2A4A'/><rect x='270' y='34' width='4' height='10' fill='%233A2A4A'/></g></svg>");
  background-size:288px 101px; background-repeat:repeat-x; background-position:center bottom;
}

/* 像素草方块分隔条（放在区块之间做点缀） */
.pixel-strip{
  height:9px; image-rendering:pixelated;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' shape-rendering='crispEdges'><rect width='16' height='4' fill='%235aa83c'/><rect y='4' width='16' height='4' fill='%237a5a36'/><rect x='2' y='4' width='3' height='4' fill='%236b4d2c'/><rect x='9' y='4' width='3' height='4' fill='%236b4d2c'/></svg>");
  background-size:29px 14px; background-repeat:repeat-x;
  opacity:.85;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.25; letter-spacing:-.02em; font-weight:800; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:rgba(116,211,106,.32); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 21.6px; }
.container--narrow{ max-width:774px; }

.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7.2px;
  height:37.8px; padding:0 18px; border-radius:9px;
  font-size:12.6px; font-weight:700; white-space:nowrap; transition:.25s ease; border:1px solid transparent;
}
.btn--lg{ height:46.8px; padding:0 25.2px; font-size:13.5px; border-radius:10.8px; }
.btn--primary{ background:var(--grad); color:#06200F; box-shadow:0 9px 25.2px -9px rgba(116,211,106,.6); }
.btn--primary:hover{ transform:translateY(-1.8px); box-shadow:0 14.4px 32.4px -9px rgba(116,211,106,.8); }
.btn--outline{ border-color:var(--line-2); color:var(--text); background:rgba(116,211,106,.04); }
.btn--outline:hover{ border-color:var(--green); color:var(--green); background:rgba(116,211,106,.1); transform:translateY(-1.8px); }
.btn--ghost{ color:var(--muted); }
.btn--ghost:hover{ color:var(--text); }

/* ---------------- 导航（通栏长条，全自适应） ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80; transition:.3s ease;
  background:rgba(9,13,8,.94);
  backdrop-filter:blur(16.2px); -webkit-backdrop-filter:blur(16.2px);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:21.6px; height:57.6px; max-width:none; padding:0 25.2px; }
.nav.is-scrolled{ background:rgba(7,10,6,.97); border-bottom-color:rgba(140,222,120,.35); }

.logo{ display:flex; align-items:center; gap:9px; }
.logo__mark{ width:28.8px; height:28.8px; flex:none; }
.logo__text{ font-weight:900; font-size:15.3px; letter-spacing:-.01em; display:flex; flex-direction:column; line-height:1.1; }
.logo__sub{ font-size:9px; font-weight:600; color:var(--muted-2); letter-spacing:.12em; text-transform:uppercase; }

.nav__menu{ display:flex; align-items:center; gap:10.8px; margin:0 36px; flex:1; justify-content:space-evenly; }
.nav__menu a{ font-size:13.1px; color:var(--muted); transition:.2s; position:relative; }
.nav__menu a:hover{ color:var(--text); }
.nav__menu a::after{ content:""; position:absolute; left:0; right:100%; bottom:-5.4px; height:1.8px; background:var(--grad); transition:right .28s ease; border-radius:1.8px; }
.nav__menu a:hover::after{ right:0; }

.nav__actions{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.nav__toggle{ display:none; width:36px; height:36px; border-radius:9px; border:1px solid var(--line); flex-direction:column; align-items:center; justify-content:center; gap:3.6px; }
.nav__toggle span{ display:block; width:14.4px; height:1.4px; background:var(--text); border-radius:1.8px; transition:.25s; }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ---------------- HERO ---------------- */
.hero{ position:relative; padding:126px 0 72px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.grid-mask{
  position:absolute; inset:-10% -10% 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 25%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 25%, #000 40%, transparent 100%);
}
.glow{ position:absolute; border-radius:50%; filter:blur(81px); opacity:.5; }
.glow--1{ width:468px; height:468px; top:-126px; left:-72px;  background:rgba(116,211,106,.32); }
.glow--2{ width:486px; height:486px; top:27px;  right:-144px; background:rgba(67,194,160,.3); }
.glow--3{ width:378px; height:378px; bottom:-144px; left:38%;  background:rgba(242,193,78,.16); }

.hero__inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:50.4px; align-items:center; }
.tag{
  display:inline-flex; align-items:center; gap:7.2px; padding:5.4px 12.6px; border-radius:899.1px;
  border:1px solid var(--line); background:rgba(116,211,106,.07); font-size:11.2px; color:var(--muted); letter-spacing:.02em;
}
.dot{ width:6.3px; height:6.3px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3.6px rgba(116,211,106,.16); animation:blink 2s infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
.dot--ok{ background:#34D399; box-shadow:0 0 0 3.6px rgba(52,211,153,.16); }

.hero__title{ margin:19.8px 0 16.2px; font-size:clamp(30.6px,4.14vw,50.4px); letter-spacing:-.035em; }
.hero__desc{ color:var(--muted); font-size:14.8px; max-width:504px; }
.hero__cta{ display:flex; gap:12.6px; margin:28.8px 0 23.4px; flex-wrap:wrap; }
.hero__trust{ display:flex; gap:10.8px 36px; flex-wrap:wrap; font-size:12.2px; color:var(--muted-2); }
.hero__trust li{ display:flex; align-items:center; gap:5.4px; }
.hero__trust strong{ color:var(--text); font-weight:700; }

/* 服务器状态卡 */
.hero__visual{ position:relative; }
.status-card{
  position:relative; padding:23.4px; border-radius:var(--radius);
  background:rgba(14,20,13,.9); border:1px solid var(--line-2);
  box-shadow:7.2px 7.2px 0 -2.7px rgba(116,211,106,.16), var(--shadow);
}
.status-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16.2px; }
.status-card__name{ font-size:13.5px; font-weight:800; }
.status-card__live{ display:inline-flex; align-items:center; gap:5.4px; font-size:10.8px; color:var(--green); font-weight:700; }
.ip-box{
  display:flex; align-items:center; gap:9px; justify-content:space-between;
  padding:18.9px 14.4px; border-radius:var(--radius-sm); background:rgba(0,0,0,.35);
  border:1px dashed var(--line-2); margin-bottom:16.2px;
}
.ip-box__label{ font-size:9.9px; color:var(--muted-2); letter-spacing:.12em; text-transform:uppercase; }
.ip-box__value{ font-size:15.3px; font-weight:800; color:var(--green); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.copy-btn{
  flex:none; padding:6.3px 10.8px; border-radius:7.2px; font-size:11.2px; font-weight:700;
  background:var(--grad); color:#06200F; transition:.2s;
}
.copy-btn:hover{ filter:brightness(1.08); }
.copy-btn.is-done{ background:var(--green-2); }

.status-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12.6px; }
.online-live{ display:flex; align-items:center; justify-content:space-between; padding:10.8px 12.6px; border-radius:10.8px; background:rgba(116,211,106,.08); border:1px solid rgba(116,211,106,.22); }
.online-live span{ font-size:11.7px; color:var(--muted-2); }
.online-live b{ font-size:16.2px; font-weight:800; color:var(--green); font-variant-numeric:tabular-nums; }
.status-card__live.is-off{ color:#F2786B; }
.dot--off{ background:#F2786B; box-shadow:0 0 7.2px rgba(242,120,107,.7); }
.status-grid div{ padding:9.9px 11.7px; border-radius:var(--radius-sm); background:rgba(255,255,255,.035); border:1px solid var(--line); }
.status-grid span{ display:block; font-size:9.9px; color:var(--muted-2); }
.status-grid b{ font-size:12.6px; font-weight:700; }

/* 指标条 */
.stats{
  position:relative; margin-top:57.6px; display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); overflow:hidden;
}
.stat{ padding:21.6px 16.2px; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat b{ display:inline; font-size:25.2px; font-weight:800; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat em{ display:block; margin-top:3.6px; font-style:normal; font-size:11.2px; color:var(--muted-2); }

/* ---------------- 通用区块 ---------------- */
.section{ position:relative; padding:86.4px 0; }
.section--alt{ background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head{ max-width:612px; margin-bottom:46.8px; }
.eyebrow{ display:inline-block; font-size:10.3px; font-weight:800; letter-spacing:.22em; color:var(--green); margin-bottom:12.6px; }
.section__head h2{ font-size:clamp(23.4px,2.88vw,34.2px); }
.section__head p{ margin-top:12.6px; color:var(--muted); font-size:14px; }
.section__more{
  display:inline-block; margin-top:14.4px; font-size:12.2px;
  font-weight:700; color:var(--green); text-decoration:none;
}
.section__more:hover{ text-decoration:underline; }

/* ---------------- 特性卡片（玩法系统） ---------------- */
.card{
  position:relative; padding:23.4px 19.8px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel); transition:.3s ease; overflow:hidden;
}
.card::before{ content:""; position:absolute; inset:0; opacity:0; transition:.35s; background:radial-gradient(378px circle at 50% 0%, rgba(116,211,106,.14), transparent 70%); }
.card:hover{ transform:translateY(-5.4px); border-color:var(--line-2); background:var(--panel-2); box-shadow:5.4px 5.4px 0 -2.7px rgba(116,211,106,.18); }
.card:hover::before{ opacity:1; }
.card h3{ font-size:15.3px; position:relative; }
.card > p{ margin-top:9px; color:var(--muted); font-size:12.6px; position:relative; }
.card__badge{ position:absolute; top:14.4px; right:14.4px; z-index:2; font-size:9.9px; font-weight:800; padding:2.7px 8.1px; border-radius:899.1px; color:#06200F; background:var(--grad); }
.card--hot{ border-color:rgba(116,211,106,.35); background:linear-gradient(180deg,rgba(116,211,106,.09),rgba(255,255,255,.02)); }

/* ---------------- 教程时间线 ---------------- */
.timeline{ display:grid; gap:0; }
.timeline__item{
  display:grid; grid-template-columns:46.8px 1fr; gap:18px; padding:19.8px 0;
  border-bottom:1px solid var(--line); position:relative;
}
.timeline__item:last-child{ border-bottom:0; }
.timeline__num{
  width:39.6px; height:39.6px; border-radius:11.7px; display:grid; place-items:center;
  background:var(--grad); color:#06200F; font-weight:900; font-size:14.4px; box-shadow:2.7px 2.7px 0 -1px rgba(116,211,106,.25);
}
.timeline__body h4{ font-size:14.8px; }
.timeline__body p{ margin-top:7.2px; color:var(--muted); font-size:12.6px; }
.tutorial-split{ display:grid; grid-template-columns:1fr 1fr; gap:43.2px; align-items:start; }
.tutorial-split .section__head{ margin-bottom:0; }

/* ---------------- 公告 ---------------- */
/* 公告列表（紧凑型：标签 + 标题 + 右侧日期） */
.news{ border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); overflow:hidden; }
.news__item{
  display:flex; align-items:center; gap:14.4px;
  padding:13.5px 19.8px; border-bottom:1px solid var(--line); transition:.2s;
}
.news__item:last-child{ border-bottom:none; }
.news__item:hover{ background:var(--panel-2); }
.news__tag{ flex:none; display:inline-block; font-size:9.9px; font-weight:800; padding:2.7px 9px; border-radius:89.1px; }
.tag--update{ background:rgba(116,211,106,.16); color:var(--green); }
.tag--event{ background:rgba(242,193,78,.16); color:var(--gold); }
.tag--maint{ background:rgba(242,120,107,.16); color:var(--red); }
.news__title{ flex:1; min-width:0; font-size:13.5px; color:var(--text); text-decoration:none; }
.news__item:hover .news__title{ color:var(--green); }
.news__date{ flex:none; font-size:11.2px; color:var(--muted-2); white-space:nowrap; }

/* ---------------- 玩家评价 ---------------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.quote{ margin:0; padding:25.2px 23.4px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); position:relative; transition:.3s; }
.quote::before{ content:"\201C"; position:absolute; top:7.2px; left:16.2px; font-size:54px; line-height:1; color:rgba(116,211,106,.2); font-family:Georgia,serif; }
.quote:hover{ transform:translateY(-3.6px); border-color:var(--line-2); }
.quote blockquote{ margin:0; font-size:13.1px; color:var(--text); position:relative; }
.quote figcaption{ margin-top:16.2px; padding-top:12.6px; border-top:1px solid var(--line); }
.quote figcaption b{ display:block; font-size:12.2px; }
.quote figcaption span{ font-size:11.2px; color:var(--muted-2); }

/* ---------------- 社区 ---------------- */
.community{ display:grid; grid-template-columns:repeat(4,1fr); gap:14.4px; }
.community__card{
  padding:21.6px 18px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel);
  transition:.28s; display:flex; flex-direction:column; gap:7.2px;
}
.community__card:hover{ transform:translateY(-4.5px); border-color:var(--line-2); background:var(--panel-2); }
.community__icon{ width:39.6px; height:39.6px; border-radius:10.8px; display:grid; place-items:center; background:rgba(116,211,106,.12); border:1px solid rgba(116,211,106,.28); color:var(--green); }
.community__icon svg{ width:19.8px; height:19.8px; }
.community__card h4{ font-size:14px; }
.community__card p{ font-size:11.7px; color:var(--muted); }
.community__card a{ margin-top:auto; font-size:12.2px; font-weight:700; color:var(--green); }

/* ---------------- FAQ ---------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19.8px 3.6px; text-align:left; font-size:14px; font-weight:700; transition:.2s; }
.faq__q:hover{ color:var(--green); }
.faq__q i{ position:relative; flex:none; width:14.4px; height:14.4px; }
.faq__q i::before,.faq__q i::after{ content:""; position:absolute; background:currentColor; border-radius:1.8px; transition:.3s; }
.faq__q i::before{ left:0; top:6.8px; width:14.4px; height:1.4px; }
.faq__q i::after{ left:6.8px; top:0; width:1.4px; height:14.4px; }
.faq__item.is-open .faq__q{ color:var(--green); }
.faq__item.is-open .faq__q i::after{ transform:rotate(90deg); opacity:0; }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq__a p{ padding:0 3.6px 19.8px; font-size:13.1px; color:var(--muted); }
.faq__item.is-open .faq__a{ max-height:360px; }

/* ---------------- CTA ---------------- */
.cta{ position:relative; padding:86.4px 0; text-align:center;
  background:
    radial-gradient(810px 360px at 50% 0%, rgba(116,211,106,.14), transparent 70%),
    radial-gradient(630px 324px at 50% 100%, rgba(67,194,160,.14), transparent 70%);
  border-top:1px solid var(--line);
}
.cta__inner{ max-width:648px; }
.cta h2{ font-size:clamp(21.6px,2.88vw,32.4px); }
.cta > .container > p{ margin-top:12.6px; color:var(--muted); }
.cta__note{ font-size:11.7px; color:var(--muted-2); }

/* ---------------- 页脚 ---------------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:57.6px 0 25.2px; }
.footer__inner{ display:grid; grid-template-columns:1.6fr repeat(2,1fr); gap:28.8px; }
.footer__brand p{ margin-top:12.6px; font-size:12.2px; color:var(--muted-2); max-width:252px; }
.footer__col h4{ font-size:12.2px; margin-bottom:12.6px; }
.footer__col a{ display:block; font-size:12.2px; color:var(--muted-2); padding:4.5px 0; transition:.2s; }
.footer__col a:hover{ color:var(--green); }
.footer__bottom{ margin-top:39.6px; padding-top:19.8px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14.4px; flex-wrap:wrap; font-size:11.2px; color:var(--muted-2); }
.footer__bottom a{ color:var(--muted-2); }
.footer__bottom a:hover{ color:var(--green); }
.disclaimer{ margin-top:12.6px; font-size:10.3px; color:var(--muted-2); line-height:1.6; }

/* ---------------- 入场动画 ---------------- */
.reveal{ opacity:0; transform:translateY(23.4px); transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .quotes{ grid-template-columns:1fr; }
  .community{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(3){ border-top:1px solid var(--line); }
  .stat:nth-child(4){ border-top:1px solid var(--line); }
  .tutorial-split{ grid-template-columns:1fr; gap:28.8px; }

  /* 导航折叠为汉堡菜单（长条自适应） */
  .nav__menu{
    position:fixed; top:57.6px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:3.6px;
    padding:16.2px 25.2px 23.4px; background:rgba(9,13,8,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line); transform:translateY(-10.8px); opacity:0; pointer-events:none; transition:.28s;
  }
  .nav.is-open .nav__menu{ transform:none; opacity:1; pointer-events:auto; }
  .nav__menu a{ width:100%; padding:10.8px 0; font-size:13.5px; border-bottom:1px solid var(--line); }
  .nav__menu a::after{ display:none; }
  .nav__actions .btn--ghost{ display:none; }
  .nav__toggle{ display:flex; }
}

@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; gap:36px; }
  .hero{ padding-top:108px; }
  .hero__visual{ order:-1; max-width:468px; margin:0 auto; }
}

@media (max-width:600px){
  .container{ padding:0 16.2px; }
  .section{ padding:63px 0; }
  .community{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--line); }
  .stat:nth-child(3){ border-top:0; }
  .footer__inner{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================
   勇者大陆补充样式
   ========================================================== */
.quotes--2{ grid-template-columns:repeat(2,1fr); max-width:774px; margin:0 auto; }

.community--3{ grid-template-columns:repeat(3,1fr); }
.community__row{ display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:3.6px; }
.community__row b{ color:var(--green); font-weight:800; letter-spacing:.02em; }
.community__qr{ width:100%; max-width:171px; height:auto; display:block; margin:10.8px auto 0; border-radius:10.8px; background:#fff; padding:5.4px; box-shadow:0 7.2px 21.6px rgba(0,0,0,.35); }

.cta__actions{ display:flex; gap:12.6px; justify-content:center; flex-wrap:wrap; margin:27px 0 14.4px; }

/* ---------- Hero 动态标题（SVG 路径矢量：无锯齿；扁横幅；满宽与下方内容对齐；红条 SMIL 往复） ---------- */
/* 字形/描边/渐变/红条动画全部内联在 index.html 的 SVG 里（tools/make_title_svg.py 生成），此处只管布局 */
.hero__banner{ display:block; width:100%; height:auto; margin:0 auto 32.4px; filter:drop-shadow(0 5.4px 21.6px rgba(0,0,0,.45)); }

/* ---------- 服务器风采画廊 ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14.4px; margin:19.8px auto 0; }
.gallery__item{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--panel); cursor:zoom-in; transition:transform .3s, border-color .3s; }
.gallery__item img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .35s; }
.gallery__item:hover{ border-color:var(--line-2); transform:translateY(-3.6px); }
.gallery__item:hover img{ transform:scale(1.04); }

/* ---------- 灯箱 ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(5,9,7,.92); backdrop-filter:blur(5.4px); padding:25.2px; }
.lightbox.is-open{ display:flex; }
.lightbox__figure{ margin:0; max-width:min(972px,84.6vw); text-align:center; }
.lightbox__img{ max-width:100%; max-height:70.2vh; border-radius:10.8px; box-shadow:0 21.6px 57.6px rgba(0,0,0,.6); }
.lightbox__caption{ margin-top:12.6px; font-size:12.2px; color:var(--muted-2); }
.lightbox__btn{ position:absolute; width:41.4px; height:41.4px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.06); color:var(--text); font-size:25.2px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.2s; z-index:2; }
.lightbox__btn:hover{ background:rgba(116,211,106,.18); border-color:rgba(116,211,106,.6); }
.lightbox__close{ top:16.2px; right:19.8px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__prev{ left:16.2px; }
.lightbox__next{ right:16.2px; }

@media (max-width:1080px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .gallery{ grid-template-columns:1fr; gap:10.8px; }
  .lightbox{ padding:10.8px; }
  .lightbox__nav{ display:none; }
}

@media (max-width:1080px){
  .quotes--2{ grid-template-columns:1fr; }
  .community--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .community--3{ grid-template-columns:1fr; }

  /* 手机端细节优化 */
  .hero{ padding-top:93.6px; }
  .hero__banner{ margin-bottom:21.6px; }
  .mc-scene{ height:100.8px; margin-top:32.4px; }
  .mc-scene__clouds{ height:64.8px; background-size:234px 70px; }
  .mc-scene__ground{ height:77.4px; background-size:234px 82px; }
  .community__row{ flex-wrap:wrap; }
  .nav__inner{ padding:0 16.2px; gap:12.6px; }
  .nav__menu{ padding:14.4px 16.2px 19.8px; }

  /* 手机端公告列表 */
  .news__item{ padding:11.7px 14.4px; gap:9.9px; }
  .news__title{ font-size:12.6px; }
  .news__tag{ font-size:9.5px; padding:1.8px 7.2px; }
}

/* ============ 玩法介绍：品质/爵位阶梯、副本标签、更多玩法 ============ */
.feature-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.card__k{
  font-size:11.2px; color:var(--muted-2);
  letter-spacing:1px; margin:5.4px 0 12.6px;
}
.ladder{
  margin-top:14.4px; font-size:12.2px; color:var(--green);
  word-spacing:1.8px; line-height:2;
}
.ladder em{ font-style:normal; color:var(--muted-2); margin:0 3.6px; }
.maps{ display:flex; flex-wrap:wrap; gap:7.2px; margin-top:14.4px; }
.maps span{
  padding:5.4px 11.7px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:899.1px;
  font-size:11.7px; color:var(--text);
}
.feature-more{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12.6px; margin-top:39.6px;
}
.feature-more div{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14.4px 16.2px;
  font-size:12.6px; color:var(--muted);
}
.feature-more b{
  display:block; color:var(--text); font-size:13.5px;
  font-weight:600; margin-bottom:3.6px;
}
.feature-note{
  margin:25.2px auto 0; max-width:738px; padding:12.6px 16.2px;
  border-left:2.7px solid var(--gold); border-radius:7.2px;
  background:rgba(242,193,78,.07);
  font-size:12.6px; color:var(--muted); line-height:1.7;
}
.feature-note b{ color:var(--gold); font-weight:700; }

@media (max-width:1080px){
  .feature-grid{ grid-template-columns:1fr; }
  .feature-more{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .feature-more{ grid-template-columns:1fr; }
  .ladder{ font-size:11.2px; }
}

/* ---------- 品质八阶进阶阶梯（可视化） ---------- */
.tier{
  position:relative; margin-top:16.2px; display:grid;
  grid-template-columns:repeat(8,1fr); gap:6.3px; align-items:end;
}
.tier::after{
  content:""; position:absolute; left:6.3px; right:6.3px; bottom:0; height:2.7px;
  border-radius:2.7px; opacity:.75;
  background:linear-gradient(90deg,#8b8f96,#c9d4d8,#74D36A,#4aa3df,#a78bfa,#f2a14e,#F2C14E,#F2786B);
}
.tier__step{
  min-width:0; text-align:center; padding:8.1px 3.6px 9px;
  border-radius:9px 9px 7.2px 7.2px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-top:3.6px solid var(--c,#8b8f96);
  display:flex; flex-direction:column; gap:2.7px;
}
.tier__step b{ font-size:12.6px; font-weight:800; color:var(--c,#ccc); }
.tier__step span{ font-size:9.5px; color:var(--muted-2); line-height:1.3; }
.tier__step:nth-child(1){ --c:#8b8f96; min-height:60.3px; }
.tier__step:nth-child(2){ --c:#c9d4d8; min-height:64.8px; }
.tier__step:nth-child(3){ --c:#74D36A; min-height:69.3px; }
.tier__step:nth-child(4){ --c:#4aa3df; min-height:73.8px; }
.tier__step:nth-child(5){ --c:#a78bfa; min-height:78.3px; }
.tier__step:nth-child(6){ --c:#f2a14e; min-height:82.8px; }
.tier__step:nth-child(7){ --c:#F2C14E; min-height:87.3px; }
.tier__step:nth-child(8){ --c:#F2786B; min-height:91.8px; }

/* ---------- 十座副本地图列表（可视化） ---------- */
.dungeons{
  margin-top:16.2px; display:grid; grid-template-columns:repeat(2,1fr); gap:7.2px;
}
.dungeon{
  display:flex; align-items:center; justify-content:space-between; gap:7.2px;
  padding:8.1px 10.8px; border-radius:10.8px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); font-size:12.2px;
}
.dungeon b{ font-weight:700; color:var(--text); white-space:nowrap; }
.dungeon__lines{ display:flex; gap:3.6px; flex:none; }
.dungeon__lines i{
  font-style:normal; font-size:9px; font-weight:700; padding:1.8px 6.3px;
  border-radius:899.1px; letter-spacing:.02em; white-space:nowrap;
}
.dungeon__lines i.l1{ background:rgba(116,211,106,.16); color:var(--green); }
.dungeon__lines i.l2{ background:rgba(74,163,223,.18); color:#6fb7e8; }
.dungeon__lines i.vip{ background:rgba(242,193,78,.16); color:var(--gold); }

@media (max-width:900px){
  .tier{ grid-template-columns:repeat(4,1fr); }
  .tier__step{ min-height:0 !important; }
}
@media (max-width:520px){
  .tier{ grid-template-columns:repeat(2,1fr); }
  .dungeons{ grid-template-columns:1fr; }
}

/* ---------- 爵位晋升权益 ---------- */
.rank-perks{ display:flex; flex-wrap:wrap; gap:7.2px; margin-top:12.6px; }
.rank-perks span{ font-size:11.2px; color:var(--muted); padding:4.5px 9.9px; background:var(--panel-2); border:1px solid var(--line); border-radius:899.1px; }
.rank-perks b{ color:var(--green); font-weight:700; margin-right:2.7px; }
.rank-ahead{ margin-top:12.6px; padding-top:10.8px; border-top:1px dashed var(--line); font-size:11.2px; color:var(--muted-2); line-height:1.6; }
.rank-ahead b{ color:var(--gold); font-weight:700; }

/* ==========================================================
   整体优化补充：无障碍跳转 / 导航高亮 / 回到顶部 / 公告数据驱动
   ========================================================== */

/* 键盘跳转链接：Tab 第一站直达主内容，跳过导航 */
.skip-link{
  position:fixed; top:7.2px; left:7.2px; z-index:300;
  padding:8.1px 14.4px; border-radius:7.2px; font-size:12.2px; font-weight:700;
  background:var(--grad); color:#06200F;
  transform:translateY(-160%); transition:transform .25s ease;
}
.skip-link:focus{ transform:none; }
.skip-link:focus-visible{ outline:1.8px solid #fff; outline-offset:1.8px; }

/* 导航当前区块高亮（滚动监听，JS 加 .is-active） */
.nav__menu a.is-active{ color:var(--text); }
.nav__menu a.is-active::after{ right:0; }

/* 回到顶部 */
.to-top{
  position:fixed; right:16.2px; bottom:19.8px; z-index:90;
  width:41.4px; height:41.4px; border-radius:11.7px; display:grid; place-items:center;
  background:rgba(14,20,13,.92); border:1px solid var(--line-2); color:var(--green);
  box-shadow:var(--shadow); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  opacity:0; visibility:hidden; transform:translateY(10.8px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, border-color .2s, background .2s;
}
.to-top.is-show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:var(--green); background:rgba(116,211,106,.16); }
.to-top svg{ width:18px; height:18px; }
@media (max-width:600px){
  .to-top{ right:10.8px; bottom:14.4px; width:37.8px; height:37.8px; }
}

/* 公告列表：JS 渲染时的淡入，避免整块闪一下 */
.news.is-loading{ opacity:.45; transition:opacity .18s; }
.news{ transition:opacity .18s; }
.news__empty{
  padding:23.4px 19.8px; text-align:center; color:var(--muted-2); font-size:12.6px;
}

/* ==========================================================
   全站自适应加固
   ========================================================== */

/* 标题换行更均衡（旧浏览器不支持会自动忽略，无副作用） */
h1,h2,h3,.article-title{ text-wrap:balance; }

/* ---------- 小屏手机（≤400px，如 iPhone SE / 小安卓）精细适配 ---------- */
@media (max-width:400px){
  /* 留白收一档，一屏能多看两块内容 */
  .hero{ padding:90px 0 46.8px; }
  .section{ padding:50.4px 0; }
  .section__head{ margin-bottom:36px; }

  /* 统计条：群号 10 位数字是小屏最宽的元素，字号和内距同步收 */
  .stat{ padding:14.4px 7.2px; }
  .stat b{ font-size:20.7px; }
  .stat em{ font-size:10.4px; }

  /* Hero 信任条：三个条目换行后间距太大 */
  .hero__trust{ gap:5.4px 14.4px; font-size:11.2px; }

  /* 教程时间线：数字圆圈和间距缩小 */
  .timeline__item{ grid-template-columns:39.6px 1fr; gap:12.6px; }
  .timeline__num{ width:34.2px; height:34.2px; border-radius:9.9px; }

  /* 状态卡：地址行和按钮别挤在一起 */
  .ip-box{ padding:10.8px 11.7px; gap:7.2px; }
  .copy-btn{ padding:5.4px 9px; font-size:10.4px; }

  /* 按钮和玩法小卡 */
  .btn--lg{ height:46.8px; padding:0 19.8px; font-size:13.5px; }
  .feature-more{ gap:9px; margin-top:32.4px; }
  .feature-more div{ padding:11.7px 12.6px; }

  /* 公告列表与页脚 */
  .news__item{ padding:10.8px 12.6px; gap:9px; }
  .footer__bottom{ flex-direction:column; gap:7.2px; }

  /* 灯箱按钮缩小，别挡住小图 */
  .lightbox__btn{ width:36px; height:36px; font-size:21.6px; }
}

/* ---------------- 新人教程左栏：勇者角色图 ---------------- */
.guide-char{
  margin-top:54px; position:relative; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius);
  background:radial-gradient(ellipse at 50% 42%, rgba(116,211,106,.10), rgba(255,255,255,.02) 68%);
  padding:16.2px 14.4px;
}
.guide-char img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 7.2px 18px rgba(0,0,0,.50));
  animation:guideCharFloat 4.5s ease-in-out infinite;
}
@keyframes guideCharFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7.2px); }
}
@media (prefers-reduced-motion:reduce){
  .guide-char img{ animation:none; }
}
@media (max-width:600px){
  .guide-char{ margin-top:43.2px; }
  .guide-char img{ max-width:342px; margin:0 auto; }
}