/* ==========================================================================
   style.css · 开罗游戏攻略站主样式（V1 像素街机）
   依赖：pixel.css（组件库，须先引入）
   说明：纯手写、无框架；移动端优先（375px 无横向溢出）
   ========================================================================== */

:root{
  --bg:#12102e;
  --bg2:#191740;
  --panel:#1e1b4b;
  --panel2:#252161;
  --ink:#eae8ff;
  --ink-dim:#a9a4d8;
  --ink-faint:#7b76ad;
  --line:#3a3480;
  --mint:#7ef0b0;
  --gold:#ffd45e;
  --pink:#ff7eb6;
  --sky:#7dd3fc;
  --shadow:#0a0820;
  --null:#ffb4a2;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding-bottom:60px;
  background:
    radial-gradient(circle at 12% 0%, #221e5c 0%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    var(--bg);
  color:var(--ink);
  font:14px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

a{color:var(--sky);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1000px;margin:0 auto;padding:0 16px}

/* ---------- 顶栏 ---------- */
.topbar{background:var(--bg2);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 0}
.logo{
  display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:15px;color:var(--ink);letter-spacing:.5px;white-space:nowrap;
}
.logo b{
  display:inline-block;background:var(--mint);color:#0d0b22;
  padding:2px 7px;font-size:13px;box-shadow:2px 2px 0 var(--shadow);
}
.nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--ink-dim);padding:5px 10px;font-size:13.5px;border:1px solid transparent}
.nav a:hover{color:var(--mint);text-decoration:none;border-color:var(--line)}
.nav a[aria-current="page"]{color:#0d0b22;background:var(--gold);border-color:var(--shadow);font-weight:700}

/* 未建设栏目的占位（不可点，避免死链） */
.nav .planned{color:var(--ink-faint);padding:5px 10px;font-size:13.5px;opacity:.45;border:1px dashed var(--line)}
.site-foot .planned{color:var(--ink-faint);opacity:.5}

/* ---------- 面包屑 ---------- */
.crumb{color:var(--ink-faint);font-size:13px;margin:18px 0 12px}
.crumb a{color:var(--ink-faint)}
.crumb a:hover{color:var(--mint)}
.crumb .sep{margin:0 6px;opacity:.6}
.crumb .cur{color:var(--ink)}

/* ---------- 游戏头图 ---------- */
.hero{padding:24px 0 8px}
.hero-card{background:var(--panel);padding:18px;display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.cover{
  width:132px;height:132px;flex:0 0 auto;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px),
    linear-gradient(150deg,#6d28d9,#a855f7 55%,#7dd3fc);
  display:flex;align-items:center;justify-content:center;font-size:56px;line-height:1;
  box-shadow:0 0 0 2px var(--shadow),0 0 0 4px var(--line),4px 4px 0 4px var(--shadow);
}
.cover.tone-violet{background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px),linear-gradient(150deg,#6d28d9,#a855f7 55%,#7dd3fc)}
.cover.tone-mint{background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px),linear-gradient(150deg,#047857,#34d399 55%,#a7f3d0)}
.cover.tone-gold{background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px),linear-gradient(150deg,#b45309,#fbbf24 55%,#fde68a)}
.cover.tone-sky{background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px),linear-gradient(150deg,#0369a1,#38bdf8 55%,#bae6fd)}
.hero-main{flex:1 1 320px;min-width:0}
.hero-kicker{
  display:inline-block;background:var(--pink);color:#2a0a1c;
  font-size:11.5px;font-weight:800;padding:2px 7px;letter-spacing:.6px;
  box-shadow:2px 2px 0 var(--shadow);margin-bottom:8px;
}
h1{font-size:25px;margin:0 0 4px;letter-spacing:.5px;line-height:1.3}
.title-sub{color:var(--ink-faint);font-size:13px;margin:0 0 10px}
.lead{color:var(--ink-dim);margin:0 0 14px}

/* ---------- 首页 ---------- */
.home-hero{padding:34px 0 8px;text-align:left;position:relative}

/* 主视觉：左侧文案 + 右侧像素数据墙（纯 CSS 绘制，零外部素材） */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:26px;align-items:center}
@media (max-width:720px){
  .hero-grid{grid-template-columns:1fr;gap:16px}
  /* 移动端：像素墙缩为 4 列并限宽居中，避免霸占首屏 */
  .pixwall{grid-template-columns:repeat(4,1fr);max-width:190px;margin:0 auto}
  .pixwall-cap{text-align:center}
  .home-hero h1{font-size:25px}
  .home-hero .lead{font-size:14px}
}

.home-hero h1{font-size:31px;line-height:1.32;margin-bottom:12px;letter-spacing:.3px}
.home-hero h1 em{font-style:normal;color:var(--mint);text-shadow:2px 2px 0 var(--shadow)}
.home-hero .lead{font-size:15px;max-width:56ch;color:var(--ink-dim)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* 像素数据墙：6×6 小方块矩阵，模拟「数据表」的视觉隐喻 */
.pixwall{
  display:grid;grid-template-columns:repeat(6,1fr);gap:4px;
  padding:12px;background:var(--panel);
  box-shadow:0 0 0 2px var(--shadow),0 0 0 4px var(--line),5px 5px 0 5px var(--shadow);
}
.pixwall i{aspect-ratio:1;display:block;background:var(--panel2)}
.pixwall i.on{background:var(--mint);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.pixwall i.gold{background:var(--gold);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.pixwall i.dim{background:#2b2670}
.pixwall-cap{margin:10px 0 0;font-size:11.5px;color:var(--ink-faint);text-align:center}

/* 统计条升级：数值更大更醒目 */
.stat-cell b{font-size:22px}

/* ---------- 统计条 ---------- */
.stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  background:var(--panel);margin:14px 0 24px;
}
.stat-cell{padding:12px 14px;border-right:2px solid var(--bg);text-align:center}
.stat-cell:last-child{border-right:0}
.stat-cell b{display:block;font-size:19px;color:var(--mint);letter-spacing:.5px}
.stat-cell span{font-size:12px;color:var(--ink-faint)}

/* ---------- 子页导航 ---------- */
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.subnav a{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;background:var(--panel);color:var(--ink-dim);
  font-size:13.5px;border:1px solid var(--line);
}
.subnav a:hover{color:var(--mint);text-decoration:none;border-color:var(--mint)}
.subnav a.on{background:var(--mint);color:#0d0b22;font-weight:700;border-color:var(--shadow)}
.subnav a.wip{opacity:.6}
.subnav a .dot{width:6px;height:6px;background:var(--gold);display:inline-block}

/* ---------- 区块 ---------- */
.sec{background:var(--panel);padding:18px;margin:0 0 20px}
.sec-hd{font-size:14px;color:var(--ink-faint);margin:0 0 10px}

/* ---------- 键值表 ---------- */
table.kv{width:100%;border-collapse:collapse}
table.kv th,table.kv td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.kv th{width:32%;color:var(--ink-faint);font-weight:500;font-size:13px}
table.kv tr:last-child th,table.kv tr:last-child td{border-bottom:0}

/* ---------- 数据卡片网格（数据库类页面） ---------- */
.dcard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:12px;
}
.dcard{
  background:var(--bg2);padding:12px 13px;
  display:flex;flex-direction:column;gap:9px;
}
.dcard-h{display:flex;gap:10px;align-items:flex-start}
.dcard-emoji{font-size:26px;line-height:1;flex:0 0 auto}
.dcard-title{min-width:0;display:flex;flex-direction:column;gap:3px}
/* 中文站口径：中文名大号加粗在首位，英文原名以小字灰字退居其下 */
.dcard-title b,.dcard-title .dcard-zh{font-size:16px;line-height:1.3;font-weight:800}
.dcard-en{font-size:11px;color:var(--ink-faint);line-height:1.3;font-weight:400}
.dcard-sub{font-size:11.5px;color:var(--sky)}
/* 译名来源角标：官方/社区来源在中文名右上角标出，编者暂译不打标（默认态） */
.zh-src{
  display:inline-block;font-size:10px;line-height:1;font-weight:800;
  padding:2px 4px;margin-left:5px;vertical-align:2px;
  border:1px solid currentColor;
}
.zh-src--official-steam,.zh-src--official-cn{color:#0d3b2a;background:var(--mint)}
.zh-src--community{color:#062a3d;background:var(--sky)}
.zh-src--editor{color:#3a2a00;background:var(--gold);opacity:.9}

/* ---------- 译名溯源区块（首页 + 数据库页 + 人物页） ---------- */
.zh-legend{background:var(--bg2);padding:12px 14px;margin:0 0 14px;border-left:3px solid var(--sky)}
.zh-legend-hd{margin:0 0 9px;font-size:13px;color:var(--ink-dim);line-height:1.75}
.zh-legend-hd b{color:var(--ink)}
.zh-legend-flow{display:block;margin-top:6px;color:var(--mint);font-size:12.5px}
.zh-legend-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.zh-legend-list li{font-size:12px;color:var(--ink-faint);line-height:1.6}
.zh-legend-list .zh-src{margin-left:0;margin-right:5px;vertical-align:1px}

/* 来源构成条：直观暴露「官方译名占比」，不做成饼图（小数据量饼图无意义） */
.zh-bar{margin:0 0 14px}
.zh-bar-track{
  display:flex;height:8px;background:var(--bg);overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
}
.zh-bar-seg{display:block;height:100%}
.zh-bar-seg.official{background:var(--mint)}
.zh-bar-seg.community{background:var(--sky)}
.zh-bar-seg.editor{background:#6b64a8}
.zh-bar-cap{margin:8px 0 0;font-size:12.5px;color:var(--ink-faint);line-height:1.7}
.zh-bar-cap b{font-weight:700}
.zh-bar-cap .is-official{color:var(--mint)}
.zh-bar-cap .is-community{color:var(--sky)}
.zh-bar-cap .is-editor{color:var(--ink-dim)}
.zh-bar-note{display:inline-block;margin-left:6px;opacity:.75}
.dcard-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin:0;
  padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.dcard-stat{display:flex;justify-content:space-between;gap:6px;font-size:12.5px;margin:0}
.dcard-stat dt{color:var(--ink-faint);margin:0;white-space:nowrap}
.dcard-stat dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.dcard-effect{
  margin:0;font-size:12.5px;color:var(--ink-dim);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.dcard-f{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-top:auto;font-size:11.5px;color:var(--ink-faint);
}
.dcard-unlock{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 来源追溯入口（<details> 原生展开，禁用 JS 依然可用） */
.dcard-src{font-size:11.5px}
.dcard-src summary{
  cursor:pointer;color:var(--ink-faint);list-style:none;
  display:inline-flex;align-items:center;gap:5px;user-select:none;
}
.dcard-src summary::-webkit-details-marker{display:none}
.dcard-src summary::before{content:"▸";color:var(--sky);font-size:10px}
.dcard-src[open] summary::before{content:"▾"}
.dcard-src summary:hover{color:var(--mint)}
.dcard-src .src-url{
  margin:6px 0 0;padding:6px 8px;background:var(--bg);
  border:1px dashed var(--line);word-break:break-all;line-height:1.6;
}
.dcard-src .src-url a{color:var(--sky)}
.dcard-src .src-url a:hover{color:var(--mint)}

/* 卡片内标签行（人物特质等） */
.dcard-tags{display:flex;flex-wrap:wrap;gap:5px}
.dcard-tags .tag{font-size:11px;padding:1px 7px}

/* ---------- 相性组合卡片（combos 页） ---------- */
.ccard{gap:10px}
.cc-pair{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-el{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-el i{font-style:normal;font-size:10.5px;color:var(--ink-faint);letter-spacing:.5px}
.cc-el b{font-size:14px}
.cc-x{color:var(--pink);font-weight:800;font-size:13px}
.cc-grade{align-self:flex-start;font-size:11px;font-weight:800;padding:1px 7px;border:1px solid var(--shadow)}
.cc-grade.is-s{color:#2a1f00;background:var(--gold)}
.cc-grade.is-a{color:#0d0b22;background:var(--mint)}
.cc-grade.is-b{color:#062a3d;background:var(--sky)}
.cc-result{margin:0;font-size:12.5px;color:var(--ink-dim)}
.cc-quote{margin:0;font-size:12px;color:var(--ink-faint);border-left:2px solid var(--line);padding-left:8px;line-height:1.65}
.cc-note{margin:0}

/* ---------- 数据表 ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;min-width:620px}
table.data th,table.data td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
table.data thead th{background:var(--panel2);color:var(--ink-dim);font-size:12.5px;white-space:nowrap}
table.data tbody tr:hover{background:rgba(126,240,176,.06)}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
table.data tr:last-child td{border-bottom:0}
.emoji-cell{font-size:17px;line-height:1;width:34px;text-align:center}
.meta-cell{font-size:11.5px;color:var(--ink-faint)}

/* ---------- 布局图区块（方案 B：实机截图 + 网格标注） ---------- */
.shot{background:var(--bg2);border:1px solid var(--line);padding:12px;margin-bottom:14px}
.shot-frame{
  position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px),
    linear-gradient(135deg,#241f5e,#191740);
  display:flex;align-items:center;justify-content:center;
}
.shot-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot-frame .ph{color:var(--ink-faint);font-size:13px;text-align:center;padding:0 16px;line-height:1.7}
.shot-frame .ph b{display:block;color:var(--sky);font-size:14px;margin-bottom:4px}
.shot-frame .badge{
  position:absolute;left:8px;top:8px;background:var(--gold);color:#2a1f00;
  font-size:11px;font-weight:800;padding:2px 6px;box-shadow:2px 2px 0 var(--shadow);z-index:2;
}
.shot-cap{font-size:12.5px;color:var(--ink-faint);margin:8px 0 0}
/* 竖屏截图（imgShape=tall）：按原始比例完整展示，不裁切 */
.shot-frame.is-tall{aspect-ratio:auto;background:none;display:block;overflow:visible}
.shot-frame.is-tall img{position:static;width:100%;max-width:520px;height:auto;margin:0 auto;display:block}
.shot-credit{font-size:11.5px;color:var(--ink-faint);margin:6px 0 0;line-height:1.6}

/* ---------- 实机界面参考（说明性引用，Q3 方案 B） ---------- */
.shot-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.shot-ref{margin:0;background:var(--bg2);border:1px solid var(--line);padding:10px}
.shot-ref img{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--line)}
.shot-ref figcaption{font-size:12px;color:var(--ink-dim);margin-top:8px;line-height:1.6}
.shot-ref .credit{display:block;font-size:11px;color:var(--ink-faint);margin-top:5px;line-height:1.5}

/* ---------- 卡片网格（游戏库） ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:var(--panel);padding:14px;display:flex;gap:12px;color:inherit}
.card:hover{background:var(--panel2);text-decoration:none}
.card .c-cover{
  width:56px;height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;
  box-shadow:0 0 0 2px var(--shadow),0 0 0 3px var(--line),3px 3px 0 3px var(--shadow);
}
.c-cover.tone-violet{background:linear-gradient(140deg,#6d28d9,#a855f7)}
.c-cover.tone-mint{background:linear-gradient(140deg,#047857,#34d399)}
.c-cover.tone-gold{background:linear-gradient(140deg,#b45309,#fbbf24)}
.c-cover.tone-sky{background:linear-gradient(140deg,#0369a1,#38bdf8)}
.card-body{min-width:0}
.card h3{margin:0 0 4px;font-size:15px}
.card .c-sum{margin:0;color:var(--ink-faint);font-size:12.5px;line-height:1.55}
.card .c-meta{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-faint);align-items:center}

/* ---------- 相关推荐 ---------- */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rel a{
  display:flex;gap:10px;align-items:center;padding:10px;background:var(--bg2);
  border:1px solid var(--line);color:var(--ink-dim);font-size:13.5px;
}
.rel a:hover{border-color:var(--mint);color:var(--ink);text-decoration:none}
.rel .r-emoji{font-size:20px;line-height:1}

/* ---------- 页脚 ---------- */
.site-foot{margin-top:34px;padding-top:18px;border-top:2px solid var(--line);color:var(--ink-faint);font-size:12.5px}
.site-foot .fl{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.site-foot .fl a{color:var(--ink-faint)}
.site-foot .fl a:hover{color:var(--mint)}
.disc{background:var(--panel);padding:12px 14px;border-left:3px solid var(--pink);line-height:1.75}
.disc b{color:var(--ink-dim)}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  h1{font-size:21px}
  .home-hero h1{font-size:23px}
  .cover{width:88px;height:88px;font-size:38px}
  .nav{width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap}
  .nav a{white-space:nowrap}
  .sec{padding:14px}
  table.kv th{width:38%}
}

/* ---------- FAQ 问答 ---------- */
.qa{background:var(--bg2);border:1px solid var(--line);padding:12px 14px;margin-bottom:10px}
.qa-q{font-weight:700;font-size:14px;margin-bottom:6px}
.qa-a{font-size:13px;line-height:1.75;color:var(--ink-dim)}
.qa-src{display:block;font-size:11px;color:var(--ink-faint);margin-top:6px}

/* ---------- 像素图标（AI 原创徽章 / 类型角标） ---------- */
.pix-ico{image-rendering:pixelated;vertical-align:middle;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.ico-cell{width:40px;text-align:center}
td.ico-cell{padding:6px 4px}
.cc-el{display:inline-flex;align-items:center;gap:5px;min-width:0}
.cc-gen{flex:0 0 auto}

/* ---------- 攻略页「核心机制」列表 ---------- */
.mech-list{margin:0;display:grid;gap:0}
.mech-row{
  display:grid;grid-template-columns:126px 1fr;gap:14px;
  padding:10px 0;border-bottom:1px dashed var(--line);
}
.mech-row:last-child{border-bottom:0}
.mech-row dt{
  font-size:12.5px;font-weight:700;color:var(--mint);
  line-height:1.7;letter-spacing:.02em;
}
.mech-row dd{margin:0;font-size:13px;color:var(--ink-dim);line-height:1.8}
/* 移动端：标签与正文改为上下堆叠 */
@media (max-width:640px){
  .mech-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .mech-row dt{font-size:12px}
}

/* ---------- 攻略页「专题正文」区块 ---------- */
/* 站长反馈：此前的攻略页只有结构化短条目，没有可连贯阅读的正文。
   这里给长文一个合适的阅读宽度与行高（PC 端限制 68ch，移动端满宽）。 */
.art-list{display:grid;gap:0}
.art{
  padding:4px 0 22px;
  border-bottom:1px dashed var(--line);
}
.art:last-child{border-bottom:0;padding-bottom:4px}
.art-h{
  font-size:15px;font-weight:800;color:var(--mint);
  margin:18px 0 10px;line-height:1.5;letter-spacing:.01em;
  padding-left:10px;border-left:3px solid var(--mint);
}
.art p{
  font-size:13.5px;line-height:1.95;color:var(--ink-dim);
  margin:0 0 12px;max-width:68ch;
}
.art p:last-of-type{margin-bottom:8px}
.art b{color:var(--ink);font-weight:700}
.art-src{
  font-size:11.5px;color:var(--ink-faint);margin:0;
  max-width:68ch;line-height:1.7;
}
.art-src a{color:var(--sky);text-decoration:none;border-bottom:1px dotted currentColor}
.art-src a:hover{color:var(--mint)}

/* ---------- 攻略页「社区经验（非官方）」 ---------- */
/* 明确与「已核实」内容视觉隔离：虚线框 + 灰度，避免用户误当官方结论 */
.comm-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.comm-list li{
  font-size:13px;line-height:1.85;color:var(--ink-dim);
  padding:10px 12px;background:var(--panel);
  border-left:2px solid var(--ink-faint);
}
.comm-src{
  display:block;margin-top:5px;font-size:11px;
  color:var(--ink-faint);line-height:1.6;
}

@media (max-width:640px){
  .art p,.art-src{max-width:none}
  .art p{font-size:13px;line-height:1.9}
  .art-h{font-size:14px;margin-top:16px}
}

/* ---------- 术语词典页 ---------- */
/* 卡片式两列：术语是长文本，单列在宽屏下留白过多，三列又把定义挤成窄条 */
.gls-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:14px;margin-top:14px;
}
.gls-card{
  background:var(--panel);border:1px solid var(--line);
  padding:14px 16px 12px;
}
/* 卡片用 :target 高亮 —— 从搜索/外链直达某词时有一眼可见的落点 */
.gls-card:target{border-color:var(--mint);box-shadow:0 0 0 2px rgba(126,240,176,.25)}

.gls-term{
  margin:0 0 6px;font-size:16px;line-height:1.5;color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
}
.gls-en{
  font-size:11.5px;font-weight:400;color:var(--ink-faint);
  font-family:ui-monospace,Menlo,monospace;
}
.gls-def{
  margin:0 0 8px;font-size:13px;line-height:1.85;color:var(--mint);
}
.gls-detail{
  font-size:12.5px;line-height:1.9;color:var(--ink-dim);
}
.gls-detail p{margin:0 0 8px}
.gls-detail p:last-child{margin-bottom:0}
.gls-detail b{color:var(--ink)}

/* 常见误区：用左侧警示色条与正文区分，不要做成大红块（会盖过定义本身） */
.gls-misuse{
  margin-top:10px;padding:8px 10px;
  background:rgba(255,180,162,.07);
  border-left:2px solid var(--null);
  font-size:12.5px;line-height:1.85;color:var(--ink-dim);
}
.gls-misuse b{display:block;margin-bottom:3px;color:var(--null);font-size:12px}
.gls-misuse p{margin:0}

.gls-alias{
  margin:10px 0 0;font-size:11.5px;color:var(--ink-faint);line-height:1.8;
}
.gls-alias span{
  display:inline-block;padding:1px 7px;margin:0 4px 4px 0;
  border:1px dashed var(--line);color:var(--ink-dim);
}
.gls-games{
  margin:8px 0 0;font-size:11.5px;color:var(--ink-faint);line-height:1.8;
}
.gls-games a{color:var(--sky);text-decoration:none;border-bottom:1px dotted currentColor}
.gls-games a:hover{color:var(--mint)}

@media (max-width:640px){
  .gls-grid{grid-template-columns:1fr;gap:12px}
  .gls-term{font-size:15px}
}

/* ---------- 楼层相性矩阵（layout 页 · 百货商场物语这类题材） ---------- */
/* 11 列的宽表必须横滑：窄屏挤压会让「✔」判断失效，可读性归零 */
.floor-matrix{font-size:12px;min-width:640px}
.floor-matrix th.fl-n,
.floor-matrix td.fl-n{
  position:sticky;left:0;z-index:2;
  background:var(--panel);text-align:left;white-space:nowrap;
  border-right:2px solid var(--line);
}
.floor-matrix thead th.fl-n{background:var(--panel2)}
.floor-matrix th.fl-h{
  text-align:center;white-space:nowrap;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--ink-dim);
}
.floor-matrix td.fl-c{
  text-align:center;padding:4px 6px;color:var(--ink-faint);
}
/* 有加成的格子用薄荷色实心，未加成留空——对比要够强，一眼能扫 */
.floor-matrix td.fl-c.has{
  color:var(--mint);font-weight:700;
  background:rgba(126,240,176,.10);
}
.floor-matrix tbody tr:hover td{background:rgba(255,255,255,.03)}
.floor-matrix tbody tr:hover td.fl-c.has{background:rgba(126,240,176,.18)}
.tf-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

@media (max-width:640px){
  .floor-matrix{font-size:11.5px;min-width:600px}
  .floor-matrix th.fl-n,.floor-matrix td.fl-n{padding:4px 8px}
}

/* ---------- 语言切换：顶栏按钮 + 弹框 ---------- */
/* 按钮放在导航右侧、与 .nav 同一行。用 margin-left:0 抵消 .nav 的 auto，
   否则 auto 会把按钮也推走、两者挤在一起。 */
.lang-btn{
  display:flex;align-items:center;gap:6px;
  background:transparent;color:var(--ink-dim);
  border:1px solid var(--line);padding:5px 10px;
  font-size:13px;font-family:inherit;cursor:pointer;
  white-space:nowrap;
}
.lang-btn:hover{color:var(--mint);border-color:var(--mint)}
.lang-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* 降级态（该页无其他语言版本，如术语词典）：disabled 属性由生成器写入。
   之前降级按钮外观与可点按钮完全一样，用户点了没反应，被当成 bug 反馈——
   让「不可用」看得见：变淡、光标 not-allowed、去掉悬停高亮。 */
.lang-btn:disabled{
  opacity:.38;cursor:not-allowed;
}
.lang-btn:disabled:hover{color:var(--ink-dim);border-color:var(--line)}

/* 小地球图标用纯 CSS 画，不引外部字体或 SVG 文件 —— 少一个请求 */
.lang-btn .ico-globe{
  width:12px;height:12px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid currentColor;position:relative;
}
.lang-btn .ico-globe::before{
  content:"";position:absolute;inset:0 -1px;
  border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  height:100%;box-sizing:border-box;
}
.lang-btn .ico-globe::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;
  background:currentColor;transform:translateX(-50%);
}

/* 弹框：像素风边框 + 深底，与站点其它面板一致 */
.lang-dialog{
  border:2px solid var(--line);background:var(--panel);color:var(--ink);
  padding:0;max-width:420px;width:calc(100vw - 32px);
  box-shadow:6px 6px 0 var(--shadow);
}
.lang-dialog::backdrop{background:rgba(6,5,18,.72)}
.lang-dialog-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  margin:0;
}
.lang-dialog-head h2{
  margin:0;font-size:14px;font-weight:700;letter-spacing:.3px;flex:1;
}
.lang-close{
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  width:26px;height:26px;line-height:1;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.lang-close:hover{color:var(--null);border-color:var(--null)}

.lang-list{list-style:none;margin:0;padding:8px}
.lang-list li{margin:0}
.lang-opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid transparent;
  color:var(--ink);text-decoration:none;
}
.lang-opt:hover{background:rgba(255,255,255,.04);border-color:var(--line);text-decoration:none}
.lang-opt:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
/* 当前语言：实心高亮，一眼知道自己在哪个 */
.lang-opt.is-cur{
  background:rgba(126,240,176,.10);border-color:var(--mint);color:var(--mint);
}
.lang-opt-name{flex:1;font-size:14px}
.lang-opt-code{
  font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-faint);
}
.lang-opt-cur{
  font-size:10.5px;padding:1px 6px;border:1px solid var(--mint);
  color:var(--mint);white-space:nowrap;
}
.lang-hint{
  margin:0;padding:10px 16px 14px;font-size:11.5px;line-height:1.7;
  color:var(--ink-faint);border-top:1px solid var(--line);
}

@media (max-width:640px){
  /* 窄屏下顶栏换行，按钮跟着换到第二行右端，不挤压导航 */
  .topbar-inner{gap:8px}
  .lang-btn{padding:4px 8px;font-size:12px}
  .lang-dialog{width:calc(100vw - 24px)}
}

/* ==================================================================
   英文站专用组件（en/ 下的页面用）
   复用同一套 CSS 变量，与中文站观感一致。
   ================================================================== */

/* ---------- 首页 Hero ---------- */
.hero-en{padding:26px 0 10px}
.hero-en h1{
  margin:0 0 12px;font-size:30px;line-height:1.3;letter-spacing:-.2px;
  max-width:22ch;
}
.hero-en .lead{
  margin:0 0 18px;max-width:68ch;font-size:14px;line-height:1.85;color:var(--ink-dim);
}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.btn-ghost{
  background:transparent;color:var(--ink-dim);border:1px solid var(--line);
}
.btn-ghost:hover{color:var(--mint);border-color:var(--mint)}

/* ---------- 游戏卡片网格（首页） ---------- */
.ggrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
}
.gcard{
  display:flex;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);
  padding:14px;text-decoration:none;color:var(--ink);
}
.gcard:hover{border-color:var(--mint);text-decoration:none}
.gcard-cover{
  width:64px;height:64px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.gcard-body{min-width:0}
.gcard-body h3{margin:0 0 5px;font-size:15px;line-height:1.4}
.gcard-meta{margin:0;font-size:12px;color:var(--ink-faint)}

/* ---------- 游戏库列表 ---------- */
.glist{display:grid;gap:8px;margin-top:12px}
.grow{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);
  padding:12px 14px;text-decoration:none;color:var(--ink);
}
.grow:hover{border-color:var(--mint);text-decoration:none}
.grow-emoji{
  width:38px;height:38px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:20px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.grow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.grow-main b{font-size:14px}
.grow-main i{font-style:normal;font-size:12px;color:var(--ink-faint)}
.grow-n{
  font-family:ui-monospace,Menlo,monospace;font-size:13px;
  color:var(--mint);flex:0 0 auto;
}

/* ---------- 游戏首页 ---------- */
.hero-body{flex:1;min-width:0}
.hero-body h1{margin:0 0 6px;font-size:24px;line-height:1.3}
.hero-sub{margin:0 0 10px;font-size:12.5px;color:var(--ink-faint)}
.hero-sum{margin:0 0 12px;font-size:13.5px;line-height:1.85;color:var(--ink-dim);max-width:72ch}
.hero-plat{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.plat{
  font-size:11px;padding:2px 7px;border:1px solid var(--line);
  color:var(--ink-faint);white-space:nowrap;
}

/* 模块入口卡片 */
.mgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;margin:16px 0;
}
.mcard{
  display:flex;flex-direction:column;gap:4px;
  background:var(--panel);border:1px solid var(--line);
  padding:12px;text-decoration:none;color:var(--ink);
}
.mcard:hover{border-color:var(--mint);text-decoration:none}
.mcard b{font-size:13.5px}
.mcard span{font-size:11.5px;color:var(--ink-faint)}
.mcard.is-wip{opacity:.55}

/* ---------- 人物卡片 ---------- */
.pcard-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;
  margin-top:12px;
}
.pcard{
  background:var(--panel);border:1px solid var(--line);padding:12px;
}
.pcard-name{margin:0 0 4px;font-size:14px}
.pcard-role{
  margin:0 0 6px;font-size:11px;color:var(--mint);
  text-transform:uppercase;letter-spacing:.4px;
}
.pcard-meta{margin:0;font-size:11.5px;line-height:1.7;color:var(--ink-faint)}

/* ---------- 相性卡片补充 ---------- */
.ccard-parts{margin:0 0 8px;font-size:12.5px;line-height:1.8;color:var(--ink)}
.ccard-parts .plus{margin:0 6px;color:var(--ink-faint)}
.ccard-res{margin:0;font-size:12.5px;color:var(--mint);line-height:1.7}
.ccard-floor{margin:6px 0 0;font-size:11.5px;color:var(--ink-faint)}

/* ---------- 攻略页 ---------- */
.steps,.pits{margin:0;padding-left:22px}
.steps li{margin:0 0 12px}
/* ⚠️ 只让「步骤标题」那份 b 变成块级。
   踩过两次：
     1) 写成 `.steps li b` → 正文里的强调（Cake Shop + Clothing Store）
        也被设成 block，句子中间凭空断行。
     2) 改成 `.steps li > b:first-child` 仍然命中正文那个 ——
        `:first-child` 判断的是「在各自父元素里是不是第一个」，
        <p> 里的 <b> 恰好也是 <p> 的第一个子元素，照样匹配。
   正确做法：标题是 li 的**直接子元素**，正文那个永远包在 <p> 里，
   所以用 `> b`（不对 <p> 内部生效）+ 排除「在 p 里」这一情况。
   最稳的是给标题单独一个类，但静态 HTML 已生成，这里用 CSS 兜住。 */
.steps li > b{display:block;margin-bottom:3px;font-size:14px}
.steps li p b, .steps li > p b{display:inline;font-size:inherit;margin:0}
.steps li p,.pits li{margin:0;font-size:13px;line-height:1.85;color:var(--ink-dim)}
.pits li{margin-bottom:8px}
.faq-item{
  background:var(--panel);border:1px solid var(--line);
  margin-bottom:8px;
}
.faq-item summary{
  padding:12px 14px;font-size:14px;cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"＋ ";color:var(--mint);font-weight:700;
}
.faq-item[open] summary::before{content:"－ "}
.faq-a{padding:0 14px 14px;font-size:13px;line-height:1.9;color:var(--ink-dim)}
.faq-a p{margin:0 0 10px}
.faq-a p:last-child{margin-bottom:0}

/* ---------- 为什么做这个站 ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.why-item{background:var(--panel);border:1px solid var(--line);padding:14px}
.why-item h3{margin:0 0 7px;font-size:14px;color:var(--mint)}
.why-item p{margin:0;font-size:12.5px;line-height:1.85;color:var(--ink-dim)}

@media (max-width:640px){
  .hero-en h1{font-size:24px}
  .ggrid,.why-grid{grid-template-columns:1fr}
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .pcard-grid{grid-template-columns:1fr}
}

/* ---------- 窄屏顶栏：语言按钮固定右上角 ---------- */
/* 375px 下原来的布局问题（已实测）：
     .nav 的 margin-left:auto 把按钮顶到下一行左端，
     导航本身折成两行 → 顶栏变成三行，语言入口掉在第三行最左边，几乎看不见。
   修法：按钮绝对定位到右上角，导航给它留出右侧空间。
   按钮尺寸维持 30px 高，仍满足触控目标（≥28px）。 */
@media (max-width:640px){
  /* 只给「第一行（logo + 按钮）」留右侧空间。
     ⚠️ 不能把 padding-right 加在 .topbar-inner 上 ——
     那会连带压缩导航的可用宽度，导致末项被截成「A」（实测踩过）。
     正确做法：padding 加在 logo 自己身上，导航独占整行。 */
  .topbar-inner{position:relative;padding-bottom:8px;gap:6px}
  .logo{padding-right:76px;order:1}
  .lang-btn{position:absolute;top:10px;right:0;margin:0}
  .nav{margin-left:0;flex:1 1 100%;order:2;gap:0}
  /* 窄屏导航字小一点，六项能压在一行 */
  .nav a,.nav .planned{padding:4px 7px;font-size:12.5px}
}