/* ==========================================================
   EVERYONE ASSEMBLE
   BOARDSTATISTIK – INTELLIGENCE DASHBOARD
   ========================================================== */

.eabstats{
    --eabs-bg:#020d18;
    --eabs-bg-deep:#010914;
    --eabs-panel:#04192b;
    --eabs-panel-soft:#08243a;
    --eabs-panel-light:#0b3150;

    --eabs-line:#1d5f8f;
    --eabs-line-light:#287db2;
    --eabs-line-soft:rgba(29,95,143,.34);
    --eabs-line-faint:rgba(29,95,143,.17);

    --eabs-accent:#218bd0;
    --eabs-accent-dark:#1674b5;
    --eabs-accent-light:#75d0ff;

    --eabs-text:#e1f1fa;
    --eabs-text-soft:#c4d8e4;
    --eabs-muted:#8fa9bc;

    --eabs-success:#72c9a6;
    --eabs-warning:#e7b56f;
    --eabs-danger:#e66c79;

    width:100%;
    margin:24px auto;

    color:var(--eabs-text-soft);

    font-family:Arial,sans-serif;
    font-size:12px;
    line-height:1.65;
}

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

.eabstats a{
    color:var(--eabs-accent-light);
    text-decoration:none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.eabstats a:hover{
    color:var(--eabs-text);
}

.eabstats .smalltext,
.eabstats small{
    font-size:12px !important;
}

/* ==========================================================
   HAUPTKOPF
   ========================================================== */

.eabstats-hero{
    position:relative;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:22px;

    min-height:88px;
    margin-bottom:14px;
    padding:19px 22px 17px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(33,139,208,.16),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(4,25,43,.99),
            rgba(1,9,20,.99)
        );

    border:1px solid var(--eabs-line-soft);

    box-shadow:
        0 19px 42px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.025);

    overflow:hidden;
}

.eabstats-hero::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:90px;
    height:3px;

    background:var(--eabs-accent-light);

    box-shadow:
        90px 0 0 var(--eabs-accent),
        180px 0 0 rgba(33,139,208,.32);
}

.eabstats-hero-main{
    display:flex;
    align-items:center;
    gap:14px;

    min-width:0;
}

.eabstats-hero-code{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;

    width:52px;
    height:52px;

    color:var(--eabs-accent-light);

    background:
        linear-gradient(
            145deg,
            rgba(33,139,208,.17),
            rgba(1,9,20,.82)
        );

    border:1px solid var(--eabs-line);

    font-size:12px;
    font-weight:800;
    line-height:1;

    letter-spacing:.6px;

    clip-path:polygon(
        9px 0,
        100% 0,
        100% calc(100% - 9px),
        calc(100% - 9px) 100%,
        0 100%,
        0 9px
    );
}

.eabstats-hero-copy{
    min-width:0;
}

.eabstats-hero-label{
    display:block;

    margin-bottom:3px;

    color:var(--eabs-muted);

    font-size:12px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:1.5px;
    text-transform:uppercase;
}

.eabstats-hero-title{
    margin:0;

    color:var(--eabs-text);

    font-family:"Arial Narrow",Arial,sans-serif;
    font-size:24px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.eabstats-detail-link{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-height:38px;
    padding:7px 12px;

    color:var(--eabs-text-soft) !important;
    background:rgba(1,9,20,.44);

    border:1px solid var(--eabs-line-soft);

    font-size:12px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:.4px;
    text-align:center;
    text-transform:uppercase;
}

.eabstats-detail-link:hover{
    color:var(--eabs-bg-deep) !important;

    background:var(--eabs-accent-light);
    border-color:var(--eabs-accent-light);
}

/* ==========================================================
   OBERES DASHBOARD
   ========================================================== */

.eabstats-dashboard{
    display:grid;
    grid-template-columns:1.08fr 1fr 1fr;
    grid-template-areas:
        "population online today"
        "population away newest"
        "credits sisters styles";
    gap:10px;

    margin-bottom:10px;
}

/* ==========================================================
   ALLGEMEINE KARTEN
   ========================================================== */

.eabstats-card{
    position:relative;

    min-width:0;

    color:var(--eabs-text-soft);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(33,139,208,.075),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(8,43,69,.55),
            rgba(1,9,20,.72)
        );

    border:1px solid var(--eabs-line-soft);

    box-shadow:
        0 8px 20px rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.018);

    overflow:hidden;
}

