:root{
  --ink:#141416;
  --panel:#1c1c20;
  --panel-2:#242429;
  --line:#06c755;
  --text:#f2f3f5;
  --dim:#9a9aa4;
  --danger:#ff5a5a;
  --gold:#ffd166;
  --rule:rgba(255,255,255,.10);
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.75; letter-spacing:.005em;
}
a{color:var(--line); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--text); outline-offset:3px; border-radius:3px}

/* ---- 骨格 ---- */
.wrap{max-width:1000px; margin:0 auto; padding:0 20px 80px}
.masthead{
  border-bottom:1px solid var(--rule);
  padding:22px 0 18px; margin-bottom:26px;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.masthead .home{font-size:17px; font-weight:800; color:var(--text)}
.masthead .home:hover{color:var(--line); text-decoration:none}
.masthead .tag{color:var(--dim); font-size:12.5px}
.masthead .play{margin-left:auto; font-weight:700}

.cols{display:grid; grid-template-columns:190px 1fr; gap:40px; align-items:start}
@media (max-width:760px){ .cols{grid-template-columns:1fr; gap:26px} }

nav.side{position:sticky; top:22px}
@media (max-width:760px){ nav.side{position:static} }
nav.side ol{list-style:none; display:flex; flex-direction:column; gap:1px}
@media (max-width:760px){ nav.side ol{flex-direction:row; flex-wrap:wrap; gap:6px} }
nav.side a{
  display:block; padding:7px 11px; border-radius:8px;
  color:var(--dim); font-size:13.5px; font-weight:600;
}
nav.side a:hover{background:var(--panel); color:var(--text); text-decoration:none}
nav.side a[aria-current]{background:var(--panel-2); color:var(--text)}

/* ---- 見出し ---- */
h1{font-size:clamp(25px,4.6vw,33px); font-weight:800; line-height:1.25; margin-bottom:8px}
h2{
  font-size:19px; font-weight:800; margin:38px 0 12px;
  padding-bottom:7px; border-bottom:1px solid var(--rule);
}
h3{font-size:15.5px; font-weight:700; margin:24px 0 7px}
.lede{color:var(--dim); font-size:14.5px; margin-bottom:6px}
p{margin:11px 0}
p+p{margin-top:14px}

ul,ol.plain{margin:11px 0 11px 1.25em}
li{margin:5px 0}

/* ---- 表 ---- */
table{
  width:100%; border-collapse:collapse; margin:16px 0;
  font-size:14px; font-variant-numeric:tabular-nums;
}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{color:var(--dim); font-size:12.5px; font-weight:700; border-bottom-color:rgba(255,255,255,.2)}
td.num,th.num{text-align:right}
tbody tr:hover{background:rgba(255,255,255,.025)}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch}
.scroller table{min-width:520px}

/* ---- 敵カード ---- */
.dex{display:grid; gap:14px; margin:18px 0}
.card{
  background:var(--panel); border-radius:14px; padding:16px 18px;
  display:grid; grid-template-columns:118px 1fr; gap:18px; align-items:center;
}
@media (max-width:560px){ .card{grid-template-columns:88px 1fr; gap:13px; padding:13px} }
.card .shot{
  background:#0e0e10; border-radius:10px; height:118px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
@media (max-width:560px){ .card .shot{height:88px} }
.card .shot img{max-width:92%; max-height:92%; object-fit:contain}
.card h3{margin:0 0 4px}
.card .stats{color:var(--dim); font-size:13px; font-variant-numeric:tabular-nums; margin-bottom:6px}
.card .stats b{color:var(--text); font-weight:600}
.card p{margin:0; font-size:14px}

/* ---- 注記 ---- */
.note{
  background:var(--panel); border-left:3px solid var(--line);
  border-radius:0 10px 10px 0; padding:13px 16px; margin:18px 0; font-size:14px;
}
.note.warn{border-left-color:var(--danger)}
.note.gold{border-left-color:var(--gold)}
.note strong{font-weight:700}

/* ---- 進行表 ---- */
.timeline{list-style:none; margin:18px 0; border-left:1px solid var(--rule); padding-left:0}
.timeline li{position:relative; padding:0 0 20px 22px; margin:0}
.timeline li::before{
  content:""; position:absolute; left:-4.5px; top:9px;
  width:8px; height:8px; border-radius:50%; background:var(--dim);
}
.timeline li.mark::before{background:var(--line); box-shadow:0 0 0 4px rgba(6,199,85,.16)}
.timeline li.bossmark::before{background:var(--danger); box-shadow:0 0 0 4px rgba(255,90,90,.18)}
.timeline .when{font-size:12.5px; color:var(--dim); font-weight:700}
.timeline .what{font-size:14.5px}
.timeline .how{font-size:13.5px; color:var(--dim)}

/* ---- 索引 ---- */
.index{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:22px 0}
.index a{
  display:block; background:var(--panel); border-radius:12px; padding:16px 18px; color:var(--text);
}
.index a:hover{background:var(--panel-2); text-decoration:none}
.index .t{font-weight:700; font-size:15px; margin-bottom:3px}
.index .d{color:var(--dim); font-size:13px; line-height:1.6}

kbd{
  background:var(--panel-2); border:1px solid var(--rule); border-bottom-width:2px;
  border-radius:5px; padding:1px 6px; font-family:inherit; font-size:12.5px; font-weight:700;
}
.pill{
  display:inline-block; background:var(--panel-2); border-radius:999px;
  padding:1px 9px; font-size:12.5px; font-weight:700; color:var(--dim);
}
.pill.ok{color:#7ee2a8} .pill.ng{color:var(--danger)} .pill.gold{color:var(--gold)}

footer{margin-top:56px; padding-top:18px; border-top:1px solid var(--rule); color:var(--dim); font-size:12.5px}