/* =========================================================================
   UTDX//HUB — dark "tech" theme
   Re-skin of the UTDX guide. Accent + surfaces live in :root.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* surfaces */
  --bg:#080b11;
  --bg-grid:rgba(255,255,255,.022);
  --panel:#0c1119;
  --surface:#0e141e;
  --surface-2:#121a26;
  --surface-3:#16202e;
  --border:rgba(255,255,255,.07);
  --border-2:rgba(255,255,255,.13);
  --border-glow:rgba(47,107,255,.5);

  /* text */
  --text:#e8ebf1;
  --text-soft:#8a94a6;
  --text-faint:#5a6374;
  --link:#6f9bff;
  --link-hover:#9fbcff;

  /* accent */
  --accent:#2f6bff;
  --accent-2:#5b8cff;
  --accent-dark:#1d49c4;
  --live:#ff3b6b;
  --online:#34d399;

  /* tiers */
  --tier-splus:#ff3d71; --tier-s:#ff7a3d; --tier-a:#ffb02e; --tier-b:#4cc46a; --tier-c:#4aa3df;

  /* chip palette */
  --c1:#7c3aed; --c2:#4f46e5; --c3:#2f8fd6; --c4:#0d9488;
  --c5:#c026d3; --c6:#e11d6b; --c7:#d97706; --c8:#16a34a;
  --c9:#dc2626; --c10:#0ea5e9;

  /* semantic */
  --good:#34d399; --good-bg:rgba(52,211,153,.12);
  --bad:#f87171;  --bad-bg:rgba(248,113,113,.12);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.10);
  --tip:#5b8cff;  --tip-bg:rgba(91,140,255,.10);
  --new:#2f6bff;

  --radius:4px;
  --shadow:0 8px 26px rgba(0,0,0,.5);
  --font:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:'Oswald','Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,"Cascadia Mono",Consolas,monospace;
  --maxw:1320px;
  --side:248px;
  --cut:10px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);font-size:14.5px;line-height:1.6;color:var(--text);
  background:var(--bg);
  background-image:
    linear-gradient(var(--bg-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px),
    radial-gradient(900px 500px at 75% -200px,rgba(47,107,255,.10),transparent);
  background-size:44px 44px,44px 44px,100% 100%;}
img{max-width:100%;display:block;}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mono{font-family:var(--mono);}

/* =========================== TOP BAR =================================== */
.topbar{position:sticky;top:0;z-index:60;background:rgba(8,11,17,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.topbar__inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  height:62px;padding:0 18px;gap:18px;}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;color:#fff;width:calc(var(--side) - 18px);}
.brand:hover{color:#fff;}
.brand__mark{width:38px;height:38px;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  clip-path:polygon(0 0,100% 0,100% 70%,80% 100%,0 100%);box-shadow:0 0 18px rgba(47,107,255,.5);}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.5px;line-height:1;}
.brand__name b{color:var(--accent-2);}
.brand__sub{display:block;font-family:var(--mono);font-size:9px;letter-spacing:1.5px;
  color:var(--text-faint);text-transform:uppercase;margin-top:3px;}
.topsearch{flex:1 1 auto;max-width:560px;}
.topsearch input{width:100%;height:40px;padding:0 16px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--text);border-radius:var(--radius);font-family:var(--mono);
  font-size:12.5px;letter-spacing:1px;text-transform:uppercase;}
.topsearch input::placeholder{color:var(--text-faint);}
.topsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,255,.15);outline:none;}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-soft);flex:0 0 auto;}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--online);
  box-shadow:0 0 10px var(--online);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* =========================== LAYOUT =================================== */
.container,.container--wide{max-width:var(--maxw);margin:0 auto;padding:18px;display:grid;
  grid-template-columns:var(--side) minmax(0,1fr);gap:20px;align-items:start;}
.sidebar{position:sticky;top:80px;}
.rail{display:none;}              /* design has no right rail */

/* breadcrumb */
.breadcrumb{max-width:var(--maxw);margin:0 auto;padding:10px 20px 0;}
.breadcrumb__inner{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-faint);display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.breadcrumb__inner a{color:var(--text-soft);}
.breadcrumb__sep{color:var(--accent);}

