:root {
/* ═══ VOID/MIDNIGHT STRICT DARK MODE ═══ */
--tag-gear-bg:#2a1f00; --tag-gear-fg:#e8c040;
--tag-rep-bg:#0a2a15; --tag-rep-fg:#3db86a;
--tag-currency-bg:#0a1a2a; --tag-currency-fg:#6b9ef7;
--tag-crafting-bg:#1a0f2a; --tag-crafting-fg:#a78bfa;
--weekly-check-tick:#000;
--bg: #0a090d;
--font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
--deep: #000000;
--panel: #0d0d12;
--border: #2a2a35;
--gold: #c9a227;
--gold2: #e5c568;
--accent: #6b5b95;
--mplus:#d4a84b; --normal:#7a8aa8;
--tank:#4a90d9; --heal:#3db86a; --dps:#e04060;
/* WoW class colors (UI accents) */
--class-deathknight: #c41f3b;
--class-demonhunter: #a330c9;
--class-druid: #ff7d0a;
--class-evoker: #33937f;
--class-hunter: #abd473;
--class-mage: #3fc7eb;
--class-monk: #00ff96;
--class-paladin: #f48cba;
--class-priest: #d6d6ff;
--class-rogue: #fff569;
--class-shaman: #0070de;
--class-warlock: #8787ed;
--class-warrior: #c79c6e;
--text: #e8e8ec;
--muted: #9ca3af;
--silver: #b8b8c0;
--head-bg: rgba(5, 5, 8, 0.97);
--tab-bg: rgba(5, 5, 8, 0.98);
--boss-hdr: #0a0a10;
--boss-desc-bg: rgba(0,0,0,0.4);
--boss-desc-col: #9ca3af;
--tank-bg: rgba(74,144,217,0.08); --heal-bg: rgba(61,184,106,0.08); --dps-bg: rgba(224,64,96,0.08);
--tip-bg: rgba(201, 162, 39, 0.08);
--info-bg: var(--panel);
--route-bg: var(--deep);
--parchment-texture: none;
--void-glow: 0 0 12px rgba(107, 91, 149, 0.2);
--spacing: 1.5rem;
--content-max: 1100px;
--immersive-card-radius: 20px;
--grid-gap-immersive: 20px;
--prey-void-purple: #8a2be2;
--delve-azure: #00d2ff;
--prof-amber-glow: #f39c12;
--danger-red: rgba(200, 50, 50, 0.42);
--danger-red-border: rgba(255, 100, 100, 0.55);
}
/* Light theme — toggled via body.light + localStorage theme */
body.light {
--weekly-check-tick: #111;
--bg: #eef0f4;
--deep: #e2e5ec;
--panel: #ffffff;
--border: #c5cad6;
--gold: #7a6218;
--gold2: #9a7f22;
--accent: #5a4a78;
--mplus: #a67c1a;
--normal: #5c6b82;
--tank: #2d6fb8;
--heal: #2a9d5c;
--dps: #c42d4a;
--text: #12141a;
--muted: #5c6370;
--silver: #4a5060;
--head-bg: rgba(255, 255, 255, 0.94);
--tab-bg: rgba(248, 249, 252, 0.98);
--boss-hdr: #f0f2f6;
--boss-desc-bg: rgba(0, 0, 0, 0.05);
--boss-desc-col: #4b5568;
--tank-bg: rgba(74, 144, 217, 0.12);
--heal-bg: rgba(61, 184, 106, 0.12);
--dps-bg: rgba(224, 64, 96, 0.1);
--tip-bg: rgba(180, 145, 40, 0.14);
--info-bg: var(--panel);
--route-bg: var(--deep);
--void-glow: 0 0 10px rgba(90, 74, 120, 0.15);
}
/* Light mode — fix hardcoded “dark UI” surfaces & contrast */
body.light .spec-hero {
background: linear-gradient(135deg, #faf6ec, #eef1fa);
}
body.light .floor-tab-btn {
background: var(--panel);
border-color: var(--border);
color: var(--muted);
}
body.light .floor-tab-btn:hover {
background: var(--deep);
color: var(--text);
}
body.light .floor-tab-btn.active {
color: #1a1a22;
}
body.light #feedback-text {
background: var(--deep);
}
body.light .bis-table-wowhead thead {
background: var(--deep);
color: var(--text);
border-bottom: 1px solid var(--border);
}
body.light .kg-open-btn {
background: linear-gradient(135deg, #e8ecf8, #dce4f4);
border-color: rgba(45, 90, 158, 0.35);
color: #1e4a8c;
}
body.light .kg-open-btn:hover {
background: linear-gradient(135deg, #dce6fc, #d0daf8);
color: #143a72;
border-color: rgba(45, 90, 158, 0.55);
}
body.light .kg-open-btn .kg-sub {
color: #3d5fa8;
}
body.light .map-legend {
background: rgba(0, 0, 0, 0.04);
}
body.light .macro-code {
background: var(--deep);
color: #0f3d66;
border-color: var(--border);
}
body.light .route-notice-link:hover {
color: var(--text);
}
body.light .weekly-header h2 {
text-shadow: none;
animation: none;
}
body.light .rot-table td,
body.light .stat-row,
body.light .res-table td,
body.light .bis-table td {
border-bottom-color: var(--border);
}
body.light .bis-table-wowhead tbody tr {
border-bottom-color: var(--border);
}
body.light .bis-table-wowhead tbody tr:hover {
background: rgba(0, 0, 0, 0.03);
}
body.light .bis-version-tooltip {
background: linear-gradient(180deg, #f6f7fb, #eceef4);
border-color: var(--border);
color: var(--text);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
body.light .delves-daily-keys-summary {
color: #5a3d7a;
text-shadow: none;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65;min-height:100vh;overflow-x:hidden;transition:background-color .3s ease,color .3s ease,border-color .3s ease;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
.app-main-shell{flex:1 0 auto;width:100%;display:flex;flex-direction:column;min-width:0}
/* Glassmorphism Panels */
.dungeon-card, .prof-card, .weekly-progress, .weekly-cat-header, .vr-card, .role-panel, .boss-card, #spec-modal-inner, #pwa-modal-inner, #help-modal-inner, #about-modal-inner, .search-results, .wat-nu-panel {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* ── HEADER (Sticky, Clean) ── */
#site-header{position:sticky;top:0;z-index:100;background:var(--head-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:stretch;transition:background-color .3s ease,border-color .3s ease}
.header-inner{max-width:var(--content-max);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;transition:background-color .3s ease}
@media (min-width: 769px) {
.header-inner{flex-wrap:nowrap}
.header-inner.header-inner-main{
display:grid;
grid-template-columns:1fr minmax(160px,min(320px,36vw)) 1fr;
align-items:center;
column-gap:14px;
}
.header-inner-main .header-logo{justify-self:start}
.header-inner-main .header-search-wrap{
justify-self:center;
width:100%;
max-width:320px;
flex:none;
}
.header-inner-main .header-actions{justify-self:end}
}
.header-logo{font-size:18px;font-weight:800;color:var(--gold);text-decoration:none;white-space:nowrap;letter-spacing:.02em;flex-shrink:0}
.header-logo:hover{color:var(--gold2)}
.header-search-wrap{flex:1;min-width:160px;max-width:min(420px,100%);display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .2s}
.header-search-wrap:hover{border-color:var(--gold)}
.header-search-icon{font-size:16px;opacity:.7}
.header-search-placeholder{font-size:14px;color:var(--muted);flex:1}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-tabs-wrap{padding:0 20px 10px;border-top:1px solid var(--border);margin-top:-1px;max-width:var(--content-max);margin-left:auto;margin-right:auto;display:flex;align-items:center;min-height:48px;transition:border-color .3s ease,background-color .3s ease}
.header-pill-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 12px 12px;margin:0 auto;max-width:var(--content-max);width:100%;box-sizing:border-box;position:relative;z-index:2}
/* Dark default: zelfde “nacht”-UI als header/panel — geen lichte strook */
.header-sync-badge{display:block;width:100%;max-width:var(--content-max);text-align:center;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:8px;box-sizing:border-box;background:rgba(10,9,14,.92);border:1px solid rgba(201,162,39,.22);color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
body.light .header-sync-badge{background:linear-gradient(90deg,rgba(180,140,40,.16),rgba(80,140,220,.1));border-color:rgba(140,110,30,.32);color:var(--gold2);box-shadow:none}
.header-search-compact{flex:1;min-width:120px;max-width:min(280px,100%);padding:8px 12px;border-radius:12px}
@media(min-width:769px){.header-inner-main{flex-wrap:nowrap;align-items:center}}
.site-header-v2{border-bottom:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.35)}
#back-btn{display:none;background:none;border:1px solid var(--border);color:var(--gold);font-size:13px;font-weight:700;padding:6px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;flex-shrink:0}
#back-btn:hover{background:var(--gold);color:var(--bg)}
@media(max-width:768px){
.header-inner{padding:10px 14px;gap:10px;align-items:center}
.header-logo{order:0}
.header-actions{order:1;margin-left:auto;flex-shrink:0}
.header-search-wrap{order:2;flex-basis:100%;max-width:none;min-width:0}
.pwa-header-btn{display:none}
#spec-btn .spec-btn-text{display:none}
}
@media(max-width:600px){
.header-search-wrap{min-width:140px}
.header-search-placeholder{font-size:13px}
.mode-tab{font-size:11px;padding:4px 9px}
}
/* ── LANG + THEME TOGGLES ── */
.header-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* PWA Install Banner */
/* PWA install modal */
#pwa-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1400;align-items:center;justify-content:center;padding:20px}
#pwa-modal.open{display:flex}
#pwa-modal-inner{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px 24px;max-width:420px;width:100%;position:relative}
#pwa-modal-title{font-family:'Inter', sans-serif;font-size:16px;color:var(--gold);margin-bottom:6px}
#pwa-modal-sub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5}
.pwa-step{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text);line-height:1.6;margin-bottom:8px}
.pwa-step strong{color:var(--gold)}
#pwa-install-btn{display:none;background:var(--gold);color:#000;border:none;padding:10px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;width:100%;margin-top:8px}
#pwa-install-btn:hover{opacity:.85}
#pwa-modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.pwa-header-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:13px;padding:4px 9px;border-radius:6px;cursor:pointer;transition:all .2s}
.pwa-header-btn:hover{border-color:var(--gold);color:var(--gold)}
.lang-btn,.theme-btn{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:4px 10px;min-height:32px;min-width:40px;font-size:12px;line-height:1;cursor:pointer;color:var(--text);transition:background-color .3s ease,color .3s ease,border-color .3s ease;white-space:nowrap;flex-shrink:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
#theme-toggle.theme-btn{font-size:14px;padding:4px 10px}
.lang-btn.active{background:var(--gold);color:#000;border-color:var(--gold);font-weight:700}
.lang-btn:hover:not(.active){border-color:var(--gold)}
.theme-btn:hover{border-color:var(--gold);color:var(--gold2)}
/* ── INSTALL BANNER ── */
/* ── HOME ── */
#home-screen{position:relative;z-index:1}
.hero{text-align:center;padding:36px 16px 24px;background:linear-gradient(180deg,rgba(80,40,160,.10) 0%,transparent 100%)}
.hero-eyebrow{font-size:10px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:6px;font-weight:700}
.hero-title{font-family:var(--font-display),Georgia,serif;font-size:clamp(24px,7vw,50px);font-weight:900;color:var(--text);line-height:1.1;margin-bottom:5px}
.hero-title span{color:var(--gold)}
.hero-sub{color:var(--muted);font-size:15px}
.section-label{max-width:var(--content-max);margin:32px auto 12px;padding:0 24px;display:flex;align-items:center;gap:10px}
.section-label h2{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.section-label-mplus{margin-top:20px;margin-bottom:16px}
.section-label-mplus h2{font-size:12px;letter-spacing:.12em;color:var(--gold2)}
.section-label-normal{margin-top:28px}
.dungeon-grid-mplus{padding-bottom:28px}
.raid-card-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:2px}
.badge-open-now{background:rgba(74,222,128,0.15)!important;color:#4ade80!important;border:1px solid rgba(74,222,128,0.35)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.08em!important}
.overview-affix-block{margin:20px 0 8px;padding:14px 16px;background:var(--info-bg);border:1px solid var(--border);border-radius:10px}
.overview-affix-title{font-size:13px;font-weight:800;color:var(--gold2);margin:0 0 4px;letter-spacing:.04em}
.overview-affix-sub{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.4}
.overview-affix-row{padding:10px 0 12px;border-bottom:1px solid var(--border)}
.overview-affix-row:last-child{border-bottom:none;padding-bottom:0}
.overview-affix-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.overview-affix-icon{font-size:22px;line-height:1}
.overview-affix-meta{flex:1;min-width:0}
.overview-affix-level-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.35}
.overview-affix-level{color:var(--muted);font-weight:600;margin-right:4px}
.overview-affix-name{color:var(--text)}
.overview-affix-badge{display:inline-block;margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.06);color:var(--muted)}
.overview-affix-what{font-size:13px;color:var(--text);margin:0 0 6px;line-height:1.5;opacity:.95}
.overview-affix-dungeon-tip{font-size:12px;color:var(--gold);line-height:1.45;padding:8px 10px;background:rgba(200,168,75,.08);border-radius:6px;border-left:2px solid var(--gold)}
.overview-affix-boss-wrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.overview-affix-boss-tip{background:rgba(139,92,246,.08);border:1px solid rgba(167,139,250,.28);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.overview-affix-boss-title{font-size:12px;font-weight:800;color:#c4b5fd;margin:0 0 6px;letter-spacing:.04em}
.overview-affix-boss-tip p{margin:0;font-size:12px;color:var(--text);line-height:1.5}
.dungeon-grid{max-width:var(--content-max);margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:1fr;gap:var(--grid-gap-immersive)}
/* ═══════════════════════════════════════
RESPONSIVE — TELEFOON (max 480px)
═══════════════════════════════════════ */
@media(max-width:480px){
.dungeon-grid{grid-template-columns:1fr;gap:var(--grid-gap-immersive);padding:0 10px 40px}
.header-inner{min-height:48px;gap:8px}
.lang-btn{padding:4px 7px;font-size:11px}
/* Hero */
.hero{padding:24px 12px 18px}
.hero-sub{font-size:13px}
/* Sectie labels */
.section-label{margin:18px auto 6px;padding:0 10px}
/* Detail hero */
.detail-hero{padding:16px 12px}
.detail-lore{font-size:13px}
/* Tabs — grotere tikoppervlakken */
.tab-btn{font-size:12px;padding:12px 0}
.tabs-wrap{top:82px}
/* Content */
.content-wrap{padding:14px 10px 50px}
/* Overview grid */
.overview-grid{grid-template-columns:1fr 1fr}
/* Boss kaarten */
.boss-header{padding:10px 12px}
.role-tabs{gap:5px;padding:10px 10px}
.role-tab-btn{font-size:13px;padding:10px 4px}
.role-card-btn{padding:10px 4px}
.role-card-ico{font-size:18px}
.help-master-role-btn{padding:8px 4px;font-size:10px}
.role-panel{padding:11px 12px}
.role-panel ul li{font-size:14px;padding:7px 0 7px 16px}
/* Route */
.lust-table th,.lust-table td{padding:8px;font-size:13px}
/* Footer */
.footer-disclaimer{font-size:11px}
}
/* ═══════════════════════════════════════
RESPONSIVE — TABLET (481px – 768px)
═══════════════════════════════════════ */
@media(min-width:481px) and (max-width:768px){
.dungeon-grid{grid-template-columns:repeat(2,1fr);gap:var(--grid-gap-immersive)}
.overview-grid{grid-template-columns:repeat(2,1fr)}
.header-sub{font-size:9px}
.lang-btn,.theme-btn{padding:4px 9px;font-size:12px}
.role-tab-btn{font-size:14px;padding:11px 6px}
.role-panel ul li{font-size:15px}
.content-wrap{padding:16px 14px 56px}
}
/* ═══════════════════════════════════════
RESPONSIVE — PC (769px+)
═══════════════════════════════════════ */
@media(min-width:769px){
.dungeon-grid{grid-template-columns:repeat(2,1fr);gap:var(--grid-gap-immersive)}
.overview-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* Hover effecten alleen op PC */
.dungeon-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,0.25);border-color:var(--gold)}
.role-tab-btn:hover:not(.active-tank):not(.active-heal):not(.active-dps){background:var(--deep);border-color:var(--muted);color:var(--text)}
.tab-btn:hover:not(.active){color:var(--text)}
}
/* ═══════════════════════════════════════
TOUCH DEVICES — geen hover effecten
═══════════════════════════════════════ */
@media(hover:none){
.dungeon-card:hover{transform:none;box-shadow:none;border-color:var(--border)}
.dungeon-card:active{transform:scale(0.97);border-color:var(--gold)}
.role-tab-btn:active{opacity:0.8}
.tab-btn:active{color:var(--gold)}
}
/* ═══════════════════════════════════════
GROOT SCHERM (1200px+)
═══════════════════════════════════════ */
@media(min-width:1024px){
.dungeon-grid{grid-template-columns:repeat(4,1fr);gap:var(--grid-gap-immersive)}
}
@media(min-width:1200px){
.boss-roles-desktop{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
}
/* ── DUNGEON CARD ── */
.dungeon-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--immersive-card-radius);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;overflow:hidden}
.dungeon-card:active{transform:scale(0.98)}
/* Immersive cinematic grid (data/dungeons.json backgrounds) */
.dungeon-card.dungeon-card--immersive{
height:160px;padding:0;border-radius:var(--immersive-card-radius);position:relative;isolation:isolate;
background-color:#1a0f2e;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.dungeon-card.dungeon-card--raid-immersive{
height:200px;
border:1px solid rgba(212,175,55,0.4);
box-shadow:0 4px 24px rgba(0,0,0,0.35);
}
.dungeon-card.dungeon-card--raid-immersive.raid-card--locked{
opacity:0.65;cursor:default;pointer-events:none;
}
.dungeon-card.dungeon-card--immersive .dungeon-card-bg{
position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;
transition:transform .5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.dungeon-card.dungeon-card--immersive .dungeon-card-overlay{
position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:linear-gradient(180deg,rgba(10,9,13,0.4) 0%,rgba(10,9,13,0.95) 100%);
transition:background-image .35s ease,opacity .35s ease;
}
.dungeon-card.dungeon-card--immersive .dungeon-card-meta-row{
position:absolute;top:10px;left:10px;z-index:2;
display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100% - 100px);
}
.dungeon-card.dungeon-card--immersive .dungeon-card-meta-row .dungeon-card-mode-tag{
position:static;
}
.dungeon-card.dungeon-card--immersive .dungeon-card-mode-tag{
position:absolute;top:10px;left:10px;z-index:2;
font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;
background:rgba(0,0,0,0.42);color:rgba(255,255,255,0.92);
border:1px solid rgba(255,255,255,0.12);
max-width:calc(100% - 120px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dungeon-card.dungeon-card--immersive.mplus .dungeon-card-mode-tag{
color:var(--mplus);border-color:rgba(232,160,32,0.4);background:rgba(232,160,32,0.14);
}
.dungeon-card.dungeon-card--immersive:not(.mplus) .dungeon-card-mode-tag{
color:var(--normal);border-color:rgba(100,120,160,0.35);background:rgba(100,120,160,0.12);
}
.dungeon-card.dungeon-card--immersive .dungeon-card-boss-count{
position:absolute;top:10px;right:10px;z-index:2;
font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
padding:3px 8px;border-radius:999px;
color:rgba(255,255,255,0.88);background:rgba(0,0,0,0.38);
border:1px solid rgba(255,255,255,0.1);
}
.dungeon-card.dungeon-card--immersive .dungeon-card-aux-tag{
font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
padding:3px 7px;border-radius:999px;background:rgba(0,0,0,0.52);color:rgba(255,255,255,0.9);
border:1px solid rgba(255,255,255,0.12);
}
.dungeon-card.dungeon-card--immersive .dungeon-card-aux-tag.is-live{
border-color:rgba(74,222,128,0.35);color:#bbf7d0;
}
.dungeon-card.dungeon-card--immersive .dungeon-card-aux-tag.raid-open-now{
border-color:rgba(250,204,21,0.42);color:#fde68a;
}
.dungeon-card.dungeon-card--raid-immersive .raid-mode-tag{
color:#ddd6fe!important;border-color:rgba(167,139,250,0.45)!important;
background:rgba(98,48,180,0.22)!important;
}
.dungeon-card.dungeon-card--immersive .dungeon-card-footer .dungeon-card-title-stack{
flex:1;min-width:0;text-align:left;
}
.dungeon-card.dungeon-card--immersive .dungeon-card-raid-sub{
margin:3px 0 0;font-size:10px;line-height:1.35;color:rgba(255,255,255,0.72);
text-shadow:0 1px 6px rgba(0,0,0,0.85);max-width:100%;
}
body.light .dungeon-card.dungeon-card--immersive .dungeon-card-raid-sub{color:rgba(40,40,55,0.88);text-shadow:none}
.dungeon-card.dungeon-card--immersive .dungeon-card-footer{
position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
padding:10px 12px 12px;
background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.25) 40%,rgba(0,0,0,0.55) 100%);
}
.dungeon-card.dungeon-card--immersive .dungeon-card-title{
margin:0;font-family:'Inter',sans-serif;font-size:clamp(13px,2.8vw,16px);font-weight:800;
color:#d4af37;line-height:1.2;text-align:left;
text-shadow:0 1px 10px rgba(0,0,0,0.9),0 0 20px rgba(0,0,0,0.5);
}
.dungeon-card.dungeon-card--immersive .dungeon-card-role-icons{
display:flex;gap:5px;font-size:14px;line-height:1;opacity:.5;flex-shrink:0;
filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
@media (hover:hover) and (min-width:769px){
.dungeon-card.dungeon-card--immersive:hover .dungeon-card-bg{transform:scale(1.05)}
.dungeon-card.dungeon-card--immersive:hover .dungeon-card-overlay{
background-image:linear-gradient(180deg,rgba(10,9,13,0.22) 0%,rgba(10,9,13,0.78) 100%);
}
.dungeon-card.dungeon-card--immersive:hover{
transform:translateY(-4px);
border-color:rgba(212,175,55,0.42);
box-shadow:0 14px 44px rgba(0,0,0,0.55),0 0 32px var(--card-theme-glow,rgba(107,91,149,0.45));
}
.dungeon-card.dungeon-card--raid-immersive:hover{
border-color:rgba(212,175,55,0.65);
}
}
@media (hover:none){
.dungeon-card.dungeon-card--immersive:hover .dungeon-card-bg{transform:none}
.dungeon-card.dungeon-card--immersive:hover .dungeon-card-overlay{
background-image:linear-gradient(180deg,rgba(10,9,13,0.4) 0%,rgba(10,9,13,0.95) 100%);
}
.dungeon-card.dungeon-card--immersive:active .dungeon-card-bg{transform:scale(1.03)}
}
body.light .dungeon-card.dungeon-card--immersive .dungeon-card-overlay{
background-image:linear-gradient(180deg,rgba(255,255,255,0.35) 0%,rgba(10,9,13,0.9) 100%);
}
body.light .dungeon-card.dungeon-card--immersive:hover .dungeon-card-overlay{
background-image:linear-gradient(180deg,rgba(255,255,255,0.22) 0%,rgba(10,9,13,0.82) 100%);
}
body.light .dungeon-card.dungeon-card--immersive .dungeon-card-title{color:#9a7b1a;text-shadow:0 1px 6px rgba(255,255,255,0.6)}
body.light .dungeon-card.dungeon-card--raid-immersive{border-color:rgba(122,98,24,0.5)}
.card-accent{height:4px;background:linear-gradient(90deg,var(--accent),var(--gold))}
.dungeon-card.mplus .card-accent{background:linear-gradient(90deg,#b07010,var(--gold2),#b07010)}
.card-body{padding:13px 15px 15px}
.card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;padding:3px 10px;border-radius:20px;margin-bottom:8px}
.badge-mplus{background:rgba(232,160,32,0.12);color:var(--mplus);border:1px solid rgba(232,160,32,0.35)}
.badge-normal{background:rgba(100,120,160,0.10);color:var(--normal);border:1px solid rgba(100,120,160,0.3)}
.card-name{font-family:'Inter', sans-serif;font-size:clamp(14px,3.5vw,17px);font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.2}
.card-zone{font-size:12px;color:var(--muted);margin-bottom:8px}
.card-bosses{display:flex;flex-wrap:wrap;gap:3px}
.boss-chip{font-size:11px;color:var(--muted);background:var(--deep);border:1px solid var(--border);border-radius:3px;padding:1px 6px}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}
.card-level{font-size:11px;color:var(--muted)}
.card-arrow{color:var(--gold);font-size:20px;font-weight:700}
/* ── DETAIL ── */
#detail-screen{display:none;position:relative;z-index:1}
.detail-hero{background:var(--boss-hdr);border-bottom:1px solid var(--border);padding:20px 16px}
.detail-hero-inner{max-width:1100px;margin:0 auto}
.detail-eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--accent);margin-bottom:4px;text-transform:uppercase}
.detail-title{font-family:'Inter', sans-serif;font-size:clamp(20px,5vw,36px);font-weight:900;color:var(--text);line-height:1.1;margin-bottom:7px}
.detail-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted);margin-bottom:10px}
.detail-lore{font-style:italic;color:var(--muted);max-width:680px;font-size:15px;line-height:1.65;border-left:2px solid var(--gold);padding-left:14px}
/* Quick summary (was TL;DR) */
.tldr-block{display:none;background:transparent;border:none;border-left:4px solid var(--gold);border-radius:0;padding:6px 10px 6px 12px;margin-bottom:16px}
.tldr-label{font-size:0.9rem;font-weight:700;letter-spacing:.04em;color:var(--gold);text-transform:none;margin-bottom:4px}
.tldr-content{font-size:0.9rem;color:var(--text);line-height:1.55}
/* WoW icon component */
.wow-icon{width:36px;height:36px;border-radius:4px;vertical-align:middle;object-fit:contain}
.wow-icon-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;transition:opacity .2s}
.wow-icon-link:hover{opacity:.9}
/* ── TABS ── */
.tabs-wrap{position:sticky;top:82px;z-index:90;background:var(--tab-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.tabs{max-width:1100px;margin:0 auto;display:flex;padding:0 4px}
.tab-btn{font-size:13px;font-weight:700;color:var(--muted);background:none;border:none;padding:13px 0;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;flex:1;text-align:center}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab-content{display:none}
.tab-content.active{display:block}
.content-wrap{max-width:var(--content-max);margin:0 auto;padding:24px 24px 64px}
/* ── OVERVIEW ── */
.overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.info-card{background:var(--info-bg);border:1px solid var(--border);border-radius:8px;padding:13px}
.info-card-title{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:5px;text-transform:uppercase}
.info-card-val{font-size:15px;color:var(--text);font-weight:600}
.tip-box{background:var(--tip-bg);border:1px solid rgba(200,168,75,0.2);border-left:3px solid var(--gold);border-radius:6px;padding:11px 14px;margin-bottom:9px;font-size:14px;line-height:1.5}
.tip-box strong{color:var(--gold2);font-weight:700}
/* ── BOSSES ── */
.boss-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px}
.boss-header{background:var(--boss-hdr);padding:11px 15px;display:flex;align-items:center;gap:10px}
.boss-num{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.1em;white-space:nowrap;opacity:.9}
.boss-name{font-family:'Inter', sans-serif;font-size:clamp(14px,3.5vw,17px);font-weight:700;color:var(--text)}
.boss-desc{padding:9px 15px;font-style:italic;color:var(--boss-desc-col);font-size:14px;line-height:1.5;border-bottom:1px solid var(--border);background:var(--boss-desc-bg)}
.role-tabs{display:flex;gap:8px;padding:12px 14px;background:var(--deep);border-bottom:1px solid var(--border)}
.role-tab-btn{flex:1;padding:11px 6px;font-size:14px;font-weight:700;border-radius:8px;border:2px solid var(--border);cursor:pointer;transition:all .15s;color:var(--muted);background:var(--panel);text-align:center}
.role-tab-btn.active-tank{color:#fff;background:var(--tank);border-color:var(--tank)}
.role-tab-btn.active-heal{color:#fff;background:var(--heal);border-color:var(--heal)}
.role-tab-btn.active-dps{color:#fff;background:var(--dps);border-color:var(--dps)}
.boss-role-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 14px;background:var(--deep);border-bottom:1px solid var(--border)}
.role-card-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 6px;font-size:12px;font-weight:800;border-radius:10px;border:2px solid var(--border);cursor:pointer;background:var(--panel);color:var(--muted);transition:all .15s;min-width:0;width:100%;-webkit-tap-highlight-color:transparent}
.role-card-ico{font-size:22px;line-height:1}
.role-card-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-align:center;word-break:break-word}
.role-card-btn:hover{border-color:var(--gold);color:var(--text)}
.role-card-btn.active.role-card-tank{border-color:#5ba3e8;background:rgba(74,144,217,.2);color:#b8d9ff;box-shadow:0 0 0 1px rgba(91,163,232,.4)}
.role-card-btn.active.role-card-heal{border-color:#9b7fd9;background:rgba(155,127,217,.15);color:#e0d4ff;box-shadow:0 0 0 1px rgba(155,127,217,.45)}
.role-card-btn.active.role-card-dps{border-color:#e8556a;background:rgba(224,64,96,.15);color:#ffc0c8;box-shadow:0 0 0 1px rgba(232,85,106,.45)}
.role-tips-ul{list-style:none;padding:0;margin:0}
.role-tip-line,.generic-tips .role-tip-line,.spec-tip.role-tip-line{padding:8px 10px;margin:6px 0;border-radius:8px;border-left:4px solid transparent}
.role-tip-tank{border-left-color:#5ba3e8;background:rgba(74,144,217,.12)}
.role-tip-heal{border-left-color:#7c5cbf;background:linear-gradient(90deg,rgba(124,92,191,.14),rgba(61,184,106,.08))}
.role-tip-dps{border-left-color:#e04060;background:rgba(224,64,96,.1)}
.role-panel{display:none;padding:13px 15px}
.role-panel.active{display:block}
.role-panel.tank-panel{background:var(--tank-bg)}
.role-panel.heal-panel{background:var(--heal-bg)}
.role-panel.dps-panel{background:var(--dps-bg)}
.role-panel ul{list-style:none}
.role-panel ul li{font-size:15px;color:var(--text);padding:6px 0 6px 18px;position:relative;line-height:1.45;border-bottom:1px solid var(--border)}
.role-panel ul li:last-child{border-bottom:none}
.role-panel ul li::before{content:'▸';position:absolute;left:0;color:var(--muted);font-size:12px;top:9px}
/* ── ROUTE ── */
.route-section{margin-bottom:26px}
.route-subtab-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.route-subtab{padding:9px 16px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:box-shadow .2s,border-color .2s,color .2s}
.route-subtab:hover{color:var(--text);border-color:rgba(167,139,250,.45)}
.route-subtab.active{color:var(--gold);border-color:rgba(201,162,39,.55);box-shadow:0 0 16px rgba(139,92,246,.35),0 0 28px rgba(201,162,39,.12)}
.route-subpanel{display:none}
.route-subpanel.active{display:block}
/* ─── TRASH MOBS ─── */
.trash-section{margin-bottom:26px}
.trash-grid{display:flex;flex-direction:column;gap:8px}
.trash-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.trash-card-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trash-mob-name{font-weight:700;font-size:.9rem;color:var(--fg)}
.trash-tags{display:flex;gap:4px;flex-wrap:wrap}
.trash-tag{font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.05em}
.trash-tag.t-int{background:rgba(232,99,99,.18);color:#f08080;border:1px solid rgba(232,99,99,.3)}
.trash-tag.t-avoid{background:rgba(255,180,50,.15);color:#e8c840;border:1px solid rgba(255,180,50,.25)}
.trash-tag.t-purge{background:rgba(140,100,200,.2);color:#b580f0;border:1px solid rgba(140,100,200,.3)}
.trash-tag.t-stop{background:rgba(80,160,220,.18);color:#70b0e0;border:1px solid rgba(80,160,220,.3)}
.trash-tag.t-tank{background:rgba(60,180,120,.15);color:#60d090;border:1px solid rgba(60,180,120,.25)}
.interrupt-danger{
background-color:#ff0000 !important;
color:#ffffff !important;
padding:2px 6px;
border-radius:4px;
font-weight:800;
text-transform:uppercase;
box-shadow:0 0 10px rgba(255,0,0,.5);
border:1px solid #fff;
}
.trash-tag.interrupt-danger{display:inline-block;line-height:1.35}
.trash-card-tip{font-size:.82rem;color:var(--muted);line-height:1.45}
/* ── VISUAL ROUTE MAP ── */
.vr-container{position:relative;padding:8px 0 8px 44px;margin-top:4px}
.vr-line{position:absolute;left:19px;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--accent),var(--border));border-radius:3px;z-index:0}
.vr-step{position:relative;margin-bottom:0;display:flex;align-items:flex-start;gap:0}
.vr-step:last-child .vr-connector{display:none}
.vr-connector{position:absolute;left:-25px;top:23px;width:3px;background:var(--border);bottom:-24px;z-index:0}
.vr-node{position:absolute;left:-36px;top:10px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;z-index:1;flex-shrink:0;border:2px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.vr-node-num{display:inline-flex;align-items:center;justify-content:center;min-width:1.1em;text-align:center;font-variant-numeric:tabular-nums}
.vr-node.type-trash{background:var(--deep);border-color:var(--border);color:var(--muted)}
.vr-node.type-boss{background:linear-gradient(135deg,#b8860b,var(--gold));border-color:var(--gold);color:#fff;width:32px;height:32px;font-size:15px;top:6px;left:-39px;box-shadow:0 2px 12px rgba(184,134,11,.4)}
.vr-node.type-event{background:#1a4a2e;border-color:#2d8a52;color:#4ec87a}
.vr-card{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-bottom:10px;transition:border-color .2s;min-width:0}
.vr-card:hover{border-color:var(--accent)}
.vr-card.type-boss{border-color:rgba(184,134,11,.4);background:linear-gradient(135deg,var(--panel),rgba(184,134,11,.04))}
.vr-card.type-event{border-color:rgba(45,138,82,.4);background:linear-gradient(135deg,var(--panel),rgba(45,138,82,.04))}
.vr-label-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.vr-label{font-weight:700;font-size:14px;color:var(--text)}
.vr-card.type-boss .vr-label{color:var(--gold)}
.vr-card.type-event .vr-label{color:#4ec87a}
.vr-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
.vr-badge.lust{background:rgba(255,80,0,.15);color:#ff5000;border:1px solid rgba(255,80,0,.3)}
.vr-badge.boss{background:rgba(184,134,11,.15);color:var(--gold);border:1px solid rgba(184,134,11,.3)}
.vr-badge.event{background:rgba(45,138,82,.15);color:#4ec87a;border:1px solid rgba(45,138,82,.3)}
.vr-badge.skip{background:rgba(120,120,120,.12);color:var(--muted);border:1px solid rgba(120,120,120,.25)}
.vr-desc{font-size:13px;color:var(--muted);line-height:1.5;max-width:72ch;overflow-wrap:break-word}
.vr-step.snap-active .vr-card{box-shadow:0 0 0 2px rgba(167,139,250,.85),0 0 22px rgba(139,92,246,.4);border-color:rgba(167,139,250,.55)}
.vr-step.snap-active .vr-node{box-shadow:0 0 14px rgba(201,162,39,.65),0 0 24px rgba(139,92,246,.35)}
.tank-guide-sub{font-size:12px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.tank-pull-list{display:flex;flex-direction:column;gap:10px}
.tank-pull-row{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 13px;border-left:3px solid var(--border)}
.tank-pull-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.tank-danger-pill{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:20px}
.tank-pull-num{font-size:11px;color:var(--muted);font-weight:700}
.tank-pull-note{font-size:13px;margin:0 0 8px;line-height:1.45;color:var(--text)}
.tank-pull-mobs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tank-mob-link{font:inherit;background:rgba(139,92,246,.14);border:1px solid rgba(167,139,250,.4);color:#d8b4fe;border-radius:8px;padding:5px 11px;cursor:pointer;font-size:12px;font-weight:600;transition:box-shadow .15s}
.tank-mob-link:hover{box-shadow:0 0 12px rgba(201,162,39,.35)}
.tank-pull-row.tank-danger-low{border-left-color:rgba(74,222,128,.5)}
.tank-pull-row.tank-danger-low .tank-danger-pill{background:rgba(74,222,128,.15);color:#86efac;border:1px solid rgba(74,222,128,.4)}
.tank-pull-row.tank-danger-med{border-left-color:rgba(234,179,8,.45)}
.tank-pull-row.tank-danger-med .tank-danger-pill{background:rgba(250,204,21,.12);color:#facc15;border:1px solid rgba(250,204,21,.35)}
.tank-pull-row.tank-danger-high{border-left-color:#f97316}
.tank-pull-row.tank-danger-high .tank-danger-pill{background:rgba(249,115,22,.15);color:#fb923c;border:1px solid rgba(249,115,22,.4)}
.tank-pull-row.tank-danger-boss{border-left-color:var(--gold)}
.tank-pull-row.tank-danger-boss .tank-danger-pill{background:rgba(200,168,75,.2);color:var(--gold);border:1px solid rgba(200,168,75,.5)}
.tank-pull-row.tank-danger-lethal{border-left-color:#ef4444}
.tank-pull-row.tank-danger-lethal .tank-danger-pill{background:rgba(239,68,68,.18);color:#f87171;border:1px solid rgba(239,68,68,.45)}
.tank-pull-row.tank-danger-1{border-left-color:rgba(74,222,128,.55)}
.tank-pull-row.tank-danger-1 .tank-danger-pill{background:rgba(74,222,128,.14);color:#86efac;border:1px solid rgba(74,222,128,.4)}
.tank-pull-row.tank-danger-2{border-left-color:rgba(163,230,53,.5)}
.tank-pull-row.tank-danger-2 .tank-danger-pill{background:rgba(163,230,53,.12);color:#bef264;border:1px solid rgba(163,230,53,.35)}
.tank-pull-row.tank-danger-3{border-left-color:rgba(250,204,21,.55)}
.tank-pull-row.tank-danger-3 .tank-danger-pill{background:rgba(250,204,21,.12);color:#fde047;border:1px solid rgba(250,204,21,.4)}
.tank-pull-row.tank-danger-4{border-left-color:rgba(249,115,22,.65)}
.tank-pull-row.tank-danger-4 .tank-danger-pill{background:rgba(249,115,22,.16);color:#fdba74;border:1px solid rgba(249,115,22,.45)}
.tank-pull-row.tank-danger-5{border-left-color:rgba(192,132,252,.7)}
.tank-pull-row.tank-danger-5 .tank-danger-pill{background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(201,162,39,.18));color:#f5e6ff;border:1px solid rgba(201,162,39,.55);box-shadow:0 0 12px rgba(139,92,246,.25)}
.tank-pull-interrupts{font-size:12px;color:#c4b5fd;margin:0 0 8px;line-height:1.45;padding:8px 10px;background:rgba(139,92,246,.08);border-radius:8px;border-left:2px solid rgba(167,139,250,.45)}
.tank-pull-interrupts strong{color:#e9d5ff;font-weight:800;margin-right:6px}
.tank-source-footer{font-size:11px;line-height:1.5;color:var(--muted);margin:18px 0 0;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.18)}
.tank-source-label{color:var(--gold);font-weight:700;margin-right:4px}
.tank-source-link{color:#a5b4fc;text-decoration:none;font-weight:600;border-bottom:1px dotted rgba(165,180,252,.5)}
.tank-source-link:hover{color:#c4d4ff;border-bottom-color:#c4d4ff}
.vr-area{font-size:11px;color:var(--accent);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.vr-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;font-size:11px;color:var(--muted)}
.vr-leg-item{display:flex;align-items:center;gap:5px}
.vr-leg-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.vr-leg-dot.l-trash{background:var(--deep);border:2px solid var(--border)}
.vr-leg-dot.l-boss{background:var(--gold)}
.vr-leg-dot.l-event{background:#2d8a52}
.vr-leg-dot.l-lust{background:#ff5000}
.route-title{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gold);margin-bottom:11px;text-transform:uppercase}
.route-diagram{background:var(--route-bg);border:1px solid var(--border);border-radius:10px;padding:14px;overflow-x:auto;margin-bottom:12px}
.lust-table{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:14px;table-layout:fixed}
.lust-table th,.lust-table td{padding:8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.lust-table th{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--accent);background:var(--panel);text-transform:uppercase}
.lust-table td.lust-moment{width:34%;white-space:normal}
.lust-table td:last-child{max-width:0;word-wrap:break-word;overflow-wrap:break-word}
.lust-moment{color:var(--gold);font-weight:700}
.kg-link{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:11px 16px;color:var(--mplus);font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;margin-top:4px}
.kg-link:hover{border-color:var(--gold);color:var(--gold)}
/* ── ROUTE SCREENSHOT ── */
.route-notice{background:#2a1f00;border:1px solid #8a6500;border-radius:8px;padding:10px 14px;font-size:.85rem;color:#e8c840;margin-bottom:4px}
.route-notice-link{color:#e8c840;font-weight:700;text-decoration:underline}
.route-notice-link:hover{color:#fff}
.floor-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.floor-tab-btn{padding:5px 12px;border-radius:6px;border:1px solid #444;background:#1e1e2e;color:#aaa;cursor:pointer;font-size:.8rem;transition:all .2s}
.floor-tab-btn:hover{background:#2a2a3e;color:#fff}
.floor-tab-btn.active{background:#e8c840;color:#1a1a2e;border-color:#e8c840;font-weight:700}
.route-screenshot-wrap{border-radius:12px;overflow:auto;border:1px solid rgba(167,139,250,.25);background:#050508;line-height:0;max-width:100%;-webkit-overflow-scrolling:touch}
.route-screenshot-img{width:100%;min-width:min(100%,520px);height:auto;display:block;max-height:none;object-fit:contain;object-position:center}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
/* ── SPEC-SPECIFIC TIPS ── */
.spec-tips-header{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;padding:8px 15px 4px;opacity:.8}
.spec-tip{background:rgba(200,168,75,0.07)!important;border-left:2px solid var(--gold)!important;padding-left:14px!important}
.spec-tip::before{color:var(--gold)!important;content:'★'!important}
.generic-tips-divider{height:1px;background:var(--border);margin:8px 12px;opacity:.5}
.generic-tips li{opacity:.75}
/* ── FOOTER BUTTON ROW ── */
#footer-btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:0}
/* ── ABOUT BUTTON ── */
#feedback-btn{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:6px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s;margin-top:4px}
#feedback-btn:hover{border-color:var(--accent);color:var(--accent)}
#feedback-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1400;align-items:center;justify-content:center;padding:20px}
#feedback-modal.open{display:flex}
#feedback-inner{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px 20px;max-width:400px;width:100%;position:relative}
#feedback-title{font-family:'Inter', sans-serif;font-size:16px;color:var(--gold);margin-bottom:4px}
#feedback-sub{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5}
#feedback-text{width:100%;background:#06060f;border:1px solid var(--border);border-radius:8px;padding:10px;color:var(--text);font-size:13px;resize:vertical;font-family:inherit;min-height:90px}
#feedback-text:focus{outline:none;border-color:var(--gold)}
#feedback-send{background:var(--gold);color:#000;border:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;flex:1}
#feedback-send:hover{opacity:.85}
#feedback-gh{display:block;border:1px solid var(--border);color:var(--muted);padding:9px 12px;border-radius:8px;font-size:12px;text-decoration:none;text-align:center;white-space:nowrap}
#feedback-gh:hover{border-color:var(--gold);color:var(--gold)}
/* KG button + pull footer */
.kg-open-btn{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1a1e2c,#1e2440);border:1px solid rgba(74,127,212,.4);border-radius:10px;padding:10px 14px;color:#7aaaf0;font-size:13px;font-weight:700;cursor:pointer;width:100%;transition:all .2s;text-align:left;margin-top:10px;font-family:'Rajdhani',sans-serif}
.kg-open-btn:hover{border-color:rgba(74,127,212,.8);color:#aad0ff;background:linear-gradient(135deg,#1e2240,#222850)}
.kg-open-btn .kg-icon{font-size:18px;flex-shrink:0}
.kg-open-btn .kg-text{flex:1}
.kg-open-btn .kg-sub{display:block;font-size:11px;color:#4a7fd4;font-weight:600;margin-top:1px}
.kg-open-btn .kg-arrow{font-size:16px;opacity:.6}
/* Pull legend strip */
.map-legend{display:flex;gap:10px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--border);background:rgba(0,0,0,.2)}
.ml-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.ml-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff}
/* ── ABOUT MODAL ── */
/* Dev-banner popup */
#dev-banner{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;align-items:center;justify-content:center;padding:20px}
#dev-banner.open{display:flex}
#dev-banner-inner{background:var(--panel);border:1px solid var(--gold);border-radius:16px;max-width:420px;width:100%;padding:24px 22px;position:relative}
#dev-banner-title{font-size:17px;font-weight:800;color:var(--gold);margin-bottom:10px}
#dev-banner-body{font-size:13px;color:var(--text);line-height:1.65;margin-bottom:16px}
#dev-banner-body strong{color:var(--gold)}
#dev-banner-tip{background:var(--deep);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--muted);margin-bottom:18px;border:1px solid var(--border)}
#dev-banner-langs{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.dbn-lang{background:var(--deep);border:1px solid var(--border);border-radius:8px;padding:5px 14px;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);transition:all .15s}
.dbn-lang.active{background:var(--gold);color:#000;border-color:var(--gold)}
#dev-banner-close{width:100%;padding:11px;background:var(--gold);color:#000;font-weight:800;font-size:14px;border:none;border-radius:10px;cursor:pointer}
#dev-banner-close:hover{opacity:.9}
#about-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1200;align-items:flex-end;justify-content:center;padding:0}
#about-modal.open{display:flex}
/* ── SEARCH ── */
.search-header-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:14px;cursor:pointer;padding:4px 9px;border-radius:6px;transition:all .2s}
.search-header-btn:hover{border-color:var(--gold);color:var(--gold)}
.search-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1300;align-items:flex-start;justify-content:center;padding:60px 12px 0;backdrop-filter:blur(4px)}
.search-overlay.open{display:flex}
.search-modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:100%;max-width:600px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.search-input-row{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.search-icon-lbl{font-size:18px;opacity:.6}
.search-input{flex:1;background:none;border:none;outline:none;font-size:16px;color:var(--text);font-family:inherit}
.search-input::placeholder{color:var(--muted)}
.search-close-btn{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px}
.search-close-btn:hover{color:var(--text)}
.search-results{max-height:60vh;overflow-y:auto;padding:6px 0}
.search-empty{padding:20px;text-align:center;color:var(--muted);font-size:14px}
.search-group-label{padding:8px 14px 4px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.search-result-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .12s}
.search-result-item:hover,.search-result-item.focused{background:var(--deep)}
.search-result-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.search-result-info{flex:1;min-width:0}
.search-result-name{font-size:14px;font-weight:600;color:var(--text)}
.search-result-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-badge{font-size:11px;padding:2px 7px;border-radius:10px;background:var(--deep);color:var(--muted);flex-shrink:0}
#about-inner{background:var(--bg);border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 40px rgba(0,0,0,.5)}
/* Delve detail modal — matches about-modal (bottom sheet) */
#delve-detail-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1200;align-items:flex-end;justify-content:center;padding:0}
#delve-detail-modal.open{display:flex}
#delve-detail-inner{background:var(--panel);border:1px solid var(--border);border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 40px rgba(0,0,0,.5)}
#delve-detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
#delve-detail-title{font-size:18px;font-weight:800;color:var(--gold)}
#delve-detail-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
#delve-detail-close:hover{color:var(--text)}
#delve-detail-content{padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.delve-detail-bullets{list-style:none;padding:0;margin:0}
.delve-detail-bullets li{padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:1.5;color:var(--text)}
.delve-detail-bullets li:last-child{border-bottom:none}
.delve-detail-bullets strong{color:var(--gold);font-weight:700}
#delve-detail-wowhead{display:block;text-align:center;padding:14px;background:var(--deep);color:var(--accent);font-weight:700;text-decoration:none;transition:background .2s}
#delve-detail-wowhead:hover{background:rgba(255,255,255,.06)}
.delve-detail-btn{display:block;width:100%;padding:12px 16px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;border:none;text-align:left;transition:background .2s,color .2s}
.delve-full-guide-btn{background:rgba(240,180,41,.15);color:var(--gold);border:1px solid rgba(240,180,41,.4);margin-top:16px}
.delve-full-guide-btn:hover{background:rgba(240,180,41,.25)}
.delve-back-btn{background:transparent;color:var(--muted);border:1px solid var(--border);margin-bottom:16px}
.delve-back-btn:hover{background:rgba(255,255,255,.04);color:var(--text)}
.delve-full-guide-body{font-size:14px;line-height:1.6;color:var(--text)}
.delve-full-guide-body h4{font-size:14px;font-weight:800;color:var(--gold);margin:16px 0 8px;padding-bottom:4px}
.delve-full-guide-body h4:first-child{margin-top:0}
.delve-full-guide-body ol,.delve-full-guide-body ul{margin:0 0 12px;padding-left:20px}
.delve-full-guide-body li{margin-bottom:4px}
.delve-full-guide-body p{margin:0 0 10px;color:var(--text)}
#about-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
#about-title{font-size:17px;font-weight:800;color:var(--text)}
#about-close-x{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;padding:0 4px}
#about-close-x:hover{color:var(--text)}
#about-content{overflow-y:auto;padding:16px 20px 32px;-webkit-overflow-scrolling:touch}
.about-readme{font-size:13px;line-height:1.7;color:var(--text)}
.about-h1{font-family:'Inter', sans-serif;font-size:17px;color:var(--gold);margin:16px 0 6px}
.about-h2{font-size:14px;font-weight:700;color:var(--gold);margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.about-h3{font-size:13px;font-weight:700;color:var(--text);margin:10px 0 4px}
.about-p{color:var(--muted);margin-bottom:4px}
.about-hr{border:none;border-top:1px solid var(--border);margin:10px 0}
.about-spacer{height:6px}
.about-readme .about-ul{padding-left:18px;margin-bottom:8px;color:var(--muted)}
.about-readme .about-ul li{margin-bottom:2px}
.about-readme .about-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:8px}
.about-readme .about-table th{background:var(--panel);color:var(--gold);padding:5px 8px;text-align:left;border:1px solid var(--border)}
.about-readme .about-table td{padding:4px 8px;border:1px solid var(--border);color:var(--muted)}
.about-readme code{background:var(--panel);color:var(--gold);padding:1px 5px;border-radius:3px;font-size:11px;font-family:monospace}
.about-readme .about-link{color:var(--gold);text-decoration:none}
.about-readme .about-link:hover{text-decoration:underline}
.about-section{margin-bottom:22px}
.about-h2{font-size:13px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.about-h3{font-size:12px;font-weight:700;color:var(--accent);margin:12px 0 4px}
.about-ul{list-style:none;padding:0;margin:0}
.about-ul li{padding:4px 0 4px 20px;position:relative;font-size:14px;color:var(--text);line-height:1.4}
.about-ul li::before{content:'▸';position:absolute;left:4px;color:var(--muted);font-size:11px;top:7px}
.about-link{color:var(--accent);font-size:14px;text-decoration:none;font-weight:600}
.about-link:hover{text-decoration:underline}
.about-table{width:100%;border-collapse:collapse;font-size:13px}
.about-table th{text-align:left;padding:4px 6px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.about-table td{padding:5px 6px;color:var(--text);border-bottom:1px solid var(--border)}
.about-table tr:last-child td{border-bottom:none}
.done{color:#4caf50;font-size:14px}
.date-badge{background:var(--gold);color:#000;font-size:11px;font-weight:800;border-radius:6px;padding:2px 7px}
.about-note{font-size:13px;color:var(--muted);line-height:1.5;padding:4px 0}
.about-coming{background:rgba(200,168,75,.05);border:1px solid rgba(200,168,75,.2);border-radius:10px;padding:14px}
.changelog-entry{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border)}
.changelog-entry:last-child{border-bottom:none}
.cl-version{font-size:13px;font-weight:800;color:var(--gold);min-width:40px}
.cl-date{font-size:11px;color:var(--muted)}
.cl-items{font-size:13px;color:var(--text);line-height:1.4;flex:1 1 100%}
.about-footer-note{font-size:12px;color:var(--muted);line-height:1.6;padding-top:8px;border-top:1px solid var(--border)}
.about-changelog{margin-bottom:20px;padding:14px 16px;border-radius:12px;background:linear-gradient(165deg,rgba(240,180,41,.08),rgba(0,210,255,.06));border:1px solid rgba(240,180,41,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.about-changelog-title{font-size:14px;font-weight:800;color:var(--gold);margin:0 0 8px;letter-spacing:.02em}
.about-changelog-meta{font-size:12px;color:var(--muted);margin:0 0 10px}
.about-changelog-meta code{font-size:11px;background:var(--panel);padding:2px 6px;border-radius:4px;color:var(--gold)}
.about-changelog-ul{list-style:none;padding:0;margin:0 0 10px}
.about-changelog-ul li{font-size:13px;line-height:1.55;color:var(--text);padding:8px 0;border-bottom:1px solid var(--border);padding-left:4px}
.about-changelog-ul li:last-child{border-bottom:none}
.about-changelog-ul li strong{color:var(--gold);font-weight:800}
.about-changelog-foot{font-size:11px;color:var(--muted);line-height:1.5;margin:0;font-style:italic;opacity:.92}
.about-changelog-sep{border:none;border-top:1px solid var(--border);margin:16px 0 0}
body.light .about-changelog{background:linear-gradient(165deg,rgba(254,243,199,.45),rgba(224,242,254,.5));border-color:rgba(180,140,40,.35)}
/* ── SPEC SELECTOR ── */
#spec-btn{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap}
#spec-btn:hover{border-color:var(--gold);color:var(--gold)}
#spec-modal{display:none;position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,0.7);align-items:flex-start;justify-content:center;padding:60px 12px 24px;overflow-y:auto}
#spec-modal.visible{display:flex}
#spec-modal-inner{background:var(--deep);border:1px solid var(--border);border-radius:14px;width:100%;max-width:820px;padding:20px}
#spec-modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px}
#spec-modal-title{font-family:'Inter', sans-serif;font-size:18px;font-weight:700;color:var(--gold)}
#spec-modal-subtitle{font-size:13px;color:var(--muted);margin-bottom:16px}
#spec-close-x{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
#spec-close-x:hover{color:var(--text)}
#spec-reset-btn{margin-top:14px;background:none;border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:12px;color:var(--muted);cursor:pointer;transition:all .2s}
#spec-reset-btn:hover{border-color:red;color:red}
.lust-name{color:var(--gold);font-weight:700}
/* ── FOOTER ── */
#site-footer{background:var(--deep);border-top:1px solid var(--border);padding:20px 16px 28px;margin-top:auto;flex-shrink:0;opacity:.97;width:100%}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.footer-credits{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.footer-made{font-size:14px;color:var(--text);opacity:.92}
.footer-made strong{color:var(--gold)}
.footer-dot{color:var(--border);font-size:16px;opacity:.75}
.footer-version{font-size:13px;color:var(--muted)}
.footer-version-display{font-size:10px;font-family:ui-monospace,'Consolas',monospace;color:var(--muted);opacity:.65;letter-spacing:.02em}
.footer-disclaimer{font-size:11px;color:var(--muted);max-width:700px;line-height:1.55;font-style:italic;opacity:.88}
.footer-sources{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:12px;opacity:.9}
.footer-sources span{color:var(--border)}
.footer-sources a{color:var(--accent);text-decoration:none;transition:color .2s}
.footer-sources a:hover{color:var(--gold)}
#footer-sources-label{color:var(--muted);font-weight:700}
#qr-btn{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:6px 16px;font-size:13px;font-weight:700;color:var(--gold);cursor:pointer;transition:all .2s;margin-top:4px}
#qr-btn:hover{border-color:var(--gold);background:var(--gold);color:#000}
#about-btn{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:6px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s;margin-top:4px}
#about-btn:hover{border-color:var(--accent);color:var(--accent)}
#help-btn{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:6px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s;margin-top:4px}
#help-btn:hover{border-color:var(--gold);color:var(--gold)}
#help-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:999;padding:16px;overflow-y:auto}
#help-modal.open{display:flex;align-items:flex-start;justify-content:center}
#help-box{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:20px;max-width:min(560px,100%);width:100%;margin-top:40px;max-height:88vh;display:flex;flex-direction:column}
#help-box h2{font-family:'Inter', sans-serif;color:var(--gold);font-size:18px;margin-bottom:6px}
#help-intro{font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.help-tab-bar{display:flex;gap:6px;margin-bottom:14px;flex-shrink:0}
.help-tab-btn{flex:1;padding:10px 8px;font-size:12px;font-weight:800;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;transition:all .15s}
.help-tab-btn:hover{color:var(--text);border-color:var(--gold)}
.help-tab-btn.active{background:var(--gold);color:#000;border-color:var(--gold)}
#help-tab-panels{overflow-y:auto;flex:1;min-height:0;padding-right:4px}
.help-panel{display:none}
.help-panel.active{display:block}
.help-master-intro{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.55}
.help-sources-note{font-size:11px;color:var(--muted);margin-bottom:16px;padding:10px 12px;background:var(--deep);border-radius:8px;border-left:3px solid var(--accent);line-height:1.5}
.help-master-block{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:var(--panel)}
.help-master-head{font-size:14px;font-weight:800;margin-bottom:8px}
.help-master-tank .help-master-head{color:#7ec8ff}
.help-master-heal .help-master-head{color:#c4a8ff}
.help-master-dps .help-master-head{color:#ff8a9a}
.help-master-body{font-size:12px;color:var(--muted);line-height:1.65}
.help-master-role-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
.help-master-role-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;width:100%;padding:10px 6px;font-size:11px;font-weight:800;border-radius:10px;border:2px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.help-master-role-btn:hover{color:var(--text);border-color:var(--gold)}
.help-master-role-btn.active.help-master-role-tank{border-color:#5ba3e8;background:rgba(74,144,217,.2);color:#b8d9ff;box-shadow:0 0 0 1px rgba(91,163,232,.35)}
.help-master-role-btn.active.help-master-role-heal{border-color:#9b7fd9;background:rgba(155,127,217,.15);color:#e0d4ff;box-shadow:0 0 0 1px rgba(155,127,217,.4)}
.help-master-role-btn.active.help-master-role-dps{border-color:#e8556a;background:rgba(224,64,96,.15);color:#ffc0c8;box-shadow:0 0 0 1px rgba(232,85,106,.4)}
.help-master-role-lbl{display:block;line-height:1.25;text-align:center;word-break:break-word}
.help-master-role-panel{display:none;margin-bottom:4px}
.help-master-role-panel.active{display:block}
.help-community-h3{font-size:15px;color:var(--gold);margin:0 0 8px}
.help-community-intro{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.55}
.help-community-terms{font-size:12px;color:var(--text);line-height:1.7;white-space:pre-line;padding:12px;background:var(--deep);border-radius:10px;border:1px solid var(--border)}
.weekly-bountiful-sync-note{font-size:12px;color:var(--muted);padding:12px 14px;margin-bottom:14px;background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.25);border-radius:10px;line-height:1.55}
.delves-bountiful-roles-note{font-size:12px;color:var(--muted);margin:10px 0 0;padding:10px 12px;background:rgba(107,91,149,.12);border-radius:8px;border:1px solid var(--border);line-height:1.5}
.delve-role-ease{font-size:13px;color:var(--text);margin:14px 0;padding:10px 12px;background:var(--deep);border-radius:8px;border-left:3px solid var(--gold);line-height:1.5}
.help-section{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.help-section-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:5px}
.help-section-text{font-size:12px;color:var(--muted);line-height:1.7;white-space:pre-line}
/* Inline “Over deze app / About this app” in Help, Delves callout, update banner */
button.about-open-inline{font:inherit;font-size:inherit;font-weight:700;color:var(--gold);background:transparent;border:none;padding:0;margin:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;display:inline;vertical-align:baseline;line-height:inherit}
button.about-open-inline:hover{color:#fde68a}
body.light button.about-open-inline{color:#b45308}
body.light button.about-open-inline:hover{color:#92400e}
#help-close{display:block;margin:16px auto 0;flex-shrink:0;background:none;border:1px solid var(--border);color:var(--muted);padding:8px 24px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer}
#help-close:hover{border-color:var(--gold);color:var(--gold)}
#help-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1300;align-items:flex-end;justify-content:center;padding:0}
#help-modal.open{display:flex}
#help-inner{background:var(--bg);border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 40px rgba(0,0,0,.5)}
#help-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
#help-title{font-size:17px;font-weight:800;color:var(--text)}
#help-close-x{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;padding:0 4px}
#help-close-x:hover{color:var(--text)}
#help-content{overflow-y:auto;padding:16px 20px 32px;-webkit-overflow-scrolling:touch}
.help-intro{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:18px;padding:12px 14px;background:var(--panel);border-radius:8px;border-left:3px solid var(--gold)}
.help-section{margin-bottom:18px}
.help-section-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--gold);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.help-item{margin-bottom:8px;font-size:12px;line-height:1.6;color:var(--muted);padding-left:4px}
.help-item-label{font-weight:700;color:var(--text);display:inline}
.help-footer{font-size:11px;color:var(--muted);text-align:center;margin-top:20px;padding-top:14px;border-top:1px solid var(--border)}
#qr-popup{display:none;flex-direction:column;align-items:center;gap:10px;margin-top:12px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;max-width:240px}
#qr-popup.visible{display:flex}
#qr-popup canvas{border-radius:8px}
#qr-url{font-size:11px;color:var(--muted);word-break:break-all;text-align:center}
#qr-close{font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline}
/* ── MODE TABS ── */
.mode-tabs{display:flex;flex-wrap:nowrap;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:4px;flex-shrink:1;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.mode-tabs-row2{flex-shrink:0}
.mode-tabs::-webkit-scrollbar{display:none}.mode-tabs{scrollbar-width:none}
.mode-tab{background:none;border:none;border-radius:16px;padding:4px 12px;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);transition:all .2s;white-space:nowrap}
.mode-tab.active{background:var(--gold);color:#000}
.mode-tab:hover:not(.active){color:var(--text)}
@media (max-width:600px){.header-inner{gap:5px;flex-wrap:wrap;height:auto;padding:6px 0}.header-title{display:none}.mode-tabs{order:1}#spec-btn{order:2;font-size:11px;padding:4px 8px;max-width:110px;overflow:hidden;text-overflow:ellipsis}.header-controls{order:3;gap:4px}#theme-toggle.theme-btn{font-size:14px;padding:4px 8px;min-width:36px;min-height:30px}.pwa-header-btn,.search-header-btn{font-size:16px;padding:2px 3px}}
/* ═══ LANDING PAGE ═══ */
#landing-screen{display:none;padding:8px 16px 8px;position:relative;flex-direction:column;justify-content:flex-start;min-height:100vh;box-sizing:border-box}
body.mode-home #landing-screen{display:flex !important}
body.mode-home #home-screen,body.mode-home #detail-screen,body.mode-home #prof-screen,body.mode-home #weekly-screen{display:none !important}
body.mode-home #site-footer{display:block !important;margin-top:auto}
body.mode-home #landing-screen{min-height:0}
body.mode-home{overflow-x:hidden}
body.mode-home .specs-screen{display:none!important}
/* Clean landing — minimal ambient */
.landing-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;opacity:.4}
.landing-stars::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(80,60,120,.15) 0%,transparent 60%)}
/* Hero section — Midnight logo */
.landing-hero{position:relative;z-index:1;text-align:center;padding:8px 16px 16px;max-width:800px;margin:0 auto}
.landing-hero-compact{padding:4px 12px 6px;max-width:min(440px,94vw);margin:0 auto}
/* Crop to golden frame edge; remove outer purple border */
.landing-logo-img{display:block;width:100%;height:auto;max-width:100%;clip-path:inset(7% 6% 7% 6%);border-radius:8px}
.landing-hero-compact .landing-logo-img{max-width:min(280px,72vw);margin:0 auto}
.landing-logo-mask{
-webkit-mask-image:linear-gradient(to bottom,black 70%,transparent 100%);
mask-image:linear-gradient(to bottom,black 70%,transparent 100%);
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
.dashboard-tagline{position:relative;z-index:1;text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 20px 14px;font-family:var(--font-display),Georgia,serif}
.dashboard-bento{position:relative;z-index:1;display:grid;gap:14px;padding:0 16px 14px;max-width:920px;margin:0 auto;box-sizing:border-box;grid-template-columns:1fr;grid-template-areas:'dg' 'dv' 'wk' 'py' 'ra' 'sp' 'pr'}
@media(min-width:720px){
.dashboard-bento{grid-template-columns:1.15fr 1fr 1fr;grid-template-areas:'dg dg dv' 'dg dg wk' 'py py py' 'ra sp pr'}
}
.dash-w-dungeons{grid-area:dg}.dash-w-delves{grid-area:dv}.dash-w-weekly{grid-area:wk}.dash-w-prey{grid-area:py}.dash-w-raids{grid-area:ra}.dash-w-specs{grid-area:sp}.dash-w-prof{grid-area:pr}
.dash-w-dungeons{display:flex;flex-direction:column;align-items:stretch;min-height:0}
.dash-widget{background:rgba(255,255,255,0.03);border:1px solid rgba(212,175,55,0.15);border-radius:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:16px 18px;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;text-align:left;position:relative;overflow:visible;box-sizing:border-box}
.dash-widget:hover{transform:scale(1.02);border-color:rgba(212,175,55,0.6);box-shadow:0 10px 40px rgba(0,0,0,0.8)}
.dash-widget:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dash-w-link{padding:22px 14px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:128px}
.dash-widget-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
@keyframes dash-icon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.dash-widget-icon{
--accent-color:var(--gold);
--accent-glow-soft:rgba(201,162,39,.4);
display:inline-flex;align-items:center;justify-content:center;
width:2.5rem;height:2.5rem;flex-shrink:0;
color:var(--accent-color);
line-height:0;
filter:drop-shadow(0 0 5px var(--accent-color)) drop-shadow(0 0 12px var(--accent-glow-soft)) drop-shadow(0 2px 6px rgba(0,0,0,.45));
transition:filter .28s ease;
}
.dash-widget-icon.sm{width:2rem;height:2rem}
.dash-icon-float{display:flex;animation:dash-icon-float 3s ease-in-out infinite;transition:transform .28s ease;will-change:transform}
.dash-icon-svg{width:100%;height:100%;display:block}
.dash-widget:hover .dash-icon-float{animation-play-state:paused;transform:translateY(0) scale(1.15)}
.dash-widget:hover .dash-widget-icon{
filter:drop-shadow(0 0 10px var(--accent-color)) drop-shadow(0 0 24px var(--accent-glow-soft)) drop-shadow(0 0 10px var(--accent-color)) drop-shadow(0 3px 8px rgba(0,0,0,.55));
}
.dash-icon-accent-dungeons{--accent-color:#ff4444;--accent-glow-soft:rgba(255,68,68,.42)}
.dash-icon-accent-raids{--accent-color:#ffd700;--accent-glow-soft:rgba(255,215,0,.4)}
.dash-icon-accent-delves{--accent-color:#00d2ff;--accent-glow-soft:rgba(0,210,255,.38)}
.dash-icon-accent-prey{--accent-color:#8a2be2;--accent-glow-soft:rgba(138,43,226,.42)}
.dash-icon-accent-weekly{--accent-color:#d4af37;--accent-glow-soft:rgba(212,175,55,.45)}
.dash-icon-accent-specs{--accent-color:#a78bfa;--accent-glow-soft:rgba(167,139,250,.4)}
.dash-icon-accent-prof{--accent-color:#daa520;--accent-glow-soft:rgba(218,165,32,.4)}
.status-badge{
position:absolute;top:12px;right:12px;z-index:2;
font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:3px 8px;border-radius:999px;
background:rgba(255,255,255,.08);color:var(--text);
border:1px solid rgba(212,175,55,.22);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
pointer-events:none;
}
.status-badge--live{color:#4ade80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1)}
.status-badge--new{color:#93c5fd;border-color:rgba(147,197,253,.35);background:rgba(147,197,253,.1)}
.status-badge--season{color:var(--gold2);border-color:rgba(212,175,55,.35);background:rgba(212,175,55,.1)}
body.light .status-badge{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12)}
body.light .status-badge--live{background:rgba(22,163,74,.12);color:#15803d}
body.light .status-badge--new{background:rgba(37,99,235,.12);color:#1d4ed8}
.dash-widget-title{font-size:1.05rem;font-weight:700;color:var(--text);margin:0;line-height:1.2;font-family:var(--font-display),Georgia,serif}
.dash-widget-title.sm{font-size:0.95rem}
.dash-widget-kicker{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.35;font-family:'Lora',Georgia,serif}
.dash-widget-desc{font-size:11px;color:var(--muted);margin:0;line-height:1.35}
.dash-widget-cta{display:inline-block;margin-top:auto;font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,0.2);color:var(--muted);border:1px solid var(--border);letter-spacing:.04em;text-transform:uppercase}
.dash-widget-cta.sm{margin-top:4px}
.dash-widget-footer-row{margin-top:auto;display:flex;justify-content:flex-end;align-items:center;padding-top:8px;gap:8px}
.dash-widget-cta--secondary{margin-top:0;font-size:9px;font-weight:600;opacity:.88;text-transform:uppercase;letter-spacing:.05em}
.dash-affix-chips{display:flex;flex-direction:column;gap:8px;margin:8px 0 8px;min-height:0}
@media(min-width:520px){.dash-affix-chips{flex-flow:row wrap}}
.dash-affix-chip{display:inline-flex;align-items:flex-start;gap:8px;padding:8px 11px;border-radius:12px;background:rgba(0,0,0,0.22);border:1px solid rgba(212,175,55,0.12);border-left:3px solid var(--chip-accent, var(--gold));font-size:11px;color:var(--text);line-height:1.35}
.dash-affix-ico{font-size:17px;line-height:1;flex-shrink:0}
.dash-affix-name{font-weight:600}
.dungeon-quick-access{margin:2px 0 8px;width:100%}
.dungeon-quick-access-inner{display:flex;gap:8px;flex-wrap:nowrap;align-items:stretch}
.dungeon-mini-card{
position:relative;flex:1;min-width:0;min-height:76px;
border:none;border-radius:12px;cursor:pointer;padding:8px 10px 10px;text-align:left;overflow:hidden;
border:1px solid rgba(212,175,55,.22);
background-color:#121018;
background-image:linear-gradient(180deg,rgba(8,7,12,.4) 0%,rgba(6,6,10,.92) 100%),var(--dungeon-mini-bg);
background-size:cover,cover;background-position:center,center;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
-webkit-tap-highlight-color:transparent;
}
.dungeon-mini-card:hover,.dungeon-mini-card:focus-visible{
transform:translateY(-2px);border-color:rgba(212,175,55,.55);
box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.dungeon-mini-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dungeon-mini-badge{
display:inline-block;font-size:7px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
padding:2px 7px;border-radius:999px;margin-bottom:5px;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.dungeon-mini-badge--trending{background:rgba(251,146,60,.25);color:#fed7aa;border:1px solid rgba(251,146,60,.5)}
.dungeon-mini-badge--hot{background:rgba(239,68,68,.22);color:#fecaca;border:1px solid rgba(248,113,113,.45)}
.dungeon-mini-card-title{
display:block;font-size:11px;font-weight:800;line-height:1.25;color:#faf8f5;
text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.75);
font-family:var(--font-display),Georgia,serif;
}
.dungeon-weekly-pro-tip-glass{
margin:0 0 8px;padding:10px 12px;border-radius:12px;width:100%;box-sizing:border-box;
background:rgba(12,10,8,.38);border:1px solid rgba(201,162,39,.32);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 18px rgba(0,0,0,.2);
}
.dungeon-weekly-pro-tip{margin:0;font-size:11px;line-height:1.55}
.dungeon-weekly-pro-tip-label{font-weight:800;color:var(--gold2);letter-spacing:.02em}
.dungeon-weekly-pro-tip-body{color:rgba(245,240,232,.92)}
body.light .dungeon-weekly-pro-tip-glass{background:rgba(255,255,255,.5);border-color:rgba(122,98,24,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 16px rgba(0,0,0,.06)}
body.light .dungeon-weekly-pro-tip-body{color:var(--text)}
body.light .dungeon-mini-card{border-color:rgba(122,98,24,.25);background-image:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(20,18,28,.75) 100%),var(--dungeon-mini-bg)}
body.light .dungeon-mini-card-title{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.dash-progress-wrap{display:flex;align-items:center;gap:12px;margin:8px 0 10px}
.dash-progress-bar{flex:1;height:8px;background:rgba(0,0,0,0.35);border-radius:999px;overflow:hidden;border:1px solid rgba(212,175,55,0.15)}
.dash-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,rgba(201,162,39,.5),var(--gold));transition:width .35s ease}
.dash-progress-label{font-size:12px;font-weight:700;color:var(--gold2);white-space:nowrap}
.dash-countdown{font-size:clamp(15px,3.5vw,20px);font-weight:700;color:var(--gold);margin:10px 0 8px;letter-spacing:.02em}
.dash-prey-target{font-size:clamp(15px,3.2vw,18px);font-weight:700;color:var(--text);line-height:1.3;margin:4px 0 12px;font-family:'Lora',Georgia,serif}
.dash-prey-meter-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-prey-meter-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dash-prey-meter{flex:1;min-width:100px;height:8px;background:rgba(0,0,0,0.35);border-radius:999px;overflow:hidden;border:1px solid rgba(212,175,55,0.12)}
.dash-prey-meter-fill{height:100%;min-width:0;border-radius:999px}
.dash-prey-meter-val{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.lc-prey{border-color:rgba(212,175,55,0.15)}.lc-prey:hover{border-color:rgba(212,175,55,0.6)}
body.light .dash-widget{background:rgba(255,255,255,0.65);border-color:rgba(122,98,24,0.22);box-shadow:0 4px 24px rgba(0,0,0,.08)}
body.light .dash-widget:hover{box-shadow:0 12px 36px rgba(0,0,0,.12)}
body.light .dash-affix-chip{background:rgba(0,0,0,0.04);border-color:rgba(122,98,24,0.15)}
body.light .dash-progress-bar,body.light .dash-prey-meter{background:rgba(0,0,0,0.06)}
@keyframes weekly-title-pulse{0%,100%{opacity:1;text-shadow:0 0 12px rgba(200,168,75,.7),0 0 24px rgba(200,168,75,.4),0 0 36px rgba(184,134,11,.25)}50%{opacity:.96;text-shadow:0 0 16px rgba(200,168,75,.85),0 0 32px rgba(200,168,75,.5),0 0 48px rgba(184,134,11,.35)}}
/* Nav cards */
.landing-cards{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 16px;max-width:640px;margin:0 auto}
@media(max-width:420px){.landing-cards{max-width:320px} .landing-card{width:100%}}
@media(min-width:700px){.landing-cards{max-width:900px} .landing-card{width:calc(25% - 7.5px)}}
.landing-card{width:calc(50% - 5px);background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 12px 12px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.landing-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;border-radius:16px;pointer-events:none}
.landing-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.landing-card:hover::before{opacity:1}
.landing-card:active{transform:translateY(-1px)}
.lc-dungeons{border-color:var(--border)}.lc-dungeons:hover{border-color:var(--gold);box-shadow:0 12px 32px rgba(240,180,41,0.25)}.lc-dungeons::before{background:radial-gradient(ellipse at top,rgba(240,180,41,0.07) 0%,transparent 70%)}
.lc-weekly{border-color:var(--border)}.lc-weekly:hover{border-color:var(--gold);box-shadow:0 12px 32px rgba(240,180,41,0.25)}.lc-weekly::before{background:radial-gradient(ellipse at top,rgba(240,180,41,0.07) 0%,transparent 70%)}
.lc-raids{border-color:var(--border)}.lc-raids:hover{border-color:var(--gold);box-shadow:0 12px 32px rgba(240,180,41,0.25)}.lc-raids::before{background:radial-gradient(ellipse at top,rgba(240,180,41,0.07) 0%,transparent 70%)}
.lc-delves{border-color:var(--border)}.lc-delves:hover{border-color:var(--gold);box-shadow:0 12px 32px rgba(240,180,41,0.25)}.lc-delves::before{background:radial-gradient(ellipse at top,rgba(240,180,41,0.07) 0%,transparent 70%)}
.lc-professions{border-color:var(--border)}.lc-professions:hover{border-color:var(--gold);box-shadow:0 12px 32px rgba(240,180,41,0.25)}.lc-professions::before{background:radial-gradient(ellipse at top,rgba(240,180,41,0.07) 0%,transparent 70%)}
.lc-specs{border-color:var(--border)}.lc-specs:hover{border-color:var(--gold);box-shadow:0 12px 32px rgba(240,180,41,0.25)}.lc-specs::before{background:radial-gradient(ellipse at top,rgba(240,180,41,0.07) 0%,transparent 70%)}
.landing-card-icon{font-size:28px;margin-bottom:6px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.landing-card-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:3px}
.landing-card-desc{font-size:11px;color:var(--muted);line-height:1.4}
.landing-card-count{display:inline-block;margin-top:5px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--bg);color:var(--muted);border:1px solid var(--border); text-transform:uppercase; letter-spacing:0.5px}
/* News/tip strip */
.landing-news{position:relative;z-index:1;margin:8px 16px 0;max-width:640px;margin-left:auto;margin-right:auto;background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.25);border-radius:10px;padding:8px 14px;font-size:12px;color:var(--text);text-align:center}
.landing-news strong{color:var(--gold)}
.landing-tip{position:relative;z-index:1;margin:10px 16px 0;max-width:640px;margin-left:auto;margin-right:auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:flex;gap:10px;align-items:flex-start}
.landing-tip-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.landing-tip-text{font-size:11px;color:var(--muted);line-height:1.5}
.landing-tip-text strong{color:var(--text)}
.landing-credits{display:none}
#home-action-bar{display:none !important}
/* Dungeons mode */
body.mode-dungeons #prof-screen{display:none !important}
body.mode-dungeons #weekly-screen{display:none !important}
body.mode-dungeons #raids-screen{display:none !important}
body.mode-dungeons #delves-screen{display:none !important}
body.mode-dungeons .specs-screen{display:none !important}
body.mode-dungeons #glossary-screen{display:none !important}
/* detail open = home verbergen, detail tonen */
body.mode-dungeons.detail-open #home-screen{display:none !important}
body.mode-dungeons.detail-open #detail-screen{display:block !important}
body.mode-dungeons:not(.detail-open) #home-screen{display:block !important}
body.mode-dungeons:not(.detail-open) #detail-screen{display:none !important}
/* Professions mode */
body.mode-professions #home-screen{display:none !important}
body.mode-professions #detail-screen{display:none !important}
body.mode-professions #prof-screen{display:block !important}
body.mode-professions #weekly-screen{display:none !important}
/* Weekly mode */
body.mode-weekly #home-screen{display:none !important}
body.mode-weekly #detail-screen{display:none !important}
body.mode-weekly #prof-screen{display:none !important}
body.mode-weekly #weekly-screen{display:block !important}
#weekly-screen{display:none;padding:16px 16px 80px;max-width:860px;margin:0 auto}
.weekly-header{text-align:center;padding:20px 0 8px}
.weekly-header h2{font-family:'Inter', sans-serif;color:var(--gold);font-size:22px;margin:0;text-shadow:0 0 12px rgba(200,168,75,.7),0 0 24px rgba(200,168,75,.4),0 0 36px rgba(184,134,11,.25);animation:weekly-title-pulse 2.5s ease-in-out infinite}
.weekly-reset{font-size:12px;color:var(--muted);margin-top:6px}
.weekly-reset span{color:var(--accent)}
.weekly-progress{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:12px 0;display:flex;align-items:center;gap:12px}
.weekly-progress-bar{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.weekly-progress-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .4s}
.weekly-progress-label{font-size:12px;color:var(--muted);white-space:nowrap}
.weekly-category{margin:8px 0}
.weekly-cat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;cursor:pointer;user-select:none;transition:border-color .2s}
.weekly-cat-header:hover{border-color:var(--accent)}
.weekly-cat-header.all-done{border-color:#3db86a44}
.weekly-cat-left{display:flex;align-items:center;gap:8px}
.weekly-cat-title{font-family:'Inter', sans-serif;font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:1px}
.weekly-cat-header.all-done .weekly-cat-title{color:#3db86a}
.weekly-cat-badge{font-size:11px;color:var(--muted);font-family:monospace}
.weekly-cat-done-icon{font-size:14px;opacity:0;transition:opacity .2s}
.weekly-cat-header.all-done .weekly-cat-done-icon{opacity:1}
.weekly-cat-chevron{font-size:11px;color:var(--muted);transition:transform .25s}
.weekly-cat-header.open .weekly-cat-chevron{transform:rotate(180deg)}
.weekly-cat-items{overflow:hidden;max-height:0;transition:max-height .3s ease}
.weekly-cat-items.open{max-height:9999px}
.weekly-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:6px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:border-color .2s}
.weekly-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:all .2s}
.weekly-item:hover{border-color:var(--gold)}
.weekly-item.done{opacity:.5}
.weekly-item.done .weekly-item-name{text-decoration:line-through}
.weekly-check{width:20px;height:20px;border-radius:5px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all .2s;font-size:13px}
.weekly-item.done .weekly-check{background:var(--gold);border-color:var(--gold);color:#000}
.weekly-item-body{flex:1}
.weekly-item-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.weekly-item-desc{font-size:12px;color:var(--muted);line-height:1.5}
.weekly-item-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.weekly-item-where{font-size:11px;color:var(--accent);margin-top:4px;font-style:italic}
.weekly-tag{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:700}
.weekly-tag.gear{background:var(--tag-gear-bg);color:var(--tag-gear-fg)}
.weekly-tag.rep{background:var(--tag-rep-bg);color:var(--tag-rep-fg)}
.weekly-tag.currency{background:var(--tag-currency-bg);color:var(--tag-currency-fg)}
.weekly-tag.crafting{background:var(--tag-crafting-bg);color:var(--tag-crafting-fg)}
.weekly-reset-btn{display:block;margin:24px auto 0;background:none;border:1px solid var(--border);color:var(--muted);padding:8px 20px;border-radius:20px;font-size:12px;cursor:pointer;transition:all .2s}
.weekly-reset-btn:hover{border-color:var(--gold);color:var(--gold)}
.diff-badge{font-size:11px;padding:2px 7px;border-radius:10px;font-weight:700;flex-shrink:0;white-space:nowrap}
.diff-easy{background:rgba(61,184,106,.15);color:#3db86a}
.diff-medium{background:rgba(200,168,75,.15);color:#c8a84b}
.diff-hard{background:rgba(224,64,96,.15);color:#e04060}
.wat-nu-btn{width:100%;background:linear-gradient(135deg,#2a1f00,#1a1400);border:2px solid var(--gold);color:var(--gold);padding:14px;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;margin-bottom:14px;transition:all .2s;letter-spacing:.3px}
.wat-nu-btn:hover{background:linear-gradient(135deg,#3a2d00,#2a2000);box-shadow:0 0 16px rgba(200,168,75,.2)}
.wat-nu-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;display:none}
.wat-nu-panel.visible{display:block}
.wat-nu-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.wat-nu-item:last-child{border-bottom:none}
.wat-nu-num{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wat-nu-text{font-size:13px;font-weight:700;color:var(--text)}
.wat-nu-sub{font-size:11px;color:var(--muted);margin-top:2px}
/* Section glass — Prof (amber) / Delves (azure) / Prey (void); glow layer opacity 0.3 */
.section-surface{position:relative;isolation:isolate}
.section-surface::before{
content:'';
position:absolute;
pointer-events:none;
z-index:0;
border-radius:var(--immersive-card-radius);
opacity:.3;
}
.section-surface--amber::before{
inset:6px 10px 20px;
background:radial-gradient(ellipse 95% 58% at 50% -8%,rgba(243,156,18,.65),transparent 65%);
box-shadow:0 0 72px rgba(243,156,18,.22);
}
.section-surface--azure::before{
inset:6px 10px 20px;
background:radial-gradient(ellipse 95% 58% at 50% -8%,rgba(0,210,255,.6),transparent 65%);
box-shadow:0 0 64px rgba(0,210,255,.22);
}
.section-surface--void::before{
inset:6px 10px 20px;
background:radial-gradient(ellipse 95% 58% at 50% -8%,rgba(138,43,226,.62),transparent 65%);
box-shadow:0 0 68px rgba(138,43,226,.22);
}
.section-surface > *{position:relative;z-index:1}
/* ── PROFESSIONS ── */
#prof-screen{display:none;padding:0 0 60px}
.prof-hero{text-align:center;padding:28px 16px 16px;background:linear-gradient(180deg,rgba(80,40,160,.10) 0%,transparent 100%)}
.prof-hero-title{font-family:'Inter', sans-serif;font-size:clamp(20px,6vw,40px);font-weight:900;color:var(--text);line-height:1.1;margin-bottom:4px}
.prof-hero-title span{color:var(--gold)}
.prof-hero-sub{color:var(--muted);font-size:14px}
.prof-grid{max-width:var(--content-max);margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--grid-gap-immersive)}
.prof-card{min-height:148px;background:rgba(13,13,18,.55);border:1px solid rgba(201,162,39,.42);border-radius:var(--immersive-card-radius);padding:0;cursor:pointer;transition:transform .2s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
@media(hover:hover){
.prof-card--immersive:hover{border-color:rgba(243,156,18,.75);transform:translateY(-3px);box-shadow:0 10px 36px rgba(0,0,0,.4),0 0 28px rgba(243,156,18,.28),inset 0 1px 0 rgba(255,255,255,.08)}
}
.prof-card-bg{position:absolute;inset:0;background-size:cover;background-position:50% 40%;opacity:.3;transform:scale(1.02);transition:transform .35s ease,opacity .25s}
@media(hover:hover){
.prof-card--immersive:hover .prof-card-bg{transform:scale(1.08);opacity:.34}
}
.prof-card-glass{position:absolute;inset:0;background:linear-gradient(145deg,rgba(10,8,14,.88) 0%,rgba(13,13,18,.72) 45%,rgba(10,8,14,.55) 100%);pointer-events:none}
.prof-card-inner{position:relative;z-index:2;padding:16px 14px 14px;min-height:148px;display:flex;flex-direction:column;align-items:flex-start}
.prof-card-icon{font-size:2rem;margin-bottom:6px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.prof-card-name{font-size:14px;font-weight:800;color:var(--gold2);margin-bottom:2px;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.prof-card-cat{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,232,236,.55)}
.prof-card-compact{font-size:10px;font-weight:600;color:rgba(243,156,18,.88);margin-top:auto;padding-top:10px;line-height:1.35;max-width:100%}
.prof-card-tier{position:absolute;top:12px;right:12px;z-index:3;font-size:10px;font-weight:900;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid}
/* Profession card backgrounds (decorative) */
.prof-card--skinning .prof-card-bg{background-image:linear-gradient(160deg,rgba(180,83,9,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a16207' d='M20 70 Q50 20 80 65 L75 75 Q45 35 25 78Z' opacity='.4'/%3E%3C/svg%3E")}
.prof-card--leatherworking .prof-card-bg{background-image:linear-gradient(160deg,rgba(120,53,15,.4),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='55' rx='28' ry='18' fill='%237c2d12' opacity='.35'/%3E%3C/svg%3E")}
.prof-card--mining .prof-card-bg{background-image:linear-gradient(160deg,rgba(71,85,105,.5),transparent 55%),radial-gradient(circle at 30% 40%,rgba(148,163,184,.25),transparent 50%)}
.prof-card--herbalism .prof-card-bg{background-image:linear-gradient(160deg,rgba(22,163,74,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2316a34a' d='M50 15 Q65 45 50 85 Q35 45 50 15Z' opacity='.35'/%3E%3C/svg%3E")}
.prof-card--alchemy .prof-card-bg{background-image:linear-gradient(160deg,rgba(147,51,234,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%239333ea' d='M38 25h24l-8 40a12 12 0 1 1-8 0Z' opacity='.4'/%3E%3C/svg%3E")}
.prof-card--blacksmithing .prof-card-bg{background-image:linear-gradient(160deg,rgba(234,88,12,.4),transparent 50%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='28' y='35' width='44' height='20' rx='4' fill='%23c2410c' opacity='.45'/%3E%3Crect x='42' y='22' width='16' height='18' rx='2' fill='%239a3412' opacity='.5'/%3E%3C/svg%3E")}
.prof-card--enchanting .prof-card-bg{background-image:linear-gradient(160deg,rgba(99,102,241,.4),transparent 55%),radial-gradient(circle at 70% 30%,rgba(196,181,253,.2),transparent 45%)}
.prof-card--engineering .prof-card-bg{background-image:linear-gradient(160deg,rgba(234,179,8,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='22' fill='none' stroke='%23ca8a04' stroke-width='6' opacity='.4'/%3E%3C/svg%3E")}
.prof-card--inscription .prof-card-bg{background-image:linear-gradient(160deg,rgba(14,165,233,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%230ea5e9' d='M30 20h40v60H35l-5-5Z' opacity='.35'/%3E%3C/svg%3E")}
.prof-card--jewelcrafting .prof-card-bg{background-image:linear-gradient(160deg,rgba(236,72,153,.35),transparent 55%),radial-gradient(circle at 50% 40%,rgba(244,114,182,.25),transparent 40%)}
.prof-card--tailoring .prof-card-bg{background-image:linear-gradient(160deg,rgba(59,130,246,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath stroke='%233b82f6' stroke-width='4' fill='none' d='M25 75 Q50 25 75 75' opacity='.4'/%3E%3C/svg%3E")}
.prof-card--cooking .prof-card-bg{background-image:linear-gradient(160deg,rgba(245,158,11,.4),transparent 55%),radial-gradient(circle at 50% 60%,rgba(251,191,36,.2),transparent 45%)}
.prof-card--fishing .prof-card-bg{background-image:linear-gradient(160deg,rgba(6,182,212,.35),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%230891b2' d='M20 55 Q45 30 80 50 L75 58 Q42 42 22 62Z' opacity='.4'/%3E%3C/svg%3E")}
body.light .prof-card{border-color:rgba(122,98,24,.45)}
body.light .prof-card-glass{background:linear-gradient(145deg,rgba(255,255,255,.88) 0%,rgba(248,250,252,.78) 100%)}
body.light .prof-card-name{color:#6b5410;text-shadow:none}
.tier-S{background:rgba(255,215,0,.15);border-color:#ffd700;color:#ffd700}
.tier-A{background:rgba(192,132,252,.15);border-color:#c084fc;color:#c084fc}
.tier-B{background:rgba(96,165,250,.15);border-color:#60a5fa;color:#60a5fa}
.tier-C{background:rgba(148,163,184,.15);border-color:#94a3b8;color:#94a3b8}
#prof-detail{display:none;max-width:860px;margin:0 auto;padding:0 16px 60px}
#prof-detail.visible{display:block}
.pdet-back{background:none;border:1px solid var(--border);color:var(--gold);font-size:13px;font-weight:700;padding:7px 16px;border-radius:8px;cursor:pointer;margin:16px 0 12px;transition:all .2s}
.pdet-back:hover{background:var(--gold);color:#000}
.pdet-header{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:12px}
.pdet-icon{font-size:2.6rem;margin-bottom:8px}
.pdet-name{font-family:'Inter', sans-serif;font-size:clamp(20px,5vw,32px);font-weight:900;color:var(--text);margin-bottom:4px}
.pdet-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.pdet-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;letter-spacing:.05em;text-transform:uppercase}
.pdet-lore{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.7}
.pdet-ratings{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.pdet-rating-label{font-size:11px;color:var(--muted);margin-bottom:2px}
.pdet-stars{font-size:14px}
.pdet-tab.active{background:var(--gold);color:#000}
.pdet-panel{display:none}
.pdet-panel.visible{display:block}
.pdet-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:10px}
.pdet-section h3{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.trainer-note{font-size:13px;color:var(--muted);line-height:1.7;margin-top:8px}
.spec-block{background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:8px}
.spec-title{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:6px}
.spec-desc{font-size:13px;color:var(--muted);line-height:1.7}
.spec-points{font-size:11px;font-weight:700;color:var(--accent);margin-top:6px;padding:3px 8px;background:rgba(128,96,208,.12);border-radius:6px;display:inline-block}
/* ── KP BOOM ── */
.kp-tree{padding:8px 0}
.kp-intro-box{background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:12px;color:var(--muted);line-height:1.6}
.kp-intro-box strong{color:var(--gold)}
.kp-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;align-items:flex-start;position:relative}
.kp-row::before{content:'';position:absolute;left:20px;top:-6px;width:2px;height:6px;background:var(--border)}
.kp-row:first-child::before{display:none}
.kp-node{flex:1;min-width:140px;max-width:220px;background:var(--deep);border:2px solid var(--border);border-radius:12px;padding:10px 12px;cursor:default;transition:border-color .2s,transform .15s;position:relative}
.kp-node:hover{border-color:var(--gold);transform:translateY(-2px)}
.kp-node.kp-base{border-color:var(--accent);background:rgba(128,96,208,.1);max-width:100%}
.kp-node.kp-recommended{border-color:#3db86a}
.kp-node.kp-recommended::after{content:'★ Aanbevolen';position:absolute;top:-10px;right:8px;font-size:9px;font-weight:700;color:#3db86a;background:var(--bg);padding:0 4px}
.kp-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-bottom:5px}
.kp-badge.kp-cost{background:rgba(200,168,75,.15);color:var(--gold)}
.kp-badge.kp-free{background:rgba(128,96,208,.15);color:var(--accent)}
.kp-node-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px}
.kp-node-desc{font-size:11px;color:var(--muted);line-height:1.5}
.kp-connector{width:100%;display:flex;justify-content:center;margin:0;color:var(--border);font-size:16px;line-height:1}
.kp-total-bar{background:var(--deep);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-top:12px;font-size:11px;color:var(--muted)}
.kp-total-bar span{color:var(--gold);font-weight:700}
/* ── KP BRONNEN ── */
.kp-summary {
display: flex; gap: 10px; flex-wrap: wrap;
background: rgba(0,0,0,0.3);
border: 1px solid #3a3a2a;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
}
.kp-summary-item {
display: flex; flex-direction: column; align-items: center;
min-width: 80px; background: rgba(255,255,255,0.04);
border-radius: 6px; padding: 8px 12px; gap: 2px;
}
.kp-sum-label { font-size: 0.72em; color: #a0906a; }
.kp-sum-val { font-size: 1.1em; font-weight: 700; color: #f0d080; }
.kp-sum-total .kp-sum-label { color: #c89b3c; }
.kp-sum-total .kp-sum-val { color: #ffd700; font-size: 1.25em; }
.kp-section {
margin-bottom: 18px;
background: rgba(0,0,0,0.2);
border: 1px solid #2a2a1a;
border-radius: 8px;
overflow: hidden;
}
.kp-section-header {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 10px 14px;
background: rgba(200,155,60,0.1);
border-bottom: 1px solid #3a3020;
}
.kp-section-title {
font-weight: 700; font-size: 0.95em; color: #e8d080;
display: flex; align-items: center; gap: 8px;
}
.kp-section-sub { font-size: 0.75em; color: #808060; margin-left: auto; }
.kp-badge-total {
background: rgba(200,155,60,0.25); color: #f0c040;
border-radius: 10px; padding: 2px 8px; font-size: 0.8em; font-weight: 600;
}
.kp-table { width: 100%; border-collapse: collapse; font-size: 0.85em; table-layout: fixed; }
.kp-table th {
text-align: left; padding: 8px;
color: #a09060; font-size: 0.8em; font-weight: 600;
border-bottom: 1px solid #2a2a1a;
vertical-align: top;
}
.kp-table td { padding: 8px; border-bottom: 1px solid #1a1a0f; vertical-align: top; }
.kp-table tr:last-child td { border-bottom: none; }
.kp-table tr:hover td { background: rgba(255,255,255,0.03); }
.kp-table--treasures .kp-col-check { width: 44px; }
.kp-table--treasures .kp-col-name { width: 30%; }
.kp-table--treasures .kp-col-zone { width: 24%; }
.kp-table--treasures .kp-col-way { width: 1%; }
.kp-table--treasures .kp-col-hint { width: 40px; }
.kp-table--treasures td.kp-way { text-align: right; white-space: nowrap; }
.kp-table--treasures .kp-item-name { word-break: break-word; }
.kp-table--treasures .kp-zone { word-break: break-word; overflow-wrap: anywhere; }
.kp-table--kp-rows .kp-col-kp-src { width: 38%; }
.kp-table--kp-rows .kp-col-kp-val { width: 88px; }
.kp-table--kp-rows .kp-col-kp-note { width: auto; }
.kp-table--kp-rows td.kp-kp-val { white-space: nowrap; }
.kp-num { color: #606050; width: 28px; text-align: center; }
.kp-item-name { color: #d4c090; font-weight: 500; }
.kp-zone { color: #88a060; font-size: 0.82em; }
.kp-way-code, .way-pill, .weekly-item-way, .trainer-way {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.85em;
background: #1f6feb;
color: #fff;
padding: 5px 10px;
border-radius: 9999px;
white-space: nowrap;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .2s, transform .15s;
border: none;
}
.kp-way-code:hover, .way-pill:hover, .weekly-item-way:hover, .trainer-way:hover {
background: #3584e4;
transform: scale(1.02);
}
.weekly-item-way { margin-top: 6px; }
.trainer-way { margin: 8px 0; }
.kp-no-way { color: #404030; }
.kp-kp-val { color: #f0c040; font-weight: 700; width: 60px; }
.kp-note-text-inline { color: #9090a0; font-size: 0.8em; font-style: italic; }
.kp-note { cursor: help; color: #a08040; width: 24px; text-align: center; }
.kp-note-row td { background: rgba(160,120,40,0.08) !important; }
.kp-note-text {
font-size: 0.78em; color: #a09060; font-style: italic;
padding: 0 10px 6px 38px; display: block;
}
.kp-darkmoon { background: rgba(120,0,180,0.08); border-color: #3a2050; }
.kp-dm-row { padding: 8px 14px; display: flex; gap: 20px; flex-wrap: wrap; }
.kp-dm-quest { color: #c090e0; font-size: 0.88em; }
.kp-dm-npc { color: #9080b0; font-size: 0.85em; }
.kp-tip {
background: rgba(40,60,20,0.5);
border: 1px solid #3a5020;
border-radius: 8px;
padding: 12px 16px;
font-size: 0.85em; color: #a0c070;
margin-top: 4px;
}
.kp-tomtom-btn {
margin-left: auto;
background: rgba(40,100,60,0.4);
border: 1px solid #30603a;
color: #80d090; font-size: 0.8em;
padding: 4px 12px; border-radius: 6px; cursor: pointer;
transition: background 0.2s;
}
.kp-tomtom-btn:hover { background: rgba(40,100,60,0.7); }
.kp-empty-note { padding: 14px; color: #806040; font-style: italic; font-size: 0.88em; }
@media (max-width: 600px) {
.kp-summary { gap: 6px; padding: 8px; }
.kp-summary-item { min-width: 60px; padding: 6px 8px; }
.kp-way-code { font-size: 0.72em; }
.kp-table th, .kp-table td { padding: 8px; }
}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.item-card{background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:10px}
.item-icon{font-size:1.4rem;margin-bottom:4px}
.item-name{font-size:13px;font-weight:700;color:var(--gold)}
.item-desc{font-size:12px;color:var(--muted);line-height:1.5;margin-top:3px}
.item-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--tip-bg);color:var(--gold);margin-top:4px;display:inline-block}
.orders-text{font-size:13px;color:var(--muted);line-height:1.7}
.prof-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.prof-source-label{font-size:11px;color:var(--muted);margin-right:2px}
.prof-link-btn{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 14px;font-size:12px;font-weight:700;color:var(--gold);text-decoration:none;transition:all .2s}
.prof-link-btn:hover{background:var(--gold);color:#000;border-color:var(--gold)}
@media(max-width:480px){.prof-grid{gap:var(--grid-gap-immersive);padding:0 10px 40px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .item-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.mode-tabs{gap:2px;justify-content:flex-start}.mode-tab{padding:4px 8px;font-size:11px;flex:0 0 auto}}
/* ── SPECS — class accordion grid ─────────────────────── */
.spec-class-grid.spec-class-grid--accordion{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--grid-gap-immersive);padding:10px 0;max-width:1100px;margin:0 auto;width:100%;
}
.specs-screen .spec-class-grid.spec-class-grid--accordion{padding:4px 12px 24px}
#spec-modal .spec-class-grid.spec-class-grid--accordion{padding-bottom:4px}
.spec-class-card{
--card-accent:var(--gold);
background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.18);border-radius:var(--immersive-card-radius);overflow:hidden;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
box-shadow:0 4px 24px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04) inset;
border-left:4px solid var(--card-accent);
transition:box-shadow .25s ease,border-color .25s ease,transform .2s ease;
}
.spec-class-card:hover{
box-shadow:0 6px 28px rgba(0,0,0,.45),0 0 24px rgba(201,162,39,.14);
border-color:rgba(212,175,55,.32);
}
.spec-class-card--deathknight{--card-accent:var(--class-deathknight)}
.spec-class-card--demonhunter{--card-accent:var(--class-demonhunter)}
.spec-class-card--druid{--card-accent:var(--class-druid)}
.spec-class-card--evoker{--card-accent:var(--class-evoker)}
.spec-class-card--hunter{--card-accent:var(--class-hunter)}
.spec-class-card--mage{--card-accent:var(--class-mage)}
.spec-class-card--monk{--card-accent:var(--class-monk)}
.spec-class-card--paladin{--card-accent:var(--class-paladin)}
.spec-class-card--priest{--card-accent:var(--class-priest)}
.spec-class-card--rogue{--card-accent:var(--class-rogue)}
.spec-class-card--shaman{--card-accent:var(--class-shaman)}
.spec-class-card--warlock{--card-accent:var(--class-warlock)}
.spec-class-card--warrior{--card-accent:var(--class-warrior)}
.spec-class-card-head{
width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;margin:0;border:none;cursor:pointer;text-align:left;
background:rgba(0,0,0,.2);color:var(--text);font-family:inherit;transition:background .2s ease;
}
.spec-class-card-head:hover{background:rgba(0,0,0,.32)}
.spec-class-card-head:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.spec-class-crest{
width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;
border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.spec-class-card-title{
flex:1;min-width:0;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text);
font-family:var(--font-display),Georgia,serif;
}
.spec-class-chevron{
width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
transform:rotate(45deg);transition:transform .3s ease;margin-right:4px;flex-shrink:0;opacity:.85;
}
.spec-class-card.is-expanded .spec-class-chevron{transform:rotate(-135deg);margin-top:4px}
.spec-class-card-body{
max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(0.4,0,0.2,1);
border-top:1px solid rgba(255,255,255,.06);
}
.spec-class-card.is-expanded .spec-class-card-body{max-height:560px}
.spec-class-card-body-inner{padding:6px 8px 10px}
.spec-class-empty{font-size:12px;color:var(--muted);margin:10px 12px;line-height:1.45;font-style:italic}
.spec-accordion-spec-row{
width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 4px;border:none;border-radius:10px;cursor:pointer;text-align:left;
background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);color:var(--text);font-family:inherit;
transition:background .15s,border-color .15s,transform .15s;
}
.spec-accordion-spec-row:last-child{margin-bottom:0}
.spec-accordion-spec-row:hover{background:rgba(255,255,255,.07);border-color:rgba(212,175,55,.25)}
.spec-accordion-spec-row:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.spec-accordion-spec-row--active{border-color:rgba(201,162,39,.55);background:rgba(201,162,39,.12);box-shadow:0 0 0 1px rgba(201,162,39,.2)}
.spec-accordion-spec-icon{font-size:22px;width:28px;text-align:center;flex-shrink:0;line-height:1}
.spec-accordion-spec-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.spec-accordion-spec-name{font-size:13px;font-weight:700;color:var(--gold2)}
.spec-accordion-spec-role{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}
.spec-accordion-role-ico{font-size:12px;line-height:1}
body.light .spec-class-card{background:rgba(255,255,255,.72);border-color:rgba(122,98,24,.22);box-shadow:0 4px 20px rgba(0,0,0,.08)}
body.light .spec-class-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1)}
body.light .spec-class-card-head{background:rgba(255,255,255,.45)}
body.light .spec-class-card-head:hover{background:rgba(255,255,255,.65)}
body.light .spec-accordion-spec-row{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
body.light .spec-accordion-spec-row:hover{background:rgba(201,162,39,.1)}
body.light .spec-accordion-spec-row--active{background:rgba(201,162,39,.18)}
.spec-detail{display:none;padding:0 0 80px}
.spec-detail.visible{display:block}
.spec-hero{background:linear-gradient(135deg,#1a1400,#0d0d1a);border-bottom:1px solid var(--border);padding:16px}
.spec-hero-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.spec-hero-icon{font-size:40px}
.spec-hero-name{font-family:'Inter', sans-serif;font-size:20px;color:var(--gold)}
.spec-hero-sub{font-size:12px;color:var(--muted);margin-top:2px}
.spec-hero-summary{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:12px}
.spec-proscons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.spec-pros,.spec-cons{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.spec-pros-title{font-size:11px;font-weight:800;color:#3db86a;margin-bottom:6px}
.spec-cons-title{font-size:11px;font-weight:800;color:#e04060;margin-bottom:6px}
.spec-pros li,.spec-cons li{font-size:11px;color:var(--muted);line-height:1.6;list-style:none;padding-left:14px;position:relative}
.spec-pros li::before{content:'✓';color:#3db86a;position:absolute;left:0}
.spec-cons li::before{content:'✗';color:#e04060;position:absolute;left:0}
.spec-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:82px;z-index:10}
.spec-tabs::-webkit-scrollbar{display:none}
.spec-tab-btn{white-space:nowrap;padding:8px 11px;font-size:11px;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:all .2s}
.spec-tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.spec-detail[data-spec-class] .spec-tab-btn.active{color:var(--spec-accent);border-bottom-color:var(--spec-accent)}
.spec-overview-chunk{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.spec-overview-chunk:last-of-type{border-bottom:none}
.spec-overview-chunk-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;color:var(--gold)}
.spec-detail[data-spec-class] .spec-overview-chunk-title{color:var(--spec-accent)}
.spec-overview-chunk-body .spec-section-title:first-child{margin-top:0}
.spec-overview-empty{font-size:13px;color:var(--muted);line-height:1.55;margin:8px 0}
.spec-copy-name-btn{font-size:10px;font-weight:700;padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,box-shadow .2s}
.spec-copy-name-btn:hover{border-color:var(--gold);color:var(--gold)}
.spec-detail[data-spec-class] .spec-copy-name-btn:hover{border-color:var(--spec-accent);color:var(--spec-accent);box-shadow:0 0 10px color-mix(in srgb,var(--spec-accent) 22%,transparent)}
.cons-name-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.cons-name-row .cons-name{margin-bottom:0;flex:1;min-width:0}
.cons-ready-reset-label{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--panel);cursor:pointer;font-size:13px;font-weight:600;color:var(--text);line-height:1.45}
.cons-ready-reset-input{width:20px;height:20px;min-width:20px;margin-top:2px;flex-shrink:0;cursor:pointer}
.bis-verified-wrap{margin-top:4px}
.bis-verified-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 6px}
.bis-verified-main-title{margin:0;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold2);flex:1;min-width:0}
.bis-verified-reset-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(100,180,255,.12));border:1px solid rgba(212,175,55,.35);color:var(--gold2);white-space:nowrap}
body.light .bis-verified-reset-badge{background:linear-gradient(135deg,rgba(180,140,40,.15),rgba(80,140,220,.1));border-color:rgba(140,110,30,.25)}
.spec-detail[data-spec-class] .bis-verified-main-title{color:var(--spec-accent)}
.bis-verified-ilvl-note{margin:0 0 12px;font-size:12px;color:var(--muted);line-height:1.45}
.bis-verified-table-scroll{overflow-x:auto;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.22)}
.bis-verified-table{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
.bis-verified-table th{padding:10px 8px;text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);background:rgba(255,255,255,.04)}
.bis-verified-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.bis-verified-table tr:last-child td{border-bottom:none}
.bis-verified-actions{white-space:nowrap}
.bis-item-name-plain{color:var(--muted);font-style:normal}
body.light .bis-verified-table-scroll{background:rgba(255,255,255,.55)}
.spec-detail[data-spec-class="deathknight"]{--spec-accent:var(--class-deathknight)}
.spec-detail[data-spec-class="demonhunter"]{--spec-accent:var(--class-demonhunter)}
.spec-detail[data-spec-class="druid"]{--spec-accent:var(--class-druid)}
.spec-detail[data-spec-class="evoker"]{--spec-accent:var(--class-evoker)}
.spec-detail[data-spec-class="hunter"]{--spec-accent:var(--class-hunter)}
.spec-detail[data-spec-class="mage"]{--spec-accent:var(--class-mage)}
.spec-detail[data-spec-class="monk"]{--spec-accent:var(--class-monk)}
.spec-detail[data-spec-class="paladin"]{--spec-accent:var(--class-paladin)}
.spec-detail[data-spec-class="priest"]{--spec-accent:var(--class-priest)}
.spec-detail[data-spec-class="rogue"]{--spec-accent:var(--class-rogue)}
.spec-detail[data-spec-class="shaman"]{--spec-accent:var(--class-shaman)}
.spec-detail[data-spec-class="warlock"]{--spec-accent:var(--class-warlock)}
.spec-detail[data-spec-class="warrior"]{--spec-accent:var(--class-warrior)}
.spec-tab-btn--consumables-glow{color:var(--gold2);text-shadow:0 0 10px rgba(201,162,39,.4),0 0 20px rgba(201,162,39,.15)}
.spec-detail[data-spec-class] .spec-tab-btn--consumables-glow{color:color-mix(in srgb,var(--spec-accent) 82%,var(--muted));text-shadow:0 0 12px color-mix(in srgb,var(--spec-accent) 48%,transparent),0 0 24px color-mix(in srgb,var(--spec-accent) 20%,transparent)}
.spec-detail[data-spec-class] .spec-tab-btn--consumables-glow.active{color:var(--spec-accent);border-bottom-color:var(--spec-accent);text-shadow:0 0 14px color-mix(in srgb,var(--spec-accent) 55%,transparent)}
.spec-tab-content{display:none;padding:12px}
.spec-tab-content.active{display:block}
.spec-tab-placeholder{padding:28px 16px 20px;text-align:center;font-size:14px;line-height:1.55;color:var(--muted);max-width:420px;margin:0 auto}
.spec-tab-placeholder[hidden]{display:none !important}
.spec-section-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:16px 0 8px}
.spec-section-title:first-child{margin-top:4px}
.rot-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.rot-table th{text-align:left;padding:8px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;border-bottom:1px solid var(--border);vertical-align:top}
.rot-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top}
.rot-table td:last-child{max-width:min(72ch,100%);word-wrap:break-word;overflow-wrap:break-word}
.rot-prio{font-weight:800;color:var(--gold);text-align:center}
.rot-spell{font-weight:700;color:var(--text)}
.rot-note{color:var(--muted);font-size:11px}
.rot-imp-always{color:#3db86a;font-size:10px;font-weight:800}
.rot-imp-high{color:#c8a84b;font-size:10px;font-weight:800}
.rot-imp-filler{color:var(--muted);font-size:10px}
.apex-tip{background:rgba(232,140,42,.1);border:1px solid rgba(232,140,42,.3);border-radius:8px;padding:10px 12px;font-size:12px;color:#e88c2a;margin-bottom:12px;line-height:1.5}
.stat-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.stat-rank{width:20px;font-size:11px;font-weight:800;color:var(--gold);flex-shrink:0}
.stat-name{width:110px;font-size:13px;font-weight:700;color:var(--text);flex-shrink:0}
.stat-bars{display:flex;gap:3px;flex-shrink:0}
.stat-bar{width:12px;height:12px;border-radius:3px}
.stat-bar.filled{background:var(--gold)}
.stat-bar.empty{background:var(--border)}
.stat-note{font-size:11px;color:var(--muted);line-height:1.4}
.stat-tip{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.cd-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:8px}
.cd-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cd-spell{font-size:13px;font-weight:800;color:var(--text)}
.cd-timer{font-size:11px;color:var(--gold);background:rgba(200,168,75,.12);padding:2px 7px;border-radius:8px;font-weight:700}
.cd-effect{font-size:12px;color:var(--muted);margin-bottom:3px}
.cd-when{font-size:11px;color:#3db86a}
.tip-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:8px;display:flex;gap:10px}
.tip-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.tip-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px}
.tip-text{font-size:12px;color:var(--muted);line-height:1.5}
.macro-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:8px}
.macro-name{font-size:13px;font-weight:800;color:var(--gold);margin-bottom:4px}
.macro-note{font-size:11px;color:var(--muted);margin-bottom:8px}
.macro-code{background:#0a0a16;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-family:monospace;font-size:11px;color:#a0e0ff;line-height:1.6;white-space:pre;overflow-x:auto;cursor:pointer;position:relative}
.macro-code::after{content:'📋 kopiëren';position:absolute;top:5px;right:8px;font-size:10px;color:var(--muted);font-family:sans-serif}
.macro-code.copied::after{content:'✅ Gekopieerd!';color:#3db86a}
.cheat-rot{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.cheat-rot-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.cheat-rot-text{font-size:12px;color:var(--text);line-height:1.8}
.cheat-rules{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
@media(max-width:480px){.cheat-rules{grid-template-columns:1fr}}
.cheat-rule{background:rgba(224,64,96,.08);border:1px solid rgba(224,64,96,.2);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--text);line-height:1.4}
.cheat-rule::before{content:'⚠ ';color:#e04060}
.res-table{width:100%;font-size:12px;border-collapse:collapse;table-layout:fixed}
.res-table th{text-align:left;padding:8px;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800;border-bottom:1px solid var(--border);vertical-align:top}
.res-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top;color:var(--muted)}
.res-table td:first-child{color:var(--text);font-weight:700;width:32%}
.res-table td:last-child{max-width:0;word-wrap:break-word;overflow-wrap:break-word}
.pet-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.pet-type{font-size:13px;font-weight:800;color:var(--gold)}
.pet-bonus{font-size:12px;color:var(--muted);margin-top:2px}
.pet-use{font-size:11px;color:#3db86a;margin-top:3px}
.frenzy-tip{background:rgba(61,184,106,.08);border:1px solid rgba(61,184,106,.25);border-radius:8px;padding:10px 12px;font-size:12px;color:#3db86a;margin:10px 0;line-height:1.5}
.cons-card{background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:8px}
.cons-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:4px}
.cons-name{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:3px}
.cons-effect{font-size:12px;color:var(--text);line-height:1.5;margin-bottom:3px}
.cons-note{font-size:11px;color:var(--muted);font-style:italic}
.cons-bis-wrapper{margin-top:4px}
.cons-bis-subtabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:8px}
.cons-bis-subbtn{padding:6px 12px;font-size:12px;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}
.cons-bis-subbtn:hover{color:var(--text);border-color:var(--gold);background:rgba(200,168,75,.08)}
.cons-bis-subbtn.active{color:var(--gold);border-color:var(--gold);background:rgba(200,168,75,.15)}
.spec-detail[data-spec-class] .cons-bis-subbtn--spec.active{color:var(--spec-accent);border-color:color-mix(in srgb,var(--spec-accent) 65%,var(--border));background:color-mix(in srgb,var(--spec-accent) 12%,var(--panel))}
.spec-detail[data-spec-class] .cons-bis-subbtn--spec:hover{border-color:color-mix(in srgb,var(--spec-accent) 45%,var(--gold))}
.cons-verified-wrap{margin-top:2px}
.cons-verified-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cons-verified-heading{margin:0;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold2);text-shadow:0 0 14px rgba(201,162,39,.35)}
.spec-detail[data-spec-class] .cons-verified-heading{color:var(--spec-accent);text-shadow:0 0 16px color-mix(in srgb,var(--spec-accent) 45%,transparent),0 0 28px color-mix(in srgb,var(--spec-accent) 18%,transparent)}
.cons-copy-btn{font-size:11px;font-weight:700;padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.cons-copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.spec-detail[data-spec-class] .cons-copy-btn:hover{border-color:var(--spec-accent);color:var(--spec-accent);box-shadow:0 0 14px color-mix(in srgb,var(--spec-accent) 25%,transparent)}
.cons-card--verified{border-color:color-mix(in srgb,var(--gold) 28%,var(--border));box-shadow:0 0 16px rgba(201,162,39,.14)}
.spec-detail[data-spec-class] .cons-card--verified{border-color:color-mix(in srgb,var(--spec-accent) 38%,var(--border));box-shadow:0 0 20px color-mix(in srgb,var(--spec-accent) 24%,transparent)}
.cons-type--verified{color:var(--muted)}
.spec-detail[data-spec-class] .cons-type--verified{color:color-mix(in srgb,var(--spec-accent) 72%,var(--muted))}
.bis-glass-shell{margin-top:4px;border-radius:14px;padding:1px;background:linear-gradient(135deg,rgba(201,162,39,.28),rgba(201,162,39,.07))}
.spec-detail[data-spec-class] .bis-glass-shell{background:linear-gradient(135deg,color-mix(in srgb,var(--spec-accent) 38%,transparent),color-mix(in srgb,var(--spec-accent) 10%,transparent))}
.bis-glass-inner{background:rgba(12,12,18,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:13px;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.bis-glass-table{width:100%;border-collapse:collapse;font-size:12px}
.bis-glass-table thead{background:rgba(255,255,255,.04)}
.bis-glass-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.08)}
.bis-glass-table td{padding:16px 12px;vertical-align:middle}
.bis-glass-placeholder-row .bis-glass-placeholder-text{margin:0;font-size:13px;line-height:1.65;color:var(--silver);text-align:center}
.cons-bis-panel{display:none}
.cons-bis-panel.active{display:block}
.bis-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.bis-table th{text-align:left;padding:8px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--border);vertical-align:top}
.bis-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top}
.bis-slot{font-weight:700;color:var(--gold);width:72px}
.bis-name-cell{max-width:0;word-wrap:break-word;overflow-wrap:break-word}
.bis-source,.bis-type{font-size:11px;word-wrap:break-word;overflow-wrap:break-word;max-width:min(140px,28vw)}
.bis-completion{width:1%;white-space:nowrap;text-align:center}
.bis-check-cell{width:40px;text-align:center}
.bis-num{width:52px;white-space:nowrap}
.bis-versions{width:1%;white-space:nowrap}
.bis-side{width:64px}
/* WoWhead-style BiS table */
.bis-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px;border-radius:8px;border:1px solid var(--border)}
.bis-table-wowhead{min-width:640px;font-family:Inter,sans-serif}
.bis-table-wowhead thead{background:#2a2a2e;color:#fff}
.bis-table-wowhead thead th{padding:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:none;white-space:nowrap;vertical-align:top}
.bis-table-wowhead tbody tr{border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s}
.bis-table-wowhead tbody tr:hover{background:rgba(255,255,255,.04)}
.bis-table-wowhead tbody td{padding:8px;vertical-align:top}
/* WoWhead-style link colors (spell/item) */
.wh-link-spell{color:#69ccf0 !important}
.wh-link-spell:hover{color:#99ddff !important}
.wh-link-item{color:#a335ee !important}
.wh-link-item:hover{color:#c366ff !important}
/* Mythic / epic BiS & Wowhead item links — override power.js recolor */
.bis-table a,
.bis-verified-table a,
.wowhead-tooltip-link{color:#a335ee !important;text-shadow:0 0 5px rgba(163,53,238,.3);font-weight:700}
.bis-name-cell .wh-link{text-decoration:none}
.bis-name-cell .wh-link:hover{text-decoration:underline}
.bis-check-cell{width:36px;text-align:center}
.bis-check{width:16px;height:16px;cursor:pointer;accent-color:var(--gold)}
.bis-name-cell{font-weight:600}
.bis-name-cell a{text-decoration:none}
.bis-name-cell a:hover{text-decoration:underline}
.bis-num{font-family:Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--text);font-size:13px}
.bis-versions{display:flex;gap:4px;flex-wrap:wrap;overflow:visible}
.bis-version-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;font-size:10px;font-weight:700;border-radius:4px;cursor:help}
.bis-v-lfr{background:rgba(94,185,94,.3);color:#5eb95e}
.bis-v-n{background:rgba(94,129,185,.3);color:#5e81b9}
.bis-v-h{background:rgba(163,53,238,.25);color:#a335ee}
.bis-v-m{background:rgba(255,128,0,.25);color:#ff8000}
.bis-version-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-6px);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;background:linear-gradient(180deg,#1e1e24 0%,#16161a 100%);border:1px solid rgba(200,168,75,.5);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.6);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s;z-index:9999}
.bis-version-tooltip::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(200,168,75,.4)}
.bis-version-icon:hover .bis-version-tooltip{opacity:1;visibility:visible}
.bis-tt-diff{font-size:12px;font-weight:700;color:var(--gold)}
.bis-tt-ilvl{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Specs mode */
body.mode-specs #home-screen,
body.mode-specs #detail-screen,
body.mode-specs #prof-screen,
body.mode-specs #weekly-screen{display:none!important}
body.mode-specs .specs-screen{display:block!important}
body.mode-raids #home-screen{display:none !important}
body.mode-raids #prof-screen{display:none !important}
body.mode-raids #weekly-screen{display:none !important}
body.mode-raids .specs-screen{display:none !important}
body.mode-raids #delves-screen{display:none !important}
body.mode-raids #raids-screen{display:block}
body.mode-raids #detail-screen{display:none !important}
body.mode-raids.raid-detail-open #raids-screen{display:none !important}
body.mode-raids.raid-detail-open #detail-screen{display:block !important}
#raids-screen{display:none}
#glossary-screen{display:none}
body.mode-glossary #home-screen{display:none !important}
body.mode-glossary #detail-screen{display:none !important}
body.mode-glossary #prof-screen{display:none !important}
body.mode-glossary #weekly-screen{display:none !important}
body.mode-glossary .specs-screen{display:none !important}
body.mode-glossary #raids-screen{display:none !important}
body.mode-glossary #delves-screen{display:none !important}
body.mode-glossary #glossary-screen{display:block !important}
body.mode-delves #home-screen{display:none !important}
body.mode-delves #detail-screen{display:none !important}
body.mode-delves #prof-screen{display:none !important}
body.mode-delves #weekly-screen{display:none !important}
body.mode-delves .specs-screen{display:none !important}
body.mode-delves #raids-screen{display:none !important}
body.mode-delves #glossary-screen{display:none !important}
body.mode-delves #delves-screen{display:block !important}
/* Prey mode */
body.mode-prey #home-screen{display:none !important}
body.mode-prey #detail-screen{display:none !important}
body.mode-prey #prof-screen{display:none !important}
body.mode-prey #weekly-screen{display:none !important}
body.mode-prey .specs-screen{display:none !important}
body.mode-prey #raids-screen{display:none !important}
body.mode-prey #delves-screen{display:none !important}
body.mode-prey #glossary-screen{display:none !important}
body.mode-prey #prey-screen{display:block !important}
#travel-screen{display:none}
body.mode-travel #home-screen{display:none !important}
body.mode-travel #detail-screen{display:none !important}
body.mode-travel #prof-screen{display:none !important}
body.mode-travel #weekly-screen{display:none !important}
body.mode-travel .specs-screen{display:none !important}
body.mode-travel #raids-screen{display:none !important}
body.mode-travel #delves-screen{display:none !important}
body.mode-travel #glossary-screen{display:none !important}
body.mode-travel #prey-screen{display:none !important}
body.mode-travel #travel-screen{display:block !important}
.travel-screen-inner{padding-bottom:56px !important}
.travel-hero{text-align:center;padding:16px 0 12px}
.travel-hero-title{font-family:'Inter',sans-serif;font-size:clamp(20px,4.5vw,26px);font-weight:800;color:var(--gold);text-shadow:0 0 14px rgba(200,168,75,.35)}
.travel-hero-sub{font-size:12px;color:var(--muted);margin-top:6px}
.travel-hub-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:18px;overflow:hidden}
.travel-vault-highlight{border-color:rgba(200,168,75,.42);box-shadow:0 0 24px rgba(200,168,75,.1);margin-bottom:22px}
.travel-vault-desc-only{border-bottom:none !important;padding-top:4px}
.travel-hub-head{padding:14px 16px;border-bottom:1px solid var(--border);background:rgba(200,168,75,.06)}
.travel-hub-name{font-size:15px;font-weight:800;color:var(--text);letter-spacing:.02em}
.travel-hub-way-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.travel-hub-way-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.travel-hub-way-code{font-family:ui-monospace,'Consolas',monospace;font-size:12px;color:var(--muted);flex:1;min-width:0;word-break:break-all}
.travel-portal-row{padding:14px 16px;border-bottom:1px solid var(--border)}
.travel-portal-row:last-child{border-bottom:none}
.travel-from-to{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin-bottom:8px;font-size:13px}
.travel-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.travel-loc-en{font-weight:800;color:var(--gold)}
.travel-portal-desc{font-size:13px;color:var(--text);line-height:1.55;margin-bottom:12px}
.portal-way-copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:700;font-family:inherit;border-radius:10px;border:1px solid rgba(200,168,75,.45);background:linear-gradient(180deg,rgba(200,168,75,.2),rgba(200,168,75,.08));color:var(--gold);cursor:pointer;transition:filter .15s,border-color .15s}
.portal-way-copy-btn:hover{filter:brightness(1.08);border-color:var(--gold)}
.portal-way-meta{font-family:ui-monospace,'Consolas',monospace;font-size:11px;color:var(--muted);margin-top:8px;word-break:break-all}
.travel-no-way{font-size:12px;color:var(--muted);font-style:italic}
.glossary-item{background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;overflow:hidden}
.glossary-item-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;gap:10px;transition:background .15s}
.glossary-item-header:hover{background:var(--deep)}
.glossary-entry-name{font-size:15px;font-weight:800;color:var(--gold)}
.glossary-section-title{font-size:14px;font-weight:800;color:var(--gold);margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);letter-spacing:.02em}
.glossary-section-title:first-of-type{margin-top:0}
/* Inline woordenlijst in route / tank-gids (native title-tooltip) */
.boss-desc .glossary-term,.vr-desc .glossary-term,.tank-pull-note .glossary-term,.tank-pull-interrupts .glossary-term{
cursor:help;border-bottom:1px dashed var(--gold2);text-decoration:none;color:inherit
}
.tank-pull-interrupts-must{
background:var(--danger-red);border:1px solid var(--danger-red-border);border-radius:8px;padding:8px 10px;margin-top:8px;line-height:1.5
}
.tank-pull-interrupts-must strong{color:#ffb4b4}
.tank-pull-interrupts-must .interrupt-danger{display:inline;line-height:inherit;text-transform:none;font-weight:800}
.tank-pull-interrupts-must .interrupt-danger .glossary-term{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.glossary-arrow{font-size:13px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.glossary-item.open .glossary-arrow{transform:rotate(90deg)}
.glossary-def{display:none;padding:0 16px 14px;font-size:14px;color:var(--text);line-height:1.6;border-top:1px solid var(--border)}
.glossary-item.open .glossary-def{display:block}
.glossary-intro{background:var(--deep);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:13px;color:var(--muted);line-height:1.6}
.g-tip{border-bottom:1px dashed var(--gold);color:var(--gold);cursor:help;font-weight:700}
.g-tip-box{display:none;position:fixed;z-index:9999;max-width:300px;background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:10px 13px;font-size:13px;color:var(--text);line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.55);pointer-events:none}
.g-tip-box.show{display:block}
@media(max-width:600px){.g-tip-box{max-width:calc(100vw - 24px)}}
.raid-card{background:var(--panel);border:1px solid rgba(167,139,250,.3);border-left:3px solid #a78bfa;border-radius:12px;padding:16px;margin-bottom:12px;cursor:pointer;transition:all .2s}
.raid-card:hover{border-color:#a78bfa;transform:translateY(-2px);box-shadow:0 8px 24px rgba(167,139,250,.15)}
.raid-card-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.raid-card-icon{font-size:24px}
.raid-card-name{font-size:17px;font-weight:800;color:var(--text)}
.raid-card-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.raid-card-bosses{display:flex;flex-wrap:wrap;gap:4px}
.raid-boss-chip{background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.3);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;color:#a78bfa}
.raids-hero{background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(99,102,241,.1));border:1px solid rgba(167,139,250,.3);border-radius:16px;padding:20px;margin-bottom:20px;text-align:center}
.raids-hero-title{font-size:22px;font-weight:900;color:var(--text);margin-bottom:4px}
.raids-hero-sub{color:var(--muted);font-size:13px}
.raid-coming-soon{opacity:.5;cursor:default}
.raid-coming-soon:hover{transform:none;box-shadow:none}
.affix-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.affix-level-badge{display:inline-block;background:var(--gold);color:#000;font-weight:800;font-size:11px;border-radius:8px;padding:2px 8px;margin-bottom:8px}
.affix-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.affix-icon{font-size:24px}
.affix-name{font-size:18px;font-weight:800;color:var(--text)}
.affix-type-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;text-transform:uppercase}
.affix-type-badge.new,.affix-type-badge.ny,.affix-type-badge.nieuw{background:#4ade80;color:#000}
.affix-type-badge.rotating,.affix-type-badge.roterend,.affix-type-badge.roterende{background:#a78bfa;color:#000}
.affix-type-badge.weekly,.affix-type-badge.wekelijks,.affix-type-badge.ugentlig{background:#f97316;color:#000}
.affix-type-badge.hard,.affix-type-badge.zwaar,.affix-type-badge.svaer{background:#ef4444;color:#fff}
.affix-type-badge.punish,.affix-type-badge.straf{background:#7f1d1d;color:#fff}
.affix-type-badge.seasonal{background:linear-gradient(135deg,#c9a227,#e8c547);color:#000;box-shadow:0 0 12px rgba(201,162,39,.5)}
.affix-what{color:var(--text);margin-bottom:8px;line-height:1.5}
.affix-how{color:var(--muted);font-size:13px;margin-bottom:8px;padding-left:12px;border-left:2px solid var(--gold);line-height:1.5}
.affix-tip{background:rgba(255,204,0,.1);border:1px solid var(--gold);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text);margin-top:8px}
.affix-variants{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.affix-variant{background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.25);border-radius:10px;padding:12px}
.affix-variant-header{font-weight:800;font-size:15px;color:#a78bfa;margin-bottom:6px}
.affix-variant-what{color:var(--text);font-size:13px;margin-bottom:6px;line-height:1.5}
.affix-variant-how{color:var(--muted);font-size:12px;padding-left:10px;border-left:2px solid #a78bfa;line-height:1.5}
.affix-week1-block{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:24px}
.affix-week1-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px}
.affix-week1-sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.affix-week1-list{display:flex;flex-direction:column;gap:12px}
.affix-week1-item{background:rgba(0,0,0,.2);border:1px solid var(--border);border-left-width:4px;border-radius:10px;padding:14px}
.affix-week1-item.seasonal-glow{box-shadow:0 0 20px rgba(201,162,39,.25);border-left-color:#c9a227}
.affix-week1-level{display:inline-block;background:var(--gold);color:#000;font-weight:800;font-size:11px;border-radius:6px;padding:2px 6px;margin-right:10px}
.affix-week1-icon{font-size:20px;margin-right:8px}
.affix-week1-name{font-weight:800;font-size:15px;color:var(--text);margin-right:8px}
.affix-week1-what{color:var(--text);font-size:13px;margin-top:8px;line-height:1.5}
.affix-week1-warning{background:rgba(239,68,68,.15);border:1px solid #ef4444;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:700;color:#ef4444;margin-top:8px}
.affixes-hero{background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(99,102,241,.1));border:1px solid rgba(167,139,250,.3);border-radius:16px;padding:20px;margin-bottom:20px;text-align:center}
.affixes-hero-title{font-size:22px;font-weight:900;color:var(--text);margin-bottom:4px}
.affixes-hero-sub{color:var(--muted);font-size:13px}
/* ── DELVES SCREEN (screenshot design) ── */
#delves-screen{display:none}
.delves-screen-outer{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 24px 48px}
.delves-content-wrap{padding-top:12px;padding-bottom:48px;max-width:100%;margin:0 auto}
.delves-vault-theme .delves-section-title{color:#7ee8ff;text-shadow:0 0 18px rgba(0,210,255,.25)}
.delves-vault-theme .delves-bountiful-banner{border-radius:var(--immersive-card-radius);border:1px solid rgba(0,210,255,.22);background:linear-gradient(180deg,rgba(0,40,55,.5) 0%,rgba(5,8,14,.4) 100%);box-shadow:inset 0 0 60px rgba(0,210,255,.06)}
.immersive-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--grid-gap-immersive)}
@media(max-width:480px){.immersive-card-grid{grid-template-columns:1fr;gap:var(--grid-gap-immersive)}}
.delves-card-grid{margin-top:4px}
.delves-spotlight-callout{font-size:13px;line-height:1.55;color:rgba(224,242,254,.92);margin:12px 0 14px;padding:12px 14px;border-radius:12px;background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.38);box-shadow:0 0 20px rgba(240,180,41,.08)}
.delves-spotlight-callout strong{color:#fde68a;font-weight:800}
body.light .delves-spotlight-callout{color:#0c4a6e;background:rgba(254,243,199,.55);border-color:rgba(180,140,40,.4)}
body.light .delves-spotlight-callout strong{color:#92400e}
.delves-vault-card{position:relative;border-radius:var(--immersive-card-radius);border:1px solid rgba(0,210,255,.35);background:rgba(2,8,14,.9);cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .25s,border-color .2s,outline-color .2s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(0,210,255,.1)}
.delves-vault-card:hover{border-color:rgba(0,210,255,.65);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 24px rgba(0,210,255,.15)}
.delves-vault-card--spotlight{outline:2px solid rgba(240,180,41,.78);outline-offset:3px}
.delves-vault-card--spotlight:hover{outline-color:rgba(255,224,150,.95)}
body.light .delves-vault-card--spotlight{outline-color:rgba(180,130,40,.72)}
.delves-vault-card--bountiful{border-color:rgba(240,180,41,.55);animation:delve-vault-bountiful-pulse 2.6s ease-in-out infinite}
@keyframes delve-vault-bountiful-pulse{0%,100%{border-color:rgba(240,180,41,.45);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(240,180,41,.2),0 0 18px rgba(0,210,255,.1)}50%{border-color:rgba(255,210,120,.95);box-shadow:0 8px 36px rgba(0,0,0,.45),0 0 0 2px rgba(240,180,41,.75),0 0 36px rgba(240,180,41,.45),0 0 28px rgba(0,210,255,.22)}}
.delves-vault-card-bg{position:absolute;inset:0;pointer-events:none;opacity:.28;background:repeating-linear-gradient(90deg,transparent,transparent 12px,rgba(0,210,255,.06) 12px,rgba(0,210,255,.06) 13px),linear-gradient(165deg,rgba(0,28,40,.96) 0%,rgba(4,6,12,.95) 45%,rgba(6,10,18,.93) 100%),radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,210,255,.22),transparent 58%)}
.delves-vault-card-inner{position:relative;z-index:2;padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.delves-vault-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:28px}
.delves-bountiful-pill{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(139,92,246,.35),rgba(240,180,41,.25));border:1px solid rgba(240,180,41,.45);color:#fef3c7}
.delves-spotlight-pill{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(250,204,21,.35),rgba(245,158,11,.22));border:1px solid rgba(251,191,36,.55);color:#fffbeb;box-shadow:0 0 12px rgba(251,191,36,.2)}
body.light .delves-spotlight-pill{color:#78350f;border-color:rgba(180,130,40,.5);background:linear-gradient(90deg,rgba(250,204,21,.4),rgba(253,230,138,.35))}
.delves-vault-name{font-size:16px;font-weight:900;color:#e0f7ff;margin:0;line-height:1.25;text-shadow:0 0 14px rgba(0,210,255,.2)}
.delves-vault-zone{font-size:12px;color:rgba(186,230,253,.75);margin:0;line-height:1.4}
.delves-vault-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.delves-vault-badge{font-size:10px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(0,210,255,.1);border:1px solid rgba(0,210,255,.35);color:#a5f3fc}
.delves-vault-badge-tier{color:#e0f7ff;border-color:rgba(0,210,255,.5);background:rgba(0,210,255,.14)}
.delves-vault-badge-reward{color:#fef9c3;border-color:rgba(240,180,41,.45);background:rgba(240,180,41,.12)}
.delves-vault-subband{font-size:10px;font-weight:600;color:rgba(186,230,253,.55);margin:0;line-height:1.35}
.delves-way-copy-btn{margin-top:6px;width:100%;min-height:48px;padding:12px 16px;font-size:14px;font-weight:800;font-family:inherit;border-radius:12px;border:2px solid rgba(0,210,255,.55);background:linear-gradient(180deg,rgba(0,210,255,.22),rgba(0,120,160,.2));color:#ecfeff;cursor:pointer;transition:background .2s,transform .15s,border-color .2s;box-shadow:0 4px 16px rgba(0,210,255,.15)}
.delves-way-copy-btn:hover{background:linear-gradient(180deg,rgba(0,210,255,.35),rgba(0,140,180,.28));border-color:rgba(0,210,255,.85)}
.delves-way-copy-btn:active{transform:scale(.98)}
.delve-card-actions{margin-top:4px}
body.light .delves-vault-card{background:rgba(255,255,255,.94);border-color:rgba(14,165,233,.38);box-shadow:0 8px 28px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9)}
body.light .delves-vault-name{color:#0c4a6e;text-shadow:none}
body.light .delves-vault-subband{color:rgba(12,74,110,.65)}
body.light .delves-vault-theme .delves-section-title{color:#0369a1;text-shadow:none}
body.light .delves-vault-theme .delves-bountiful-banner{background:linear-gradient(180deg,rgba(224,242,254,.92),rgba(248,250,252,.88));border-color:rgba(14,165,233,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 20px rgba(0,0,0,.05)}
body.light .delves-vault-card-bg{opacity:.35;background:linear-gradient(165deg,rgba(224,242,254,.55) 0%,rgba(241,245,249,.35) 100%),radial-gradient(ellipse 90% 55% at 50% 0%,rgba(14,165,233,.2),transparent 60%)}
body.light .delves-vault-zone{color:rgba(12,74,110,.78)}
body.light .delves-vault-badge{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.32);color:#0e7490}
body.light .delves-vault-badge-tier{color:#0c4a6e;border-color:rgba(14,165,233,.4);background:rgba(224,242,254,.6)}
body.light .delves-vault-badge-reward{color:#854d0e;border-color:rgba(180,140,40,.4);background:rgba(254,243,199,.5)}
body.light .delves-way-copy-btn{border-color:rgba(14,165,233,.45);background:linear-gradient(180deg,rgba(224,242,254,.98),rgba(186,230,253,.55));color:#0c4a6e;box-shadow:0 4px 14px rgba(0,0,0,.07)}
body.light .delves-way-copy-btn:hover{border-color:rgba(14,165,233,.65);background:linear-gradient(180deg,rgba(186,230,253,.95),rgba(125,211,252,.55))}
body.light .delves-bountiful-pill{color:#422006;border-color:rgba(180,140,40,.45);background:linear-gradient(90deg,rgba(167,139,246,.22),rgba(250,204,21,.18))}
body.light .delves-key-info{background:linear-gradient(135deg,rgba(224,242,254,.95),rgba(219,234,254,.88));border-color:rgba(14,165,233,.38)}
body.light .delves-key-info-content strong{color:#1d4ed8}
body.light .delves-bountiful-daily-btn{color:#5b21b6;border-color:rgba(124,58,237,.38);background:rgba(237,233,254,.95);box-shadow:none}
body.light .delves-bountiful-daily-btn:hover{background:rgba(221,214,254,.95)}
body.light .delves-bountiful-vault-btn{background:rgba(250,204,21,.14);border-color:rgba(180,140,40,.4)}
body.light .delves-bountiful-status-ok{color:#15803d}
body.light .delves-bountiful-status-warn{color:#b45309}
body.light .delves-daily-countdown{color:var(--gold)}
body.light .delves-bountiful-roles-note{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--muted)}
body.light .delves-list-table-wrap{border-color:rgba(14,165,233,.25);background:var(--panel)}
body.light .delves-list-table th{background:rgba(14,165,233,.1);color:#0369a1;border-bottom-color:rgba(14,165,233,.22)}
.delves-section-title{font-size:16px;font-weight:800;color:var(--gold);margin-bottom:6px;margin-top:24px}
.delves-section-sub{font-size:13px;color:var(--muted);margin-bottom:14px}
.delves-section-hint{font-size:12px;color:var(--muted);margin-top:-8px;margin-bottom:12px}
.delves-bountiful-banner{margin-top:0;margin-bottom:20px;border-radius:12px;overflow:hidden;max-width:100%;padding:12px 14px 14px}
.delves-bountiful-status{font-size:12px;line-height:1.45;margin:0 auto 6px;max-width:800px;padding:0 8px;text-align:center}
.delves-bountiful-status-ok{color:#86efac}
.delves-bountiful-status-warn{color:#fbbf24}
.delves-live-reset-meta{font-size:11px;line-height:1.4;margin:4px auto 0;max-width:800px;padding:0 10px;text-align:center;color:var(--muted)}
body.light .delves-live-reset-meta{color:#64748b}
.prey-live-reset-banner{margin-top:4px}
.delves-daily-keys-summary{font-size:12px;font-weight:700;color:#e9d5ff;text-align:center;margin:10px auto 4px;max-width:800px;padding:0 8px;text-shadow:0 0 12px rgba(167,139,250,.35)}
.delves-daily-countdown{font-size:12px;font-weight:600;color:var(--gold);text-align:center;margin:0 auto 6px;max-width:800px;padding:0 8px 4px;font-variant-numeric:tabular-nums}
.delves-name-cell{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.delves-bountiful-chest{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0}
.delves-chest-icon{font-size:18px;line-height:1;filter:drop-shadow(0 0 6px rgba(240,180,41,.65));position:relative;z-index:1}
.delves-glimmer{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.45),transparent 55%);animation:delve-glimmer-pulse 2.2s ease-in-out infinite}
@keyframes delve-glimmer-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.95;transform:scale(1.08)}}
.delves-list-table tr.delve-row-bountiful{background:linear-gradient(90deg,rgba(139,92,246,.16),rgba(201,162,39,.1) 42%,transparent 78%);animation:delve-bountiful-glow 2.8s ease-in-out infinite}
@keyframes delve-bountiful-glow{0%,100%{box-shadow:inset 0 0 0 1px rgba(167,139,250,.22),inset 4px 0 22px -10px rgba(139,92,246,.18)}50%{box-shadow:inset 0 0 0 1px rgba(201,162,39,.4),inset 4px 0 30px -8px rgba(201,162,39,.25)}}
.delves-row-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.delves-bountiful-daily-btn{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:6px;border:1px solid rgba(167,139,250,.55);background:rgba(139,92,246,.18);color:#e9d5ff;cursor:pointer;flex-shrink:0;box-shadow:0 0 10px rgba(139,92,246,.2)}
.delves-bountiful-daily-btn:hover{background:rgba(167,139,250,.28);border-color:#c4b5fd}
.delves-bountiful-daily-btn.is-done{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.55);color:#86efac;box-shadow:0 0 8px rgba(74,222,128,.15)}
.delves-bountiful-vault-btn{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;border:1px solid rgba(240,180,41,.5);background:rgba(240,180,41,.12);color:var(--gold);cursor:pointer;flex-shrink:0}
.delves-bountiful-vault-btn:hover{background:rgba(240,180,41,.22);border-color:var(--gold)}
.delves-bountiful-vault-btn.is-done{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.5);color:#86efac}
.delves-list-table-wrap{overflow-x:auto;border:1px solid rgba(79,142,247,.4);border-radius:12px;background:var(--deep);margin-bottom:8px}
.delves-list-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.delves-list-table th{background:rgba(79,142,247,.15);color:#69ccf0;font-weight:800;padding:8px;text-align:left;border-bottom:1px solid rgba(79,142,247,.3)}
.delves-list-table td{padding:8px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.delves-list-table th:first-child{width:44%}
.delves-list-table th:last-child{width:56%}
.delves-zone-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.delves-zone-text{flex:1;min-width:0;max-width:min(100%,300px);color:var(--muted);font-size:13px;line-height:1.45;word-wrap:break-word}
.delves-way-actions{flex-shrink:0;margin-left:auto;text-align:right}
.delves-list-table tbody tr:last-child td{border-bottom:none}
.delves-list-table tbody tr:hover{background:rgba(255,255,255,.03)}
.delves-delve-link{font-weight:700;font-size:15px;color:var(--gold);text-decoration:none}
.delves-delve-link:hover{color:var(--gold2);text-decoration:underline}
.delves-zone-cell{font-size:13px;color:var(--muted)}
.delves-key-info{background:linear-gradient(135deg,rgba(79,142,247,.12),rgba(31,111,235,.08));border:2px solid rgba(79,142,247,.5);border-radius:12px;padding:16px 20px;margin:24px 0;display:flex;align-items:flex-start;gap:14px}
/* Vaste tegel: zonder dit groeit een lege Wowhead-placeholder op mobiel tot een groot leeg vlak */
.delves-key-info-icon{
flex:0 0 48px;width:48px;min-width:48px;max-width:48px;height:48px;max-height:48px;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
font-size:1.75rem;line-height:1;text-decoration:none;box-sizing:border-box;
}
.delves-key-info-fallback{display:block;font-style:normal;pointer-events:none}
.delves-key-info-content{flex:1;min-width:0;font-size:15px;color:var(--text);line-height:1.55}
.delves-key-info-content strong{color:var(--accent)}
.delves-loot-table-wrap{overflow-x:auto;border:1px solid rgba(240,180,41,.4);border-radius:12px;background:var(--deep)}
.delves-loot-table-wrap--glass{
border-radius:var(--immersive-card-radius);
border:1px solid rgba(0,210,255,.22);
background:rgba(6,10,20,.5);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
}
.delves-loot-farm-caption,.delves-loot-gv-hero-note{font-size:12px;line-height:1.5;color:rgba(186,230,253,.85);margin:0 0 8px;max-width:720px}
.delves-loot-gv-hero-note{color:rgba(240,200,120,.9);margin-bottom:12px}
body.light .delves-loot-farm-caption,body.light .delves-loot-gv-hero-note{color:var(--muted)}
.delves-loot-table{width:100%;border-collapse:collapse;font-size:14px}
.delves-loot-table--glass th{background:rgba(0,210,255,.1);color:#e0f7ff;border-bottom:1px solid rgba(0,210,255,.28)}
.delves-loot-table th{background:rgba(240,180,41,.15);color:var(--gold);font-weight:800;padding:8px;text-align:left;border-bottom:1px solid rgba(240,180,41,.3);vertical-align:top}
.delves-loot-table td{padding:8px;vertical-align:top;border-bottom:1px solid var(--border);color:var(--text)}
.delves-loot-table tbody tr:last-child td{border-bottom:none}
.delves-loot-table tbody tr:hover{background:rgba(255,255,255,.03)}
.delves-loot-row--farm-tier td{
background:linear-gradient(90deg,rgba(201,162,39,.28),rgba(240,180,41,.14) 45%,rgba(201,162,39,.12));
color:var(--gold2);
font-weight:800;
border-bottom-color:rgba(240,180,41,.35);
box-shadow:inset 0 0 0 1px rgba(240,180,41,.25);
}
.delves-loot-row--farm-tier:hover td{background:linear-gradient(90deg,rgba(201,162,39,.34),rgba(240,180,41,.2) 45%,rgba(201,162,39,.16))}
body.light .delves-loot-table-wrap--glass{background:rgba(255,255,255,.72);border-color:rgba(14,165,233,.3)}
body.light .delves-loot-table--glass th{background:rgba(14,165,233,.12);color:#0c4a6e}
body.light .delves-loot-row--farm-tier td{color:#6b5410}
.delves-icon-link{display:inline-flex;align-items:center;gap:6px;color:var(--gold);text-decoration:none}
.delves-icon-link:hover{color:var(--gold);text-decoration:underline}
.delves-card-icon a,.delves-hero-icon,.delves-tab-icon{display:inline-flex;align-items:center}
.delves-card-icon .wh-link,.landing-card-icon .wh-link{font-size:0}
.delves-ilvl-gold{color:var(--gold) !important;font-weight:700}
/* ── PREY SCREEN ── */
#prey-screen{display:none}
.prey-bounty-board-section{margin-top:4px}
.prey-screen-shell{width:100%;max-width:var(--content-max);margin:0 auto;padding:20px 24px 48px}
.prey-guide-panel{
padding:20px;border-radius:var(--immersive-card-radius);margin-top:10px;color:var(--text);
border:1px solid rgba(138,43,226,.38);
background:rgba(8,4,18,.35);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
box-shadow:0 8px 32px rgba(0,0,0,.35),0 0 48px rgba(138,43,226,.12),inset 0 1px 0 rgba(255,255,255,.05);
}
body.light .prey-guide-panel{background:rgba(255,255,255,.82);border-color:rgba(138,43,226,.28)}
.prey-section{margin-bottom:28px}
.prey-section-title{font-size:18px;font-weight:800;color:var(--gold);margin-bottom:14px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.prey-card{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:12px}
body.light .prey-card{background:rgba(0,0,0,.04)}
.prey-card p{margin:0 0 10px;font-size:14px;color:var(--text);line-height:1.6}
.prey-card p:last-child{margin-bottom:0}
.prey-way{margin:10px 8px 6px 0;display:inline-block;max-width:100%;box-sizing:border-box}
.prey-card .kp-way-code,.prey-card .prey-way{margin:10px 4px 8px 0}
.prey-step-label{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:8px}
.prey-loop-list{margin:0;padding-left:20px;font-size:14px;color:var(--text);line-height:1.7}
.prey-loop-list li{margin-bottom:8px}
.prey-highlight-box{background:rgba(200,168,75,.1);border:1px solid rgba(200,168,75,.35);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:16px;margin-bottom:12px}
.prey-highlight-box p{margin:0 0 8px;font-size:14px;color:var(--text);line-height:1.6}
.prey-highlight-box p:last-child{margin-bottom:0}
.prey-diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.prey-diff-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px}
.prey-diff-card.diff-normal{border-left:4px solid #4ade80}
.prey-diff-card.diff-hard{border-left:4px solid #fbbf24}
.prey-diff-card.diff-nightmare{border-left:4px solid #ef4444}
.prey-diff-badge{font-size:13px;font-weight:700;margin-bottom:6px;display:block}
.prey-diff-card p{margin:0;font-size:13px;color:var(--text);line-height:1.5}
.prey-rewards-list{margin-bottom:16px}
.prey-rewards-list p{margin:0 0 8px;font-size:14px;color:var(--text)}
.prey-tooltip-term{border-bottom:1px dashed var(--gold);color:var(--gold);cursor:help;font-weight:600}
.prey-affix-heading{font-size:14px;font-weight:800;color:var(--accent);margin:16px 0 10px}
.prey-affix-list{list-style:none;padding:0;margin:0}
.prey-affix-item{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:12px 14px;margin-bottom:10px;font-size:14px;color:var(--text);line-height:1.5}
.prey-targets-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--deep)}
.prey-targets-table{width:100%;border-collapse:collapse}
.prey-targets-table td{padding:10px 14px;border-bottom:1px solid var(--border)}
.prey-targets-table thead th{padding:10px 14px;border-bottom:2px solid var(--border);font-size:12px;font-weight:800;color:var(--gold);text-align:left;text-transform:uppercase;letter-spacing:.04em;background:rgba(0,0,0,.25)}
body.light .prey-targets-table thead th{background:rgba(0,0,0,.06)}
.prey-roster-col-status{min-width:120px;white-space:nowrap}
.prey-roster-col-threat{width:1%;white-space:nowrap;text-align:center;font-weight:700;color:var(--muted)}
.prey-roster-row--active td:first-child{box-shadow:inset 3px 0 0 #4ade80}
.prey-roster-name-btn{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.prey-roster-name-btn.prey-target-link{text-decoration:none}
.prey-roster-name-btn.prey-target-link:hover{text-decoration:underline}
.prey-roster-name-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.prey-status-pill{display:inline-block;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;line-height:1.25}
.prey-status-pill--active{background:rgba(74,222,128,.18);color:#86efac;border:1px solid rgba(74,222,128,.45)}
.prey-status-pill--inactive{background:rgba(0,0,0,.2);color:var(--muted);border:1px solid var(--border)}
.prey-status-pill--unknown{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.35)}
body.light .prey-status-pill--active{color:#15803d;border-color:rgba(21,128,61,.4);background:rgba(74,222,128,.2)}
body.light .prey-status-pill--inactive{color:var(--muted)}
body.light .prey-status-pill--unknown{color:#b45309}
.prey-target-link{font-weight:700;color:var(--gold);cursor:pointer}
.prey-target-link:hover{color:var(--gold2);text-decoration:underline}
.prey-weekly-box{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:14px 18px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px 28px}
@media (min-width:520px){.prey-weekly-box{flex-wrap:nowrap;gap:0 32px}}
body.light .prey-weekly-box{background:rgba(0,0,0,.04)}
.prey-check-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer}
.prey-check-item input{accent-color:var(--gold);cursor:pointer}
.prey-reset-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-size:13px;padding:8px 14px;border-radius:8px;cursor:pointer;margin-left:auto;flex-shrink:0}
.prey-reset-btn:hover{border-color:var(--gold);color:var(--gold)}
.prey-spotlight{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(201,162,39,.1));border:1px solid rgba(167,139,250,.45);border-radius:var(--immersive-card-radius);padding:16px 18px;margin-bottom:20px}
.prey-spotlight--bounty{border:2px solid rgba(138,43,226,.45);background:linear-gradient(145deg,rgba(30,15,45,.9) 0%,rgba(12,8,20,.88) 100%),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(138,43,226,.04) 2px,rgba(138,43,226,.04) 3px);box-shadow:0 8px 28px rgba(138,43,226,.15),inset 0 0 0 1px rgba(138,43,226,.12)}
.prey-bounty-wanted-tag{font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--prey-void-purple);text-transform:uppercase;margin-bottom:6px;text-shadow:0 0 12px rgba(138,43,226,.4)}
.prey-bounty-skulls{display:flex;flex-wrap:wrap;gap:3px 5px;font-size:15px;line-height:1;margin:4px 0 2px}
.prey-skull{display:inline-block;transition:opacity .2s,filter .2s,transform .2s}
.prey-skull--on.prey-skull--mid{opacity:1;filter:drop-shadow(0 0 8px rgba(234,179,8,.8))}
.prey-skull--on.prey-skull--high{opacity:1;filter:drop-shadow(0 0 10px rgba(239,68,68,.9))}
.prey-skull--off{opacity:.22;filter:grayscale(1)}
.prey-bounty-reward-line{font-size:12px;font-weight:700;color:#e9d5ff;border-left:3px solid var(--prey-void-purple);padding-left:10px;margin:6px 0;line-height:1.4}
.prey-bounty-nightmare-ilvl{font-size:12px;font-weight:800;color:#fca5a5;letter-spacing:.02em;margin:2px 0 6px;padding-left:10px;line-height:1.35;border-left:3px solid rgba(220,38,38,.45)}
.prey-bounty-ilvl-split{white-space:normal;word-break:break-word}
.prey-today-banner{margin-bottom:4px}
.prey-today-status{font-size:12px;line-height:1.45;margin:0 auto 8px;max-width:800px;padding:0 8px;text-align:center}
.prey-today-status--ok{color:#86efac}
.prey-today-status--warn{color:#fbbf24}
.prey-today-status-sub{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-weight:500}
body.light .prey-today-status--ok{color:#15803d}
body.light .prey-today-status--warn{color:#b45309}
.prey-reset-countdown{text-align:center;font-size:13px;font-weight:700;color:#a335ee;text-shadow:0 0 10px rgba(163,53,238,.55);margin:-4px 0 14px;letter-spacing:.02em}
body.light .prey-reset-countdown{color:#7c3aed;text-shadow:0 0 8px rgba(124,58,237,.35)}
.prey-bounty-reward-line.prey-reward-epic{color:#a335ee !important;text-shadow:0 0 8px rgba(163,53,238,.45);border-left-color:rgba(163,53,238,.55) !important}
body.light .prey-bounty-reward-line.prey-reward-epic{color:#7c3aed !important;text-shadow:0 0 6px rgba(124,58,237,.3)}
#prey-detail-modal .prey-crafting-li .wh-link-item.bis-wowhead-track,
#prey-detail-modal .prey-craft-link.prey-reward-wowhead-link{color:#a335ee !important;text-shadow:0 0 8px rgba(163,53,238,.4);font-weight:800;background:none;border:none;cursor:pointer;font:inherit;text-align:left;padding:0;text-decoration:underline;text-underline-offset:2px}
body.light #prey-detail-modal .prey-craft-link.prey-reward-wowhead-link{color:#7c3aed !important}
body.light .prey-bounty-nightmare-ilvl{color:#b91c1c;border-left-color:rgba(185,28,28,.4)}
.prey-spotlight-badge{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.prey-spotlight-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.prey-spotlight-name{font-size:20px;font-weight:800;color:var(--gold);line-height:1.2}
.prey-spotlight-loc{font-size:13px;color:var(--muted);margin-top:4px}
.prey-spotlight-meter-wrap{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;width:100%}
.prey-spotlight-meter-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.prey-spotlight-threat{font-size:12px;font-weight:800;color:var(--text)}
.prey-spotlight-btn{background:var(--gold);color:#000;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:800;cursor:pointer;flex-shrink:0}
.prey-spotlight-btn:hover{filter:brightness(1.08)}
.prey-targets-progress-section .prey-targets-progress-sub{font-size:13px;color:var(--muted);margin:-6px 0 10px;line-height:1.5}
.prey-ilvl-note{color:var(--gold2);font-weight:600}
.prey-ilvl-pill{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:6px;background:rgba(201,162,39,.15);font-size:11px;font-weight:800;color:var(--gold)}
.prey-danger-track{height:8px;background:var(--deep);border-radius:999px;overflow:hidden;border:1px solid var(--border);flex:1;min-width:80px;max-width:220px}
.prey-danger-track-lg{max-width:none;height:10px}
.prey-spotlight-meter-wrap .prey-danger-track-lg{max-width:280px;flex:1 1 auto;min-width:100px}
.prey-danger-track-global{max-width:none;height:12px;margin-top:4px}
.prey-danger-fill{height:100%;min-width:0;border-radius:999px;transition:width .35s ease;background:linear-gradient(90deg,#22c55e,#eab308,#f97316,#ef4444)}
.prey-danger-fill-1,.prey-danger-fill-2{opacity:.85}
.prey-danger-fill-global{background:linear-gradient(90deg,rgba(201,162,39,.5),var(--gold));box-shadow:0 0 12px rgba(201,162,39,.25)}
.prey-target-cards{gap:var(--grid-gap-immersive)}
.prey-target-card-wrap{display:flex;flex-direction:column;gap:8px}
.prey-bounty-card{position:relative;background:linear-gradient(165deg,rgba(35,20,55,.88) 0%,rgba(10,8,16,.85) 55%,rgba(18,12,28,.82) 100%);border:2px solid rgba(138,43,226,.4);border-radius:var(--immersive-card-radius);padding:0;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .2s,filter .35s ease;flex:1;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 0 0 1px rgba(201,162,39,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.prey-bounty-card:hover{border-color:rgba(138,43,226,.75);box-shadow:0 10px 32px rgba(138,43,226,.2),0 0 20px rgba(138,43,226,.12)}
.prey-bounty-card__art{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:filter .35s ease,opacity .35s ease}
.prey-bounty-card__art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.36;display:block}
.prey-bounty-card__glass{position:relative;z-index:1;padding:14px 14px 12px}
.prey-target-done{filter:saturate(0.12) brightness(.92);border-color:rgba(74,222,128,.5);opacity:.92}
.prey-target-done .prey-bounty-card__art-img{opacity:.14}
.prey-target-card-name{font-weight:900;font-size:16px;color:var(--gold2);margin-bottom:4px;line-height:1.25;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.prey-target-card-zone{font-size:12px;color:var(--muted);margin-bottom:6px}
.prey-target-card-meter{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;margin-top:8px;width:100%}
.prey-card-meter-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.prey-target-card-meter .prey-danger-track{flex:1 1 auto;max-width:200px;min-width:72px}
.prey-card-threat{font-size:11px;font-weight:800;color:var(--text)}
.prey-way-copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:14px 16px;margin:0;font-size:15px;font-weight:800;font-family:inherit;border:none;border-radius:0 0 calc(var(--immersive-card-radius) - 3px) calc(var(--immersive-card-radius) - 3px);background:linear-gradient(180deg,rgba(138,43,226,.45),rgba(88,28,135,.5));color:#faf5ff;border-top:1px solid rgba(138,43,226,.5);cursor:pointer;transition:background .2s,filter .15s;box-shadow:0 -4px 20px rgba(138,43,226,.15)}
.prey-way-copy-btn--bounty-primary{position:relative;z-index:2;border-radius:0 0 calc(var(--immersive-card-radius) - 3px) calc(var(--immersive-card-radius) - 3px);background:linear-gradient(180deg,#e8c84a,#9a7618);color:#1a0f05;border-top:1px solid rgba(255,255,255,.28);box-shadow:0 -6px 24px rgba(201,162,39,.35)}
.prey-way-copy-btn--bounty-primary:hover{background:linear-gradient(180deg,#f0d060,#b8860b);filter:brightness(1.06)}
.prey-way-copy-btn:hover:not(.prey-way-copy-btn--bounty-primary){background:linear-gradient(180deg,rgba(167,85,247,.55),rgba(109,40,217,.55));filter:brightness(1.05)}
.prey-way-copy-btn:active{filter:brightness(.95)}
.prey-way-copy-btn--block{border-radius:12px;border:2px solid rgba(138,43,226,.55);margin-top:12px}
.prey-card .prey-way-copy-btn--block{margin-top:0;border-radius:12px}
.prey-way-copy-btn--detail{margin-top:12px;border-radius:14px}
.prey-way-raw{font-size:11px;color:var(--muted);margin:8px 0 0;padding:8px 10px;background:var(--deep);border-radius:8px;border:1px solid var(--border);word-break:break-all}
.prey-killed-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer;padding:0 2px}
.prey-killed-label input{accent-color:var(--gold);cursor:pointer}
.prey-killed-label--tactical{align-items:center;gap:14px;padding:14px 16px;margin-top:2px;font-size:14px;font-weight:700;color:var(--text);background:rgba(0,0,0,.28);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s}
body.light .prey-killed-label--tactical{background:rgba(0,0,0,.05)}
.prey-killed-label--tactical:hover{border-color:rgba(201,162,39,.45)}
.prey-killed-label--tactical input{width:26px;height:26px;min-width:26px;min-height:26px;cursor:pointer;flex-shrink:0}
.prey-targets-hint{font-size:12px;color:var(--muted);margin-top:-8px;margin-bottom:12px}
.prey-detail-zone{font-size:14px;color:var(--muted);margin-bottom:16px}
.prey-detail-danger-block{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.prey-detail-danger-lbl{display:block;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.prey-detail-threat{display:block;font-size:12px;color:var(--text);margin-top:8px}
.prey-detail-danger-block .prey-danger-track{max-width:none}
.prey-role-tip-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:8px}
@media(min-width:520px){.prey-role-tip-grid{grid-template-columns:repeat(3,1fr)}}
.prey-role-tip{border:1px solid var(--border);border-radius:10px;padding:12px;font-size:13px;line-height:1.5;background:var(--deep)}
.prey-role-tip strong{display:block;margin-bottom:6px;font-size:12px}
.prey-role-tip p{margin:0;color:var(--text)}
.prey-role-tank{border-left:3px solid #5ba3e8}
.prey-role-heal{border-left:3px solid #9b7fd9}
.prey-role-dps{border-left:3px solid #e8556a}
.prey-loot-footnote{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}
.prey-detail-subtitle{font-size:14px;font-weight:800;color:var(--accent);margin:16px 0 8px}
.prey-detail-subtitle:first-of-type{margin-top:0}
.prey-detail-loot-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.prey-detail-loot-table th{text-align:left;padding:8px;background:rgba(201,162,39,.1);color:var(--gold);border:1px solid var(--border)}
.prey-detail-loot-table td{padding:8px;border:1px solid var(--border);color:var(--text)}
.prey-s1-rewards-table td:last-child{max-width:42ch;line-height:1.45;vertical-align:top}
.prey-crafting-heading{margin-top:18px}
.prey-crafting-list{list-style:none;padding:0;margin:0 0 12px;font-size:13px;line-height:1.55}
.prey-crafting-list li{margin-bottom:8px}
.prey-craft-link{display:inline;background:none;border:none;padding:0;font:inherit;color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:help;text-align:left}
.prey-craft-link:hover{color:var(--gold2)}
#prey-detail-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1200;align-items:flex-end;justify-content:center;padding:0}
#prey-detail-modal.open{display:flex}
#prey-detail-inner{background:var(--panel);border:1px solid var(--border);border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 40px rgba(0,0,0,.5)}
#prey-detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
#prey-detail-title{font-size:18px;font-weight:800;color:var(--gold)}
#prey-detail-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
#prey-detail-close:hover{color:var(--text)}
#prey-detail-content{padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
#prey-detail-content .kp-way-code,#prey-detail-content .prey-way{margin:12px 8px 8px 0;display:inline-block;max-width:calc(100% - 16px)}
#prey-detail-content .prey-way-copy-btn{display:flex;max-width:100%;box-sizing:border-box}
.specs-screen{display:none}
/* ==========================================================================
MIDNIGHT OVERHAUL (World of Warcraft Aesthetic)
========================================================================== */
/* 1. Deep Dark Textures & Backgrounds */
:root {
--bg-texture: url('data:image/svg+xml;utf8,');
--bg-texture-fine: url('data:image/svg+xml;utf8,');
--parchment-texture: url('data:image/svg+xml;utf8,');
--void-glow: 0 0 15px rgba(157, 114, 255, 0.4), 0 0 30px rgba(80, 48, 160, 0.2);
--void-glow-strong: 0 0 20px rgba(157, 114, 255, 0.7), 0 0 40px rgba(80, 48, 160, 0.5);
}
/* Alleen donker thema: eerdere body{ background: var(--bg) } geldt voor beide; deze laag mag licht thema niet overschrijven */
body:not(.light) {
background-color: #0a090d;
background-image: radial-gradient(ellipse 120% 85% at 50% -18%, rgba(26, 15, 46, 0.92) 0%, transparent 56%),
radial-gradient(ellipse 75% 50% at 100% 100%, rgba(26, 15, 46, 0.45) 0%, transparent 50%),
var(--bg-texture),
var(--bg-texture-fine);
background-attachment: fixed;
min-height: 100vh;
}
body.light {
background-color: var(--bg);
background-image: radial-gradient(ellipse 100% 60% at 50% -8%, rgba(200, 195, 235, 0.42) 0%, transparent 55%),
radial-gradient(ellipse 72% 48% at 100% 100%, rgba(210, 220, 240, 0.35) 0%, transparent 52%),
var(--bg-texture),
var(--bg-texture-fine);
background-attachment: fixed;
min-height: 100vh;
}
/* 2. Clean panels — no ornamental clutter */
.dungeon-card:not(.dungeon-card--immersive), .prof-card, .weekly-progress, .weekly-cat-header, .vr-card, .role-panel, .boss-card,
#spec-modal-inner, #pwa-modal-inner, #help-modal-inner, #about-modal-inner, .search-results, .wat-nu-panel, .mode-tabs, .prof-guide-container {
background-color: var(--panel);
border: 1px solid var(--border);
position: relative;
}
/* 3. Active tab — subtle highlight */
.mode-tab.active, .lang-btn.active {
background: var(--gold);
color: #000;
border-color: var(--gold);
}
.dungeon-card:hover, .prof-card:hover {
border-color: var(--gold);
box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
/* 5. Mode tabs — scrollable on mobile */
.mode-tabs {
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 8px 0;
}
.mode-tabs::-webkit-scrollbar { display: none; }
/* 6. Typography & Responsive Grid */
h1, h2, h3, h4, h5, h6, .card-name, .header-title, #pwa-modal-title, .boss-name {
font-family: 'Inter', sans-serif;
}
.hero-title {
font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
font-size: clamp(2rem, 6vw, 3.5rem);
line-height: 1.1;
}
.card-name {
font-size: clamp(1.1rem, 4vw, 1.4rem);
}
/* 7. Click Animations */
.dungeon-card, .prof-card, .btn, button, .mode-tab, .util-tab, .role-tab-btn {
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.dungeon-card:active, .prof-card:active, .btn:active, button:active, .mode-tab:active, .util-tab:active, .role-tab-btn:active {
transform: scale(0.95);
}
/* Fix grid for mobile */
@media(max-width: 480px) {
.dungeon-grid, .prof-grid {
grid-template-columns: 1fr;
}
}
.pdet-tabs-wrapper {
position: relative;
width: 100%;
margin-bottom: 12px;
}
.pdet-tabs-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 40px;
background: linear-gradient(to right, transparent, rgba(30, 15, 60, 0.95));
pointer-events: none;
border-radius: 0 12px 12px 0;
}
.pdet-tabs {
display: flex;
gap: 6px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 0; /* Wrapper handles margin */
}
.pdet-tabs::-webkit-scrollbar {
display: none;
}
.pdet-tab {
background: none;
border: none;
flex-shrink: 0;
white-space: nowrap;
padding: 8px 16px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
border-radius: 8px;
color: var(--muted);
transition: all .2s;
}
@media(max-width:480px) {
.pdet-tab {
font-size: 11px;
padding: 6px 12px;
}
}
@media(max-width:600px) {
.lang-btn {
padding: 2px 6px;
font-size: 14px;
border-radius: 8px;
}
.vr-container{padding:8px 0 8px 38px}
.vr-node{left:-32px;width:24px;height:24px;font-size:11px}
.vr-node.type-boss{width:28px;height:28px;left:-34px;font-size:13px;top:8px}
.vr-connector{left:-21px}
}
h1,h2,h3,h4{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-0.5px;color:var(--gold);margin:0}
.dash-widget-title.font-display,.header-logo.font-display,.dashboard-tagline{font-family:var(--font-display),Georgia,serif!important}
/* Wowhead links — cyan, behalve Mythic BiS / consumables (`.bis-wowhead-track` in index + wrapItem) */
a[href*="wowhead.com"]:not(.bis-wowhead-track) {
color: #00ccff !important;
text-decoration: none !important;
font-weight: 700;
transition: filter 0.2s, color 0.2s;
text-shadow: 0 0 8px rgba(0, 204, 255, 0.35);
}
a[href*="wowhead.com"]:not(.bis-wowhead-track):hover {
color: #66ddff !important;
filter: brightness(1.2);
text-decoration: underline !important;
text-shadow: 0 0 12px rgba(0, 204, 255, 0.5);
}
/* Floating pill nav — blur + gold rim (overrides shared .mode-tabs panel fill) */
.mode-tabs.mode-tabs-pill {
width: fit-content;
max-width: min(100%, calc(100vw - 24px));
margin: 0 auto;
background: rgba(8, 7, 12, 0.62) !important;
border: 1px solid rgba(212, 175, 55, 0.22) !important;
border-radius: 999px !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
padding: 6px 10px !important;
gap: 3px !important;
}
body.light .mode-tabs.mode-tabs-pill {
background: rgba(255, 255, 255, 0.78) !important;
border-color: rgba(122, 98, 24, 0.28) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.mode-tabs-pill .mode-tab {
border-radius: 999px;
padding: 7px 11px;
font-size: 11px;
}
@media (min-width: 900px) {
.mode-tabs-pill .mode-tab { font-size: 12px; padding: 8px 13px; }
}
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }