#rds-r1 {
  --bg: #120c04;
  --bg-2: #1a130a;
  --bg-3: #221a0f;
  --gold: #c8a227;
  --gold-soft: #d4b347;
  --gold-dim: rgba(200,162,39,.35);
  --text: #f5efe2;
  --text-dim: #a89880;
  --border: rgba(200,162,39,.18);
  --live: #e74c3c;
  font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  color: var(--text);
  background: var(--bg);
  padding: 120px 0 80px;
  margin: 0;
  scroll-behavior: smooth;
  /* No contain/transform/filter here – those create a containing block for
     position:fixed and break the sticky-tabs JS fallback. */
}
#rds-r1 * { box-sizing: border-box; }
#rds-r1 .rds-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Back */
#rds-r1 .rds-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--text-dim); text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 28px;
  transition: color .15s, border-color .15s;
}
#rds-r1 .rds-back:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Hero */
#rds-r1 .rds-hero {
  margin: 0 0 32px;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--border);
}
#rds-r1 .rds-hero-brand {
  font-size: 12px; font-weight: 700; letter-spacing: .28em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 12px;
}
#rds-r1 .rds-hero-round {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700; margin-bottom: 14px;
}
#rds-r1 .rds-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--live); color: #fff;
  padding: 4px 10px; border-radius: 4px;
  font-size: 10px; letter-spacing: .14em; font-weight: 700;
}
#rds-r1 .rds-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: rds-pulse 1.4s ease-in-out infinite;
}
@keyframes rds-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
#rds-r1 .rds-hero-title-cn {
  font-size: 56px; font-weight: 800; color: var(--text); line-height: 1.05;
  letter-spacing: .02em; margin-bottom: 8px;
}
#rds-r1 .rds-hero-title-en {
  font-size: 15px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; margin-bottom: 28px;
}
#rds-r1 .rds-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px 48px;
  font-size: 13px;
  justify-content: start;
}
#rds-r1 .rds-hero-meta .item .label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 4px;
}
#rds-r1 .rds-hero-meta .item .val { color: var(--text); font-size: 14px; }

/* Tabs */
#rds-r1 .rds-tabs {
  position: sticky; top: 98px; z-index: 10;
  background: rgba(18,12,4,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 32px -24px 40px;
  padding: 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#rds-r1 .rds-tabs-inner {
  display: flex; gap: 4px;
  min-width: max-content;
}
#rds-r1 .rds-tab {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
#rds-r1 .rds-tab:hover { color: var(--text); background: rgba(200,162,39,.04); }
#rds-r1 .rds-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
#rds-r1 .rds-tab .cn { font-size: 14px; font-weight: 700; line-height: 1.1; }
#rds-r1 .rds-tab .en { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; line-height: 1.1; }

/* Section */
#rds-r1 .rds-section { scroll-margin-top: 180px; margin-bottom: 64px; }
#rds-r1 .rds-section-title {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 20px;
}
#rds-r1 .rds-section-title .cn {
  font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1.1;
}
#rds-r1 .rds-section-title .en {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim);
}
#rds-r1 .rds-section-sub {
  font-size: 12px; color: var(--text-dim);
  margin: -12px 0 20px;
  letter-spacing: .04em;
}

/* Table */
#rds-r1 .rds-table-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
#rds-r1 .rds-table-scroll { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
#rds-r1 table.rds-tbl {
  width: 100%; min-width: 800px;
  border-collapse: collapse;
  font-size: 13px;
}
#rds-r1 .rds-tbl thead th {
  background: var(--bg-3);
  color: var(--gold);
  font-weight: 700;
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
}
#rds-r1 .rds-tbl thead th .cn { display: block; font-size: 12px; font-weight: 700; }
#rds-r1 .rds-tbl thead th .en { display: block; font-size: 10px; opacity: .7; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }
#rds-r1 .rds-tbl tbody td {
  padding: 12px;
  border-bottom: 1px solid rgba(200,162,39,.06);
  vertical-align: middle;
}
#rds-r1 .rds-tbl tbody tr:hover { background: rgba(200,162,39,.04); }
#rds-r1 .rds-num { width: 60px; font-variant-numeric: tabular-nums; color: var(--gold-soft); font-weight: 600; }
#rds-r1 .rds-rank { width: 52px; text-align: center; font-weight: 700; font-size: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
#rds-r1 .rds-rank-gold .rds-rank { color: var(--gold); font-size: 17px; }
#rds-r1 .rds-rank-silver .rds-rank { color: #d8d8d8; font-size: 16px; }
#rds-r1 .rds-rank-bronze .rds-rank { color: #cd7f32; font-size: 16px; }
#rds-r1 .rds-rank-gold, #rds-r1 .rds-rank-silver, #rds-r1 .rds-rank-bronze {
  background: linear-gradient(90deg, rgba(200,162,39,.06), transparent);
}
#rds-r1 .rds-rank-top32 .rds-rank { color: var(--text); }
#rds-r1 .rds-rank-out { opacity: .55; }
#rds-r1 .rds-driver-cell { display: flex; align-items: center; gap: 12px; min-width: 180px; }
#rds-r1 .rds-flag { width: 24px; height: auto; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
#rds-r1 .rds-name-cn { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
#rds-r1 .rds-name-en { font-size: 11px; color: var(--text-dim); line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; margin-top: 2px; }
#rds-r1 .rds-name-en-only { font-size: 13px; color: var(--text); font-weight: 700; letter-spacing: .02em; }
#rds-r1 .rds-team-cell { font-size: 12px; color: var(--text-dim); max-width: 240px; }
#rds-r1 .rds-car-cell { font-size: 12px; color: var(--text); }
#rds-r1 .rds-engine { font-size: 12px; color: var(--text-dim); }
#rds-r1 .rds-att { width: 70px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
#rds-r1 .rds-best { width: 80px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; font-size: 15px; }
#rds-r1 .rds-pts { width: 70px; text-align: center; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; font-size: 15px; }
#rds-r1 .rds-zero { color: rgba(168,152,128,.35); font-weight: 400; }

