/* ============================================================
   Game Database — Styles
   ============================================================ */

/* ── Hub Page ─────────────────────────────────────────────── */
.db-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1rem 2rem;
}

.db-hub__title {
    font-size: 2rem;
    color: var(--gold, #c4a24e);
    text-align: center;
    margin-bottom: 0.5rem;
}

.db-hub__subtitle {
    text-align: center;
    color: var(--text-muted, #7a7870);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.db-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.db-hub__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--panel-bg, #13151a);
    border: 1px solid var(--border, #252830);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text, #e0ddd5);
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.db-hub__card:hover {
    border-color: var(--gold, #c4a24e);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(196, 162, 78, 0.15);
}

.db-hub__card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
}

.db-hub__card-info {
    flex: 1;
}

.db-hub__card-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #e0ddd5);
}

.db-hub__card-count {
    font-size: 0.85rem;
    color: var(--text-muted, #7a7870);
    margin-top: 2px;
}

.db-hub__card-arrow {
    color: var(--text-muted, #7a7870);
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.db-hub__card:hover .db-hub__card-arrow {
    transform: translateX(4px);
    color: var(--gold, #c4a24e);
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.db-breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.25rem 1rem 0;
    font-size: 0.85rem;
}

.db-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.db-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted, #7a7870);
}

.db-breadcrumbs li:not(:last-child)::after {
    content: '›';
    margin-left: 0.25rem;
    color: var(--text-muted, #7a7870);
}

.db-breadcrumbs a {
    color: var(--gold, #c4a24e);
    text-decoration: none;
}

.db-breadcrumbs a:hover {
    text-decoration: underline;
}

/* ── List Page ────────────────────────────────────────────── */
.db-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1rem 3rem;
}

.db-page__header {
    margin-bottom: 1.5rem;
}

.db-page__title {
    font-size: 1.75rem;
    color: var(--gold, #c4a24e);
    margin-bottom: 0.25rem;
}

.db-page__count {
    color: var(--text-muted, #7a7870);
    font-size: 0.9rem;
}

/* ── Filters ──────────────────────────────────────────────── */
.db-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5rem;
    align-items: center;
    position: sticky;
    top: var(--header-height, 64px);
    z-index: 50;
    background: var(--bg-panel, #1A1B1F);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--border, #252830);
}

.db-filters__group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.db-filters__label {
    display: none;
}

.db-filters__select,
.db-filters__input {
    background: var(--bg-input, #1F2025);
    border: 1px solid var(--border, #252830);
    color: var(--text, #e0ddd5);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 140px;
}

.db-filters__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7870' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 12px;
    cursor: pointer;
}

.db-filters__select:focus,
.db-filters__input:focus {
    outline: none;
    border-color: var(--gold, #c4a24e);
}

.db-filters__btn {
    background: transparent;
    color: var(--gold, #c4a24e);
    border: 1px solid var(--gold, #c4a24e);
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.db-filters__btn:hover {
    background: var(--gold, #c4a24e);
    color: #000;
}

.db-filters__reset {
    background: transparent;
    color: var(--text-muted, #7a7870);
    border: 1px solid var(--border, #252830);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.db-filters__reset:hover {
    color: var(--text, #e0ddd5);
    border-color: var(--text-muted, #7a7870);
}

/* ── Table ────────────────────────────────────────────────── */
.db-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.db-table th {
    text-align: left;
    padding: 0.75rem 0.75rem;
    color: var(--text-muted, #7a7870);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border, #252830);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--bg-panel, #1A1B1F);
    z-index: 1;
}

.db-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(37, 40, 48, 0.5);
    vertical-align: middle;
}

.db-table tbody tr {
    transition: background 0.15s;
}

.db-table tbody tr:hover {
    background: #22232a;
}

.db-table__link {
    color: var(--text, #e0ddd5);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.db-table__link:hover {
    color: var(--gold, #c4a24e);
}

.db-table__icon {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.db-table__name {
    font-weight: 500;
}

/* ── Rarity colors (via ThemeColors CSS vars from layout.php) ── */
.rarity--mythic_unique, .rarity--mythic { color: var(--rarity-mythic); }
.rarity--unique    { color: var(--rarity-unique); }
.rarity--legendary { color: var(--rarity-legendary); }
.rarity--rare      { color: var(--rarity-rare); }
.rarity--magic     { color: var(--rarity-magic); }
.rarity--normal    { color: var(--rarity-common); }

.rarity-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rarity-badge--mythic_unique, .rarity-badge--mythic {
    background: color-mix(in srgb, var(--rarity-mythic) 15%, transparent);
    color: var(--rarity-mythic);
}
.rarity-badge--unique {
    background: color-mix(in srgb, var(--rarity-unique) 15%, transparent);
    color: var(--rarity-unique);
}
.rarity-badge--legendary {
    background: color-mix(in srgb, var(--rarity-legendary) 15%, transparent);
    color: var(--rarity-legendary);
}

/* ── Type badges ──────────────────────────────────────────── */
.type-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted, #7a7870);
}

.type-badge--active { background: rgba(196, 162, 78, 0.15); color: #c4a24e; }
.type-badge--passive { background: rgba(74, 144, 217, 0.15); color: #4a90d9; }
.type-badge--key_passive { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.type-badge--upgrade { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

.type-badge--ritual { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.type-badge--invocation { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.category-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
}

.category-badge--offensive { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.category-badge--defensive { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.category-badge--utility { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.category-badge--resource { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.category-badge--mobility { background: rgba(168, 85, 247, 0.15); color: #a855f7; }

/* ── Pagination ───────────────────────────────────────────── */
.db-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.db-pagination__link,
.db-pagination__current,
.db-pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    text-decoration: none;
}

.db-pagination__link {
    color: var(--text, #e0ddd5);
    background: var(--panel-bg, #13151a);
    border: 1px solid var(--border, #252830);
    transition: border-color 0.2s, background 0.2s;
}

.db-pagination__link:hover {
    border-color: var(--gold, #c4a24e);
    background: rgba(196, 162, 78, 0.1);
}

.db-pagination__current {
    background: var(--gold, #c4a24e);
    color: #000;
    font-weight: 600;
}

.db-pagination__dots {
    color: var(--text-muted, #7a7870);
}

/* ── Detail Page ──────────────────────────────────────────── */
.db-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.db-detail__header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.db-detail__icon {
    width: 94px;
    height: 94px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.db-detail__title-group {
    flex: 1;
}

.db-detail__title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.db-detail__subtitle {
    color: var(--text-muted, #7a7870);
    font-size: 0.95rem;
}

.db-detail__badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* ── Detail Sections ──────────────────────────────────────── */
.db-section {
    background: var(--panel-bg, #13151a);
    border: 1px solid var(--border, #252830);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.db-section__title {
    font-size: 1rem;
    color: var(--gold, #c4a24e);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.db-section__text {
    color: var(--text, #e0ddd5);
    line-height: 1.6;
    font-size: 0.95rem;
}

.db-section__text--muted {
    color: var(--text-muted, #7a7870);
    font-style: italic;
}

/* ── Affix list (items) ───────────────────────────────────── */
.db-affixes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.db-affixes li {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(37, 40, 48, 0.5);
    display: flex;
    gap: 0.3rem;
}

.db-affixes li:last-child {
    border-bottom: none;
}

.db-affix-name {
    color: var(--text, #e0ddd5);
}

.db-affix-value {
    color: var(--text, #e0ddd5);
    white-space: nowrap;
}

/* ── Tab Count Badge ─────────────────────────────────────── */
.db-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--gold, #c4a24e);
    color: #000;
    margin-left: 4px;
    line-height: 1;
}

/* ── Build Cards inside item-detail tabs ─────────────────── */
.db-tabs__panel .build-card__skill-icon {
    width: 36px;
    height: 36px;
}
.db-tabs__panel .build-card__skills {
    gap: 3px;
    padding-right: 0.5rem;
}
.db-tabs__panel .build-card__labels {
    padding-right: 0.5rem;
}
.db-tabs__panel .build-card__thumbnail {
    width: 60px;
    min-height: 72px;
}
.db-tabs__panel .build-card__class-icon {
    width: 36px;
    height: 36px;
}
.db-tabs__panel .build-card {
    min-height: 72px;
}

/* ── Related Items Grid ───────────────────────────────────── */
.db-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.db-related-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, #252830);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text, #e0ddd5);
    transition: border-color 0.2s;
}

.db-related-card:hover {
    border-color: var(--gold, #c4a24e);
}

.db-related-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.db-related-card__name {
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Info Grid (detail page key-value pairs) ──────────────── */
.db-info-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.9rem;
}

.db-info-grid dt {
    color: var(--text-muted, #7a7870);
    font-weight: 500;
}

.db-info-grid dd {
    color: var(--text, #e0ddd5);
    margin: 0;
}

/* ── Detail Tabs (matches build-editor tabs) ─────────────── */
.db-tabs {
    margin-top: 2rem;
}

.db-tabs__nav {
    display: flex;
    background: #13151a;
    border-bottom: 2px solid var(--border-color, #252830);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.db-tabs__nav::-webkit-scrollbar {
    display: none;
}

.db-tabs__btn {
    flex: 0 0 auto;
    padding: 0.85rem 1.25rem;
    color: var(--text-secondary, #7a7870);
    cursor: pointer;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.db-tabs__btn:hover {
    color: var(--text-primary, #e0ddd5);
    background: var(--bg-panel-hover, rgba(255,255,255,0.03));
}

.db-tabs__btn--active {
    color: var(--gold, #c4a24e);
    border-bottom-color: var(--gold, #c4a24e);
    background: var(--bg-panel, rgba(255,255,255,0.02));
}

.db-tabs__panel {
    display: none;
    padding: 1.25rem 0;
}

.db-tabs__panel--active {
    display: block;
}

.db-tabs__empty {
    color: var(--text-muted, #7a7870);
    font-size: 0.9rem;
    font-style: italic;
    padding: 1rem 0;
}

/* ── No Results ───────────────────────────────────────────── */
.db-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #7a7870);
}

.db-empty__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.db-empty__text {
    font-size: 1.1rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .db-hub__grid {
        grid-template-columns: 1fr;
    }

    .db-page__title,
    .db-hub__title {
        font-size: 1.4rem;
    }

    .db-filters {
        flex-direction: column;
    }

    .db-filters__select,
    .db-filters__input {
        width: 100%;
        min-width: 0;
    }

    .db-detail__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .db-detail__badges {
        justify-content: center;
    }

    .db-tabs__btn {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }

    .db-info-grid {
        grid-template-columns: 1fr;
    }

    .db-info-grid dt {
        margin-top: 0.5rem;
    }

    .db-table {
        font-size: 0.8rem;
    }

    .db-table th,
    .db-table td {
        padding: 0.5rem;
    }

    .db-table__icon {
        width: 26px;
        height: 26px;
    }

    /* Hide less important columns on mobile */
    .db-table .hide-mobile {
        display: none;
    }
}

@media (max-width: 480px) {
    .db-hub__card {
        padding: 1rem;
    }

    .db-related-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Card Grid (Mercs, Classes) ──────────────────────────── */
.db-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-top: 1.5rem;
}

.db-card-grid--mercs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.db-card-grid--classes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.db-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #13151a;
    border: 1px solid #252830;
    border-radius: 8px;
    text-decoration: none;
    color: #e0ddd5;
    transition: border-color 0.2s, transform 0.2s;
}
.db-card:hover {
    border-color: var(--merc-color, var(--class-color, #c4a24e));
    transform: translateY(-2px);
}

.db-card__portrait {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.db-card--class .db-card__portrait { width: 72px; height: 72px; }

.db-card__body { flex: 1; min-width: 0; }
.db-card__name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--merc-color, var(--class-color, #c4a24e));
}
.db-card__role {
    font-size: 0.85rem;
    color: #7a7870;
    margin: 0.15rem 0 0;
}
.db-card__mechanic {
    font-size: 0.8rem;
    color: #8b5cf6;
    margin: 0.1rem 0 0;
}
.db-card__stat {
    font-size: 0.8rem;
    color: #7a7870;
    margin: 0.25rem 0 0;
}
.db-card__stats {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #7a7870;
    margin-top: 0.35rem;
}
.db-card__arrow {
    font-size: 1.5rem;
    color: #3a3a45;
    flex-shrink: 0;
    transition: color 0.2s;
}
.db-card:hover .db-card__arrow {
    color: var(--merc-color, var(--class-color, #c4a24e));
}

/* ── Skill List (Merc detail) ────────────────────────────── */
.db-skill-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.db-skill-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #13151a;
    border: 1px solid #252830;
    border-radius: 6px;
}
.db-skill-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
}
.db-skill-item__info { flex: 1; min-width: 0; }
.db-skill-item__name {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: #e0ddd5;
}
.db-skill-item__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.db-skill-item__ranks {
    font-size: 0.75rem;
    color: #7a7870;
}
.db-skill-item__desc {
    font-size: 0.85rem;
    color: #a09f97;
    margin: 0.35rem 0 0;
    line-height: 1.4;
}

/* ── Class Detail Links ──────────────────────────────────── */
.db-class-links {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: 0.75rem;
}
.db-class-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #13151a;
    border: 1px solid #252830;
    border-radius: 6px;
    text-decoration: none;
    color: #e0ddd5;
    transition: border-color 0.2s;
}
.db-class-link:hover {
    border-color: var(--class-color, #c4a24e);
}
.db-class-link__label { flex: 1; font-size: 0.9rem; }
.db-class-link__count {
    font-weight: 700;
    color: var(--class-color, #c4a24e);
    font-size: 0.95rem;
}
.db-class-link__arrow {
    font-size: 1.2rem;
    color: #3a3a45;
    transition: color 0.2s;
}
.db-class-link:hover .db-class-link__arrow {
    color: var(--class-color, #c4a24e);
}

/* ── Tag List (Affix slots) ──────────────────────────────── */
.db-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.db-tag {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: #1a1c22;
    border: 1px solid #2a2a35;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #a09f97;
}

/* ── Type Badges (new types) ─────────────────────────────── */
.type-badge--tempering { background: #c4a24e20; color: #c4a24e; border-color: #c4a24e50; }
.type-badge--inherent { background: #4a90d920; color: #4a90d9; border-color: #4a90d950; }
.type-badge--offensive { background: #ef444420; color: #ef4444; border-color: #ef444450; }
.type-badge--defensive { background: #22c55e20; color: #22c55e; border-color: #22c55e50; }
.type-badge--utility { background: #a78bfa20; color: #a78bfa; border-color: #a78bfa50; }
.type-badge--resource { background: #3b82f620; color: #3b82f6; border-color: #3b82f650; }
.type-badge--mobility { background: #f59e0b20; color: #f59e0b; border-color: #f59e0b50; }
.type-badge--active { background: #ef444420; color: #ef4444; border-color: #ef444450; }
.type-badge--passive { background: #22c55e20; color: #22c55e; border-color: #22c55e50; }
.type-badge--upgrade { background: #3b82f620; color: #3b82f6; border-color: #3b82f650; }
.type-badge--key_passive,
.type-badge--key-passive { background: #c4a24e20; color: #c4a24e; border-color: #c4a24e50; }

/* ── Detail Icon large ───────────────────────────────────── */
.db-detail__icon--large { width: 80px; height: 80px; }
.db-detail__header--class { border-left: 3px solid var(--class-color, #c4a24e); padding-left: 1rem; }
.db-section__subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: #c4a24e;
    margin: 1rem 0 0.5rem;
}

/* ============================================================
   Class Hub Page — SEO Rich Detail
   ============================================================ */

/* ── Hero Header ─────────────────────────────────────────── */
.class-hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 3rem 2rem;
    background: var(--hero-bg, none) center/cover no-repeat, linear-gradient(135deg, #0a0a0f 0%, #13151a 100%);
    border: 1px solid var(--border, #252830);
}

.class-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,15,0.92) 0%, rgba(19,21,26,0.75) 100%);
    z-index: 1;
}

.class-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.class-hero__portrait {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid var(--class-color, #c4a24e);
    box-shadow: 0 0 30px rgba(196,162,78,0.2);
    object-fit: cover;
    flex-shrink: 0;
}

.class-hero__text {
    flex: 1;
}

.class-hero__title {
    font-size: 2.5rem;
    color: var(--class-color, #c4a24e);
    margin: 0 0 0.25rem;
    line-height: 1.1;
}

.class-hero__subtitle {
    color: var(--text-muted, #7a7870);
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
}

.class-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.class-hero__badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: rgba(196,162,78,0.1);
    border: 1px solid rgba(196,162,78,0.3);
    border-radius: 20px;
    color: #c4a24e;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Generic Section ────────────────────────────────────── */
.class-section {
    margin-bottom: 2rem;
}

.class-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.class-section__title {
    font-size: 1.4rem;
    color: var(--gold, #c4a24e);
    margin: 0 0 0.75rem;
}

.class-section__header .class-section__title {
    margin-bottom: 0;
}

.class-section__link {
    color: var(--gold, #c4a24e);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.class-section__link:hover {
    opacity: 1;
    text-decoration: underline;
}

.class-section__text {
    color: var(--text, #e0ddd5);
    line-height: 1.7;
    margin: 0;
}

.class-section__empty {
    color: var(--text-muted, #7a7870);
    font-style: italic;
}

/* ── Mechanic Card ──────────────────────────────────────── */
.class-mechanic__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--panel-bg, #13151a);
    border: 1px solid var(--class-color, #c4a24e);
    border-radius: 8px;
    border-left-width: 3px;
}

.class-mechanic__icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
}

.class-mechanic__name {
    font-size: 1.15rem;
    color: var(--class-color, #c4a24e);
    margin: 0 0 0.25rem;
}

.class-mechanic__subtitle {
    color: var(--text-muted, #7a7870);
    font-size: 0.9rem;
    margin: 0;
}

/* ── Skill Categories Grid ──────────────────────────────── */
.class-skill-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.class-skill-cat {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background: var(--panel-bg, #13151a);
    border: 1px solid var(--border, #252830);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text, #e0ddd5);
    transition: border-color 0.2s, transform 0.15s;
}

.class-skill-cat:hover {
    border-color: var(--class-color, #c4a24e);
    transform: translateY(-2px);
}

.class-skill-cat__name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.class-skill-cat__count {
    font-size: 0.8rem;
    color: var(--text-muted, #7a7870);
}

/* ── Key Passives Grid ──────────────────────────────────── */
.class-key-passives {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.class-key-passive {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--panel-bg, #13151a);
    border: 1px solid var(--border, #252830);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text, #e0ddd5);
    transition: border-color 0.2s, transform 0.15s;
}

.class-key-passive:hover {
    border-color: var(--class-color, #c4a24e);
    transform: translateY(-2px);
}

.class-key-passive__icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid #c4a24e50;
    flex-shrink: 0;
}

.class-key-passive__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #c4a24e;
    margin: 0 0 0.25rem;
}

.class-key-passive__desc {
    font-size: 0.8rem;
    color: var(--text-muted, #7a7870);
    line-height: 1.4;
    margin: 0;
}

/* ── Items Showcase Grid ────────────────────────────────── */
.class-items-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.class-item-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--panel-bg, #13151a);
    border: 1px solid var(--border, #252830);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text, #e0ddd5);
    transition: border-color 0.2s, transform 0.15s;
}

.class-item-card:hover {
    transform: translateY(-2px);
}

.class-item-card--unique { border-color: #a37e2c50; }
.class-item-card--unique:hover { border-color: #a37e2c; }
.class-item-card--mythic_unique { border-color: #ff6b6b50; }
.class-item-card--mythic_unique:hover { border-color: #ff6b6b; }

.class-item-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    flex-shrink: 0;
}

.class-item-card__info {
    flex: 1;
    min-width: 0;
}

.class-item-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
}

.class-item-card--unique .class-item-card__name { color: #a37e2c; }
.class-item-card--mythic_unique .class-item-card__name { color: #ff6b6b; }

.class-item-card__rarity {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.class-item-card--unique .class-item-card__rarity { color: #a37e2c; }
.class-item-card--mythic_unique .class-item-card__rarity { color: #ff6b6b; }

.class-item-card__slot {
    font-size: 0.75rem;
    color: var(--text-muted, #7a7870);
    margin-left: 0.5rem;
}

.class-item-card__effect {
    width: 100%;
    font-size: 0.8rem;
    color: var(--text-muted, #7a7870);
    line-height: 1.4;
    margin: 0;
}

/* ── CTA Button ─────────────────────────────────────────── */
.class-cta-section {
    text-align: center;
    padding: 2rem 0;
}

.class-cta {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    background: linear-gradient(135deg, var(--class-color, #c4a24e), #8b6914);
    color: #0a0a0f;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(196,162,78,0.25);
}

.class-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(196,162,78,0.4);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .class-hero { padding: 2rem 1rem; }
    .class-hero__content { flex-direction: column; text-align: center; }
    .class-hero__portrait { width: 100px; height: 100px; }
    .class-hero__title { font-size: 1.8rem; }
    .class-hero__badges { justify-content: center; }
    .class-section__header { flex-direction: column; align-items: flex-start; }
    .class-skill-cats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .class-key-passives { grid-template-columns: 1fr; }
    .class-items-showcase { grid-template-columns: 1fr; }
    .db-card-grid { grid-template-columns: 1fr; }
    .db-class-links { grid-template-columns: 1fr; }
}