.eabstats-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:48px;
    height:2px;

    background:var(--eabs-accent-light);

    box-shadow:48px 0 0 rgba(33,139,208,.43);
}

.eabstats-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    min-height:43px;
    padding:10px 12px 9px;

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.1),
            rgba(1,9,20,.24)
        );

    border-bottom:1px solid var(--eabs-line-faint);
}

.eabstats-card-title{
    min-width:0;

    color:var(--eabs-accent-light);

    font-size:12px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.7px;
    text-transform:uppercase;
}

.eabstats-card-code{
    flex-shrink:0;

    color:var(--eabs-muted);

    font-size:12px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:.5px;
    text-transform:uppercase;
}

.eabstats-card-body{
    min-width:0;
    padding:12px;

    color:var(--eabs-text-soft);

    font-size:12px;
    line-height:1.65;

    overflow-wrap:anywhere;
}

.eabstats-card-body > :first-child{
    margin-top:0;
}

.eabstats-card-body > :last-child{
    margin-bottom:0;
}

/* ==========================================================
   KARTENPOSITIONEN
   ========================================================== */

.eabstats-population{
    grid-area:population;
}

.eabstats-online{
    grid-area:online;
}

.eabstats-today{
    grid-area:today;
}

.eabstats-away{
    grid-area:away;
}

.eabstats-newest{
    grid-area:newest;
}

.eabstats-credits{
    grid-area:credits;
}

.eabstats-sisters{
    grid-area:sisters;
}

.eabstats-styles{
    grid-area:styles;
}

/* ==========================================================
   EINWOHNER
   ========================================================== */

.eabstats-population .eabstats-card-body{
    padding:12px;
}

.eabstats-gender-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;

    margin-bottom:11px;
}

.eabstats-gender{
    display:grid;
    justify-items:center;
    gap:2px;

    min-width:0;
    padding:10px 5px;

    color:var(--eabs-muted);
    background:rgba(1,9,20,.4);

    border:1px solid var(--eabs-line-faint);

    text-align:center;
}

.eabstats-gender-value{
    color:var(--eabs-accent-light);

    font-size:17px;
    font-weight:800;
    line-height:1.2;
}

.eabstats-gender-label{
    color:var(--eabs-muted);

    font-size:12px;
    font-weight:700;
    line-height:1.35;

    text-transform:uppercase;
}

.eabstats-race-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}

.eabstats-race{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;

    min-width:0;
    min-height:35px;
    padding:6px 8px;

    color:var(--eabs-text-soft);
    background:rgba(1,9,20,.31);

    border:1px solid rgba(29,95,143,.15);
    border-left:2px solid var(--eabs-accent);

    font-size:12px;
    line-height:1.4;
}

.eabstats-race-label{
    min-width:0;

    overflow-wrap:anywhere;
}

.eabstats-race-value{
    flex-shrink:0;

    color:var(--eabs-accent-light);

    font-weight:800;
}

/* ==========================================================
   ONLINE, HEUTE UND ABWESEND
   ========================================================== */

.eabstats-live-content{
    min-height:102px;
    max-height:135px;

    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:var(--eabs-line-light) var(--eabs-bg-deep);
}

.eabstats-live-content::-webkit-scrollbar{
    width:6px;
}

.eabstats-live-content::-webkit-scrollbar-track{
    background:var(--eabs-bg-deep);
}

.eabstats-live-content::-webkit-scrollbar-thumb{
    background:var(--eabs-line-light);
}

.eabstats-live-content a{
    font-weight:700;
}

.eabstats-live-content br{
    line-height:1.8;
}

/* ==========================================================
   NEUSTER USER
   ========================================================== */

.eabstats-newest .eabstats-card-body{
    display:flex;
    align-items:center;

    min-height:102px;
}

.eabstats-newest-record{
    position:relative;

    width:100%;
    padding-left:19px;

    color:var(--eabs-text-soft);

    font-size:12px;
    line-height:1.7;
}

.eabstats-newest-record::before{
    content:"";

    position:absolute;
    top:5px;
    left:1px;

    width:9px;
    height:9px;

    background:var(--eabs-success);

    border-radius:50%;

    box-shadow:0 0 9px rgba(114,201,166,.65);
}

.eabstats-newest-record a{
    font-weight:800;
}

/* ==========================================================
   CREDITS
   ========================================================== */

.eabstats-credits .eabstats-card-body{
    display:grid;
    align-content:center;
    gap:9px;

    min-height:91px;
}

.eabstats-credit-copy{
    color:var(--eabs-muted);

    font-size:12px;
    line-height:1.55;
}

.eabstats-credit-link{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:max-content;
    max-width:100%;
    min-height:33px;
    padding:6px 9px;

    color:var(--eabs-text-soft) !important;
    background:rgba(33,139,208,.07);

    border:1px solid var(--eabs-line-soft);

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}

.eabstats-credit-link:hover{
    color:var(--eabs-bg-deep) !important;

    background:var(--eabs-accent-light);
    border-color:var(--eabs-accent-light);
}

/* ==========================================================
   SCHWESTERBOARDS
   ========================================================== */

.eabstats-sister-list{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.eabstats-sister-link{
    display:flex;
    justify-content:center;
    align-items:center;

    min-width:100px;
    min-height:46px;
    padding:5px;

    background:rgba(1,9,20,.38);

    border:1px solid var(--eabs-line-faint);
}

.eabstats-sister-link:hover{
    background:rgba(33,139,208,.1);
    border-color:var(--eabs-accent);
}

.eabstats-sister-link img{
    display:block;

    width:auto;
    max-width:120px;
    height:auto;
    max-height:36px;

    object-fit:contain;
}

/* ==========================================================
   STYLEWECHSEL
   ========================================================== */

.eabstats-styles .eabstats-card-body{
    display:flex;
    align-items:center;

    min-height:91px;
}

.eabstats-stylechanger{
    width:100%;
}

.eabstats-stylechanger form{
    display:flex;
    align-items:center;
    gap:6px;

    width:100%;
    margin:0;
}

.eabstats-stylechanger select{
    flex:1;
    min-width:0;
    min-height:37px;
    padding:7px 9px;

    color:var(--eabs-text);

    background:
        linear-gradient(
            145deg,
            rgba(1,9,20,.98),
            rgba(4,25,43,.94)
        );

    border:1px solid var(--eabs-line);
    border-radius:0;
    outline:0;

    font-family:Arial,sans-serif;
    font-size:12px;
}

.eabstats-stylechanger select option{
    color:var(--eabs-text);
    background:var(--eabs-bg-deep);
}

.eabstats-stylechanger input[type="submit"],
.eabstats-stylechanger .button{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-height:37px;
    padding:7px 10px;

    color:var(--eabs-bg-deep) !important;
    -webkit-text-fill-color:var(--eabs-bg-deep) !important;

    background:var(--eabs-accent-light) !important;

    border:1px solid var(--eabs-accent-light) !important;
    border-radius:0;

    cursor:pointer;

    font-family:Arial,sans-serif;
    font-size:12px !important;
    font-weight:800;

    text-transform:uppercase;
}

/* ==========================================================
   RPG-STATISTIK
   ========================================================== */

.eabstats-statistics{
    margin-bottom:10px;
}

.eabstats-statistics-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:13px;
}

