/* ==========================================================================
   OMNIDRAGON BATTLE PASS - ECLIPSE SACRIFICE MODE
   Scoped styles for website template integration
   ========================================================================== */

.muex-battlepass {
    --bp-bg: var(--gb-bg, var(--theme-color-07111eff,#07111e));
    --bp-surface: var(--gb-panel, var(--theme-color-0c1c2bff,#0c1c2b));
    --bp-surface-2: var(--gb-panel-2, var(--theme-color-102538ff,#102538));
    --bp-surface-3: var(--theme-color-142e44ff,#142e44);
    --bp-line: var(--gb-line, var(--theme-color-254054ff,#254054));
    --bp-line-soft: var(--theme-color-7baec824,rgba(123, 174, 200, 0.14));
    --bp-text: var(--gb-text, var(--theme-color-e9f3fbff,#e9f3fb));
    --bp-muted: var(--gb-muted, var(--theme-color-8ba6b9ff,#8ba6b9));
    --bp-dim: var(--theme-color-628097ff,#628097);
    --bp-cyan: var(--gb-cyan, var(--theme-color-42c7eeff,#42c7ee));
    --bp-cyan-2: var(--theme-color-1597c6ff,#1597c6);
    --bp-cyan-wash: var(--theme-color-42c7ee1f,rgba(66, 199, 238, 0.12));
    --bp-gold: #f1bf70;
    --bp-gold-2: #bb803e;
    --bp-gold-wash: rgba(241, 191, 112, 0.12);
    --bp-green: #52dcb1;
    --bp-danger: #f17f7c;
    --bp-radius: 14px;
    --bp-radius-sm: 8px;

    color: var(--bp-text);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 35px 0;
    position: relative;
}

.muex-battlepass *,
.muex-battlepass *::before,
.muex-battlepass *::after {
    box-sizing: border-box;
}

/* Quick Anchor Subnav */
.bp-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding: 6px 10px;
    background: linear-gradient(180deg, var(--theme-color-102538e6,rgba(16, 37, 56, 0.9)), var(--theme-color-0c1c2bf2,rgba(12, 28, 43, 0.95)));
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius-sm);
    box-shadow: 0 4px 15px var(--theme-color-0000004d,rgba(0, 0, 0, 0.3));
}

.bp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--bp-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.bp-nav-link:hover,
.bp-nav-link.active {
    color: var(--theme-color-ffffffff,#ffffff);
    background: linear-gradient(90deg, var(--theme-color-42c7ee2e,rgba(66, 199, 238, 0.18)), var(--theme-color-42c7eed,rgba(66, 199, 238, 0.05)));
    border-color: var(--theme-color-42c7ee4d,rgba(66, 199, 238, 0.3));
    text-decoration: none;
}

.bp-nav-link i {
    color: var(--bp-cyan);
    font-size: 12px;
}

.bp-nav-link.active i {
    color: var(--bp-gold);
}

.bp-badge {
    background: var(--theme-color-42c7ee33,rgba(66, 199, 238, 0.2));
    color: var(--bp-cyan);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9.5px;
    margin-left: 2px;
}

/* Hero Section */
.bp-hero {
    min-height: auto;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-color-4a5c68ff,#4a5c68);
    background: radial-gradient(ellipse at 88% 45%, var(--theme-color-3189ac40,rgba(49, 137, 172, 0.25)), transparent 50%),
                linear-gradient(116deg, var(--theme-color-0d2538ff,#0d2538) 0%, var(--theme-color-102638ff,#102638) 44%, var(--theme-color-091727ff,#091727) 76%, var(--theme-color-0a1c2bff,#0a1c2b) 100%);
    box-shadow: 0 10px 25px var(--theme-color-00000059,rgba(0, 0, 0, 0.35));
    border-radius: var(--bp-radius);
    display: flex;
    align-items: center;
    padding: 14px 22px;
    margin-bottom: 16px;
    isolation: isolate;
}

.bp-hero-noise {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(100deg, transparent 0, transparent 36px, var(--theme-color-ffffff4,rgba(255, 255, 255, 0.015)) 37px, transparent 39px);
    opacity: 0.8;
    z-index: -1;
}

.bp-hero-diagonal {
    position: absolute;
    left: 45%;
    top: -50%;
    height: 220%;
    width: 2px;
    background: rgba(241, 191, 112, 0.12);
    transform: rotate(34deg);
    box-shadow: 40px 0 0 rgba(241, 191, 112, 0.04), 110px 0 0 rgba(241, 191, 112, 0.03);
    z-index: -1;
}

.bp-hero-copy {
    position: relative;
    z-index: 3;
    max-width: calc(100% - 275px);
}

.bp-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1.5px;
    font-size: 9px;
    color: var(--bp-gold);
    font-weight: 900;
}

.bp-eyebrow-line {
    height: 1px;
    width: 18px;
    background: var(--bp-gold);
}

.bp-diamond {
    font-size: 6px;
}

.bp-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(18px, 2.2vw, 25px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin: 3px 0 4px;
    color: var(--theme-color-f3f7ffff,#f3f7ff);
    text-shadow: 0 2px 10px var(--theme-color-00000080,rgba(0, 0, 0, 0.5));
}

.bp-title em {
    font-style: normal;
    color: #efc685;
    background: linear-gradient(180deg, #ffe9b5, #db9e5c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bp-subtitle {
    max-width: 620px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--theme-color-a3bdc9ff,#a3bdc9);
    margin: 0 0 10px;
}

.bp-hero-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bp-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.bp-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border-radius: 5px;
    padding: 7px 14px;
    border: 1px solid transparent;
    min-height: 32px;
    font-weight: 900;
    letter-spacing: 0.8px;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bp-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.bp-btn-gold {
    color: var(--theme-color-1a1b20ff,#1a1b20);
    border-color: #ffd895;
    background: linear-gradient(110deg, #f4ca88, #d69d5d);
    box-shadow: 0 4px 20px rgba(214, 157, 93, 0.25);
}

.bp-btn-gold:hover {
    color: var(--theme-color-121316ff,#121316);
    background: linear-gradient(110deg, #ffd99c, #e4aa6b);
}

.bp-btn-outline {
    background: var(--theme-color-0a1c2b73,rgba(10, 28, 43, 0.45));
    border-color: var(--theme-color-4d6875ff,#4d6875);
    color: var(--theme-color-d0e0e7ff,#d0e0e7);
}

.bp-btn-outline:hover {
    background: var(--theme-color-102c4499,rgba(16, 44, 68, 0.6));
    border-color: var(--bp-cyan);
    color: var(--theme-color-ffffffff,#ffffff);
}

.bp-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--theme-color-8dabbdff,#8dabbd);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
}

.bp-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bp-hero-meta i {
    color: var(--bp-gold);
}

.bp-meta-divider {
    width: 1px;
    height: 12px;
    background: var(--theme-color-476071ff,#476071);
}

.bp-hero-art {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 85px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bp-hero-art img {
    height: auto;
    width: 100%;
    max-height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px var(--theme-color-00000099,rgba(0, 0, 0, 0.6)));
}

.bp-hero-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bp-orbit-1 {
    inset: 4px;
    border: 1px solid var(--theme-color-73b9d51f,rgba(115, 185, 213, 0.12));
}

.bp-orbit-2 {
    inset: 12px;
    border: 1px solid rgba(241, 191, 112, 0.15);
}

.bp-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--bp-gold);
    opacity: 0.6;
}

.bp-corner-tl {
    left: 8px;
    top: 8px;
    border-left: 1px solid;
    border-top: 1px solid;
}

.bp-corner-br {
    bottom: 8px;
    right: 8px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

/* Stat Grid */
.bp-stat-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 36px;
}

.bp-card {
    min-height: 185px;
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius-sm);
    background: linear-gradient(145deg, var(--bp-surface), var(--bp-surface-2));
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px var(--theme-color-00000040,rgba(0, 0, 0, 0.25));
}

.bp-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--theme-color-98b2c2ff,#98b2c2);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.bp-card-heading i {
    color: var(--bp-gold);
    margin-right: 4px;
}

.bp-tag {
    font-size: 8px;
    padding: 4px 8px;
    letter-spacing: 1px;
    font-weight: 900;
    border-radius: 4px;
    white-space: nowrap;
}

.bp-tag-soft {
    color: var(--bp-cyan);
    background: var(--bp-cyan-wash);
    border: 1px solid var(--theme-color-42c7ee40,rgba(66, 199, 238, 0.25));
}

.bp-tag-free {
    color: var(--theme-color-a3c9ddff,#a3c9dd);
    background: var(--theme-color-1a3a50ff,#1a3a50);
}

.bp-tag-premium,
.bp-tag-highlight {
    color: #edbd73;
    background: rgba(241, 191, 112, 0.12);
    border: 1px solid rgba(241, 191, 112, 0.25);
}

.bp-level-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 8px;
}

.bp-level-info small {
    display: block;
    font-size: 9px;
    letter-spacing: 1.2px;
    color: var(--theme-color-8aa6b6ff,#8aa6b6);
    margin-bottom: 2px;
}

.bp-level-info strong {
    font-family: var(--display-font, 'Trebuchet MS', sans-serif);
    font-size: 38px;
    line-height: 1.1;
    color: var(--theme-color-f6faffff,#f6faff);
}

.bp-level-info strong span {
    font-size: 17px;
    color: var(--theme-color-618da6ff,#618da6);
    font-weight: 500;
}

.bp-medallion {
    width: 50px;
    height: 50px;
    background: linear-gradient(120deg, var(--theme-color-0e293eff,#0e293e), var(--theme-color-193e55ff,#193e55));
    border: 2px solid var(--bp-cyan-2);
    box-shadow: 0 0 20px var(--bp-cyan-wash);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: rotate(45deg);
}

.bp-medallion span {
    transform: rotate(-45deg);
    font-size: 19px;
    color: var(--bp-cyan);
    font-weight: 900;
}

.bp-bar-track {
    background: var(--theme-color-061420ff,#061420);
    border: 1px solid var(--theme-color-234055ff,#234055);
    height: 8px;
    overflow: hidden;
    border-radius: 6px;
}

.bp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-color-1c94ceff,#1c94ce), var(--theme-color-65e0edff,#65e0ed));
    width: 75%;
    box-shadow: 0 0 15px var(--theme-color-4dd2fa80,rgba(77, 210, 250, 0.5));
    transition: width 0.5s ease;
}

.bp-bar-captions {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--theme-color-648699ff,#648699);
    font-size: 10px;
}

.bp-bar-captions span:first-child {
    color: var(--theme-color-96c5d9ff,#96c5d9);
}

.bp-bar-captions b {
    color: var(--theme-color-d2e7f3ff,#d2e7f3);
}

.bp-track-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 18px;
}

.bp-track-icon {
    width: 52px;
    height: 52px;
    border: 1px solid #84673d;
    background: radial-gradient(circle, #3b3026, var(--theme-color-132432ff,#132432) 80%);
    color: var(--bp-gold);
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 24px;
}

.bp-track-block strong {
    font-size: 12px;
    letter-spacing: 0.9px;
    color: var(--theme-color-e8f4fcff,#e8f4fc);
}

.bp-track-block p {
    margin: 4px 0 0;
    color: var(--theme-color-7693a6ff,#7693a6);
    font-size: 11px;
}

.bp-text-action {
    border: 0;
    background: none;
    padding: 0;
    color: var(--bp-gold);
    font-size: 10px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    cursor: pointer;
    transition: color 0.2s;
}

.bp-text-action:hover {
    color: #ffe6aa;
}

.bp-reward-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 12px;
}

.bp-reward-summary strong {
    font-size: 40px;
    line-height: 1.1;
    color: var(--theme-color-eefaffff,#eefaff);
}

.bp-reward-summary span {
    font-size: 11px;
    color: var(--theme-color-98afbcff,#98afbc);
    line-height: 1.4;
}

.bp-rewards-glyph {
    margin-left: auto;
    color: var(--bp-gold);
    opacity: 0.4;
    font-size: 42px;
}

/* Sections Common */
.bp-section {
    margin: 32px 0 40px;
}

.bp-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bp-kicker {
    font-size: 10px;
    color: var(--bp-gold);
    letter-spacing: 2px;
    font-weight: 900;
}

.bp-section-heading h2 {
    font-size: 24px;
    margin: 4px 0 2px;
    color: var(--theme-color-f1f8ffff,#f1f8ff);
    font-family: Georgia, 'Times New Roman', serif;
}

.bp-section-heading p {
    color: var(--theme-color-819eb1ff,#819eb1);
    font-size: 12px;
    margin: 0;
}

.bp-section-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bp-segmented {
    display: flex;
    padding: 3px;
    background: var(--theme-color-081826ff,#081826);
    border: 1px solid var(--theme-color-254052ff,#254052);
    border-radius: 6px;
}

.bp-segmented button {
    border: 0;
    background: transparent;
    color: var(--theme-color-7292a4ff,#7292a4);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 7px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bp-segmented button.selected {
    background: var(--theme-color-1b4256ff,#1b4256);
    color: var(--theme-color-dff8ffff,#dff8ff);
}

.bp-rail-arrows {
    display: flex;
    gap: 6px;
}

.bp-icon-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--theme-color-294355ff,#294355);
    background: var(--theme-color-102638ff,#102638);
    color: var(--theme-color-b2cfddff,#b2cfdd);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bp-icon-button:hover {
    border-color: var(--bp-cyan);
    color: var(--bp-cyan);
}

/* Rewards Rail */
.bp-rail-shell {
    background: linear-gradient(180deg, var(--theme-color-0c1a2bff,#0c1a2b), var(--theme-color-081624ff,#081624));
    border: 1px solid var(--theme-color-2a4658ff,#2a4658);
    border-radius: 10px;
    overflow: hidden;
}

.bp-rail-titles {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 13px 18px;
    background: var(--theme-color-0d2233ff,#0d2233);
    border-bottom: 1px solid var(--theme-color-254354ff,#254354);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.bp-rail-titles span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bp-rail-titles span:first-child {
    color: var(--bp-gold);
}

.bp-rail-titles span:nth-child(2) {
    color: var(--theme-color-7dc7dfff,#7dc7df);
}

.bp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.bp-dot-gold {
    background: var(--bp-gold);
    box-shadow: 0 0 8px var(--bp-gold);
}

.bp-dot-blue {
    background: var(--bp-cyan);
    box-shadow: 0 0 8px var(--bp-cyan);
}

.bp-rail-hint {
    margin-left: auto;
    color: var(--theme-color-557c91ff,#557c91);
    font-size: 9px;
}

.bp-reward-rail {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 0;
    padding: 0 12px 14px;
    scrollbar-color: var(--theme-color-416e83ff,#416e83) var(--theme-color-0b1a28ff,#0b1a28);
    scrollbar-width: thin;
}

.bp-reward-rail:focus {
    outline: none;
}

.tier-column {
    width: 168px;
    min-width: 168px;
    border-right: 1px solid var(--theme-color-628ba026,rgba(98, 139, 160, 0.15));
    padding: 0 6px;
    position: relative;
}

.tier-column.milestone {
    background: linear-gradient(180deg, rgba(238, 183, 103, 0.08), transparent);
}

.tier-heading {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--theme-color-7d9cafff,#7d9caf);
    font-size: 10px;
    letter-spacing: 0.7px;
    font-weight: 900;
}

.tier-heading strong {
    display: grid;
    place-items: center;
    width: 30px;
    height: 26px;
    border-radius: 5px;
    background: var(--theme-color-142f43ff,#142f43);
    color: var(--theme-color-b9dce9ff,#b9dce9);
    font-size: 12px;
}

.milestone .tier-heading strong {
    background: #4e3825;
    color: var(--bp-gold);
}

.tier-column.current .tier-heading strong {
    outline: 2px solid var(--bp-cyan);
    outline-offset: 2px;
    color: var(--bp-cyan);
}

.tier-reward {
    height: 160px;
    border: 1px solid var(--theme-color-2f4152ff,#2f4152);
    border-radius: 7px;
    margin-bottom: 8px;
    padding: 10px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: linear-gradient(160deg, var(--theme-color-142332ff,#142332), var(--theme-color-0c1927ff,#0c1927));
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
    cursor: pointer;
}

.tier-reward:hover {
    transform: translateY(-2px);
    border-color: var(--theme-color-5d8295ff,#5d8295);
}

.tier-reward.premium {
    background: radial-gradient(ellipse at 50% 25%, rgba(184, 121, 52, 0.16), transparent 75%), linear-gradient(155deg, var(--theme-color-292538ff,#292538), var(--theme-color-141b2aff,#141b2a));
    border-color: var(--theme-color-51483eff,#51483e);
}

.tier-reward.premium:hover {
    border-color: var(--bp-gold-2);
}

.tier-reward .reward-icon {
    width: 68px;
    height: 62px;
    display: grid;
    place-items: center;
    position: relative;
    margin-bottom: 3px;
}

.reward-icon svg {
    position: relative;
    width: 54px;
    height: 54px;
    filter: drop-shadow(0 4px 8px var(--theme-color-00000066,rgba(0, 0, 0, 0.4)));
}

.reward-title {
    font-size: 11px;
    font-weight: 900;
    color: var(--theme-color-d6e7f1ff,#d6e7f1);
    line-height: 1.25;
    min-height: 25px;
    display: grid;
    place-items: center;
}

.tier-reward.premium .reward-title {
    color: #f1d7a6;
}

.reward-subtitle {
    font-size: 9px;
    color: var(--theme-color-6c91a3ff,#6c91a3);
    line-height: 1.2;
    min-height: 18px;
    margin-top: 2px;
}

.reward-button {
    position: relative;
    display: block;
    width: 100%;
    margin-top: auto;
    background: var(--theme-color-17384cff,#17384c);
    color: var(--theme-color-a9d8e8ff,#a9d8e8);
    border: 1px solid var(--theme-color-305a6dff,#305a6d);
    border-radius: 4px;
    font-size: 9px;
    letter-spacing: 0.7px;
    font-weight: 900;
    padding: 5px 3px;
    min-height: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.tier-reward.premium .reward-button {
    background: #4b3926;
    color: #f4d49a;
    border-color: #83603e;
}

.reward-button.claimed {
    color: #79cbaa;
    background: #12312e;
    border-color: #275448;
    cursor: default;
}

/* A tier the season leaves without a reward. */
.tier-reward.is-empty {
    opacity: .55;
}

.tier-reward.is-empty .reward-icon {
    filter: grayscale(1);
}

/* A reward that was already claimed keeps a visible mark on its card. */
.tier-reward.is-claimed {
    border-color: #275448;
    background: linear-gradient(160deg, var(--theme-color-0f1efeff,#0f1efe), var(--theme-color-0c1927ff,#0c1927));
}

.tier-reward.is-claimed .reward-icon {
    opacity: .55;
}

.reward-claimed-stamp {
    position: absolute;
    left: 6px;
    top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border: 1px solid #275448;
    border-radius: 4px;
    background: #12312e;
    color: #79cbaa;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: .06em;
    white-space: nowrap;
}

.reward-button.locked {
    background: var(--theme-color-172331ff,#172331);
    color: var(--theme-color-627e8eff,#627e8e);
    border-color: var(--theme-color-293c4aff,#293c4a);
}

.reward-button.premium-locked {
    background: var(--theme-color-282532ff,#282532);
    color: #ad8d65;
    border-color: var(--theme-color-463e3aff,#463e3a);
}

.reward-button.claim-ready {
    background: linear-gradient(110deg, var(--theme-color-1e7d99ff,#1e7d99), var(--theme-color-35abccff,#35abcc));
    color: var(--theme-color-ffffffff,#ffffff);
    border-color: var(--theme-color-4ed2f5ff,#4ed2f5);
    animation: bpPulse 2.6s ease-in-out infinite;
}

@keyframes bpPulse {
    50% { box-shadow: 0 0 12px var(--theme-color-53bedb66,rgba(83, 190, 219, 0.4)); }
}

.reward-ribbon {
    position: absolute;
    right: 6px;
    top: 5px;
    font-size: 8px;
    font-weight: 900;
    color: var(--bp-gold);
    letter-spacing: 1px;
}

.tier-column.filter-free .tier-reward.premium,
.tier-column.filter-premium .tier-reward.free {
    display: none;
}

.tier-column.filter-free .tier-reward.free,
.tier-column.filter-premium .tier-reward.premium {
    height: 200px;
    justify-content: center;
}

.bp-rail-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 6px;
    font-size: 10px;
    color: var(--theme-color-718fa1ff,#718fa1);
}

.bp-rail-footer span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bp-link-quiet {
    border: 0;
    background: none;
    color: var(--theme-color-8fd9eeff,#8fd9ee);
    font-size: 10px;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    cursor: pointer;
}

.bp-link-quiet:hover {
    color: var(--theme-color-c9f4ffff,#c9f4ff);
}

/* Altar Section */
.bp-warning-pill {
    align-self: center;
    border: 1px solid rgba(239, 176, 101, 0.42);
    background: rgba(233, 169, 92, 0.08);
    border-radius: 20px;
    padding: 8px 14px;
    color: #ecc38e;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
}

.bp-altar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(265px, 0.77fr);
    gap: 16px;
    align-items: stretch;
}

.bp-altar-workspace {
    background: radial-gradient(ellipse at 96% 0%, var(--bp-cyan-wash), transparent 45%),
                linear-gradient(140deg, var(--theme-color-10263aff,#10263a), var(--theme-color-0a1a2bff,#0a1a2b) 65%, var(--theme-color-0b192aff,#0b192a));
    border: 1px solid var(--theme-color-385368ff,#385368);
    border-radius: var(--bp-radius);
    padding: 24px;
    box-shadow: 0 15px 40px var(--theme-color-00000040,rgba(0, 0, 0, 0.25));
}

.bp-altar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.bp-mini-eyebrow,
.bp-source-label,
.bp-calc-header {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--theme-color-81adc1ff,#81adc1);
    font-weight: 900;
}

.bp-mini-eyebrow {
    display: block;
    margin-bottom: 8px;
}

.bp-select {
    width: min(100%, 360px);
    background: var(--theme-color-0a1b2aff,#0a1b2a);
    border: 1px solid var(--theme-color-355b71ff,#355b71);
    color: var(--theme-color-e1f5feff,#e1f5fe);
    border-radius: 6px;
    padding: 9px 12px;
    font-weight: 700;
    font-size: 12px;
}

.bp-select:focus {
    outline: 2px solid var(--bp-cyan);
    outline-offset: 1px;
}

.bp-altar-seal {
    display: grid;
    place-items: center;
    color: var(--bp-gold);
    width: 48px;
    height: 48px;
    font-size: 28px;
    border: 1px solid rgba(240, 195, 117, 0.35);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 189, 117, 0.15), transparent 75%);
}

.bp-source-label {
    margin-bottom: 12px;
}

.bp-sources-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.source-card {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 7px;
    padding: 16px 12px 12px;
    background: var(--theme-color-0b1d2eff,#0b1d2e);
    border: 1px solid var(--theme-color-345266ff,#345266);
    border-radius: 8px;
    min-height: 170px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.source-card:hover {
    background: var(--theme-color-112d43ff,#112d43);
    border-color: var(--bp-cyan);
}

.source-card.selected {
    border-color: var(--bp-gold);
    background: radial-gradient(ellipse at 90% 0%, rgba(246, 183, 90, 0.18), transparent 58%), linear-gradient(150deg, var(--theme-color-132b3bff,#132b3b), var(--theme-color-132333ff,#132333));
    box-shadow: inset 0 0 0 1px rgba(236, 191, 117, 0.1), 0 0 25px rgba(240, 176, 92, 0.08);
}

.source-card.selected::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 12px;
    color: #f8db9e;
    font-size: 13px;
    font-weight: 900;
}

.source-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--theme-color-406980ff,#406980);
    background: var(--theme-color-16364aff,#16364a);
    border-radius: 8px;
    color: var(--bp-cyan);
    font-size: 18px;
}

.source-card.selected .source-icon {
    color: var(--bp-gold);
    background: var(--theme-color-3a342eff,#3a342e);
    border-color: #947346;
}

.source-main {
    display: grid;
    gap: 2px;
    min-height: 42px;
}

.source-main strong {
    font-size: 12px;
    color: var(--theme-color-edf6fbff,#edf6fb);
}

.source-main small {
    font-size: 9px;
    color: var(--theme-color-86a9b9ff,#86a9b9);
    overflow-wrap: anywhere;
}

.source-rate {
    display: block;
    color: var(--bp-gold);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
}

.source-rate i {
    font-size: 9px;
    font-style: normal;
    color: #b9a17f;
}

.source-rate small {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 600;
    color: var(--theme-color-779baeff,#779bae);
}

.bp-calculator {
    background: var(--theme-color-030d1773,rgba(3, 13, 23, 0.45));
    border: 1px solid var(--theme-color-304a5dff,#304a5d);
    border-radius: 8px;
    padding: 18px;
}

.bp-calc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.bp-calc-note {
    font-size: 8px;
    color: var(--theme-color-57788cff,#57788c);
    letter-spacing: 0.7px;
}

.bp-calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1.1fr);
    gap: 14px;
    align-items: center;
}

.bp-qty-zone label,
.bp-yield-zone > span:first-child {
    display: block;
    margin-bottom: 8px;
    font-weight: 900;
    font-size: 10px;
    color: var(--theme-color-9cbacaff,#9cbaca);
    letter-spacing: 0.7px;
}

.bp-qty-control {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 260px;
    border: 1px solid var(--theme-color-3c6278ff,#3c6278);
    border-radius: 6px;
    overflow: hidden;
    background: var(--theme-color-0b2030ff,#0b2030);
}

.bp-qty-control button {
    width: 44px;
    min-width: 40px;
    height: 44px;
    background: var(--theme-color-18384bff,#18384b);
    color: var(--theme-color-c0e8f6ff,#c0e8f6);
    border: 0;
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
}

.bp-qty-control button:hover {
    background: var(--theme-color-28566cff,#28566c);
}

.bp-qty-control input {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: center;
    color: var(--theme-color-ffffffff,#ffffff);
    font-size: 20px;
    font-weight: 900;
    outline: none;
    -moz-appearance: textfield;
}

.bp-qty-control input::-webkit-inner-spin-button,
.bp-qty-control input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bp-calc-caption {
    display: block;
    margin-top: 7px;
    min-height: 16px;
    color: var(--theme-color-6e9aafff,#6e9aaf);
    font-size: 9px;
    font-weight: 700;
}

.bp-exchange-icon {
    text-align: center;
    color: #cba46e;
    font-size: 20px;
}

.bp-yield-zone strong {
    font-size: 24px;
    color: #e8c18b;
    display: block;
    white-space: nowrap;
}

.bp-yield-zone strong small {
    font-size: 10px;
}

.bp-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
    border-top: 1px solid var(--theme-color-29475bff,#29475b);
    border-bottom: 1px solid var(--theme-color-29475bff,#29475b);
    padding: 14px 0;
    gap: 10px;
}

.bp-summary-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bp-summary-row > div + div {
    padding-left: 12px;
    border-left: 1px solid var(--theme-color-29455aff,#29455a);
}

.bp-summary-row span {
    color: var(--theme-color-678fa3ff,#678fa3);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.bp-summary-row strong {
    font-size: 12px;
    line-height: 1.4;
    color: var(--theme-color-dbeef7ff,#dbeef7);
    word-break: break-word;
}

.bp-submit-btn {
    width: 100%;
    margin-top: 16px;
}

.bp-error-msg {
    font-size: 10px;
    color: #eab19a;
    min-height: 15px;
    margin: 8px 0 0;
}

/* Altar Aside */
.bp-altar-aside {
    background: radial-gradient(ellipse at 50% 20%, rgba(239, 179, 98, 0.14), transparent 60%),
                linear-gradient(155deg, var(--theme-color-172535ff,#172535), var(--theme-color-151c29ff,#151c29));
    border: 1px solid #745b3e;
    border-radius: var(--bp-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.bp-altar-portrait {
    height: 180px;
    display: grid;
    place-items: center;
    position: relative;
}

.bp-halo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid #866c46;
    position: absolute;
    box-shadow: 0 0 25px rgba(232, 171, 86, 0.12), inset 0 0 20px rgba(232, 171, 86, 0.08);
}

.bp-altar-portrait img {
    position: relative;
    height: auto;
    width: 220px;
    max-height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px var(--theme-color-00000099,rgba(0, 0, 0, 0.6)));
}

.bp-aside-kicker {
    margin-top: 6px;
    color: var(--bp-gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.bp-altar-aside h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 400;
    margin: 8px 0;
    color: var(--theme-color-f6faffff,#f6faff);
}

.bp-altar-aside h3 em {
    font-style: normal;
    color: var(--bp-gold);
}

.bp-altar-aside p {
    color: var(--theme-color-96b0bdff,#96b0bd);
    line-height: 1.7;
    font-size: 11px;
    margin: 0;
}

.bp-aside-stats {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--theme-color-534c42ff,#534c42);
}

.bp-aside-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bp-aside-stats span {
    font-size: 9px;
    color: var(--theme-color-8a9fabff,#8a9fab);
    font-weight: 800;
}

.bp-aside-stats strong {
    font-size: 16px;
    color: var(--bp-gold);
}

.bp-aside-note {
    margin-top: auto;
    padding-top: 16px;
    color: var(--theme-color-a59885ff,#a59885);
    font-size: 10px;
    line-height: 1.6;
    display: flex;
    gap: 8px;
}

.bp-aside-note i {
    color: #e8b86f;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* History Section */
.bp-history-mark {
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 900;
    color: var(--theme-color-6e93a5ff,#6e93a5);
}

.bp-history-wrap {
    border: 1px solid var(--bp-line);
    background: linear-gradient(120deg, var(--bp-surface), var(--bp-surface-2));
    border-radius: 8px;
    overflow-x: auto;
}

.bp-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    white-space: nowrap;
}

.bp-table th {
    padding: 13px 16px;
    border-bottom: 1px solid var(--theme-color-314b60ff,#314b60);
    font-size: 9px;
    letter-spacing: 1.2px;
    color: var(--theme-color-7595a7ff,#7595a7);
    background: var(--theme-color-11283bff,#11283b);
}

.bp-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--theme-color-203b4eff,#203b4e);
    color: var(--theme-color-94b0c0ff,#94b0c0);
    font-size: 11px;
}

.bp-table tr:last-child td {
    border: 0;
}

.bp-history-char {
    color: var(--theme-color-e1edf5ff,#e1edf5) !important;
    font-weight: 800;
}

.bp-history-res {
    padding: 3px 6px;
    margin-right: 6px;
    border: 1px solid var(--theme-color-4b5670ff,#4b5670);
    background: var(--theme-color-212a43ff,#212a43);
    border-radius: 4px;
    color: var(--theme-color-dbcbf7ff,#dbcbf7);
    font-size: 9px;
    font-weight: 800;
}

.bp-history-gain {
    color: #f0c681 !important;
    font-weight: 900;
}

.bp-history-status {
    color: #67cdb0;
    font-weight: 900;
    font-size: 9px;
}

/* Rules Section */
.bp-rules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bp-rule-card {
    padding: 18px;
    border: 1px solid var(--bp-line);
    background: linear-gradient(145deg, var(--bp-surface), var(--bp-surface-2));
    border-radius: 8px;
    min-height: 145px;
}

.bp-rule-card i {
    color: var(--bp-gold);
    font-size: 22px;
    margin-bottom: 12px;
    display: block;
}

.bp-rule-card strong {
    font-size: 11px;
    display: block;
    color: var(--theme-color-ffffffff,#ffffff);
    margin-bottom: 6px;
}

.bp-rule-card p {
    margin: 0;
    color: var(--theme-color-85a0afff,#85a0af);
    font-size: 11px;
    line-height: 1.6;
}

/* Footer Controls */
.bp-footer {
    padding: 20px 0 10px;
    margin-top: 36px;
    border-top: 1px solid var(--theme-color-253d50ff,#253d50);
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 9px;
    letter-spacing: 1.1px;
    color: var(--theme-color-648195ff,#648195);
    font-weight: 800;
}

/* Toast System */
.bp-toast-root {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.bp-toast {
    pointer-events: auto;
    border: 1px solid var(--theme-color-426477ff,#426477);
    background: var(--theme-color-112b3bff,#112b3b);
    color: var(--theme-color-e6f8faff,#e6f8fa);
    box-shadow: 0 10px 30px var(--theme-color-00000080,rgba(0, 0, 0, 0.5));
    padding: 12px 16px;
    min-width: 260px;
    max-width: 360px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    animation: bpToastIn 0.25s ease;
}

.bp-toast i {
    color: var(--bp-green);
    font-size: 16px;
}

.bp-toast.error {
    border-color: #90565b;
}

.bp-toast.error i {
    color: var(--bp-danger);
}

@keyframes bpToastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Modal System */
.bp-modal-scrim {
    position: fixed;
    inset: 0;
    background: var(--theme-color-00050dd1,rgba(0, 5, 13, 0.82));
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(6px);
}

.bp-modal {
    position: relative;
    max-width: 480px;
    width: 100%;
    padding: 28px;
    background: radial-gradient(ellipse at 50% 0%, rgba(239, 181, 98, 0.16), transparent 70%), var(--theme-color-102235ff,#102235);
    border: 1px solid #8e714b;
    border-radius: 12px;
    box-shadow: 0 20px 80px var(--theme-color-000000d9,rgba(0, 0, 0, 0.85));
    animation: bpToastIn 0.25s ease;
}

.bp-modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    color: var(--theme-color-a7bdc7ff,#a7bdc7);
    background: none;
    border: 0;
    font-size: 16px;
    cursor: pointer;
}

.bp-modal-close:hover {
    color: var(--theme-color-ffffffff,#ffffff);
}

.bp-modal-crest {
    margin: 0 auto 6px;
    width: 95px;
    height: 100px;
    object-fit: contain;
    display: block;
}

.bp-modal-kicker {
    text-align: center;
    font-size: 10px;
    color: var(--bp-gold);
    letter-spacing: 2px;
    font-weight: 900;
}

.bp-modal h2 {
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 26px;
    margin: 8px 0;
    color: var(--theme-color-f3f7ffff,#f3f7ff);
}

.bp-modal p {
    color: var(--theme-color-a9c3d1ff,#a9c3d1);
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
    margin-bottom: 16px;
}

.bp-modal-benefits {
    border-top: 1px solid var(--theme-color-4b4f4aff,#4b4f4a);
    border-bottom: 1px solid var(--theme-color-4b4f4aff,#4b4f4a);
    padding: 14px 4px;
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.bp-modal-benefits div {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--theme-color-d5e5eaff,#d5e5ea);
}

.bp-modal-benefits i {
    color: var(--bp-green);
}

.bp-modal-actions {
    display: flex;
    gap: 10px;
}

.bp-modal-actions .bp-btn {
    flex: 1;
}

.bp-modal-note {
    font-size: 10px !important;
    color: var(--theme-color-778f9fff,#778f9f) !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}

/* The reason the server gives for a pass that cannot be unlocked yet. */
.bp-modal-blocked {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 0;
    padding: 8px 10px;
    border: 1px solid #7a4a1a;
    border-radius: 6px;
    background: #2a1c0f;
    color: #f2cb8a;
    font-size: 10.5px;
    line-height: 1.55;
}

.bp-modal-detail-icon {
    display: flex;
    justify-content: center;
    margin: 18px 0 12px;
}

.bp-modal-detail-icon svg {
    width: 72px;
    height: 72px;
}

.bp-modal-detail-label {
    text-align: center;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--theme-color-9ab9caff,#9ab9ca);
    font-weight: 900;
    margin: 10px 0 2px;
}

.bp-sacrifice-review {
    display: grid;
    gap: 9px;
    margin: 18px 0;
    padding: 14px;
    background: var(--theme-color-0a1b2cff,#0a1b2c);
    border: 1px solid var(--theme-color-3c5465ff,#3c5465);
    border-radius: 8px;
}

.bp-sacrifice-review div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bp-sacrifice-review span {
    color: var(--theme-color-819fafff,#819faf);
    font-size: 10px;
    font-weight: 800;
}

.bp-sacrifice-review b {
    color: #f2d7a2;
    font-size: 12px;
    text-align: right;
}

.bp-modal-safety {
    color: #edbd9e;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.5;
}

.bp-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--theme-color-c1d2dcff,#c1d2dc);
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
}

.bp-confirm-check input {
    accent-color: var(--bp-gold);
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Responsive Adaptations */
@media (max-width: 1080px) {
    .bp-altar-layout {
        grid-template-columns: 1fr;
    }
    .bp-altar-aside {
        display: grid;
        grid-template-columns: 150px 1fr;
        column-gap: 20px;
        align-items: center;
    }
    .bp-altar-portrait {
        grid-row: 1 / 4;
        height: 160px;
    }
    .bp-altar-portrait img {
        height: 150px;
    }
    .bp-aside-stats {
        grid-column: 2;
    }
    .bp-aside-note {
        grid-column: 1 / -1;
        padding-top: 10px;
    }
    .bp-rules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .bp-hero-copy {
        max-width: 100%;
    }
    .bp-hero-art {
        opacity: 0.18;
        width: 150px;
        height: 50px;
        right: 12px;
    }
    .bp-stat-grid {
        grid-template-columns: 1fr;
    }
    .bp-sources-grid {
        grid-template-columns: 1fr;
    }
    .bp-rules-grid {
        grid-template-columns: 1fr;
    }
    .bp-altar-aside {
        display: none;
    }
}

@media (max-width: 520px) {
    .bp-hero {
        padding: 12px 14px;
    }
    .bp-title {
        font-size: 17px;
    }
    .bp-hero-meta {
        display: none;
    }
    .bp-calc-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .bp-qty-control {
        max-width: 100%;
    }
    .bp-exchange-icon {
        display: none;
    }
    .bp-summary-row {
        grid-template-columns: 1fr;
    }
    .bp-summary-row > div + div {
        padding-left: 0;
        border-left: 0;
        padding-top: 8px;
        border-top: 1px solid var(--theme-color-29455aff,#29455a);
    }
}


/* ==========================================================================
   Omniversal SDK Integration: Live Item Previews, MU Tooltips & Vault Selector
   ========================================================================== */

.bp-unlock-rule-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--bp-gold);
    background: rgba(212, 165, 92, 0.12);
    border: 1px solid rgba(212, 165, 92, 0.28);
}

.bp-vault-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--theme-color-0b1826ff,#0b1826);
    border: 1px solid var(--theme-color-24394cff,#24394c);
}

.bp-vault-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--bp-muted);
    white-space: nowrap;
}

.bp-vault-select {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--bp-text);
    font-size: 10px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}

.bp-vault-select option {
    background: var(--theme-color-0d1b2aff,#0d1b2a);
    color: var(--theme-color-e2eff8ff,#e2eff8);
}

.bp-reward-item-img {
    max-width: 56px;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 4px 8px var(--theme-color-0000008c,rgba(0, 0, 0, 0.55)));
    transition: transform 0.2s ease;
}

.tier-reward:hover .bp-reward-item-img {
    transform: scale(1.08);
}

.bp-reward-meta-tag {
    position: absolute;
    left: 6px;
    top: 5px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--theme-color-86aec2ff,#86aec2);
    background: var(--theme-color-08111cbf,rgba(8, 17, 28, 0.75));
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid var(--theme-color-5d829540,rgba(93, 130, 149, 0.25));
}

/* MU Item Rarity Card Borders (Invariant per MU Online conventions) */
.tier-reward.rarity-excellent {
    border-color: rgba(45, 255, 106, 0.38);
}
.tier-reward.rarity-ancient {
    border-color: rgba(36, 242, 255, 0.45);
}
.tier-reward.rarity-harmony,
.tier-reward.rarity-socket {
    border-color: var(--theme-color-c17aff6b,rgba(193, 122, 255, 0.42));
}

/* Floating Authentic MU Online Item Tooltip Portal */
.bp-tooltip-portal {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    max-width: 310px;
    min-width: 235px;
}

.bp-tooltip-portal.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bp-tooltip-portal .mu-item-tooltip,
.bp-modal-tooltip-preview .mu-item-tooltip {
    background: var(--theme-color-070c14f5,rgba(7, 12, 20, 0.96));
    border: 1px solid var(--theme-color-3c5670ff,#3c5670);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 14px 34px var(--theme-color-000000d9,rgba(0, 0, 0, 0.85)), inset 0 0 0 1px var(--theme-color-ffffffd,rgba(255, 255, 255, 0.05));
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    line-height: 1.45;
    color: var(--theme-color-d7e6f5ff,#d7e6f5);
}

.bp-modal-tooltip-preview {
    margin: 12px auto 6px;
    max-width: 290px;
}

.bp-modal-detail-icon .bp-reward-item-img {
    max-width: 72px;
    max-height: 72px;
}

.mu-item-tooltip .mu-tt-title {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--theme-color-6e94b33d,rgba(110, 148, 179, 0.24));
    color: var(--theme-color-ffffffff,#ffffff);
}

/* Invariant MU Online Rarity Colors */
.mu-item-tooltip.rarity-excellent .mu-tt-title {
    color: #2dff6a;
    text-shadow: 0 0 8px rgba(45, 255, 106, 0.35);
}
.mu-item-tooltip.rarity-ancient .mu-tt-title {
    color: #24f2ff;
    background: var(--theme-color-003e7873,rgba(0, 62, 120, 0.45));
    border-radius: 3px;
    padding: 2px 6px;
}
.mu-item-tooltip.rarity-harmony .mu-tt-title,
.mu-item-tooltip.rarity-socket .mu-tt-title {
    color: var(--theme-color-c77dffff,#c77dff);
}
.mu-item-tooltip.rarity-magic .mu-tt-title {
    color: var(--theme-color-6bb8ffff,#6bb8ff);
}

.mu-item-tooltip .mu-tt-meta {
    font-size: 10px;
    color: var(--theme-color-93adc2ff,#93adc2);
    margin-bottom: 5px;
}

.mu-item-tooltip .mu-tt-line {
    font-size: 11px;
    color: var(--theme-color-c8daeaff,#c8daea);
}

.mu-item-tooltip .mu-tt-section {
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px dashed var(--theme-color-6487a538,rgba(100, 135, 165, 0.22));
}

.mu-item-tooltip .mu-tt-blue {
    color: var(--theme-color-69b7ffff,#69b7ff);
}
.mu-item-tooltip .mu-tt-exc {
    color: #2dff6a;
}
.mu-item-tooltip .mu-tt-ancient {
    color: #24f2ff;
    font-weight: 700;
}
.mu-item-tooltip .mu-tt-yellow {
    color: #ffd154;
    font-weight: 700;
}
.mu-item-tooltip .mu-tt-purple,
.mu-item-tooltip .mu-tt-socket {
    color: var(--theme-color-c77dffff,#c77dff);
}
.mu-item-tooltip .mu-tt-socket-title {
    color: var(--theme-color-dfb0ffff,#dfb0ff);
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
}
.mu-item-tooltip .mu-tt-serial {
    margin-top: 6px;
    font-size: 9.5px;
    color: var(--theme-color-6e879cff,#6e879c);
}