/* レイアウト：左に7軸の絞り込み、右にカード。詳細は1ゲーム1画面。書体・見出しの作法は kamogames.site トップに合わせ、配色は本家の緑と分けてブルー系 */
:root{
  --bg:#eef1f4; --surface:#f8fafc; --ink:#141b24; --muted:#5b6677; --line:#d2d9e2;
  --accent:#2d5b8c; --accent-ink:#eaf1f9; --amber:#d9a44a; --zone:#dbe5f0; --cell:#e1e6ed;
  --font-display:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f141b; --surface:#161d27; --ink:#e3e9f1; --muted:#93a0b2; --line:#27313e;
    --accent:#80b2e2; --accent-ink:#0d1a28; --amber:#e6b562; --zone:#1b2939; --cell:#222c39; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f141b; --surface:#161d27; --ink:#e3e9f1; --muted:#93a0b2; --line:#27313e;
    --accent:#80b2e2; --accent-ink:#0d1a28; --amber:#e6b562; --zone:#1b2939; --cell:#222c39; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font:400 15px/1.85 var(--font-body)}
h1,h2,h3{text-wrap:balance}
.mono{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--amber); outline-offset:4px; border-radius:6px}
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}

/* ヘッダー */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--line)}
header.top .wrap{min-height:64px; display:flex; align-items:center; gap:16px; padding-block:8px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand svg{width:28px; height:28px; flex:none}
.brand b{font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.06em}
.brand small{font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.14em}
.home{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--muted); text-decoration:none}
.home:hover{color:var(--ink)}
.credit a{color:inherit}
nav.views{display:flex; gap:24px; margin-left:auto}
nav.views a{text-decoration:none; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--muted); padding-block:4px; border-bottom:2px solid transparent}
nav.views a:hover{color:var(--ink)}
nav.views a[aria-current="page"]{color:var(--ink); border-color:var(--accent)}

/* 導入 */
.intro{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; padding-block:36px 24px}
.intro h1{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4.6vw,48px); line-height:1.25; letter-spacing:-.01em; margin:10px 0 0}
.intro h1 em{font-style:normal; color:var(--accent)}
.intro p{margin:10px 0 0; color:var(--muted); max-width:60ch}
.count{font-family:var(--font-mono); text-align:right; color:var(--muted); font-size:12px; letter-spacing:.06em}
.count strong{display:block; font-family:var(--font-display); font-weight:700; font-size:48px; line-height:1; color:var(--ink); letter-spacing:0}
.draft{display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border:1px dashed var(--amber); border-radius:8px; font-size:13px; color:var(--muted); margin-bottom:24px}
.draft b{color:var(--ink); white-space:nowrap}

