/* Driver-reference visual hierarchy; intentionally scoped away from heroes. */
.rules-hub {--rule-line:#57d9f5;--rule-angle:#ff72b4;--rule-style:#bda3ff;--rule-warning:#f5d276}
.rules-hub :is(p,h3,aside)[id] {scroll-margin-top:110px}
.rules-hub :is(a,button,input):focus-visible {outline:2px solid var(--volt);outline-offset:5px}
.score-composition {display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:28px;margin:32px 0}
.score-ring {aspect-ratio:1;border-radius:50%;padding:17px;background:conic-gradient(var(--rule-line) 0 30%,var(--rule-angle) 30% 60%,var(--rule-style) 60% 100%);box-shadow:0 0 0 8px #ffffff04}
.score-ring>div {height:100%;border-radius:50%;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px}
.score-ring strong {font:800 3.4rem/.95 var(--f-display)}
.score-ring span {font:600 .66rem/1.5 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;margin-top:10px}
.rules-hub .rules-score-grid {gap:12px;align-items:stretch}
.rules-hub .rules-score {--score-accent:var(--rule-line);border:1px solid #ffffff15;border-top:3px solid var(--score-accent);border-radius:3px;padding:20px;display:flex;flex-direction:column;background:linear-gradient(150deg,#20202b,#101017)}
.rules-hub .rules-score:nth-child(2) {--score-accent:var(--rule-angle)}
.rules-hub .rules-score:nth-child(3) {--score-accent:var(--rule-style)}
.rules-hub .rules-score h3 {font-size:1.65rem}
.rules-hub .rules-score .score-value {font:800 3.2rem/1 var(--f-display);color:var(--score-accent)}
.rules-hub .score-value small {font:500 .65rem/1.4 var(--f-mono);text-align:right;text-transform:uppercase;margin:2px 0 0;color:var(--smoke)}
.rules-hub .rules-score p {font-size:.98rem;line-height:1.6}
.rules-hub .rules-score>small {font-size:.82rem;color:var(--smoke);margin-bottom:12px}
.rules-score .score-source {font:600 .78rem/1.5 var(--f-mono);color:var(--score-accent);margin-top:auto;padding-top:18px;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.rule-mode-links {display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line);margin:24px 0}
.rule-mode-links a {display:grid;gap:7px;padding:22px 24px 22px 0}
.rule-mode-links a+a {border-left:1px solid var(--line);padding-left:24px}
.rule-mode-links span {font:600 .74rem var(--f-mono);color:var(--rule-line);text-transform:uppercase;letter-spacing:.12em}
.rule-mode-links a+a span {color:var(--rule-style)}
.rule-mode-links strong {font:600 clamp(1.15rem,2vw,1.5rem)/1.3 var(--f-display)}
.rule-mode-links small {color:var(--smoke);text-decoration:underline;text-underline-offset:4px}
.rules-hub #qualifying-tiebreak {border-left:3px solid var(--rule-style);background:#bda3ff08;padding:20px 24px}
.rules-hub #qualifying-tiebreak .mono {font-size:.8rem;line-height:1.8;color:var(--rule-style);margin-block:8px;overflow-wrap:anywhere}
.rule-outcomes {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.rule-outcome {display:flex;gap:18px;border-top:2px solid var(--rule-angle);padding:22px 0}
.rule-outcome h3 {font:600 1.35rem/1.3 var(--f-display);margin-bottom:12px}
.rule-outcome p {line-height:1.6;margin-block:8px;font-size:.98rem}
.rule-outcome .outcome-symbol {font:800 3.5rem/1 var(--f-display);color:var(--rule-angle)}
.rule-outcome-deduction {border-color:var(--rule-warning)}
.rule-outcome-deduction .outcome-symbol {color:var(--rule-warning)}
.outcome-links {display:flex;flex-wrap:wrap;gap:0 16px;margin-top:8px}
.outcome-links a {font-size:.86rem;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
#full-rules {border-top:1px solid var(--line);background:linear-gradient(180deg,#14141d 0,transparent 650px)}
.rule-landmarks {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:28px 0}
.rule-landmarks>span {font:500 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;margin-right:8px;color:var(--smoke)}
.rule-landmarks a {display:flex;align-items:center;min-height:44px;padding:8px 14px;background:#ffffff07;border:1px solid var(--line);border-radius:4px;font-size:.88rem}
.rule-landmarks a:hover,.rule-index a:hover {background:#ffffff0c;color:var(--rule-line)}
.rule-search {padding:24px;background:#1c1c27;border:1px solid #ffffff1c;border-radius:5px;margin-block:24px}
.rule-search[hidden] {display:none}
.rule-search label {display:block;font:600 1.3rem var(--f-display);margin-bottom:12px}
.rule-search-row {display:flex;gap:10px}
.rule-search input {min-width:0;flex:1;background:#0b0b12;border:1px solid #797985;border-radius:4px;padding:12px 14px;color:var(--paper);font:inherit;min-height:48px}
.rule-search input::placeholder {color:#b3b3bf;opacity:1}
.rule-search button {background:#30303d;border:1px solid #797985;border-radius:4px;color:var(--paper);font:600 .9rem var(--f-body);padding:12px 18px;cursor:pointer}
.rule-search p {font-size:.85rem;color:var(--smoke);line-height:1.5;margin-top:10px}
.rule-search .rule-search-status {color:var(--rule-line);min-height:1.5em}
.rules-hub .rule-index {padding:16px 0 24px;border-bottom:1px solid var(--line);gap:5px 20px}
.rules-hub .rule-index a {font-size:.88rem;text-decoration:none;border-bottom:1px solid #ffffff0b;padding:8px 0}
.rules-hub .rule-chapter {background:#111118;border:1px solid #ffffff18;margin-bottom:8px;border-radius:4px;padding-inline:24px}
.rule-chapter[hidden] {display:none}
.rules-hub .rule-chapter summary {font-family:var(--f-mono);font-size:1rem;padding:22px 0;letter-spacing:.025em}
.rules-hub .rule-chapter[open] {border-color:#ffffff30}
.rules-hub .rule-chapter[open] summary {color:var(--rule-line);border-bottom:1px solid var(--line);margin-bottom:24px}
.rule-chapter summary::marker {color:var(--rule-line)}
.rules-hub .rule-original {max-width:860px;margin-inline:auto;padding-bottom:32px;font-size:1.04rem;line-height:1.8}
.rules-hub .rule-original>h3 {font:600 1.2rem/1.5 var(--f-mono);padding-top:24px;margin-top:32px;border-top:1px solid var(--line);color:var(--paper)}
.rules-hub .rule-original>h3:first-child {border:0;padding-top:0;margin-top:0}
.rules-hub #rule-introduction .rule-original>h3 {font:500 .92rem/1.6 var(--f-body);border:0;padding:0;margin:6px 0;color:var(--smoke)}
.rule-original strong {font-weight:700;color:#fff}
.rule-original .rule-deduction-label {color:var(--rule-warning);font-size:.78rem;letter-spacing:.05em;padding-top:12px}
.rule-original .rule-deduction-label strong {color:inherit}
.rule-original .rule-deduction-label+ul {border-left:2px solid #f5d27670;padding:8px 20px 8px 36px;background:#f5d27605}
.rule-original .rule-deduction-label+ul li::marker {color:var(--rule-warning)}
.rules-hub .rule-zero-callout {border-left:3px solid var(--rule-angle);padding:16px 20px;background:#ff72b40a}
.rules-hub .rule-procedure-callout {border-left:3px solid var(--rule-line);padding:16px 20px;background:#57d9f508}
.rules-hub .rule-original .rule-zero-heading {color:var(--rule-angle)}
.rules-hub .rule-original .rule-role-heading {color:var(--rule-line)}
.rules-hub .rule-role-heading+p {border-left:2px solid var(--rule-line);padding-left:18px}
.rules-hub .rule-tie-step {padding:10px 16px;border:1px solid #bda3ff25;margin-block:6px;background:#bda3ff05}
.rule-tie-step strong {color:var(--rule-style);margin-right:8px}
.rules-hub .rule-original img {border:1px solid #ffffff38;border-radius:4px;max-height:700px;object-fit:contain}
.rules-hub .rule-original :target {outline:2px solid var(--rule-line);outline-offset:6px}
@media(max-width:1100px) {
 .score-composition {grid-template-columns:1fr}
 .score-ring {width:150px;margin-inline:auto}
 .score-ring strong {font-size:2.7rem}
}
@media(max-width:700px) {
 .rules-hub .rules-score-grid {grid-template-columns:1fr}
 .rules-hub .rules-score {padding:20px}
 .rules-hub .rules-score header {margin-bottom:10px}
 .rules-hub .rules-score .score-value {font-size:2.8rem;display:flex;align-items:baseline;gap:6px}
 .rule-mode-links,.rule-outcomes {grid-template-columns:1fr}
 .rule-mode-links a+a {border-left:0;border-top:1px solid var(--line);padding-left:0}
 .rule-outcomes {gap:4px}
 .rule-outcome {gap:14px}
 .rule-search {padding:18px}
 .rule-search-row {flex-wrap:wrap}
 .rule-search input {flex-basis:100%}
 .rule-search button {min-height:44px}
 .rules-hub .rule-chapter {padding-inline:16px}
 .rules-hub .rule-original {font-size:1rem}
 .rules-hub .rule-chapter summary {font-size:.95rem}
 .rule-landmarks {gap:6px}
 .rule-landmarks>span {flex-basis:100%;margin-bottom:4px}
}
@media print {
 .rule-search,.rule-landmarks,.rule-mode-links,.score-composition,.rule-outcomes {display:none!important}
 .rule-chapter[hidden] {display:block!important}
 .rules-hub .rule-chapter,.rules-hub .rule-original,.rules-hub .rule-original * {color:#000!important;background:#fff!important}
 .rules-hub .rule-chapter::details-content {content-visibility:visible!important;display:block!important}
 .rules-hub .rule-original {max-width:none;font-size:10pt}
}
