/* Endacopia Field Guide — 游戏站模板1 · 品牌皮肤
   母图：Steam 官方 Header (header.jpg)
   基础 Token（母图原始职责色）：黑 #000000 / 暖橙 #f09848 / 暗红 #300000 / 白 #fbfbfb / 中灰 #474747
   派生 Token：同色相内混黑/混白/调明度，组件层不散落裸色值。 */

:root{
  --ink:#d0d0d2;            /* 正文（母图白降明度） */
  --ink-strong:#fbfbfb;     /* 标题（母图浅色内容底） */
  --navy:#0a0a0b;           /* 结构深色（导航/Footer，母图黑提微灰） */
  --paper:#0d0d0e;          /* 页面背景（母图环境主色黑） */
  --paper-2:#171719;        /* 卡片表面（结构深色提亮） */
  --surface-3:#1e1e21;      /* 次表面 */
  --teal:#f09848;           /* 主链接/识别色（母图暖橙，主角 Mellow 教育软件暖色） */
  --teal-ink:#1a1206;       /* 暖橙底深字 */
  --coral:#f09848;          /* 主 CTA（同暖橙） */
  --violet:#5a1010;         /* 暗红点缀（母图恐怖血色提亮） */
  --line:#333336;           /* 边框（母图中灰压深） */
  --muted:#8a8a8f;          /* 次要文字（中灰提亮） */
  --shadow:0 18px 50px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:var(--teal);text-underline-offset:.2em;text-decoration-thickness:.08em}
a:hover{color:var(--ink-strong)}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:4px}

.skip-link{position:fixed;z-index:20;left:1rem;top:-5rem;background:var(--paper-2);color:var(--ink-strong);padding:.8rem 1rem;border:2px solid var(--teal)}
.skip-link:focus{top:1rem}

/* 1. Sticky 顶部导航 */
.site-header{position:sticky;top:0;z-index:10;background:var(--navy);color:var(--ink-strong);border-bottom:3px solid var(--teal)}
.header-inner{max-width:1180px;margin:auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:1.25rem;justify-content:space-between;flex-wrap:wrap}
.brand{color:var(--ink-strong);text-decoration:none;display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.02em;min-height:44px}
.brand-mark{display:block;width:auto;height:34px;border-radius:4px}
.site-nav{display:flex;gap:.25rem;flex-wrap:wrap}
.site-nav a{color:var(--ink);text-decoration:none;padding:.58rem .72rem;min-height:44px;display:inline-flex;align-items:center;border-radius:4px}
.site-nav a:hover{background:rgba(255,255,255,.08);color:var(--ink-strong)}
.site-nav a[aria-current]{color:var(--teal);font-weight:700}

/* 2. 全宽沉浸式 Hero（官方截图 + 定向遮罩） */
.hero{position:relative;color:var(--ink-strong);padding:4rem 1.25rem 3rem;border-bottom:1px solid var(--line);background:#0a0a0b}
.hero::before{content:"";position:absolute;inset:0;background-image:url('assets/media/screenshot-1.jpg');background-size:cover;background-position:center;opacity:.34;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,5,6,.96) 0%,rgba(5,5,6,.82) 46%,rgba(5,5,6,.35) 100%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:1080px;margin:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:800;color:var(--teal);margin:0 0 .9rem}
.hero h1{font:700 clamp(2rem,5.4vw,4.4rem)/1.02 Georgia,serif;letter-spacing:-.03em;max-width:900px;margin:0;color:var(--ink-strong)}
.lede{max-width:780px;font-size:clamp(1.04rem,2.2vw,1.28rem);color:var(--ink);margin:1.2rem 0 0}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}
.cta-primary{display:inline-flex;align-items:center;min-height:48px;padding:.7rem 1.4rem;background:var(--coral);color:var(--teal-ink);text-decoration:none;font-weight:800;border-radius:8px;border:2px solid var(--coral)}
.cta-primary:hover{background:#d9823a;border-color:#d9823a;color:var(--teal-ink)}
.cta-secondary{display:inline-flex;align-items:center;min-height:48px;padding:.7rem 1.4rem;background:transparent;color:var(--ink-strong);text-decoration:none;font-weight:700;border-radius:8px;border:2px solid var(--line)}
.cta-secondary:hover{border-color:var(--teal);color:var(--teal)}
.hero-facts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.fact-chip{display:inline-flex;flex-direction:column;min-width:112px;padding:.6rem .85rem;background:rgba(23,23,25,.72);border:1px solid var(--line);border-radius:8px}
.fact-chip span{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.fact-chip strong{font-size:.98rem;color:var(--ink-strong);margin-top:.15rem}

.page-shell{max-width:1080px;margin:0 auto;padding:2.2rem 1.25rem 5rem}
.task-links{display:flex;gap:.8rem;flex-wrap:wrap;margin:0 0 1.5rem}
.task-links a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem .85rem;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);color:var(--ink);text-decoration:none}
.task-links a:hover{border-color:var(--teal);color:var(--ink-strong)}

