:root{--text-muted:#ffffff90;--text-dim:#ffffff60}
.rules-page{position:relative;width:100%;max-width:none;background:#0e0e0e;--rules-gutter:clamp(1rem,5vw,8rem)}
.rules-header,.rules-main,.rules-support,.rules-footer{padding-inline:var(--rules-gutter)}
.rules-header{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding-block:2rem}
.rules-logo{display:inline-flex;align-items:center;gap:.8rem;width:max-content}
.rules-logo img{object-fit:contain;width:2.9rem;height:2.75rem}
.rules-logo>span{font-size:.85rem;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.rules-logo small{display:block;font-size:.48rem;letter-spacing:0;font-weight:500;margin-top:.25rem;opacity:.65}
.rules-header nav{display:flex;gap:.6rem}.rules-header .pill{padding:.65rem 1.35rem;font-size:1rem;min-height:2.25rem;background-color:#ffffff03;border-color:#ffffff17;color:#ffffff70}
.rules-header .pill-primary{color:#fff}.rules-header .rules-discord{justify-self:end;color:#fff;gap:1rem}
.rules-hero{position:relative;isolation:isolate;min-height:36rem;display:flex;align-items:center;padding:4rem var(--rules-gutter) 7rem}
.rules-hero-image{--image-opacity:.6;position:absolute;z-index:-2;right:0;top:-7rem;width:78%;height:calc(100% + 7rem);object-fit:cover;object-position:52% 33%;opacity:var(--image-opacity);mask-image:linear-gradient(90deg,transparent,#000 45%),linear-gradient(#000 58%,transparent);mask-composite:intersect}
.rules-hero::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 75% 35%,#ec449410,transparent 60%);pointer-events:none}
.rules-hero-content{max-width:65rem}.rules-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:.16em;color:#ffffff66;line-height:1.6}
.rules-hero .rules-eyebrow{display:flex;align-items:center;gap:.65rem;margin-bottom:1.6rem;color:#ffffffa3}
.rules-hero .rules-eyebrow>span{width:.4rem;height:.4rem;border-radius:50%;background:linear-gradient(135deg,#ec4494,#eca044);box-shadow:0 0 .9rem #ec449460}
.rules-hero h1{font:900 clamp(4rem,7.9vw,9rem)/.89 'Big Shoulders Display',sans-serif;letter-spacing:-.025em}
.rules-hero h1>span{color:transparent;-webkit-text-stroke:1.5px #ffffffc9}
.rules-hero-copy{font-size:.875rem;line-height:1.8;color:#ffffff8c;margin-top:1.8rem}
.rules-hero .pill{margin-top:2rem;font-size:1rem;gap:1.5rem;padding:1rem 1.65rem}
.rules-hero-caption{position:absolute;right:var(--rules-gutter);bottom:5.5rem;display:flex;flex-direction:column;align-items:end;gap:.6rem}
.rules-hero-caption>span:first-child{font:900 7rem/.8 'Big Shoulders Display',sans-serif;color:#ffffff07;-webkit-text-stroke:1px #ffffff22;letter-spacing:-.03em}
.rules-hero-caption>span:last-child{font-size:.5rem;letter-spacing:.15em;color:#ffffff40}
.rules-main{position:relative;padding-top:2rem;padding-bottom:5rem;scroll-margin-top:2rem}
.rules-toolbar{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding-bottom:2rem;margin-bottom:2.5rem;border-bottom:1px solid #ffffff18}
.rules-toolbar h2{font:900 clamp(2.7rem,4vw,4rem)/1 'Big Shoulders Display',sans-serif;margin-top:.65rem;letter-spacing:-.02em}
.rules-toolbar h2>span{color:#ec4494}.rules-tabs{display:flex;gap:.5rem;padding:.3rem;border:1px solid #ffffff1a;border-radius:3rem;background:#ffffff03;flex-shrink:0}
.tab{display:flex;align-items:center;gap:1.2rem;border:1px solid transparent;border-radius:3rem;padding:.85rem 1.4rem;font:900 1.1rem/1 'Big Shoulders Display',sans-serif;color:#ffffff66;transition:background-color .3s,color .3s,box-shadow .4s}
.tab>span{font-family:Manrope,sans-serif;font-size:.55rem;opacity:.45}.tab:hover{color:#fff}.tab.active{background:#fff;color:#0e0e0e;box-shadow:0 .25rem 1rem #0003}
.rules-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.rules-sidebar{position:sticky;top:2rem}.rules-index{padding-top:.3rem}
.rules-index-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;padding-inline:.75rem;font-size:.6rem;font-weight:700;letter-spacing:.12em;color:#ffffff70}
.rules-index-heading>span{font-size:.55rem;font-weight:500;letter-spacing:0;color:#ffffff40}
#rules-chapters{display:flex;flex-direction:column;gap:.2rem;max-height:60vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent}
.rules-chapter{display:flex;align-items:baseline;gap:.8rem;border:1px solid transparent;border-radius:.55rem;padding:.8rem .75rem;font-size:.75rem;line-height:1.45;color:#ffffff65;transition:color .25s,background-color .25s,border-color .25s}
.rules-chapter>span:first-child{font:900 1rem/1 'Big Shoulders Display',sans-serif;min-width:1.25rem;color:#ffffff35;transition:color .25s}
.rules-chapter:hover{background:#ffffff04;color:#fff}.rules-chapter[aria-current='location']{background:linear-gradient(110deg,#ec44940e,#eca04405);border-color:#ec449425;color:#fff}
.rules-chapter[aria-current='location']>span:first-child{color:#ec4494}
.rules-index-help{display:block;border-top:1px solid #ffffff15;margin-top:1.5rem;padding:.9rem .75rem 0;font:900 1rem/1.8 'Big Shoulders Display',sans-serif}
.rules-index-help>span:first-child{display:block;font:400 .7rem/1.6 Manrope,sans-serif;color:#ffffff60;margin-bottom:.4rem}.rules-index-help>span:last-child{float:right;color:#ec4494}
.rules-reading{min-width:0;max-width:70rem}.tab-panel:not(.active){display:none}.rule-block{position:relative;border:1px solid #ffffff16;border-radius:1.2rem;background:linear-gradient(135deg,#ffffff04,transparent 70%);padding:clamp(1.4rem,2.8vw,3rem);margin-bottom:1.3rem;scroll-margin-top:2rem}
.rule-block::before{content:'';position:absolute;left:-1px;top:2.25rem;width:2px;height:2rem;background:linear-gradient(#ec4494,#eca044);border-radius:2px}
.rule-block h3{font:900 clamp(1.8rem,2.8vw,2.5rem)/1.05 'Big Shoulders Display',sans-serif;letter-spacing:-.015em;text-transform:uppercase;margin-bottom:1.75rem}
.rule-block h3 .para-num{color:#ec4494;margin-right:.35rem}.rule-block>p{font-size:.83rem;line-height:1.9;color:#ffffff80}
.rule-block ol,.rule-block ul{padding:0;margin:0;list-style:none;counter-reset:rule;display:flex;flex-direction:column}
.rule-block li{counter-increment:rule;position:relative;padding:1.05rem 0 1.05rem 2.9rem;border-bottom:1px solid #ffffff0d;color:#ffffff8c;font-size:.85rem;line-height:1.95;overflow-wrap:anywhere}
.rule-block li:first-child{padding-top:.1rem}.rule-block li:last-child{border-bottom:0;padding-bottom:0}
.rule-block li::before{content:counter(rule,decimal-leading-zero);position:absolute;left:0;top:1.15rem;font:900 1.25rem/1 'Big Shoulders Display',sans-serif;color:#ffffff30}
.rule-block li:first-child::before{top:.25rem}.rule-block strong{font-weight:700;color:#ffffffe0}.rule-block code{color:#eca044;background:#eca0440a;padding:.1rem .3rem;border-radius:.25rem;font-size:.85em}
.rules-version{display:flex;align-items:center;justify-content:center;gap:.6rem;color:#ffffff38;font-size:.65rem;line-height:1.6;margin-top:2rem}
.rules-support{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:0 var(--rules-gutter) 5rem;padding:2.75rem 3rem;border:1px solid #ffffff1a;border-radius:1.5rem;background:radial-gradient(ellipse at 5% 100%,#ec449412,transparent 60%),#ffffff02}
.rules-support h2{font:900 clamp(3rem,5vw,5rem)/1 'Big Shoulders Display',sans-serif;margin:.5rem 0 .8rem}.rules-support h2>span{color:#ec4494}.rules-support p:last-child{font-size:.85rem;line-height:1.6;color:#ffffff80}
.rules-support .pill{gap:1.3rem;flex-shrink:0}.rules-footer{padding-block:0 2.5rem}.rules-footer>div{display:flex;align-items:center;justify-content:space-between;gap:2rem;border-top:1px solid #ffffff16;padding-top:2.5rem}
.rules-footer nav{display:flex;gap:2rem;flex-wrap:wrap;row-gap:1rem;font:900 1rem/1 'Big Shoulders Display',sans-serif;color:#ffffff60}.rules-footer nav a:hover{color:#fff}.rules-footer>p{font-size:.6rem;color:#ffffff45;line-height:1.8;margin-top:2rem}
@media(min-width:1600px){:root{font-size:clamp(16px,1.111vw,20px)}}
@media(max-width:1050px){.rules-header{gap:1rem}.rules-header .pill{padding-inline:1rem}.rules-layout{grid-template-columns:12rem 1fr;gap:2rem}.rules-hero-caption{display:none}}
@media(max-width:760px){.rules-header{grid-template-columns:1fr auto;row-gap:1.5rem;padding-top:1.5rem}.rules-header nav{grid-row:2;grid-column:1/-1;justify-content:center}.rules-header .rules-discord{grid-column:2;grid-row:1}.rules-hero{min-height:31rem;padding-top:2.5rem;padding-bottom:4.5rem}.rules-hero h1{font-size:clamp(3.8rem,10.4vw,6rem)}.rules-hero-image{width:100%;opacity:.32;object-position:52% center;mask-image:linear-gradient(90deg,transparent,#000 100%),linear-gradient(#000 55%,transparent)}.rules-hero-copy{max-width:27rem;font-size:.8rem}.rules-hero-copy br{display:none}.rules-toolbar{align-items:start;flex-direction:column;gap:1.5rem;margin-bottom:1.75rem}.rules-toolbar h2{font-size:3rem}.rules-tabs{width:100%}.rules-tabs .tab{flex:1;justify-content:center}.rules-layout{grid-template-columns:minmax(0,1fr);gap:1.5rem}.rules-sidebar{position:static}.rules-index{padding:0}.rules-index-heading,.rules-index-help{display:none}#rules-chapters{flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:.5rem;scrollbar-width:thin}.rules-chapter{flex:0 0 auto;padding:.65rem .8rem;border-color:#ffffff15;font-size:.7rem;max-width:15rem}.rules-chapter>span:first-child{min-width:auto}.rules-main{padding-top:1rem;padding-bottom:3rem}.rule-block{padding:1.4rem;border-radius:1rem}.rule-block h3{font-size:1.9rem;margin-bottom:1.4rem}.rule-block li{font-size:.8rem;line-height:1.9;padding-left:2.2rem}.rule-block li::before{font-size:1.1rem}.rules-support{flex-direction:column;align-items:start;padding:2rem 1.5rem;margin-bottom:3rem}.rules-support .pill{font-size:1rem;padding:.9rem 1.25rem}.rules-footer>div{align-items:start;flex-direction:column}.rules-footer nav{gap:1.5rem;font-size:.9rem}.rules-footer>p{max-width:23rem}.rules-version{flex-wrap:wrap;font-size:.6rem}}
@media(max-width:760px){.rules-hero-image{--image-opacity:.32;top:-12rem;height:calc(100% + 12rem)}}
@media(max-width:480px){.rules-hero h1{font-size:clamp(2.8rem,13vw,3.8rem)}}
@keyframes rules-image-in{from{opacity:0;transform:scale(1.035)}to{opacity:var(--image-opacity);transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){.rules-hero-content{animation:hero-in .9s var(--ease-smooth) both}.rules-hero-image{animation:rules-image-in 1.6s var(--ease-smooth) both}.rules-header{animation:header-in .7s ease both}}