/* Top-32 separator */
#rds-r1 .rds-cutoff td {
  background: var(--bg-3) !important;
  padding: 8px 12px !important;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; text-align: center;
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
}

/* Placeholder for upcoming */
#rds-r1 .rds-placeholder {
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
}
#rds-r1 .rds-placeholder .ph-icon { font-size: 32px; margin-bottom: 12px; opacity: .6; }
#rds-r1 .rds-placeholder .ph-cn { font-size: 18px; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
#rds-r1 .rds-placeholder .ph-en { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
#rds-r1 .rds-placeholder .ph-note { margin-top: 16px; font-size: 12px; color: var(--text-dim); }

/* Footer */
#rds-r1 .rds-foot {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-dim);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
#rds-r1 .rds-foot a { color: var(--gold); text-decoration: none; }

/* Mobile */
@media (max-width: 720px) {
  #rds-r1 { padding: 110px 0 56px; }
  #rds-r1 .rds-wrap { padding: 0 16px; }
  #rds-r1 .rds-hero { margin: 0 0 24px; padding: 0 0 24px; }
  #rds-r1 .rds-hero-brand { font-size: 10px; letter-spacing: .22em; margin-bottom: 10px; }
  #rds-r1 .rds-hero-round {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    font-size: 10px; letter-spacing: .18em; margin-bottom: 12px;
  }
  #rds-r1 .rds-live-badge { font-size: 9px; padding: 3px 8px; }
  #rds-r1 .rds-hero-title-cn { font-size: 40px; margin-bottom: 6px; }
  #rds-r1 .rds-hero-title-en { font-size: 11px; letter-spacing: .22em; margin-bottom: 20px; }
  #rds-r1 .rds-hero-meta {
    grid-template-columns: 1fr; gap: 14px 0;
    padding-top: 16px; border-top: 1px solid var(--border);
  }
  #rds-r1 .rds-hero-meta .item .label { margin-bottom: 2px; }
  #rds-r1 .rds-hero-meta .item .val { font-size: 13px; }
  #rds-r1 .rds-tabs { margin: 24px -16px 32px; padding: 0 16px; }
  #rds-r1 .rds-tab { padding: 12px 14px; }
  #rds-r1 .rds-section-title .cn { font-size: 22px; }
  #rds-r1 table.rds-tbl { min-width: 0; width: 100%; font-size: 12px; table-layout: auto; }
  #rds-r1 .rds-tbl thead th, #rds-r1 .rds-tbl tbody td { padding: 10px 6px; }
  /* Entry table (5 cols): keep № · Driver · Car; hide Team(3) + Engine(5) */
  #rds-r1 #sec-entry .rds-tbl thead th:nth-child(3),
  #rds-r1 #sec-entry .rds-tbl tbody td:nth-child(3),
  #rds-r1 #sec-entry .rds-tbl thead th:nth-child(5),
  #rds-r1 #sec-entry .rds-tbl tbody td:nth-child(5) { display: none; }
  /* Quali table (7 cols): keep Rank · № · Driver · Best · Pts; hide Att1(4) + Att2(5) */
  #rds-r1 #sec-quali .rds-tbl thead th:nth-child(4),
  #rds-r1 #sec-quali .rds-tbl tbody td:nth-child(4),
  #rds-r1 #sec-quali .rds-tbl thead th:nth-child(5),
  #rds-r1 #sec-quali .rds-tbl tbody td:nth-child(5) { display: none; }
}

/* Sticky-tabs JS-fallback: when Tilda parent wrapper kills position:sticky,
   we fall back to position:fixed via JS-added class. */
