/* カーチェス — 解説ページ共通のスタイル */
:root{
  --ink:#10141b; --ink-2:#161c25; --ink-3:#0e131a;
  --text:#e8eef5; --muted:#8a97a6; --line:#2a333f;
  --gold:#c9a15e; --gold-dim:#93763f;
  --jade:#4bb89a; --cinnabar:#d6584a; --parch:#ece0c4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  line-height:1.9;-webkit-font-smoothing:antialiased;
}
a{color:var(--gold)}
a:hover{color:var(--jade)}

/* ---- 上部 ---- */
.top{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 20px;background:#10141bee;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:21px;
  letter-spacing:.06em;color:var(--jade);text-decoration:none;flex:none;
}
.logo .r{color:var(--cinnabar)}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{
  font-size:13px;letter-spacing:.06em;text-decoration:none;color:var(--muted);
  padding:7px 12px;border-radius:3px;
}
.nav a:hover{color:var(--text);background:#ffffff0d}
.nav a.on{color:var(--gold);background:#ffffff0d}

.wrap{max-width:860px;margin:0 auto;padding:34px 20px 70px}

h1{
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:30px;
  letter-spacing:.06em;margin:0 0 10px;
}
h2{
  font-family:"Noto Serif JP",serif;font-weight:700;font-size:19px;letter-spacing:.06em;
  color:var(--gold);margin:44px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
h3{font-family:"Noto Serif JP",serif;font-weight:700;font-size:16px;margin:0 0 4px}
p,li{font-size:14.5px;color:#cdd6e0}
.lead{font-size:16px;color:var(--muted);margin:0 0 8px;line-height:2}
ul{padding-left:20px}
li{margin:6px 0}
b{color:var(--text)}
.gold{color:var(--gold)} .jade{color:var(--jade)} .cin{color:var(--cinnabar)}

.note{
  background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--gold-dim);
  border-radius:3px;padding:13px 16px;margin:16px 0;font-size:13.5px;color:#c2ccd8;
}
.hint{font-size:11.5px;color:var(--muted);margin-top:7px;text-align:center}
.ok{color:#9fe4cd;font-size:13.5px}
.warn{color:#f0a597;font-size:13.5px}

/* ---- 勝ちかた3つ ---- */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0}
.cards3 .c{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:15px}
.cards3 .ct{font-family:"Noto Serif JP",serif;font-weight:700;color:var(--gold);margin-bottom:6px}
.cards3 .cd{font-size:13px;color:#c2ccd8;line-height:1.8}

/* ---- 表 ---- */
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.tbl th{
  text-align:left;font-family:"Noto Serif JP",serif;font-weight:700;color:var(--gold);
  border-bottom:1px solid var(--line);padding:9px 10px;font-size:13px;
}
.tbl td{border-bottom:1px solid #ffffff0d;padding:9px 10px;color:#c2ccd8}
.tbl .nm{font-family:"Noto Serif JP",serif;font-weight:700;color:var(--text);white-space:nowrap}

/* ---- 駒図鑑 ---- */
.jump{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 26px}
.jump a{
  font-size:12.5px;text-decoration:none;padding:6px 11px;border-radius:3px;
  background:var(--ink-2);border:1px solid var(--line);color:#c2ccd8;
}
.jump a:hover{border-color:var(--gold);color:var(--gold)}
.pc{background:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:18px;margin:0 0 16px;scroll-margin-top:70px}
.pc-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.pc-art{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:inset 0 0 0 2px var(--jade),0 4px 12px rgba(0,0,0,.5)}
.pc-role{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.pc-stats{display:flex;gap:16px;flex-wrap:wrap}
.pc-stats span{display:flex;flex-direction:column;line-height:1.35}
.pc-stats i{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.pc-stats b{font-family:"Noto Serif JP",serif;font-size:17px}
.pc-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.tag{font-size:10px;letter-spacing:.1em;padding:2px 7px;border-radius:2px;vertical-align:middle;margin-left:6px}
.tag.gacha{background:#1f4c40;color:#7fe3c4}
.lbl{font-size:11px;letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
.diag{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;width:180px}
.dc{
  aspect-ratio:1;background:#0e131a;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:11px;
}
.dc.go{background:#2a5f52;box-shadow:inset 0 0 0 1px #4bb89a66}
.dc.self{background:linear-gradient(160deg,#6fd6b6,#2f8a72);color:#08211b}
.spells{padding-left:0;list-style:none;margin:0}
.spells li{
  background:#140f22;border:1px solid #362a55;border-radius:3px;
  padding:9px 12px;margin:0 0 7px;font-size:12.5px;line-height:1.75;color:#c2ccd8;
}
.spells b{color:#c9b3ff;font-family:"Noto Serif JP",serif}
.spells .mp{font-size:10.5px;color:var(--muted);margin-left:8px;letter-spacing:.08em}

/* ---- 札図鑑 ---- */
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;margin:14px 0 26px}
.cc{display:flex;gap:13px;background:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:13px}
.cc-art{width:78px;height:78px;border-radius:3px;object-fit:cover;flex:none}
.cc-body h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.cc-body p{font-size:12.5px;line-height:1.75;margin:5px 0 7px;color:#c2ccd8}
.cc-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.star{font-size:11px;letter-spacing:.06em}
.r3{color:#5aa8cf} .r4{color:#a87ce0} .r5{color:var(--gold)}
h3.rank{font-size:14px;letter-spacing:.14em;margin:26px 0 4px}

.adbox{margin:24px 0;min-height:100px;text-align:center;overflow:hidden}
.adbox::before{content:"広告";display:block;font-size:9.5px;letter-spacing:.24em;color:var(--muted);margin-bottom:7px}
.cta{margin-top:44px;text-align:center}
.btn{
  display:inline-block;text-decoration:none;
  padding:14px 34px;border-radius:4px;border:1px solid #256e5c;
  background:linear-gradient(180deg,#3aa588,#2a7d67);color:#eafff8;
  font-family:"Noto Serif JP",serif;font-weight:700;font-size:15px;letter-spacing:.08em;
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}
.btn:hover{filter:brightness(1.1);color:#eafff8}

/* ---- 更新履歴 ---- */
.log section{
  border-left:2px solid var(--line);padding:0 0 4px 20px;margin:0 0 8px;position:relative;
}
.log section::before{
  content:"";position:absolute;left:-5px;top:52px;width:8px;height:8px;border-radius:50%;
  background:var(--gold-dim);
}
.log h2{margin-top:26px}

.foot{
  border-top:1px solid var(--line);padding:20px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);max-width:860px;margin:0 auto;
}

@media(max-width:720px){
  .top{padding:10px 14px;gap:10px}
  .logo{font-size:18px}
  .nav a{font-size:12px;padding:6px 9px}
  .wrap{padding:24px 14px 60px}
  h1{font-size:24px}
  h2{font-size:17px;margin-top:34px}
  .pc-body{grid-template-columns:1fr}
  .diag{width:100%;max-width:220px;margin:0 auto}
  .pc-art{width:74px;height:74px}
  .clist{grid-template-columns:1fr}
  .cc-art{width:64px;height:64px}
}