/* Fewer stock-UI tells on the content pages (game pages, holiday and guide pages, the blog).
   Pill rows, boxed numbered steps and grids of little cards are the look of a generated page.
   This keeps every color, image and layout, and swaps those for plain type and thin rules.
   It loads after each page's own <style>, so these rules win without !important. */

/* Facts about a game: one line of text, not a row of pills. */
.tags { gap: 0; row-gap: 4px; }
.tags span, .tags span:first-child { padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; color: var(--ink-2); }
.tags span:first-child { color: var(--ink); font-weight: 600; }
.tags span + span::before { content: "·"; margin: 0 8px; color: var(--ink-3); }

/* Numbered steps: the number and the words, no box around each one. */
ol.how { gap: 4px; }
ol.how li { background: none; border: 0; border-radius: 0; padding: 10px 0 10px 50px; }
ol.how li::before { left: 0; top: 8px; }

/* Two side-by-side notes and tips: a colored rule on the left instead of a card. */
.pair .card, .card.tip { background: none; border: 0; border-left: 3px solid var(--gc, var(--line)); border-radius: 0; padding: 2px 0 2px 18px; }

/* Game picks on the holiday and guide pages: separated by a thin line, not boxed. */
.pick { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
.picks { gap: 22px; }

/* Lists of other games and posts: a plain list with dividers, not a grid of tiles. */
.games { gap: 0 28px; }
.games a { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.games a:hover b, .related a:hover b, .posts a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.games a:hover { border-color: var(--line); }
.related { gap: 0; }
.related a, .related a:hover { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 14px 0; }
.posts { gap: 0; }
.posts a, .posts a:hover { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 18px 0; }

/* The short answer at the top of a guide: a quote-style rule, not a box. */
.answer { background: none; border: 0; border-left: 3px solid var(--ink); border-radius: 0; padding: 4px 0 4px 18px; }

/* Softer, smaller corners on the big panels that stay. */
.shots { border-radius: 14px; }
.cta { border-radius: 14px; }
table.t { border-radius: 8px; }

@media (max-width: 640px) {
  .shots { border-radius: 10px; }
  ol.how li { padding-left: 46px; }
}