#rds-r1 .rds-tabs.is-fixed {
  position: fixed; top: 98px; left: 0; right: 0; z-index: 100;
  margin: 0; padding-left: 16px; padding-right: 16px;
  background: #120c04;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
#rds-r1 .rds-tabs.is-fixed .rds-tabs-inner {
  max-width: 1280px; margin: 0 auto;
}
#rds-r1 .rds-tabs-placeholder { display: none; }
#rds-r1 .rds-tabs-placeholder.is-active { display: block; }

/* ============================== Tandem bracket ============================ */
/* Meta strip */
#rds-r1 .rds-bracket-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
#rds-r1 .rds-bracket-meta .item .lbl {
  display: block;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 2px;
}
#rds-r1 .rds-bracket-meta .item .val { color: var(--text); }

/* Stage legend chips */
#rds-r1 .rds-bracket-legend {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px;
  font-size: 11px; letter-spacing: .04em;
}
#rds-r1 .rds-bracket-legend .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text-dim);
}
#rds-r1 .rds-bracket-legend .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-dim);
}
#rds-r1 .rds-bracket-legend .dot.live { background: var(--live); box-shadow: 0 0 0 3px rgba(231,76,60,.15); }
#rds-r1 .rds-bracket-legend .dot.decided { background: var(--gold); }
#rds-r1 .rds-bracket-legend .dot.tbd { background: var(--text-dim); opacity: .5; }

/* ----- Pair card (used in Top32/Top16/Top8) -----
   Fixed height = 26 (head) + 38 + 38 + 1 = 103px. Critical for stage centering. */
#rds-r1 .bp {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  min-height: 103px;
}
#rds-r1 .bp + .bp { margin-top: 0; }
#rds-r1 .bp[data-status="decided"] { border-color: rgba(200,162,39,.45); }
#rds-r1 .bp[data-live="true"] { border-color: var(--live); box-shadow: 0 0 0 1px rgba(231,76,60,.2); }
#rds-r1 .bp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px;
  background: rgba(200,162,39,.05);
  border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}
#rds-r1 .bp-head .bp-code { color: var(--gold); font-weight: 700; }
#rds-r1 .bp-head .bp-live {
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  background: var(--live); color: #fff; font-weight: 700; letter-spacing: .1em;
  animation: rds-pulse 1.4s ease-in-out infinite;
}
@keyframes rds-pulse {
  0%,100% { opacity: 1; } 50% { opacity: .55; }
}
#rds-r1 .bp .bd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  height: 38px;
  box-sizing: border-box;
}
#rds-r1 .bp .bd + .bp-vs + .bd { border-top: 1px solid var(--border); }
#rds-r1 .bp .bd-seed {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  font-size: 10px; font-weight: 700;
  background: rgba(200,162,39,.12); color: var(--gold);
  border-radius: 4px;
}
#rds-r1 .bp .bd-flag .rds-flag,
#rds-r1 .bp .rds-flag {
  width: 20px; height: 13px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  flex-shrink: 0;
}
#rds-r1 .bp .bd-num { color: var(--gold-soft); font-weight: 700; font-size: 11px; min-width: 36px; }
#rds-r1 .bp .bd-name { display: flex; flex-direction: column; gap: 0; line-height: 1.15; flex: 1; min-width: 0; }
#rds-r1 .bp .bn-cn { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rds-r1 .bp .bn-en { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rds-r1 .bp .bn-en-only { font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#rds-r1 .bp .bd.bd-tbd {
  color: var(--text-dim);
  min-height: 38px;
  gap: 8px;
}
#rds-r1 .bp .bd-tbd .bd-tbd-cn { font-size: 12px; color: var(--text-dim); font-style: italic; }
#rds-r1 .bp .bd-tbd .bd-tbd-code {
  font-size: 10px; letter-spacing: .06em; color: var(--gold);
  background: rgba(200,162,39,.08);
  padding: 2px 6px; border-radius: 3px;
  font-weight: 700;
}
#rds-r1 .bp .bp-vs {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px; letter-spacing: .14em; font-weight: 700;
  color: var(--gold); background: var(--bg);
  padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--gold-dim);
  margin-top: 8px; /* offset for header */
}

