/* Addons page showcase: lineup strip, framed screenshots, card-based documentation, install steps.
   Loaded after the page's own <style>; every colour comes from the addon's tier (--t / --tb). */
.addon,.roster-card{--t:var(--legendary);--tb:var(--legendary-bright)}
[data-tier="rare"]{--t:var(--rare);--tb:var(--rare-bright)}
[data-tier="epic"]{--t:var(--epic);--tb:var(--epic-bright)}
[data-tier="uncommon"]{--t:var(--uncommon);--tb:var(--uncommon-bright)}
[data-tier="gold"]{--t:var(--gold);--tb:var(--gold-bright)}
[data-tier="legendary"]{--t:var(--legendary);--tb:var(--legendary-bright)}

/* ================= lineup strip ================= */
.roster-section{padding:6px 0 60px}
.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.roster-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:20px 18px 18px;overflow:hidden;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--t) 38%,#2a231c);
  background:linear-gradient(160deg,color-mix(in srgb,var(--t) 13%,#15100c),#100c09 72%);
  transition:transform .28s ease,border-color .25s ease,box-shadow .3s ease}
.roster-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--t),transparent)}
.roster-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--t) 22%,transparent),transparent)}
.roster-card:hover{transform:translateY(-5px);border-color:var(--t);box-shadow:0 20px 44px -20px color-mix(in srgb,var(--t) 65%,transparent)}
.roster-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.roster-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:var(--tb);
  border:1px solid color-mix(in srgb,var(--t) 48%,#2a231c);background:rgba(0,0,0,.38)}
.roster-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.roster-num{font-family:'Russo One',sans-serif;font-size:14px;letter-spacing:.16em;color:color-mix(in srgb,var(--tb) 65%,#000)}
.roster-tier{margin-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tb);position:relative;z-index:1}
.roster-name{font-family:'Russo One',sans-serif;font-size:20px;line-height:1.2;color:#f7f0e7;position:relative;z-index:1}
.roster-line{flex:1;font-size:14.5px;line-height:1.5;color:#cbbdad;position:relative;z-index:1}
.roster-go{margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--tb);position:relative;z-index:1}
.roster-go b{display:inline-block;transition:transform .25s ease}
.roster-card:hover .roster-go b{transform:translateX(5px)}

/* ================= addon sections ================= */
.addon{padding:84px 0;overflow:hidden;scroll-margin-top:64px}
.addon::before{content:"";position:absolute;top:-200px;right:-180px;width:680px;height:680px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--t) 14%,transparent),transparent)}
.addon--flip::before{right:auto;left:-200px}
.addon-index{position:absolute;top:-30px;right:0;z-index:0;font-family:'Russo One',sans-serif;font-size:clamp(96px,13vw,180px);line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--t) 34%,transparent);pointer-events:none;user-select:none}
.addon--flip .addon-index{right:auto;left:0}
.addon .addon-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:64px;align-items:center;position:relative;z-index:1}
.addon .addon-grid>.reveal{order:1!important}
.addon .addon-grid>.shot-frame{order:2!important}
.addon--flip .addon-grid>.reveal{order:2!important}
.addon--flip .addon-grid>.shot-frame{order:1!important}

