/* ============================================================
   Warframe Prime Tracker - Dark Theme
   ============================================================ */

/* --- Fonts (self-hosted) --- */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto/roboto-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto/roboto-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto/roboto-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto/roboto-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --wf-bg: #0d0d0d;
    --wf-surface: #1a1a2e;
    --wf-card: #16213e;
    --wf-card-hover: #1b2a4a;
    --wf-border: #2a2a4a;
    --wf-accent: #e2b714;
    --wf-accent-dim: #a8890f;
    --wf-text: #e0e0e0;
    --wf-text-dim: #a0a0a0;
    --wf-green: #4caf50;
    --wf-red: #f44336;
    --wf-orange: #ff9800;
    --wf-blue: #2196f3;
    /* Collection donut colors */
    --wf-coll-mastered: #e2b714;
    --wf-coll-owned: #8a7b3b;
    --wf-coll-missing: #3a3a5c;
    --wf-rarity-common: #cd7f32;
    --wf-rarity-uncommon: #c0c0c0;
    --wf-rarity-rare: #ffd700;
    --wf-rarity-legendary: #ff6dff;
    --wf-arcane: #b388ff;
    --wf-mod: #4fc3f7;
    --wf-header-bg: #0e0e1a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   DIAMOND CHECKBOX — universal component (.wf-dcb)
   Two SVG polygons: base (missing) + overlay (active, stroke-dashoffset)
   Active color via --dcb-color CSS variable.
   Sizes: default 22px, .wf-dcb-sm 16px, .wf-dcb-lg 28px
   ============================================================ */
.wf-dcb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.wf-dcb-sm { width: 16px; height: 16px; }
.wf-dcb-lg { width: 28px; height: 28px; }

.wf-dcb-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wf-dcb-base {
    fill: none;
    stroke: var(--wf-coll-missing);
    stroke-width: 1.2;
    stroke-linejoin: miter;
}

.wf-dcb-fill {
    fill: transparent;
    stroke: var(--dcb-color, var(--wf-green));
    stroke-width: 1.2;
    stroke-linejoin: miter;
    stroke-dasharray: 51;
    stroke-dashoffset: 51;
    /* Deactivate: fill disappears first (0.2s), then stroke rewinds (0.6s after 0.2s) */
    transition: fill 0.2s ease, stroke-dashoffset 0.6s ease-in 0.2s;
}

/* Activate: stroke runs first (0.6s), then fill fades in (0.3s after 0.6s) */
.active > .wf-dcb .wf-dcb-fill,
.completed .wf-dcb .wf-dcb-fill,
.unlocked .wf-dcb .wf-dcb-fill,
.wf-dcb.active .wf-dcb-fill,
:checked + .wf-dcb .wf-dcb-fill,
.wf-part-cb-label:has(input:checked) .wf-dcb .wf-dcb-fill {
    stroke-dashoffset: 0;
    fill: var(--dcb-color, var(--wf-green));
    transition: stroke-dashoffset 0.6s ease-out, fill 0.3s ease 0.6s;
}

/* Icon on top */
.wf-dcb-icon {
    position: relative;
    z-index: 1;
    font-size: 11px;
    line-height: 1;
    color: var(--wf-coll-missing);
    /* Deactivate: icon color resets immediately */
    transition: color 0.2s ease;
}

.wf-dcb-sm .wf-dcb-icon { font-size: 9px; }
.wf-dcb-lg .wf-dcb-icon { font-size: 14px; }

/* Activate icon — color changes with fill (0.6s delay) */
.active > .wf-dcb .wf-dcb-icon,
.completed .wf-dcb .wf-dcb-icon,
.unlocked .wf-dcb .wf-dcb-icon,
.wf-dcb.active .wf-dcb-icon,
:checked + .wf-dcb .wf-dcb-icon,
.wf-part-cb-label:has(input:checked) .wf-dcb .wf-dcb-icon {
    color: var(--wf-card);
    transition: color 0.3s ease 0.6s;
}

/* In modals the background is --wf-surface, not --wf-card */
.wf-modal-footer .active > .wf-dcb .wf-dcb-icon,
.wf-modal-footer .wf-dcb.active .wf-dcb-icon {
    color: var(--wf-surface);
}

/* Card action hover — show active color on outline + icon */
.wf-card-action:hover .wf-dcb-base {
    stroke: var(--dcb-color, var(--wf-green));
}
.wf-card-action:hover .wf-dcb-icon {
    color: var(--dcb-color, var(--wf-green));
}


html {
    scrollbar-gutter: stable;
}

body {
    background: var(--wf-bg);
    color: var(--wf-text);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    min-height: 100vh;
}

/* Hide toolbar + content until data is loaded; header stays visible */
body:not(.wf-ready) .wf-toolbar {
    opacity: 0;
}

/* Content visibility is handled by wf-content-hidden / wf-content-reveal + loading overlay */

/* Slide-in: left side from right, right side from left */
body:not(.wf-ready) .wf-filters,
body:not(.wf-ready) .wf-categories,
body:not(.wf-ready) .wf-stats {
    opacity: 0;
    transform: translateX(30px);
}

body:not(.wf-ready) .wf-toolbar-right > * {
    opacity: 0;
    transform: translateX(-30px);
}

.wf-filters,
.wf-categories,
.wf-stats {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.wf-toolbar-right > * {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.wf-toolbar {
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: top center;
}

/* Slide-out: toolbar moves up + fades */
.wf-toolbar.wf-toolbar-exit {
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
}

/* Slide-in starting position (set via JS, then removed to animate) */
.wf-toolbar.wf-toolbar-enter {
    transform: translateY(12px);
    opacity: 0;
    transition: none; /* no animation while setting start position */
    pointer-events: none;
}

/* Stagger: categories slightly after filters, stats after categories */
.wf-categories { transition-delay: 0.05s; }
.wf-stats { transition-delay: 0.1s; }
/* Stagger right side: sort, variant, visibility, search, view-toggle */
.wf-toolbar-right > :nth-child(1) { transition-delay: 0.04s; }
.wf-toolbar-right > :nth-child(2) { transition-delay: 0.08s; }
.wf-toolbar-right > :nth-child(3) { transition-delay: 0.12s; }
.wf-toolbar-right > :nth-child(4) { transition-delay: 0.16s; }
.wf-toolbar-right > :nth-child(5) { transition-delay: 0.20s; }


/* ============================================================
   Header
   ============================================================ */

.wf-sticky-header {
    position: sticky;
    top: 0;
    z-index: 102;
    background: var(--wf-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    width: calc(100% - 48px);
    border-radius: 0 0 15px 15px;
    border: 1px solid var(--wf-border);
    margin: 0 24px;
}

.wf-header {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--wf-header-bg);
}

.wf-header h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--wf-accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-header-logo {
    height: 1.2em;
    width: auto;
    border-radius: 3px;
}

.wf-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Language dropdown */
.wf-btn.wf-lang-btn {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    line-height: 16px;
    padding: 7px 10px;
    display: inline-block;
    background: none;
    border-color: transparent;
    opacity: 0.35;
    transition: opacity 0.2s, border-color 0.2s;
}
.wf-btn.wf-lang-btn:hover {
    background: var(--wf-card-hover);
    border-color: var(--wf-border);
    opacity: 1;
}

/* ============================================================
   Section Tabs (Arsenal / Arkana / Mods)
   ============================================================ */

/*
 * Tab container: sits at header bottom, bridging header ↔ toolbar.
 * Active tab takes toolbar bg, creating a seamless connection.
 */
.wf-section-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    align-self: flex-end;
    margin-bottom: -16px;
    position: relative;
    z-index: 1;
}

.wf-section-tab {
    background: none;
    border: none;
    color: var(--wf-text-dim);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 18px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, opacity 0.2s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.5;
    border-radius: 8px 8px 0 0;
}

.wf-section-tab:hover {
    opacity: 0.8;
    color: var(--wf-text);
    background: rgba(255, 255, 255, 0.04);
}

.wf-section-tab.active {
    background: var(--wf-surface);
    color: var(--wf-accent);
    opacity: 1;
    font-weight: 700;
}

/* ============================================================
   Mods Coming-Soon Placeholder
   ============================================================ */

.wf-mods-placeholder {
    padding: 120px 24px;
    text-align: center;
}

.wf-mods-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--wf-text-dim);
}

.wf-mods-coming-soon svg {
    opacity: 0.3;
    color: var(--wf-accent);
}

.wf-mods-coming-soon h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--wf-text);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wf-mods-coming-soon p {
    font-size: 16px;
    opacity: 0.5;
}

/* ============================================================
   Buttons
   ============================================================ */

.wf-btn {
    background: var(--wf-card);
    color: var(--wf-text);
    border: 1px solid var(--wf-border);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.wf-btn:hover {
    background: var(--wf-card-hover);
    border-color: var(--wf-accent);
}

.wf-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}

.wf-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.wf-btn-icon {
    padding: 6px;
    line-height: 0;
    background: none;
    border-color: transparent;
    opacity: 0.35;
    transition: opacity 0.2s, border-color 0.2s;
}

.wf-btn.wf-btn-icon:hover {
    background: none;
    border-color: var(--wf-border);
    opacity: 1;
}

.wf-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   Toolbar
   ============================================================ */

.wf-toolbar {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.45);
}

.wf-filters {
    display: flex;
    flex-shrink: 0;
}

.wf-categories {
    display: flex;
    padding-left: 12px;
    border-left: 1px solid var(--wf-border);
    flex-shrink: 0;
}

.wf-cat-icon {
    min-width: 32px;
    height: 32px;
    padding: 5px 8px;
    border: 1.5px solid var(--wf-border);
    margin-left: -1.5px;
    border-radius: 0;
    background: transparent;
    color: var(--wf-text-dim);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}

.wf-cat-icon.wf-cat-first {
    border-radius: 6px 0 0 6px;
    margin-left: 0;
}

.wf-cat-icon.wf-cat-last {
    border-radius: 0 6px 6px 0;
}

.wf-cat-icon svg {
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
}

.wf-cat-icon:hover {
    opacity: 0.7;
    border-color: var(--wf-accent-dim);
    color: var(--wf-text);
    z-index: 1;
}

.wf-cat-icon:active {
    transform: scale(0.92);
}
.wf-cat-icon.active {
    opacity: 1;
    border-color: var(--wf-accent);
    color: #000;
    background: var(--wf-accent);
    z-index: 2;
}


.wf-pol-icon svg {
    opacity: 0.5;
}
.wf-pol-icon:hover svg {
    opacity: 0.75;
}
.wf-pol-icon.active svg {
    opacity: 1;
}

.wf-cat-text {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 30px;
}


.wf-filter {
    background: transparent;
    color: var(--wf-text-dim);
    border: 1px solid var(--wf-border);
    padding: 0 14px;
    height: 32px;
    line-height: 30px;
    border-radius: 0;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: -1px;
}

.wf-filter:first-child {
    border-radius: 4px 0 0 4px;
    margin-left: 0;
}