/* ============================== DESKTOP layout ============================ */
/* Foldable mirrored bracket. The active stage column shows full pairs;
   the rest collapse into compact rails (flag + #num stacked vertically).
   Center column (Top 4 round-robin) is always full.

   Pair heights (used to compute gap formulas):
     full    = 103px (26 head + 38 + 38 + 1)
     compact = 60px  (18 head + 20 + 20 + ~2)

   To keep pair-to-pair vertical alignment across stages we use a single
   "unit step" U per active-stage state, and compute gaps so a Top16 pair
   sits halfway between its two Top32 sources, a Top8 between its two Top16,
   and so on. U = (current-stage pair height) + (current-stage gap).
*/
#rds-r1 .rds-bracket-desktop {
  display: grid;
  /* Column widths morph with active stage – see overrides below. */
  grid-template-columns:
    var(--col-t32, 200px)
    var(--col-t16, 80px)
    var(--col-t8,  80px)
    var(--col-c,   280px)
    var(--col-t8,  80px)
    var(--col-t16, 80px)
    var(--col-t32, 200px);
  gap: 18px;
  align-items: start;
}
#rds-r1 .rds-stage-col { display: flex; flex-direction: column; min-width: 0; }
/* Central round-robin column is vertically centered inside the bracket grid. */
#rds-r1 .rds-stage-col[data-side="c"] { align-self: center; }
#rds-r1 .rds-stage-col .stage-h {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold);
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  white-space: nowrap;
  cursor: pointer; /* will become clickable in step 2 */
  user-select: none;
  transition: color .2s ease, border-color .2s ease;
}
#rds-r1 .rds-stage-col .stage-h .cn { display: inline-block; margin-right: 6px; color: var(--text); }
#rds-r1 .rds-stage-col .pair-list { display: flex; flex-direction: column; }

/* ---- Pair compact mode ----
   When a column is compact, pairs render as a small vertical stack:
   header chip (code) + two driver rows showing only flag + #num.
*/
#rds-r1 .rds-stage-col[data-mode="compact"] .bp {
  min-height: 60px;
  /* compact pairs are narrow chips, content-sized – no stretching */
  width: 64px;
  align-self: center;
}
#rds-r1 .rds-stage-col[data-mode="compact"] .bp-head {
  padding: 2px 4px;
  font-size: 9px;
  letter-spacing: .04em;
  justify-content: center;
  text-align: center;
}
#rds-r1 .rds-stage-col[data-mode="compact"] .bp-head .bp-live { font-size: 8px; padding: 0 4px; }
/* Force compact rows centered regardless of left/right side */
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bd {
  height: 20px;
  padding: 2px 4px;
  font-size: 10px;
  gap: 4px;
  flex-direction: row;
  text-align: center;
  justify-content: center;
}
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bd-seed { display: none; }
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bd-name { display: none; }
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bd-num { font-size: 10px; min-width: 0; }
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bd-flag .rds-flag,
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .rds-flag { width: 14px; height: 10px; }
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bp-vs { display: none; }
/* TBD plates in compact: single line with code chip only */
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bd-tbd .bd-tbd-cn { display: none; }
#rds-r1 .rds-stage-col[data-mode="compact"] .bp .bd-tbd .bd-tbd-code {
  font-size: 9px; padding: 1px 4px;
}
/* Center stage header for compact columns too */
#rds-r1 .rds-stage-col[data-mode="compact"] .stage-h { text-align: center; }

/* ---- Gap formulas per active stage ----
   We compute gaps so that each pair in a later stage centers between
   its two source pairs. Step = pair_height + gap of that stage.

   ACTIVE = T32 (default)
   T32 full (103px), gap 4 → step32 = 107
   T16 compact (60px), step16 = 2*107 = 214 → gap16 = 154, padding = (214-60)/2 = 77
   T8  compact (60px), step8  = 4*107 = 428 → gap8  = 368, padding = (428-60)/2 + 60/2... actually 1.5*step32 - head
     For 8 we want pair k of T8 to sit between T16 pair (2k-1) and 2k.
     T16 pair 1 center = padding16 + 60/2 = 77+30 = 107. T16 pair 2 center = 107 + 214 = 321.
     T8  pair 1 center should be (107+321)/2 = 214 → padding8 = 214 - 30 = 184.
     T8  step = 4*step32 = 428 → gap8 = 428 - 60 = 368.
*/
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] {
  --col-t32: minmax(180px, 1.05fr);
  --col-t16: 72px;
  --col-t8:  72px;
  --col-c:   144px;
}
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t32"][data-side]:not([data-side="c"]) { }
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t32"] .pair-list { gap: 4px; padding-top: 0; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t16"] .pair-list { gap: 154px; padding-top: 77px; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t8"]  .pair-list { gap: 368px; padding-top: 184px; }

/* ACTIVE = T16
   T32 compact (60px), gap 4 → step32 = 64. 16 pairs total.
   T16 full (103px). We want T16 pair k centered between T32 pairs (2k-1) and 2k.
     T32 pair 1 center = 0 + 60/2 = 30. T32 pair 2 center = 64 + 30 = 94.
     T16 pair 1 center = (30+94)/2 = 62 → padding16 = 62 - 103/2 = 10.5 → 11px.
     T16 step = 2*step32 = 128. gap16 = 128 - 103 = 25.
   T8 compact (60px). T8 pair k between T16 (2k-1) and 2k.
     T16 pair 1 center = 11 + 51.5 = 62.5. T16 pair 2 center = 62.5 + 128 = 190.5.
     T8 pair 1 center = (62.5+190.5)/2 = 126.5 → padding8 = 126.5 - 30 = 96.5 ≈ 97px.
     T8 step = 4*step32 = 256. gap8 = 256 - 60 = 196.
*/
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] {
  --col-t32: 72px;
  --col-t16: minmax(180px, 1.05fr);
  --col-t8:  72px;
  --col-c:   144px;
}
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] [data-stage="t32"] .pair-list { gap: 4px; padding-top: 0; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] [data-stage="t16"] .pair-list { gap: 25px; padding-top: 11px; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] [data-stage="t8"]  .pair-list { gap: 196px; padding-top: 97px; }

