/* TASK-0970 (owner 20.10.2026): page width 1070 px, ranking rows half as tall.
   Loaded after styles.css (the owner's, unchanged) and additions.css (TASK-0966, unchanged).
   Width applies everywhere; the compact row only in the desktop row layout (>= 1200 px) —
   the owner's tablet and phone layouts (< 1200 px) keep their own rules. Owner's tokens only. */

/* --page-width (1070 px) lives in tokens.css since TASK-1244 */

/* 1) Content width 1070 px, centred: header content, hero, ranking, footer */
.site-header > .brand-line,
.site-header > .site-nav { max-width: var(--page-width); margin-inline: auto; }
.hero { max-width: calc(var(--page-width) + 52px); }
.ranking { max-width: calc(var(--page-width) + 52px); }
.page-footer { max-width: calc(var(--page-width) + 56px); }

/* 2) Compact desktop row: ~90 px instead of ~184 px */
@media (min-width: 1200px) {
  /* TASK-1033 (owner 20.10): column widths of the row and of the head bar. Above 1200 px the card is always
     1070 - 2 border = 1068 px wide (page width 1070), so fixed px are safe. Was the owner's 22 % 9.5 % … 14.3 %
     (235 | 101 120 107 114 131 107 | 153): the casino column had ~80 px of air while Licences («ACMA: not listed»
     ≈ 100 px nowrap in 85 px) and Load/Studios were squeezed. Now:
       casino 198 = 10 pad + 128 widest tile or fallback name («Golden Crown» 18 px ≈ 120) + 10 gap + 40 ring + 10 pad
       (a real logo is 44 × 602/256 ≈ 104 px wide, so a logo row has 22 px air each side);
       six value columns equal: (1068 − 198 − 146) / 6 ≈ 120.7 px each;
       actions 146 = 14 + 118 button (Visit + arrow + 18+ ≈ 112) + 14. */
  :root { --columns: 198px repeat(6, minmax(0, 1fr)) 146px; }
  .card-grid { min-height: 0; padding: 5px 0; align-items: center; }
  .card-grid > * { align-self: stretch; }

  /* casino: logo and score side by side, centred; the place is a tag on the logo (rank.css, TASK-1012), so the
     34 px left pad kept for the old digit is gone (TASK-1033) */
  .identity { flex-direction: row; gap: 10px; padding: 4px 10px; }
  .rank { top: 50%; left: 10px; transform: translateY(-50%); font-size: 13px; }
  .casino-logo.real { height: 44px; width: auto; max-width: 128px; flex: 0 1 auto; }
  .casino-logo.real img { border-radius: 8px; }
  .casino-logo.real .logo-fallback { font-size: 18px; }
  .score { margin-top: 0; gap: 4px; flex: 0 0 auto; }
  .score-ring { width: 40px; height: 40px; }
  .score-value { font-size: 15px; }
  .score-scale { font-size: 13px; }

  /* metrics: smaller numbers, chips and sparkline, tighter gaps */
  .metric { gap: 2px; padding: 2px 8px; }
  /* TASK-1053 (owner 20.10, variant Б of TASK-1041): the five numbers at the size of the score in the ring (15), one
     size for all — they were 20/18 and outshouted the logo and the 14 px Visit/Review */
  .metric-value, .metric-value.money, .metric-value.withdrawal { font-size: 15px; letter-spacing: -.015em; line-height: 1.25; }
  .metric-caption { font-size: 12px; line-height: 1.35; }
  .licence-stack { gap: 3px; }
  .chip { font-size: 11px; padding: 2px 8px; }
  .sparkline { height: 20px; max-width: 96px; }
  .studios { gap: 3px; }
  .studios .chip { max-width: 100px; }
  .more-studios { min-height: 24px; padding: 2px 10px; font-size: 13px; }

  /* withdrawal: the clock sits beside the value instead of above it */
  .metric.payout { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center;
                   align-items: center; column-gap: 5px; row-gap: 2px; }
  .metric.payout .clock-icon { width: 18px; height: 18px; margin: 0; }
  .metric.payout .metric-caption { grid-column: 1 / -1; }

  /* actions: same stack (Visit, Partner link · Ad · 18+, Review), lower buttons; tap targets stay >= 24 px */
  .actions { gap: 3px; padding: 0 14px; }
  .action-button { min-height: 28px; padding: 1px 10px; font-size: 14px; line-height: 1.25; border-radius: 8px; }
  .visit-button svg { width: 14px; height: 14px; }
  .partner-label { margin: 0; font-size: 10.5px; line-height: 1.3; }

  /* column heads: owner's variant B of TASK-0974 (20 Oct, TASK-0990) — dark purple-deep bar, white caps 12/800;
     a head may wrap, but "/ mo" is one unbreakable piece, so "AU SEARCHES / MO" breaks only before "/ MO" */
  .column-heads { padding: 12px 0; background: var(--purple-deep); color: var(--on-purple); font-size: 12px; font-weight: 800;
                  letter-spacing: .07em; text-transform: uppercase; align-items: center; }
  .column-heads span { padding: 0 6px; text-align: center; white-space: normal; line-height: 1.25; }
  /* "Casino" is centred over its column like the other heads (owner 20 Oct, TASK-1013) */
  .column-heads span:first-child { padding: 0 6px; text-align: center; }
  /* the unit is a span inside a head span (and its first child): the two rules above must not reach it */
  .column-heads span.unit.unit { padding: 0; text-align: inherit; white-space: nowrap; }

  .ranking-list { gap: 8px; }
  .casino-card { border-radius: 14px; }
}

