/* Layout System Base - Wizard Battles */

.layout-card.wb-card {
    --wb-card-pad: clamp(10px, 2.8cqw, 16px);
    --wb-card-gap: clamp(6px, 1.8cqw, 10px);
    --wb-text-gap: clamp(6px, 1.6cqw, 10px);
    --wb-safe-pad: clamp(8px, 2.6cqw, 14px);
    position: relative;
    width: var(--wb-card-width, 300px);
    height: auto;
    aspect-ratio: 63 / 88;
    border-radius: var(--wb-card-radius, 18px);
    overflow: hidden;
    border: 1px solid rgba(42, 35, 40, 0.22);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    color: var(--wb-ink, #2c1810);
    font-family: var(--font-display, Cinzel, serif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    container-type: inline-size;
    container-name: wb-card;
}

.layout-card.wb-card * {
    box-sizing: border-box;
}

.layout-card.wb-card :where(img) {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wb-card__glow,
.wb-card__sheen {
    position: absolute;
    pointer-events: none;
}

.wb-card__glow {
    inset: 0;
    background: radial-gradient(circle at 20% 10%, rgba(255, 215, 0, 0.10), rgba(0, 0, 0, 0) 55%);
}

.wb-card__sheen {
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.0));
}

.wb-card__content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: var(--wb-card-pad);
    display: flex;
    flex-direction: column;
    gap: var(--wb-card-gap);
    min-width: 0;
    min-height: 0;
}

.wb-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--wb-card-gap);
    height: 100%;
    flex: 1;
    min-height: 0;
}

.wb-layout > * {
    min-width: 0;
    min-height: 0;
}

.wb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(6px, 2cqw, 10px);
    min-width: 0;
}

.wb-header--top {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(4px, 1.2cqw, 6px);
}

.wb-header--top .wb-nameplate {
    flex: 0 0 100%;
    min-width: 0;
}

.wb-header--top .wb-topline {
    margin-left: auto;
}

.wb-header--center {
    justify-content: center;
    text-align: center;
}

.wb-header--stack {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(4px, 1.4cqw, 8px);
}

.wb-row {
    display: flex;
    align-items: center;
    gap: clamp(6px, 2cqw, 10px);
    min-width: 0;
}

.wb-row--between {
    justify-content: space-between;
}