.content-section{padding:2rem 0;border-bottom:1px solid var(--line)}
.content-section>h2{font:700 clamp(1.65rem,4vw,2.7rem)/1.08 Georgia,serif;letter-spacing:-.02em;margin:0 0 1rem;color:var(--ink-strong)}
.content-section h3{margin:.25rem 0 .5rem;line-height:1.25;color:var(--ink-strong)}
.content-section p:first-child{margin-top:0}
.content-section p:last-child{margin-bottom:0}

/* 5/6. 任务卡 + Gallery 网格（4→2→1） */
.answer-grid,.route-groups,.fact-grid,.tier-grid,.next-grid,.pending-grid{display:grid;gap:1rem}
.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.answer,.route-groups article,.tier-grid>div,.pending-grid article{background:var(--paper-2);padding:1.25rem;border:1px solid var(--line);border-radius:8px;box-shadow:0 7px 20px rgba(0,0,0,.28)}
.answer:first-child{grid-column:1/-1;border-left:5px solid var(--teal)}

.evidence{display:inline-flex;align-items:center;min-height:28px;padding:.18rem .48rem;border-radius:999px;font-size:.68rem;font-weight:900;letter-spacing:.09em}
.verified{background:#0d2a24;color:#7fd6c4}
.bounded{background:#1e1830;color:#b8a4e0}
.community,.community-single{background:#2a1808;color:#f0a860}

.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:2rem;align-items:center}
.brand-figure{margin:0;background:var(--surface-3);padding:.55rem;border-radius:8px;box-shadow:var(--shadow)}
.brand-figure img{display:block;width:100%;height:auto;border-radius:4px}
.brand-figure figcaption{color:var(--muted);font-size:.8rem;padding:.7rem .35rem .25rem}

.fact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.fact-grid>div{padding:1rem;border-top:4px solid var(--teal);background:var(--surface-3)}
.fact-grid span,.next-grid span,.pending-grid span{display:block;color:var(--muted);font-size:.9rem}
.fact-grid strong{display:block;margin-top:.3rem;color:var(--ink-strong)}

.boundary{padding:1rem 1.15rem;background:#1c1212;border-left:5px solid var(--violet);color:var(--ink)}

.route-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
.route-groups a{display:inline-flex;align-items:center;min-height:44px;padding:.3rem .35rem}
.tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.next-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.next-grid>a{display:block;min-height:100px;padding:1rem;background:var(--paper-2);color:var(--ink);text-decoration:none;border-radius:7px;border:1px solid var(--line);border-bottom:4px solid var(--teal)}
.next-grid>a:hover{background:var(--surface-3);color:var(--ink-strong)}
.pending-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pending-grid article{border-left:4px solid var(--violet)}

/* 6. 官方截图 Gallery（1 大 + 2 小 / 手机一列） */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:.5rem}
.gallery figure{margin:0;display:flex;flex-direction:column;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gallery figcaption{padding:.65rem .8rem;font-size:.82rem;color:var(--muted);line-height:1.4;flex:1 0 auto}

/* 7. 视频区（缩略图 + 跳转 YouTube） */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:.5rem}
.video-card{display:block;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink)}
.video-card:hover{border-color:var(--teal)}
.video-thumb{position:relative;display:block}
.video-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(240,152,72,.92);color:#1a1206;display:grid;place-items:center;font-size:1.4rem}
.video-caption{padding:.7rem .85rem}
.video-caption strong{display:block;color:var(--ink-strong)}
.video-caption span{display:block;font-size:.8rem;color:var(--muted)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper-2)}
table{width:100%;border-collapse:collapse;min-width:650px}
th,td{text-align:left;vertical-align:top;padding:.8rem;border-bottom:1px solid var(--line);color:var(--ink)}
th{background:var(--navy);color:var(--ink-strong)}
.status{font-weight:800;font-size:.8rem}
.published{color:#7fd6c4}
.pending{color:#f0a860}

.steps,.checklist{padding-left:1.4rem}
.steps li,.checklist li{padding:.5rem .2rem}
.checklist li::marker{color:var(--teal)}

.sources{padding:2rem 0}
.sources h2{font:700 1.7rem Georgia,serif;color:var(--ink-strong)}
.source-list{display:grid;gap:.75rem}
.source-item{padding:1rem;border:1px solid var(--line);background:var(--paper-2);border-radius:6px;overflow-wrap:anywhere}
.source-item p{margin:.45rem 0 0}
.source-meta{margin:.8rem 0 0;display:grid;gap:.45rem}
.source-meta div{display:grid;grid-template-columns:minmax(7rem,.25fr) 1fr;gap:.7rem}
.source-meta dt{font-weight:800;color:var(--ink-strong)}
.source-meta dd{margin:0}

.comparison-table table{min-width:1180px}
.comparison-table th,.comparison-table td{overflow-wrap:normal;word-break:normal;min-width:9rem}
.review-note{margin-top:1rem;padding:1rem;border:1px dashed var(--violet);background:#1c1212}

.site-footer{background:var(--navy);color:var(--muted);padding:2rem 1.25rem}
.footer-inner{max-width:1080px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.site-footer a{color:var(--teal)}
.site-footer p{margin:.25rem 0}

.source-item a[target="_blank"]::after,.next-grid a[target="_blank"]::after,.video-card[target="_blank"]::after{content:" ↗"}

@media(max-width:800px){
  .split{grid-template-columns:1fr}
  .answer-grid,.route-groups,.fact-grid,.tier-grid,.next-grid,.pending-grid,.footer-inner,.gallery,.videos{grid-template-columns:1fr}
  .answer:first-child{grid-column:auto}
  .hero{padding-top:2.6rem}
  .header-inner{align-items:flex-start}
  .site-nav{width:100%}
  .site-nav a{flex:1 1 auto;justify-content:center}
  .brand-figure{max-width:620px}
}
@media(max-width:420px){
  .header-inner,.page-shell,.hero{padding-left:1rem;padding-right:1rem}
  .hero{padding-top:1.2rem;padding-bottom:1.3rem}
  .hero h1{font-size:1.8rem}
  .lede{font-size:.96rem;margin-top:.6rem}
  .hero-cta{margin-top:.8rem}
  .hero-facts{gap:.5rem;margin-top:.8rem}
  .fact-chip{min-width:calc(50% - .5rem);padding:.38rem .5rem}
  .site-nav a{font-size:.82rem;padding:.55rem .45rem}
  .content-section{padding:1.6rem 0}
  .task-links{display:grid}
  .task-links a{border-radius:6px}
  .table-wrap{margin-left:0;margin-right:0}
  body{overflow-wrap:anywhere}
  .route-groups a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .22rem}
  .route-groups a{min-height:45px}
}