/* Guides (e.g. /best-atc-games/). Loads after home.css and incident.css and
   reuses their hero, sections, FAQ cards and footer. A guide adds a quick-pick
   grid, a comparison table and one card per entry. */
.g-note { max-width: 70ch; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); color: var(--text-2); font-size: 15px; line-height: 1.55; }
.g-note b { color: var(--text); }
.g-updated { font: 500 12px/16px var(--mono); color: var(--text-3); }

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pick { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); text-decoration: none; }
.pick:hover { border-color: var(--sodium); }
.pick .lbl { font: 500 11px/16px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sodium); }
.pick b { font-size: 17px; line-height: 1.3; }
.pick span:last-child { font-size: 14px; color: var(--text-2); line-height: 1.45; }

.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cmp { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; line-height: 20px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 500 11px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); background: var(--s1); position: sticky; top: 0; }
.cmp tbody th { font-weight: 600; white-space: nowrap; }
.cmp tbody th a { color: var(--text); text-decoration: none; }
.cmp tbody th a:hover { color: var(--sodium); }
.cmp td { color: var(--text-2); }
.cmp tr.ours th, .cmp tr.ours td { background: rgba(255, 181, 71, 0.06); }

.g-sec { display: grid; gap: 16px; }
.g-sec > h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; margin: 0; }
.g-sec > p { color: var(--text-2); max-width: 68ch; font-size: 17px; line-height: 1.6; }
.games { display: grid; gap: 16px; }
.game { padding: 20px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); display: grid; gap: 10px; scroll-margin-top: 96px; }
.game.ours { border-color: rgba(255, 181, 71, 0.45); }
.game-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.game h3 { font-size: 22px; line-height: 1.2; margin: 0; }
.game .n { font: 500 13px/16px var(--mono); color: var(--sodium); margin-right: 8px; }
.game .best { font: 500 12px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--threshold); }
.game .facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.game .facts li { font: 500 12px/16px var(--mono); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.game p { color: var(--text-2); font-size: 16px; line-height: 1.6; max-width: 72ch; }
.game p b { color: var(--text); font-weight: 600; }
.pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px 24px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.pc ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.pc .h { font: 500 11px/16px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 4px; }
.game .go { font-weight: 600; color: var(--sodium); text-decoration: none; width: fit-content; }
.game .go:hover { text-decoration: underline; }
.g-also { color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 72ch; }
.g-also li { margin-bottom: 6px; }