.addon h2{font-size:clamp(32px,4.6vw,54px);line-height:1.06;margin-bottom:16px;text-shadow:0 0 40px color-mix(in srgb,var(--t) 35%,transparent)}
.addon .tier-eyebrow{font-size:12.5px;padding:7px 14px 7px 12px;border-radius:999px;width:fit-content;margin-bottom:18px;
  border:1px solid color-mix(in srgb,var(--t) 42%,#2a231c);background:color-mix(in srgb,var(--t) 9%,transparent)}
.addon .tagline{font-size:18px;line-height:1.55;color:#d7cbbb;max-width:52ch}
.addon .lede{font-size:16px;line-height:1.75;color:#d2c6b8;max-width:58ch}
.pills{gap:10px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;font-size:12.5px;letter-spacing:.04em;color:#eadfd0;
  border:1px solid color-mix(in srgb,var(--t) 40%,#2b241d)!important;background:color-mix(in srgb,var(--t) 9%,transparent)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tb);box-shadow:0 0 9px var(--t)}
.addon .cta-row{gap:14px 16px}
.addon .cta-row .btn{padding:14px 24px;font-size:14px}
.version-tag{font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--t) 35%,#2b241d);color:var(--tb)}

/* ---- image holder ---- */
.shot-frame{position:relative;padding:52px 38px 42px;border-radius:12px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--t) 36%,#2a231c);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--t) 18%,#16110d),#0e0b09 74%);
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--t) 55%,transparent)}
.shot-frame::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(color-mix(in srgb,var(--t) 30%,transparent) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.shot-frame::after{content:"";position:absolute;inset:10px;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--tb),var(--tb)) 0 0/22px 2px,linear-gradient(var(--tb),var(--tb)) 0 0/2px 22px,
    linear-gradient(var(--tb),var(--tb)) 100% 0/22px 2px,linear-gradient(var(--tb),var(--tb)) 100% 0/2px 22px,
    linear-gradient(var(--tb),var(--tb)) 0 100%/22px 2px,linear-gradient(var(--tb),var(--tb)) 0 100%/2px 22px,
    linear-gradient(var(--tb),var(--tb)) 100% 100%/22px 2px,linear-gradient(var(--tb),var(--tb)) 100% 100%/2px 22px;
  background-repeat:no-repeat;opacity:.7}
.shot-tag{position:absolute;top:19px;left:26px;z-index:3;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--tb)}
.shot-tag::before{content:"";width:7px;height:7px;background:var(--tb);transform:rotate(45deg);box-shadow:0 0 10px var(--t)}
.shot-ver{position:absolute;top:15px;right:24px;z-index:3;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--tb);
  border:1px solid color-mix(in srgb,var(--t) 50%,#2a231c);background:rgba(0,0,0,.35)}
.shot-frame .shot-wrap{position:relative;z-index:1}
.shot-frame .addon-shot{max-height:440px;border-radius:5px;
  box-shadow:0 18px 60px -14px color-mix(in srgb,var(--t) 75%,transparent),0 0 0 1px color-mix(in srgb,var(--t) 45%,#000)}

/* ---- documentation as cards ---- */
.doc-bar{display:flex;align-items:center;gap:16px;margin:72px 0 26px;position:relative;z-index:1}
.doc-bar span{font-family:'Russo One',sans-serif;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--tb)}
.doc-bar::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--t) 65%,transparent),transparent)}
.addon .addon-doc{max-width:none;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;position:relative;z-index:1}
.addon .addon-doc>section,.addon .addon-doc>section:first-child{position:relative;padding:30px 30px 28px;border:1px solid color-mix(in srgb,var(--t) 28%,#2a231c);border-radius:12px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--t) 8%,#171009),#100c09 62%);overflow:hidden;transition:border-color .25s ease,box-shadow .3s ease}
.addon .addon-doc>section::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--t),transparent 70%)}
.addon .addon-doc>section:hover{border-color:color-mix(in srgb,var(--t) 60%,#2a231c);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--t) 70%,transparent)}
.addon .addon-doc>section.doc-wide{grid-column:1/-1}
.addon .addon-doc h3{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:21px;line-height:1.25;color:#f7f0e7}
.doc-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;color:var(--tb);
  border:1px solid color-mix(in srgb,var(--t) 42%,#2a231c);background:color-mix(in srgb,var(--t) 12%,#0c0907)}
.doc-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.addon .addon-doc p{font-size:16px;line-height:1.75;color:#d6cabc;margin-bottom:14px}
.addon .addon-doc p:last-child{margin-bottom:0}
.addon .addon-doc li{font-size:15.5px;line-height:1.65;color:#d6cabc}
.addon .addon-doc li::before{background:var(--tb);margin-top:10px}
.addon .addon-doc code{font-size:13.5px;color:var(--tb);background:color-mix(in srgb,var(--t) 11%,transparent);border:1px solid color-mix(in srgb,var(--t) 30%,#2a231c);border-radius:5px;padding:2px 8px}
.addon .addon-doc a.inline{color:var(--tb);text-decoration:underline;text-underline-offset:3px}
.addon .addon-doc .doc-note{font-size:14.5px;line-height:1.65;color:#c9bcac;border-left:3px solid var(--t);padding:10px 14px;border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--t) 7%,transparent);margin-top:16px}
/* wide cards flow their paragraphs into two balanced columns */
.addon .addon-doc .doc-cols{display:block;column-count:2;column-gap:52px;column-fill:balance}
.addon .addon-doc .doc-cols>h3,.addon .addon-doc .doc-cols>.term-dots{column-span:all}
.addon .addon-doc .doc-cols>p{break-inside:avoid-column;margin-bottom:16px}

/* slash commands: a little terminal window */
.addon .addon-doc>section.doc-terminal{background:#0a0807;border-color:color-mix(in srgb,var(--t) 40%,#221b15)}
.term-dots{display:flex;gap:7px;margin:0 0 18px}
.term-dots i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--t) 55%,#000);opacity:.85}
.term-dots i:nth-child(2){opacity:.55}.term-dots i:nth-child(3){opacity:.3}
.addon .addon-doc .doc-terminal ul{gap:0;margin:0 0 10px}
.addon .addon-doc .doc-terminal li{display:block;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.09);line-height:1.8}
.addon .addon-doc .doc-terminal li:last-child{border-bottom:0}
.addon .addon-doc .doc-terminal li::before{content:"$";display:inline;width:auto;height:auto;background:none;margin:0 10px 0 0;color:var(--tb);font-family:'Chakra Petch',monospace;font-weight:700}

/* the endgame data pack promo */
.addon .addon-doc>section.doc-promo{background:linear-gradient(125deg,color-mix(in srgb,var(--t) 20%,#171009),#0f0b08 70%);border-color:color-mix(in srgb,var(--t) 55%,#2a231c)}

/* ================= install steps ================= */
.install-section{padding:84px 0 92px;border-top:1px solid var(--line-soft);position:relative}
.install-head{text-align:center;margin-bottom:38px}
.install-head .eyebrow{display:inline-flex;margin-bottom:12px;color:var(--legendary-bright)}
.install-head h2{font-size:clamp(28px,4vw,44px)}
.install-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0;counter-reset:none}
.install-steps li{position:relative;padding:30px 28px 28px;border-radius:12px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--legendary) 30%,#2a231c);background:linear-gradient(170deg,color-mix(in srgb,var(--legendary) 9%,#171009),#100c09 64%)}
.install-steps li::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--legendary),transparent 70%)}
.install-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;margin-bottom:16px;color:var(--legendary-bright);
  border:1px solid color-mix(in srgb,var(--legendary) 45%,#2a231c);background:rgba(0,0,0,.35)}
.install-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-num{position:absolute;top:18px;right:22px;font-family:'Russo One',sans-serif;font-size:48px;line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--legendary) 38%,transparent)}
.install-steps h3{font-size:22px;margin:0 0 8px;color:#f7f0e7}
.install-steps p{font-size:16px;line-height:1.7;color:#d3c7b8;margin:0}
.install-steps code{font-size:13.5px;color:var(--legendary-bright);background:rgba(255,162,61,.09);border:1px solid var(--line-soft);border-radius:5px;padding:2px 7px;word-break:break-word}
.install-note{max-width:820px;margin:26px auto 0;text-align:center;font-size:15.5px;line-height:1.7;color:#c9bcac}
.install-note a{color:var(--legendary-bright);text-decoration:underline;text-underline-offset:3px}

/* ================= responsive ================= */
@media(max-width:1100px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .addon{padding:64px 0}
  .addon .addon-grid{grid-template-columns:1fr;gap:34px}
  .addon .addon-grid>.reveal{order:1!important}.addon .addon-grid>.shot-frame{order:2!important}
  .addon .addon-doc{grid-template-columns:1fr}
  .addon .addon-doc .doc-cols{column-count:1}
  .install-steps{grid-template-columns:1fr}
}
@media(max-width:620px){
  .roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .roster-card:last-child{grid-column:1/-1}
  .roster-card{padding:16px 14px}
  .roster-name{font-size:17px}.roster-line{font-size:13.5px}
  .addon-index{font-size:84px;top:-16px}
  .shot-frame{padding:46px 14px 34px}
  .shot-tag{left:16px;font-size:10px;letter-spacing:.16em}.shot-ver{right:14px;font-size:10.5px}
  .addon .addon-doc>section,.addon .addon-doc>section:first-child{padding:24px 20px 22px}
  .addon .addon-doc h3{font-size:19px}
  .doc-bar span{font-size:13px;letter-spacing:.2em}
}
@media(prefers-reduced-motion:reduce){.roster-card,.roster-go b,.addon .addon-doc>section{transition:none}}

/* the turning-border download buttons keep each addon's own tier colour as their fill */
.addon .btn-fill.rn-rgb{--rn-rgb-fill:var(--t);--rn-rgb-fill-hover:var(--tb)}