/* ACTIVE = T8
   T32 compact, step32 = 64. T16 compact (60px). T16 step = 2*64 = 128, gap16 = 128-60 = 68, padding16 = (128-60)/2 = 34.
   T8 full (103px). T8 step = 4*step32 = 256. gap8 = 256 - 103 = 153.
     padding8: T16 pair 1 center = 34 + 30 = 64. T16 pair 2 center = 64 + 128 = 192.
     T8 pair 1 center = (64+192)/2 = 128 → padding8 = 128 - 51.5 = 76.5 ≈ 77px.
*/
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"] {
  --col-t32: 72px;
  --col-t16: 72px;
  --col-t8:  minmax(180px, 1fr);
  --col-c:   144px;
}
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"] [data-stage="t32"] .pair-list { gap: 4px; padding-top: 0; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"] [data-stage="t16"] .pair-list { gap: 68px; padding-top: 34px; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"] [data-stage="t8"]  .pair-list { gap: 153px; padding-top: 77px; }

/* ACTIVE = T4
   All knockout stages compact. T32 step = 64. T16 step = 128. T8 step = 256.
*/
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"] {
  --col-t32: 72px;
  --col-t16: 72px;
  --col-t8:  72px;
  --col-c:   minmax(320px, 1.3fr);
}
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"] [data-stage="t32"] .pair-list { gap: 4px; padding-top: 0; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"] [data-stage="t16"] .pair-list { gap: 68px; padding-top: 34px; }
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"] [data-stage="t8"]  .pair-list { gap: 196px; padding-top: 97px; }

/* Center column – in non-top4 states show the "FINAL BATTLE" capsule,
   hide both the RR block and the small stage-h header. In top4 state
   show the RR block + stage-h, hide the capsule. */
#rds-r1 .rds-bracket-desktop:not([data-active-stage="top4"]) [data-stage="t4"] .rr-center-premium {
  display: none;
}
#rds-r1 .rds-bracket-desktop:not([data-active-stage="top4"]) [data-stage="t4"] .stage-h {
  display: none;
}
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"] [data-stage="t4"] .rr-capsule {
  display: none;
}

/* ===== TOP-4 "FINAL BATTLE" capsule (non-top4 states only) =====
   "Pillar Trophy" – vertical premium stele with the RoyalDS crown,
   engraved hairline frame, gold halo on hover. Focal point of the bracket. */
#rds-r1 .rr-capsule {
  align-self: center;
  width: 132px;
  margin: 0 auto;
  padding: 20px 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,162,39,.16) 0%, transparent 65%),
    linear-gradient(180deg, rgba(38,28,12,.96) 0%, rgba(22,15,6,.96) 100%);
  border: 1px solid rgba(200,162,39,.42);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,220,130,.14),
    inset 0 -1px 0 rgba(200,162,39,.10),
    0 14px 36px -18px rgba(0,0,0,.7);
  text-align: center !important;
  position: relative;
  cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
#rds-r1 .rr-capsule::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(200,162,39,.18);
  border-radius: 10px;
  pointer-events: none;
  transition: border-color .3s ease;
}
#rds-r1 .rr-capsule::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(200,162,39,.22) 12%,
    rgba(200,162,39,.10) 50%,
    rgba(200,162,39,.22) 88%,
    transparent 100%);
  pointer-events: none;
  opacity: .55;
  transition: opacity .3s ease;
}
#rds-r1 .rds-stage-col[data-stage="t4"]:hover .rr-capsule {
  border-color: rgba(200,162,39,.80);
  box-shadow:
    inset 0 1px 0 rgba(255,220,130,.22),
    inset 0 -1px 0 rgba(200,162,39,.18),
    0 0 0 1px rgba(200,162,39,.22),
    0 0 32px -2px rgba(200,162,39,.28),
    0 18px 44px -16px rgba(0,0,0,.8);
  transform: translateY(-2px);
}
#rds-r1 .rds-stage-col[data-stage="t4"]:hover .rr-capsule::before {
  border-color: rgba(200,162,39,.35);
}
#rds-r1 .rds-stage-col[data-stage="t4"]:hover .rr-capsule::after {
  opacity: .85;
}
#rds-r1 .rr-capsule-crown {
  width: 56px; height: 40px;
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 2px 0 6px;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 1px 0 rgba(255,220,130,.25))
    drop-shadow(0 4px 10px rgba(200,162,39,.20));
  transition: filter .3s ease, transform .3s ease;
}
#rds-r1 .rds-stage-col[data-stage="t4"]:hover .rr-capsule-crown {
  filter:
    drop-shadow(0 1px 0 rgba(255,220,130,.35))
    drop-shadow(0 6px 16px rgba(200,162,39,.42));
  transform: translateY(-1px) scale(1.04);
}
#rds-r1 .rr-capsule-crown-svg { width: 100%; height: 100%; display: block; }
#rds-r1 .rr-capsule-cn {
  font-size: 26px; line-height: 1.0; font-weight: 800;
  color: var(--text);
  letter-spacing: .08em;
  position: relative; z-index: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
