/* GramShift パズルハブ 共有スタイル ── SEO/AEO土台 / 静的・軽量・テーマ対応 */
:root{
  --paper:#FBFAF7; --panel:#FFFFFF; --ink:#23262E; --ink-soft:#5C6270;
  --line:#E7E4DD; --accent:#C87A2E; --accent-ink:#A5611F; --accent-soft:#F6ECDD;
  --indigo:#33477E; --indigo-soft:#EAEFFA; --good:#2F8E63; --good-soft:#E1F1E8;
  --maxw:720px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#12141B; --panel:#1A1D26; --ink:#E9EAEF; --ink-soft:#A0A6B4;
    --line:#2A2E3A; --accent:#E0A055; --accent-ink:#E7B06A; --accent-soft:#33280F;
    --indigo:#8399E4; --indigo-soft:#1E263F; --good:#5BC190; --good-soft:#16281F;
  }
}
:root[data-theme="light"]{
  --paper:#FBFAF7; --panel:#FFFFFF; --ink:#23262E; --ink-soft:#5C6270;
  --line:#E7E4DD; --accent:#C87A2E; --accent-ink:#A5611F; --accent-soft:#F6ECDD;
  --indigo:#33477E; --indigo-soft:#EAEFFA; --good:#2F8E63; --good-soft:#E1F1E8;
}
:root[data-theme="dark"]{
  --paper:#12141B; --panel:#1A1D26; --ink:#E9EAEF; --ink-soft:#A0A6B4;
  --line:#2A2E3A; --accent:#E0A055; --accent-ink:#E7B06A; --accent-soft:#33280F;
  --indigo:#8399E4; --indigo-soft:#1E263F; --good:#5BC190; --good-soft:#16281F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.9; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

/* 上部の細いブランドバー＋パンくず */
.topbar{background:var(--panel); border-bottom:1px solid var(--line)}
.topbar .inner{max-width:var(--maxw); margin:0 auto; padding:10px clamp(18px,5vw,32px); display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.brand{font-weight:800; letter-spacing:.02em; color:var(--ink)}
.brand span{color:var(--accent)}
.crumbs{font-size:12.5px; color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}
.crumbs b{color:var(--ink)}

main{max-width:var(--maxw); margin:0 auto; padding:clamp(24px,5vw,52px) clamp(18px,5vw,32px)}
h1{font-size:clamp(24px,4.4vw,34px); line-height:1.4; font-weight:800; letter-spacing:.01em; margin:0 0 10px; text-wrap:balance}
.dek{font-size:clamp(14px,2.2vw,16px); color:var(--ink-soft); font-weight:600; margin:0 0 26px}
.lead{font-size:16px; margin:0 0 18px}
h2{font-size:clamp(19px,3vw,24px); font-weight:800; margin:44px 0 8px; padding-top:22px; border-top:1px solid var(--line); letter-spacing:.01em; text-wrap:balance}
h3{font-size:17px; font-weight:800; color:var(--accent); margin:26px 0 6px}
p{margin:0 0 16px}
strong{font-weight:800}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:18px 0; background:var(--panel)}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:14.5px}
th,td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--accent-soft); color:var(--ink); font-size:12.5px; letter-spacing:.04em; font-weight:800}
tr:last-child td{border-bottom:none}
td b{color:var(--accent-ink)}

/* 一次情報の強調枠（作り手の本音） */
.star{background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:0 10px 10px 0; padding:14px 18px; margin:16px 0}
.star .k{font-size:12px; letter-spacing:.06em; font-weight:800; color:var(--accent-ink); text-transform:uppercase}
.star p{margin:6px 0 0}

.arrow{color:var(--accent); font-weight:800}
ul.list{list-style:none; padding:0; margin:16px 0}
ul.list li{padding:10px 0 10px 24px; border-bottom:1px solid var(--line); position:relative}
ul.list li:last-child{border-bottom:none}
ul.list li::before{content:"◆"; color:var(--indigo); position:absolute; left:0; top:10px; font-size:12px}