/* 図鑑：絞り込み＋カード */
.zukan{display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px; padding-bottom:64px; align-items:start}
.filters{position:sticky; top:calc(env(safe-area-inset-top,0px) + 70px); max-height:calc(100vh - 90px); overflow:auto; padding-right:4px}
.filters > summary{display:none}
.fhead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.fhead span{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--muted)}
.clear{background:none; border:0; padding:0; font-size:12px; color:var(--accent); cursor:pointer; text-decoration:underline}
.clear[disabled]{color:var(--muted); text-decoration:none; cursor:default; opacity:.6}
.axis{border-top:1px solid var(--line); padding-block:12px}
.axis h3{margin:0; font-size:14px; font-weight:700}
.axis p{margin:2px 0 8px; font-size:12px; color:var(--muted); line-height:1.5}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:3px 10px; font-size:12.5px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; line-height:1.6}
.chip i{font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.chip[aria-pressed="true"] i{color:var(--accent-ink)}
.chip.zero{opacity:.45}
.rule{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.6}

.results-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.results-head h2{margin:0; font-size:15px}
.active{display:flex; gap:6px; flex-wrap:wrap}
.active span{font-size:12px; background:var(--zone); border-radius:4px; padding:1px 8px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:12px; text-decoration:none; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card .meta{font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.04em}
.card h3{font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.3; margin:2px 0 0}
.card .en, .matrix .en{display:block; font-family:var(--font-mono); font-size:11.5px; font-weight:400; color:var(--muted); letter-spacing:.02em; line-height:1.4; margin-top:2px}
.dhead .tnote{font-size:12px; color:var(--muted); max-width:60ch; line-height:1.6}
.card .one{font-size:15px; font-weight:700; line-height:1.6; margin:0}
.miniloop{margin:0; padding:0; list-style:none; display:grid; gap:2px; font-size:12.5px; color:var(--muted); counter-reset:s}
.miniloop li{display:grid; grid-template-columns:18px 1fr; counter-increment:s}
.miniloop li::before{content:counter(s); font-family:var(--font-mono); font-size:11px; color:var(--accent)}
.card .foot{display:flex; justify-content:space-between; align-items:end; gap:12px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
.tags{display:flex; flex-wrap:wrap; gap:4px}
.tags span{font-size:11.5px; border:1px solid var(--line); border-radius:4px; padding:0 6px}
.empty{padding:40px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:10px}

/* 根っこの指紋（7軸×値のマス） */
.fp{display:grid; gap:3px; flex-shrink:0}
.fp div{display:flex; gap:2px}
.fp s{width:7px; height:7px; border-radius:1.5px; background:var(--cell); display:block}
.fp s.on{background:var(--accent)}
.fp-big{display:grid; gap:10px}
.fp-row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:start}
.fp-row h4{margin:0; font-size:13px; font-weight:700; padding-top:3px}
.fp-row .vals{display:flex; flex-wrap:wrap; gap:4px}
.fp-row .vals a{font-size:12px; padding:2px 8px; border-radius:4px; background:var(--cell); color:var(--muted); text-decoration:none}
.fp-row .vals a.on{background:var(--accent); color:var(--accent-ink); font-weight:700}

/* 詳細 */
.detail{padding-block:28px 72px; display:grid; gap:40px}
.back{font-size:13px; color:var(--muted); text-decoration:none}
.back:hover{color:var(--ink)}
.dhead{display:grid; gap:6px}
.dhead .meta{font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.04em}
.dhead h1{font-family:var(--font-display); font-weight:700; font-size:clamp(32px,6vw,56px); line-height:1.18; letter-spacing:-.01em; margin:0}
.dhead .en{font-family:var(--font-mono); color:var(--muted); font-size:13px}
.oneliner{font-size:clamp(19px,2.6vw,26px); font-weight:700; line-height:1.6; margin:0; padding:20px 0 20px 20px; border-left:4px solid var(--amber); max-width:34em; text-wrap:balance}
.dgrid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px}
section.block h2{font-size:11px; font-family:var(--font-mono); font-weight:500; letter-spacing:.14em; color:var(--accent); margin:0 0 14px; text-transform:uppercase}
section.block h2 b{font-family:var(--font-body); font-size:16px; color:var(--ink); letter-spacing:0; margin-right:8px; text-transform:none}
.loop{list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:s}
.loop li{counter-increment:s; display:grid; grid-template-columns:36px 1fr; gap:10px; padding-bottom:14px; position:relative}
.loop li::before{content:counter(s); width:28px; height:28px; border-radius:50%; background:var(--zone); color:var(--accent); font-family:var(--font-mono); font-size:13px; display:grid; place-items:center}
.loop li:not(:last-child)::after{content:""; position:absolute; left:13.5px; top:30px; bottom:2px; width:1px; background:var(--line)}
.loop-back{font-size:12.5px; color:var(--muted); margin:2px 0 0 46px}
.tablebox{overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-size:11px; font-family:var(--font-mono); font-weight:500; color:var(--muted); letter-spacing:.06em}
.kind{font-size:11px; font-weight:700; padding:1px 7px; border-radius:4px; white-space:nowrap}
.kind.main{background:var(--accent); color:var(--accent-ink)}
.kind.sub{background:var(--cell); color:var(--muted)}
td.name{font-weight:700; white-space:nowrap}
.review{max-width:40em}
.review p{margin:0 0 1em; line-height:1.95}
.badge{font-family:var(--font-body); font-size:11px; border:1px solid var(--amber); color:var(--ink); border-radius:4px; padding:0 6px; letter-spacing:0; vertical-align:2px}
.near{display:grid; gap:10px}
.near a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; text-decoration:none}
.near a:hover{border-color:var(--accent)}
.near b{font-size:15px}
.near em{font-style:normal; font-family:var(--font-mono); font-size:12px; color:var(--accent); align-self:center}
.near small{grid-column:1/-1; color:var(--muted); font-size:12px; line-height:1.5}
.similar{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.similar span{font-size:12.5px; border:1px solid var(--line); border-radius:999px; padding:2px 10px; color:var(--muted)}
.note{font-size:12px; color:var(--muted)}

/* ゲーム画面 */
.shot{position:relative; aspect-ratio:16/9; max-width:100%; border-radius:8px; overflow:hidden; background:var(--zone); margin:0}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot.none{display:grid; place-items:center; border:1px dashed var(--line); background:repeating-linear-gradient(135deg, var(--zone) 0 10px, var(--surface) 10px 20px)}
.shot.none span{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--muted); background:var(--surface); padding:2px 8px; border-radius:4px}
.shot-big{max-width:880px}
.credit{font-size:11.5px; color:var(--muted); margin-top:6px}
.notebox{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.notebox p{margin:0; font-size:13.5px}
.notebox .btn{font:700 13px var(--font-body); background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:9px 20px; text-decoration:none; white-space:nowrap}
.notebox .soon{font-size:12px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.08em}
.card .notemark{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:0 5px; margin-left:6px}

/* 一覧表 */
.matrix{padding-block:8px 64px}
.matrix table{min-width:920px}
.matrix th[scope="row"]{font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--ink); letter-spacing:0; white-space:nowrap}
.matrix td span{display:inline-block; font-size:12px; background:var(--zone); border-radius:4px; padding:0 6px; margin:0 3px 3px 0}
.matrix th[scope="row"] a{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; letter-spacing:0}
.matrix thead th a:hover{color:var(--accent)}

footer{border-top:1px solid var(--line); padding-block:24px; color:var(--muted); font-size:12px}

@media (max-width:860px){
  .zukan{grid-template-columns:minmax(0,1fr)}
  .filters{position:static; max-height:none; overflow:visible; border:1px solid var(--line); border-radius:10px; padding:4px 14px; background:var(--surface)}
  .filters > summary{display:flex; justify-content:space-between; padding-block:10px; cursor:pointer; font-weight:700; list-style:none}
  .filters > summary::-webkit-details-marker{display:none}
  .filters > summary span{font-family:var(--font-mono); font-size:12px; color:var(--accent)}
  .dgrid{grid-template-columns:minmax(0,1fr)}
  .fp-row{grid-template-columns:minmax(0,1fr); gap:4px}
  .intro{grid-template-columns:minmax(0,1fr)}
  .count{text-align:left}
}
@media (max-width:520px){
  .grid{grid-template-columns:minmax(0,1fr)}
  nav.views{margin-left:0}
}
@media (prefers-reduced-motion: reduce){ .card{transition:none} .card:hover{transform:none} }