:root{
  --bg:#0f1420; --panel:#182033; --line:#2a3550; --text:#e8ecf4; --sub:#9aa6bf; --accent:#ffb347;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f7fb; --panel:#fff; --line:#dde3ef; --text:#1c2333; --sub:#5b6781; --accent:#d9730d; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;line-height:1.7}
a{color:var(--accent)}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
header{padding:40px 0 16px}
header h1{margin:0;font-size:28px;letter-spacing:.04em}
header p{margin:8px 0 0;color:var(--sub)}
h2{font-size:18px;margin:32px 0 12px}
.games{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:18px;text-decoration:none;color:inherit}
.card:hover{border-color:var(--accent)}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0 0 14px;color:var(--sub);font-size:14px;flex:1}
.card .go{align-self:flex-start;background:var(--accent);color:#1b1305;font-weight:700;
  padding:8px 18px;border-radius:999px;font-size:14px}
.about p{color:var(--sub);margin:0 0 8px}
footer{margin:48px 0 32px;padding-top:16px;border-top:1px solid var(--line);color:var(--sub);font-size:13px}
footer a{margin-right:16px}
.policy h2{margin-top:28px}
.policy li{margin-bottom:6px}