/* Aion 2 Class Guides: shared styles for index.html (home) and the 8 class pages.
   Poster look: neon headline, dark panels, in-game macro / stigma windows. */
:root{
  --ink:#0b0708; --ember:#5a0d16;
  --panel:#1b2029; --panel-2:#232a35; --edge:#343d4b;
  --text:#eef0f3; --muted:#98a1b0; --dim:#6f7888;
  --neon:#d9f41c; --gold:#e3a918; --gold-2:#b67e0a;
  --warn:#ff6a5c; --ok:#5fd18a; --info:#6fb6ff;
  --t-s:#ff5c7a; --t-a:#ffb13b; --t-b:#5fd18a; --t-c:#6f7888;
  --f-display:"Archivo","Arial Black",Impact,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-ui:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-tc:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:110px}
body{
  margin:0;
  background:
    radial-gradient(70% 40% at 50% 12%, var(--ember) 0%, transparent 70%),
    radial-gradient(40% 25% at 8% 55%, #3a0a14 0%, transparent 70%),
    radial-gradient(40% 25% at 92% 55%, #3a0a14 0%, transparent 70%),
    var(--ink);
  color:var(--text); font:15px/1.5 var(--f-body);
  padding-block:clamp(14px,3vw,36px); padding-inline:clamp(16px,3vw,36px); min-height:100vh;
}
.wrap{max-width:1400px;margin:0 auto;display:grid;gap:clamp(22px,3vw,36px)}
a{color:#c7ccd4} a:focus-visible,button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.tc{font-family:var(--f-tc);font-weight:500}
p{margin:0}

/* ---------- site nav (Home + 8 classes) ---------- */
.sitenav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.sitenav a{display:grid;gap:2px;justify-items:center;text-decoration:none;padding:8px 12px;border:1px solid #3b4453;background:#12161c;color:var(--muted);font:800 .86rem/1 var(--f-display);font-stretch:108%;text-transform:uppercase;letter-spacing:.02em}
.sitenav a small{font:500 .7rem/1 var(--f-tc);color:var(--dim);text-transform:none;letter-spacing:0}
.sitenav a.home{font:700 .86rem/1 var(--f-ui);letter-spacing:.12em;justify-content:center;align-content:center}
.sitenav a[aria-current="page"]{background:var(--neon);color:#1b1f05;border-color:var(--neon)}
.sitenav a[aria-current="page"] small{color:#3d4510}
.sitenav a:hover:not([aria-current]){border-color:#6a7385;color:#fff}
@media (max-width:760px){
  .sitenav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .sitenav::-webkit-scrollbar{display:none}
  .sitenav a{flex:none;padding:8px 10px;font-size:.78rem}
  .sitenav a small{display:none}
}

/* ---------- header ---------- */
header{text-align:center;display:grid;gap:12px;justify-items:center}
h1{margin:0;font-family:var(--f-display);font-weight:900;font-stretch:118%;font-size:clamp(2.2rem,7vw,5.2rem);line-height:.95;color:var(--neon);text-transform:uppercase;text-wrap:balance;text-shadow:0 0 28px rgba(217,244,28,.28),0 4px 0 rgba(0,0,0,.55)}
h1 .tc{display:block;margin-top:8px;font-size:.32em;color:var(--muted);text-shadow:none;letter-spacing:.04em}
.sub{margin:0;color:#c9ced6;max-width:76ch;text-wrap:pretty}
.sub b{color:var(--text);font-weight:600}
.role{font:600 .82rem/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stamp{font:600 .8rem/1.2 var(--f-ui);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.stamp b{color:var(--ok)}
.notice{margin:0;max-width:80ch;padding:9px 14px;border:1px solid #6b4b12;background:rgba(227,169,24,.08);color:#f3dca0;font-size:.86rem;text-align:left}
.switch{display:inline-flex;flex-wrap:wrap;justify-content:center;border:1px solid #3b4453;background:#12161c;padding:3px;gap:3px}
.switch button{appearance:none;border:0;background:transparent;color:var(--muted);font:700 .9rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.switch button[aria-pressed="true"]{background:var(--neon);color:#1b1f05}

/* ---------- section nav (class pages) ---------- */
.secnav{position:sticky;top:0;z-index:20;display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:8px 0;background:linear-gradient(rgba(11,7,8,.97),rgba(11,7,8,.9));backdrop-filter:blur(4px)}
.secnav a{font:700 .82rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:9px 12px;border:1px solid #2f3744;background:#12161c}
.secnav a.on{color:#1b1f05;background:var(--neon);border-color:var(--neon)}
.secnav a:hover:not(.on){color:#fff;border-color:#6a7385}
@media (max-width:760px){
  .secnav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .secnav::-webkit-scrollbar{display:none}
  .secnav a{flex:none;padding:8px 10px;font-size:.74rem}
}

/* ---------- panels ---------- */
.panel{background:rgba(20,24,31,.94);border:1px solid #2b323d;padding:clamp(16px,2vw,26px);display:grid;gap:16px;align-content:start;min-width:0}
.panel h2,.panel h3{margin:0;font-family:var(--f-display);font-weight:900;font-stretch:112%;text-transform:uppercase;line-height:1.05;color:#fff;text-wrap:balance}
.panel h2{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.panel h3{font-size:clamp(1rem,1.5vw,1.15rem)}
.panel h2 small,.panel h3 small{display:block;margin-top:6px;font:600 .74rem/1.3 var(--f-ui);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.panel.inset{background:#141920}
.sec-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 20px}
.k{display:inline-block;font:700 .68rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;margin-right:6px;color:var(--neon)}
.k.gold{color:var(--gold)} .k.red{color:var(--warn)} .k.blue{color:var(--info)}
h4{margin:0;font:700 .8rem/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
.src{font:600 .74rem/1.35 var(--f-ui);letter-spacing:.03em;color:var(--dim)}
.src a{color:var(--muted)}
.snote{margin:0;font-size:.84rem;color:#cfd4dc}
.loading,.err{text-align:center;color:var(--muted);padding:40px 0}
.err{color:var(--warn)}
kbd{font:600 .8rem/1 var(--f-ui);padding:2px 6px;border:1px solid #4a5364;border-bottom-width:2px;background:#232a35;color:#fff;white-space:nowrap}
.path{font:600 .88rem/1.35 var(--f-ui);color:var(--neon)}
ul.facts,ul.rules{margin:0;padding:0;list-style:none;display:grid;gap:9px}
ul.facts li,ul.rules li{padding-left:11px;border-left:2px solid #3a4352}
ul.facts li.warn,ul.rules li.no,ul.rules li.warn{border-left-color:var(--warn)}
ul.facts li.good,ul.rules li.yes{border-left-color:var(--ok)}
ul.facts b,ul.rules b{color:#fff}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #2e3643;vertical-align:top}
th{font:700 .66rem/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
td b{color:#fff}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:1100px){.cols3,.cols2{grid-template-columns:minmax(0,1fr)}}
.col{display:grid;gap:10px;align-content:start;min-width:0;font-size:.9rem;color:#d4d8de}
.col b{color:#fff}

/* ---------- icons, chips ---------- */
img.ic,.ic{width:32px;height:32px;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(0,0,0,.6);background:#0d1117;object-fit:cover;display:block;flex:none}
.ic.sm{width:22px;height:22px}
.ic.none{background:#171b22;border-style:dashed;border-color:#3b4453;box-shadow:none}
.none{display:grid!important;place-items:center;background:#171b22;color:var(--muted);font:800 .9rem/1 var(--f-display)}
.chips,.crow{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;background:#1f252f;border:1px solid #394252;font:600 .8rem/1.1 var(--f-ui);color:#fff}
.chip img,.chip .none,.chip .ic{width:22px;height:22px;flex:none;font-size:.6rem}
.chip .tc{color:var(--muted);font-size:.72rem}
.chip.key{padding:3px 8px;background:#262d38}
.chip .to{color:var(--neon);font-weight:700}
.chip .to.a{color:var(--gold)}
.plus{color:var(--muted);font:700 .85rem/1 var(--f-ui)}

/* ---------- macro window (replica of the in-game window) ---------- */
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.84rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.pr{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #4a5364;font:700 .72rem/1 var(--f-ui);font-style:normal;color:#fff;background:#11151b;flex:none}
.pr.p0{background:var(--neon);color:#1b1f05;border-color:var(--neon)}
.mac{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:start}
@media (max-width:900px){.mac{grid-template-columns:minmax(0,1fr)}}
.mac-l{display:grid;gap:12px;min-width:0}
.mw{background:var(--panel);border:1px solid var(--edge);box-shadow:0 14px 30px rgba(0,0,0,.55);min-width:0}
.mw-top{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-bottom:1px solid var(--edge);background:linear-gradient(#262d38,#1f252f);font:600 .82rem/1 var(--f-ui);color:#cfd4dc}
.mw-top::before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;background:#8b95a3;transform:translateX(-50%) rotate(45deg)}
.mw-top .tc{font-size:.78rem;color:var(--muted)}
.mw-top .x{position:absolute;right:9px;color:#8a93a1}
.rec{display:inline-block;font:700 .66rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#1b1f05;background:var(--gold);padding:3px 6px;margin-left:6px;vertical-align:middle}
.rec.full{background:var(--warn);color:#2a0705}
.entry{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;padding:10px 10px 9px;border-bottom:1px solid #2a313c}
.entry .n{font:700 1rem/1 var(--f-ui);color:#aeb5c0;padding-top:4px}
.stackwrap{display:grid;gap:5px;min-width:0}
.stack{display:grid;gap:4px;padding:6px;background:#161b23;border:1px solid #2b323d;min-width:0}
.sk{display:grid;grid-template-columns:20px 32px minmax(0,1fr);gap:7px;align-items:center;min-width:0}
.sk .nm{font:600 .86rem/1.15 var(--f-ui);color:#fff;overflow-wrap:anywhere}
.sk .nm small{display:flex;flex-wrap:wrap;gap:0 8px;font:500 .74rem/1.2 var(--f-tc);color:var(--muted)}
.sk .cd{font:600 .7rem/1.3 var(--f-ui);color:var(--dim);letter-spacing:.02em}
.sk.empty .nm{color:var(--dim);font-weight:500}
.flag{font:700 .6rem/1 var(--f-ui);letter-spacing:.08em;color:var(--info);text-transform:uppercase;margin-left:4px}
.keyrow{display:flex;align-items:center;gap:7px;padding:4px 6px;background:#0f1318;border:1px solid #3b4453;font:600 .7rem/1.2 var(--f-ui);letter-spacing:.04em;color:var(--muted)}
.keyrow .ic{opacity:.55}
.keyrow.again{padding:7px 8px;background:#161b23;border-color:#2b323d;color:#cfd4dc;font-size:.78rem}
.keyrow.again .ic{opacity:1}
.keyrow.again b{color:#fff}
.delay{display:flex;align-items:center;gap:6px;margin-top:4px;font:500 .72rem/1 var(--f-ui);color:#aeb5c0}
.delay b{display:inline-block;min-width:34px;padding:3px 4px;background:#11151b;border:1px solid #3b4453;color:#fff;text-align:center;font-variant-numeric:tabular-nums}
.add{margin:11px auto;display:block;width:max-content;padding:6px 22px;background:linear-gradient(#f2c23a,var(--gold) 55%,var(--gold-2));color:#3a2600;font:700 .74rem/1 var(--f-ui);border:1px solid #f7d56b;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.keys{display:grid;gap:8px;padding:10px;background:rgba(15,19,24,.9);border:1px solid #2b323d}
.keys-h{font:700 .72rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.extra{display:grid;gap:6px}
.notes{display:grid;gap:10px;font-size:.9rem;line-height:1.5;color:#d4d8de;align-content:start;min-width:0}
.notes .loss,.notes .patch{border-left:2px solid var(--warn);padding-left:9px}
.notes .check{border-left:2px solid var(--info);padding-left:9px}
details{border:1px solid #2b323d;background:#141920}
details summary{cursor:pointer;padding:9px 12px;font:700 .8rem/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
details[open] summary{border-bottom:1px solid #2b323d}
details .inner{padding:12px;display:grid;gap:16px;font-size:.86rem;color:#cfd4dc}
.alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.alt{display:grid;gap:8px;align-content:start}
.alt>b{font:700 .92rem/1.2 var(--f-ui);color:#fff}
.alt p{color:#cfd4dc}
.alt .mw{box-shadow:none}

/* ---------- class overview ---------- */
.ov{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,2.4vw,30px)}
@media (max-width:1000px){.ov{grid-template-columns:minmax(0,1fr)}}
.ov-sum{font-size:1rem;line-height:1.6;color:#e2e5ea;max-width:80ch}
ul.brings,ul.core{margin:0;padding:0;list-style:none;display:grid;gap:10px}
ul.brings li,ul.core li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;font-size:.88rem;color:#d4d8de}
ul.brings img,ul.brings .none,ul.core img,ul.core .none{width:34px;height:34px;border:1px solid rgba(255,255,255,.2)}
ul.brings b,ul.core b{display:block;font:700 .86rem/1.2 var(--f-ui);color:#fff}
ol.open{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:o}
ol.open li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;counter-increment:o;font-size:.88rem;color:#d4d8de;align-items:start}
ol.open li::before{content:counter(o);display:grid;place-items:center;width:26px;height:26px;background:var(--neon);color:#1b1f05;font:900 .85rem/1 var(--f-display)}
.pros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:620px){.pros{grid-template-columns:minmax(0,1fr)}}
.gear dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;font-size:.88rem}
.gear dt{font:700 .74rem/1.4 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gear dd{margin:0;color:#d4d8de}
@media (max-width:620px){.gear dl{grid-template-columns:minmax(0,1fr)}.gear dd{margin-bottom:6px}}

/* ---------- stigma window ---------- */
.cls-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(16px,2vw,26px);align-items:start}
@media (max-width:1100px){.cls-grid{grid-template-columns:minmax(0,1fr)}}
.stk{display:grid;gap:clamp(16px,2vw,22px);min-width:0}
.sw{background:var(--panel);border:1px solid var(--edge);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.sw-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--edge);background:linear-gradient(#262d38,#1f252f)}
.sw-title{font:700 .95rem/1.1 var(--f-ui);color:#fff;letter-spacing:.02em}
.tag{font:700 .64rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;background:#2c3441;color:#cfd4dc;white-space:nowrap}
.tag.main{background:var(--neon);color:#1b1f05}
.tag.tank{background:#6fb6ff;color:#06203a}
.tag.heal{background:var(--ok);color:#06240f}
.tag.raid{background:var(--warn);color:#2a0705}
.tag.pvp{background:#b18cff;color:#1d0d3a}
.tag.solo{background:#e8ebef;color:#1b1f25}
.tag.img{background:var(--gold);color:#3a2600}
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:14px 12px 12px}
.sw.small .slots{gap:8px;padding:12px 10px 10px}
.slots.n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:560px}
.slots.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:620px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}.slots.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.slots.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slot{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;min-width:0}
.slot .frame{position:relative;width:100%;max-width:64px;aspect-ratio:1;border:1px solid #4a5364;background:#0d1117;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 3px #151a21}
.sw.small .slot .frame{max-width:48px}
.slot .frame img,.slot .frame .none{display:block;width:100%;height:100%;object-fit:cover}
.slot .no{position:absolute;top:-7px;left:-7px;width:18px;height:18px;display:grid;place-items:center;background:#0b0e12;border:1px solid #4a5364;font:700 .66rem/1 var(--f-ui);font-style:normal;color:#cfd4dc}
.lvb{position:absolute;right:-6px;bottom:-7px;min-width:24px;padding:3px 4px;font:800 .72rem/1 var(--f-display);text-align:center;background:#232a35;color:#fff;border:1px solid #4a5364}
.lvb.l25{background:linear-gradient(#f2c23a,var(--gold) 55%,var(--gold-2));color:#2c1c00;border-color:#f7d56b}
.lvb.l2x{background:#3a3217;color:#f3dca0;border-color:#8a7426}
.lvb.l20{background:#2b3240;color:#fff;border-color:#6a7385}
.lvb.lo{background:#171b22;color:var(--muted)}
.slot .nm{font:600 .8rem/1.12 var(--f-ui);color:#fff;overflow-wrap:break-word;hyphens:auto;max-width:100%}
.slot .nm small{display:block;margin-top:2px;font:500 .7rem/1.2 var(--f-tc);color:var(--muted)}
.sw-body{padding:0 14px 14px;display:grid;gap:8px;font-size:.88rem;color:#d4d8de}
.variants{display:grid;gap:clamp(12px,1.6vw,16px)}
.vh{margin:4px 0 -4px;font:700 .8rem/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.variants .sw{box-shadow:none}
.match{font:600 .72rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
.slot.miss .frame{outline:2px dashed var(--warn);outline-offset:2px}
.slot.hit .frame{outline:2px solid var(--ok);outline-offset:2px}
body[data-mode="gl"] .kr-only,body[data-mode="kr"] .gl-only{display:none}

/* level-up order */
ol.prio{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:p}
ol.prio li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;counter-increment:p}
ol.prio li::before{content:counter(p);display:grid;place-items:center;width:30px;height:30px;background:var(--neon);color:#1b1f05;font:900 .95rem/1 var(--f-display)}
ol.prio li.adv::before{background:var(--gold);color:#2c1c00}
.cost{margin-top:5px;font:600 .74rem/1.3 var(--f-ui);letter-spacing:.03em;color:var(--muted);font-variant-numeric:tabular-nums}
.cost b{color:#fff}
.pnote{margin:4px 0 0;font-size:.84rem;color:#cfd4dc}
ul.ms{margin:0;padding:0;list-style:none;display:grid;gap:8px}
ul.ms li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;align-items:start;font-size:.86rem;color:#d4d8de}
ul.ms img,ul.ms .none{width:26px;height:26px}
ul.ms b{display:block;font:700 .8rem/1.2 var(--f-ui);color:#fff}
ul.lvl{margin:0;padding:0;list-style:none;display:grid;gap:10px}
ul.lvl li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;font-size:.85rem;color:#d4d8de}
ul.lvl img,ul.lvl .none{width:34px;height:34px;border:1px solid rgba(255,255,255,.2)}
ul.lvl b{display:block;font:700 .84rem/1.2 var(--f-ui);color:#fff}
ul.lvl .lt{display:grid;justify-items:center;gap:4px;min-width:52px}
ul.lvl .lt .lvb{position:static;font-size:.85rem;padding:4px 7px}
ul.lvl .lt small{font:600 .68rem/1 var(--f-ui);color:var(--muted);white-space:nowrap}

/* tier list */
.tiers{display:grid;gap:6px}
.tier{display:grid;grid-template-columns:44px minmax(0,1fr);background:#12161c;border:1px solid #2b323d;min-height:58px}
.tier>b{display:grid;place-items:center;font:900 1.35rem/1 var(--f-display);color:#12161c}
.tier.S>b{background:var(--t-s)} .tier.A>b{background:var(--t-a)} .tier.B>b{background:var(--t-b)} .tier.C>b{background:var(--t-c)}
.tier .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 14px;padding:9px 10px}
.ti{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center}
.ti img,.ti .none{width:34px;height:34px;border:1px solid rgba(255,255,255,.2)}
.ti .t{font:700 .8rem/1.1 var(--f-ui);color:#fff}
.ti .t small{display:block;font:500 .74rem/1.25 var(--f-body);color:var(--muted)}
.tier-key{font-size:.8rem;color:var(--muted);margin:0}

/* specializations */
.spec-rule{margin:0;font-size:.86rem;color:#cfd4dc;max-width:110ch}
.spec-rule b{color:#fff}
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.spec{background:#12161c;border:1px solid #2b323d;padding:12px;display:grid;gap:8px;align-content:start}
.spec-h{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.spec-h img,.spec-h .none{width:40px;height:40px;border:1px solid rgba(255,255,255,.22)}
.spec-h b{display:block;font:700 .95rem/1.1 var(--f-ui);color:#fff}
.spec-h small{font:500 .74rem/1.2 var(--f-tc);color:var(--muted)}
.spec-h .pick{font:800 .95rem/1 var(--f-display);color:#1b1f05;background:var(--neon);padding:6px 8px;white-space:nowrap}
ol.opts{margin:0;padding:0;list-style:none;display:grid;gap:3px}
ol.opts li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:7px;align-items:center;font-size:.8rem;color:var(--dim);padding:3px 5px;border:1px solid transparent}
ol.opts li i{display:grid;place-items:center;width:20px;height:20px;font:800 .72rem/1 var(--f-ui);font-style:normal;color:#0b0e12;opacity:.45}
ol.opts li small{font:600 .66rem/1 var(--f-ui);color:var(--dim)}
ol.opts li.on{color:#fff;background:#1d2530;border-color:#3b4453}
ol.opts li.on i{opacity:1}
ol.opts li.o1 i{background:#6fcf6a} ol.opts li.o2 i{background:#6fb6ff} ol.opts li.o3 i{background:#f2d03a} ol.opts li.o4 i{background:#ff9a3c} ol.opts li.o5 i{background:#ff5c5c}
.u20{margin:0;font-size:.8rem;color:var(--muted)} .u20 b{color:#fff}

/* skills to level */
.first2{display:grid;gap:8px;padding:12px;border:1px solid #3b4453;background:#12161c}
.first2 p{font-size:.84rem;color:#cfd4dc;max-width:110ch}
.skl-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(14px,2vw,26px)}
@media (max-width:1000px){.skl-grid{grid-template-columns:minmax(0,1fr)}}
.sh{margin:0 0 10px}
ul.skl b small{display:inline;margin-left:6px;font:500 .72rem/1.2 var(--f-tc);color:var(--muted)}
ul.skl .lt .lvb{min-width:34px}
.rt{display:inline-block;margin-left:7px;padding:2px 5px;font:700 .6rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;font-style:normal;vertical-align:middle;background:#2c3441;color:#cfd4dc}
.rt.t-dps{background:var(--warn);color:#2a0705} .rt.t-buff{background:var(--neon);color:#1b1f05} .rt.t-heal{background:var(--ok);color:#06240f} .rt.t-deb{background:#b18cff;color:#1d0d3a}

/* ---------- hover / tap card ---------- */
[data-skn],[data-sk]{cursor:help}
[data-skn]:focus-visible,[data-sk]:focus-visible{outline:2px solid var(--neon);outline-offset:1px}
.skilltip{position:fixed;z-index:50;width:min(360px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow:auto;background:#10141b;border:1px solid #4a5364;box-shadow:0 18px 40px rgba(0,0,0,.7);padding:12px 13px;display:grid;gap:8px;font-size:.84rem;line-height:1.45;color:#d4d8de;pointer-events:none}
.skilltip[hidden]{display:none}
.tt-head{display:flex;gap:10px;align-items:center}
.tt-head img{width:44px;height:44px;border:1px solid rgba(255,255,255,.25)}
.tt-name{font:700 1rem/1.1 var(--f-ui);color:#fff}
.tt-sub{font:500 .76rem/1.3 var(--f-tc);color:var(--muted)}
.tt-facts{display:flex;flex-wrap:wrap;gap:4px}
.tt-facts span{font:600 .72rem/1 var(--f-ui);letter-spacing:.03em;padding:4px 6px;background:#1f252f;border:1px solid #394252;color:#e8ebef}
.tt-desc{margin:0;white-space:pre-line}
.tt-spec-h{font:700 .68rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
.tt-specs{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.tt-specs li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px}
.tt-specs b{font:700 .72rem/1.5 var(--f-ui);color:#1b1f05;background:var(--neon);text-align:center;height:18px}
.tt-specs li.s25 b{background:var(--gold)}
.tt-note{margin:0;padding-left:8px;border-left:2px solid var(--warn);color:#f1c9c4}
.tt-foot{margin:0;font-size:.72rem;color:var(--dim)}

/* ---------- home ---------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
@media (max-width:1180px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{position:relative;display:grid;gap:10px;align-content:start;padding:16px;background:rgba(20,24,31,.94);border:1px solid #2b323d;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--neon);transform:translateY(-2px)}
.card h2{margin:0;font-family:var(--f-display);font-weight:900;font-stretch:108%;font-size:clamp(1.3rem,1.8vw,1.75rem);line-height:1;text-transform:uppercase;color:#fff}
.card h2 .tc{display:inline-block;font-size:.5em;color:var(--muted);margin-left:6px;vertical-align:middle}
.card p{font-size:.88rem;color:#cfd4dc}
.card .mini{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.card .mini img,.card .mini .none{width:30px;height:30px;border:1px solid rgba(255,255,255,.2)}
.card .mini span{font:700 .64rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px;min-width:70px}
.card .go{font:700 .76rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
ol.steps{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
ol.steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;counter-increment:s;font-size:.9rem;color:#d4d8de}
ol.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;background:var(--neon);color:#1b1f05;font:900 .95rem/1 var(--f-display)}
ol.steps b{color:#fff}
.demo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.demo-col{display:grid;gap:4px}
.demo-col .row{display:flex;align-items:center;gap:6px;font:600 .8rem/1 var(--f-ui);color:#cfd4dc}
.demo-col .cell{width:34px;height:34px;border:1px solid #3b4453;background:#1e242d;display:grid;place-items:center}
.demo-col .cell .ic{width:30px;height:30px}
.demo-col .hot{border-color:#6a7385;background:#0f1318}
ol.why2{margin:0;padding-left:20px;display:grid;gap:8px}
.bars{display:grid;gap:6px;padding:10px;background:#12161c;border:1px solid #2b323d}
.bar-row{display:grid;grid-template-columns:70px minmax(0,1fr) 48px;align-items:center;gap:8px;font:600 .8rem/1 var(--f-ui);color:#cfd4dc}
.bar{height:14px;background:#1f252f}
.bar i{display:block;height:100%;background:var(--neon)}
.bar-row b{text-align:right;font-variant-numeric:tabular-nums}
.cap{margin:2px 0 0;font-size:.78rem;color:var(--muted)}
.ladder{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:2px;align-items:end;padding:10px 8px 6px;background:#12161c;border:1px solid #2b323d}
.ladder .lv{display:grid;gap:3px;justify-items:center;font:600 .62rem/1 var(--f-ui);color:var(--dim)}
.ladder .lv i{display:block;width:100%;background:#3b4453}
.ladder .lv.t1 i{height:6px} .ladder .lv.t2 i{height:12px} .ladder .lv.t4 i{height:24px} .ladder .lv.t8 i{height:48px}
.ladder .lv.adv i{height:10px;background:var(--gold)}
.ladder .lv.unlock i{background:var(--neon)}
.ladder .lv.unlock.adv i{background:#fff2b8}
.ladder .lv.unlock span{color:#fff}
.lad-key{display:flex;flex-wrap:wrap;gap:6px 16px;font:600 .74rem/1.2 var(--f-ui);color:var(--muted)}
.lad-key span{display:inline-flex;gap:6px;align-items:center}
.lad-key i{width:10px;height:10px;display:inline-block}
ul.changelog{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.86rem;color:#cfd4dc}
ul.changelog b{color:#fff;font:700 .8rem/1.2 var(--f-ui);margin-right:6px;font-variant-numeric:tabular-nums}
footer{font-size:.8rem;color:var(--dim);display:grid;gap:8px;max-width:110ch;margin:0 auto;text-align:center;line-height:1.55}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* macro row badges */
.bdg{display:inline-block;margin-left:5px;padding:2px 4px;font:700 .56rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;white-space:nowrap}
.bdg.st{background:var(--gold);color:#2c1c00}
.bdg.kr{background:#4a1d1a;color:#ffb4ab;border:1px solid #7a2f2a}
.bdg.lv{background:#22303f;color:#bcd9ff;border:1px solid #35506b}
/* Global sheet blocks */
.sheet-prio,.sheet-gear{display:grid;gap:12px;padding:14px;border:1px solid #3b4453;background:#12161c}
ul.prio2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.pk{display:flex;gap:4px;margin-top:3px}
.pk i{display:grid;place-items:center;width:20px;height:20px;font:800 .72rem/1 var(--f-ui);font-style:normal;color:#0b0e12}
.pk i.o1{background:#6fcf6a} .pk i.o2{background:#6fb6ff} .pk i.o3{background:#f2d03a} .pk i.o4{background:#ff9a3c} .pk i.o5{background:#ff5c5c}
.pk em{font-size:.76rem;color:var(--dim)}
.spec-h .pick small{display:block;font:700 .62rem/1 var(--f-ui);letter-spacing:.08em;color:#3d4510;margin-bottom:3px;text-align:center}
.sheet-gear table td{font-size:.82rem}
/* max damage plan */
.plan-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,2.4vw,30px);margin:6px 0 18px}
@media (max-width:1100px){.plan-grid{grid-template-columns:minmax(0,1fr)}}
ol.lvord{margin:0 0 10px;padding:0;list-style:none;display:grid;gap:12px}
ol.lvord>li{display:grid;grid-template-columns:22px 40px minmax(0,1fr);gap:10px;align-items:start;padding:12px;background:#141920;border:1px solid #2c3441;font-size:.86rem;color:#d4d8de}
ol.lvord>li>img,ol.lvord>li>.none{width:40px;height:40px;border:1px solid rgba(255,255,255,.2)}
ol.lvord .ord{display:grid;place-items:center;width:22px;height:22px;background:var(--neon);color:#1b1f05;font:800 .8rem/1 var(--f-display)}
ol.lvord b.hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:700 .95rem/1.2 var(--f-ui);color:#fff;margin-bottom:4px}
ol.lvord b.hd .to{color:var(--neon)}
.gain,.est{font:700 .72rem/1 var(--f-ui);font-style:normal;padding:3px 6px;background:#1f3a2a;color:#9ff0bf;border:1px solid #2f6b47}
.est{background:#2a2f3a;color:#ffd77a;border-color:#5d5130;margin-left:8px}
ol.spsteps{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:5px}
ol.spsteps li{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:8px;align-items:center;font-size:.8rem}
ol.spsteps .st-lv{font:700 .74rem/1 var(--f-ui);color:var(--muted)}
ol.spsteps .pk{margin:0}
ol.spsteps .st-t{color:#c9ced6}
.ev{display:block;margin-top:7px;font-size:.76rem;color:var(--muted)}
.ev b{color:#fff}
ul.auto{margin:0;padding:0;list-style:none;display:grid;gap:10px}
ul.auto li{padding-left:11px;border-left:2px solid var(--gold);font-size:.85rem;color:#d4d8de}
ul.auto b{display:block;color:#fff;font:700 .86rem/1.3 var(--f-ui);margin-bottom:2px}
table.dmgt td{vertical-align:middle}
table.dmgt .dn{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#fff}
table.dmgt .dn small{color:var(--muted);font-weight:500;font-size:.72rem}
table.dmgt .bar{display:inline-block;width:56px;height:6px;background:#232a35;margin-right:7px;vertical-align:middle}
table.dmgt .bar i{display:block;height:100%;background:var(--neon)}
.krend ul.lvl li{grid-template-columns:30px minmax(0,1fr) auto}
.krend ul.lvl img,.krend ul.lvl .none{width:30px;height:30px}
@media (max-width:560px){ol.lvord>li{grid-template-columns:22px minmax(0,1fr)}ol.lvord>li>img,ol.lvord>li>.none{display:none}ol.spsteps li{grid-template-columns:40px auto;}ol.spsteps .st-t{grid-column:1/-1}}
/* home tier lists */
a.ti{color:inherit;text-decoration:none;grid-template-columns:minmax(0,1fr)}
a.ti:hover .t{color:var(--neon)}
b.tl{display:inline-grid;place-items:center;width:22px;height:22px;font:800 .8rem/1 var(--f-display);color:#111}
b.tl.S{background:var(--t-s)} b.tl.A{background:var(--t-a)} b.tl.B{background:var(--t-b)} b.tl.C{background:var(--t-c)}
/* Pet Genus section */
.gaudit{padding:12px 14px;margin:0 0 14px;border:1px solid #6b5a22;background:#221d10;color:#eadfb8;font-size:.86rem;line-height:1.55}
.gaudit b{color:#fff} .gaudit i{color:#ffcf6b}
ol.grank{margin:0 0 8px;padding:0;list-style:none;counter-reset:g;display:grid;gap:6px}
ol.grank li{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;background:#141920;border:1px solid #2c3441;font-size:.84rem;color:#d4d8de;counter-increment:g}
ol.grank li span::before{content:counter(g) ". ";color:var(--neon);font-weight:700}
ol.grank li b{white-space:nowrap;color:#9ff0bf}
.gboards{display:grid;gap:18px;margin-top:16px}
table.gtbl td{vertical-align:top;font-size:.8rem}
table.gtbl td.gwhy{min-width:260px;color:#c9ced6;line-height:1.45}
table.gtbl .gpick{display:block;color:#fff;margin-bottom:3px}
.gtag{display:inline-block;font:700 .64rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;padding:3px 5px;background:#2a2f3a;color:#cfd4dc}
.gtag.t-bis{background:#1f3a2a;color:#9ff0bf} .gtag.t-cond{background:#3a3217;color:#ffd77a} .gtag.t-low{background:#262b33;color:#8b93a1} .gtag.t-unv{background:#3a1d1d;color:#ff9a9a} .gtag.t-alt{background:#1d2a3a;color:#9cc8ff}
.gconf{font:700 .7rem/1 var(--f-ui);padding:3px 6px;border:1px solid #3a4352}
.gconf.c-high{color:#9ff0bf;border-color:#2f6b47} .gconf.c-medium{color:#ffd77a;border-color:#5d5130} .gconf.c-low{color:#ff9a9a;border-color:#6b2f2f}
.gpool{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 18px;font-size:.78rem;color:#c9ced6}
.gpool p{margin:3px 0}