/* =========================== SIDE NAV ================================= */
.navbox{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);overflow:hidden;}
.navbox__head{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-faint);padding:14px 16px 10px;}
.navlist{list-style:none;margin:0;padding:0 8px 8px;}
.navlist a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius);
  color:var(--text-soft);font-family:var(--font-display);font-weight:600;font-size:15px;
  letter-spacing:.6px;text-transform:uppercase;position:relative;}
.navlist a .num{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text-faint);letter-spacing:0;}
.navlist a .dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);opacity:0;}
.navlist a:hover{background:var(--surface-2);color:var(--text);}
.navlist a:hover .num{color:var(--accent-2);}
.navlist a.active{background:linear-gradient(90deg,rgba(47,107,255,.16),transparent);color:#fff;
  box-shadow:inset 2px 0 0 var(--accent);}
.navlist a.active .num{color:var(--accent-2);}
.navlist a.active .dot{opacity:1;}
.navfoot{border-top:1px solid var(--border);padding:14px 16px;font-family:var(--mono);font-size:10px;
  letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);line-height:1.7;}

/* secondary "on this page" box */
.side-box{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);
  overflow:hidden;margin-top:14px;}
.side-box__title{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-faint);padding:12px 16px 8px;}
.side-nav{list-style:none;margin:0;padding:0 8px 10px;}
.side-nav a{display:block;padding:7px 12px;border-radius:var(--radius);color:var(--text-soft);font-size:13px;}
.side-nav a:hover{background:var(--surface-2);color:var(--text);}
.side-nav a[aria-current="page"]{color:#fff;box-shadow:inset 2px 0 0 var(--accent);background:var(--surface-2);}
.badge-new{display:inline-block;background:var(--accent);color:#fff;font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:1px;padding:1px 6px;border-radius:3px;vertical-align:middle;text-transform:uppercase;}

/* =========================== CONTENT CARD ============================= */
.content{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 30px 34px;position:relative;}
.content>*:first-child{margin-top:0;}
.page-title{font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1.05;
  text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;color:#fff;}
.page-meta{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--text-faint);
  border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:20px;display:flex;
  flex-wrap:wrap;gap:8px 18px;text-transform:uppercase;}
.page-meta b{color:var(--text-soft);font-weight:600;}
.content h2{font-family:var(--font-display);font-size:21px;font-weight:600;text-transform:uppercase;
  letter-spacing:.6px;margin:32px 0 14px;padding:0 0 10px 16px;color:#fff;position:relative;
  border-bottom:1px solid var(--border);}
.content h2::before{content:"";position:absolute;left:0;top:2px;width:5px;height:18px;
  background:linear-gradient(var(--accent),var(--accent-dark));box-shadow:0 0 10px var(--accent);}
.content h3{font-family:var(--font-display);font-size:16.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--accent-2);margin:22px 0 10px;}
.content p{margin:0 0 13px;}
.content ul,.content ol{margin:0 0 14px;padding-left:20px;}
.content li{margin-bottom:6px;}
.content b{color:#fff;}

/* TOC */
.toc{border:1px solid var(--border);border-radius:var(--radius);margin:0 0 22px;background:var(--surface);}
.toc__head{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);padding:11px 16px;border-bottom:1px solid var(--border);}
.toc ul{list-style:none;margin:0;padding:12px 16px;columns:2;column-gap:26px;}
.toc li{margin:0 0 8px;break-inside:avoid;font-size:13px;}
.toc a::before{content:"› ";color:var(--accent);}

/* =========================== CALLOUTS ================================= */
.callout{border-radius:var(--radius);padding:13px 15px 13px 16px;margin:0 0 18px;font-size:13.5px;
  border:1px solid var(--border);border-left:4px solid var(--tip);background:var(--tip-bg);}
.callout__label{display:block;font-family:var(--mono);font-weight:700;margin-bottom:4px;font-size:11px;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--tip);}
.callout--tip{border-left-color:var(--tip);background:var(--tip-bg);}
.callout--tip .callout__label{color:var(--tip);}
.callout--warn{border-left-color:var(--warn);background:var(--warn-bg);}
.callout--warn .callout__label{color:var(--warn);}
.callout--point{border-left-color:var(--accent);background:rgba(47,107,255,.10);}
.callout--point .callout__label{color:var(--accent-2);}

