/* Public, crawlable pages (card sets, TF2 keys, how it works). Built on the app's design tokens; no JavaScript needed. */
@media (prefers-color-scheme: dark) {
  :root { --bg:#0d1218; --surface:#161d27; --surface2:#1e2733; --line:#273243; --fg:#e3e9f2; --mut:#93a1b5; --accent:#2dd4bf; --accent2:#38bdf8; }
}
body.seo { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.55 }
.seohead { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line) }
.seohead .brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-weight:800; font-size:18px } .seohead .brand b { color:var(--accent) }
.seohead nav { display:flex; align-items:center; gap:16px; flex-wrap:wrap } .seohead nav a:not(.btn) { color:var(--fg); text-decoration:none; font-weight:600 } .seohead nav a:not(.btn):hover { color:var(--accent) }
.seomain { max-width:1000px; margin:0 auto; padding:22px 20px 40px } .seomain h1 { font-size:clamp(24px,4vw,34px); line-height:1.2; margin:6px 0 10px } .seomain h2 { font-size:20px; margin:26px 0 6px }
.seomain .lead { font-size:17px; color:var(--mut); max-width:70ch } .seomain a { color:var(--accent2) } .seomain .btn { text-decoration:none; display:inline-block; margin:4px 8px 4px 0 } .seomain .small { color:var(--mut); font-size:13px }
.crumbs { color:var(--mut); font-size:14px; margin-bottom:8px } .crumbs a { color:var(--mut) }
.gamelist { list-style:none; margin:18px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px }
.gamelist a { display:grid; grid-template-columns:128px minmax(0,1fr); gap:12px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:var(--fg) } .gamelist a:hover { border-color:var(--accent) }
.gamelist img { width:128px; height:auto; border-radius:8px; aspect-ratio:460/215; background:var(--surface2); object-fit:cover } .gamelist span { display:grid; gap:2px; min-width:0 } .gamelist b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .gamelist small { color:var(--mut) }
.pager { display:flex; gap:18px; align-items:center; justify-content:center; margin:22px 0 } .pager a { text-decoration:none; font-weight:700 }
.gamepage { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:24px; align-items:start; margin:12px 0 } .gimg { width:100%; height:auto; border-radius:14px; border:1px solid var(--line) }
.seotable { width:100%; border-collapse:collapse; margin:12px 0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden } .seotable th, .seotable td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line) } .seotable tr:last-child td { border-bottom:0 } .seotable th { color:var(--mut); font-size:13px; text-transform:uppercase; letter-spacing:.05em }
.cardlist { columns:3 200px; padding-left:20px; margin:10px 0 }
.seofoot { border-top:1px solid var(--line); background:var(--surface); padding:20px; text-align:center; color:var(--mut); font-size:14px } .seofoot nav { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:8px } .seofoot a { color:var(--fg); text-decoration:none }
@media (max-width:760px) { .gamepage { grid-template-columns:1fr } }