/* Rules and abilities page (v0.9.3). Uses the FORGED tokens from style.css; no inline styles (CSP). */
.r-hero{position:relative;isolation:isolate;padding:80px 0 56px;background:var(--deep);border-bottom:1px solid var(--line);overflow:hidden}
.r-hero::before{content:'';position:absolute;z-index:-2;inset:0;background:url('/assets/hero-landscape.webp') center/cover no-repeat;opacity:.45}
.r-hero::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#07151cf8 0%,#07151cdd 55%,#07151c80 100%),linear-gradient(0deg,#07151c,transparent 60%)}
.r-hero h1{max-width:760px}.r-lead{max-width:640px;font-size:17px}
.r-new{display:inline-block;padding:1px 8px;border:1px solid var(--mint);border-radius:999px;color:var(--mint);font-size:11px;font-weight:500;letter-spacing:1px;line-height:1.6;vertical-align:middle;white-space:nowrap}
.r-facts{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.r-facts li{margin:0;padding:14px 0 14px 20px;border-left:2px solid #8b7547}
.r-facts strong{display:block;font-size:28px;line-height:1.2;color:var(--gold)}.r-facts span{font-size:13px;color:var(--muted)}
/* In-page navigation */
.r-toc{position:sticky;top:0;z-index:4;background:#07151cf2;border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.r-toc .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:10px 0}
.r-toc a{flex-shrink:0;display:flex;align-items:center;min-height:36px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px;text-decoration:none;white-space:nowrap}
.r-toc a:hover,.r-toc a.active{color:var(--bg);background:var(--gold);border-color:var(--gold)}
html{scroll-padding-top:72px}
.r-block{padding-block:72px;border-bottom:1px solid #35515b80}.r-block:last-of-type{border-bottom:0}
.r-sub{margin:36px 0 18px}
/* Cards and layouts */
.r-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.r-card>:last-child{margin-bottom:0}.r-card h4{margin-top:4px}
.r-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.r-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.r-icon{width:56px;height:56px;flex-shrink:0;margin-bottom:14px}
.r-ic-gold{fill:var(--gold)}.r-ic-dark{fill:var(--panel)}.r-ic-mint{fill:var(--mint)}
.r-ticks{list-style:none;padding:0;margin:0 0 20px}.r-ticks li{position:relative;padding-left:28px;font-size:14px;color:var(--muted)}
.r-ticks li::before{position:absolute;left:0;top:0;font-weight:500}.r-ticks .ok::before{content:'✓';color:var(--mint)}.r-ticks .no::before{content:'✕';color:var(--red)}
/* Match flow */
.r-flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;counter-reset:flow}
.r-flow li{position:relative;margin:0;padding:18px 16px 16px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--radius);counter-increment:flow}
.r-flow li::before{content:counter(flow,decimal-leading-zero);display:block;font-size:12px;letter-spacing:2px;color:var(--muted);margin-bottom:6px}
.r-flow li:not(:last-child)::after{content:'';position:absolute;right:-9px;top:34px;width:8px;height:2px;background:var(--gold)}
.r-flow h3{font-size:16px;margin-bottom:8px}.r-flow p{font-size:13px;line-height:1.6;margin:0}
.r-step-time{display:inline-block;margin-bottom:10px;padding:2px 10px;border-radius:999px;background:var(--raised);color:var(--gold);font-size:12px;font-weight:500}
.r-flow .r-night{border-top-color:#7a8fd6;background:linear-gradient(180deg,#141f3a,var(--panel))}.r-flow .r-night .r-step-time{color:#b8c6ff}
.r-flow .r-horn{border-top-color:var(--mint)}.r-flow .r-horn .r-step-time{color:var(--mint)}
/* Winning */
.r-win{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.r-meter{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px 14px;align-items:center;margin:8px 0 18px;font-size:14px}.r-meter-row{display:contents}
.r-meter-row b{color:var(--text);white-space:nowrap}
.r-bar{height:14px;background:var(--deep);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.r-bar i{display:block;height:100%;background:var(--control);border-radius:999px}.r-bar i.r-gold{background:linear-gradient(90deg,#8b7547,var(--gold))}.r-bar i.r-mint{background:linear-gradient(90deg,#2f7c6c,var(--mint))}
.r-w-44{width:44%}.r-w-67{width:67%}.r-w-70{width:70%}.r-w-100{width:100%}
.r-kills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 20px}
.r-kills div{padding:14px 16px;background:var(--deep);border:1px solid var(--line);border-radius:var(--radius)}
.r-kills strong{display:block;font-size:40px;line-height:1.1;color:var(--gold)}.r-kills span{font-size:13px;color:var(--muted)}
/* Hero pick */
.r-heroes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px}
.r-attr{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);border-bottom:3px solid var(--c,var(--gold))}
.r-attr small{font-size:12px;color:var(--muted);line-height:1.5}
.r-attr-dot{width:30px;height:30px;border-radius:50%;background:var(--c);display:grid;place-items:center;color:var(--bg);font-weight:500;margin-bottom:6px;box-shadow:0 0 18px var(--c)}
.r-str{--c:#ff7a66}.r-agi{--c:#7fdc6c}.r-int{--c:#5fb6ff}.r-uni{--c:#e9ce93}.r-rand{--c:#a6bbc2}
/* Draft illustration */
.r-draft{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.r-draft-hand{display:grid;grid-template-columns:repeat(5,40px);gap:8px}.r-draft-slots{display:grid;grid-template-columns:repeat(4,52px);gap:10px}
.r-draft span{display:block;aspect-ratio:1;border-radius:6px;background:var(--raised);border:1px solid var(--control)}
.r-draft .ult,.r-legend .ult{background:#4a2f7a;border-color:#a77cff}.r-draft .pas,.r-legend .pas{background:#1d4a44;border-color:var(--mint)}
.r-draft .pick{box-shadow:0 0 0 2px var(--gold),0 0 14px #e9ce9355}.r-legend .pick{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.r-draft-hand .pick{opacity:.35}
.r-draft-arrow{width:60px;height:24px;fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.r-legend{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:20px;font-size:13px;color:var(--muted)}
.r-legend li{display:flex;align-items:center;gap:8px;margin:0}.r-legend i{width:16px;height:16px;border-radius:4px;background:var(--raised);border:1px solid var(--control)}
/* Buy new ability */
.r-buy-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.r-buy-steps li{display:flex;gap:16px;margin:0;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.r-buy-steps b{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--bg);font-size:18px}
.r-buy-steps p{font-size:14px;margin:0}
.r-price figcaption,figure.r-card figcaption{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
figure.r-card{margin:0}.r-price svg{width:100%;height:auto;overflow:visible;margin-top:20px}
.r-axis line{stroke:var(--line);stroke-width:1}.r-bars-gold rect{fill:var(--gold)}.r-bars-gold rect:nth-child(n){opacity:.55}.r-bars-gold rect:nth-child(5){opacity:1}
.r-labels text{fill:var(--muted);font:500 12px Poppins,Arial,sans-serif;text-anchor:middle}
/* Odds */
.r-steps-chart{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;height:190px;margin-top:10px}
.r-col{display:flex;flex-direction:column;align-items:stretch;height:100%;gap:8px;font-size:12px;color:var(--muted);text-align:center}
.r-track{flex:1;min-height:0;display:flex;align-items:flex-end;padding-top:24px;border-bottom:1px solid var(--line)}
.r-col i{position:relative;display:block;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--mint),#2f7c6c)}
.r-col i b{position:absolute;left:0;right:0;bottom:100%;padding-bottom:4px;color:var(--text);font-size:14px;font-style:normal}
.r-steps-chart[data-chart=ultimate] .r-col i{background:linear-gradient(180deg,#b996ff,#4a2f7a)}
.r-h-20{height:20%}.r-h-40{height:40%}.r-h-60{height:60%}.r-h-70{height:70%}.r-h-80{height:80%}.r-h-90{height:90%}.r-h-100{height:100%}
.r-replace{display:flex;gap:20px;align-items:flex-start;margin-top:20px}.r-replace .r-icon{margin:0}
.r-calc{margin-top:20px}.r-calc-row{display:flex;flex-wrap:wrap;gap:18px}
.r-calc label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.r-calc select{min-height:44px;padding:8px 12px;background:var(--deep);color:var(--text);border:1px solid var(--control);border-radius:4px}
.r-calc-out{margin:18px 0 0;color:var(--text);font-size:15px}.r-calc-out b{color:var(--gold)}
/* Timelines */
.r-runes{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;margin-bottom:12px}
.r-runes img{border-radius:var(--radius);border:1px solid var(--line)}
.r-timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-top:36px}
.r-tl-track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--mint))}
.r-tl-mark{position:relative;padding-right:10px}
.r-tl-mark::before{content:'';position:absolute;top:-28px;left:0;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--gold)}
.r-tl-mark b{display:block;font-size:18px;color:var(--text)}.r-tl-mark span{font-size:13px;color:var(--muted)}
.r-tl-mark.bounty::before{border-color:#f2b84b}.r-tl-mark.water::before{border-color:#5fb6ff}.r-tl-mark.power::before{border-color:var(--mint)}
.r-creeps .r-tl-mark:nth-child(n+3)::before{border-color:var(--red)}
/* Tables */
.r-table{width:100%;border-collapse:collapse;font-size:14px}
.r-table th,.r-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.r-table thead th{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);font-weight:500}
.r-table thead small{display:block;color:var(--muted);font-size:10px;letter-spacing:2px}
.r-table tbody th{font-weight:500;color:var(--text)}.r-table td{color:var(--muted)}
.r-table tbody tr:hover{background:#10242d80}
.r-compare td.ok{color:var(--mint)}.r-compare td.no{color:var(--muted);opacity:.75}
/* Map */
.r-photo{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}.r-photo img{border-radius:6px;aspect-ratio:4/3;object-fit:cover}
/* Changed abilities */
.r-abilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.r-ab{border-left:3px solid #a77cff}.r-ab h3{font-size:19px;margin-bottom:8px}.r-ab p{font-size:14px}
.r-ab-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}.r-ab-head h3{margin:0}
.r-ab-icons{display:flex;gap:6px;flex-shrink:0}.r-ab-icons img{width:52px;height:52px;border-radius:6px;border:1px solid var(--line);box-shadow:0 2px 10px #0006}
.r-ab-tag{display:inline-block;margin-bottom:4px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
/* Modes */
.r-modes th[scope=col]:not(:first-child){min-width:150px}
.r-mmr .r-card p{font-size:14px}
.r-cooldowns{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.r-cooldowns li{margin:0;padding:3px 10px;border-radius:999px;font-size:12px;background:var(--raised);color:var(--text)}
.r-cooldowns li:first-child{color:var(--muted)}.r-cooldowns li:last-child{background:#5a2a24;color:var(--red)}
.r-fair{display:flex;gap:24px;align-items:flex-start;border-color:#8b7547}.r-fair .r-icon{width:72px;height:72px}
.r-source{margin-top:24px}
@media(max-width:1100px){
 .r-flow{grid-template-columns:repeat(4,minmax(0,1fr))}.r-flow li:nth-child(4)::after{display:none}
 .r-abilities,.r-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .r-heroes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .r-toc .wrap{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin}
 .r-hero{padding:48px 0 36px}.r-lead{font-size:15px}
 .r-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.r-facts strong{font-size:22px}
 .r-block{padding-block:52px}
 .r-flow{grid-template-columns:1fr}.r-flow li::after{display:none}
 .r-win,.r-split,.r-grid3,.r-abilities,.r-buy-steps{grid-template-columns:1fr}
 .r-heroes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .r-runes{grid-template-columns:1fr}.r-runes img{max-width:260px}
 .r-timeline{grid-template-columns:1fr;padding:0 0 0 30px;gap:14px}
 .r-tl-track{left:6px;right:auto;top:0;bottom:0;width:4px;height:auto;background:linear-gradient(180deg,var(--gold),var(--mint))}
 .r-tl-mark::before{top:6px;left:-30px}
 .r-photo{grid-template-columns:1fr}.r-replace,.r-fair{flex-direction:column}
 .r-draft{justify-content:center}.r-draft-hand{grid-template-columns:repeat(5,34px)}.r-draft-slots{grid-template-columns:repeat(4,44px)}.r-draft-arrow{transform:rotate(90deg)}
 .r-steps-chart{height:160px;gap:6px}
}
@media(prefers-reduced-motion:reduce){.r-toc{backdrop-filter:none}}
.r-mmr+.fine{margin-top:20px}