/* =========================================================
   Jokeroll WoW Forever components (start page, class guides,
   tier lists, dungeons, guides). Builds on styles.v23.css:
   same tokens, header, section heads, popover and cards.
   Glass stays on header, menu, filters and switchers;
   content cards stay opaque.
   ========================================================= */
:root{
  --accent:var(--gold);
  --surface:rgba(17,27,38,.92);
  --surface-2:rgba(22,32,44,.95);
  --line-soft:rgba(255,255,255,.08);
  --text-2:rgba(238,244,247,.74);
  --taken:#8fe3a1;
}
/* One offset below the sticky header for anchors, the skip target and focused elements. */
html{scroll-padding-top:110px}
.anchor{scroll-margin-top:0}
.bg-art-hub{background:radial-gradient(60% 50% at 18% 12%,rgba(92,150,227,.30),transparent 70%),radial-gradient(50% 45% at 84% 16%,rgba(239,158,103,.20),transparent 70%),radial-gradient(60% 60% at 50% 100%,rgba(114,209,207,.10),transparent 70%),#0a111b}
.bg.bg-art-hub.active{opacity:1}

/* ---------- Page hero ---------- */
.page-hero{max-width:var(--jr-content,1240px);margin:0 auto;padding:32px 0 var(--jr-section-y)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:0 0 24px;font-size:14px;font-weight:650;color:var(--muted)}
.breadcrumb a,.hero-meta a{color:rgba(238,244,247,.72);text-decoration:none;border-radius:6px}
.breadcrumb a:hover,.hero-meta a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current]{color:#fff}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px}
.page-hero-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.hero-icon{width:96px;height:96px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);background:var(--surface-2)}
.hero-icon img{display:block;width:100%;height:100%;object-fit:cover}
.hero-icon-svg{display:grid;place-items:center;color:var(--accent);background:radial-gradient(120% 120% at 20% 10%,color-mix(in srgb,var(--accent) 34%,transparent),var(--surface-2) 70%)}
.hero-icon-svg svg{width:46%;height:46%}
.page-hero .eyebrow{color:var(--accent);opacity:.9}
.page-hero h1{margin:8px 0 12px;font-size:clamp(44px,5.4vw,76px);line-height:1;letter-spacing:-.05em;font-weight:760}
/* Long German compounds ("Ausgrabungsstätte") hyphenate instead of widening the page on phones. */
.page-hero h1{hyphens:auto;overflow-wrap:break-word}
.hero-sub{margin:0;max-width:760px;font-size:19px;line-height:1.5;color:var(--text-2)}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.tag{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:#eef4f7;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.tag:hover,.tag:focus-visible{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26)}
.tag b{color:var(--accent);font-weight:800}
.tag .dots{letter-spacing:2px;color:var(--accent)}
/* Tier badges and chips live in styles.v23.css, the tooltip cards use them too. */
.tag .tier-badge{color:#0d141b}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14px;color:var(--muted)}
/* The meta line starts where the hero text starts: right of the 96 px icon and its 24 px gap. */
@media(min-width:761px){.page-hero-main+.hero-meta{padding-left:120px}}
.hero-meta strong{color:rgba(238,244,247,.86);font-weight:700}
.hero-meta a:focus-visible{outline-color:var(--accent)}

/* Glass controls share one recipe: sibling switcher, filter bar. */
.sibling-switch,.filter-bar{border:1px solid rgba(255,255,255,.12);background:rgba(24,35,46,.62);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* Sibling switcher: a small glass control, one row, scrolls on narrow screens with a slim bar. */
.sibling-switch{position:relative;margin-top:24px;display:flex;gap:6px;overflow-x:auto;scroll-padding-inline:48px;padding:6px;border-radius:20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sibling-switch::-webkit-scrollbar{height:6px}
.sibling-switch::-webkit-scrollbar-thumb{border-radius:6px;background:rgba(255,255,255,.22)}
.sibling-switch::-webkit-scrollbar-track,.sibling-switch::-webkit-scrollbar-button{display:none;background:transparent}
.sibling-switch a{flex:0 0 auto;display:flex;align-items:center;gap:9px;min-height:44px;padding:4px 12px 4px 4px;border-radius:14px;color:rgba(238,244,247,.72);font-size:15px;font-weight:650;text-decoration:none;white-space:nowrap;transition:background .16s ease,color .16s ease}
.sibling-switch a:hover{background:rgba(255,255,255,.07);color:#fff}
.sibling-switch a[aria-current]{background:rgba(255,255,255,.11);color:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
.sibling-switch img{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);object-fit:cover}

/* ---------- Start page ---------- */
.home-hero{max-width:var(--jr-content,1240px);margin:0 auto;padding:48px 0 var(--jr-section-y);text-align:center}
/* Launch countdown: a gold-bevelled WoW timer on a deep panel. Without script (or with an unreadable date) the frame shows
   label and date, after the launch the done text. Reserve the running timer while streamed HTML is still arriving;
   the inline script marks is-ready when it has chosen the running, done or invalid-date state. */
.countdown{--cd-cell:120px;--cd-gap:16px;position:relative;display:inline-grid;justify-items:center;gap:16px;max-width:100%;margin:24px 0 0;padding:24px 32px;border:2px solid transparent;border-radius:18px;background:radial-gradient(90% 110% at 50% 0%,rgba(227,196,123,.13),transparent 62%) padding-box,linear-gradient(180deg,#121b26,#070b11) padding-box,linear-gradient(165deg,#f7e3a8,#b98f3f 28%,#5b4218 50%,#c9a352 72%,#f1d992) border-box;box-shadow:0 0 0 1px rgba(0,0,0,.75),0 24px 64px rgba(0,0,0,.55),0 0 64px rgba(227,196,123,.10),inset 0 0 0 1px rgba(0,0,0,.8);outline:1px solid rgba(227,196,123,.22);outline-offset:-9px}
/* Gold studs on both sides of the frame. */
.countdown::before,.countdown::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;background:linear-gradient(135deg,#fff0c2,#c9a352 45%,#6b4f1d);box-shadow:0 0 0 2px #070b11,0 0 12px rgba(227,196,123,.45);transform:rotate(45deg)}
.countdown::before{left:-7px}
.countdown::after{right:-7px}
.countdown-cells{display:none;gap:var(--cd-gap)}
.countdown.is-running .countdown-cells,.js .countdown:not(.is-ready) .countdown-cells{display:flex}
.countdown-cell{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;width:var(--cd-cell)}
/* Digits keep one width (tabular), so ticking never moves the frame. */
.countdown-num{display:grid;place-items:center;width:100%;height:calc(var(--cd-cell) * .78);border:1px solid rgba(227,196,123,.34);border-radius:12px;background:linear-gradient(180deg,#05080c,#0f1720 55%,#151f2b);box-shadow:inset 0 3px 12px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,236,190,.06),0 1px 0 rgba(255,236,190,.10);color:#fff8e6;font-size:calc(var(--cd-cell) * .5);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(227,196,123,.5),0 2px 0 rgba(0,0,0,.6)}
.countdown-unit{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.countdown-line{margin:0;font-size:14px;line-height:1.4;color:rgba(238,244,247,.72)}
/* Under the tiles a gold hairline fading out at both ends sets the date apart. */
.countdown.is-running .countdown-line,.js .countdown:not(.is-ready) .countdown-line{justify-self:stretch;padding-top:12px;background:linear-gradient(90deg,transparent,rgba(227,196,123,.5),transparent) top/100% 1px no-repeat}
.countdown-line strong{font-weight:700;color:rgba(238,244,247,.9)}
.countdown-left{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Without the tiles the line is the content: the label as overline, the date or the done text large. */
.countdown.is-ready:not(.is-running) .countdown-line,html:not(.js) .countdown-line{display:grid;gap:8px}
.countdown.is-ready:not(.is-running) .countdown-label,html:not(.js) .countdown-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.countdown.is-ready:not(.is-running) .countdown-value,html:not(.js) .countdown-value{font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff8e6;text-shadow:0 0 18px rgba(227,196,123,.35)}
.countdown.is-done .countdown-value{color:var(--gold)}
.tile-cta{justify-self:start;margin-top:4px;font-size:16px;font-weight:750;color:var(--accent)}
.game-facts{display:grid;gap:0;margin:4px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.game-facts li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--text-2)}
.game-facts strong{color:#fff;font-weight:700;text-align:right}

.tierlist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--jr-gap)}
.tierlist-card{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:8px;padding:var(--jr-pad);border:1px solid var(--jr-line);border-top:3px solid var(--accent);border-radius:var(--jr-radius);background:var(--surface);color:inherit;text-decoration:none;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.tierlist-card:hover{background:var(--surface-2);border-color:rgba(255,255,255,.22);border-top-color:var(--accent)}
.tierlist-card .overline{color:var(--accent)}
.tierlist-card h3{margin:0;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.035em;line-height:1.1}
.tierlist-card p{margin:0;font-size:17px;line-height:1.5;color:var(--text-2)}
.tierlist-card .tile-cta{margin-top:8px}
.tier-preview{display:grid;gap:8px;align-content:start;margin:6px 0 2px}
.tier-preview-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tier-preview-row>:first-child{margin-right:4px}
.tier-preview-icon{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.16)}
/* Teaser rows: the next tiers, blurred and fading, so a short card has no gap; the full list is behind the click */
.tier-preview-row.is-teaser .tier-preview-icon,.tier-preview-icon.is-blurred{filter:blur(2.5px) saturate(.6);opacity:.55}
.tier-preview-row.is-teaser .tier-badge{opacity:.7}
.tier-preview-row.is-teaser+.tier-preview-row.is-teaser{opacity:.5}
.tier-more{margin-left:2px;font-size:14px;font-weight:800;color:var(--text-2)}

.doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--jr-gap)}
.doc-card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto 1fr auto;align-content:start;gap:12px 16px;padding:var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface);color:inherit;text-decoration:none;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.doc-card:hover{background:var(--surface-2);border-color:rgba(255,255,255,.22)}
.doc-card-icon{width:56px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.doc-card>div,.doc-card>.doc-card-icon{align-self:end;min-width:0}
.doc-card .overline{color:var(--accent)}
.doc-card h3{margin:2px 0 0;font-size:22px;line-height:1.15;letter-spacing:-.025em}
.doc-card p,.doc-card>.tile-cta{grid-column:1/-1}
.doc-card p{margin:0;font-size:16px;line-height:1.5;color:var(--text-2)}
.doc-card .game-facts{grid-column:1/-1}
/* Two-column grids never leave a half-empty row: an odd last item takes the whole row. */
.doc-grid>.doc-card:last-child:nth-child(odd),.tierlist-grid>:last-child:nth-child(odd),.cards-2>:last-child:nth-child(odd),.step-list>:last-child:nth-child(odd){grid-column:1/-1}
.doc-grid>.doc-card{grid-row:span var(--card-rows,3);grid-template-rows:subgrid}
/* Cards without a last row (no facts, link or chips) span one row less, so no empty row gap sits above their padding. */
.doc-grid:not(:has(.game-facts,.tile-cta)),.class-grid:not(:has(.mini-tags)){--card-rows:2}
@media(min-width:901px){
  /* A wide last card moves its facts beside the text and needs only two rows; without facts the text keeps the full width. */
  .doc-grid>.doc-card:last-child:nth-child(odd):has(>.game-facts){grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);column-gap:var(--jr-gap);--card-rows:2}
  .doc-grid>.doc-card:last-child:nth-child(odd):has(>.game-facts)>p{grid-column:1/3}
  .doc-grid>.doc-card:last-child:nth-child(odd)>.game-facts{grid-column:3;grid-row:1/-1;align-self:center}
}
.later-list{margin-top:var(--jr-gap)}
.later-list ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:4px 24px;margin:8px 0 0;padding:0;list-style:none}
.glass-card.later-list li{display:grid;gap:2px;margin:0;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:16px}
.later-list li span{color:var(--muted)}
.doc-grid+.featured-card,.planner-block+.doc-grid{margin-top:var(--jr-gap)}

/* Talent planner, the main tool: one tile per class in a panel. Nine in a row where the names fit, three by three
   below that, a list on phones ("Hexenmeister" needs about 105 px at 16 px). */
.planner-block{container:planner/inline-size;display:grid;gap:16px;padding:var(--jr-pad);border:1px solid var(--jr-line);border-top:3px solid var(--accent);border-radius:var(--jr-radius);background:radial-gradient(60% 90% at 50% 0%,rgba(227,196,123,.08),transparent 70%),var(--surface)}
.planner-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.planner-pick{display:grid;justify-items:center;align-content:center;gap:12px;height:100%;padding:24px 4px 16px;border:1px solid var(--jr-line);border-bottom:3px solid var(--card-accent,var(--accent));border-radius:16px;background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--card-accent,var(--accent)) 16%,transparent),transparent 72%),var(--surface-2);color:#fff;font-size:16px;font-weight:750;line-height:1.2;text-align:center;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.planner-pick:hover{border-color:color-mix(in srgb,var(--card-accent,var(--accent)) 60%,transparent);border-bottom-color:var(--card-accent,var(--accent))}
.planner-pick>img{width:64px;height:64px;border-radius:16px;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 3px color-mix(in srgb,var(--card-accent,var(--accent)) 24%,transparent),0 10px 24px rgba(0,0,0,.35)}
.planner-all{justify-self:start;display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-size:16px;font-weight:750;text-decoration:none}
.planner-all:hover{text-decoration:underline;text-underline-offset:3px}
@container planner (min-width:1150px){.planner-picks{grid-template-columns:repeat(9,minmax(0,1fr))}}
@container planner (max-width:419.98px){
  .planner-picks{grid-template-columns:1fr;gap:8px}
  .planner-pick{grid-template-columns:40px minmax(0,1fr);justify-items:start;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-bottom:1px solid var(--jr-line);border-left:3px solid var(--card-accent,var(--accent));background:linear-gradient(90deg,color-mix(in srgb,var(--card-accent,var(--accent)) 14%,transparent),transparent 60%),var(--surface-2);text-align:left}
  .planner-pick>img{width:40px;height:40px;border-radius:10px}
}

/* ---------- Filters and class grid ---------- */
.filter-bar{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--jr-gap);padding:6px;border-radius:18px;width:max-content;max-width:100%}
.filter-bar[hidden]{display:none}
.js .filter-bar[hidden]{display:flex}
/* Width animates as a documented exception: absolutely positioned, no layout shift, only on user selection. */
.filter-thumb{position:absolute;left:0;top:0;z-index:0;border-radius:13px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 var(--accent);pointer-events:none;transition:transform .32s cubic-bezier(.22,.8,.24,1),width .32s cubic-bezier(.22,.8,.24,1)}
.filter-chip{position:relative;z-index:1;min-height:40px;padding:0 15px;border:0;border-radius:13px;background:transparent;color:rgba(238,244,247,.72);font-size:15px;font-weight:700;cursor:pointer;transition:color .16s ease}
.filter-chip:hover{color:#fff}
.filter-chip[aria-checked="true"]{color:#fff}
.filter-empty{margin:0;padding:18px;border:1px dashed rgba(255,255,255,.16);border-radius:16px;color:var(--muted)}
.class-grid{container-type:inline-size;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--jr-gap)}
/* At two columns (616 to 947 px wide) the last visible card of an odd count takes the whole row, also while filtered. */
@container (min-width:616px) and (max-width:947.98px){
  .class-card:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])){grid-column:1/-1}
}
/* Head, text and chips share row lines with the neighbouring cards, so every row of cards aligns. */
.class-card{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);grid-row:span var(--card-rows,3);grid-template-rows:subgrid;gap:12px 16px;padding:var(--jr-pad);border:1px solid var(--jr-line);border-left:3px solid var(--card-accent,var(--accent));border-radius:var(--jr-radius);background:var(--surface);color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.class-card[hidden]{display:none}
.class-card:hover{background:var(--surface-2);border-color:rgba(255,255,255,.2);border-left-color:var(--card-accent,var(--accent))}
.class-card-icon{position:relative;z-index:1;display:block;width:56px;height:56px}
.class-card-icon img{display:block;width:56px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.class-card-icon,.class-card-head{align-self:end}
.class-card-head{align-self:center;min-width:0}
.class-card-head .overline{color:var(--card-accent,var(--accent))}
.class-card h3{margin:2px 0 0;font-size:22px;line-height:1.15;letter-spacing:-.03em}
.class-card p{grid-column:1/-1;margin:0;font-size:16px;line-height:1.5;color:var(--text-2)}
.mini-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.mini-tags li{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:700;color:rgba(238,244,247,.8)}
.mini-tags li.tier-chip{padding:3px 4px 3px 10px;font-size:14px}

/* Glyphs stand in where no fitting WoW icon exists. */
.glyph{display:grid;place-items:center;flex:0 0 auto;font-weight:850;font-size:22px;letter-spacing:-.03em;color:#fff;background:radial-gradient(120% 120% at 20% 10%,color-mix(in srgb,var(--glyph,var(--accent)) 85%,#fff 15%),color-mix(in srgb,var(--glyph,var(--accent)) 45%,#0b1119) 70%);text-shadow:0 2px 8px rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.hero-icon.glyph{font-size:36px}

/* ---------- Featured duo guide ---------- */
.featured-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--jr-gap);align-items:center;padding:var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:linear-gradient(120deg,rgba(239,158,103,.10),transparent 42%,rgba(114,209,207,.10)),var(--surface);color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.featured-card:hover{border-color:rgba(255,255,255,.22)}
.featured-card h3{margin:4px 0 8px;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.035em;line-height:1.1}
.featured-card p{margin:0;font-size:17px;line-height:1.55;color:var(--text-2)}
.featured-people{display:grid;gap:12px}
.featured-people div{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.featured-people img{width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.featured-people p>strong{display:block;font-size:17px}
.featured-people p>span{display:block;font-size:14px;color:var(--muted)}
.featured-card .tile-cta{display:inline-block;margin-top:16px}
/* Lifts only for a real pointer; on touch a tapped card would stay lifted. */
@media(hover:hover) and (pointer:fine){
  .class-card:hover,.featured-card:hover,.tierlist-card:hover,.doc-card:hover,.card-link:hover,.planner-pick:hover{transform:translateY(-2px)}
}

/* ---------- Guide building blocks ---------- */
/* Generated pages have no section number: h2, intro and content share one left edge. */
.section-head{grid-template-columns:minmax(0,1fr)}
.guide-content .glass-card.accent{box-shadow:inset 3px 0 0 var(--accent),inset 0 1px 0 rgba(255,255,255,.09)}
.guide-content .glass-card>h3{margin:4px 0 8px;font-size:26px}
.tldr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 var(--jr-gap);padding:0;list-style:none;border:1px solid var(--jr-line);border-top:3px solid var(--accent);border-radius:var(--jr-radius);background:var(--surface-2)}
/* The labels carry the structure, so the items get no numbers; the <ol> keeps the order for screen readers. */
.tldr li{padding:16px var(--jr-pad);font-size:17px;line-height:1.5;color:rgba(244,248,251,.88)}
.tldr li+li{border-left:1px solid var(--line-soft)}
.tldr-label{display:block;margin-bottom:4px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.proscons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--jr-gap)}
.proscons ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.proscons li{position:relative;padding-left:32px;font-size:17px;line-height:1.5;color:rgba(244,248,251,.84)}
.proscons li::before{position:absolute;left:0;top:1px;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;font-weight:900;font-size:15px}
.pros li::before{content:"+";color:#8fe3a1;background:rgba(143,227,161,.12)}
.cons li::before{content:"−";color:#ff9f8f;background:rgba(255,159,143,.12)}
.pros .overline{color:#8fe3a1}.cons .overline{color:#ff9f8f}

.spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--jr-gap);margin-top:var(--jr-gap)}
.spec-card{display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.spec-card.recommended{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:inset 0 3px 0 var(--accent)}
.spec-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.spec-head .wow-icon-wrap{width:44px;height:44px;border-radius:11px}
.spec-head h3{display:block;margin:0;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.spec-head div>span{display:block;font-size:14px;color:var(--muted)}
.verdict{justify-self:start;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:800;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.spec-card.recommended .verdict{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:#fff}
.spec-card p{margin:0;font-size:16px;line-height:1.55;color:var(--text-2)}

/* Race cards: the faction colours the top edge, the crest line and a faint glow behind the portrait. Portrait and name
   are one button that opens the notes on the race. */
.race-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--jr-gap);margin-top:var(--jr-gap)}
.race-card{--faction:#3f7fe0;--faction-text:#a4c6ff;display:grid;align-content:start;justify-items:start;gap:12px;padding:var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:radial-gradient(90% 130% at 0 0,color-mix(in srgb,var(--faction) 22%,transparent),transparent 62%),var(--surface);box-shadow:inset 0 3px 0 var(--faction)}
.race-horde{--faction:#d23c30;--faction-text:#ffa196}
.race-card{position:relative;overflow:hidden;isolation:isolate}
.race-card::after{content:"";position:absolute;right:-18px;top:50%;z-index:-1;width:168px;height:168px;transform:translateY(-50%) rotate(-8deg);background:url(icons/achievement_pvp_a_a.jpg) center/cover;opacity:.12;-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);mask-image:radial-gradient(circle,#000 30%,transparent 68%);pointer-events:none}
.race-horde::after{background-image:url(icons/achievement_pvp_h_h.jpg)}
@media(max-width:560px){.race-card::after{right:-64px;opacity:.1}}
.race-pick{display:grid;grid-template-columns:56px auto;gap:14px;align-items:center;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.race-portrait{width:56px;height:56px;overflow:hidden;border:2px solid color-mix(in srgb,var(--faction) 80%,#fff);border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 8px 22px color-mix(in srgb,var(--faction) 32%,transparent);transition:transform .14s ease}
.race-img{display:block;width:100%;height:100%;object-fit:cover}
.race-head{display:grid;gap:2px;min-width:0}
.race-faction{display:flex;align-items:center;gap:6px;color:var(--faction-text);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.race-crest{width:20px;height:20px;border-radius:5px}
.race-name{display:flex;align-items:center;gap:10px;color:#fff;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.race-name i{width:22px;height:22px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:rgba(255,255,255,.66);font-size:11px;font-style:normal;font-weight:800;letter-spacing:0}
.race-pick:focus-visible{outline:2px solid var(--faction-text);outline-offset:4px;border-radius:14px}
@media(hover:hover) and (pointer:fine){.race-pick:hover .race-portrait{transform:translateY(-2px)}.race-pick:hover .race-name i{border-color:var(--faction-text);color:#fff}}
.race-card p{margin:0;font-size:16px;line-height:1.5;color:var(--text-2)}

/* ---------- Talents: build switch, trees, path ---------- */
.build-switch .filter-chip{display:grid;align-content:center;min-height:50px;padding:5px 16px;line-height:1.15;text-align:left}
.build-switch .filter-chip small{font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.build-switch .filter-chip b{font-size:15px;font-weight:750}
/* Once the switch works, the label above the trees only repeats the selected chip. */
.js .build-switch+.talent-builds .build-head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.talent-build+.talent-build{margin-top:44px}
.build-head{margin:0 0 12px;color:var(--accent)}
.build-intro{margin:0 0 var(--jr-gap);max-width:var(--jr-measure);font-size:17px;line-height:1.55;color:var(--text-2)}
.talent-trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--jr-gap);margin:0 0 var(--jr-gap)}
.talent-tree{padding:16px var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.talent-tree.is-used{border-color:color-mix(in srgb,var(--taken) 40%,transparent);box-shadow:inset 0 3px 0 var(--taken)}
.talent-tree header{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;margin:0 0 16px}
.talent-tree header strong{font-size:18px;letter-spacing:-.01em}
.talent-tree header span{min-width:34px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted);font-size:16px;font-weight:850;text-align:center;font-variant-numeric:tabular-nums}
.talent-tree.is-used header span{background:color-mix(in srgb,var(--taken) 18%,transparent);color:var(--taken)}
.talent-grid{display:grid;grid-template-columns:repeat(4,44px);grid-template-rows:repeat(var(--rows,7),44px);gap:14px;justify-content:space-evenly}
.talent-node{position:relative;z-index:1;display:block;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#0b1118;cursor:help;transition:border-color .16s ease,transform .16s ease}
.talent-node:hover{border-color:rgba(255,255,255,.4)}
.talent-icon{display:block;width:100%;height:100%;border-radius:9px;filter:grayscale(1) brightness(.6);opacity:.6}
.talent-node.taken{border-color:var(--taken);box-shadow:0 0 0 1px color-mix(in srgb,var(--taken) 40%,transparent),0 6px 16px rgba(0,0,0,.3);cursor:pointer}
.talent-node.taken .talent-icon{filter:none;opacity:1}
.talent-node.maxed{border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent),0 6px 16px rgba(0,0,0,.3)}
.talent-node.taken[aria-expanded="true"]{transform:translateY(-1px);box-shadow:0 0 0 2px var(--taken),0 8px 18px rgba(0,0,0,.35)}
.talent-node.maxed[aria-expanded="true"]{box-shadow:0 0 0 2px var(--gold),0 8px 18px rgba(0,0,0,.35)}
@media(hover:hover) and (pointer:fine){
  .talent-node.taken:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--taken),0 8px 18px rgba(0,0,0,.35)}
  .talent-node.maxed:hover{box-shadow:0 0 0 2px var(--gold),0 8px 18px rgba(0,0,0,.35)}
}
.talent-node[data-noimg]::before{content:attr(data-fallback);content:attr(data-fallback) / "";position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800;color:rgba(255,255,255,.5)}
/* Prerequisite arrows run between the node edges; lit once the dependent talent has points. */
.talent-arrow{position:relative;z-index:0;pointer-events:none}
.talent-arrow::before,.talent-arrow::after{content:"";position:absolute;background:rgba(255,255,255,.18)}
.talent-arrow.down::before{left:calc(50% - 1px);top:44px;bottom:50px;width:2px}
.talent-arrow.down::after{left:calc(50% - 5px);bottom:44px;width:10px;height:7px;clip-path:polygon(0 0,100% 0,50% 100%)}
.talent-arrow.right::before,.talent-arrow.left::before{top:calc(50% - 1px);height:2px;left:44px;right:44px}
.talent-arrow.right::after{right:44px;top:calc(50% - 5px);width:7px;height:10px;clip-path:polygon(0 0,100% 50%,0 100%)}
.talent-arrow.left::after{left:44px;top:calc(50% - 5px);width:7px;height:10px;clip-path:polygon(100% 0,0 50%,100% 100%)}
.talent-arrow.on::before,.talent-arrow.on::after{background:var(--taken)}
.talent-rank{position:absolute;right:-7px;bottom:-7px;min-width:28px;padding:1px 4px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:#0b1118;color:rgba(255,255,255,.55);font-size:13px;font-weight:800;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums}
.taken .talent-rank{color:var(--taken);border-color:color-mix(in srgb,var(--taken) 55%,transparent)}
.maxed .talent-rank{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}

/* Talent path: numbered steps along one line. */
.talent-path{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:12px}
@media(min-width:1100px){
  .talent-path{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--half),auto)}
  /* An odd last step takes the whole last row (--half counts it); the others fill both columns above it. */
  .talent-path>li:last-child:nth-child(odd){grid-column:1/-1;grid-row:-2}
}
.talent-step{display:grid;grid-template-columns:96px 44px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;height:100%;padding:12px var(--jr-pad);border:1px solid var(--jr-line);border-radius:16px;background:var(--surface);color:inherit;font:inherit;text-align:left}
.talent-level{font-size:15px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
/* Build steps above the beta cap: visible, but clearly not yet reachable */
.talent-path li.is-later .talent-step{opacity:.5}
.talent-path-note{margin:10px 0 0;font-size:16px;color:var(--text-2)}
.talent-step .wow-icon-wrap{width:44px;height:44px}
.talent-name{min-width:0}
.talent-name>strong{display:block;font-size:17px;line-height:1.3}
.talent-name>span{display:block;font-size:16px;line-height:1.45;color:var(--text-2)}
.talent-points{font-size:15px;font-weight:800;padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.06);font-variant-numeric:tabular-nums}
.talent-step[data-popover-title]{cursor:pointer;transition:border-color .16s ease,background .16s ease}
.talent-step[data-popover-title]:hover{border-color:rgba(255,255,255,.2);background:var(--surface-2)}

/* Priority lists for stats. */
.priority-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;padding:0;list-style:none;counter-reset:prio}
.priority-list li{display:flex;align-items:center;gap:8px;counter-increment:prio}
.glass-card .priority-list li+li,.glass-card .tip-list li+li,.proscons li+li{margin-top:0}
.priority-list li::before{content:counter(prio);flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);font-size:14px;font-weight:850}
.priority-list .stat-chip{margin:0;padding:7px 13px;color:#fff;white-space:normal}
.gear-dl,.glass-card .gear-dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0;margin:14px 0 0;border-top:1px solid var(--line-soft);font-size:16px}
.gear-dl dt,.gear-dl dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:16px;line-height:1.5}
.gear-dl dt{color:var(--muted);font-weight:700}
.gear-dl dd,.glass-card .gear-dl dd{text-align:left;font-weight:600;color:rgba(244,248,251,.88)}

/* Step lists for leveling and guides. */
.step-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--jr-gap);margin:0;padding:0;list-style:none;counter-reset:step}
.step-card{position:relative;padding:var(--jr-pad);padding-left:calc(var(--jr-pad) + 46px);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface);counter-increment:step}
.step-card::before{content:counter(step);position:absolute;left:var(--jr-pad);top:calc(var(--jr-pad) - 2px);width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-weight:850}
.step-card .overline{color:var(--accent);text-transform:uppercase}
.step-card h3{margin:4px 0 8px;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.step-card p{margin:0;font-size:17px;line-height:1.55;color:rgba(244,248,251,.84)}

/* Combat tips and ability lists outside the duo guide. */
.guide-content .tip-list,.ability-list{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.guide-content .overline+.tip-list{margin-top:12px}/* a tips-only group has no skill grid to set the 12 px under its label */
.guide-content .combat-tip{width:calc(100% + 20px);display:flex;align-items:flex-start;gap:10px;padding:7px 10px;margin-inline:-10px;border:0;border-radius:10px;background:transparent;color:rgba(244,248,251,.86);text-align:left;font-size:17px;line-height:1.5;cursor:pointer}
.guide-content .combat-tip[aria-expanded="true"]{background:rgba(255,255,255,.055);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
@media(hover:hover) and (pointer:fine){.guide-content .combat-tip:hover{background:rgba(255,255,255,.055);color:#fff}}
.guide-content .combat-tip>.wow-icon-wrap{margin-top:-1px}
.guide-content .combat-tip strong{color:var(--accent)}
.guide-content .skill-pill>span:nth-child(2){color:var(--accent)}
.guide-content .rotation-grid{margin:12px 0 18px;counter-reset:rot}
.guide-content .rotation-grid .skill-pill{position:relative;counter-increment:rot}
.guide-content .rotation-grid .skill-pill::before{content:counter(rot);position:absolute;left:-7px;top:-7px;z-index:1;width:20px;height:20px;display:grid;place-items:center;border-radius:7px;background:var(--accent);color:#0d141b;font-size:12px;font-weight:900;pointer-events:none}

/* ---------- Tier lists ---------- */
.tier-list{overflow:hidden;border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.tier-row{display:grid;grid-template-columns:76px minmax(0,1fr)}
.tier-row+.tier-row{border-top:1px solid var(--line-soft)}
.tier-label{display:grid;place-content:center;justify-items:center;gap:2px;font-size:28px;font-weight:900;line-height:1;color:#0d141b;box-shadow:inset -1px 0 0 rgba(0,0,0,.12)}
.tier-row.tier-S .tier-label{background:var(--tier-s)}.tier-row.tier-A .tier-label{background:var(--tier-a)}.tier-row.tier-B .tier-label{background:var(--tier-b)}.tier-row.tier-C .tier-label{background:var(--tier-c)}.tier-row.tier-D .tier-label{background:var(--tier-d)}
.tier-items{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px;list-style:none}
.tier-entry{display:flex;align-items:center;gap:2px;min-width:0;padding-right:4px;border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--card-accent,var(--accent));border-radius:13px;background:rgba(255,255,255,.04);transition:background .16s ease,border-color .16s ease}
.tier-entry:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);border-left-color:var(--card-accent,var(--accent))}
.tier-entry a{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;padding:4px 6px 4px 4px;border-radius:11px;color:#fff;text-decoration:none;font-size:16px;font-weight:700;line-height:1.2}
.tier-icon{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14)}
.tier-entry small{display:block;font-size:16px;font-weight:600;line-height:1.15;color:rgba(238,244,247,.68)}
.tier-entry .mini-info{flex:0 0 auto;width:36px;height:36px}
@media(pointer:coarse){.tag,.filter-chip,.class-card-planner{min-height:44px}.tier-entry .mini-info{width:44px;height:44px}}
/* J21: the scale is explained right above the first list. */
.tier-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px;padding:0;list-style:none;font-size:16px;color:var(--text-2)}
.tier-legend li{display:inline-flex;align-items:baseline;gap:8px}
.tier-legend .tier-badge{flex:0 0 auto;align-self:center}

/* ---------- Generic content blocks ---------- */
.prose{max-width:var(--jr-measure)}
.prose p{margin:0 0 14px;font-size:17px;line-height:1.65;color:rgba(244,248,251,.84)}
.prose p:last-child{margin-bottom:0}
/* Blocks of dungeon, guide and tier list sections share one rhythm instead of per-pair margins. */
.blocks{display:grid;gap:var(--jr-gap)}
.blocks>*,.blocks>.info-bar,.blocks>.warning-bar{margin:0}
.card-link{color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.card-link:hover{border-color:rgba(255,255,255,.24)}
.bullet-list{margin:10px 0 0;padding-left:21px}
.table-wrap{overflow-x:auto;border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.table-wrap:focus-visible{outline:2px solid var(--kevin);outline-offset:2px}
.data-table{min-width:640px}
.data-table caption{padding:16px var(--jr-pad) 4px;text-align:left;font-size:17px;font-weight:750;color:#fff}
@media(min-width:621px){.data-table tr>:first-child{padding-left:var(--jr-pad)}}
.data-table th[scope=col]{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.data-table th[scope=row]{min-width:7.5em;font-weight:750;color:#fff}
.data-table td,.data-table th[scope=row]{font-size:16px;line-height:1.5}
.data-table tbody tr:last-child>*{border-bottom:0}
.data-table th.q-uncommon{color:var(--q-uncommon)}.data-table th.q-rare{color:var(--q-rare)}.data-table th.q-epic{color:var(--q-epic)}
/* Facts form one panel like the TL;DR above them; hairlines split the cells. */
.fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface);overflow:hidden}
.fact{padding:16px var(--jr-pad);box-shadow:-1px -1px 0 var(--line-soft)}
.fact>span{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fact>strong{display:block;margin-top:6px;font-size:21px;line-height:1.25;letter-spacing:-.02em}
.fact>span,.fact>strong{overflow-wrap:anywhere;hyphens:auto}
.fact p{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--text-2)}

/* Boss cards: head, story, abilities, one tip per role, loot. */
.boss-list{display:grid;gap:var(--jr-gap);margin:0;padding:0;list-style:none}
/* Preview bosses: two columns, three where that fills every row; an odd last card takes the whole row. */
.boss-list.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.boss-list.compact>:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:1101px){
  .boss-list.compact:has(>:nth-child(3n):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .boss-list.compact:has(>:nth-child(3n):last-child)>:last-child{grid-column:auto}
}
.boss-card{padding:var(--jr-pad);border:1px solid var(--jr-line);border-top:3px solid var(--accent);border-radius:var(--jr-radius);background:var(--surface)}
.boss-head{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center}
.boss-head .overline{color:var(--accent)}
.boss-head h3{margin:2px 0 0;font-size:26px;line-height:1.15;letter-spacing:-.03em;overflow-wrap:break-word;hyphens:auto}
.boss-num{width:56px;height:56px;border-radius:14px;font-size:24px}
.boss-card>p{margin:12px 0 0;font-size:17px;line-height:1.6;color:rgba(244,248,251,.84)}
.boss-card .ability-list{margin-top:12px}
.role-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 0}
.role-dl>div{padding:12px 16px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.03)}
.role-dl dt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.role-dl dd{margin:4px 0 0;font-size:16px;line-height:1.5;color:rgba(244,248,251,.84)}
.boss-loot{margin-top:16px}
.boss-loot ul{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none}
.boss-loot strong{display:block;font-size:16px;line-height:1.35}
.boss-loot span{display:block;font-size:14px;color:var(--muted)}
.q-common strong{color:var(--q-common)}.q-uncommon strong{color:var(--q-uncommon)}.q-rare strong{color:var(--q-rare)}.q-epic strong{color:var(--q-epic)}
/* Item names with a card (boss loot, first table cells) show a dotted line in their colour. */
.boss-loot strong[data-tip],.data-table th[data-tip]{text-decoration:underline dotted color-mix(in srgb,currentColor 50%,transparent);text-underline-offset:4px}

/* Timeline. */
.timeline{position:relative;display:grid;gap:12px;margin:0;padding:0 0 0 26px;list-style:none}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),rgba(255,255,255,.08))}
.timeline li{position:relative;padding:16px var(--jr-pad);border:1px solid var(--jr-line);border-radius:16px;background:var(--surface)}
.timeline li::before{content:"";position:absolute;left:-24px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.timeline li.done::before{background:var(--accent)}
.timeline time{display:block;font-size:14px;font-weight:800;color:var(--accent)}
.timeline strong{display:block;margin-top:2px;font-size:18px}
.timeline p{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--text-2)}
/* News (block meldungen): a timeline whose entries carry a heading, what it means for you and the source link */
.news-list h3{margin:2px 0 0;font-size:18px;line-height:1.3}
.news-list .news-folge span{font-weight:800;color:var(--text)}
.news-list .news-quelle{margin-top:8px}
.news-list .news-quelle a{color:var(--accent);text-underline-offset:3px}

/* Sources and footer. */
.page-foot{max-width:var(--jr-content,1240px);margin:0 auto;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:14px;line-height:1.5;color:var(--muted)}
/* The home link stands alone, so it gets a 44px hit area; the negative margin keeps the line height. */
.page-foot a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;color:rgba(238,244,247,.78)}
/* Joey & Kevin: looks like the footer text around it, underlined only under the pointer. */
.page-foot a.foot-duo{color:var(--muted);text-decoration:none}
.page-foot a.foot-duo:hover,.page-foot a.foot-duo:focus-visible{color:rgba(238,244,247,.78);text-decoration:underline}

/* System cards: equal rows, info row sits on one line across the grid. */
.guide-content .system-card{display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start}
.guide-content .system-card>.wow-icon-wrap{margin-bottom:14px}
.guide-content .system-card h3{margin:4px 0 8px}
.guide-content .system-card .camp-bonus-row{align-self:end;margin-top:16px}
.system-card>.tile-cta{align-self:end;margin-top:16px}
.system-card.card-link .overline{color:var(--accent)}

/* Accent-colored text anchors from content markup. */
.key-term-accent{color:var(--accent)}
/* Internal links inside text keep the reading color and show a quiet underline. */
.text-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.text-link:hover{color:var(--accent);text-decoration-color:currentColor}
/* p.card-note outranks .glass-card p from the shared sheet. */
p.card-note{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--text-2)}
/* Strips that scroll sideways fade out at the edge while there is more to see. */
.sibling-switch[data-more],.table-wrap[data-more],.page-hero .tag-row[data-more]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.sibling-switch[data-less],.table-wrap[data-less],.page-hero .tag-row[data-less]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.sibling-switch[data-less][data-more],.table-wrap[data-less][data-more],.page-hero .tag-row[data-less][data-more]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.guide-content .info-bar,.guide-content .warning-bar{line-height:1.55}
.guide-content .info-bar{border-color:rgba(104,185,235,.34)}
/* Notes right under a table or tier list are its footnotes (up to three in a row): no box, so warnings keep their signal. */
.guide-content .tier-list+.info-bar,.guide-content .blocks>:is(.table-wrap,.table-wrap+.info-bar,.table-wrap+.info-bar+.info-bar)+.info-bar{max-width:var(--jr-measure);padding:0;border:0;background:none;color:var(--text-2)}
.guide-content .warning-bar{border-color:rgba(228,187,106,.42);background:linear-gradient(90deg,rgba(228,187,106,.10),transparent 60%),var(--surface);box-shadow:inset 3px 0 0 var(--gold)}
/* Profession cards of the class guides (the Duo guide keeps its own sizes). */
.profession-pair .profession-row strong,.profession-pair .profession-row span,.profession-pair .profession-link{font-size:16px}
.profession-pair .profession-card h3{min-height:0;font-size:22px}
.profession-pair .title-icon-row>span:last-child{overflow-wrap:break-word;hyphens:auto}
@media(min-width:901px){
  .profession-pair .profession-card{grid-row:span 5;grid-template-rows:subgrid!important;row-gap:0}
  .profession-pair .profession-body{grid-row:span 2;grid-template-rows:subgrid;height:auto}
  .profession-pair .profession-row{min-height:0}
  .profession-pair .profession-link{align-self:start}
}
/* With a gold page accent, concepts (accent) read as bold white so they differ from gold values. */
.accent-is-gold .key-term-accent{color:#fff;font-weight:750}
/* The skip link target needs no outline of its own. */
main[tabindex="-1"]:focus{outline:none}
.guide-content .glass-card h3.overline{margin:0;font-size:13px;letter-spacing:.14em;line-height:1.4}

/* ---------- Responsive ---------- */
/* Rotation cards side by side leave skill names too narrow below 1280px; one column keeps them whole. */
@media(max-width:1279.98px){
  #rotation .cards-2{grid-template-columns:1fr}
}
@media(max-width:1100px){
  .fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .talent-trees{grid-template-columns:1fr}
  /* Unused trees keep their header; the full grid stays for the trees this build puts points in. */
  .talent-build .talent-tree:not(.is-used) .talent-grid{display:none}
  .talent-build .talent-tree:not(.is-used) header{margin:0}
  .talent-grid{justify-content:center;column-gap:clamp(14px,6vw,40px)}
}
@media(max-width:900px){
  html{scroll-padding-top:88px}
  .featured-card{grid-template-columns:1fr}
  .step-list,.proscons,.race-row,.tierlist-grid,.doc-grid,.spec-grid,.role-dl,.guide-content .cards-3{grid-template-columns:1fr}
}
@media(max-width:760px){
  .page-hero{padding-top:24px}
  .home-hero{padding-top:32px}
  .page-hero-main{grid-template-columns:56px minmax(0,1fr);gap:0 14px;align-items:center}
  .page-hero-main>div{display:contents}
  .page-hero-main>.hero-icon{width:56px;height:56px;border-radius:14px}
  .page-hero-main .eyebrow{grid-column:2}
  .page-hero-main>div>:not(.eyebrow){grid-column:1/-1}
  .page-hero h1{margin-top:16px}
  .profession-pair .profession-body{grid-template-rows:none}
  .page-hero h1{font-size:44px}
  .hero-sub{font-size:18px}
  /* The four cells share the phone width: frame border and padding take 28 px, the three gaps 24 px. */
  .countdown{--cd-cell:clamp(58px,calc((100vw - 84px) / 4),96px);--cd-gap:8px;gap:12px;margin-top:16px;padding:16px 12px}
  .countdown.is-ready:not(.is-running) .countdown-value,html:not(.js) .countdown-value{font-size:24px}
  .tldr{grid-template-columns:1fr}
  .tldr li+li{border-left:0;border-top:1px solid var(--line-soft)}
  .fact strong{font-size:18px}
  .talent-step{grid-template-columns:44px minmax(0,1fr) auto;gap:6px 12px}
  .talent-level{grid-column:1/3}
  .talent-points{grid-row:1;grid-column:3}
  .talent-name{grid-column:2/4}
  .talent-grid{gap:12px}
  .gear-dl,.glass-card .gear-dl{grid-template-columns:1fr}
  .gear-dl dt,.glass-card .gear-dl dt{padding-bottom:0;border-bottom:0}
  .gear-dl dd,.glass-card .gear-dl dd{padding-top:2px}
  .filter-bar{width:100%}
  .filter-chip{flex:1 1 auto}
  .tier-row{grid-template-columns:56px minmax(0,1fr)}
  .tier-label{font-size:24px}
  .tier-items{padding:10px}
  .tier-entry{flex:1 1 100%}
  .tier-entry a{flex:1 1 auto}
  .doc-card{grid-template-columns:48px minmax(0,1fr)}
  .doc-card-icon{width:48px;height:48px}
  .boss-list.compact{grid-template-columns:1fr}
}
/* The shared stylesheet stacks rotation rows at 560px; long skill names need it up to 620px. */
@media(max-width:620px){
  /* Tables become one card per row; each cell names its column. */
  .data-table{min-width:0}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .data-table tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
  .data-table tbody tr:last-child{border-bottom:0}
  .data-table th[scope=row],.data-table td{display:block;min-width:0;padding:2px 0;border:0}
  .data-table th[scope=row]{padding-bottom:4px;font-size:17px}
  .data-table td::before{content:attr(data-label);display:block;margin-top:6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  /* Short cells: label and value on one line. */
  .data-table.compact td{position:relative;padding:3px 0 3px 108px}
  .data-table.compact td::before{position:absolute;left:0;top:5px;width:96px;margin:0;line-height:1.35}
  /* Class cards: name and tier chips; the text lives in the guide. */
  .class-card{grid-row:auto;grid-template-rows:auto}
  .class-card p{display:none}
  .build-switch,.js .build-switch[hidden]{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%}
  .build-switch .filter-chip{padding:5px 10px;hyphens:auto}
  .build-switch .filter-chip b{font-size:14px}
  #rotation .rotation-row{grid-template-columns:1fr;gap:6px}
  #rotation .rotation-connector{width:18px;height:18px;justify-self:center;transform:rotate(90deg)}
}
@media(max-width:560px){
  /* Hero tags stay one row that swipes and fades like the class switcher, with its slim bar for a mouse;
     the 8px padding holds the focus ring (2px outline, 3px offset), which a scroll container would clip. */
  .page-hero .tag-row{flex-wrap:nowrap;overflow-x:auto;scroll-padding-inline:48px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;padding:8px;margin:8px -8px -8px}
  .page-hero .tag-row>li{flex:0 0 auto}
  /* The step number sits beside the overline, so the text keeps the full card width. */
  .step-card{padding-left:var(--jr-pad)}
  .step-card::before{position:static;float:left;width:24px;height:24px;margin:0 8px 0 0;border-radius:8px;font-size:14px}
  .tier-legend{gap:4px 16px;line-height:1.35}
}
@media(max-width:420px){
  .fact-grid{grid-template-columns:1fr}
  /* Long overlines and titles (Ausgrabungsstätte) break instead of widening the card. */
  .doc-card{column-gap:12px}
  .doc-card h3{hyphens:auto;overflow-wrap:break-word}.doc-card .overline{overflow-wrap:break-word}
  .build-switch,.js .build-switch[hidden]{grid-template-columns:1fr}
  .build-switch .filter-chip{display:flex;align-items:center;gap:8px;min-height:44px}
  .profession-pair .title-icon-row{flex-direction:column;align-items:flex-start;gap:10px}
  /* Narrow cells: "Sekunden" fits only without capitals and letter spacing. */
  .countdown-unit{letter-spacing:.02em;text-transform:none}
}
@media(max-width:360px){
  .tier-entry a{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .class-card:hover,.featured-card:hover,.tierlist-card:hover,.doc-card:hover,.card-link:hover,.planner-pick:hover{transform:none}
}
/* Forced colors drop backgrounds and shadows, so mark the selected entries with an outline. */
@media(forced-colors:active){
  .filter-chip[aria-checked="true"]:not(:focus-visible),.sibling-switch a[aria-current]:not(:focus-visible),.talent-node.taken{outline:2px solid Highlight;outline-offset:-2px}
  .backgrounds,.background-shade{display:none}
  .dock-item[aria-current]{outline:2px solid Highlight;outline-offset:-2px}
}

/* Talent planner: every node is a button; open nodes can take a point right now. The points bar keeps one height:
   points left, then spent, split per tree and level; below 960px it gets jump links to the stacked trees. */
.planner-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status actions";align-items:center;gap:10px 18px;margin:0 0 var(--jr-gap);padding:12px 12px 12px var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.planner-status{margin:0;font-size:16px;font-weight:750;font-variant-numeric:tabular-nums}
.planner-bar .planner-status{grid-area:status;min-width:0}
.planner-status strong{display:block;font-size:18px;line-height:1.3}
.planner-detail{display:block;color:var(--text-2);font-weight:650;line-height:1.4}
.planner-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:8px}
.planner-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--jr-line);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.planner-btn svg,.planner-open svg{width:18px;height:18px;flex:none}
/* Copied: a check mark instead of the link icon for two seconds (also where the label is hidden). */
:is([data-action="copy"],[data-action="text"]) svg+svg,:is([data-action="copy"],[data-action="text"])[data-copied] svg:first-child{display:none}
:is([data-action="copy"],[data-action="text"])[data-copied] svg+svg{display:block}
:is([data-action="copy"],[data-action="text"])[data-copied]{border-color:color-mix(in srgb,var(--taken) 55%,transparent);color:var(--taken)}
.tree-jump{grid-area:jump;display:none}
.tree-jump a{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:4px 10px;border:1px solid var(--jr-line);border-radius:12px;background:rgba(255,255,255,.05);color:var(--text-2);font-weight:750;text-decoration:none;font-variant-numeric:tabular-nums}
.tree-jump .wow-icon-wrap,.tree-jump .tree-glyph{flex:none;width:26px;height:26px;border-radius:7px}
.tree-jump .tree-glyph svg{width:16px;height:16px}
.tree-jump-name{white-space:nowrap}
.tree-jump a.is-used{border-color:color-mix(in srgb,var(--taken) 40%,transparent)}
.tree-jump a.is-used b{color:var(--taken)}
.planner-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Our builds sit right above the bar, so a link with #planer shows them, the bar and the first talents. */
.planner-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 var(--jr-gap)}
.planner-presets .overline{margin-right:4px;color:var(--muted)}
.planner-presets a[aria-current]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.talent-planner .planner-warning{margin:0 0 var(--jr-gap)}
/* The trees end the planner; the block after it brings its own gap. */
.talent-planner .talent-trees{margin-bottom:0}
/* Undo after a reset: a bar at the bottom of the screen, outside the page flow. */
.planner-undo{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;width:max-content;max-width:calc(100vw - 32px);padding:8px 8px 8px 18px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgb(18,27,37);box-shadow:0 18px 42px rgba(0,0,0,.45);font-weight:700;transform:translateX(-50%)}
.planner-undo[hidden]{display:none}
.planner-undo .planner-btn{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.talent-planner .talent-node{cursor:pointer}
.talent-planner .talent-node.open{border-color:rgba(255,255,255,.34)}
.talent-planner .talent-node.open .talent-icon{filter:none;opacity:.9}
.talent-node.refused{animation:talent-refused .36s ease}
@keyframes talent-refused{25%{transform:translateX(-3px);border-color:#ff9f8f}75%{transform:translateX(3px);border-color:#ff9f8f}}
/* Reduced motion drops the shake; a red frame shows the refusal instead. */
@media(prefers-reduced-motion:reduce){.talent-planner .talent-node.refused{border-color:#ff9f8f;box-shadow:0 0 0 2px #ff9f8f}}
.talent-planner .talent-tree header{grid-template-columns:38px minmax(0,1fr) auto 44px}
/* Long tree names (Wiederherstellung) wrap on small phones instead of running under the points. */
.talent-planner .talent-tree header strong{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.talent-planner .talent-tree:focus{outline:none}
.talent-planner .talent-tree:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tree-reset{display:grid;place-items:center;width:44px;height:44px;margin:-3px 0;padding:0;border:0;border-radius:10px;background:none;color:var(--text-2);cursor:pointer}
.tree-reset svg{width:18px;height:18px}
.talent-tree:not(.is-used) .tree-reset:not(:focus){visibility:hidden}
.planner-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--jr-gap);padding:10px 16px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:#fff;font-weight:750;text-decoration:none}
@media(hover:hover) and (pointer:fine){
  .planner-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
  .tree-jump a:hover{color:#fff;border-color:rgba(255,255,255,.22)}
  .tree-reset:hover{color:#fff;background:rgba(255,255,255,.08)}
  .planner-open:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
}
@media(max-width:960px){
  .planner-bar{grid-template-areas:"status actions" "jump jump"}
  .tree-jump{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .planner-split{display:none}
}
@media(max-width:560px){
  .farm-bar .planner-btn{flex-direction:column;justify-content:center;gap:4px;padding:8px 6px;font-size:14px;line-height:1.2;text-align:center}
}
.menu-stack{display:grid;gap:18px;align-content:start}

/* Duo planner: checklists, farm list, camp and rules. */
.duo-panel+.duo-panel{margin-top:44px}
.check-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;margin:0 0 14px}
.check-head .wow-icon-wrap{width:44px;height:44px}
.check-head h3{margin:2px 0 0;font-size:22px;line-height:1.15;overflow-wrap:break-word;hyphens:auto}
.check-progress{padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.06);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.check-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.check-item{display:grid;grid-template-columns:24px 92px 36px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:12px var(--jr-pad);border:1px solid var(--jr-line);border-radius:14px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,opacity .16s ease}
.check-box{display:grid;place-items:center;width:22px;height:22px;border:2px solid rgba(255,255,255,.35);border-radius:7px}
.check-item[aria-pressed="true"]{opacity:.6}
.check-item[aria-pressed="true"] .check-box{border-color:var(--taken);background:var(--taken)}
.check-item[aria-pressed="true"] .check-box::after{content:"✓";content:"✓" / "";color:#0b1118;font-size:14px;font-weight:900}
.check-item[aria-pressed="true"] .check-text strong{text-decoration:line-through}
.check-range{font-size:15px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.check-item .wow-icon-wrap{width:36px;height:36px}
.check-text{display:grid;gap:2px;min-width:0;overflow-wrap:break-word;hyphens:auto}
.check-text strong{font-size:17px;line-height:1.35}
.check-text strong b{color:var(--gold);font-variant-numeric:tabular-nums}
.check-text>span{font-size:16px;line-height:1.45;color:var(--text-2)}
.check-text small{font-size:14px;line-height:1.4;color:var(--muted)}
.farm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin:0 0 var(--jr-gap);padding:12px 12px 12px var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.farm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--jr-gap)}
.farm-group{padding:16px var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.farm-group[hidden],.farm-group li[hidden]{display:none}
.farm-group ul{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.farm-group li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center}
.farm-group .wow-icon-wrap{width:36px;height:36px}
.farm-name strong{display:block;font-size:17px}
.farm-count{color:var(--gold);font-variant-numeric:tabular-nums}
.farm-name>span{display:block;font-size:16px;line-height:1.4;color:var(--text-2)}
.farm-empty{grid-column:1/-1;margin:0}
/* Groups disappear once their materials are done; an odd last visible group takes the whole row. */
.farm-group:nth-last-child(1 of .farm-group:not([hidden])):nth-child(odd of .farm-group:not([hidden])){grid-column:1/-1}
.farm-phases-title{margin:32px 0 12px}
.camp-card .check-head{grid-template-columns:44px minmax(0,1fr);margin-bottom:10px}
/* Three camp cards side by side are too narrow for label and value in one row; below 900px they stack (see Responsive). */
@media(min-width:901px) and (max-width:1100px){.camp-card .gear-dl{grid-template-columns:1fr}.camp-card .gear-dl dt{padding-bottom:0;border-bottom:0}.camp-card .gear-dl dd{padding-top:2px}}
.rule-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.rule-list p{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--text-2)}
.rule-state{padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--taken) 16%,transparent);color:var(--taken);font-size:13px;font-weight:800}
.rule-state.open{background:rgba(255,180,84,.14);color:var(--tier-s)}
@media(hover:hover) and (pointer:fine){.check-item:hover{border-color:rgba(255,255,255,.22);background:var(--surface-2)}}
@media(max-width:760px){.farm-list{grid-template-columns:1fr}}
@media(max-width:620px){
  .check-item{grid-template-columns:24px 36px minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px}
  .check-box,.check-item .wow-icon-wrap{grid-row:1/3}
  .check-box{margin-top:2px}
  .check-range{grid-column:3;grid-row:1}
  .check-text{grid-column:3}
}
.tree-glyph{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--accent)}
.tree-glyph svg{width:20px;height:20px}
.loot-bracket{margin:22px 0 10px}
.loot-bracket:first-child{margin-top:0}
/* Brackets above the beta cap are folded; the pills keep their size inside the text grid. */
.loot-group>.check-list{padding:0 12px 12px}
.loot-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.loot-tag{padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--text-2);font-size:13px;font-weight:700;white-space:nowrap}
.loot-tag.later{background:rgba(255,180,84,.14);color:var(--tier-s)}
.q-common .check-text strong{color:var(--q-common)}.q-uncommon .check-text strong{color:var(--q-uncommon)}
.q-rare .check-text strong{color:var(--q-rare)}.q-epic .check-text strong{color:var(--q-epic)}
/* v24.1 planner feel: sticky points bar, quick state transitions, rank bump, game-like tooltip. */
.talent-planner .planner-bar{position:sticky;top:92px;z-index:5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.talent-planner .talent-node{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:border-color .18s ease,box-shadow .18s ease,transform .16s ease}
.talent-planner .talent-icon{transition:filter .2s ease,opacity .2s ease}
.talent-planner .talent-rank{transition:color .18s ease,border-color .18s ease}
.talent-arrow::before,.talent-arrow::after{transition:background-color .2s ease}
.talent-node.bump .talent-rank{animation:rank-bump .22s ease}
@keyframes rank-bump{40%{transform:scale(1.25)}}
.talent-planner .talent-node:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tt-rank{display:block;margin:-2px 0 6px;color:var(--taken,#8fe3a1);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.tt-rank-zero{color:var(--muted)}
.tt-text{display:block;color:var(--gold)}
.tt-label{display:block;margin:8px 0 2px;color:#fff;font-weight:700}
.tt-need,.tt-level,.tt-info{display:block;margin:0 0 6px}
.tt-need{color:#ff9f8f;font-weight:700}
.tt-level,.tt-info{color:var(--text-2)}
/* - and + stay at the foot of a tooltip whose text scrolls. */
.tt-actions{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;padding-top:8px;background:rgb(18,27,37);box-shadow:0 -8px 10px -6px rgb(18,27,37)}
.tt-step{min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:22px;font-weight:800;cursor:pointer}
.tt-step:disabled{opacity:.35;cursor:default}
.global-popover.talent-tip{width:320px!important}
@media(max-width:900px){.talent-planner .planner-bar{top:74px}}
/* Phones and small tablets: the status on one line, then tree jump and the two icon buttons. */
@media(max-width:760px){
  .talent-planner .planner-bar{grid-template-areas:"status status" "jump actions";gap:8px;padding:8px 8px 8px 12px}
  .planner-bar .planner-status{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .planner-status strong,.planner-detail{display:inline}
  .planner-status strong{font-size:17px}
  .planner-spent{display:none}
  .tree-jump{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tree-jump a{gap:5px;padding:4px 6px}
  .tree-jump-name,.planner-bar .planner-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .talent-planner .planner-actions{flex-wrap:nowrap;gap:6px}
  .planner-bar .planner-btn{width:44px;padding:0;justify-content:center}
}
/* Blocks for fed guides: items with client tooltips, farm routes. */
.block-title{margin:0 0 12px}
.item-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:8px;margin:0;padding:0;list-style:none}
.item-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;height:100%;padding:12px var(--jr-pad);border:1px solid var(--jr-line);border-radius:14px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer}
.item-row .wow-icon-wrap{width:36px;height:36px}
.item-name{display:grid;gap:2px;min-width:0}
.item-name strong{font-size:17px;line-height:1.3}
.item-name>span{font-size:16px;line-height:1.4;color:var(--text-2)}
.item-meta{display:grid;justify-items:end;gap:2px;font-variant-numeric:tabular-nums}
.item-meta b{font-size:15px;color:var(--gold)}
.q-poor .item-name strong{color:#9d9d9d}.q-common .item-name strong{color:var(--q-common)}.q-uncommon .item-name strong{color:var(--q-uncommon)}
.q-rare .item-name strong{color:var(--q-rare)}.q-epic .item-name strong{color:var(--q-epic)}
.route-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.route-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px var(--jr-pad);border:1px solid var(--jr-line);border-radius:16px;background:var(--surface)}
.route-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-weight:800}
.route-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.route-where strong{font-size:17px}
.route-coords{padding:1px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--text-2);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.route-goal{display:block;margin-top:4px;color:var(--gold);font-size:16px;font-weight:700}
.route-step p{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--text-2)}
@media(hover:hover) and (pointer:fine){.item-row:hover{border-color:rgba(255,255,255,.22);background:var(--surface-2)}}
/* Private SEO dashboard */
.seo-md{margin-bottom:12px}
.seo-md p,.seo-md li{font-size:16px;line-height:1.55}
.seo-h{margin:14px 0 6px;font-size:18px}
.seo-h:first-child{margin-top:0}
.seo-list{margin:6px 0;padding-left:20px}
.seo-box{display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid rgba(255,255,255,.4);border-radius:4px;vertical-align:-2px}
.seo-box.done{border-color:var(--taken);background:var(--taken)}
.seo-code{overflow-x:auto;padding:12px;border-radius:12px;background:rgba(0,0,0,.25);font-size:14px;white-space:pre-wrap}

/* ---------- v32: news, class cards with planner link, tools, guide groups ---------- */
/* Read by screen readers and search engines, not shown (the start page's h1). */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.home-news{display:grid;margin:0 0 8px;padding:0;list-style:none;border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface);overflow:hidden}
.home-news li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px var(--jr-pad);border-top:1px solid var(--line-soft)}
.home-news li:first-child{border-top:0}
.home-news time{font-size:15px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.home-news a{color:#fff;font-size:17px;font-weight:700;text-decoration:none}
.home-news a:hover{text-decoration:underline;text-underline-offset:3px}
.class-card-link{color:inherit;text-decoration:none}
.class-card-link::after{content:"";position:absolute;inset:0;border-radius:var(--jr-radius)}
.class-card-link:focus-visible{outline:none}
.class-card:has(.class-card-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.class-card-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:6px}
.class-card-foot .mini-tags{min-width:0}
.class-card-planner{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 9px;border:1px solid var(--jr-line);border-radius:999px;background:rgba(255,255,255,.05);color:#fff;font-size:14px;font-weight:750;text-decoration:none}
.class-card-planner:hover{border-color:color-mix(in srgb,var(--card-accent,var(--accent)) 60%,transparent);background:rgba(255,255,255,.1)}
.class-card-planner svg{width:16px;height:16px}
@media(max-width:767px){.class-card-planner{min-height:44px}}
/* A narrow card (phone, two or three columns on tablets) drops the icon, so the tier chips keep one line beside the button. */
.class-card{container-type:inline-size}
@container (max-width:329px){.class-card-planner svg{display:none}}
/* Too narrow for chips and button in one line (three columns at 1024 px): the button goes below, the same in every card. */
@container (max-width:289px){.class-card-foot{flex-direction:column;align-items:flex-start}}
.class-card .mini-tags{gap:5px}
.class-card .mini-tags li.tier-chip{padding-left:7px}
.doc-grid.tools-grid{margin-top:var(--jr-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.doc-grid.tools-grid>.doc-card:last-child:nth-child(odd){grid-column:auto}
.guide-group-title{margin:32px 0 14px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.section-head+.guide-group-title{margin-top:0}
.menu-top{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.menu-top .menu-home{margin:0}
.menu-guides .menu-subhead{margin:12px 0 4px;font-size:12px;color:var(--muted)}
.menu-guides .menu-subhead:first-of-type{margin-top:8px}
/* Two menu columns (tablets): the guides take both, like the classes, instead of one long column next to an empty one. */
@media(min-width:761px) and (max-width:1100px){.menu-guides{grid-column:span 2}.menu-guides ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Wide screens: six columns, the guides take two with two lists each, so no single long column sets the panel height. */
@media(min-width:1101px){.site-menu-panel{width:min(1080px,calc(100vw - 28px))}.menu-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.menu-guides{grid-column:span 2}.menu-guides ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Changes of a page for the reader, newest first */
.changelog{margin-top:var(--jr-section-y,48px);padding:var(--jr-pad);border:1px solid var(--jr-line);border-radius:var(--jr-radius);background:var(--surface)}
.changelog h2{margin:0 0 10px;font-size:14px}
.changelog ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.changelog li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.5;color:var(--text-2)}
.changelog time{font-weight:800;color:var(--text)}
/* Glossary: search field, type chips, table */
.glossary-search{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:6px 6px 6px 16px;border:1px solid var(--jr-line);border-radius:14px;background:var(--surface)}
.glossary-search span{font-size:15px;font-weight:750;color:var(--text-2)}
.glossary-search input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px}
.glossary-search input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.glossary-count{margin:0 0 8px;font-size:16px;color:var(--text-2)}
.glossary tr.is-miss{display:none}
.glossary td[lang="en"]{color:var(--text-2)}
@media(max-width:980px){.doc-grid.tools-grid{grid-template-columns:1fr}}
@media(max-width:640px){.home-news li,.changelog li{grid-template-columns:1fr;gap:2px}}
/* Dungeon quests to tick off, and the dungeon loot card of the class guides */
.quest-progress{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin:0 0 10px}
.quest-progress p{flex:1 1 320px;margin:0;font-size:16px;color:var(--text-2)}
.quest-progress strong{color:var(--text)}
.quest-reset{min-height:40px;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-size:16px;font-weight:750;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(pointer:coarse){.quest-reset{min-height:44px}}
.quest-check{display:inline-grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.quest-check .check-box{margin-top:2px}
.quest-check[aria-pressed="true"] .check-box{border-color:var(--taken);background:var(--taken)}
.quest-check[aria-pressed="true"] .check-box::after{content:"\2713";content:"\2713" / "";color:#0b1118;font-size:14px;font-weight:900}
.quest-check[aria-pressed="true"]>span:last-child{opacity:.6;text-decoration:line-through}
.loot-card{margin-top:var(--jr-gap)}
.loot-card .table-wrap{margin-top:8px}
/* Phones: one item in three short lines (name and slot, where, stats) instead of a labelled block per value; the
   column names stay in the table for screen readers. */
@media(max-width:620px){
  .loot-card .data-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .loot-card .data-table th[scope=row]{grid-column:1;padding:0;background:none}
  .loot-card .data-table td{padding:0}
  .loot-card .data-table td::before{content:none}
  .loot-card .data-table td[data-label="Slot"]{grid-column:2;grid-row:1;color:var(--muted)}
  .loot-card .data-table td[data-label="Wo"],.loot-card .data-table td[data-label="Werte"]{grid-column:1/-1}
  .loot-card .data-table td[data-label="Werte"]{color:var(--text)}
}
/* ---------- Polish 25.09.2026: the menu fades in, pills give way when pressed, a new tick pops, a news entry you jump to
   lights up. Transform and opacity only (v29), and reduced motion switches all of it off (end of styles.v23.css). ---------- */
.site-menu[open] .site-menu-panel{animation:panel-in .14s ease-out}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}}
.class-card-planner,.planner-btn,a.tag,.menu-home,.site-menu-toggle{transition:transform .12s ease}
.class-card-planner:active,.planner-btn:active,a.tag:active,.menu-home:active,.site-menu-toggle:active{transform:scale(.97)}
.check-item.bump .check-box,.quest-check.bump .check-box{animation:rank-bump .22s ease}
.news-list li:target::after{content:"";position:absolute;inset:-1px;border:2px solid var(--accent);border-radius:16px;pointer-events:none;animation:target-fade 2.6s ease-out forwards}
@keyframes target-fade{0%,45%{opacity:1}to{opacity:0}}