.eabstats-statistics-link{
    color:var(--eabs-muted);

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}

.eabstats-statistics-link:hover{
    color:var(--eabs-accent-light);
}

.eabstats-metric-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;

    padding:11px;
}

.eabstats-metric{
    position:relative;

    display:grid;
    justify-items:center;
    align-content:center;
    gap:3px;

    min-width:0;
    min-height:83px;
    padding:10px 7px;

    color:var(--eabs-muted);

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.46),
            rgba(1,9,20,.62)
        );

    border:1px solid var(--eabs-line-faint);

    text-align:center;

    overflow:hidden;
}

.eabstats-metric::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:38px;
    height:2px;

    background:var(--eabs-accent);

    box-shadow:38px 0 0 rgba(33,139,208,.35);
}

.eabstats-metric-value{
    max-width:100%;

    color:var(--eabs-accent-light);

    font-size:16px;
    font-weight:800;
    line-height:1.25;

    overflow-wrap:anywhere;
}

.eabstats-metric-value.is-date{
    font-size:13px;
}

.eabstats-metric-label{
    color:var(--eabs-muted);

    font-size:12px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:.35px;
    text-transform:uppercase;
}

.eabstats-metric-note{
    color:var(--eabs-text-soft);

    font-size:12px;
    line-height:1.35;
}

/* ==========================================================
   ZITATE UND GERÜCHTE
   ========================================================== */

.eabstats-feeds{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.eabstats-feed{
    min-width:0;
}

.eabstats-feed-body{
    min-height:170px;
    max-height:310px;
    padding:12px;

    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:var(--eabs-line-light) var(--eabs-bg-deep);
}

.eabstats-feed-body::-webkit-scrollbar{
    width:6px;
}

.eabstats-feed-body::-webkit-scrollbar-track{
    background:var(--eabs-bg-deep);
}

.eabstats-feed-body::-webkit-scrollbar-thumb{
    background:var(--eabs-line-light);
}

.eabstats-feed-body > :first-child{
    margin-top:0 !important;
}

.eabstats-feed-body > :last-child{
    margin-bottom:0 !important;
}

/* Das neue Gossip-Indexdesign innerhalb der Boardstats */

.eabstats-feed-body .eagossip-index-card{
    margin:0;

    box-shadow:none;
}

/* ==========================================================
   GENERIERTE MYBB-INHALTE
   ========================================================== */

.eabstats-card table{
    width:100%;
    max-width:100%;

    color:var(--eabs-text-soft);

    border-collapse:collapse;
}

.eabstats-card td{
    color:var(--eabs-text-soft);

    font-size:12px;
    line-height:1.55;
}

.eabstats-card ul{
    margin:0;
    padding-left:18px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width:1050px){

    .eabstats-dashboard{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-areas:
            "population online"
            "population today"
            "away newest"
            "credits styles"
            "sisters sisters";
    }

    .eabstats-metric-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media screen and (max-width:720px){

    .eabstats-dashboard{
        grid-template-columns:1fr;
        grid-template-areas:
            "population"
            "online"
            "today"
            "away"
            "newest"
            "credits"
            "sisters"
            "styles";
    }

    .eabstats-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .eabstats-metric-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .eabstats-feeds{
        grid-template-columns:1fr;
    }
}

@media screen and (max-width:480px){

    .eabstats{
        margin:15px auto;
    }

    .eabstats-hero{
        padding:17px 14px 15px;
    }

    .eabstats-hero-code{
        width:45px;
        height:45px;
    }

    .eabstats-hero-title{
        font-size:20px;
    }

    .eabstats-detail-link{
        width:100%;
    }

    .eabstats-gender-grid{
        grid-template-columns:1fr;
    }

    .eabstats-race-grid,
    .eabstats-metric-grid{
        grid-template-columns:1fr;
    }

    .eabstats-sister-list{
        align-items:stretch;
        flex-direction:column;
    }

    .eabstats-sister-link{
        width:100%;
    }
}