.wf-filter:last-child {
    border-radius: 0 4px 4px 0;
}

.wf-filter:hover {
    color: var(--wf-text);
    border-color: var(--wf-accent-dim);
    z-index: 1;
}
.wf-filter:active {
    background: rgba(255,255,255,0.08);
    transform: scale(0.97);
}

.wf-filter.active {
    background: var(--wf-accent);
    color: #000;
    border-color: var(--wf-accent);
    z-index: 2;
}

.wf-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Variant Dropdown */
.wf-dropdown {
    position: relative;
}

.wf-dropdown-btn {
    background: var(--wf-card);
    color: var(--wf-text-dim);
    border: 1px solid var(--wf-border);
    padding: 0 14px;
    height: 32px;
    line-height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.wf-dropdown-btn:hover {
    border-color: var(--wf-accent-dim);
    color: var(--wf-text);
}
.wf-dropdown-btn:active {
    transform: scale(0.97);
}

.wf-dropdown-btn.has-filter {
    border-color: var(--wf-accent);
    color: #000;
    background: var(--wf-accent);
}

.wf-dropdown-menu {
    display: none;
    position: fixed;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: 6px;
    padding: 0;
    min-width: 160px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.wf-dropdown-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--wf-text-dim);
    padding: 9px 16px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.wf-dropdown-item:hover {
    background: var(--wf-card-hover);
    color: var(--wf-text);
}

.wf-dropdown-item.active {
    color: var(--wf-accent);
}

.wf-dropdown-divider {
    height: 1px;
    background: var(--wf-border);
    margin: 4px 0;
}

.wf-eye-icon {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

.wf-visibility-menu {
    min-width: 180px;
    padding: 6px 0;
}



/* Filter panel */
.wf-filter-icon {
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin-right: 4px;
}
#filter-btn.has-filter {
    border-color: var(--wf-accent);
    color: #000;
    background: var(--wf-accent);
}
.wf-filter-panel {
    display: none;
    position: fixed;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    padding: 14px 16px 10px;
    width: 900px;
    max-width: calc(100vw - 16px);
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.wf-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wf-border);
}
.wf-filter-header > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text);
}
#filter-clear-all {
    font-size: 11px;
    color: var(--wf-text-dim);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s;
}
#filter-clear-all:hover {
    color: var(--wf-accent);
    opacity: 1;
}
.wf-filter-section {
    margin-bottom: 12px;
}
.wf-filter-section:last-child {
    margin-bottom: 4px;
}
.wf-filter-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--wf-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.wf-filter-hint {
    font-weight: 400;
    font-size: 9px;
    opacity: 0.5;
    text-transform: none;
    letter-spacing: 0;
}
.wf-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-fpill {
    background: transparent;
    border: 1px solid var(--wf-border);
    color: var(--wf-text-dim);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.wf-fpill:hover {
    border-color: var(--wf-accent-dim);
    color: var(--wf-text);
}
.wf-fpill:active {
    transform: scale(0.95);
}
.wf-fpill[data-hide]:hover {
    border-color: var(--wf-red);
    color: var(--wf-text);
}
.wf-fpill.active {
    background: var(--wf-accent);
    border-color: var(--wf-accent);
    color: #1a1a2e;
}
.wf-fpill[data-hide].active {
    background: var(--wf-red);
    border-color: var(--wf-red);
    color: #fff;
}

/* Stat filter section */
.wf-stat-filter-section .wf-filter-label { margin-bottom: 8px; }

.wf-stat-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid var(--wf-border);
}
.wf-stat-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wf-text);
    min-width: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.wf-stat-filter-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.wf-stat-filter-value {
    font-size: 10px;
    color: var(--wf-accent);
    min-width: 80px;
    text-align: center;
    flex-shrink: 0;
}
.wf-stat-filter-badge {
    font-size: 11px;
    color: var(--wf-green);
    flex: 1;
    text-align: center;
}
.wf-stat-filter-remove {
    background: none;
    border: none;
    color: var(--wf-text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.5;
    transition: all 0.15s;
    flex-shrink: 0;
}
.wf-stat-filter-remove:hover {
    color: var(--wf-red);
    opacity: 1;
}

/* Dual-range pill slider (custom div-based) */
.wf-dual-range {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 20px;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    cursor: pointer;
    touch-action: none;
}
.wf-dual-range-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--wf-accent);
    border-radius: 10px;
    pointer-events: none;
}
.wf-dual-range-thumb {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wf-surface);
    cursor: grab;
    z-index: 2;
    transform: translate(-50%, -50%);
}
.wf-dual-range-thumb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.wf-dual-range-thumb:active {
    cursor: grabbing;
}

/* Add property button + tile grid */
.wf-stat-add-wrap {
    position: relative;
    margin-top: 6px;
}
.wf-stat-add-btn {
    background: transparent;
    border: 1px dashed var(--wf-border);
    border-radius: 6px;
    color: var(--wf-text-dim);
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
}
.wf-stat-add-btn:hover {
    border-color: var(--wf-accent-dim);
    color: var(--wf-text);
}
.wf-stat-add-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 6px;
    padding: 8px;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.wf-stat-tile {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--wf-border);
    border-radius: 6px;
    color: var(--wf-text-dim);
    font-size: 11px;
    padding: 14px 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-stat-tile:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--wf-accent-dim);
    color: var(--wf-text);
}
.wf-stat-tile:active {
    background: var(--wf-accent);
    color: var(--wf-bg);
}
.wf-stat-dmg-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--wf-border);
}
.wf-stat-tile-dmg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: normal;
    padding: 10px 2px 8px;
    line-height: 1.2;
}
.wf-stat-tile-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.wf-search-wrap {
    position: relative;
    flex-shrink: 0;
}

.wf-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--wf-text-dim);
    pointer-events: none;
}

.wf-search {
    background: var(--wf-card);
    color: var(--wf-text);
    border: 1px solid var(--wf-border);
    padding: 0 12px 0 28px;
    height: 32px;
    border-radius: 4px;
    font-size: 13px;
    width: 180px;
    outline: none;
    transition: border-color 0.2s;
}

.wf-search-clear {
    display: none;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--wf-text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.wf-search-clear:hover { opacity: 1; color: var(--wf-text); }

.wf-search-wrap.has-value .wf-search-clear { display: block; }
.wf-search-wrap.has-value .wf-search { padding-right: 26px; }

.wf-search:hover {
    border-color: var(--wf-text-dim);
}
.wf-search:focus {
    border-color: var(--wf-accent);
}

.wf-search:focus + .wf-search-icon,
.wf-search-wrap:focus-within .wf-search-icon {
    color: var(--wf-accent);
}

.wf-search::placeholder {
    color: var(--wf-text-dim);
}

.wf-view-toggle {
    display: flex;
}

.wf-view {
    background: transparent;
    color: var(--wf-text-dim);
    border: 1px solid var(--wf-border);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.wf-view svg {
    width: 16px;
    height: 16px;
}

.wf-view:first-child { border-radius: 4px 0 0 4px; }
.wf-view:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }

.wf-view:hover {
    color: var(--wf-text);
    border-color: var(--wf-accent-dim);
}
.wf-view:active {
    transform: scale(0.92);
}
.wf-view.active {
    background: var(--wf-accent);
    color: #000;
    border-color: var(--wf-accent);
}

/* ============================================================
   Stats
   ============================================================ */

.wf-stats {
    font-size: 12px;
    color: var(--wf-text-dim);
    white-space: nowrap;
    min-height: 1.4em;
}

.wf-stats span {
    font-weight: 600;
    color: var(--wf-text);
}

/* ============================================================
   Cards Grid
   ============================================================ */

.wf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    padding: 24px;
}

.wf-card {
    background: var(--wf-card);
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 140px;
}

.wf-card:hover {
    background: var(--wf-card-hover);
    border-color: var(--wf-accent-dim);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wf-card-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
}

.wf-card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.wf-card-img-wrap {
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

.wf-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.wf-card-frame .wf-card-img {
    object-fit: cover;
    object-position: top center;
}

.wf-card-img-placeholder {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wf-text-dim);
    font-size: 20px;
    flex-shrink: 0;
    opacity: 0.3;
}

.wf-card-info {
    flex: 1;
    min-width: 0;
}

.wf-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-meta {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--wf-text-dim);
}

.wf-meta span {
    white-space: nowrap;
}

.wf-meta .wf-meta-separator {
    opacity: 0.3;
}

.wf-card-match {
    display: none;
    font-size: 10px;
    color: var(--wf-accent);
    opacity: 0.7;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-prime-link {
    color: var(--wf-accent-dim);
    cursor: pointer;
    transition: color 0.15s;
}

.wf-prime-link:hover {
    color: var(--wf-accent);
}

.wf-variant-tag {
    color: var(--wf-blue);
    font-weight: 600;
}

.wf-meta-sep-inline {
    opacity: 0.4;
}

.wf-founder-tag {
    color: #c4a24e;
    font-weight: 600;
}
.wf-login-tag {
    color: #f0a030;
    font-weight: 600;
}

.wf-tradable {
    color: var(--wf-green);
    font-weight: 600;
}

.wf-subsumed-tag {
    color: #8b5cf6;
    font-weight: 600;
}

.wf-linked-tag {
    color: var(--wf-blue);
    font-weight: 600;
    opacity: 0.8;
}

.wf-card-action {
    flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    padding: 0;
    opacity: 0.3;
}

/* Card action — now uses .wf-dcb inside */

.wf-card:hover .wf-card-action {
    opacity: 0.6;
}

.wf-card-action.wf-action-owned {
    opacity: 0;
}
.wf-card:hover .wf-card-action.wf-action-owned {
    opacity: 0.4;
    color: var(--wf-text-dim);
    border-color: var(--wf-text-dim);
}

.wf-star {
    font-size: 18px;
    width: 22px;
    height: 22px;
}

.wf-star:hover,
.wf-star.active {
    color: var(--wf-accent);
    opacity: 1;
}

/* Progress area */
.wf-card-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.wf-card-progress-wrap {
    flex: 1;
    min-width: 0;
}

.wf-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.wf-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.wf-progress-bar.complete { background: var(--wf-green); }
.wf-progress-bar.partial { background: var(--wf-orange); }
.wf-progress-bar.mastery { background: var(--wf-accent); }
.wf-progress-bar.empty { background: transparent; }

.wf-card-parts {
    font-size: 10px;
    color: var(--wf-text-dim);
    margin-top: 2px;
    opacity: 0.6;
}

.wf-card-mastery-info {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--wf-accent);
    opacity: 0.8;
    margin-top: 2px;
}

.wf-card-mastery-info .wf-mastered-mini {
    transform: none;
    vertical-align: middle;
}

.wf-quick-own:hover,
.wf-quick-mastery:hover {
    opacity: 1;
}

/* Non-prime card subtle visual difference */
.wf-card-nonprime {
    border-color: rgba(42, 42, 74, 0.6);
}

/* Owned/built card green tint, no border */
.wf-card-built {
    border-color: transparent;
    background: rgba(76, 175, 80, 0.10);
}

