/* ゲーム以外のページ（雑草図鑑）。色は style.css と同じ系統 */
:root{--bg:#f6f1e1;--card:#fffdf5;--ink:#2f2a1c;--muted:#6d6650;--green:#3f7f3a;--deep:#24361f;--gold:#c98a14;--line:rgba(60,50,30,.14);
  --f-display:"Dela Gothic One","Hiragino Kaku Gothic StdN","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.8}
a{color:var(--green)}
.top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--deep);color:#f2eedb}
.brand{display:flex;align-items:center;gap:8px;color:#f2eedb;text-decoration:none;font-weight:700}
.play{display:inline-block;padding:7px 14px;border-radius:999px;background:#f0b23d;color:#33220a;font-weight:700;text-decoration:none;white-space:nowrap}
.play.big{padding:12px 26px;font-size:17px}
main{max-width:860px;margin:0 auto;padding:20px 16px 40px}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,6vw,40px);line-height:1.3;margin:10px 0}
h1 small{display:block;font-family:var(--f-body);font-weight:700;font-size:15px;color:var(--muted)}
h2{font-family:var(--f-display);font-weight:400;font-size:24px;margin:36px 0 6px;padding-bottom:4px;border-bottom:3px solid var(--green)}
.lead{font-size:15.5px}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.toc a{padding:4px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-size:13.5px;font-weight:700}
.w{display:grid;grid-template-columns:150px 1fr;gap:16px;margin:14px 0;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.w img{width:150px;height:150px;object-fit:contain}
.w h3{margin:0;font-size:21px;line-height:1.3}
.w h3 small{font-size:12px;color:var(--muted);font-weight:500}
.w p{margin:6px 0}
.tags{font-size:13px;color:var(--muted)}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:1px 9px;border-radius:999px;margin-right:6px}
.k-native{background:#d8edc8;color:#2a5a1a}.k-alien{background:#fde3b0;color:#7a4a00}.k-invasive{background:#f8c8c0;color:#8a1a0a}
.k-introduced{background:#e0e4c8;color:#4a5020}.k-rare{background:#ecd8f8;color:#5a2a7a}
dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:14px}
dt{font-weight:700;color:var(--green);white-space:nowrap}
dd{margin:0}
details{margin:8px 0;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
summary{font-weight:700;cursor:pointer}
.tips{padding-left:20px}
.cta{text-align:center;margin:30px 0}
.note{font-size:12.5px;color:var(--muted)}
footer{padding:20px;text-align:center;font-size:12px;color:var(--muted)}
@media (max-width:560px){.w{grid-template-columns:1fr}.w img{width:120px;height:120px;margin:0 auto}}
.pics{display:flex;flex-direction:column;align-items:center;gap:6px}
.pics figure{margin:0;text-align:center}
.pics figure img{width:110px;height:110px;border-radius:12px;background:#2a3a26}
.pics figcaption{font-size:11px;color:var(--muted)}
@media (max-width:560px){.pics{flex-direction:row;justify-content:center}.pics figure img{width:120px;height:120px}}