.wb-title {
    font-family: var(--wb-font-title, var(--font-display, Cinzel, serif));
    font-style: var(--wb-title-style, normal);
    font-weight: var(--wb-title-weight, 900);
    font-size: calc(clamp(14px, 3cqw, 18px) * var(--wb-title-size-mult, 1));
    line-height: 1.05;
    letter-spacing: 0.2px;
    color: var(--wb-ink, #2c1810);
    display: -webkit-box;
    -webkit-line-clamp: var(--wb-title-lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    text-shadow: var(--wb-title-shadow, none);
}

.wb-title--light {
    color: #f8f8ff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Export-safe typography tweaks:
   html2canvas can shift ascenders/descenders in some fonts, so we nudge line-height
   and top padding only for export snapshots to avoid clipped text. */
.layout-card.wb-card.wb-export-safe .wb-title,
.layout-card.wb-card.wb-export-safe .wb-nameplate__title,
.layout-card.wb-card.wb-export-safe .wb-ability-title,
.layout-card.wb-card.wb-export-safe .wb-ability-text,
.layout-card.wb-card.wb-export-safe .wb-lore-text,
.layout-card.wb-card.wb-export-safe .wb-faction-footer__text,
.layout-card.wb-card.wb-export-safe .wb-stat__label {
    line-height: 1.18;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.layout-card.wb-card.wb-export-safe .wb-title,
.layout-card.wb-card.wb-export-safe .wb-nameplate__title {
    padding-top: 0.04em;
}

.layout-card.wb-card.wb-export-safe .wb-stat__value {
    line-height: 1.08;
}

.layout-card.wb-card.wb-export-safe .wb-nameplate {
    align-items: start;
    padding-top: clamp(5px, 1.4cqw, 8px);
    padding-bottom: clamp(5px, 1.4cqw, 8px);
}

.layout-card.wb-card.wb-export-safe .wb-stats.is-labeled .wb-stat__label {
    display: block;
}

.layout-card.wb-card.wb-export-safe .wb-stat {
    min-height: clamp(84px, 22cqw, 116px);
    justify-content: flex-start;
}

.layout-card.wb-card.wb-export-safe .wb-clamp {
    -webkit-line-clamp: calc(var(--wb-clamp-lines, 3) + 1);
}

.wb-divider {
    width: 100%;
    height: 1px;
    background: rgba(42, 35, 40, 0.14);
}

.wb-divider--soft {
    margin-top: 6px;
}

.wb-divider--light {
    background: rgba(255, 255, 255, 0.12);
}

.wb-meta-id {
    font-family: var(--font-numeric, monospace);
    font-weight: 800;
    font-size: clamp(9px, 2cqw, 11px);
    color: rgba(248, 248, 255, 0.7);
    flex: 0 0 auto;
}

.wb-faction-icon {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
}

.wb-name-pill {
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(248, 244, 232, 0.92);
    border: 1px solid rgba(42, 35, 40, 0.18);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    max-width: 100%;
}

.wb-nameplate {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(6px, 1.4cqw, 9px);
    padding: clamp(4px, 1.1cqw, 7px) clamp(7px, 2.1cqw, 12px);
    border-radius: 12px;
    border: 1px solid rgba(42, 35, 40, 0.22);
    background: linear-gradient(180deg, rgba(252, 249, 241, 0.96), rgba(242, 235, 220, 0.96));
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.wb-nameplate__title-row {
    min-width: 0;
}

.wb-nameplate__title-row--faction {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(5px, 1.2cqw, 8px);
    width: 100%;
}

.wb-nameplate__set {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.9cqw, 5px);
    padding-right: clamp(5px, 1.4cqw, 8px);
    margin-right: clamp(2px, 0.7cqw, 4px);
    border-right: 1px solid rgba(42, 35, 40, 0.18);
    flex: 0 0 auto;
}

.wb-nameplate__set--icon-only {
    gap: 0;
    padding-right: clamp(6px, 1.6cqw, 10px);
}

.layout-card.wb-card .wb-nameplate__set-icon {
    width: clamp(28px, 7.6cqw, 40px);
    height: clamp(28px, 7.6cqw, 40px);
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.06);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.65);
    padding: clamp(1px, 0.35cqw, 2px);
}

.wb-nameplate__set-code {
    font-family: var(--font-numeric, Rubik, system-ui);
    font-size: clamp(8px, 1.85cqw, 10px);
    font-weight: 900;
    letter-spacing: 0.55px;
    color: rgba(42, 35, 40, 0.82);
}

.wb-nameplate__title {
    min-width: 0;
    font-family: var(--wb-font-title, var(--font-display, Cinzel, serif));
    font-style: var(--wb-title-style, normal);
    font-weight: var(--wb-title-weight, 900);
    font-size: calc(clamp(12px, 2.95cqw, 16px) * var(--wb-title-size-mult, 1));
    line-height: 1.02;
    color: var(--wb-ink, #2c1810);
    letter-spacing: 0.15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.wb-faction-footer {
    --wb-faction-accent: #c6b28f;
    justify-self: center;
    width: fit-content;
    max-width: calc(100% - clamp(12px, 4cqw, 24px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(42, 35, 40, 0.18);
    position: relative;
    overflow: hidden;
}

.wb-faction-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wb-faction-accent);
    opacity: 0.22;
    pointer-events: none;
}

.wb-faction-footer > * {
    position: relative;
    z-index: 1;
}

.layout-card.wb-card .wb-faction-footer__icon {
    width: clamp(14px, 3.55cqw, 18px);
    height: clamp(14px, 3.55cqw, 18px);
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
    object-fit: cover;
    opacity: 0.96;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.58);
    padding: 1px;
}

.wb-faction-footer__text {
    min-width: 0;
    font-size: clamp(7px, 1.6cqw, 9px);
    letter-spacing: 0.45px;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(33, 27, 19, 0.86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-ability-slot {
    min-width: 0;
    min-height: 0;
}

.wb-ability-slot.is-empty {
    height: 0;
    min-height: 0;
    overflow: hidden;
}

.wb-art {
    position: relative;
    border-radius: var(--wb-art-radius, 16px);
    overflow: hidden;
    border: 1px solid rgba(42, 35, 40, 0.14);
    background: var(--wb-art-bg, rgba(0, 0, 0, 0.06));
    min-height: 0;
    display: block;
}

.wb-art__img {
    width: 100%;
    height: 100%;
    object-fit: var(--wb-art-fit, cover);
    object-position: var(--wb-art-pos-x, 50%) var(--wb-art-pos-y, 0%);
}

.wb-art__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
}

.wb-art--full {
    position: absolute;
    inset: 0;
    border-radius: 0;
    border: none;
    z-index: 0;
}

.wb-text {
    display: grid;
    gap: var(--wb-text-gap);
    min-height: 0;
}

.wb-text > * {
    min-width: 0;
    min-height: 0;
}

.wb-ability,
.wb-lore,
.wb-panel {
    min-width: 0;
    min-height: 0;
}

.wb-panel {
    background: var(--wb-panel-bg, rgba(255, 255, 255, 0.78));
    border: 1px solid rgba(42, 35, 40, 0.12);
    border-radius: 12px;
    padding: clamp(6px, 1.8cqw, 10px);
}

.wb-ability {
    background: var(--wb-ability-bg, rgba(248, 244, 232, 0.92));
    border: 1px solid rgba(42, 35, 40, 0.18);
    border-radius: 14px;
    padding: clamp(8px, 2.4cqw, 12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wb-ability.is-compact {
    padding: clamp(6px, 2cqw, 10px);
}

.wb-ability-title {
    font-family: var(--wb-font-ability-title, var(--wb-font-ability, var(--font-display, Cinzel, serif)));
    font-style: var(--wb-ability-title-style, var(--wb-ability-style, normal));
    font-weight: var(--wb-ability-title-weight, var(--wb-ability-weight, 900));
    font-size: calc(clamp(11px, 2.6cqw, 14px) * var(--wb-ability-title-size-mult, 1));
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--wb-ink, #2c1810);
    word-break: break-word;
}

.wb-ability.is-compact .wb-ability-title {
    font-size: calc(clamp(10px, 2.2cqw, 12px) * var(--wb-ability-title-size-mult, 1));
}

.wb-ability-text {
    margin-top: 6px;
    font-family: var(--wb-font-ability, var(--font-body, system-ui));
    font-style: var(--wb-ability-style, normal);
    font-weight: var(--wb-ability-text-weight, 500);
    font-size: calc(clamp(9px, 2.2cqw, 12px) * var(--wb-ability-size-mult, 1));
    line-height: 1.25;
    color: var(--wb-ink-muted, rgba(42, 35, 40, 0.84));
    word-break: break-word;
}

.wb-ability.is-compact .wb-ability-text {
    font-size: calc(clamp(8px, 2cqw, 11px) * var(--wb-ability-size-mult, 1));
}

.wb-lore {
    background: var(--wb-lore-bg, rgba(248, 244, 232, 0.92));
    border: 1px solid rgba(42, 35, 40, 0.18);
    border-radius: 12px;
    padding: clamp(6px, 2cqw, 10px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.wb-lore.is-compact {
    padding: clamp(5px, 1.6cqw, 8px);
}

.wb-lore.is-scroll {
    overflow: auto;
    max-height: 100%;
}

.wb-lore-text {
    font-family: var(--wb-font-lore, var(--font-body, system-ui));
    font-style: var(--wb-lore-style, italic);
    font-weight: var(--wb-lore-weight, 500);
    font-size: calc(clamp(9px, 2cqw, 12px) * var(--wb-lore-size-mult, 1));
    line-height: 1.2;
    color: var(--wb-ink-muted, rgba(42, 35, 40, 0.78));
    word-break: break-word;
}

.wb-lore.is-compact .wb-lore-text {
    font-size: calc(clamp(8px, 1.8cqw, 11px) * var(--wb-lore-size-mult, 1));
}

.wb-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--wb-clamp-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wb-scroll {
    overflow: auto;
    scrollbar-width: none;
}

.wb-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.wb-stats {
    --wb-stat-cols: 3;
    --wb-stat-gap: clamp(4px, 1.6cqw, 8px);
    --wb-stat-icon: clamp(32px, 7.4cqw, 46px);
    --wb-stat-value: clamp(10px, 2.8cqw, 14px);
    --wb-stat-pad: clamp(6px, 1.8cqw, 10px);
    --wb-stat-bg: rgba(255, 255, 255, 0.72);
    --wb-stat-border: rgba(42, 35, 40, 0.12);
    display: grid;
    grid-template-columns: repeat(var(--wb-stat-cols), minmax(0, 1fr));
    gap: var(--wb-stat-gap);
    min-width: 0;
}

.wb-stats.is-compact {
    --wb-stat-icon: clamp(27px, 6.8cqw, 38px);
    --wb-stat-value: clamp(9px, 2.4cqw, 12px);
    --wb-stat-pad: clamp(4px, 1.4cqw, 8px);
}

.wb-stats--row {
    --wb-stat-cols: 5;
}

.wb-stats--column {
    display: flex;
    flex-direction: column;
    gap: var(--wb-stat-gap);
}

.wb-stats.is-labeled .wb-stat__label {
    display: block;
}

.wb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 1cqw, 4px);
    padding: var(--wb-stat-pad);
    border-radius: 12px;
    background: var(--wb-stat-bg);
    border: 1px solid var(--wb-stat-border);
    min-width: 0;
}

.wb-stat__icon img {
    width: var(--wb-stat-icon);
    height: var(--wb-stat-icon);
    border-radius: 50%;
    padding: clamp(2px, 0.8cqw, 4px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(42, 35, 40, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.wb-stat__value {
    font-family: var(--font-numeric, Rubik, system-ui);
    font-weight: 900;
    font-size: var(--wb-stat-value);
    line-height: 1;
    color: var(--wb-ink, #2c1810);
    font-variant-numeric: tabular-nums;
}

.wb-stat__label {
    display: none;
    font-size: clamp(8px, 1.6cqw, 10px);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.7;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.wb-stats--pills .wb-stat {
    flex-direction: row;
    justify-content: center;
    gap: clamp(4px, 1.4cqw, 8px);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.25);
}

.wb-stats--pills .wb-stat__value {
    color: #fff;
}

.wb-stats--pills .wb-stat__icon img {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
}

.is-dark {
    --wb-ability-bg: rgba(0, 0, 0, 0.55);
    --wb-lore-bg: rgba(0, 0, 0, 0.45);
    --wb-panel-bg: rgba(0, 0, 0, 0.45);
    --wb-stat-bg: rgba(0, 0, 0, 0.55);
    --wb-stat-border: rgba(255, 255, 255, 0.2);
    --wb-ink: #ffffff;
    --wb-ink-muted: rgba(255, 255, 255, 0.85);
    --wb-title-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.wb-skin-dark {
    --wb-ability-bg: rgba(12, 16, 28, 0.78);
    --wb-lore-bg: rgba(10, 14, 24, 0.78);
    --wb-panel-bg: rgba(12, 16, 28, 0.7);
    --wb-stat-bg: rgba(18, 22, 34, 0.82);
    --wb-stat-border: rgba(255, 255, 255, 0.12);
}

.wb-pill {
    padding: clamp(5px, 1.6cqw, 8px) clamp(8px, 2cqw, 12px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(42, 35, 40, 0.12);
    font-size: clamp(9px, 2cqw, 11px);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    color: rgba(42, 35, 40, 0.95);
}

.wb-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wb-card-gap);
    padding: var(--wb-safe-pad);
}

.wb-overlay__body {
    margin-top: auto;
    display: grid;
    gap: var(--wb-text-gap);
    min-height: 0;
}

.wb-art-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(70px, 26%, 120px);
    gap: var(--wb-card-gap);
    min-height: 0;
    align-items: stretch;
}

.wb-art-split > * {
    min-width: 0;
}

.wb-stats-panel {
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.wb-stats-panel .wb-stats {
    width: 100%;
}

.wb-file-grid {
    display: grid;
    grid-template-columns: clamp(72px, 28%, 96px) minmax(0, 1fr);
    gap: var(--wb-card-gap);
    align-items: start;
    min-height: 0;
}

.wb-statbars {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.2cqw, 6px);
}

.wb-statbar {
    display: grid;
    grid-template-columns: clamp(50px, 20%, 70px) minmax(0, 1fr) clamp(22px, 12%, 30px);
    gap: clamp(6px, 1.4cqw, 8px);
    align-items: center;
}

.wb-statbar__label {
    font-size: clamp(8px, 1.6cqw, 10px);
    letter-spacing: 0.6px;
    opacity: 0.75;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-statbar__track {
    height: clamp(8px, 1.6cqw, 10px);
    border-radius: 999px;
    background: rgba(42, 35, 40, 0.12);
    overflow: hidden;
    border: 1px solid rgba(42, 35, 40, 0.15);
}

.wb-statbar__fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(42, 35, 40, 0.65), rgba(42, 35, 40, 0.35));
}

.wb-statbar__value {
    text-align: right;
    font-family: var(--font-numeric, Rubik, system-ui);
    font-weight: 900;
    font-size: clamp(9px, 2cqw, 11px);
    color: rgba(42, 35, 40, 0.95);
    font-variant-numeric: tabular-nums;
}

.wb-ring {
    position: relative;
    width: min(100%, calc(100% - clamp(6px, 1.8cqw, 12px)));
    height: auto;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: visible;
    margin-inline: auto;
}

.wb-ring__outer {
    position: absolute;
    inset: clamp(8px, 3cqw, 14px);
    border-radius: 50%;
    border: 2px solid rgba(42, 35, 40, 0.16);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2));
}

.wb-ring__inner {
    position: absolute;
    inset: clamp(24px, 7.2cqw, 38px);
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(42, 35, 40, 0.2);
}

.wb-ring__inner .wb-art__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.03);
}

.wb-ring__stat {
    position: absolute;
    transform: translate(-50%, -50%);
    width: clamp(48px, 14cqw, 58px);
    height: clamp(48px, 14cqw, 58px);
    border-radius: 16px;
    border: 1px solid rgba(42, 35, 40, 0.18);
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.wb-ring__stat img {
    width: clamp(20px, 6cqw, 26px);
    height: clamp(20px, 6cqw, 26px);
    border-radius: 50%;
    padding: clamp(2px, 0.8cqw, 4px);
    background: rgba(255, 255, 255, 0.9);
}

.wb-ring__stat-value {
    font-family: var(--font-numeric, Rubik, system-ui);
    font-weight: 900;
    font-size: clamp(9px, 2.2cqw, 12px);
    color: rgba(42, 35, 40, 0.95);
}

/* Layout tweaks */

.layout-classic .wb-header {
    text-align: center;
}

.layout-minimal {
    --wb-card-pad: clamp(8px, 2.4cqw, 12px);
    --wb-card-gap: clamp(6px, 1.4cqw, 8px);
}

.layout-skill .wb-text {
    grid-template-rows: auto auto;
}

.layout-lore .wb-layout {
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.1fr);
}

.layout-lore .wb-text {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.layout-bug_soul .wb-art__img {
    filter: saturate(1.05) contrast(1.02);
}

.card-preview-box .layout-card.wb-card {
    --wb-card-width: min(100%, 320px);
}

/* ==========================================
   Layout v3 hierarchy: art first, compact stats, faction as small badge
   ========================================== */

.layout-card.wb-card .wb-topline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex: 0 0 auto;
    min-height: 0;
}

.layout-card.wb-card .wb-header--top .wb-nameplate {
    flex: 0 0 100%;
    min-width: 0;
}

.layout-card.wb-card .wb-header--overlay .wb-nameplate {
    background: linear-gradient(180deg, rgba(255, 253, 247, 0.94), rgba(241, 234, 218, 0.92));
    border-color: rgba(255, 255, 255, 0.34);
}

.layout-card.wb-card .wb-header--overlay .wb-nameplate__title {
    color: rgba(24, 28, 34, 0.98);
}

.layout-card.wb-card .wb-header--overlay .wb-nameplate__set-code {
    color: rgba(30, 35, 45, 0.82);
}

.layout-card.wb-card .wb-corner-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.layout-card.wb-card .wb-corner-badges.is-empty {
    display: none;
}

.layout-card.wb-card .wb-topline:has(.wb-corner-badges.is-empty) {
    display: none;
}

.layout-card.wb-card .wb-corner-badge {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid rgba(42, 35, 40, 0.24);
    background: rgba(255, 255, 255, 0.86);
    color: rgba(42, 35, 40, 0.95);
}

.layout-card.wb-card .wb-corner-badge--priority {
    background: rgba(59, 130, 246, 0.16);
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.42);
}

.layout-card.wb-card .wb-art.wb-art--hero {
    border-radius: 16px;
    border: 1px solid rgba(42, 35, 40, 0.18);
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.24) 58%, rgba(30, 30, 30, 0.08)),
        rgba(248, 244, 232, 0.95);
}

.layout-card.wb-card .wb-art.wb-art--hero .wb-art__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    padding: 0;
}