.wf-card-built:hover {
    background: rgba(76, 175, 80, 0.16);
    border-color: transparent;
}


/* Drops toggle (expand/collapse all drops) */
.wf-drops-toggle {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--wf-accent-dim);
    cursor: pointer;
    opacity: 0.6;
    user-select: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.wf-drops-toggle:hover { opacity: 1; }

.wf-drops-toggle--vaulted {
    color: var(--wf-red);
    opacity: 0.8;
}
.wf-drops-toggle--vaulted:hover { opacity: 1; }

.wf-drops-toggle::before { content: '\25B8 '; }
.wf-drops-toggle.expanded::before { content: '\25BE '; }

/* Vaulted toggle (inside expanded drops) */
.wf-vault-toggle-row {
    padding: 4px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 4px;
}

.wf-vault-show-link {
    padding: 2px 8px;
    font-size: 11px;
    color: var(--wf-red);
    cursor: pointer;
    opacity: 0.6;
    user-select: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.wf-vault-show-link:hover { opacity: 1; }

.wf-vault-show-link::before { content: '\25B8 '; }
.wf-vault-show-link.expanded::before { content: '\25BE '; }

/* Modal crafting resources */
.wf-modal-resources {
    margin-bottom: 14px;
    border: 1px solid var(--wf-border);
    border-radius: 6px;
    overflow: hidden;
}

.wf-resources-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wf-text-dim);
    padding: 8px 12px 6px;
    background: rgba(255, 255, 255, 0.03);
}

.wf-resource {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.wf-resource-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.wf-resource-name {
    color: var(--wf-text);
    flex: 1;
}

.wf-resource-count {
    color: var(--wf-text-dim);
    font-weight: 500;
    font-size: 12px;
}

/* Modal no-drop info hint */
.wf-modal-no-drops {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--wf-text-dim);
    line-height: 1.5;
}

.wf-no-drops-icon {
    font-size: 16px;
    color: var(--wf-orange);
    flex-shrink: 0;
    line-height: 1.2;
}

.wf-credits-icon {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-bottom: 2px;
}
.wf-bp-cost {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: 11px;
    color: var(--wf-text-dim);
    font-weight: 400;
}

/* Acquisition hint (Kuva Lich / Sister / Coda) */
.wf-acquisition-hint {
    padding: 10px 14px;
    background: rgba(226, 183, 20, 0.08);
    border: 1px solid rgba(226, 183, 20, 0.2);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.5;
}
.wf-acquisition-label {
    font-weight: 600;
    color: var(--wf-accent);
    margin-bottom: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wf-acquisition-text {
    color: var(--wf-text-dim);
}
.wf-modal-description {
    font-size: 13px;
    line-height: 1.5;
    color: #b0b0b0;
    font-style: italic;
    margin-bottom: 10px;
}
.wf-release-date {
    font-size: 11px;
    color: var(--wf-text-dim);
    text-align: right;
    margin-top: -6px;
    margin-bottom: 10px;
    opacity: 0.7;
}

/* Item Stats */
.wf-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 6px 0;
}
.wf-damage-bar + .wf-item-stats {
    border-radius: 0 0 8px 8px;
    margin-top: 0;
}
.wf-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    min-width: 0;
    flex: 1;
    padding: 4px 6px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.wf-stat:last-child {
    border-right: none;
}
.wf-stat-label {
    font-size: 8px;
    color: var(--wf-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}
.wf-stat-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--wf-text);
}
.wf-stat-passive {
    font-size: 11px;
    color: var(--wf-text-dim);
    margin-bottom: 8px;
    line-height: 1.4;
}
.wf-stat-passive-label {
    font-weight: 600;
    color: var(--wf-accent);
    font-size: 10px;
    text-transform: uppercase;
}
.wf-abilities {
    margin-bottom: 10px;
}
.wf-abilities summary {
    font-size: 11px;
    font-weight: 600;
    color: var(--wf-text-dim);
    cursor: pointer;
    padding: 4px 0;
}
.wf-abilities summary:hover {
    color: var(--wf-text);
}
.wf-abilities-list {
    padding: 6px 0;
}
.wf-ability {
    font-size: 11px;
    color: var(--wf-text-dim);
    line-height: 1.4;
    padding: 3px 0;
}
.wf-ability strong {
    color: var(--wf-text);
}

/* Damage breakdown bar */
.wf-damage-bar {
    display: flex;
    height: 30px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    margin-bottom: 0;
    gap: 1px;
    background: rgba(255,255,255,0.03);
}
.wf-item-stats + .wf-acquisition-hint,
.wf-item-stats + .wf-companion-owner,
.wf-abilities + .wf-acquisition-hint,
.wf-abilities + .wf-companion-owner {
    margin-top: 16px;
}
.wf-dmg-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    min-width: 28px;
    transition: flex 0.3s;
}
.wf-damage-icon {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    flex-shrink: 0;
}

.wf-companion-owner {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--wf-text);
}

/* Category mini icons (in card names) */
.wf-cat-mini {
    width: 1em;
    height: 1em;
    vertical-align: baseline;
    transform: translateY(0.2em);
    opacity: 0.5;
    flex-shrink: 0;
}

/* Mastered mini icon (in card names) */
.wf-mastered-mini {
    width: auto;
    height: 1.7em;
    vertical-align: middle;
    margin-bottom: -1.5em;
    transform: translate(-0.2em, -0.8em);
    flex-shrink: 0;
}

/* Mastery toggle (normal items, 0/30) */
.wf-mastery-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--wf-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}
.wf-mastery-toggle:hover { color: var(--wf-text); }
.wf-mastery-toggle.active { color: var(--wf-accent); }

/* wf-mastery-circle replaced by .wf-dcb */

/* Mastery level select (Kuva/Tenet/Coda) */
.wf-mastery-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wf-text-dim);
}
.wf-mastery-select {
    background: var(--wf-card);
    color: var(--wf-text);
    border: 1px solid var(--wf-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
}
.wf-mastery-select:hover { border-color: var(--wf-accent); }

/* Modal wiki link */
.wf-modal-wiki-link {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--wf-text-dim);
    text-decoration: none;
    transition: color 0.15s;
    margin-top: 6px;
}

.wf-modal-wiki-link:hover {
    color: var(--wf-accent);
}

/* Modal complete message */
.wf-modal-complete-msg {
    text-align: center;
    padding: 16px;
    color: var(--wf-green);
    font-size: 14px;
    font-weight: 600;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 6px;
    margin-top: 4px;
}

/* ============================================================
   Table
   ============================================================ */

.wf-table-wrap {
    padding: 24px;
}

.wf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.wf-table thead {
    position: sticky;
    top: var(--wf-header-h, 108px);
    z-index: 10;
}

.wf-table th {
    background: var(--wf-surface);
    color: var(--wf-text-dim);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--wf-border);
}

.wf-th-star { width: 40px; }

.wf-table th[data-sort] {
    cursor: pointer;
    user-select: none;
}

.wf-table th[data-sort]:hover {
    color: var(--wf-text);
}

.wf-table th[data-sort].wf-sort-active {
    color: var(--wf-accent);
}

.wf-table th[data-sort]::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
}

.wf-table th[data-sort]:hover::after {
    opacity: 0.6;
}

.wf-table th[data-sort].wf-sort-active::after {
    content: '▾';
    opacity: 1;
}

.wf-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--wf-border);
    vertical-align: middle;
}

.wf-table tr {
    cursor: pointer;
    transition: background 0.15s;
}

.wf-table tbody tr:hover {
    background: var(--wf-card-hover);
}

.wf-table .wf-star {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    font-size: 16px;
    opacity: 0.6;
}

.wf-th-mr, .wf-td-mr { min-width: 65px; text-align: center; white-space: nowrap; }

.wf-table-icon { margin-left: 4px; }

.wf-table-built {
    color: var(--wf-green);
    font-size: 12px;
}

.wf-table .wf-cat-mini {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: 4px;
}

.wf-table .wf-mastered-mini {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.wf-badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.wf-badge-category {
    color: var(--wf-text-dim);
}

.wf-badge-prime {
    color: var(--wf-accent);
    font-weight: 600;
}

.wf-badge-vaulted {
    color: var(--wf-red);
}

.wf-badge-available {
    color: var(--wf-green);
}

/* ============================================================
   Modal
   ============================================================ */

dialog.wf-modal {
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: 12px;
    max-width: 900px;
    width: calc(100% - 48px);
    max-height: 88vh;
    overflow: visible;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    color: var(--wf-text);
    z-index: 200;
}
dialog.wf-modal[open] {
    display: flex;
    flex-direction: column;
    animation: wf-modal-in 0.175s ease-out;
}
dialog.wf-modal[open]::backdrop {
    animation: wf-backdrop-in 0.15s ease-out;
}
@keyframes wf-modal-in {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes wf-modal-out {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to   { opacity: 0; transform: translate(-50%, -57%); }
}
@keyframes wf-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wf-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
dialog.wf-modal.wf-closing {
    animation: wf-modal-out 0.175s ease-in forwards;
}
dialog.wf-modal.wf-closing::backdrop {
    animation: wf-backdrop-out 0.175s ease-in forwards;
}
@keyframes wf-slide-right {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wf-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wf-img-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* Modal element entrance choreography */
/* 1. Header: title, then meta items staggered */
.wf-modal-title {
    animation: wf-slide-right 0.15s ease-out 0.03s both;
}
.wf-meta-item {
    display: inline;
    animation: wf-slide-right 0.125s ease-out both;
}
.wf-meta-item:nth-child(1) { animation-delay: 0.06s; }
.wf-meta-item:nth-child(2) { animation-delay: 0.085s; }
.wf-meta-item:nth-child(3) { animation-delay: 0.11s; }
.wf-meta-item:nth-child(4) { animation-delay: 0.135s; }
.wf-meta-item:nth-child(5) { animation-delay: 0.16s; }
.wf-meta-item:nth-child(6) { animation-delay: 0.185s; }
/* 2. Image */
.wf-modal-left {
    animation: wf-img-in 0.2s ease-out 0.15s both;
}
/* 3. Content */
.wf-modal-right {
    animation: wf-fade-in 0.15s ease-out 0.225s both;
}
/* 4. Crafting resources */
.wf-res-section {
    margin: 0;
}
.wf-res-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--wf-text-dim);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
}
.wf-res-toggle:hover { opacity: 1; }
.wf-res-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 9px;
}
.wf-res-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
    padding: 6px 0 2px;
}
.wf-res-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 4px 8px 4px 5px;
    font-size: 12px;
}
.wf-res-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.wf-res-img-placeholder {
    width: 22px;
    height: 22px;
}
.wf-res-name { color: var(--wf-text-dim); }
.wf-res-count { color: var(--wf-text-dim); font-weight: 600; font-size: 12px; }