#rds-r1 .rr-capsule-en {
  font-size: 9px; line-height: 1.2; font-weight: 700;
  color: var(--gold);
  letter-spacing: .28em; text-transform: uppercase;
  margin-top: 4px;
  position: relative; z-index: 1;
}
#rds-r1 .rr-capsule-divider {
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 8px 0 6px;
  position: relative; z-index: 1;
  opacity: .7;
}
#rds-r1 .rr-capsule-cn-sub {
  font-size: 12px; line-height: 1.15; font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .04em;
  position: relative; z-index: 1;
}
#rds-r1 .rr-capsule-en-sub {
  font-size: 8px; line-height: 1.2; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .22em; text-transform: uppercase;
  margin-top: 2px;
  opacity: .80;
  position: relative; z-index: 1;
}
#rds-r1 .rds-stage-col[data-stage="t4"] { cursor: pointer; }

/* Active stage header gets highlighted */
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t32"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] [data-stage="t16"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"]  [data-stage="t8"]  .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"]  [data-stage="t4"]  .stage-h {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t16"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t8"]  .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top32"] [data-stage="t4"]  .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] [data-stage="t32"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] [data-stage="t8"]  .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top16"] [data-stage="t4"]  .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"]  [data-stage="t32"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"]  [data-stage="t16"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top8"]  [data-stage="t4"]  .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"]  [data-stage="t32"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"]  [data-stage="t16"] .stage-h,
#rds-r1 .rds-bracket-desktop[data-active-stage="top4"]  [data-stage="t8"]  .stage-h {
  color: var(--text-dim);
}

/* Mirror right side: flip flag-num-name reading direction visually –
   we keep DOM order but right-align contents. Only applies to FULL mode;
   compact rows are centered (rule above already overrides this). */
#rds-r1 [data-stage-col$="-r"][data-mode="full"] .bp .bd { flex-direction: row-reverse; text-align: right; }
#rds-r1 [data-stage-col$="-r"][data-mode="full"] .bp .bd-name { align-items: flex-end; }
#rds-r1 [data-stage-col$="-r"][data-mode="full"] .bp-head { flex-direction: row-reverse; }

/* ============================ CENTER: Top 4 ============================== */
/* Premium round-robin block: matrix + combined standings + linear podium.
   Compact width (~260–320px), 3 sub-blocks separated by hair dividers.
*/
#rds-r1 .rr-center-premium {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,162,39,.06) 0%, transparent 60%),
    var(--bg-2);
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow:
    0 0 0 1px rgba(200,162,39,.06),
    0 10px 30px -12px rgba(0,0,0,.6) inset;
}
#rds-r1 .rr-block { display: flex; flex-direction: column; gap: 6px; }
#rds-r1 .rr-mini-title {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200,162,39,.18);
}
#rds-r1 .rr-mini-title .cn {
  color: var(--text); font-size: 11px; letter-spacing: .04em;
  text-transform: none; font-weight: 700;
}
#rds-r1 .rr-mini-title .en { opacity: .75; }

