/* Shared blocks for the longer guides: cards, boss blocks, role cards, alerts, flows and priority lists.
   Loaded only by the boss / class guides (they are wider than the older guides). */
.guide{ max-width:900px; }

/* ---------- pills + jump navigation ---------- */
.g-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.g-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border:1px solid var(--line); border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--muted); background:rgba(255,255,255,.02); white-space:nowrap; }
.g-pill.hot{ color:#ff9a9a; border-color:rgba(255,90,90,.5); }
.g-pill.blue{ color:#8fc4ff; border-color:rgba(74,163,255,.5); }
.g-pill.green{ color:#8fe3a5; border-color:rgba(95,208,122,.5); }
.g-pill.gold{ color:#f6d874; border-color:rgba(242,201,76,.5); }
.g-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.g-nav .g-wing{ flex-basis:100%; margin:8px 0 0; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--acc,var(--muted)); }
.g-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid color-mix(in srgb,var(--acc,#ff8a1f) 45%,transparent); border-radius:999px; background:color-mix(in srgb,var(--acc,#ff8a1f) 8%,transparent); font-size:12.5px; font-weight:600; color:#eadfd1; text-decoration:none; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.g-chip i{ font-style:normal; font-size:10.5px; color:var(--acc,#ff8a1f); font-variant-numeric:tabular-nums; }
.g-chip:hover, .g-chip:focus-visible{ border-color:var(--acc,#ff8a1f); transform:translateY(-1px); box-shadow:0 0 16px color-mix(in srgb,var(--acc,#ff8a1f) 30%,transparent); outline:none; }

/* ---------- wing / chapter headers ---------- */
.g-wing-h{ display:flex; align-items:center; gap:14px; margin:6px 0 4px; }
.g-wing-h h2{ margin:0 !important; }
.g-wing-h .g-wing-rule{ flex:1; height:2px; background:linear-gradient(90deg,var(--acc,var(--legendary)),transparent); opacity:.7; }
.g-wing-h .g-wing-tag{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc,var(--muted)); white-space:nowrap; }

/* ---------- boss card ---------- */
.boss{ position:relative; margin:22px 0 10px; padding:22px 22px 16px; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; scroll-margin-top:84px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); }
.boss::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--acc,var(--legendary)),transparent 82%); }
.boss::after{ content:""; position:absolute; right:-90px; top:-90px; width:240px; height:240px; background:radial-gradient(circle,color-mix(in srgb,var(--acc,#ff8a1f) 16%,transparent),transparent 70%); pointer-events:none; }
.boss > *{ position:relative; z-index:1; }
.boss-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.boss-num{ flex:none; width:42px; height:42px; display:grid; place-items:center; font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:15px; color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 55%,transparent); border-radius:10px; background:color-mix(in srgb,var(--acc) 12%,transparent); font-variant-numeric:tabular-nums; }
.boss-head h3{ margin:0; font-family:"Russo One","Chakra Petch",sans-serif; font-size:clamp(19px,2.6vw,23px); font-weight:400; color:#f7f0e7; line-height:1.2; }
.boss-wing{ display:block; margin-top:3px; font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--acc,var(--muted)); }
.boss-head .g-pills{ margin:0 0 0 auto; }
.guide .boss-lead{ font-size:14.5px; line-height:1.78; color:#e8ded1; margin:0 0 14px; }
.g-h4{ margin:18px 0 8px; font-size:10.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); }

/* ---------- mechanic cards ---------- */
.g-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:10px; }
.mech{ padding:12px 14px 12px 15px; border:1px solid var(--line-soft); border-left:3px solid var(--mc,var(--legendary)); border-radius:8px; background:rgba(0,0,0,.2); }
.mech .mech-tag{ display:block; margin-bottom:3px; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--mc,var(--legendary)); }
.mech b.mech-name{ display:block; margin-bottom:4px; font-size:14px; color:#fff; }
.guide .mech p{ margin:0 !important; font-size:13px !important; line-height:1.62 !important; color:#d6ccc0 !important; }
.mech.raid{ --mc:#ff9a3d; } .mech.tank{ --mc:#4aa3ff; } .mech.deadly{ --mc:#ff5a5a; } .mech.add{ --mc:#b07cff; } .mech.heroic{ --mc:#f2c94c; } .mech.move{ --mc:#5fd07a; } .mech.cd{ --mc:#4cc9f0; }

/* ---------- role cards ---------- */
.g-roles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:10px; }
.role{ padding:12px 14px; border:1px solid var(--line-soft); border-top:3px solid var(--rc); border-radius:8px; background:rgba(0,0,0,.2); }
.role h4{ margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--rc); }
.guide .role p{ margin:0 0 6px !important; font-size:13px !important; line-height:1.66 !important; }
.guide .role p:last-child{ margin-bottom:0 !important; }
.role.tank{ --rc:#4aa3ff; } .role.healer{ --rc:#5fd07a; } .role.dps{ --rc:#ff6b6b; } .role.all{ --rc:#f2c94c; }

/* ---------- alerts (pro tip / wipe alert / Hand of Protection / cooldowns) ---------- */
.g-alert{ display:flex; gap:12px; margin:12px 0; padding:12px 14px; border:1px solid color-mix(in srgb,var(--ac) 45%,transparent); border-radius:10px; background:color-mix(in srgb,var(--ac) 9%,transparent); }
.g-alert .ga-ico{ flex:none; width:36px; height:36px; border-radius:8px; object-fit:cover; box-shadow:0 0 0 1px #000, 0 0 0 2px color-mix(in srgb,var(--ac) 65%,transparent); }
.g-alert .ga-badge{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-weight:700; font-size:15px; color:var(--ac); border:1px solid color-mix(in srgb,var(--ac) 60%,transparent); }
.g-alert b.ga-title{ display:block; margin-bottom:3px; font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ac); }
.guide .g-alert p{ margin:0 !important; font-size:13.5px !important; line-height:1.68 !important; }
.g-alert.warn{ --ac:#ff5a5a; } .g-alert.tip{ --ac:#f2c94c; } .g-alert.hop{ --ac:#f58cba; } .g-alert.cd{ --ac:#4cc9f0; } .g-alert.key{ --ac:#ff9a3d; } .g-alert.ok{ --ac:#5fd07a; }

/* ---------- flow (cause and effect) ---------- */
.g-flow{ list-style:none; display:flex; flex-wrap:wrap; gap:14px 16px; margin:10px 0 6px; padding:0; }
.guide .g-flow li{ position:relative; flex:1 1 150px; margin:0; padding:10px 12px; border:1px solid var(--line-soft); border-radius:8px; background:rgba(0,0,0,.22); font-size:12.5px; line-height:1.5; display:block; }
.guide .g-flow li::before{ display:none; }
.g-flow li b{ display:block; margin-bottom:2px; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--acc,var(--legendary-bright)); }
.g-flow li::after{ content:"\2192"; position:absolute; right:-14px; top:50%; transform:translateY(-50%); color:var(--acc,var(--legendary-bright)); font-weight:700; font-size:14px; }
.g-flow li:last-child::after{ content:"\21BA"; }

/* ---------- priority list ---------- */
.g-prio{ list-style:none; display:grid; gap:8px; margin:10px 0 6px; padding:0; counter-reset:pr; }
.guide .g-prio li{ display:flex; align-items:flex-start; gap:12px; margin:0; padding:10px 12px; border:1px solid var(--line-soft); border-radius:8px; background:rgba(0,0,0,.2); font-size:13.5px; line-height:1.6; padding-left:12px; }
.guide .g-prio li::before{ content:counter(pr); counter-increment:pr; position:static; flex:none; width:26px; height:26px; margin-top:0; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--pc,#ff9a3d) 16%,transparent); border:1px solid color-mix(in srgb,var(--pc,#ff9a3d) 60%,transparent); color:var(--pc,#ff9a3d); font-weight:700; font-size:12.5px; }
.g-prio li:nth-child(1){ --pc:#ff5a5a; } .g-prio li:nth-child(2){ --pc:#ff9a3d; } .g-prio li:nth-child(3){ --pc:#f2c94c; } .g-prio li:nth-child(4){ --pc:#5fd07a; } .g-prio li:nth-child(5){ --pc:#4cc9f0; }
.g-prio li b{ color:#fff; }

/* ---------- phase cards ---------- */
.g-phases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:10px; margin:12px 0; }
.phase{ padding:12px 14px; border:1px solid var(--line-soft); border-radius:10px; background:linear-gradient(180deg,color-mix(in srgb,var(--pc,#ff8a1f) 10%,transparent),rgba(0,0,0,.18)); }
.phase .ph-range{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pc,#ff8a1f); font-variant-numeric:tabular-nums; }
.phase b.ph-name{ display:block; margin:3px 0 5px; font-size:14.5px; color:#fff; }
.guide .phase p{ margin:0 !important; font-size:12.5px !important; line-height:1.6 !important; color:#d6ccc0 !important; }

/* ---------- cooldown / cheat cards ---------- */
.g-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:10px; margin:10px 0; }
.cdcard{ display:flex; gap:12px; padding:11px 13px; border:1px solid var(--line-soft); border-radius:10px; background:rgba(0,0,0,.2); }
.cdcard img{ flex:none; width:42px; height:42px; border-radius:6px; box-shadow:0 0 0 1px #000, 0 0 0 2px #6b502b; align-self:flex-start; }
.cdcard .cd-name{ font-size:14px; font-weight:700; color:#fff; }
.cdcard .cd-time{ display:inline-block; margin-left:8px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#4cc9f0; }
.guide .cdcard p{ margin:3px 0 0 !important; font-size:12.8px !important; line-height:1.6 !important; color:#d6ccc0 !important; }

/* ---------- class cards (leveling) ---------- */
.g-classes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:12px; margin:12px 0; }
.ccard{ padding:14px 15px; border:1px solid var(--line-soft); border-top:3px solid var(--cc); border-radius:10px; background:rgba(0,0,0,.2); }
.ccard-h{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ccard-h img{ width:34px; height:34px; border-radius:5px; box-shadow:0 0 0 1px #000, 0 0 0 2px color-mix(in srgb,var(--cc) 70%,transparent); }
.ccard-h b{ font-size:15px; color:var(--cc); }
.ccard-h span{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.guide .ccard p{ margin:0 0 6px !important; font-size:13px !important; line-height:1.62 !important; }
.guide .ccard p:last-child{ margin-bottom:0 !important; }
.ccard p b{ color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; margin-right:6px; }

/* ---------- spec cards (class guide) ---------- */
.spec-card{ margin:22px 0 10px; padding:18px 20px 12px; border:1px solid var(--line-soft); border-left:3px solid var(--sc,var(--legendary)); border-radius:12px; background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.006)); }
.spec-card.tank{ --sc:#4aa3ff; } .spec-card.healer{ --sc:#5fd07a; } .spec-card.dps{ --sc:#ff6b6b; }
.guide .spec-card h3.spec-h{ margin:0 0 10px; padding:0; border:0; }

/* ---------- older blocks (boss / spec headings with "Tanks / Healers / DPS" lines) ---------- */
.guide h3.spec-h{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:28px 0 10px; padding-top:20px; border-top:1px dashed var(--line-soft); font-family:"Chakra Petch",sans-serif; font-size:17px; font-weight:700; letter-spacing:.01em; color:var(--text); scroll-margin-top:84px; }
.guide h3.spec-h:first-child{ margin-top:6px; padding-top:0; border-top:0; }
.guide .spec-role{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.guide .spec-split{ margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.06em; padding:2px 10px; border:1px solid var(--line); border-radius:999px; color:var(--legendary-bright); font-variant-numeric:tabular-nums; }
.guide .spec-line{ font-size:13.5px !important; line-height:1.9 !important; margin-bottom:6px !important; }
.guide .spec-line b{ color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; margin-right:9px; white-space:nowrap; }
.guide .spec-note{ color:var(--muted); font-size:12.5px; }
.guide .spec-open{ margin-top:2px !important; font-size:12.5px !important; }
.guide .cls-back{ margin-top:14px; font-size:12.5px !important; }
.guide section[id]{ scroll-margin-top:84px; }

@media (max-width:560px){
  .boss{ padding:18px 14px 12px; }
  .boss-head .g-pills{ margin-left:0; }
  .g-flow li::after{ display:none; }
  .guide{ padding-left:16px; padding-right:16px; }
}
@media (prefers-reduced-motion: reduce){ .g-chip{ transition:none; } .g-chip:hover{ transform:none; } }

/* ---------- call-to-action boxes (talent calculator / BiS list) ---------- */
.cta-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:12px; margin:18px 0 8px; }
.guide a.cta{ --cta:255,128,0; display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid rgba(var(--cta),.6); border-radius:12px; background:linear-gradient(135deg,rgba(var(--cta),.17),rgba(var(--cta),.04)); box-shadow:0 0 0 1px rgba(var(--cta),.10), 0 0 20px rgba(var(--cta),.26), inset 0 0 18px rgba(var(--cta),.08); color:#fff; text-decoration:none; transition:transform .18s, box-shadow .18s, border-color .18s; }
.guide a.cta:hover, .guide a.cta:focus-visible{ transform:translateY(-2px); border-color:rgba(var(--cta),.95); box-shadow:0 0 0 1px rgba(var(--cta),.25), 0 0 30px rgba(var(--cta),.46), inset 0 0 22px rgba(var(--cta),.14); }
.guide a.cta-bis{ --cta:76,201,240; }
.cta-ico{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; background:rgba(var(--cta),.16); border:1px solid rgba(var(--cta),.5); color:rgb(var(--cta)); }
.cta-ico svg{ width:23px; height:23px; }
.cta-txt{ flex:1; min-width:0; }
.cta-txt b{ display:block; font-size:17.5px; line-height:1.25; color:#fff; letter-spacing:.01em; }
.cta-txt small{ display:block; margin-top:3px; font-size:13px; line-height:1.45; color:#d6ccc0; }
.cta-go{ flex:none; font-size:24px; line-height:1; color:rgb(var(--cta)); transition:transform .18s; }
.guide a.cta:hover .cta-go{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .guide a.cta, .cta-go{ transition:none; } .guide a.cta:hover{ transform:none; } .guide a.cta:hover .cta-go{ transform:none; } }
.guide a.cta-guide{ --cta:176,124,255; }

/* ---------- link groups (more specs, same role) ---------- */
.g-links-group{ margin:0 0 16px; }
.g-links-label{ display:block; margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.g-links{ display:flex; flex-wrap:wrap; gap:8px; }
.guide .g-links a{ display:inline-block; padding:8px 14px; border:1px solid var(--line-soft); border-radius:999px; background:rgba(255,255,255,.03); color:var(--text); text-decoration:none; font-size:13.5px; font-weight:600; }
.guide .g-links a:hover, .guide .g-links a:focus-visible{ border-color:var(--legendary); color:#fff; }
.g-faq .cdcard p{ font-size:13.5px !important; }