/* HowTo ステップ */
ol.steps{counter-reset:s; list-style:none; padding:0; margin:16px 0}
ol.steps li{position:relative; padding:12px 0 12px 46px; border-bottom:1px solid var(--line)}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:11px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px}
@media (prefers-color-scheme:dark){ol.steps li::before{color:#12141B}}
:root[data-theme="dark"] ol.steps li::before{color:#12141B}
:root[data-theme="light"] ol.steps li::before{color:#fff}

.faq{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px 20px; margin:18px 0}
.faq dt{font-weight:800; margin:16px 0 4px}
.faq dd{margin:0 0 16px; color:var(--ink-soft)}

.cred{background:var(--good-soft); border-radius:12px; padding:16px 20px; margin:26px 0 0; font-size:14.5px}

/* CTA（Playへ） */
.cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:22px 0}
.cta .txt{flex:1 1 240px}
.cta .txt b{font-size:16px}
.cta .txt span{display:block; color:var(--ink-soft); font-size:13.5px}
.btn{display:inline-block; background:var(--accent); color:#fff; font-weight:800; padding:11px 20px; border-radius:10px; white-space:nowrap}
.btn:hover{text-decoration:none; filter:brightness(1.05)}
@media (prefers-color-scheme:dark){.btn{color:#12141B}}
:root[data-theme="dark"] .btn{color:#12141B}
:root[data-theme="light"] .btn{color:#fff}

/* ゲーム一覧 */
.games{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 20px; margin:18px 0}
.games ul{padding:0; margin:0; list-style:none}
.games li{padding:12px 0 12px 26px; border-bottom:1px solid var(--line); position:relative}
.games li:last-child{border-bottom:none}
.games li::before{content:"▸"; color:var(--accent); position:absolute; left:6px; top:12px; font-weight:800}
.badge{display:inline-block; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; margin-left:6px; vertical-align:1px}
.b-live{background:var(--good-soft); color:var(--good)}
.b-soon{background:var(--accent-soft); color:var(--accent-ink)}

footer{border-top:1px solid var(--line); background:var(--panel)}
footer .inner{max-width:var(--maxw); margin:0 auto; padding:22px clamp(18px,5vw,32px); font-size:13px; color:var(--ink-soft); display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between}
footer a{color:var(--ink-soft)}

.langbar{font-size:12.5px; color:var(--ink-soft)}
.langbar a{margin-right:8px}

/* 画像 */
.hero-shot{width:100%; border-radius:14px; border:1px solid var(--line); display:block; margin:18px 0}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0}
@media(max-width:560px){.gallery{grid-template-columns:1fr; max-width:360px; margin-left:auto; margin-right:auto}}
.gallery a{display:block; text-decoration:none}
.gallery figure{margin:0}
.gallery img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line); display:block}
.gallery figcaption{font-size:13px; color:var(--ink); font-weight:700; margin-top:8px; text-align:center}
.gallery figcaption span{display:block; font-weight:400; color:var(--ink-soft); font-size:12px}
.shots{display:flex; gap:14px; flex-wrap:wrap; margin:18px 0; justify-content:center}
.shots figure{margin:0; text-align:center}
.shots img{height:360px; max-width:100%; border-radius:16px; border:1px solid var(--line); display:block; box-shadow:0 6px 22px rgba(0,0,0,.10)}
.shots figcaption{font-size:12px; color:var(--ink-soft); margin-top:8px}
.game-figure{margin:22px 0; text-align:center}
.game-hero{display:block; margin:0 auto; max-height:640px; width:auto; max-width:94%; border-radius:22px; border:1px solid var(--line); box-shadow:0 12px 34px rgba(0,0,0,.18)}
.game-figure figcaption{font-size:12.5px; color:var(--ink-soft); margin-top:10px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}