/* ----- Premium 4x4 matrix ----- */
#rds-r1 .rr-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 11px;
  table-layout: fixed;
}
#rds-r1 .rr-matrix th, #rds-r1 .rr-matrix td {
  width: 25%; height: 26px;
  text-align: center; vertical-align: middle;
  border-radius: 4px;
  position: relative;
  font-feature-settings: "tnum" 1;
}
#rds-r1 .rr-matrix th.rr-h {
  background: linear-gradient(180deg, rgba(200,162,39,.22) 0%, rgba(200,162,39,.10) 100%);
  color: var(--gold);
  font-weight: 700; font-size: 12px;
  letter-spacing: .06em;
  box-shadow: 0 0 0 1px rgba(200,162,39,.25) inset;
}
#rds-r1 .rr-matrix th.rr-corner {
  background: transparent; box-shadow: none;
}
#rds-r1 .rr-matrix td.rr-self {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(200,162,39,.05) 0 4px,
      transparent 4px 8px
    ),
    var(--bg-3);
  color: transparent;
  box-shadow: 0 0 0 1px rgba(200,162,39,.10) inset;
}
#rds-r1 .rr-matrix td.rr-self::after {
  content: "•";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(200,162,39,.45); font-size: 12px;
}
#rds-r1 .rr-matrix td.rr-cell {
  background: var(--bg-3);
  color: var(--text-dim);
  box-shadow: 0 0 0 1px rgba(200,162,39,.06) inset;
  transition: background .2s ease, box-shadow .2s ease;
}
#rds-r1 .rr-matrix td.rr-cell[data-status="decided"] {
  background:
    linear-gradient(180deg, rgba(200,162,39,.22) 0%, rgba(200,162,39,.10) 100%),
    var(--bg-3);
  box-shadow:
    0 0 0 1px rgba(200,162,39,.45) inset,
    0 2px 8px -2px rgba(200,162,39,.20);
}
#rds-r1 .rr-matrix td.rr-cell[data-live="true"] {
  background:
    linear-gradient(180deg, rgba(231,76,60,.25) 0%, rgba(231,76,60,.12) 100%),
    var(--bg-3);
  box-shadow:
    0 0 0 1px rgba(231,76,60,.55) inset,
    0 0 12px rgba(231,76,60,.25);
  animation: rds-pulse 1.6s ease-in-out infinite;
}
#rds-r1 .rr-matrix .rr-cell-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: .02em; color: var(--gold-soft); opacity: .55;
}
#rds-r1 .rr-matrix .rr-cell-w { color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: .04em; }
#rds-r1 .rr-matrix .rr-cell-l { color: var(--text-dim); font-weight: 600; font-size: 12px; }
#rds-r1 .rr-matrix .rr-cell-d { color: var(--text); font-weight: 700; font-size: 12px; }

/* ----- Combined slots+standings table ----- */
#rds-r1 .rr-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-feature-settings: "tnum" 1;
}
#rds-r1 .rr-standings thead th {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(200,162,39,.18);
  text-align: center;
}
#rds-r1 .rr-standings thead th.th-driver {
  text-align: left; padding-left: 4px;
}
#rds-r1 .rr-standings thead th.th-driver .th-en {
  margin-left: 4px; opacity: .55; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}
#rds-r1 .rr-standings tbody td {
  padding: 5px 2px;
  text-align: center;
  border-bottom: 1px solid rgba(200,162,39,.06);
  color: var(--text);
  vertical-align: middle;
}
#rds-r1 .rr-standings tbody td.rr-st-rank { color: var(--text-dim); font-weight: 700; width: 20px; }
#rds-r1 .rr-standings tbody td.rr-st-slot { width: 24px; }
#rds-r1 .rr-standings tbody td.rr-st-slot .rr-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-weight: 800; font-size: 10px;
  background: linear-gradient(180deg, var(--gold) 0%, #a8861e 100%);
  color: var(--bg);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
#rds-r1 .rr-standings tbody td.rr-st-driver {
  text-align: left;
  padding-left: 4px;
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-flag .rds-flag,
#rds-r1 .rr-standings tbody td.rr-st-driver .rds-flag {
  width: 16px; height: 11px; object-fit: cover; border-radius: 2px;
  vertical-align: middle; margin-right: 4px;
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-flag-tbd {
  display: inline-block; width: 16px; height: 11px;
  margin-right: 4px; vertical-align: middle;
  border: 1px dashed rgba(200,162,39,.25); border-radius: 2px;
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-num {
  color: var(--gold-soft); font-weight: 700; margin-right: 4px;
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-name { display: inline; }
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-bn-cn {
  font-size: 11px; font-weight: 600; color: var(--text);
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-bn-en {
  font-size: 9px; color: var(--text-dim); margin-left: 4px;
  letter-spacing: .04em; text-transform: uppercase;
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-bn-en-only {
  font-size: 11px; color: var(--text); text-transform: none; letter-spacing: 0;
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-tbd-text {
  color: var(--text-dim); font-style: italic; font-size: 10px;
}
#rds-r1 .rr-standings tbody td.rr-st-driver .rr-tbd-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 9px; color: var(--gold); opacity: .8;
  padding: 1px 4px; background: rgba(200,162,39,.08); border-radius: 3px;
  margin-left: 2px;
}
#rds-r1 .rr-standings tbody td.rr-st-w,
#rds-r1 .rr-standings tbody td.rr-st-d,
#rds-r1 .rr-standings tbody td.rr-st-l {
  width: 24px; color: var(--text-dim);
}
#rds-r1 .rr-standings tbody td.rr-st-p {
  width: 30px; font-weight: 800; color: var(--gold-soft);
  background: rgba(200,162,39,.04);
}
#rds-r1 .rr-standings tbody tr.rds-rank-gold td.rr-st-rank,
#rds-r1 .rr-standings tbody tr.rds-rank-gold td.rr-st-p { color: #f4d666; }
#rds-r1 .rr-standings tbody tr.rds-rank-silver td.rr-st-rank,
#rds-r1 .rr-standings tbody tr.rds-rank-silver td.rr-st-p { color: #d9d9d9; }
#rds-r1 .rr-standings tbody tr.rds-rank-bronze td.rr-st-rank,
#rds-r1 .rr-standings tbody tr.rds-rank-bronze td.rr-st-p { color: #c98a55; }

/* ----- Linear podium (one row) ----- */
#rds-r1 .rr-podium {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
#rds-r1 .pod {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 7px;
  background: var(--bg-3);
  border: 1px solid rgba(200,162,39,.18);
  border-radius: 5px;
  min-height: 32px;
}
#rds-r1 .pod[data-pos="p1"] {
  background: linear-gradient(180deg, rgba(244,214,102,.08) 0%, rgba(244,214,102,.02) 100%), var(--bg-3);
  border-color: rgba(244,214,102,.35);
}
#rds-r1 .pod[data-pos="p2"] {
  background: linear-gradient(180deg, rgba(217,217,217,.06) 0%, rgba(217,217,217,.02) 100%), var(--bg-3);
  border-color: rgba(217,217,217,.25);
}
#rds-r1 .pod[data-pos="p3"] {
  background: linear-gradient(180deg, rgba(201,138,85,.06) 0%, rgba(201,138,85,.02) 100%), var(--bg-3);
  border-color: rgba(201,138,85,.25);
}
#rds-r1 .pod .pod-medal { font-size: 14px; line-height: 1; flex-shrink: 0; }
#rds-r1 .pod .pod-place {
  display: flex; flex-direction: column; line-height: 1; gap: 1px;
  flex-shrink: 0; min-width: 14px;
}
#rds-r1 .pod .pod-place .pod-cn { font-size: 11px; color: var(--text); font-weight: 700; }
#rds-r1 .pod .pod-place .pod-en {
  font-size: 7px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
