:root{
  --bg:#1a1920;
  --bg2:#22212a;
  --line:#33313d;
  --tx:#bdb5a5;
  --tx-dim:#847e72;
  --tx-hi:#e2d9c6;
  --gold:#d8b45f;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:#1a1920; }
body{
  margin:0;
  background:linear-gradient(180deg,#24222a,#16151c) fixed;
  background-color:#1a1920;
  color:var(--tx);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  line-height:1.9;
  font-size:16px;
}
a{ color:var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:min(100% - 32px, 720px); margin-inline:auto; }

/* --- header --- */
.site-head{
  border-bottom:1px solid var(--line);
  padding:14px 0;
  margin-bottom:34px;
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:9px; color:var(--tx-hi); font-weight:800; font-size:16px; }
.brand:hover{ text-decoration:none; }
.brand svg{ width:24px; height:24px; flex:0 0 auto; }
.nav{ display:flex; gap:16px; font-size:14px; flex-wrap:wrap; }
.nav a{ color:var(--tx-dim); }
.nav a:hover{ color:var(--tx-hi); text-decoration:none; }

/* --- type --- */
h1{ font-size:27px; line-height:1.5; color:var(--tx-hi); margin:0 0 18px; letter-spacing:.01em; }
h2{ font-size:19px; color:var(--tx-hi); margin:40px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line); }
h3{ font-size:16px; color:var(--tx-hi); margin:28px 0 8px; }
p{ margin:0 0 17px; }
ul,ol{ margin:0 0 17px; padding-left:1.35em; }
li{ margin-bottom:7px; }
small,.dim{ color:var(--tx-dim); font-size:14px; }
strong{ color:var(--tx-hi); }
hr{ border:0; border-top:1px solid var(--line); margin:34px 0; }

/* --- hero (top page) --- */
.hero{ text-align:center; padding:8px 0 4px; }
.hero .lead{ color:var(--tx-dim); font-size:15px; }

.game-card{
  display:block;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 22px 24px;
  margin:26px 0 30px;
  text-align:center;
}
.game-card:hover{ text-decoration:none; border-color:#4a4657; }
.game-card .art{ width:min(100%,340px); height:auto; margin:0 auto 16px; display:block; border-radius:10px; }
.game-card .ttl{ font-size:23px; font-weight:800; color:var(--tx-hi); margin:0 0 6px; }
.game-card .sub{ color:var(--tx-dim); font-size:14px; margin:0 0 20px; }
.btn{
  display:inline-block;
  background:var(--gold);
  color:#20202a;
  font-weight:800;
  font-size:16px;
  padding:13px 42px;
  border-radius:999px;
}
.btn:hover{ text-decoration:none; filter:brightness(1.08); }
.meta-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--tx-dim); margin-top:18px; }

/* --- lists --- */
.note-list{ list-style:none; padding:0; margin:0; }
.note-list li{ border-bottom:1px solid var(--line); margin:0; }
.note-list li:first-child{ border-top:1px solid var(--line); }
.note-list a{ display:block; padding:17px 2px; color:var(--tx); }
.note-list a:hover{ text-decoration:none; color:var(--tx-hi); background:#ffffff08; }
.note-list .d{ display:block; font-size:12px; color:var(--tx-dim); margin-bottom:3px; }
.note-list .t{ font-weight:700; }

table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px; }
th,td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
th{ background:#ffffff08; color:var(--tx-hi); font-weight:700; }

blockquote{
  margin:0 0 18px; padding:12px 16px;
  border-left:3px solid var(--gold);
  background:#ffffff08; border-radius:0 8px 8px 0;
  color:var(--tx-hi);
}

.back{ display:inline-block; margin-top:34px; font-size:14px; }

/* --- footer --- */
.site-foot{
  margin-top:60px;
  border-top:1px solid var(--line);
  padding:22px 0 40px;
  font-size:13px;
  color:var(--tx-dim);
}
.site-foot .wrap{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.site-foot a{ color:var(--tx-dim); }
.site-foot a:hover{ color:var(--tx-hi); }

@media (max-width:560px){
  h1{ font-size:23px; }
  body{ font-size:15.5px; }
  .nav{ gap:13px; font-size:13px; }
}