/* ==========================================================================
   Review posts — the code-built fact tables (`table.cg-facts`, written by the
   manager's review/tables.ts), the plugin's score block (`.cg-review-extra`)
   and, on cryptogames.gg, the Foxiz review box inside our article page.
   Enqueued by Content\ArticleKind::enqueue_review_css() on review posts only
   (body.cg-review-post), on BOTH sites, after the theme and skin sheets.

   ⚠️ WHY THE TABLES BROKE (egamers draft 121688, 2026-10-06): native-catalog.css
   styles the game page's facts panel with the bare class `.cg-facts`
   (display:grid; two columns; padding 6px 20px). The review tables carry the
   same class, so every row was poured into a two-column grid and the caption
   floated centred above it. `table.cg-facts` below puts the table back to a
   table; the specificity (0,2,2+) beats `.cg-facts` without !important.

   Tokens: one --rv-* set per site + mode.
     cryptogames.gg article page  -> the page's own --ar-* tokens (home-os,
                                     blue-purple, light and dark already switch)
     egamers.io dark (Stitch skin) -> --eg-* tokens
     anything else (light)          -> the neutral light set below
   No orange anywhere.
   ========================================================================== */

body.cg-review-post {
  --rv-surface: #ffffff;
  --rv-head: #f4f3f8;
  --rv-zebra: #faf9fc;
  --rv-line: rgba(20, 16, 40, .10);
  --rv-text: #17141f;
  --rv-body: #2d2a36;
  --rv-muted: #5f5b6b;
  --rv-accent: #5b3fd6;
  --rv-radius: 12px;
}
body.cg-review-post[data-theme="dark"] {
  --rv-surface: var(--eg-s1, #16141f);
  --rv-head: var(--eg-s2, #1d1a29);
  --rv-zebra: rgba(255, 255, 255, .018);
  --rv-line: var(--eg-line, #332d4a);
  --rv-text: var(--eg-text, #f8fafc);
  --rv-body: #cbd5e1;
  --rv-muted: var(--eg-muted, #94a3b8);
  --rv-accent: var(--eg-accent, #8b5cf6);
}
body.cg-review-post.cg-article-os {
  --rv-surface: var(--ar-bg);
  --rv-head: var(--ar-s1);
  --rv-zebra: transparent;
  --rv-line: var(--ar-line);
  --rv-text: var(--ar-text);
  --rv-body: var(--ar-body);
  --rv-muted: var(--ar-muted);
  --rv-accent: var(--ar-accent);
  --rv-radius: 14px;
}

/* ---------------------------------------------------------- fact tables */
body.cg-review-post table.cg-facts {
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 1.6em 0 1.8em;
  padding: 0;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-surface);
  color: var(--rv-body);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  overflow: hidden;
}
body.cg-review-post table.cg-facts caption {
  display: table-caption;
  caption-side: top;
  padding: 0 2px 10px;
  margin: 0;
  text-align: left;
  color: var(--rv-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  background: none;
  border: 0;
}
body.cg-review-post table.cg-facts thead,
body.cg-review-post table.cg-facts tbody { display: table-row-group; }
body.cg-review-post table.cg-facts thead { display: table-header-group; }
body.cg-review-post table.cg-facts tr { display: table-row; background: none; }
body.cg-review-post table.cg-facts th,
body.cg-review-post table.cg-facts td {
  display: table-cell;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--rv-line);
  text-align: left;
  vertical-align: top;
  background: none;
  color: var(--rv-body);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  overflow-wrap: anywhere;
}
body.cg-review-post table.cg-facts tbody tr:last-child > * { border-bottom: 0; }
/* 2-column facts: the label column, fixed width so every table on the page lines up */
body.cg-review-post table.cg-facts th[scope="row"] {
  width: 38%;
  background: var(--rv-head);
  color: var(--rv-muted);
  font-weight: 600;
  border-right: 1px solid var(--rv-line);
}
body.cg-review-post table.cg-facts td { color: var(--rv-text); }
/* multi-column tables (NFT collections, community): a header row */
body.cg-review-post table.cg-facts thead th {
  background: var(--rv-head);
  color: var(--rv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.cg-review-post table.cg-facts thead ~ tbody tr:nth-child(even) > * { background: var(--rv-zebra); }
body.cg-review-post table.cg-facts thead ~ tbody td:first-child { font-weight: 600; }
/* numbers: right-aligned when the markup marks them (td.num / th.num), always tabular */
body.cg-review-post table.cg-facts .num { text-align: right; white-space: nowrap; }
body.cg-review-post table.cg-facts a { color: var(--rv-accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  body.cg-review-post table.cg-facts { font-size: 14px; }
  body.cg-review-post table.cg-facts th,
  body.cg-review-post table.cg-facts td { padding: 9px 12px; }
  body.cg-review-post table.cg-facts th[scope="row"] { width: 42%; }
  /* A wide table scrolls inside its own box, never the page. */
  body.cg-review-post table.cg-facts:has(thead) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.cg-review-post table.cg-facts:has(thead) caption { display: block; }
  /* Opt-in stacked cards: <table data-stack="1"> with <td data-label="…"> on every cell. */
  body.cg-review-post table.cg-facts[data-stack] { display: block; overflow: visible; border: 0; background: none; }
  body.cg-review-post table.cg-facts[data-stack] thead { display: none; }
  body.cg-review-post table.cg-facts[data-stack] tbody { display: block; }
  body.cg-review-post table.cg-facts[data-stack] tr {
    display: block;
    margin: 0 0 10px;
    border: 1px solid var(--rv-line);
    border-radius: var(--rv-radius);
    background: var(--rv-surface);
    overflow: hidden;
  }
  body.cg-review-post table.cg-facts[data-stack] td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
    background: none;
  }
  body.cg-review-post table.cg-facts[data-stack] td[data-label]::before {
    content: attr(data-label);
    color: var(--rv-muted);
    font-weight: 600;
    text-align: left;
  }
  body.cg-review-post table.cg-facts[data-stack] tr > td:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------- score block (egamers: full; cryptogames: ranking line) */
body.cg-review-post .cg-review-extra {
  margin: 2em 0 1.4em;
  padding: 18px 22px;
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-head);
  color: var(--rv-body);
  font-variant-numeric: tabular-nums;
}
body.cg-review-post .cg-review-extra p { margin: 0; }
body.cg-review-post .cg-review-extra .cg-rx-head { margin: 0 0 10px; color: var(--rv-text); font-size: 1.12em; }
body.cg-review-post .cg-review-extra .cg-rx-word { margin-left: 6px; color: var(--rv-accent); font-weight: 600; }
body.cg-review-post .cg-review-extra .cg-rx-list { list-style: none; margin: 0; padding: 0; }
body.cg-review-post .cg-review-extra .cg-rx-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--rv-line);
}
body.cg-review-post .cg-review-extra .cg-rx-list li::before { content: none; }
body.cg-review-post .cg-review-extra .cg-rx-label { color: var(--rv-text); font-weight: 600; }
body.cg-review-post .cg-review-extra .cg-rx-score { color: var(--rv-text); text-align: right; white-space: nowrap; }
body.cg-review-post .cg-review-extra .cg-rx-note { grid-column: 1 / -1; display: block; margin-top: 2px; color: var(--rv-muted); font-size: .9em; }
body.cg-review-post .cg-review-extra .cg-rx-rank,
body.cg-review-post .cg-review-extra .cg-rx-limit,
body.cg-review-post .cg-review-extra .cg-rx-updated { margin: 10px 0 0; color: var(--rv-muted); font-size: .92em; }
body.cg-review-post .cg-review-extra--meta .cg-rx-rank { margin-top: 0; }
body.cg-review-post .cg-review-extra a { color: var(--rv-accent); }
@media (max-width: 640px) {
  body.cg-review-post .cg-review-extra { padding: 14px 16px; border-radius: 10px; }
}

/* ---------------------------------------------------------- the Foxiz box on our article page (cryptogames.gg) */
body.cg-article-os .ar-review { margin: 1.6em 0 2em; --review-color: var(--ar-accent); }
body.cg-article-os .ar-review .review-section {
  border: 1px solid var(--ar-line);
  border-radius: 14px;
  background: var(--ar-s1);
  box-shadow: none;
  color: var(--ar-body);
}
body.cg-article-os .ar-review .review-intro { background: var(--ar-grad); }
body.cg-article-os .ar-review .review-intro,
body.cg-article-os .ar-review .review-intro .h1,
body.cg-article-os .ar-review .review-intro .h2 { color: #ffffff; }
body.cg-article-os .ar-review .review-label-info,
body.cg-article-os .ar-review .pros-cons-title,
body.cg-article-os .ar-review .review-summary-title { color: var(--ar-text); }
body.cg-article-os .ar-review .rating-info,
body.cg-article-os .ar-review .summary-content,
body.cg-article-os .ar-review .pros-cons-el { color: var(--ar-body); }
body.cg-article-os .ar-review .review-footer > *:not(.review-action)::before { background: var(--ar-line); }
body.cg-article-os .ar-review .review-section { --review-color: var(--ar-accent); }
/* Foxiz paints the score bars red → orange → green; this site has no orange: one accent, filled vs empty. */
body.cg-article-os .ar-review .rline { background-color: var(--ar-accent); }
body.cg-article-os .ar-review .rline:not(.activated) { background-color: var(--ar-s3); }
body.cg-article-os .ar-review .review-intro .rline:not(.activated) { background-color: rgba(255, 255, 255, .25); }

/* ---------------------------------------------------------- review hero (cryptogames.gg article page)
   The cover (1200x630) already carries the title and logo. On a review the picture is shown whole, on top, with
   the breadcrumb / chips / H1 / byline below it in page colours, instead of a gradient box over the picture.
   Ordinary articles and the no-image header (.ar-hero--plain) are untouched. Mirrored in
   assets/critical/cryptogames/review.css (keep both in step). */
body.cg-review-post .ar-hero:not(.ar-hero--plain) { display: block; min-height: 0; background: none; border-radius: 0; overflow: visible; isolation: auto; }
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-hero-media { position: relative; z-index: 0; aspect-ratio: 1200 / 630; width: min(100%, 840px); max-width: 100%; border-radius: 20px; overflow: hidden; background: var(--ar-s1); }
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-hero-media::after { display: none; }
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-hero-tx { gap: 12px; max-width: none; padding: 20px 4px 0; color: var(--ar-text); }
/* Owner 10-16: the cover was ~700px tall and the H1 broke onto two lines with room to spare. */
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-title { font-size: clamp(28px, 2.4vw, 44px); }
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-title,
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-who { color: var(--ar-text); }
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-dek,
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-crumb,
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-meta { color: var(--ar-muted); }
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-chip { background: var(--ar-s2); border-color: var(--ar-line); color: var(--ar-text); }
body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-chip:first-child { background: var(--ar-grad); border-color: transparent; color: #ffffff; }
@media (max-width: 760px) {
  body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-hero-media { border-radius: 0; }
  body.cg-review-post .ar-hero:not(.ar-hero--plain) .ar-hero-tx { padding: 18px 16px 0; }
}