/* 5. Footer buttons */
.wf-modal-footer {
    animation: wf-fade-in 0.1s ease-out 0.25s both;
}
#modal-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    padding: 0 24px 24px;
    position: relative;
    z-index: 1;
}
.wf-modal-watermark {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: no-repeat center center;
    background-size: cover;
    filter: grayscale(1) blur(6px);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

dialog.wf-modal::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

body.wf-modal-open {
    overflow: hidden;
}

.wf-modal-layout {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 1;
}
.wf-modal-layout:has(.wf-modal-left--modcard) {
    gap: 36px;
}

.wf-modal-left {
    flex-shrink: 0;
    width: 320px;
    margin-left: -24px;
    margin-bottom: -24px;
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    transform-origin: center bottom;
    position: sticky;
    bottom: -24px;
}

.wf-modal-left-img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    object-position: bottom;
    border-radius: 0 8px 0 12px;
}

/* Enlarged mod card in modal */
.wf-modal-left--modcard {
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-left: 0;
    margin-bottom: 0;
    position: static;
    bottom: auto;
    width: 240px;
    padding: 48px 0 30px;
}
.wf-modal-left--modcard .wf-modcard {
    width: 242px;
    height: 338px;
    zoom: 1;
    pointer-events: none;
}

.wf-modal-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 430px;
}
.wf-modal-left--modcard ~ .wf-modal-right {
    padding-top: 24px;
    max-width: 460px;
}

.wf-modal-footer {
    margin-top: auto;
    padding-top: 14px;
}

.wf-modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.wf-modal-footer-actions > * {
    animation: wf-action-in 0.15s ease-out both;
}
.wf-modal-footer-actions > .wf-no-anim {
    animation: none;
    opacity: 1;
}
.wf-modal-footer-actions > :nth-child(1) { animation-delay: 0.275s; }
.wf-modal-footer-actions > :nth-child(2) { animation-delay: 0.325s; }
.wf-modal-footer-actions > :nth-child(3) { animation-delay: 0.375s; }
.wf-modal-footer-actions > :nth-child(4) { animation-delay: 0.425s; }
@keyframes wf-action-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.wf-action-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: pre-line;
    line-height: 1.2;
    text-align:left;
}
.wf-action-date {
    font-size: 10px;
    color: var(--wf-text-dim);
    opacity: 0.5;
}
.wf-modal-footer-actions .wf-modal-wiki-link {
    margin-left: auto;
    margin-top: 0;
    display: inline;
}

.wf-modal-built-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--wf-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}
.wf-modal-built-btn:hover {
    color: var(--wf-text);
}
/* wf-modal-built-check replaced by .wf-dcb */
.wf-modal-built-btn.active {
    color: var(--wf-green);
}
.wf-modal-subsume-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--wf-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}
.wf-modal-subsume-btn:hover { color: var(--wf-text); }
/* wf-modal-subsume-icon replaced by .wf-dcb */
.wf-modal-subsume-btn.active {
    color: #8b5cf6;
}

/* Helminth special modal */
.wf-helminth-header-stats {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #8b5cf6;
    white-space: nowrap;
}
.wf-helminth-stats {
    display: none;
}

.wf-helminth-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding-bottom: 4px;
}

.wf-helminth-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    border: 1px solid transparent;
}

.wf-helminth-tile:active {
    transform: scale(0.95);
}

.wf-helminth-tile-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    margin-bottom: 2px;
}

.wf-helminth-tile:not(.subsumed):hover .wf-helminth-tile-img {
    box-shadow: 0 0 0 2px var(--wf-border);
}

.wf-helminth-tile.subsumed .wf-helminth-tile-img {
    box-shadow: 0 0 0 2px #8b5cf6;
}

.wf-helminth-tile-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    color: var(--wf-text-dim);
    font-size: 16px;
    margin-bottom: 4px;
}

.wf-helminth-tile-name {
    font-size: 10px;
    color: var(--wf-text-dim);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.wf-helminth-tile.subsumed .wf-helminth-tile-name {
    color: #8b5cf6;
    font-weight: 600;
}

.wf-helminth-tile-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
    color: #8b5cf6;
}

.wf-modal-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wf-text-dim);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--wf-border);
}

.wf-modal-topbar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 24px 10px;
    flex-shrink: 0;
    z-index: 3;
    border-radius: 12px 12px 0 0;
    position: relative;
    margin-bottom: -30px;
    pointer-events: none;
}
.wf-modal:has(.wf-helminth-grid) .wf-modal-topbar {
    margin-bottom: 0;
}

.wf-modal-close {
    pointer-events: auto;
}

#modal-header-content {
    flex: 1;
    min-width: 0;
}

.wf-modal-topbar .wf-prime-link {
    pointer-events: auto;
}

.wf-modal-close {
    background: none;
    border: none;
    outline: none;
    color: var(--wf-text-dim);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 0;
    transition: color 0.2s;
    flex-shrink: 0;
}

.wf-modal-close:hover {
    color: var(--wf-text);
}

.wf-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wf-modal-title {
    font-size: 24px;
    font-weight: 600;
}
.wf-modal-title .wf-mastered-mini {
    width: auto;
    height: 1.3em;
}

.wf-modal-topbar .wf-meta {
    font-size: 13px;
    margin-top: 4px;
}

.wf-modal-built {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.wf-modal-built label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--wf-text-dim);
}

.wf-modal-built input[type="checkbox"] {
    accent-color: var(--wf-green);
    width: 16px;
    height: 16px;
}

/* Part list */
.wf-part {
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.wf-part + .wf-part {
    margin-top: 6px;
}

.wf-comp-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    flex-shrink: 0;
    align-self: flex-start;
    opacity: 0.8;
    border-radius: 6px;
}

.wf-part-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wf-part-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.wf-part-cb-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--wf-text-dim);
    font-size: 13px;
    transition: color 0.15s;
    flex: 1;
}
.wf-part-cb-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
/* wf-part-cb-box replaced by .wf-dcb */
.wf-part-cb-label:hover {
    color: var(--wf-text);
}
.wf-part-cb-label:has(input:checked) {
    color: var(--wf-green);
}

.wf-part-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--wf-text-dim);
    opacity: 0.7;
}

.wf-part-collected-label {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.5;
}

.wf-part-date {
    color: var(--wf-text-dim);
    font-size: 11px;
    margin-left: auto;
    flex-shrink: 0;
}

.wf-part-drops {
    padding: 0;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wf-drop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: var(--wf-text-dim);
}

.wf-drop-relic {
    color: var(--wf-text);
    font-weight: 500;
}

/* Structured mission drop location — inline with arrow separator */
.wf-drop-location {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
}
.wf-drop-mission-name {
    color: var(--wf-text);
    font-weight: 500;
}
.wf-drop-location-sub {
    font-size: 10px;
    color: var(--wf-text-dim);
    opacity: 0.65;
}
.wf-drop-sub {
    font-size: 10px;
    color: var(--wf-text-dim);
    opacity: 0.55;
    margin-top: -1px;
}
.wf-drop-level {
    opacity: 0.7;
}

.wf-drop-rarity {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}

.wf-drop-rarity.common {
    color: var(--wf-rarity-common);
    background: rgba(205, 127, 50, 0.2);
}

.wf-drop-rarity.uncommon {
    color: var(--wf-rarity-uncommon);
    background: rgba(192, 192, 192, 0.15);
}

.wf-drop-rarity.rare {
    color: var(--wf-rarity-rare);
    background: rgba(255, 215, 0, 0.2);
}

.wf-drop-chance {
    margin-left: auto;
    color: var(--wf-text-dim);
}
.wf-drop-chance[data-tooltip] {
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-color: var(--wf-border);
    text-underline-offset: 2px;
}

/* Merged rarity + chance badge (relic drops only) */
.wf-drop-pct-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: help;
    min-width: 96px;
    text-align: center;
}
.wf-drop-pct-badge.common   { color: var(--wf-rarity-common);   background: rgba(205,127,50,0.2); }
.wf-drop-pct-badge.uncommon { color: var(--wf-rarity-uncommon); background: rgba(192,192,192,0.15); }
.wf-drop-pct-badge.rare     { color: var(--wf-rarity-rare);     background: rgba(255,215,0,0.2); }
.wf-drop-pct-badge.plain    { color: var(--wf-text-dim);         background: rgba(128,128,128,0.1); font-weight: 400; }

.wf-drop-icon {
    width: 27px;
    height: 27px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.7;
}

.wf-drop-vaulted {
    opacity: 0.7;
}

.wf-drop-vaulted .wf-drop-relic {
    color: var(--wf-red);
}

.wf-drop-vault-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--wf-red);
    border: 1px solid var(--wf-red);
    border-radius: 2px;
    padding: 0 3px;
    line-height: 1.4;
    flex-shrink: 0;
}

.wf-drop-vendor-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--wf-green);
    background: rgba(76, 175, 80, 0.15);
    border-radius: 4px;
    padding: 2px 7px;
    line-height: 1.5;
    flex-shrink: 0;
    margin-left: auto;
    min-width: 96px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.wf-vendor-cost-icon {
    height: 1.5em;
    width: auto;
    margin-bottom: -0.3em;
    object-fit: contain;
}

/* Quest-Tag (lila) */
.wf-drop-quest-tag {
    color: #b07dd6;
    background: rgba(155, 89, 182, 0.15);
}
.wf-drop-quest-icon {
    font-size: 14px;
    margin-right: 4px;
    color: #b07dd6;
}

/* Junction-Tag (blau) */
.wf-drop-junction-tag {
    color: #5dade2;
    background: rgba(93, 173, 226, 0.15);
}

/* Login-Reward-Tag (orange) */
.wf-drop-login-tag {
    color: #f0a030;
    background: rgba(240, 160, 48, 0.15);
}

/* Event-Tag (rot) */
.wf-drop-event-tag {
    color: #e06060;
    background: rgba(224, 96, 96, 0.15);
}

/* Alt-Sources aufklappbar */
.wf-drop-alt-toggle {
    font-size: 11px;
    opacity: 0.55;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}
.wf-drop-alt-toggle:hover { opacity: 1; }
.wf-drop-alt-toggle.wf-drop-alt-open { opacity: 0.8; }
.wf-drop-alt-list {
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.wf-drop-wrap {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wf-drop-wrap:last-child { border-bottom: none; }

.wf-drop-source-info {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 2px 0 0 0;
    font-size: 11px;
    color: var(--wf-text-dim);
}

/* Arrow separator with equal spacing — used for vendor and mission sub-info */
.wf-source-sep {
    margin: 0 5px;
    opacity: 0.35;
    font-size: 9px;
    flex-shrink: 0;
}

.wf-source-vendor .wf-source-currency {
    color: var(--wf-accent);
    font-weight: 600;
}

/* Enemy location keeps its arrow via ::before (no separate sep element) */
.wf-source-enemy .wf-source-location::before {
    content: '\25B8\00a0';
}

.wf-source-enemy .wf-source-location {
    color: var(--wf-blue);
}

.wf-no-drops {
    color: var(--wf-text-dim);
    font-style: italic;
    padding: 4px 0;
}

.wf-all-vaulted-notice {
    color: var(--wf-rarity-common);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
    opacity: 0.8;
}

.wf-steel-path-tag {
    color: #5b9bd5;
    font-weight: 500;
}

/* ============================================================
   Utilities
   ============================================================ */

.wf-error {
    text-align: center;
    padding: 60px 24px;
    color: var(--wf-red);
    font-size: 16px;
}

/* Loading overlay — centered in viewport below sticky header */
.wf-loading-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.wf-loading-overlay.wf-fade-out {
    opacity: 0;
}
.wf-loading-overlay .wf-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.wf-loading-bar-track {
    width: 180px;
    height: 3px;
    background: var(--wf-border);
    border-radius: 2px;
    overflow: hidden;
}
.wf-loading-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--wf-accent);
    border-radius: 2px;
    transition: width 0.2s ease;
}
.wf-loading-pct {
    font-size: 12px;
    color: var(--wf-text-dim);
    font-variant-numeric: tabular-nums;
}