/* TASK-1049 (owner 20.10, his choice B of TASK-0997): the labels (.chip — regulator in Licences, studios, the
   withdrawal method) are near-square with a light rounding, 4 px, instead of the 100 px pill of styles.css (the
   owner's file stays byte for byte). One token for every width; buttons, cards and the Load word chip unchanged. */
/* --radius-chip (4 px) lives in tokens.css since TASK-1244 */
.chip { border-radius: var(--radius-chip); }

/* TASK-1211 (owner 21.10: «при загрузке он как-то дергается»): a fallback that takes Manrope's room. Until Manrope
   (font-display: swap) arrives the text is drawn in the next family of the owner's stacks, Arial; Manrope 500 is ~4 %
   wider than Arial, so headings and paragraphs got one line more or less on the swap and everything below jumped
   (CLS on a slow phone up to 0.32 on the casinos registry). These faces rename the device's own Arial (Helvetica on
   Apple, Roboto on Android, Liberation Sans on Linux) scaled per weight to Manrope's width and line box:
   size-adjust = Manrope / Arial width of the site's real text at that weight, ascent/descent = Manrope's 1.07 / 0.30 em
   over it. Once Manrope is in, these faces draw only a character Manrope lacks. Measurements: docs/os/work/TASK-1211. */
@font-face{font-family:Arial;font-style:normal;font-weight:100 450;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans-Regular"),local("Helvetica"),local("Roboto"),local("Roboto-Regular");size-adjust:102.4%;ascent-override:104.5%;descent-override:29.3%;line-gap-override:0%}
@font-face{font-family:Arial;font-style:normal;font-weight:451 599;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans-Regular"),local("Helvetica"),local("Roboto"),local("Roboto-Regular");size-adjust:104.2%;ascent-override:102.7%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:Arial;font-style:normal;font-weight:600 649;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:98.8%;ascent-override:108.3%;descent-override:30.4%;line-gap-override:0%}
@font-face{font-family:Arial;font-style:normal;font-weight:650 749;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:100.1%;ascent-override:106.9%;descent-override:30.0%;line-gap-override:0%}
@font-face{font-family:Arial;font-style:normal;font-weight:750 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:101.7%;ascent-override:105.2%;descent-override:29.5%;line-gap-override:0%}