/* Competition Rules page (Oct 2026 re-outline): short, scannable sections,
   a jump menu, an Individual vs Scramble comparison, and compact tables.
   Builds on the shared .rules-* styles in styles.css. */

.rules-hero.rules-hero-compact { padding-top: 56px; margin-bottom: 22px; }
.rules-hero.rules-hero-compact h1 { font-size: clamp(44px, 7vw, 92px); line-height: .9; }
.rules-hero.rules-hero-compact p { font-size: 18px; }

/* Jump menu */
.rules-jump { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 12px; border: 1px solid var(--border); border-radius: 20px; background: rgba(8,10,14,.92); backdrop-filter: blur(10px); }
.rules-jump a { padding: 8px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--silver); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.rules-jump a:hover { border-color: var(--gold); color: var(--white); }

.rules-block { scroll-margin-top: 140px; }
.rules-block > .rules-block-body { padding: 26px 30px 30px; display: grid; gap: 22px; }
.rules-block h3 { margin: 0 0 12px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

/* At-a-glance tiles */
.rules-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rules-quick article { border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(0,0,0,.22); padding: 18px 20px; }
.rules-quick strong { display: block; margin-bottom: 6px; color: var(--white); font-size: 17px; letter-spacing: -.01em; }
.rules-quick p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Tag chips */
.rules-tag { display: inline-block; margin-right: 6px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.rules-tag.individual { background: rgba(47,124,255,.18); color: #8db8ff; }
.rules-tag.scramble { background: rgba(216,184,106,.18); color: var(--gold); }
.rules-tag.both { background: rgba(255,255,255,.12); color: var(--silver); }

/* Compare / data tables */
.rules-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; }
.rules-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.rules-table th, .rules-table td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; vertical-align: top; line-height: 1.5; }
.rules-table tr:last-child th, .rules-table tr:last-child td { border-bottom: 0; }
.rules-table thead th { background: rgba(255,255,255,.05); color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.rules-table tbody th { width: 17%; color: var(--white); font-size: 14px; font-weight: 800; }
.rules-table td { color: var(--silver); }
.rules-table td strong { color: var(--white); }
.rules-table .span-both { text-align: center; }

/* Compact bullet lists */
.rules-bullets { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rules-bullets li { position: relative; padding-left: 20px; color: var(--silver); font-size: 15px; line-height: 1.5; }
.rules-bullets li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.rules-bullets strong { color: var(--white); }
.rules-two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rules-two-col > div { border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(0,0,0,.22); padding: 20px 22px; }

/* Numbered steps */
.rules-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.rules-steps li { counter-increment: step; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(0,0,0,.22); padding: 18px 20px; color: var(--silver); font-size: 14px; line-height: 1.5; }
.rules-steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: var(--gold); color: #111; font-size: 13px; font-weight: 900; }
.rules-steps strong { display: block; margin-bottom: 4px; color: var(--white); font-size: 16px; }

.rules-note { margin: 0; padding: 14px 18px; border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; background: rgba(216,184,106,.07); color: var(--silver); font-size: 14px; line-height: 1.55; }
.rules-note strong { color: var(--white); }

@media (max-width: 1100px) {
  .rules-quick { grid-template-columns: repeat(2, 1fr); }
  .rules-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .rules-jump { position: static; }
  .rules-quick, .rules-steps, .rules-two-col { grid-template-columns: 1fr; }
  .rules-block > .rules-block-body { padding: 20px; }
}