/* Content fade-in after loading */
.wf-cards.wf-content-hidden,
.wf-table-wrap.wf-content-hidden {
    opacity: 0;
}
.wf-cards.wf-content-reveal,
.wf-table-wrap.wf-content-reveal {
    animation: wf-content-in 0.3s ease forwards;
}
@keyframes wf-content-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.wf-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--wf-text-dim);
    font-size: 14px;
}

/* Center empty state and progress-hidden banner */
#content-cards:has(.wf-empty),
#content-cards:has(.wf-progress-hidden-banner) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

/* Progress-hidden search banner (reuses onboarding styles) */
.wf-progress-hidden-banner {
    max-width: 420px;
    padding: 24px 28px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--wf-accent);
    border-radius: 10px;
    text-align: center;
    animation: wf-onboarding-glow 2.5s ease-in-out infinite;
}
.wf-progress-hidden-banner .wf-spoiler-hint {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--wf-text-dim);
    opacity: 0.7;
}

.wf-priority-divider {
    grid-column: 1 / -1;
    border-top: 1px dashed var(--wf-accent-dim);
    margin: 4px 0;
}

/* CSS-visibility filter (Performance: hide items without re-render) */
.wf-hidden { display: none !important; }

/* ============================================================
   Tooltip
   ============================================================ */

.wf-tip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: #1a1a2eee;
    color: #e0e0ff;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: balance;
    border: 1px solid var(--wf-accent-dim);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: pre-line;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.wf-tip.visible {
    opacity: 1;
}

.wf-tip-rich {
    white-space: normal;
    padding: 6px 10px;
    max-width: 280px;
}
.wf-tip-table {
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.7;
}
.wf-tip-table th {
    font-size: 10px;
    opacity: 0.55;
    padding: 0 6px 2px;
    text-align: right;
}
.wf-tip-table th:first-child { text-align: left; }
.wf-tip-table td { padding: 0 6px; }
.wf-tip-label { text-align: left; padding-right: 12px; }
.wf-tip-traces { text-align: right; opacity: 0.6; font-size: 11px; }
.wf-tip-strong { display: block; margin-top: 4px; color: #8cf; font-size: 0.88em; }
.wf-tip-pct    { text-align: right; font-weight: 600; color: var(--wf-accent); }

/* ============================================================
   Scrollbar
   ============================================================ */

::-webkit-scrollbar {
	width: 15px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--wf-border);
	border-radius: 20px;

	border: 5px solid transparent;
	background-clip: padding-box;

	margin: 10px 0;

	transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--wf-accent);
	background-clip: padding-box;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
    .wf-header { padding: 12px 16px; }
    .wf-header h1 { font-size: 16px; }
    .wf-toolbar { padding: 10px 16px; }
    .wf-cards { padding: 16px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .wf-table-wrap { padding: 16px; }
    .wf-search { width: 120px; }
}

@media (max-width: 700px) {
    .wf-modal-layout {
        flex-direction: column;
    }

    .wf-modal-left {
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
        align-self: auto;
    }

    .wf-modal-left-img {
        max-height: 200px;
    }

    .wf-modal-left--modcard {
        width: 180px;
        margin: 0 auto;
    }

    .wf-modal-right {
        padding-top: 16px;
    }
}

@media (max-width: 480px) {
    .wf-cards { grid-template-columns: 1fr; }
    .wf-mod-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 120px)); gap: 8px; }
    .wf-modcard { zoom: 0.413; }
    .wf-modcard:hover { z-index: 2; }
    .wf-modal { margin: 12px; }
    #modal-content { padding: 0 16px 16px; }
}

/* ============================================================
   ARCANE STYLES
   ============================================================ */

.wf-arcane-rarity {
    font-size: 11px;
    font-weight: 600;
}
.wf-rarity-common { color: var(--wf-rarity-common); }
.wf-rarity-uncommon { color: var(--wf-rarity-uncommon); }
.wf-rarity-rare { color: var(--wf-rarity-rare); }
.wf-rarity-legendary { color: var(--wf-rarity-legendary); }

/* Arcane modal: combined effect + rank section */
.wf-arcane-effect-section {
    margin-bottom: 20px;
}
.wf-arcane-trigger {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-arcane);
    margin-bottom: 10px;
}
.wf-arcane-drops-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wf-text-dim);
    margin-bottom: 8px;
}
.wf-arcane-rank-dots {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.wf-arcane-dot {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wf-arcane-dot:hover {
    border-color: var(--wf-arcane);
    color: var(--wf-arcane);
}
.wf-arcane-dot.active {
    border-color: var(--wf-arcane);
    background: rgba(179, 136, 255, 0.15);
    color: var(--wf-arcane);
}
.wf-arcane-dot.current {
    border-color: var(--wf-arcane);
    background: var(--wf-arcane);
    color: #0d0d0d;
}
.wf-arcane-effect-detail {
    font-size: 12px;
    color: var(--wf-text);
    line-height: 1.5;
    min-height: 3em;
}
.wf-arcane-effect-line + .wf-arcane-effect-line {
    margin-top: 2px;
}
.wf-arcane-effect-detail.wf-effect-preview {
    color: var(--wf-accent);
}

/* Arcane modal: max rank badge */
.wf-arcane-max-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--wf-arcane);
    color: #0d0d0d;
    vertical-align: middle;
    margin-left: 4px;
}

/* Arcane card styling */
.wf-card-arcane .wf-progress-bar.partial {
    background: var(--wf-arcane);
}
.wf-card-arcane .wf-progress-bar.complete {
    background: var(--wf-arcane);
}

/* ============================================================
   MOD CARDS — Ingame-Style with Wiki Assets
   ============================================================
   Asset reference (original pixel sizes):
     Background:     242 × 338  (fills entire card)
     FrameTop:       281 × 117  (visible rows 8–48, side brackets extend)
     FrameBottom:    292 × 120  (visible rows 29–114, shelf at bottom)
     CornerLights:    64 ×  64  (rarity diamond, top center)
     SideLight:       16 × 256  (vertical glow strip, asymmetric — bright side inward)
     LowerTab:       210 ×  26  (category label bg)
     TopRightBacker:  45 ×  26  (drain/polarity bg)
     RankSlotActive:  12 ×  12  (blue diamond pip)

   Alignment: Frames are centered on the background. FrameTop's visible
   border starts at row 8/117, FrameBottom's ends at row 114/120.
   Offsets compensate for transparent glow padding so visible frame
   edges align with the background edges.
   ============================================================ */

/* --- Mod Grid --- */
.wf-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 150px));
    gap: 80px 20px;
    padding: 12px;
    grid-column: 1 / -1;
    justify-content: space-between;
}

/* --- Mod Card Container --- */
.wf-modcard {
    position: relative;
    width: 242px;
    height: 338px;
    zoom: 0.5785;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
    z-index: 1;
    justify-self: center;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 3 3;
    text-wrap: balance;
}
.wf-modcard:not(.wf-modcard--owned) {
    filter: grayscale(1);
    opacity: 0.8;
}
.wf-modal-left--modcard .wf-modcard:not(.wf-modcard--owned) {
    filter: none;
    opacity: 1;
}
.wf-modcard:hover {
    z-index: 2;
}

/* --- Layer: Background (z0) — fills card bounds exactly --- */
.wf-modcard__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    pointer-events: none;
}

/* --- Layer: Mod Icon (z1) — artwork with bottom fade via mask --- */
.wf-modcard__icon {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
    filter: brightness(0.8);
    transition: filter .3s ease;
    -webkit-mask-image: linear-gradient(to bottom, black 40%, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, black 65%, transparent 100%);
}
.wf-modcard:hover .wf-modcard__icon {
    filter: brightness(1.05);
}
.wf-modcard--requiem .wf-modcard__icon {
    filter: brightness(0.8) drop-shadow(0 0 6px rgba(180, 30, 30, 0.8)) drop-shadow(0 0 12px rgba(180, 30, 30, 0.4));
}
.wf-modcard--requiem:hover .wf-modcard__icon {
    filter: brightness(1.05) drop-shadow(0 0 8px rgba(200, 40, 40, 0.9)) drop-shadow(0 0 16px rgba(200, 40, 40, 0.5));
}
.wf-modcard--tome .wf-modcard__icon {
    filter: brightness(0.8) drop-shadow(0 0 6px rgba(30, 120, 200, 0.8)) drop-shadow(0 0 12px rgba(30, 120, 200, 0.4));
}
.wf-modcard--tome:hover .wf-modcard__icon {
    filter: brightness(1.05) drop-shadow(0 0 8px rgba(40, 140, 220, 0.9)) drop-shadow(0 0 16px rgba(40, 140, 220, 0.5));
}
/*
 * --- Frame layers (z2) ---
 * FrameTop (281×117) and FrameBottom (292×120) are WIDER than
 * Background (242×338). Centered horizontally via negative left offset.
 *
 * Exact centering (measured from pixel data):
 *   FrameTop:    left = -(281-242)/2 / 242 = -8.058%,  width = 281/242 = 116.116%
 *   FrameBottom: left = -(292-242)/2 / 242 = -10.331%, width = 292/242 = 120.661%
 *
 * Vertical: top/bottom = 0 (frame edges = background edges, glow padding is intentional)
 *
 * Bracket coverage when centered:
 *   FrameTop:    left bracket 2.5px outside → 17.5px inside bg edge
 *   FrameBottom: left bracket 7px outside → 14px inside bg edge
 */
.wf-modcard__frame-top {
    position: absolute;
    z-index: 2;
    height: auto;
    pointer-events: none;
}
.wf-modcard__frame-bottom {
    position: absolute;
    z-index: 2;
    height: auto;
    pointer-events: none;
}

/* --- Layer: SideLight (z3) — vertical glow on BOTH sides, hover only ---
 * The SideLight asset is asymmetric (bright side = right half).
 * Left instance: as-is (bright side faces inward = right).
 * Right instance: mirrored via scaleX(-1) so bright side faces inward = left.
 */
.wf-modcard__sidelight {
    position: absolute;
    z-index: 3;
    width: auto;
    opacity: 0.35;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity .3s ease;
}
.wf-modcard__sidelight--right {
    transform: scaleX(-1);
}