/* =========================== TABLES ================================== */
.table-scroll{overflow-x:auto;margin:0 0 20px;border:1px solid var(--border);border-radius:var(--radius);}
table.data{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);}
table.data th,table.data td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:middle;}
table.data thead th{background:var(--surface-3);color:#fff;font-family:var(--mono);font-size:11px;
  letter-spacing:1px;text-transform:uppercase;text-align:center;}
table.data tbody tr:nth-child(even){background:rgba(255,255,255,.018);}
table.data tbody tr:hover{background:rgba(47,107,255,.08);}
table.data td.center,table.data th.center{text-align:center;}
.rowhead{background:var(--surface-3)!important;font-family:var(--mono);font-weight:700;color:#fff;
  text-align:center;white-space:nowrap;}

/* =========================== TIER LIST =============================== */
.tierlist{width:100%;border-collapse:collapse;margin:0 0 22px;border:1px solid var(--border);}
.tierlist td{border:1px solid var(--border);padding:10px;vertical-align:middle;background:var(--surface);}
.tier-rank{width:74px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:24px;
  color:#0a0a0a;text-shadow:0 1px 1px rgba(255,255,255,.25);}
.tier-rank.splus{background:var(--tier-splus);}
.tier-rank.s{background:var(--tier-s);}
.tier-rank.a{background:var(--tier-a);}
.tier-rank.b{background:var(--tier-b);}
.tier-rank.c{background:var(--tier-c);}
.tier-row{display:flex;flex-wrap:wrap;gap:9px;}

/* chips / emblems */
.chip{display:inline-flex;flex-direction:column;align-items:center;width:78px;color:var(--text);}
.chip:hover{color:#fff;}
.chip:hover .chip__img{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 0 1px var(--border-glow);}
.chip__img{width:60px;height:60px;border-radius:6px;display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:18px;border:1px solid var(--border-2);
  transition:transform .12s ease,box-shadow .12s ease;position:relative;overflow:hidden;}
.chip__name{font-size:10.5px;margin-top:6px;text-align:center;line-height:1.25;color:var(--text-soft);font-weight:500;}
.chip__img.featured{box-shadow:0 0 0 1px var(--accent),0 0 14px rgba(47,107,255,.45);}
.chip__img .ph,.gcard__banner .ph,.char-portrait .ph{position:relative;z-index:0;}
.chip__img img,.gcard__banner img,.char-portrait img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;z-index:1;}

.k1{background:linear-gradient(135deg,#9f67ff,var(--c1));}
.k2{background:linear-gradient(135deg,#6d6bf5,var(--c2));}
.k3{background:linear-gradient(135deg,#5cb0ec,var(--c3));}
.k4{background:linear-gradient(135deg,#2dd4bf,var(--c4));}
.k5{background:linear-gradient(135deg,#e26ef0,var(--c5));}
.k6{background:linear-gradient(135deg,#f7558c,var(--c6));}
.k7{background:linear-gradient(135deg,#f5a83c,var(--c7));}
.k8{background:linear-gradient(135deg,#4ade80,var(--c8));}
.k9{background:linear-gradient(135deg,#f87171,var(--c9));}
.k10{background:linear-gradient(135deg,#56c5f5,var(--c10));}

/* =========================== CARD GRID =============================== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:0 0 22px;}
.gcard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;color:var(--text);position:relative;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;}
.gcard:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:0 10px 26px rgba(0,0,0,.5);color:#fff;}
.gcard__banner{height:92px;display:grid;place-items:center;color:#fff;font-family:var(--font-display);
  font-size:30px;font-weight:700;position:relative;overflow:hidden;}
.gcard__body{padding:11px 13px 13px;}
.gcard__title{font-family:var(--font-display);font-weight:600;font-size:15px;text-transform:uppercase;
  letter-spacing:.4px;margin:0 0 5px;color:#fff;}
.gcard__sub{font-size:12px;color:var(--text-soft);}
.gcard__note{font-size:10.5px;color:var(--text-faint);margin:5px 0 0;line-height:1.4;}
.card-new{position:absolute;top:8px;right:8px;background:var(--accent);color:#fff;font-family:var(--mono);
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:1px;z-index:2;text-transform:uppercase;}

/* =========================== PROS / CONS ============================= */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px;}
.pc{border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.pc__head{font-family:var(--font-display);font-weight:600;padding:9px 14px;font-size:14px;color:#fff;
  text-transform:uppercase;letter-spacing:1px;}
.pc--pro .pc__head{background:rgba(52,211,153,.16);color:var(--good);}
.pc--con .pc__head{background:rgba(248,113,113,.16);color:var(--bad);}
.pc ul{list-style:none;margin:0;padding:12px 14px;}
.pc li{position:relative;padding-left:22px;margin-bottom:8px;font-size:13px;}
.pc--pro li::before{content:"+";position:absolute;left:0;color:var(--good);font-weight:800;}
.pc--con li::before{content:"\2212";position:absolute;left:0;color:var(--bad);font-weight:800;}
.pc--pro{background:var(--good-bg);}
.pc--con{background:var(--bad-bg);}

/* =========================== STARS + BARS =========================== */
.stars{color:#fbbf24;font-size:17px;letter-spacing:1px;}
.statbar{display:grid;grid-template-columns:110px 1fr 44px;gap:10px;align-items:center;margin-bottom:9px;font-size:12.5px;}
.statbar__label{color:var(--text-soft);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;}
.statbar__track{height:9px;border-radius:2px;background:var(--surface-3);overflow:hidden;border:1px solid var(--border);}
.statbar__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(47,107,255,.6);}
.statbar__num{text-align:right;font-family:var(--mono);color:#fff;font-weight:700;}

/* =========================== PILLS / BADGES ========================= */
.pill{display:inline-block;padding:2px 9px;border-radius:3px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.5px;line-height:1.7;color:#fff;text-transform:uppercase;}
.pill--dps{background:#c0392b;} .pill--sup{background:#2563eb;} .pill--heal{background:#16a34a;}
.pill--farm{background:#a16207;} .pill--mythic{background:#b91c1c;} .pill--secret{background:#0f766e;}
.pill--universal{background:linear-gradient(90deg,var(--accent),var(--c5));}
.pill--boundless{background:linear-gradient(90deg,#f59e0b,#c026d3);}
.pill--unrivaled{background:linear-gradient(90deg,#dc2626,#ea580c);}
.pill--synchro{background:linear-gradient(90deg,#0d9488,#0ea5e9);}
.pill--legendary{background:#b45309;} .pill--epic{background:#7c3aed;} .pill--rare{background:#2563eb;}
.pill--ghost{background:transparent;color:var(--accent-2);border:1px solid var(--border-2);}

/* =========================== BUTTONS ================================ */
.btn{display:inline-block;padding:11px 20px;font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:1px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  box-shadow:0 0 18px rgba(47,107,255,.35);}
.btn:hover{color:#fff;filter:brightness(1.12);box-shadow:0 0 26px rgba(47,107,255,.55);}
.btn--ghost{background:transparent;color:var(--accent-2);border:1px solid var(--border-2);box-shadow:none;}
.btn--ghost:hover{background:rgba(47,107,255,.10);border-color:var(--accent);filter:none;}

/* =========================== CODES ================================= */
.codes{display:flex;flex-direction:column;gap:10px;margin:0 0 22px;}
.code-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:12px 15px;}
.code-row.is-new{border-left-color:var(--live);box-shadow:0 0 18px rgba(255,59,107,.12);}
.code-key{font-family:var(--mono);font-weight:700;font-size:14px;color:#fff;background:rgba(47,107,255,.14);
  padding:6px 11px;border-radius:3px;white-space:nowrap;}
.code-reward{font-size:12.5px;color:var(--text-soft);}
.code-reward i{color:var(--text-faint);}
.code-copy{border:1px solid var(--border-2);background:transparent;color:var(--accent-2);font-family:var(--mono);
  font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:7px 14px;border-radius:3px;
  cursor:pointer;white-space:nowrap;transition:background .12s ease;}
.code-copy:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.code-copy.copied{background:var(--good);border-color:var(--good);color:#04140c;}
@media (max-width:560px){.code-row{grid-template-columns:1fr auto;}.code-reward{grid-column:1/-1;order:3;}}

/* =========================== TIMELINE ============================== */
.timeline{list-style:none;margin:0 0 20px;padding:0 0 0 22px;border-left:2px solid var(--border-2);}
.timeline li{position:relative;margin-bottom:16px;}
.timeline li::before{content:"";position:absolute;left:-29px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent);}
.timeline li.cur::before{background:var(--live);box-shadow:0 0 12px var(--live);}
.timeline .tl-ver{font-family:var(--font-display);font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.timeline .tl-date{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-left:8px;}
.timeline p{margin:4px 0 0;font-size:13px;color:var(--text-soft);}

/* =========================== HERO + STATS ========================== */
.hero{position:relative;overflow:hidden;border:1px solid var(--border-2);background:
  linear-gradient(120deg,rgba(47,107,255,.10),transparent 55%),var(--surface);
  border-radius:var(--radius);padding:34px 38px;margin-bottom:18px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);}
.hero::before{content:"";position:absolute;top:18px;right:18px;width:34px;height:34px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);opacity:.7;}
.hero__tag{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-soft);display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.hero__tag .live{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);
  animation:pulse 1.6s infinite;}
.hero__tag b{color:var(--live);}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:54px;line-height:.98;text-transform:uppercase;
  letter-spacing:.5px;margin:0 0 16px;color:#fff;}
.hero h1 .x{color:var(--accent);}
.hero h1 .hub{color:var(--text-faint);}
.hero p{max-width:620px;color:var(--text-soft);font-size:14.5px;margin:0 0 22px;}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;}
@media (max-width:680px){.hero h1{font-size:38px;}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 26px;}
.stat{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:18px 18px;
  position:relative;overflow:hidden;}
.stat::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--accent);opacity:.7;}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;color:#fff;}
.stat__label{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);margin-top:6px;}
@media (max-width:680px){.stats{grid-template-columns:repeat(2,1fr);}}

.section-tag{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-soft);margin:6px 0 14px;}
.section-tag .n{color:var(--accent);}

.updates{list-style:none;margin:0;padding:0;}
.updates li{border-top:1px solid var(--border);padding:10px 14px;font-size:12.5px;color:var(--text-soft);}
.updates li:first-child{border-top:none;}
.updates time{display:block;font-family:var(--mono);font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;}

/* =========================== MISC COMPONENTS ======================= */
.legend{display:flex;flex-wrap:wrap;gap:9px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 15px;margin:0 0 16px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--text-soft);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.roletag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-soft);}
.rarity-head{display:flex;align-items:center;gap:10px;margin:24px 0 12px;}
.rarity-head h3{margin:0;font-family:var(--font-display);font-size:18px;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.rarity-head .count{font-family:var(--mono);font-size:10.5px;font-weight:700;color:#fff;background:var(--accent);padding:2px 9px;border-radius:999px;}
.rarity-head .complete{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--good);background:var(--good-bg);padding:2px 9px;border-radius:999px;text-transform:uppercase;}

/* unit detail header */
.char-head{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(47,107,255,.10),transparent),var(--surface);
  border:1px solid var(--border-2);border-radius:var(--radius);padding:18px;}
.char-portrait{width:120px;height:120px;border-radius:8px;display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-size:42px;font-weight:700;border:1px solid var(--border-2);
  box-shadow:0 0 22px rgba(47,107,255,.3);position:relative;overflow:hidden;}
.char-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;}
.char-rating{font-size:12.5px;color:var(--text-soft);}
@media (max-width:560px){.char-head{grid-template-columns:1fr;text-align:center;}.char-portrait{margin:0 auto;}.char-tags{justify-content:center;}}

.spec{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:0 0 18px;font-size:13px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.spec dt{color:var(--text-faint);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;}
.spec dd{margin:0;color:var(--text);}

/* beginner steps */
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;margin:0 0 16px;align-items:start;}
.step__num{width:44px;height:44px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;
  font-size:18px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%);box-shadow:0 0 14px rgba(47,107,255,.4);}
.step__body h3{margin-top:2px;}

/* builds */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin:0 0 16px;}
.slot{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:13px 11px;text-align:center;}
.slot__role{font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--accent-2);display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px;}
.slot .chip{width:auto;}
.slot__trait{margin-top:9px;font-size:11.5px;color:var(--text-soft);display:flex;align-items:center;justify-content:center;gap:5px;}
.slot__trait b{color:#fff;}
.buildcard{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius);
  background:var(--surface);padding:15px 17px;margin:0 0 12px;}
.buildcard h3{margin:0 0 10px;display:flex;align-items:center;gap:8px;}
.buildcard dl{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;margin:0;font-size:13px;}
.buildcard dt{color:var(--text-faint);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.buildcard dd{margin:0;}

/* units filter */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.filter-btn{padding:7px 16px;border-radius:3px;border:1px solid var(--border-2);background:transparent;
  color:var(--text-soft);font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;}
.filter-btn:hover{border-color:var(--accent);color:var(--accent-2);}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* discord note */
.discord-note{display:flex;align-items:center;gap:10px;background:rgba(47,107,255,.08);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:var(--radius);padding:11px 15px;margin:0 0 16px;font-size:12.5px;color:var(--text-soft);}
.discord-note b{color:#fff;}
.discord-note code{font-family:var(--mono);font-size:11px;color:var(--accent-2);}

/* =========================== FOOTER =============================== */
.site-footer{margin-top:34px;border-top:1px solid var(--border);background:var(--panel);}
.site-footer__inner{max-width:var(--maxw);margin:0 auto;padding:24px 20px;}
.site-footer .logo{display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:17px;text-transform:uppercase;}
.site-footer__note{color:var(--text-faint);font-size:12px;margin-top:10px;max-width:760px;}
.logo__mark{display:inline-grid;place-items:center;width:30px;height:30px;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));clip-path:polygon(0 0,100% 0,100% 70%,80% 100%,0 100%);}

/* =========================== RESPONSIVE ========================== */
@media (max-width:980px){
  .container,.container--wide{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .brand{width:auto;}
  .brand__sub{display:none;}
}
@media (max-width:560px){
  .topbar__inner{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px;}
  .topsearch{order:3;flex-basis:100%;max-width:none;}
  .content{padding:18px 16px 24px;}
  .page-title{font-size:26px;}
  .proscons{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* =========================================================================
   ICON SYSTEM — external SVG files (public/images/icons)
   ========================================================================= */
.ico{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.18em;flex:0 0 auto;
  background-size:contain;background-repeat:no-repeat;background-position:center;}
.ico--lg{width:20px;height:20px;} .ico--xl{width:30px;height:30px;}
.ico--gem{background-image:url("/images/icons/gem.svg");}
.ico--ugem{background-image:url("/images/icons/ugem.svg");}
.ico--gold{background-image:url("/images/icons/gold.svg");}
.ico--reroll{background-image:url("/images/icons/reroll.svg");}
.ico--relic{background-image:url("/images/icons/relic.svg");}
.ico--fragment{background-image:url("/images/icons/fragment.svg");}
.ico--stat{background-image:url("/images/icons/stat.svg");}
.ico--lock{background-image:url("/images/icons/lock.svg");}
.ico--pass{background-image:url("/images/icons/pass.svg");}
.ico--mount{background-image:url("/images/icons/mount.svg");}
.ico--emote{background-image:url("/images/icons/emote.svg");}
.ico--code{background-image:url("/images/icons/code.svg");}
.ico--evolve{background-image:url("/images/icons/evolve.svg");}
.ico--capsule{background-image:url("/images/icons/capsule.svg");}
.ico--dps{background-image:url("/images/icons/dps.svg");}
.ico--sup{background-image:url("/images/icons/sup.svg");}
.ico--farm{background-image:url("/images/icons/farm.svg");}
.ico--boss{background-image:url("/images/icons/boss.svg");}
.ico--universal{background-image:url("/images/icons/universal.svg");}
.ico--leader{background-image:url("/images/icons/leader.svg");}
.ico--tank{background-image:url("/images/icons/tank.svg");}