/* =========================================================
   BLOODLINES — page-scoped CSS
   Scope: body.mbp-bloodlines
   Canon:
   - keep Bloodlines ranking/card structure
   - align visual language to Houses
   - dark premium layout, gold accents, better spacing
========================================================= */

body.mbp-bloodlines{
    --max: 1280px;
}

body.mbp-bloodlines .wrap{
    max-width: var(--max);
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

body.mbp-bloodlines .hero{
    text-align:center;
    padding-top:10px;
    padding-bottom:30px;
}

body.mbp-bloodlines .hero h1{
    margin:0 0 12px 0;
    color:#d6b062;
    text-shadow:
        0 0 10px rgba(214,176,98,.16),
        0 0 24px rgba(214,176,98,.08);
}

body.mbp-bloodlines .hero p{
    max-width:720px;
    margin:0 auto;
    color:rgba(255,255,255,.84);
}

/* ---------------------------------------------------------
   SEARCH PANEL
--------------------------------------------------------- */

body.mbp-bloodlines .home-search-card{
    margin-top:26px;
    border:1px solid rgba(124,92,255,.14);
    background:
        linear-gradient(180deg, rgba(10,12,19,.74), rgba(7,9,15,.64));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 40px rgba(0,0,0,.22);
}

body.mbp-bloodlines .mbp-bloodlines-filters{
    margin:0 auto;
}

body.mbp-bloodlines .mbp-bloodlines-filters-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:nowrap;
}

body.mbp-bloodlines .mbp-bloodlines-filterblock-left{
    flex:1 1 auto;
    min-width:0;
}

body.mbp-bloodlines .mbp-bloodlines-filterblock-right{
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
}

body.mbp-bloodlines .mbp-filter-label{
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.85;
    margin:0 0 6px 0;
}

body.mbp-bloodlines .input{
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    outline:none;
}

body.mbp-bloodlines .input:focus{
    border-color:rgba(155,123,255,.55);
    box-shadow:0 0 0 2px rgba(155,123,255,.20);
}

