/* /hotgames, /hotgames/list and /viral.
 *
 * Only the deltas live here: the shell (.container, .section-head, .data-table, .million-hero,
 * .million-kpis, .million-table-wrap) comes from base.css and million-sites.css, which the page
 * loads alongside this file. Every colour is a token from src/pages.js -- no literal values, so a
 * palette change moves these pages with the rest of the site.
 */

.hotgames-page .hg-freshness { color: var(--muted); font-variant-numeric: tabular-nums; }

.hg-kpi-note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); font-style: normal; }

/* --- the board table ------------------------------------------------------------------- */

.hg-table { min-width: 1080px; }
.hg-table--list { min-width: 1120px; }
.hg-table--reg { min-width: 720px; }
.hg-table--tenm { min-width: 860px; }

.hg-table thead th { white-space: nowrap; }
/* base.css uppercases every th, which is right for a column label and wrong for a game cell:
   the mechanic is a sentence. Reset the case, the tracking and the header colour here. */
.hg-table tbody th.hg-game { font-weight: 600; font-size: var(--fs-base); letter-spacing: 0; text-transform: none; color: var(--foreground); }
.hg-table tbody th.hg-game strong { font-weight: 700; }
.hg-table .hg-rank { font-variant-numeric: tabular-nums; color: var(--muted); }

.hg-game strong { display: inline; }
.hg-maker { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.hg-mechanic { margin-top: 6px; max-width: 46ch; color: var(--foreground-secondary); font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }
.hg-note { margin-top: 6px; max-width: 46ch; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; line-height: 1.45; }

.hg-move { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.hg-move--up { color: var(--action); }
.hg-move--down { color: var(--foreground-secondary); }
.hg-move--flat { color: var(--muted); }
.hg-move--new { padding: 2px 6px; border-radius: var(--radius); background: var(--primary-subtle); color: var(--primary); font-size: var(--fs-xs); letter-spacing: .04em; }

.hg-peak-badge { margin-inline-start: 4px; color: var(--secondary-accent); font-weight: 700; }

.hg-domain { color: var(--primary); font-weight: 600; word-break: break-all; }
.hg-domain:hover { text-decoration: underline; text-underline-offset: 3px; }
.hg-kind { display: inline-block; margin-top: 4px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground-secondary); font-size: var(--fs-xs); white-space: nowrap; }
.hg-kind--own { border-color: var(--primary); color: var(--primary); }
.hg-kind--publisher { border-color: var(--secondary-accent); color: var(--secondary-accent); }
.hg-unknown { color: var(--muted); font-style: italic; }

.hg-registered time,
.hg-registered { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--foreground-secondary); }
.hg-month { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.hg-traffic strong { font-variant-numeric: tabular-nums; }
.hg-spark { display: block; color: var(--action); }

.hg-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 34ch; }
.hg-tag { padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--background-secondary); color: var(--foreground-secondary); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }

/* --- how the board is built ------------------------------------------------------------ */

.hg-method-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.hg-method-grid article { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.hg-method-grid h3 { margin: 0 0 8px; font-size: var(--fs-lg); }
.hg-method-grid p { margin: 0; color: var(--foreground-secondary); font-size: var(--fs-sm); line-height: 1.6; }

.hg-bubble { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.hg-bubble li { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.hg-bubble-domain { color: var(--muted); font-size: var(--fs-xs); }

/* --- /viral: the five cases ------------------------------------------------------------ */

.hg-dive-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 20px; }
.hg-dive { padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.hg-dive-head { display: flex; gap: 14px; align-items: flex-start; }
.hg-dive-index { color: var(--primary); font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.hg-dive h3 { margin: 0; font-size: var(--fs-xl); line-height: 1.3; }
.hg-dive h3 .hg-domain { font-size: var(--fs-sm); font-weight: 600; }
.hg-dive-title { margin: 4px 0 0; color: var(--secondary-accent); font-weight: 700; font-size: var(--fs-sm); }
.hg-dive-chart { margin: 14px 0 0; }
.hg-dive-chart .hg-spark { width: 100%; height: 48px; }
.hg-dive-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0; }
.hg-dive-stats dt { color: var(--muted); font-size: var(--fs-xs); }
.hg-dive-stats dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.hg-dive blockquote { margin: 12px 0; padding: 8px 0 8px 14px; border-inline-start: 3px solid var(--primary); color: var(--foreground-secondary); font-size: var(--fs-sm); line-height: 1.6; }
.hg-dive p { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.6; }

/* --- /viral: the newcomer cohort ------------------------------------------------------- */

.hg-newcomer-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.hg-newcomer { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.hg-newcomer header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.hg-newcomer h3 { margin: 0; font-size: var(--fs-lg); }
.hg-rank-pill { padding: 1px 8px; border-radius: 999px; background: var(--primary-subtle); color: var(--primary); font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.hg-newcomer-weeks { color: var(--muted); font-size: var(--fs-xs); }
.hg-newcomer-mech { margin: 0; color: var(--foreground-secondary); font-size: var(--fs-sm); line-height: 1.5; }
.hg-newcomer-facts { display: grid; gap: 8px; margin: 0; }
.hg-newcomer-facts dt { color: var(--muted); font-size: var(--fs-xs); }
.hg-newcomer-facts dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- /viral: churn, recombination, playbook -------------------------------------------- */

.hg-survivors { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.hg-survivors li { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: var(--fs-sm); font-weight: 600; }

.hg-matrix { min-width: 720px; }
.hg-matrix-head { white-space: nowrap; font-size: var(--fs-xs); color: var(--foreground-secondary); }
.hg-matrix td { text-align: center; font-variant-numeric: tabular-nums; }
.hg-matrix-empty { color: var(--muted); background: var(--background-secondary); }

.hg-gaps { margin-top: 20px; padding: 18px 20px; border: 1px dashed var(--control-border); border-radius: var(--radius); }
.hg-gaps h3 { margin: 0 0 10px; font-size: var(--fs-lg); }
.hg-gaps ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.hg-gaps li { padding: 6px 12px; border-radius: 999px; background: var(--primary-subtle); color: var(--primary); font-size: var(--fs-sm); }
.hg-gaps p { margin: 0; color: var(--foreground-secondary); font-size: var(--fs-sm); line-height: 1.6; }

.hg-steps { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: hg-step; }
.hg-steps li { position: relative; padding: 16px 20px 16px 56px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); counter-increment: hg-step; }
.hg-steps li::before { content: counter(hg-step); position: absolute; inset-inline-start: 18px; inset-block-start: 16px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--primary-subtle); color: var(--primary); font-size: var(--fs-xs); font-weight: 800; }
.hg-steps strong { display: block; margin-bottom: 4px; font-size: var(--fs-md); }
.hg-steps p { margin: 0; color: var(--foreground-secondary); font-size: var(--fs-sm); line-height: 1.6; }

.hg-cta-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hg-cta-links .btn { text-decoration: none; }

@media (max-width: 720px) {
  /* The tables keep their min-width and scroll inside .million-table-wrap: squeezing nine
     columns into 360px would turn the date and traffic cells into unreadable wraps. */
  .hg-mechanic,
  .hg-note { max-width: none; }
  .hg-dive,
  .hg-newcomer { padding: 16px; }
  .hg-dive-grid { grid-template-columns: 1fr; }
  .hg-bubble li { width: 100%; }
}