.layout-card.wb-card .wb-title.wb-title--hero {
    font-size: calc(clamp(12px, 2.9cqw, 16px) * var(--wb-title-size-mult, 1));
    line-height: 1.05;
    text-align: center;
}

.layout-card.wb-card .wb-title.wb-title--mini {
    font-size: calc(clamp(9px, 2.1cqw, 11px) * var(--wb-title-size-mult, 1));
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.layout-card.wb-card .wb-stats.wb-stats--hero {
    --wb-stat-cols: 5;
    --wb-stat-gap: clamp(4px, 1.1cqw, 6px);
    --wb-stat-icon: clamp(44px, 10.1cqw, 56px);
    --wb-stat-value: clamp(13px, 3.2cqw, 16px);
    --wb-stat-pad: clamp(4px, 1cqw, 6px);
}

.layout-card.wb-card .wb-stats.wb-stats--hero .wb-stat {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(42, 35, 40, 0.15);
    gap: 3px;
}

.layout-card.wb-card .wb-stats.wb-stats--hero .wb-stat__icon img {
    width: var(--wb-stat-icon);
    height: var(--wb-stat-icon);
    border: none;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
}

.layout-card.wb-card .wb-stats.wb-stats--hero:not(.wb-stats--column-power) .wb-stat__icon {
    width: clamp(50px, 11.2cqw, 62px);
    height: clamp(50px, 11.2cqw, 62px);
    min-width: clamp(50px, 11.2cqw, 62px);
    min-height: clamp(50px, 11.2cqw, 62px);
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    overflow: hidden;
}

.layout-card.wb-card .wb-stats.wb-stats--hero:not(.wb-stats--pills) .wb-stat__value {
    min-width: clamp(26px, 5.7cqw, 34px);
    height: clamp(26px, 5.7cqw, 34px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4px, 1.3cqw, 8px);
    border-radius: 999px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18);
    background: var(--wb-stat-accent, #8fa8c9);
}

.layout-card.wb-card .wb-stats.wb-stats--hero:not(.wb-stats--pills) .wb-stat:nth-child(1) {
    --wb-stat-accent: #5ea7e8;
}

.layout-card.wb-card .wb-stats.wb-stats--hero:not(.wb-stats--pills) .wb-stat:nth-child(2) {
    --wb-stat-accent: #d6a645;
}

.layout-card.wb-card .wb-stats.wb-stats--hero:not(.wb-stats--pills) .wb-stat:nth-child(3) {
    --wb-stat-accent: #a271ca;
}

.layout-card.wb-card .wb-stats.wb-stats--hero:not(.wb-stats--pills) .wb-stat:nth-child(4) {
    --wb-stat-accent: #d96a71;
}

.layout-card.wb-card .wb-stats.wb-stats--hero:not(.wb-stats--pills) .wb-stat:nth-child(5) {
    --wb-stat-accent: #72b772;
}

.layout-card.wb-card .wb-stats.wb-stats--hero .wb-stat__label {
    display: block;
    font-size: clamp(7px, 1.6cqw, 9px);
    letter-spacing: 0.35px;
    opacity: 0.75;
}

.layout-card.wb-card .wb-ability.wb-ability--hero {
    padding: clamp(7px, 1.8cqw, 10px);
    border-radius: 12px;
}

.layout-card.wb-card .wb-ability.wb-ability--hero .wb-ability-title {
    font-size: calc(clamp(9px, 1.9cqw, 11px) * var(--wb-ability-title-size-mult, 1));
}

.layout-card.wb-card .wb-ability.wb-ability--hero .wb-ability-text {
    font-size: calc(clamp(7px, 1.6cqw, 9px) * var(--wb-ability-size-mult, 1));
    line-height: 1.24;
}

.layout-card.wb-card .wb-lore.wb-lore--hero {
    padding: clamp(5px, 1.6cqw, 8px);
    border-radius: 10px;
}

.layout-card.wb-card .wb-lore.wb-lore--hero .wb-lore-text {
    font-size: calc(clamp(8px, 1.8cqw, 10px) * var(--wb-lore-size-mult, 1));
    line-height: 1.18;
}

/* Duel card */
.layout-card.wb-card .wb-layout.wb-layout--duel {
    display: grid;
    grid-template-rows: auto minmax(0, 2.04fr) auto minmax(0, 1.08fr) auto;
    gap: clamp(6px, 1.6cqw, 10px);
    height: 100%;
}

.layout-card.wb-card .wb-layout--duel .wb-art--duel {
    min-height: 0;
}

.layout-card.wb-card .wb-layout--duel .wb-stats--duel .wb-stat__icon {
    width: clamp(52px, 11.5cqw, 64px);
    height: clamp(52px, 11.5cqw, 64px);
    min-width: clamp(52px, 11.5cqw, 64px);
    min-height: clamp(52px, 11.5cqw, 64px);
    border-radius: 999px;
    overflow: hidden;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(42, 35, 40, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.layout-card.wb-card .wb-layout--duel .wb-stats--duel .wb-stat__icon img {
    width: 98%;
    height: 98%;
    border-radius: 999px;
    object-fit: cover;
    object-position: center;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Column power */
.layout-card.wb-card .wb-layout.wb-layout--column-power {
    display: grid;
    grid-template-columns: clamp(64px, 22.5cqw, 86px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(5px, 1.2cqw, 8px);
    height: 100%;
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power {
    grid-column: 1 / -1;
    grid-row: 1;
}

.layout-card.wb-card .wb-layout--column-power .wb-column-stats {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    min-height: 0;
    overflow: visible;
    padding: clamp(2px, 0.7cqw, 4px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        radial-gradient(120% 80% at 50% -12%, rgba(180, 220, 255, 0.22), rgba(13, 22, 36, 0.08) 58%),
        linear-gradient(180deg, rgba(9, 19, 34, 0.62), rgba(18, 30, 48, 0.4));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 18px rgba(2, 8, 18, 0.28);
}

.layout-card.wb-card .wb-layout--column-power .wb-column-main {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1.72fr) minmax(0, 1.28fr) auto;
    gap: clamp(6px, 1.6cqw, 10px);
    overflow: hidden;
    padding: clamp(4px, 1.2cqw, 7px);
    border-radius: 16px;
    border: 1px solid rgba(46, 36, 27, 0.2);
    background:
        radial-gradient(130% 110% at 50% -18%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(251, 246, 235, 0.93), rgba(236, 227, 209, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        inset 0 -8px 20px rgba(90, 58, 28, 0.08),
        0 9px 18px rgba(16, 12, 8, 0.24);
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power {
    --wb-stat-gap: clamp(6px, 1.7cqw, 10px);
    --wb-stat-spill: clamp(0px, 0.3cqw, 2px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(clamp(40px, 9.4cqw, 60px), auto));
    align-content: start;
    justify-items: stretch;
    gap: var(--wb-stat-gap);
    height: auto;
    width: 100%;
    min-height: clamp(236px, 86%, 318px);
    padding-block: 0;
    align-self: stretch;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat {
    width: calc(100% + var(--wb-stat-spill));
    margin-right: calc(var(--wb-stat-spill) * -1);
    height: auto;
    min-height: clamp(40px, 9.4cqw, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: clamp(1px, 0.45cqw, 3px) clamp(3px, 0.9cqw, 6px);
    gap: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    position: relative;
    overflow: visible;
    --wb-stat-glow: rgba(96, 176, 246, 0.35);
    --wb-stat-accent: #8fa8c9;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat::after {
    content: none;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat__icon {
    --wb-stat-icon-size: clamp(42px, 12.2cqw, 62px);
    width: var(--wb-stat-icon-size);
    height: var(--wb-stat-icon-size);
    min-width: var(--wb-stat-icon-size);
    min-height: var(--wb-stat-icon-size);
    max-width: var(--wb-stat-icon-size);
    max-height: var(--wb-stat-icon-size);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 999px;
    overflow: hidden;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.99) 0%, rgba(245, 248, 252, 0.96) 66%, rgba(220, 230, 242, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.84);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(20, 26, 38, 0.12),
        0 0 10px var(--wb-stat-glow);
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    pointer-events: none;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat__icon img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 999px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    filter: saturate(1.08) contrast(1.03) drop-shadow(0 0.5px 0.8px rgba(0, 0, 0, 0.24));
    position: relative;
    z-index: 1;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat__value {
    min-width: clamp(24px, 5.9cqw, 34px);
    height: clamp(24px, 5.9cqw, 34px);
    padding: 0 clamp(4px, 1.15cqw, 7px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: clamp(12px, 3.3cqw, 18px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
    letter-spacing: 0.1px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18);
    background: var(--wb-stat-accent);
    margin-top: clamp(-2px, -0.6cqw, -1px);
    position: relative;
    z-index: 1;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat__label {
    display: none;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat:nth-child(1) {
    --wb-stat-glow: rgba(101, 176, 255, 0.45);
    --wb-stat-accent: #5ea7e8;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat:nth-child(2) {
    --wb-stat-glow: rgba(249, 188, 81, 0.42);
    --wb-stat-accent: #d6a645;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat:nth-child(3) {
    --wb-stat-glow: rgba(184, 124, 241, 0.42);
    --wb-stat-accent: #a271ca;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat:nth-child(4) {
    --wb-stat-glow: rgba(234, 111, 128, 0.4);
    --wb-stat-accent: #d96a71;
}

.layout-card.wb-card .wb-layout--column-power .wb-stats--column-power .wb-stat:nth-child(5) {
    --wb-stat-glow: rgba(107, 204, 130, 0.42);
    --wb-stat-accent: #72b772;
}

.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--hero {
    padding: clamp(6px, 1.55cqw, 8px);
}

.layout-card.wb-card .wb-layout--column-power .wb-ability-slot.is-filled {
    min-height: 0;
    height: 100%;
}

.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--column-main {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--hero .wb-ability-title {
    font-size: calc(clamp(9px, 1.8cqw, 11px) * var(--wb-ability-title-size-mult, 1));
}

.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--hero .wb-ability-text {
    font-size: calc(clamp(7px, 1.45cqw, 9px) * var(--wb-ability-size-mult, 1));
    line-height: 1.22;
}

.layout-card.wb-card .wb-layout--column-power .wb-lore.wb-lore--column-mini {
    min-height: 0;
    padding: clamp(4px, 1.2cqw, 6px) clamp(6px, 1.5cqw, 8px);
    border-radius: 10px;
}

.layout-card.wb-card .wb-layout--column-power .wb-lore.wb-lore--column-mini .wb-lore-text {
    font-size: calc(clamp(6.8px, 1.28cqw, 8.4px) * var(--wb-lore-size-mult, 1));
    line-height: 1.16;
}

.layout-card.wb-card .wb-layout--column-power .wb-art--column {
    min-height: 0;
    border-radius: 15px;
    border: 1px solid rgba(37, 28, 19, 0.24);
    background:
        radial-gradient(100% 70% at 50% 12%, rgba(255, 246, 217, 0.22), rgba(0, 0, 0, 0) 52%),
        linear-gradient(180deg, rgba(21, 29, 42, 0.44), rgba(8, 12, 20, 0.32));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 7px 15px rgba(8, 9, 14, 0.26);
}

.layout-card.wb-card .wb-layout--column-power .wb-art--column .wb-art__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    padding: 0;
    transform: scale(1.01);
}

.layout-card.wb-card .wb-layout--column-power .wb-art--column::after {
    content: '';
    position: absolute;
    inset: clamp(4px, 1.1cqw, 6px);
    border: 1px solid rgba(255, 245, 225, 0.32);
    border-radius: 11px;
    pointer-events: none;
    z-index: 2;
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power {
    position: relative;
    align-items: stretch;
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power {
    display: block;
    min-width: 0;
    padding: clamp(5px, 1.4cqw, 8px) clamp(7px, 2cqw, 10px);
    border-radius: 13px;
    border: 1px solid rgba(107, 78, 45, 0.28);
    background:
        radial-gradient(140% 90% at 50% 0%, rgba(255, 252, 244, 0.92), rgba(246, 234, 211, 0.9) 62%, rgba(233, 215, 184, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        0 4px 10px rgba(67, 47, 22, 0.2);
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title-row--faction {
    display: grid;
    grid-template-columns: clamp(30px, 8.8cqw, 42px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(6px, 1.35cqw, 9px);
    width: 100%;
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title-icon-col {
    width: clamp(30px, 8.8cqw, 42px);
    min-width: clamp(30px, 8.8cqw, 42px);
    display: grid;
    place-items: start center;
    padding-top: clamp(1px, 0.3cqw, 2px);
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title-meta {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: clamp(2px, 0.55cqw, 4px);
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title {
    min-width: 0;
    text-align: left;
    font-size: calc(clamp(13px, 3.25cqw, 18px) * var(--wb-title-size-mult, 1));
    letter-spacing: 0.26px;
    line-height: 1.04;
    text-wrap: balance;
    overflow-wrap: anywhere;
    color: rgba(50, 32, 14, 0.98);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.68),
        0 1px 4px rgba(76, 51, 24, 0.16);
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(110, 81, 46, 0.46), rgba(110, 81, 46, 0.16));
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__set-code.wb-nameplate__set-code--faction {
    font-family: var(--font-body, "Alegreya", serif);
    font-weight: 800;
    font-size: clamp(8px, 1.85cqw, 10px);
    letter-spacing: 0.66px;
    text-transform: uppercase;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.15;
    display: block;
    max-width: none;
    color: rgba(88, 63, 34, 0.95);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title,
.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--column-main .wb-ability-title,
.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--column-main .wb-ability-text,
.layout-card.wb-card .wb-layout--column-power .wb-lore.wb-lore--column-mini .wb-lore-text {
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
}

.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--column-main .wb-ability-title {
    letter-spacing: 0.34px;
    text-wrap: balance;
}

.layout-card.wb-card .wb-layout--column-power .wb-ability.wb-ability--column-main .wb-ability-text {
    letter-spacing: 0.06px;
    line-height: 1.24;
    text-wrap: pretty;
    hyphens: auto;
}

.layout-card.wb-card .wb-layout--column-power .wb-lore.wb-lore--column-mini .wb-lore-text {
    letter-spacing: 0.06px;
    line-height: 1.19;
    text-wrap: pretty;
    hyphens: auto;
}

.layout-card.wb-card[data-wb-set="hk"] .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power {
    border-color: rgba(151, 167, 194, 0.38);
    background:
        radial-gradient(145% 92% at 50% 0%, rgba(58, 69, 92, 0.96), rgba(37, 46, 66, 0.95) 62%, rgba(24, 31, 46, 0.97));
    box-shadow:
        inset 0 1px 0 rgba(219, 228, 247, 0.2),
        0 4px 10px rgba(7, 10, 18, 0.42);
}

.layout-card.wb-card[data-wb-set="hk"] .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title {
    color: rgba(237, 241, 248, 0.98);
    text-shadow:
        0 1px 0 rgba(10, 12, 20, 0.64),
        0 2px 5px rgba(0, 0, 0, 0.42);
}

.layout-card.wb-card[data-wb-set="hk"] .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__title-divider {
    background: linear-gradient(90deg, rgba(196, 207, 232, 0.54), rgba(196, 207, 232, 0.2));
}

.layout-card.wb-card[data-wb-set="hk"] .wb-layout--column-power .wb-header--column-power .wb-nameplate--column-power .wb-nameplate__set-code.wb-nameplate__set-code--faction {
    color: rgba(207, 218, 238, 0.98);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.44);
}

.layout-card.wb-card[data-wb-set="hk"] .wb-layout--column-power .wb-ability.wb-ability--column-main .wb-ability-title {
    color: rgba(58, 65, 83, 0.96);
}

.layout-card.wb-card[data-wb-set="hk"] .wb-layout--column-power .wb-ability.wb-ability--column-main .wb-ability-text,
.layout-card.wb-card[data-wb-set="hk"] .wb-layout--column-power .wb-lore.wb-lore--column-mini .wb-lore-text {
    color: rgba(76, 84, 103, 0.94);
}

.layout-card.wb-card .wb-layout--column-power .wb-header--column-power .wb-topline {
    position: absolute;
    top: clamp(4px, 1.2cqw, 6px);
    right: clamp(4px, 1.2cqw, 6px);
    margin-left: 0;
    z-index: 3;
}

/* Tactical ring */
.layout-card.wb-card .wb-layout.wb-layout--tactical-ring {
    display: grid;
    grid-template-rows: auto minmax(0, 1.6fr) auto auto auto;
    gap: clamp(5px, 1.4cqw, 8px);
    height: 100%;
}

.layout-card.wb-card .wb-layout--tactical-ring .wb-ring-panel {
    display: grid;
    place-items: center;
    min-height: 0;
    max-height: 100%;
    padding-block: 0;
    overflow: visible;
}

.layout-card.wb-card .wb-layout--tactical-ring .wb-ring {
    width: min(100%, calc(100% - clamp(6px, 1.8cqw, 12px)));
    max-height: 100%;
}

.layout-card.wb-card .wb-layout--tactical-ring .wb-ring__stat {
    width: clamp(48px, 14.8cqw, 66px);
    height: clamp(48px, 14.8cqw, 66px);
    border-radius: 999px;
    gap: clamp(1px, 0.5cqw, 3px);
    padding: clamp(3px, 1cqw, 6px);
    border: 1px solid rgba(42, 35, 40, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 239, 226, 0.95));
    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.layout-card.wb-card .wb-layout--tactical-ring .wb-ring__stat img {
    width: clamp(27px, 7.6cqw, 36px);
    height: clamp(27px, 7.6cqw, 36px);
    padding: 0;
}

.layout-card.wb-card .wb-layout--tactical-ring .wb-ring__stat-value {
    font-size: clamp(11px, 2.9cqw, 15px);
    line-height: 1;
}

/* Character file */
.layout-card.wb-card .wb-layout.wb-layout--character-file {
    display: grid;
    grid-template-rows: auto minmax(0, 1.9fr) auto auto auto;
    gap: clamp(6px, 1.6cqw, 10px);
    height: 100%;
}

.layout-card.wb-card .wb-layout--character-file .wb-file-grid--character {
    grid-template-columns: minmax(0, 1fr) clamp(80px, 28%, 110px);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
}

.layout-card.wb-card .wb-layout--character-file .wb-panel--stats {
    padding: clamp(6px, 1.5cqw, 9px);
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}

.layout-card.wb-card .wb-layout--character-file .wb-art--file {
    height: 100%;
    min-height: 0;
}

.layout-card.wb-card .wb-layout--character-file .wb-panel--stats .wb-statbars {
    min-height: 0;
    overflow: hidden;
}

.layout-card.wb-card .wb-layout--character-file .wb-panel--stats .wb-statbar {
    grid-template-columns: clamp(30px, 24%, 44px) minmax(0, 1fr) clamp(18px, 20%, 24px);
    gap: clamp(4px, 1cqw, 6px);
}

/* Ability totem */
.layout-card.wb-card .wb-layout.wb-layout--ability-totem {
    display: grid;
    grid-template-rows: auto minmax(0, 1.74fr) auto auto auto auto;
    gap: clamp(6px, 1.6cqw, 10px);
    height: 100%;
}

.layout-card.wb-card .wb-layout--ability-totem .wb-art--totem {
    min-height: 0;
}

.layout-card.wb-card .wb-layout--ability-totem .wb-ability--totem {
    border-width: 2px;
}

/* Combat minimal */
.layout-card.wb-card .wb-layout.wb-layout--combat-minimal {
    display: grid;
    grid-template-rows: auto minmax(0, 2.15fr) auto auto auto;
    gap: clamp(6px, 1.6cqw, 10px);
    height: 100%;
}

.layout-card.wb-card .wb-layout--combat-minimal .wb-art--combat {
    min-height: 0;
}

.layout-card.wb-card .wb-layout--combat-minimal .wb-stats--compact .wb-stat__label {
    display: none;
}

.layout-card.wb-card .wb-layout--combat-minimal .wb-stats--compact .wb-stat {
    border-radius: 999px;
}

/* Full art */
.layout-full_art .wb-card__content {
    padding: 0;
}

.layout-card.wb-card .wb-layout.wb-layout--full-art-v3 {
    position: relative;
    display: block;
    height: 100%;
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-art--full .wb-art__img {
    object-fit: cover;
    object-position: center top;
    padding: 0;
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-overlay {
    justify-content: space-between;
    padding: clamp(8px, 2.2cqw, 12px);
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-overlay__body {
    gap: clamp(6px, 1.8cqw, 10px);
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-faction-footer--overlay {
    background: rgba(10, 14, 24, 0.72);
    border-color: rgba(255, 255, 255, 0.24);
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-faction-footer--overlay .wb-faction-footer__text {
    color: rgba(248, 248, 255, 0.9);
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-stats--full-art .wb-stat {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1px, 0.4cqw, 3px);
    padding: clamp(2px, 0.8cqw, 4px) clamp(1px, 0.6cqw, 3px);
    background: transparent;
    border-color: transparent;
    border-width: 0;
    box-shadow: none;
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-stats--full-art .wb-stat__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(22px, 5.2cqw, 30px);
    height: clamp(20px, 4.8cqw, 26px);
    padding: 0 clamp(4px, 1.1cqw, 7px);
    border-radius: 999px;
    background: rgba(10, 14, 24, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: clamp(10px, 2.6cqw, 13px);
    line-height: 1;
    transform: translateY(-1px);
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-stats--full-art .wb-stat__icon {
    width: clamp(24px, 5.8cqw, 34px);
    height: clamp(24px, 5.8cqw, 34px);
    min-width: clamp(24px, 5.8cqw, 34px);
    min-height: clamp(24px, 5.8cqw, 34px);
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    overflow: hidden;
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-stats--full-art .wb-stat__icon img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    padding: 1px;
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(255, 255, 255, 0.5);
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-ability,
.layout-card.wb-card .wb-layout--full-art-v3 .wb-lore {
    background: rgba(10, 14, 24, 0.76);
    border-color: rgba(255, 255, 255, 0.2);
}

.layout-card.wb-card .wb-layout--full-art-v3 .wb-ability-title,
.layout-card.wb-card .wb-layout--full-art-v3 .wb-ability-text,
.layout-card.wb-card .wb-layout--full-art-v3 .wb-lore-text {
    color: rgba(248, 248, 255, 0.94);
}

/* ==========================================
   Arcane Relic / Nexo Prismático
   ========================================== */
.layout-card.wb-card .wb-layout.wb-layout--arcane-relic {
    display: grid;
    grid-template-rows: auto minmax(0, 2.2fr) auto auto;
    gap: clamp(5px, 1.4cqw, 8px);
    height: 100%;
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-header--arcane .wb-nameplate {
    background: linear-gradient(180deg, rgba(22, 18, 38, 0.92), rgba(34, 24, 56, 0.94));
    border-color: rgba(160, 120, 255, 0.28);
    box-shadow:
        0 4px 14px rgba(80, 40, 180, 0.18),
        inset 0 1px 0 rgba(200, 180, 255, 0.16);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-header--arcane .wb-nameplate__title {
    color: rgba(232, 220, 255, 0.96);
    text-shadow: 0 0 12px rgba(180, 140, 255, 0.35);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-header--arcane .wb-nameplate__set-code {
    color: rgba(200, 180, 255, 0.78);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-header--arcane .wb-nameplate__set-icon {
    border-color: rgba(160, 120, 255, 0.4);
    background: rgba(40, 30, 72, 0.7);
}

/* Arcane Stage — portrait + halo + stats */
.wb-arcane-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: visible;
}

.wb-arcane-stage__halo {
    position: absolute;
    inset: clamp(-4px, -1.2cqw, -8px);
    border-radius: 22px;
    background:
        conic-gradient(from 0deg at 50% 50%,
            rgba(120, 80, 255, 0.22),
            rgba(255, 120, 200, 0.18),
            rgba(80, 200, 255, 0.22),
            rgba(120, 255, 160, 0.16),
            rgba(255, 200, 80, 0.18),
            rgba(120, 80, 255, 0.22)
        );
    filter: blur(10px);
    animation: arcane-halo-rotate 12s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes arcane-halo-rotate {
    from { filter: blur(10px) hue-rotate(0deg); }
    to   { filter: blur(10px) hue-rotate(360deg); }
}

.wb-arcane-stage__frame {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(160, 120, 255, 0.35);
    background:
        radial-gradient(circle at 50% 30%, rgba(80, 50, 160, 0.18), transparent 60%),
        rgba(18, 14, 32, 0.85);
    box-shadow:
        0 0 22px rgba(120, 80, 255, 0.18),
        0 6px 18px rgba(0, 0, 0, 0.28),
        inset 0 0 16px rgba(120, 80, 255, 0.08);
}

.wb-arcane-stage__frame .wb-art__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    padding: 0;
}

/* Stats below frame — prismatic style */
.wb-arcane-stage__stats {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: clamp(-14px, -3.4cqw, -20px);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane {
    --wb-stat-cols: 5;
    --wb-stat-gap: clamp(3px, 0.9cqw, 5px);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat {
    border-radius: 999px;
    padding: clamp(3px, 1cqw, 5px);
    gap: clamp(1px, 0.5cqw, 2px);
    background: rgba(18, 14, 32, 0.88);
    border: 1px solid rgba(160, 120, 255, 0.3);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(120, 80, 255, 0.12);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat__icon img {
    width: clamp(20px, 5.2cqw, 28px);
    height: clamp(20px, 5.2cqw, 28px);
    border-radius: 999px;
    padding: 1px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(160, 120, 255, 0.3);
    box-shadow: none;
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat__value {
    font-size: clamp(9px, 2.4cqw, 12px);
    color: #fff;
    text-shadow: 0 0 6px rgba(180, 140, 255, 0.45);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat:nth-child(1) {
    border-color: rgba(101, 176, 255, 0.4);
    box-shadow: 0 0 10px rgba(101, 176, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat:nth-child(2) {
    border-color: rgba(249, 188, 81, 0.4);
    box-shadow: 0 0 10px rgba(249, 188, 81, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat:nth-child(3) {
    border-color: rgba(184, 124, 241, 0.4);
    box-shadow: 0 0 10px rgba(184, 124, 241, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat:nth-child(4) {
    border-color: rgba(234, 111, 128, 0.4);
    box-shadow: 0 0 10px rgba(234, 111, 128, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.layout-card.wb-card .wb-layout--arcane-relic .wb-stats--arcane .wb-stat:nth-child(5) {
    border-color: rgba(107, 204, 130, 0.4);
    box-shadow: 0 0 10px rgba(107, 204, 130, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Arcane copy — ability & lore with dark mystical styling */
.wb-arcane-copy {
    display: grid;
    gap: clamp(4px, 1.2cqw, 7px);
    min-height: 0;
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-ability--arcane {
    background: rgba(22, 16, 42, 0.86);
    border-color: rgba(160, 120, 255, 0.22);
    box-shadow: 0 0 12px rgba(120, 80, 255, 0.08);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-ability--arcane .wb-ability-title {
    color: rgba(220, 200, 255, 0.95);
    text-shadow: 0 0 8px rgba(180, 140, 255, 0.3);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-ability--arcane .wb-ability-text {
    color: rgba(200, 190, 230, 0.88);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-lore--arcane {
    background: rgba(18, 12, 36, 0.78);
    border-color: rgba(160, 120, 255, 0.16);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-lore--arcane .wb-lore-text {
    color: rgba(190, 180, 220, 0.82);
}

/* Arcane faction footer */
.layout-card.wb-card .wb-layout--arcane-relic .wb-faction-footer {
    background: rgba(22, 16, 42, 0.82);
    border-color: rgba(160, 120, 255, 0.25);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-faction-footer::before {
    background: linear-gradient(90deg,
        rgba(120, 80, 255, 0.18),
        rgba(200, 120, 255, 0.12),
        rgba(80, 180, 255, 0.18)
    );
    opacity: 1;
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-faction-footer__text {
    color: rgba(220, 210, 255, 0.88);
}

.layout-card.wb-card .wb-layout--arcane-relic .wb-faction-footer__icon {
    border-color: rgba(160, 120, 255, 0.35);
    background: rgba(40, 30, 72, 0.6);
}

/* ==========================================
   Stellar Rift / Grieta Estelar
   ========================================== */
.layout-card.wb-card .wb-layout.wb-layout--stellar-rift {
    display: grid;
    grid-template-rows: auto minmax(0, 1.6fr) auto auto auto auto;
    gap: clamp(4px, 1.1cqw, 7px);
    height: 100%;
}

/* Header — deep space dark style */
.layout-card.wb-card .wb-layout--stellar-rift .wb-header--rift .wb-nameplate--rift {
    background: linear-gradient(135deg, rgba(8, 12, 28, 0.94), rgba(16, 22, 48, 0.92));
    border-color: rgba(80, 160, 255, 0.22);
    box-shadow:
        0 4px 16px rgba(0, 20, 80, 0.22),
        inset 0 1px 0 rgba(120, 180, 255, 0.12);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-header--rift .wb-nameplate__title {
    color: rgba(220, 235, 255, 0.96);
    text-shadow: 0 0 10px rgba(80, 160, 255, 0.3);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-header--rift .wb-nameplate__set-code {
    color: rgba(160, 200, 255, 0.76);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-header--rift .wb-nameplate__set-icon {
    border-color: rgba(80, 160, 255, 0.35);
    background: rgba(12, 20, 48, 0.7);
}

/* Rift Stage — the central visual area */
.wb-rift-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
}

/* Void background — deep space behind portrait */
.wb-rift-stage__void {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(20, 40, 100, 0.3), transparent 65%),
        radial-gradient(circle at 25% 30%, rgba(60, 120, 255, 0.08), transparent 40%),
        radial-gradient(circle at 75% 60%, rgba(180, 60, 255, 0.06), transparent 40%),
        linear-gradient(180deg, rgba(6, 8, 20, 0.92), rgba(10, 14, 32, 0.96));
    border: 1px solid rgba(80, 120, 255, 0.12);
    overflow: hidden;
    z-index: 0;
}

/* Animated diagonal slit — the "rift" */
.wb-rift-stage__slit {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 180%;
    height: 2px;
    transform: translateX(-50%) rotate(-25deg);
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(100, 180, 255, 0.15) 20%,
        rgba(180, 220, 255, 0.7) 45%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(180, 220, 255, 0.7) 55%,
        rgba(100, 180, 255, 0.15) 80%,
        transparent 95%
    );
    box-shadow:
        0 0 20px rgba(100, 180, 255, 0.4),
        0 0 50px rgba(80, 140, 255, 0.2);
    z-index: 1;
    pointer-events: none;
    animation: rift-pulse 4s ease-in-out infinite;
}

@keyframes rift-pulse {
    0%, 100% { opacity: 0.7; box-shadow: 0 0 20px rgba(100, 180, 255, 0.3), 0 0 40px rgba(80, 140, 255, 0.15); }
    50%      { opacity: 1;   box-shadow: 0 0 30px rgba(100, 180, 255, 0.5), 0 0 60px rgba(80, 140, 255, 0.25); }
}

/* Portrait container */
.wb-rift-stage__portrait {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(100, 180, 255, 0.3);
    background: rgba(10, 16, 36, 0.6);
    box-shadow:
        0 0 28px rgba(60, 120, 255, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(60, 120, 255, 0.06);
}

.wb-rift-stage__portrait .wb-art__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    padding: 0;
}

/* Stat Bars — colored horizontal bars with percentage fill */
.wb-rift-bars {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.8cqw, 5px);
    padding: clamp(5px, 1.4cqw, 8px);
    background: rgba(6, 10, 26, 0.82);
    border-radius: clamp(8px, 2.4cqw, 12px);
    border: 1px solid rgba(80, 120, 255, 0.12);
}

.wb-rift-bar {
    display: grid;
    grid-template-columns: clamp(18px, 5cqw, 24px) 1fr clamp(22px, 6.5cqw, 30px);
    align-items: center;
    gap: clamp(4px, 1.1cqw, 7px);
}

.wb-rift-bar__icon {
    width: clamp(18px, 5cqw, 24px);
    height: clamp(18px, 5cqw, 24px);
    border-radius: 999px;
    object-fit: contain;
}

.wb-rift-bar__track {
    height: clamp(7px, 2cqw, 10px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
}

.wb-rift-bar__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease-out;
}

.wb-rift-bar__value {
    font-family: var(--font-numeric, Rubik, system-ui);
    font-weight: 800;
    font-size: clamp(9px, 2.4cqw, 12px);
    line-height: 1;
    color: #fff;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Bar color per stat */
.wb-rift-bar--0 .wb-rift-bar__fill { background: linear-gradient(90deg, rgba(60, 140, 255, 0.5), rgba(101, 176, 255, 0.95)); }
.wb-rift-bar--0 .wb-rift-bar__value { color: rgba(160, 210, 255, 0.95); }

.wb-rift-bar--1 .wb-rift-bar__fill { background: linear-gradient(90deg, rgba(200, 150, 40, 0.5), rgba(249, 188, 81, 0.95)); }
.wb-rift-bar--1 .wb-rift-bar__value { color: rgba(255, 220, 140, 0.95); }

.wb-rift-bar--2 .wb-rift-bar__fill { background: linear-gradient(90deg, rgba(140, 80, 200, 0.5), rgba(184, 124, 241, 0.95)); }
.wb-rift-bar--2 .wb-rift-bar__value { color: rgba(210, 180, 255, 0.95); }

.wb-rift-bar--3 .wb-rift-bar__fill { background: linear-gradient(90deg, rgba(190, 70, 80, 0.5), rgba(234, 111, 128, 0.95)); }
.wb-rift-bar--3 .wb-rift-bar__value { color: rgba(255, 180, 190, 0.95); }

.wb-rift-bar--4 .wb-rift-bar__fill { background: linear-gradient(90deg, rgba(60, 160, 90, 0.5), rgba(107, 204, 130, 0.95)); }
.wb-rift-bar--4 .wb-rift-bar__value { color: rgba(160, 235, 180, 0.95); }

/* Rift copy — ability & lore */
.wb-rift-copy {
    display: grid;
    gap: clamp(4px, 1.2cqw, 7px);
    min-height: 0;
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-ability--rift {
    background: linear-gradient(135deg, rgba(8, 14, 32, 0.88), rgba(14, 20, 44, 0.85));
    border-color: rgba(80, 160, 255, 0.18);
    box-shadow: 0 0 10px rgba(60, 120, 255, 0.06);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-ability--rift .wb-ability-title {
    color: rgba(200, 225, 255, 0.95);
    text-shadow: 0 0 6px rgba(80, 160, 255, 0.25);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-ability--rift .wb-ability-text {
    color: rgba(180, 200, 235, 0.85);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-lore--rift {
    background: rgba(6, 10, 26, 0.78);
    border-color: rgba(80, 160, 255, 0.12);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-lore--rift .wb-lore-text {
    color: rgba(160, 185, 220, 0.8);
}

/* Rift faction footer */
.layout-card.wb-card .wb-layout--stellar-rift .wb-faction-footer--rift {
    background: rgba(8, 14, 32, 0.82);
    border-color: rgba(80, 160, 255, 0.2);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-faction-footer--rift::before {
    background: linear-gradient(90deg,
        rgba(60, 120, 255, 0.15),
        rgba(100, 180, 255, 0.1),
        rgba(60, 120, 255, 0.15)
    );
    opacity: 1;
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-faction-footer__text {
    color: rgba(200, 220, 255, 0.86);
}

.layout-card.wb-card .wb-layout--stellar-rift .wb-faction-footer__icon {
    border-color: rgba(80, 160, 255, 0.3);
    background: rgba(12, 20, 48, 0.6);
}