body.mbp-bloodlines .mbp-bloodlines-filterblock-actions{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

/* ---------------------------------------------------------
   DIRECTORY PANEL
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-bloodlines-directory-panel{
    margin-top:14px;
    margin-bottom:26px;
    border:1px solid rgba(124,92,255,.12);

    background:
        linear-gradient(
            180deg,
            rgba(8,10,18,.88) 0%,
            rgba(6,8,15,.92) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 12px 30px rgba(0,0,0,.22);
}

body.mbp-bloodlines .mbp-bloodlines-directory-panel > .inner{
    padding-top:8px;
    padding-bottom:16px;
}

/* ---------------------------------------------------------
   HEAD ROW
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-bloodlines-head{
    display:grid;
    grid-template-columns: 90px minmax(0, 1.2fr) minmax(420px, .9fr);
    align-items:center;
    gap:18px;
    padding:0 10px 14px 10px;
    margin-bottom:0;
    border-bottom:1px solid rgba(200,170,90,.18);
}

body.mbp-bloodlines .mbp-bloodlines-head-rank,
body.mbp-bloodlines .mbp-bloodlines-head-info,
body.mbp-bloodlines .mbp-bloodlines-head-stats{
    font-family:var(--font-head);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#c89d3d;
}

/* ---------------------------------------------------------
   LIST / ROWS
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-bloodlines-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

body.mbp-bloodlines .mbp-bloodline-row{
    display:grid;
    grid-template-columns: 90px minmax(0, 1.2fr) minmax(420px, .9fr);
    align-items:center;
    gap:18px;
    padding:18px 16px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

body.mbp-bloodlines .mbp-bloodline-row + .mbp-bloodline-row{
    border-top:1px solid rgba(200,170,90,.14);
}

/* ---------------------------------------------------------
   RANK
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-bloodline-rank{
    display:flex;
    align-items:center;
    justify-content:center;
}

body.mbp-bloodlines .mbp-rank-orb{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.08), rgba(255,255,255,.01) 45%, rgba(0,0,0,.08) 100%);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,.04),
        0 0 18px rgba(255,255,255,.04);
    color:#efe8d6;
    font-family:var(--font-head);
    font-size:24px;
    font-weight:700;
}

/* ---------------------------------------------------------
   MAIN INFO
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-bloodline-main{
    min-width:0;
}

body.mbp-bloodlines .mbp-bloodline-titleline{
    margin-bottom:12px;
}

body.mbp-bloodlines .mbp-bloodline-name{
    display:inline-block;
    font-family:var(--font-head);
    font-size:24px;
    line-height:1.15;
    color:#d6a12a;
    text-decoration:none;
    text-shadow:0 0 10px rgba(214,161,42,.10);
    word-break:break-word;
}

body.mbp-bloodlines .mbp-bloodline-name:hover{
    color:#e0b24d;
}

body.mbp-bloodlines .mbp-bloodline-leadership{
    display:flex;
    flex-direction:column;
    gap:8px;
}

body.mbp-bloodlines .mbp-bloodline-meta-row{
    display:grid;
    grid-template-columns:max-content minmax(0, 1fr);
    gap:12px;
    align-items:center;
}

body.mbp-bloodlines .mbp-bloodline-meta-label{
    color:rgba(255,255,255,.56);
    font-size:14px;
    line-height:1.35;
    white-space:nowrap;
}

body.mbp-bloodlines .mbp-bloodline-meta-value{
    min-width:0;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.35;
    word-break:break-word;
}

body.mbp-bloodlines .mbp-bloodline-meta-value a{
    color:#d7a92d;
    text-decoration:none;
}

body.mbp-bloodlines .mbp-bloodline-meta-value a:hover{
    color:#e5bb55;
}

/* ---------------------------------------------------------
   STATS AREA
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-bloodline-stats{
    display:grid;
    grid-template-columns: 88px 68px 88px 116px 82px;
    gap:12px;
    align-items:center;
    justify-content:end;
}

body.mbp-bloodlines .mbp-stat-chip,
body.mbp-bloodlines .mbp-stat-box,
body.mbp-bloodlines .mbp-stat-action{
    min-height:62px;
    border:1px solid rgba(200,170,90,.34);
    border-radius:8px;
    background:rgba(0,0,0,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

body.mbp-bloodlines .mbp-stat-chip{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    padding:8px 6px;
}

body.mbp-bloodlines .mbp-stat-chip-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    line-height:1;
    flex:0 0 auto;
}

body.mbp-bloodlines .mbp-bloodline-species-svg{
    display:block;
    width:16px;
    height:16px;
    color:currentColor;
    fill:none;
    stroke:currentColor;
    stroke-width:0;
    overflow:visible;
}

body.mbp-bloodlines .mbp-stat-chip-text{
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    line-height:1.1;
}

body.mbp-bloodlines .mbp-stat-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    padding:8px 8px;
}

body.mbp-bloodlines .mbp-stat-label{
    font-size:11px;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
}

body.mbp-bloodlines .mbp-stat-value{
    font-size:18px;
    line-height:1;
    font-weight:700;
    color:#e0ae35;
}

body.mbp-bloodlines .mbp-stat-action{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
}

body.mbp-bloodlines .mbp-stat-action .btn.btn-sm{
    width:100%;
    min-width:0;
    max-width:none;
    height:40px;
    padding:0 12px;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

body.mbp-bloodlines .mbp-stat-action .btn.disabled{
    opacity:.48;
    pointer-events:none;
}

/* ---------------------------------------------------------
   TYPE COLORS
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-type-vampire{
    color:#d34732;
}

body.mbp-bloodlines .mbp-type-lycan{
    color:#efc04c;
}

body.mbp-bloodlines .mbp-type-witch{
    color:#9a6dff;
}

body.mbp-bloodlines .mbp-type-multiple{
    color:#68e8f0;
}

body.mbp-bloodlines .mbp-type-unknown{
    color:rgba(255,255,255,.62);
}

/* ---------------------------------------------------------
   RESULTS / PAGINATION
--------------------------------------------------------- */

body.mbp-bloodlines .mbp-bloodlines-resultsline{
    margin-top:18px;
    margin-bottom:14px;
    text-align:center;
    font-size:14px;
    line-height:1.4;
    color:rgba(255,255,255,.82);
}

body.mbp-bloodlines .mbp-bloodlines-pagination{
    margin-top:8px;
    display:flex;
    justify-content:center;
    align-items:center;
}

body.mbp-bloodlines .mbp-bloodlines-pagination-inner{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    padding:10px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(155,123,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}

body.mbp-bloodlines .mbp-bloodlines-pagination .btn.btn-sm{
    min-width:44px;
    padding:7px 12px;
    font-size:12px;
    line-height:1;
}

body.mbp-bloodlines .mbp-bloodlines-pagination .btn.active{
    pointer-events:none;
    background:rgba(155,123,255,.18);
    border-color:rgba(155,123,255,.42);
    color:#fff;
    box-shadow:0 0 0 1px rgba(155,123,255,.10), 0 0 18px rgba(155,123,255,.10);
}

body.mbp-bloodlines .mbp-bloodlines-pagination .btn.disabled{
    opacity:.45;
    pointer-events:none;
    filter:saturate(.7);
}

body.mbp-bloodlines .mbp-bloodlines-empty{
    text-align:center;
    padding:14px 0 8px;
}

/* ---------------------------------------------------------
   GENERAL PANEL SAFETY
--------------------------------------------------------- */

body.mbp-bloodlines .panel{
    overflow:hidden;
}

body.mbp-bloodlines .panel .inner{
    position:relative;
    z-index:1;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1180px){
    body.mbp-bloodlines .mbp-bloodlines-head,
    body.mbp-bloodlines .mbp-bloodline-row{
        grid-template-columns: 78px minmax(0, 1fr);
    }

    body.mbp-bloodlines .mbp-bloodlines-head-stats{
        display:none;
    }

    body.mbp-bloodlines .mbp-bloodline-stats{
        grid-column:2;
        grid-template-columns: repeat(5, minmax(74px, 1fr));
        justify-content:start;
        margin-top:16px;
    }
}

@media (max-width: 980px){
    body.mbp-bloodlines .mbp-bloodlines-filters-row{
        flex-wrap:wrap;
    }

    body.mbp-bloodlines .mbp-bloodlines-filterblock-left{
        flex:1 1 100%;
        max-width:100%;
    }

    body.mbp-bloodlines .mbp-bloodlines-filterblock-right{
        flex:1 1 100%;
        justify-content:flex-start;
    }

    body.mbp-bloodlines .mbp-bloodline-row{
        padding:16px 14px;
        gap:14px;
    }

    body.mbp-bloodlines .mbp-bloodline-name{
        font-size:21px;
    }

    body.mbp-bloodlines .mbp-bloodline-meta-row{
        grid-template-columns:max-content minmax(0, 1fr);
        gap:12px;
    }

    body.mbp-bloodlines .mbp-bloodline-stats{
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body.mbp-bloodlines .mbp-stat-action{
        grid-column:1 / -1;
    }
}

@media (max-width: 640px){
    body.mbp-bloodlines .hero{
        padding-bottom:24px;
    }

    body.mbp-bloodlines .home-search-card{
        margin-top:20px;
    }

    body.mbp-bloodlines .mbp-bloodlines-head{
        display:none;
    }

    body.mbp-bloodlines .mbp-bloodline-row{
        grid-template-columns: 1fr;
    }

    body.mbp-bloodlines .mbp-bloodline-rank{
        justify-content:flex-start;
    }

    body.mbp-bloodlines .mbp-rank-orb{
        width:52px;
        height:52px;
        font-size:21px;
    }

    body.mbp-bloodlines .mbp-bloodline-main,
    body.mbp-bloodlines .mbp-bloodline-stats{
        grid-column:auto;
    }

    body.mbp-bloodlines .mbp-bloodline-stats{
        margin-top:14px;
        grid-template-columns: 1fr 1fr;
    }

    body.mbp-bloodlines .mbp-stat-chip{
        grid-column:1 / -1;
    }

    body.mbp-bloodlines .mbp-stat-box{
        min-height:58px;
    }

    body.mbp-bloodlines .mbp-stat-action{
        grid-column:1 / -1;
    }
}