.wf-modcard:hover .wf-modcard__sidelight {
    opacity: 0.6;
}

/* --- TopRightBacker (z3) — pentagon bg for drain/polarity, above frame-top --- */
.wf-modcard__drain-backer {
    position: absolute;
    z-index: 3;
    height: auto;
    pointer-events: none;
}

/* --- Drain + Polarity (z5) — on the TopRightBacker --- */
.wf-modcard__drain {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    font-weight: 700;
    color: inherit;
    text-align: right;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.wf-modcard__polarity {
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.15em;
    flex-shrink: 0;
}

/* --- Name (z5) — centered on FrameBottom shelf --- */
.wf-modcard__name {
    position: absolute;
    z-index: 5;
    font-weight: 600;
    color: inherit;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    text-align: center;
    text-wrap: balance;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
}

/* --- Stats (z5) — below name, always visible --- */
.wf-modcard__stats {
    position: absolute;
    z-index: 5;
    line-height: 1.3;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    text-align: center;
    opacity: 1;
}

/* --- Category Tab (z5) — bottom of FrameBottom, uses LowerTab bg, always visible --- */
.wf-modcard__category-wrap {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    font-size: 6px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wf-modcard__category-bg {
    width: 100%;
    height: auto;
}
.wf-modcard__category {
    position: absolute;
    font-size: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    white-space: nowrap;
}

/* --- Rank Pips (z5) — at very bottom edge, diamond shape --- */
.wf-modcard__pips {
    position: absolute;
    z-index: 5;
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: center;
    width: 242px;
    left: 0;
}
.wf-modcard__pip {
    width: 12px;
    height: 12px;
    background: url('../cache/img/mod-assets/RankSlotActive.png') center / contain no-repeat;
    opacity: 0.25;
}
.wf-modcard__pip--active {
    opacity: 1;
}

/* --- Rank Line — behind pips, full container width, visible when maxed --- */
.wf-modcard__pips::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 30%;
    width: 100%;
    height: 4px;
    background: url('../cache/img/mod-assets/RankCompleteLine.png') center / 100% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.wf-modcard--maxed .wf-modcard__pips::after {
    opacity: 1;
}

/* --- Stance/Aura Icon (z1) — top center, inline SVG with fill=currentColor --- */
.wf-modcard__stance-aura {
    position: absolute;
    z-index: 1;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
    aspect-ratio: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.wf-modcard__stance-aura svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Owned / Maxed States --- */
.wf-modcard--owned {
    /* subtle highlight */
}
.wf-modcard--maxed::after {
    display: none;
}

/* --- Rarity text colors (per wiki) --- */
/* Set on card so all children (name, stats, drain, emblem) inherit */
.wf-modcard--common { color: #c8a290; }
.wf-modcard--uncommon { color: #e5e9ea; }
.wf-modcard--rare { color: #f1e4c2; }

.wf-modcard--legendary,
.wf-modcard--amalgam,
.wf-modcard--galvanized,
.wf-modcard--peculiar { color: #fff; }
.wf-modcard--riven { color: #9f7ac5; }
.wf-modcard--archon { color: #b5a162; }
.wf-modcard--requiem { color: #e5d7ae; }
.wf-modcard--tome { color: #e7cd8a; }
.wf-modcard--antivirus { color: #95f3f5; }
.wf-modcard--potency { color: #790a33; }

.wf-modcard--tektolyst .wf-modcard__name,
.wf-modcard--tektolyst .wf-modcard__stats,
.wf-modcard--tektolyst .wf-modcard__drain { color: #cabcbf; }

/* --- Set-Mod Header (z1) — top area emblem for set mods --- */
.wf-modcard__set-header {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

/* --- No-Assets Variants (Archon, Tektolyst, Peculiar) — plain fallback --- */
.wf-modcard--no-assets {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

/* --- Set-Header Rarity Tinting --- */
.wf-modcard--common .wf-modcard__set-header      { filter: sepia(1) hue-rotate(336deg) saturate(2) brightness(0.75); }
.wf-modcard--uncommon .wf-modcard__set-header     { filter: none; }
.wf-modcard--rare .wf-modcard__set-header         { filter: sepia(1) hue-rotate(358deg) saturate(1.9) brightness(0.9); }
.wf-modcard--legendary .wf-modcard__set-header    { filter: brightness(1.4) contrast(1.1) saturate(0.6); }

/* --- Rarity glow on hover --- */
.wf-modcard--common:hover     { box-shadow: 0 0 18px rgba(205,127,50,0.35); }
.wf-modcard--uncommon:hover   { box-shadow: 0 0 18px rgba(192,192,192,0.35); }
.wf-modcard--rare:hover       { box-shadow: 0 0 20px rgba(255,215,0,0.35); }
.wf-modcard--legendary:hover,
.wf-modcard--peculiar:hover    { box-shadow: 0 0 24px rgba(255,109,255,0.45); }
.wf-modcard--amalgam:hover    { box-shadow: 0 0 18px rgba(192,192,192,0.35); }
.wf-modcard--galvanized:hover { box-shadow: 0 0 18px rgba(192,192,192,0.35); }
.wf-modcard--riven:hover      { box-shadow: 0 0 20px rgba(100,180,255,0.35); }
.wf-modcard--archon:hover     { box-shadow: 0 0 20px rgba(181,161,98,0.45); }
.wf-modcard--requiem:hover    { box-shadow: 0 0 20px rgba(229,215,174,0.35); }
.wf-modcard--tome:hover       { box-shadow: 0 0 20px rgba(231,205,138,0.35); }
.wf-modcard--antivirus:hover  { box-shadow: 0 0 20px rgba(149,243,245,0.35); }
.wf-modcard--potency:hover    { box-shadow: 0 0 20px rgba(121,10,51,0.45); }
.wf-modcard--tektolyst:hover  { box-shadow: 0 0 18px rgba(202,188,191,0.35); }

/* --- Not owned: hover restore --- */
.wf-modcard:not(.wf-modcard--owned):hover {
    filter: grayscale(0.5);
    opacity: 0.9;
}

/* --- Mod rarity badge (modal) --- */
.wf-mod-rarity {
    font-weight: 600;
    font-size: .75rem;
}

/* Mod augment tag */
.wf-mod-augment-tag {
    color: var(--wf-accent);
    font-size: .75rem;
}

/* Mod augment info in modal */
.wf-mod-augment-info {
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(226, 183, 20, 0.08);
    border-radius: 6px;
    font-size: .85rem;
    color: var(--wf-accent);
}

/* Mod rank dots in modal — reuses wf-arcane-dot styling but with mod color */
.wf-mod-rank-dots {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.wf-mod-rank-dots .wf-arcane-dot.active {
    border-color: var(--wf-mod);
    color: var(--wf-mod);
}
.wf-mod-rank-dots .wf-arcane-dot.current {
    background: var(--wf-mod);
    color: #0d0d0d;
    border-color: var(--wf-mod);
}

/* Mod own button in modal (same style as wf-modal-built-btn) */
.wf-modal-mod-own-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 13px;
    color: var(--wf-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}
.wf-modal-mod-own-btn:hover {
    color: var(--wf-text);
}
/* wf-modal-mod/arcane ::before replaced by .wf-dcb */
.wf-modal-mod-own-btn.active {
    color: var(--wf-mod);
}

/* Arcane own button in modal */
.wf-modal-arcane-own-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--wf-text-dim);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 4px 0;
    transition: color 0.15s;
}
.wf-modal-arcane-own-btn:hover {
    color: var(--wf-text);
}
.wf-modal-arcane-own-btn.active {
    color: var(--wf-arcane);
}

/* ============================================================
   CHANGELOG MODAL
   ============================================================ */

dialog.wf-changelog {
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: 12px;
    max-width: 540px;
    width: calc(100% - 48px);
    max-height: 80vh;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    color: var(--wf-text);
    z-index: 210;
}
dialog.wf-changelog[open] {
    display: flex;
    flex-direction: column;
    animation: wf-modal-in 0.175s ease-out;
}
dialog.wf-changelog[open]::backdrop {
    background: rgba(0, 0, 0, 0.7);
    animation: wf-backdrop-in 0.15s ease-out;
}
dialog.wf-changelog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}
dialog.wf-changelog.wf-closing {
    animation: wf-modal-out 0.175s ease-in forwards;
}
dialog.wf-changelog.wf-closing::backdrop {
    animation: wf-backdrop-out 0.175s ease-in forwards;
}

.wf-changelog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--wf-border);
    flex-shrink: 0;
}
.wf-changelog-header h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--wf-accent);
    margin: 0;
}
.wf-changelog-close {
    background: none;
    border: none;
    outline: none;
    color: var(--wf-text-dim);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 0;
    transition: color 0.15s;
}
.wf-changelog-close:hover {
    color: var(--wf-text);
}

.wf-changelog-body {
    overflow-y: auto;
    padding: 16px 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--wf-border) transparent;
}

.wf-changelog-release {
    margin-bottom: 20px;
}
.wf-changelog-release:last-child {
    margin-bottom: 0;
}

.wf-changelog-version {
    font-size: 14px;
    font-weight: 600;
    color: var(--wf-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-changelog-version-tag {
    background: var(--wf-accent);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.wf-changelog-version-name {
    font-weight: 400;
    font-size: 13px;
    color: var(--wf-text-dim);
}
.wf-changelog-version-date {
    color: var(--wf-text-dim);
    font-weight: 400;
    font-size: 12px;
    margin-left: auto;
}

.wf-changelog-category {
    margin-bottom: 6px;
}
.wf-changelog-category-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.wf-changelog-category-label--new { color: var(--wf-green); }
.wf-changelog-category-label--improved { color: var(--wf-blue); }
.wf-changelog-category-label--fixed { color: var(--wf-orange); }

.wf-changelog-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 14px;
}
.wf-changelog-list li {
    font-size: 13px;
    font-weight: 300;
    color: var(--wf-text);
    padding: 1px 0;
    position: relative;
    padding-left: 12px;
}
.wf-changelog-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--wf-text-dim);
}

.wf-changelog-divider {
    border: none;
    border-top: 1px solid var(--wf-border);
    margin: 16px 0;
}

/* Reset section in changelog */
.wf-reset-section {
    padding-top: 4px;
}
.wf-reset-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e05555;
    margin-bottom: 6px;
}
.wf-reset-desc {
    font-size: 0.78rem;
    color: var(--wf-text-dim);
    line-height: 1.45;
    margin-bottom: 12px;
}
.wf-reset-prompt {
    font-size: 0.78rem;
    color: var(--wf-text);
    margin-bottom: 8px;
}
.wf-reset-prompt strong {
    color: var(--wf-accent);
    user-select: none;
}
.wf-reset-input {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--wf-border);
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    color: var(--wf-text);
    font-size: 0.82rem;
    font-family: inherit;
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.wf-reset-input:focus {
    border-color: var(--wf-accent);
}
.wf-reset-btn {
    padding: 7px 20px;
    border-radius: 6px;
    border: 1px solid #e05555;
    background: transparent;
    color: #e05555;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.wf-reset-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.wf-reset-btn:not(:disabled):hover {
    background: #e05555;
    color: #fff;
}
.wf-reset-success {
    text-align: center;
    padding: 16px 0;
    color: var(--wf-accent);
    font-weight: 600;
    font-size: 0.88rem;
}

.wf-changelog-footer {
    padding: 0 20px 16px;
    text-align: center;
}
.wf-changelog-show-all {
    background: none;
    border: 1px solid var(--wf-border);
    color: var(--wf-text-dim);
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.15s, border-color 0.15s;
}
.wf-changelog-show-all:hover {
    color: var(--wf-text);
    border-color: var(--wf-text-dim);
}

@media (max-width: 600px) {
    dialog.wf-changelog {
        max-width: none;
        width: calc(100% - 24px);
        max-height: 85vh;
    }
    .wf-changelog-body {
        padding: 12px 14px 16px;
    }
}

/* ============================================================
   PROGRESS TAB
   ============================================================ */

.wf-progress-tab {
    padding: 24px;
}

.wf-toolbar-progress {
    justify-content: space-between;
}

.wf-progress-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--wf-text-dim);
    font-weight: 500;
}

.wf-progress-stats span:not(.wf-progress-stats-sep) {
    color: var(--wf-text);
}

.wf-progress-stats-sep {
    opacity: 0.4;
}

.wf-progress-columns {
    display: grid;
    grid-template-columns: 3fr 3fr 4fr;
    gap: 16px;
}

.wf-progress-card {
    background: var(--wf-card);
    border: 1px solid var(--wf-border);
    border-radius: 10px;
    padding: 16px;
}

.wf-progress-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wf-accent);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wf-border);
}

/* Quest rows */
.wf-progress-quest-row {
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}
.wf-progress-quest-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.wf-progress-quest-row.completed {
    opacity: 1;
}

.wf-progress-quest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
}

.wf-progress-quest input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* wf-progress-cb replaced by .wf-dcb */

.wf-progress-quest-name {
    font-weight: 500;
    color: var(--wf-coll-missing);
    flex: 1;
}

.wf-progress-quest-row.completed .wf-progress-quest-name {
    color: #fff;
}

.wf-progress-update {
    font-size: 0.7rem;
    color: var(--wf-text-dim);
    opacity: 0.5;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.wf-progress-quest-details {
    font-size: 0.75rem;
    color: var(--wf-text-dim);
    padding: 0 0 2px 32px;
    opacity: 0.7;
    display: none;
}
.wf-progress-quest-row.completed .wf-progress-quest-details,
.spoiler-mode .wf-progress-quest-details {
    display: block;
}
.wf-progress-quest-details .detail-wf { color: #4dabf7; }
.wf-progress-quest-details .detail-weapon { color: #e8590c; }
.wf-progress-quest-details .detail-aw { color: #20c997; }
.wf-progress-quest-details .detail-feature { color: #be4bdb; }
.wf-progress-quest-details .detail-planet { color: #fab005; }

/* Quest info toggle button — visible when quest completed or spoiler mode */
/* Quest info text (visible when completed or spoiler mode) */
.wf-quest-info-text {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--wf-text-dim);
    margin-bottom: 4px;
}

/* Quest info labels (items, features, planets) */
.wf-quest-info-labels {
    font-size: 0.72rem;
    line-height: 1.4;
}

/* Progress onboarding banner */
.wf-progress-tab:has(.wf-progress-onboarding) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}
@keyframes wf-onboarding-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(226,183,20,0.25); }
    50% { box-shadow: 0 0 22px rgba(226,183,20,0.45); }
}
.wf-progress-onboarding {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--wf-accent);
    border-radius: 10px;
    padding: 20px 24px;
    text-align: center;
    max-width: 540px;
    box-shadow: 0 0 12px rgba(226,183,20,0.25);
    animation: wf-onboarding-glow 2.5s ease-in-out infinite;
}
.wf-progress-onboarding-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wf-text);
    margin-bottom: 8px;
}
.wf-progress-onboarding-text {
    font-size: 0.82rem;
    color: var(--wf-text-dim);
    line-height: 1.5;
    margin-bottom: 16px;
}
.wf-progress-onboarding-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.wf-progress-onboarding-btn {
    padding: 7px 18px;
    border-radius: 6px;
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-dim);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}
.wf-progress-onboarding-btn:hover {
    border-color: var(--wf-accent);
    color: var(--wf-text);
}
.wf-progress-onboarding-btn.primary {
    background: var(--wf-accent);
    border-color: var(--wf-accent);
    color: #1a1a2e;
}
.wf-progress-onboarding-btn.primary:hover {
    filter: brightness(1.15);
}