#rds-r1 .pod .pod-driver { display: inline-flex; align-items: center; gap: 3px; min-width: 0; flex: 1; }
#rds-r1 .pod .pod-driver .rds-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
#rds-r1 .pod .pod-driver .pod-num { color: var(--gold-soft); font-weight: 700; font-size: 10px; }
#rds-r1 .pod .pod-tbd { color: var(--text-dim); opacity: .4; font-size: 11px; }

/* ============================== MOBILE layout ============================ */
/* Horizontal-scroll classic bracket: 4 columns Top32 → Top16 → Top8 → Top4 */
#rds-r1 .rds-bracket-mobile { display: none; }
#rds-r1 .rds-bracket-mobile-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}
#rds-r1 .rds-bracket-mobile-grid {
  display: grid;
  grid-template-columns: 240px 220px 220px 260px;
  gap: 8px;
  align-items: start;
  min-width: 960px;
}
#rds-r1 .rds-bracket-mobile-grid .rds-stage-col { scroll-snap-align: start; }
#rds-r1 .rds-bracket-mobile-grid [data-stage-col="m-t32"] .pair-list { gap: 6px; }
#rds-r1 .rds-bracket-mobile-grid [data-stage-col="m-t16"] .pair-list { gap: 76px; padding-top: 36px; }
#rds-r1 .rds-bracket-mobile-grid [data-stage-col="m-t8"] .pair-list { gap: 232px; padding-top: 108px; }
#rds-r1 .rds-bracket-mobile-hint {
  display: none;
  font-size: 11px; color: var(--text-dim);
  margin: 0 0 8px;
  padding: 6px 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 5px;
}
#rds-r1 .rds-bracket-mobile-hint .arrow { color: var(--gold); }

/* Note block */
#rds-r1 .rds-bracket-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
#rds-r1 .rds-bracket-note .cn { display: block; color: var(--text); font-size: 13px; margin-bottom: 4px; }

/* Breakpoint: switch desktop → mobile.
   1280 because 7-col layout needs at least ~1240px to read comfortably. */
@media (max-width: 1280px) {
  #rds-r1 .rds-bracket-desktop { display: none; }
  #rds-r1 .rds-bracket-mobile { display: block; }
  #rds-r1 .rds-bracket-mobile-hint { display: block; }
}
@media (max-width: 720px) {
  #rds-r1 .rds-bracket-mobile-grid {
    grid-template-columns: 220px 200px 200px 240px;
    min-width: 880px;
  }
  #rds-r1 .bp .bd { padding: 8px 8px; font-size: 11px; min-height: 34px; }
  #rds-r1 .bp .bn-cn { font-size: 11px; }
  #rds-r1 .bp .bp-vs { font-size: 7px; padding: 1px 4px; }
  #rds-r1 .rds-bracket-meta { font-size: 11px; gap: 12px; padding: 10px 12px; }
  #rds-r1 .rr-podium { grid-template-columns: 1fr; }
}