/* 方向 C：卡匣標籤 / CARTRIDGE LABEL
   冷灰硬边规格书：0 圆角、无阴影、1px 硬线；标签条颜色取自游戏自身主色。 */

:root{
  --bg:#EDEEEA; --panel:#F7F8F5; --ink:#14171A; --ink2:#5A6068;
  --line:#C3C7C0; --rule:#14171A;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --w:960px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.7 var(--sans);
}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ── 页头 ─────────────────────────────────────────────── */
.bar{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  max-width:var(--w); margin:0 auto; padding:16px 22px;
  border-bottom:1px solid var(--rule);
}
.brand{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:800; font-size:.98rem; letter-spacing:.16em;
}
.brand svg{width:21px; height:21px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.bar nav{margin-left:auto; display:flex; gap:20px}
.bar nav a{
  font:.76rem/1 var(--mono); letter-spacing:.14em; color:var(--ink2); text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.bar nav a:hover{color:var(--ink); border-bottom-color:var(--ink)}

main{max-width:var(--w); margin:0 auto; padding:0 22px}

/* ── 引言 ─────────────────────────────────────────────── */
.intro{padding:52px 0 34px; border-bottom:1px solid var(--line)}
.intro h1{
  margin:0 0 14px; font:800 clamp(2rem,4.4vw,2.8rem)/1.1 var(--sans);
  letter-spacing:-.02em;
}
.lede{margin:0; color:var(--ink2); font-size:.98rem; max-width:54ch}

/* ── 目录：每条目 = 一个卡匣 ───────────────────────────── */
.catalog{padding:30px 0 4px; display:flex; flex-direction:column; gap:26px}

.unit{background:var(--panel); border:1px solid var(--rule); position:relative}

/* 卡匣切口：左上角一个小缺口，像卡匣的定位槽 */
.unit::before{
  content:""; position:absolute; left:26px; top:-1px; width:12px; height:6px;
  background:var(--bg); border:1px solid var(--rule); border-top:0;
}

.tagbar{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:13px 18px; background:var(--label,#333); color:#fff;
}
.tagbar h2{margin:0; font-size:1.14rem; font-weight:700; letter-spacing:.04em}
.tagbar .en{margin:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; opacity:.78}
.tagbar .open{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font:.76rem/1 var(--mono); letter-spacing:.14em; color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px;
}
.tagbar .open:hover{border-bottom-color:#fff}
.tagbar .open svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

.inner{display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:20px; padding:20px 18px}

.spec{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; margin:0; align-self:start}
.spec > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.spec dt{font:.72rem/1.4 var(--mono); letter-spacing:.14em; color:var(--ink2)}
.spec dd{margin:0; font:700 1.02rem/1.4 var(--mono); font-variant-numeric:tabular-nums}

.band{margin:0; border:1px solid var(--rule); background:#E2E4E0}
.band img{width:100%; height:100%; object-fit:cover; aspect-ratio:5/2}

/* 预告：虚线框，无标签色，明确不在目录内 */
.unit--soon{border-style:dashed; background:transparent}
.unit--soon::before{display:none}
.unit--soon .tagbar{background:transparent; color:var(--ink2); border-bottom:1px dashed var(--line)}
.unit--soon .tagbar .en{opacity:.6}
.unit--soon .inner{display:block}
.soon{margin:0; color:var(--ink2); font-size:.92rem}

/* hover：规格表左侧浮出一条游戏本色的竖线（唯一的动效） */
.spec{transition:padding-left .16s ease, box-shadow .16s ease}
.inner:hover .spec{padding-left:11px; box-shadow:inset 2px 0 0 var(--label,#333)}

/* ── 关于 ─────────────────────────────────────────────── */
.about{border-top:1px solid var(--rule); margin-top:44px; padding:26px 0 52px; max-width:62ch}
.about h2{
  margin:0 0 10px; font:.76rem/1 var(--mono); letter-spacing:.2em; color:var(--ink2);
}
.about p{margin:0; font-size:.92rem; color:var(--ink2)}

/* ── 页脚 ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule); background:var(--panel)}
footer p{max-width:var(--w); margin:0 auto; padding:0 22px}
footer p:first-child{padding-top:20px; font-size:.84rem; color:var(--ink2)}
footer .links{padding-bottom:22px; display:flex; flex-wrap:wrap; gap:18px; align-items:baseline}
footer .links a{font:.78rem/1 var(--mono); letter-spacing:.1em; color:var(--ink2); text-decoration:none}
footer .links a:hover{color:var(--ink)}
footer .links span{margin-left:auto; font:.72rem/1 var(--mono); letter-spacing:.1em; color:var(--ink2)}

@media (max-width:820px){
  .inner{grid-template-columns:1fr}
  .band img{aspect-ratio:16/9}
}
@media (max-width:560px){
  .intro{padding:32px 0 22px}
  .bar{gap:12px; padding:14px 16px}
  .bar nav{gap:14px}
  .spec{grid-template-columns:1fr}
  .unit::before{left:18px}
  footer .links span{margin-left:0; width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}