/* Starter selection */
.wf-starter-selection {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 0 32px;
}
.wf-starter-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wf-text);
    text-align: center;
    margin-bottom: 6px;
}
.wf-starter-subtitle {
    font-size: 0.82rem;
    color: var(--wf-text-dim);
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.5;
}
.wf-starter-group {
    margin-bottom: 24px;
}
.wf-starter-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wf-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    text-align: center;
}

/* Warframe row: large orbs centered */
.wf-starter-group-items {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.wf-starter-warframes {
    margin-bottom: 56px;
}

/* Weapons: 3 columns side by side */
.wf-starter-weapons-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.wf-starter-weapon-col {
    margin-bottom: 0;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px 12px 20px;
}
.wf-starter-weapon-col .wf-starter-group-items {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
}

/* Card base */
.wf-starter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    cursor: pointer;
    position: relative;
    text-align: center;
}
.wf-starter-warframes .wf-starter-card {
    width: 200px;
}
.wf-starter-weapon-col .wf-starter-card {
    width: 130px;
}
.wf-starter-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Orb: visible sphere behind the image */
.wf-starter-card-orb {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0 auto;
}

/* The sphere background */
.wf-starter-card-orb::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(120,140,180,0.18), rgba(30,40,60,0.35));
    border: 2px solid rgba(255,255,255,0.08);
    transition: box-shadow 0.3s, border-color 0.3s;
}

.wf-starter-warframes .wf-starter-card-orb::before {
    width: 100%;
    aspect-ratio: 1;
}

.wf-starter-weapons .wf-starter-card-orb::before {
    width: 85px;
    height: 85px;
}

/* Image: rounded bottom, sticks out the top */
.wf-starter-card-orb img {
    position: relative;
    z-index: 1;
    border-radius: 0 0 50% 50%;
    object-fit: contain;
    filter: brightness(0.85) saturate(0.9);
    transition: filter 0.25s;
}

.wf-starter-warframes .wf-starter-card-orb img {
    width: 120%;
    height: auto;
    margin-bottom: 2%;
    filter: brightness(0.7) saturate(0) grayscale(1);
}

.wf-starter-weapons .wf-starter-card-orb img {
    width: 100px;
    height: auto;
    transform: scale(1.2);
    transition: filter 0.25s, transform 0.25s;
}

/* Weapons: hover zooms to 1.4 */
.wf-starter-weapons .wf-starter-card:hover .wf-starter-card-orb img {
    transform: scale(1.4);
}

/* Weapons: when a sibling is selected, dim the unselected ones */
.wf-starter-weapons:has(.selected) .wf-starter-card:not(.selected) .wf-starter-card-orb img {
    transform: scale(1);
    filter: brightness(0.5) saturate(0.4);
}
.wf-starter-weapons:has(.selected) .wf-starter-card:not(.selected) .wf-starter-card-name {
    opacity: 0.4;
}
.wf-starter-weapons:has(.selected) .wf-starter-card:not(.selected) .wf-starter-card-desc {
    opacity: 0.3;
}
/* But restore on hover even when dimmed */
.wf-starter-weapons:has(.selected) .wf-starter-card:not(.selected):hover .wf-starter-card-orb img {
    transform: scale(1.4);
    filter: brightness(0.85) saturate(0.9);
}
.wf-starter-weapons:has(.selected) .wf-starter-card:not(.selected):hover .wf-starter-card-name {
    opacity: 0.8;
}

/* Warframes: when one is selected, dim the others */
.wf-starter-warframes:has(.selected) .wf-starter-card:not(.selected) .wf-starter-card-orb img {
    filter: brightness(0.5) saturate(0) grayscale(1);
}
.wf-starter-warframes:has(.selected) .wf-starter-card:not(.selected) .wf-starter-card-name {
    opacity: 0.4;
}
.wf-starter-warframes:has(.selected) .wf-starter-card:not(.selected) .wf-starter-card-desc {
    opacity: 0.3;
}
.wf-starter-warframes:has(.selected) .wf-starter-card:not(.selected):hover .wf-starter-card-orb img {
    filter: brightness(0.85) saturate(0.9);
}
.wf-starter-warframes:has(.selected) .wf-starter-card:not(.selected):hover .wf-starter-card-name {
    opacity: 0.8;
}

/* Hover */
.wf-starter-card:hover .wf-starter-card-orb::before {
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 0 12px rgba(120,160,220,0.2);
}
.wf-starter-card:hover .wf-starter-card-orb img {
    filter: brightness(1) saturate(1);
}

/* Selected */
.wf-starter-card.selected .wf-starter-card-orb::before {
    border-width: 3px;
    border-color: var(--wf-accent);
    background: radial-gradient(circle at 40% 35%, rgba(226,183,20,0.25), rgba(226,183,20,0.10));
    box-shadow: 0 0 12px rgba(226,183,20,0.25);
}
.wf-starter-card.selected .wf-starter-card-orb img {
    filter: brightness(1.15) saturate(1.1);
}

/* Name & desc below orb */
.wf-starter-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wf-text-dim);
    margin-top: 10px;
    transition: color 0.2s;
}
.wf-starter-weapon-col .wf-starter-card-name {
    font-size: 0.8rem;
    margin-top: 8px;
}
.wf-starter-card.selected .wf-starter-card-name {
    color: var(--wf-accent);
}
.wf-starter-card-desc {
    font-size: 0.7rem;
    color: var(--wf-text-dim);
    line-height: 1.4;
    margin-top: 3px;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.wf-starter-weapon-col .wf-starter-card-desc {
    font-size: 0.66rem;
}
.wf-starter-card.selected .wf-starter-card-desc,
.wf-starter-card:hover .wf-starter-card-desc {
    opacity: 0.85;
}

/* Confirm button */
.wf-starter-actions {
    text-align: center;
    margin-top: 28px;
}
.wf-starter-actions .wf-progress-onboarding-btn {
    padding: 10px 36px;
    font-size: 0.88rem;
}
.wf-starter-actions .wf-progress-onboarding-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: none;
}

/* Responsive: stack weapon columns on small screens */
@media (max-width: 540px) {
    .wf-starter-weapons-row {
        grid-template-columns: 1fr;
    }
    .wf-starter-weapon-col .wf-starter-group-items {
        flex-direction: row;
    }
}

/* Progress toolbar options */
.wf-progress-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--wf-text-dim);
}

