/* 遊戲資料庫 · 正式門戶（方向 B 深化）
   色彩：夜機房 #0F1114 / 面板 #191D23 / 線 #2E3540，霓虹青只給資料與互動。
   排版：單欄 1160px、卡片 = 4:3 卡匣式內框 + 像素字數據。
   字體：中文用指名 CJK 字體（不用 system-ui 預設件），數字用自托管像素字。 */

@font-face{
  font-family:"m6x11";
  src:url("assets/fonts/m6x11plus.ttf") format("truetype");
  font-display:swap;
}

:root{
  --bg:#0F1114; --surface:#191D23; --surface2:#20252D; --line:#2E3540;
  --ink:#EFE9DE; --ink2:#A7B0BD; --neon:#5FE3C0; --neon-dim:#2E6F63;
  --gold:#D8A93B; --hot:#E0453A;
  --pix:"m6x11",ui-monospace,monospace;
  --sans:"Noto Sans TC","PingFang TC","Hiragino Sans TC","Source Han Sans TC","Microsoft JhengHei",sans-serif;
  --w:1160px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 .98rem/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%; display:block}
h1,h2,h3{margin:0; line-height:1.2; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--neon); outline-offset:3px; border-radius:2px}

/* ── 頁首 ─────────────────────────────────────────────── */
.bar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  max-width:var(--w); margin:0 auto; padding:14px 22px;
}
.mark{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  text-decoration:none;
}
.mark svg{width:24px; height:24px; flex:none; fill:none; stroke:var(--neon); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.mark-name{font-family:var(--pix); font-size:1.06rem; letter-spacing:.1em; color:var(--ink)}
.mark-sub{font-size:.8rem; letter-spacing:.16em; color:var(--ink2)}
.nav{margin-left:auto; display:flex; gap:6px}
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  font-size:.86rem; letter-spacing:.06em; color:var(--ink2); text-decoration:none;
}
.nav a:hover{color:var(--neon)}

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

/* ── 首屏標題 ─────────────────────────────────────────── */
.intro{padding:46px 0 34px; border-bottom:1px solid var(--line)}
.eyebrow{
  margin:0 0 14px; font-family:var(--pix); font-size:.84rem; letter-spacing:.22em;
  color:var(--neon); text-transform:uppercase;
}
h1{font-size:clamp(2.1rem,5vw,3.3rem); font-weight:800; letter-spacing:-.02em}
.lede{margin:16px 0 0; max-width:56ch; color:var(--ink2); font-size:1rem}

/* ── 區塊標題模式：標題 + 細線 + 右上狀態 ─────────────── */
.sec-head{display:flex; align-items:baseline; gap:14px; margin:0 0 22px}
.sec-head h2{font-size:1.06rem; font-weight:700; letter-spacing:.04em; white-space:nowrap}
.sec-head::after{content:""; flex:1; height:1px; background:var(--line)}
.sec-note{font-size:.76rem; letter-spacing:.1em; color:var(--ink2); white-space:nowrap}

#libraries{padding:38px 0 8px}

/* ── 資料庫卡片 ───────────────────────────────────────── */
.shelf{
  list-style:none; margin:0; padding:0; align-items:start;
  display:grid; grid-template-columns:1fr; gap:22px;
}
@media (min-width:880px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cab--soon{grid-column:1/-1}
}
.cab{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease;
}
.cab:hover{border-color:var(--neon-dim); transform:translateY(-2px)}
.cab-link{display:flex; flex-direction:column; text-decoration:none}

/* 卡匣式內框：面板裡再收一圈 1px 框，像燈箱的玻璃槽 */
.bezel{
  position:relative; display:block; margin:10px; aspect-ratio:4/3;
  border:1px solid var(--line); border-radius:3px; overflow:hidden; background:#0B0D10;
}
.bezel img{width:100%; height:100%; object-fit:cover}
.veil{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(11,13,16,.15),rgba(11,13,16,.8));
  opacity:0; transition:opacity .18s ease;
}
.cab-link:hover .veil,.cab-link:focus-visible .veil{opacity:1}
.go{
  display:inline-flex; align-items:center; gap:9px; padding:12px 18px; min-height:44px;
  border:1px solid var(--neon); border-radius:3px; background:rgba(15,17,20,.85);
  color:var(--neon); font-size:.92rem; letter-spacing:.06em;
}
.go svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cab-link:hover .bezel img,.cab-link:focus-visible .bezel img{transform:scale(1.03)}
.bezel img{transition:transform .28s ease}

/* 品牌資產一等公民：每座資料庫掛自己的官方 logo */
.meta{display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px 13px; padding:6px 16px 18px}
.logo{
  grid-row:span 2; width:44px; height:44px; object-fit:contain;
  background:var(--surface2); border:1px solid var(--line); border-radius:4px; padding:3px;
}
.meta h3{font-size:1.34rem; font-weight:800}
.meta .en{
  margin:0; font-family:var(--pix); font-size:.78rem; letter-spacing:.16em; color:var(--gold);
}
.nums{
  grid-column:1/-1; margin:10px 0 0; padding-top:13px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.nums dt{font-size:.72rem; letter-spacing:.1em; color:var(--ink2); line-height:1.4}
.nums dd{
  margin:5px 0 0; font-family:var(--pix); font-size:1.5rem; line-height:1;
  color:var(--neon); font-variant-numeric:tabular-nums;
}

/* 預留位：明確表達「還沒有內容」，不假造資料 */
.cab--soon{
  border-style:dashed; background:transparent;
  flex-direction:row; align-items:center; gap:16px; padding:14px 16px;
}
.cab--soon:hover{border-color:var(--line); transform:none}
.cab--soon .meta{display:block; padding:0}
.bezel--empty{
  aspect-ratio:auto; margin:0; flex:none; width:52px; height:52px;
  display:grid; place-items:center; background:transparent; border-style:dashed;
}
.bezel--empty svg{width:26px; height:26px; fill:none; stroke:var(--ink2); stroke-width:1.6; stroke-linecap:round}
.cab--soon .meta h3{font-size:1.06rem; color:var(--ink2)}
.cab--soon .meta .en{color:var(--hot)}
.soon{margin:7px 0 0; font-size:.9rem; color:var(--ink2)}

/* ── 關於 ─────────────────────────────────────────────── */
.about{padding:44px 0 52px; border-top:1px solid var(--line); margin-top:40px}
.about p{margin:0 0 12px; max-width:66ch; color:var(--ink2); font-size:.94rem}

/* ── 頁尾 ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); background:#111418}
footer p{max-width:var(--w); margin:0 auto; padding:0 22px}
footer p:first-child{padding-top:22px; font-size:.82rem; color:var(--ink2)}
footer .links{padding:10px 0 26px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center}
footer .links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.84rem; color:var(--ink2); text-decoration:none;
}
footer .links a:hover{color:var(--neon)}
footer .links span{margin-left:auto; font-family:var(--pix); font-size:.8rem; letter-spacing:.08em; color:var(--ink2)}

@media (max-width:640px){
  .intro{padding:30px 0 24px}
  .bar{gap:8px; padding:10px 16px}
  .mark-sub{display:none}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .meta h3{font-size:1.2rem}
  footer .links span{margin-left:0; width:100%}
}

@media (hover:none){
  .veil{
    opacity:1;
    background:linear-gradient(180deg,rgba(11,13,16,0) 42%,rgba(11,13,16,.82));
    place-items:end center; padding-bottom:14px;
  }
}

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