:root{
  --paper:#16181d; --ink:#f2f4f6; --body:#d3d8de; --muted:#9aa3ad;
  --line:#2c313a; --wash:#1e2229; --accent:#fbbf24; --accent-ink:#f59e0b;
  --good:#4ade80; --radius:10px;
  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.66}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.22;font-weight:700}
h1{font-size:2.05rem;margin:.4em 0 .3em}
h2{font-size:1.45rem;margin:1.8em 0 .5em}
h3{font-size:1.12rem;margin:1.4em 0 .4em}
p{margin:.8em 0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:#fde68a}
.wrap{max-width:70ch;margin:0 auto;padding:0 22px}
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
.wordmark{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--accent)}
.site-nav{display:flex;gap:18px;margin-left:auto;font-size:.95rem}
.site-nav a{color:var(--body);text-decoration:none}
.site-nav a:hover{color:var(--accent)}
.hero{background:var(--wash);border-bottom:1px solid var(--line);padding:34px 0 30px}
.dek{font-size:1.1rem;max-width:58ch}
.meta{font-size:.85rem;color:var(--muted)}
.article{padding:26px 0 60px}
.game{border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:1.4em 0;background:var(--wash)}
.game h3{margin:.1em 0 .3em;font-size:1.3rem}
.rating{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--accent);border:1.5px solid var(--accent);border-radius:8px;padding:2px 12px;margin:6px 10px 6px 0}
.tag{display:inline-block;font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin:2px 4px 2px 0}
table.pick{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
table.pick th,table.pick td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
table.pick th{background:var(--wash);font-family:var(--serif);color:var(--ink)}
.keyline{border:2px solid var(--accent);border-radius:var(--radius);padding:16px 22px;margin:2em 0}
.keyline p:first-child{margin-top:0}
.keyline strong.lead{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.card-list{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:14px}
.card-list a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;text-decoration:none;background:var(--wash)}
.card-list a:hover{border-color:var(--accent)}
.card-list strong{font-family:var(--serif);font-size:1.15rem;color:var(--ink);display:block}
.card-list span{color:var(--muted);font-size:.93rem}
.btn{display:inline-block;background:var(--accent);color:#16181d;font-weight:700;padding:10px 22px;border-radius:8px;text-decoration:none}
.btn:hover{background:var(--accent-ink);color:#16181d}
.disclosure-note{background:var(--wash);border:1px solid var(--line);border-radius:8px;padding:10px 16px;font-size:.88rem}
.site-footer{border-top:1px solid var(--line);padding:26px 0 40px;font-size:.9rem;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:12px}
.site-footer a{color:var(--muted)}
ul.tight li{margin:.35em 0}
@media(max-width:640px){h1{font-size:1.65rem}.site-nav{gap:12px;font-size:.88rem}}
/* === responsive + polish layer === */
img,svg,video,canvas,iframe{max-width:100%;height:auto}
body{overflow-x:hidden}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-header .wrap{flex-wrap:wrap;row-gap:8px}
.site-nav{flex-wrap:wrap;row-gap:4px}
.site-nav a{padding:8px 2px}
.hero{position:relative;overflow:hidden}
.promptbox{overflow-x:auto}
@media(max-width:640px){
body{font-size:16px}
.wrap{padding:0 18px}
.hero{padding:26px 0 24px}
.scoreboard,.proscons{grid-template-columns:1fr}
.scoreboard>div+div{border-left:none;border-top:1px solid var(--line)}
table{font-size:.88rem}
th,td{padding:7px 9px}
.btn,.btn-ghost{display:block;text-align:center;margin:.4em 0}
.priceband .range{font-size:1.5rem}
.step .n{width:1.6em;height:1.6em;line-height:1.6em}
}
@media(max-width:400px){
h1{font-size:1.5rem}
.site-nav{font-size:.85rem;gap:10px}
.wordmark{font-size:1.1rem}
.dek{font-size:1rem}
}
.hero{background-image:repeating-linear-gradient(135deg,rgba(251,191,36,.10) 0 1px,transparent 1px 10px)}