.wf-progress-option input[type="checkbox"] {
    accent-color: var(--wf-accent);
    cursor: pointer;
}

/* Planet grid */
.wf-progress-planet-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    padding: 4px 0;
}

.wf-progress-planet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    user-select: none;
}

.wf-progress-planet:hover .wf-progress-planet-img {
    transform: scale(1.15);
}

.wf-progress-planet.unlocked:hover .wf-progress-planet-img {
    filter: drop-shadow(0 0 10px rgba(226, 183, 20, 0.6)) drop-shadow(0 0 20px rgba(226, 183, 20, 0.35));
}

.wf-progress-planet:active .wf-progress-planet-img {
    transform: scale(0.95);
}

.wf-progress-planet input[type="checkbox"] {
    display: none;
}

.wf-progress-planet-img {
    width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    transition: opacity 0.3s, filter 0.3s, transform 0.2s;
    opacity: 0.3;
    filter: grayscale(1) brightness(0.7);
}

.wf-progress-planet.unlocked .wf-progress-planet-img {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(226, 183, 20, 0.5)) drop-shadow(0 0 12px rgba(226, 183, 20, 0.25));
}

.wf-progress-planet-name {
    color: var(--wf-text-dim);
    font-weight: 500;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.2;
    transition: color 0.2s;
}

.wf-progress-planet.unlocked .wf-progress-planet-name {
    color: var(--wf-text);
}

/* ============================================================
   STAR CHART GRAPH (vertical, in column 3)
   ============================================================ */

.wf-starchart {
    position: relative;
    width: 100%;
    overflow: visible;
    /* Height calculated by JS based on rows */
}

/* SVG connection lines */
.wf-starchart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.wf-starchart-line {
    stroke: var(--wf-coll-missing);
    stroke-width: 2px;
    stroke-linecap: round;
    transition: stroke 0.5s ease;
    vector-effect: non-scaling-stroke;
}

.wf-starchart-line.available {
    stroke: var(--wf-coll-missing);
}

.wf-starchart-line.unlocked {
    stroke: var(--wf-coll-mastered);
}

/* Planet nodes (absolutely positioned) */
.wf-starchart-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    width: 160px;
}

.wf-starchart-node:hover {
    z-index: 5;
}

.wf-starchart-node input[type="checkbox"] {
    display: none;
}

/* Diamond container behind planet image — raute larger than planet */
.wf-starchart-node-orb {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Diamond pseudo-elements removed — now using inline SVG (.wf-dcb-svg) */
.wf-starchart-node-orb::before,
.wf-starchart-node-orb::after {
    display: none;
}

/* Unlocked: reveal the gold border by animating clip-path */
/* Planet diamond SVG — uses same .wf-dcb-base/.wf-dcb-fill classes */
.wf-planet-diamond {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wf-planet-diamond .wf-dcb-base {
    stroke-width: 0.4;
    fill: var(--wf-card);
}

.wf-planet-diamond .wf-dcb-fill {
    stroke-width: 0.4;
    stroke: var(--wf-coll-mastered);
}

/* Unlocked planet: reveal the gold stroke */
.wf-starchart-node.unlocked .wf-dcb-fill {
    stroke-dashoffset: 0;
    fill: rgba(226, 183, 20, 0.06);
}

.wf-starchart-node-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: opacity 0.6s ease-out, filter 0.6s ease-out, transform 0.2s;
    opacity: 0.3;
    filter: grayscale(1) brightness(0.7);
}

.wf-starchart-node:hover .wf-starchart-node-img {
    transform: scale(1.15);
}

.wf-starchart-node:active .wf-starchart-node-img {
    transform: scale(0.9);
}

.wf-starchart-node.unlocked .wf-starchart-node-img {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(226, 183, 20, 0.4));
}

.wf-starchart-node.unlocked:hover .wf-starchart-node-img {
    filter: drop-shadow(0 0 8px rgba(226, 183, 20, 0.5));
}

.wf-starchart-node-name {
    color: var(--wf-text-dim);
    font-weight: 500;
    font-size: 0.68rem;
    text-align: center;
    line-height: 1.2;
    transition: color 0.2s;
    background: var(--wf-card);
    padding: 2px 6px;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

.wf-starchart-node.unlocked .wf-starchart-node-name {
    color: var(--wf-text);
}

/* Quest-unlocked planet subtitle */
.wf-starchart-node-quest {
    color: var(--wf-text-dim);
    font-size: 0.6rem;
    text-align: center;
    opacity: 0.6;
    line-height: 1.1;
}

/* Quest-unlocked section title */
.wf-starchart-quest-title {
    font-size: 0.65rem;
    color: var(--wf-text-dim);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 20px 0 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 16px;
}

/* Quest-unlocked planets grid (normal flow) */
.wf-starchart-quest-grid {
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
}

.wf-starchart-quest-grid .wf-starchart-node {
    position: static;
    transform: none;
}

/* Junction markers with hover tooltip */
.wf-starchart-junction {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    color: var(--wf-coll-missing);
    transition: all 0.3s;
    padding: 6px;
    /* No clip-path on outer — tooltip must overflow */
}

/* Diamond background shape via pseudo-element */
.wf-starchart-junction::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wf-card);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index: -1;
}

.wf-junction-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.wf-starchart-junction:hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 10;
    color: var(--wf-coll-mastered);
}

.wf-starchart-junction.available {
    color: var(--wf-coll-missing);
}

.wf-starchart-junction.unlocked {
    color: var(--wf-coll-mastered);
}

/* Junction hover tooltip */
.wf-junction-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--wf-card);
    border: 1px solid var(--wf-coll-mastered);
    border-radius: 4px;
    padding: 5px 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
}

.wf-starchart-junction:hover .wf-junction-tooltip {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Flip tooltip to left side */
.wf-junction-tip-left .wf-junction-tooltip {
    left: auto;
    right: calc(100% + 10px);
}

.wf-junction-tooltip strong {
    color: var(--wf-accent);
    font-size: 0.72rem;
}

.wf-junction-tooltip span {
    color: var(--wf-text-dim);
    font-size: 0.65rem;
}

/* Notification dot on tab */
.wf-section-tab.has-dot {
    position: relative;
}

.wf-section-tab.has-dot::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #e53935;
    border-radius: 50%;
    animation: wf-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes wf-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Column 3 wrapper: stack donut + planets vertically */
.wf-progress-col3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Collection donut card */
.wf-donut-card {
    background: var(--wf-card);
    border: 1px solid var(--wf-border);
    border-radius: 10px;
    padding: 16px;
}

.wf-donut-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wf-donut-svg {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}

/* Legend (right side of donut) */
.wf-donut-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wf-donut-legend-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wf-donut-legend-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wf-text);
}

.wf-donut-legend-stats {
    display: flex;
    gap: 12px;
}

.wf-donut-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wf-donut-stat-pct {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.wf-donut-stat-label {
    font-size: 0.58rem;
    color: var(--wf-text-dim);
    opacity: 0.7;
    white-space: nowrap;
}

/* Donut ring reveal animation */
@keyframes wf-donut-reveal {
    to { stroke-dashoffset: 0; }
}

/* Donut ↔ Legend hover linking */
.wf-donut-svg path,
.wf-donut-legend-row {
    transition: opacity 0.35s ease;
}

.wf-donut-hover .wf-donut-svg g:not(.wf-ring-active) path,
.wf-donut-hover .wf-donut-legend-row:not(.wf-ring-active) {
    opacity: 0.25;
}

/* ============================================================
   RELIC FARM MODAL
   ============================================================ */

dialog.wf-relic-farm {
    max-width: 960px;
}

/* Topbar: title + tabs + close inline */
.wf-relic-farm-topbar {
    pointer-events: auto;
    background: var(--wf-surface);
    border-bottom: 1px solid var(--wf-border);
    padding: 12px 20px;
    gap: 12px;
    margin-bottom: 0;
    position: static;
}
.wf-relic-farm-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--wf-text);
    flex-shrink: 0;
}

.wf-relic-farm-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
}

.wf-relic-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    background: transparent;
    color: var(--wf-text-dim);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.wf-relic-tab:hover {
    background: var(--wf-hover);
    color: var(--wf-text);
}
.wf-relic-tab:active {
    transform: scale(0.97);
}
.wf-relic-tab.active {
    background: var(--wf-accent);
    color: var(--wf-bg);
    border-color: var(--wf-accent);
}
.wf-relic-tab-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.wf-relic-tab-count {
    font-size: 10px;
    background: rgba(255,255,255,0.15);
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}
.wf-relic-tab:not(.active) .wf-relic-tab-count {
    background: var(--wf-hover);
}
.wf-relic-tab-empty {
    opacity: 0.4;
}

/* Grid: 4 columns */
.wf-relic-farm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 16px 20px 20px;
    overflow-y: auto;
    max-height: 70vh;
}

/* Tile: same look as .wf-part */
.wf-relic-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 16px 12px;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background 0.15s ease;
}
.wf-relic-tile:hover {
    background: rgba(0, 0, 0, 0.18);
}
.wf-relic-tile:active {
    background: rgba(0, 0, 0, 0.25);
}
.wf-relic-tile-owned {
    opacity: 0.45;
}

/* Hidden native checkbox */
.wf-relic-tile > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Diamond checkbox states via label */
.wf-relic-tile:has(input:checked) .wf-dcb .wf-dcb-fill {
    stroke-dashoffset: 0;
    fill: var(--dcb-color, var(--wf-green));
    transition: stroke-dashoffset 0.6s ease-out, fill 0.3s ease 0.6s;
}
.wf-relic-tile:has(input:checked) .wf-dcb .wf-dcb-icon {
    color: var(--wf-surface);
    transition: color 0.3s ease 0.6s;
}

.wf-relic-tile-item-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--wf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-relic-tile-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
}
.wf-relic-tile-img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    opacity: 0.85;
}

.wf-relic-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.wf-relic-tile-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wf-relic-tile-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-relic-tile-relics {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
.wf-relic-label {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
    line-height: 1.4;
    background: rgba(76, 175, 80, 0.15);
    color: #6fcf6f;
}
.wf-relic-label.common {
    border-bottom-color: var(--wf-rarity-common);
    background: rgba(205, 127, 50, 0.12);
    color: var(--wf-rarity-common);
}
.wf-relic-label.uncommon {
    border-bottom-color: var(--wf-rarity-uncommon);
    background: rgba(192, 192, 192, 0.12);
    color: var(--wf-rarity-uncommon);
}
.wf-relic-label.rare {
    border-bottom-color: var(--wf-rarity-rare);
    background: rgba(255, 215, 0, 0.12);
    color: var(--wf-rarity-rare);
}
.wf-relic-label.vaulted {
    color: #f06060;
    background: rgba(244, 67, 54, 0.15);
}

.wf-relic-farm-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--wf-text-dim);
    font-size: 14px;
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .wf-relic-farm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive */
@media (max-width: 800px) {
    .wf-progress-columns {
        grid-template-columns: 1fr;
    }
}