/* ==========================================================
   EVERYONE ASSEMBLE
   MEMBERLIST – S.H.I.E.L.D. PERSONNEL CARDS
   Zwei Karten nebeneinander
   Keine Schrift kleiner als 12px
   ========================================================== */

.eam-shield-card{
    --eam-bg:#020d18;
    --eam-deep:#010914;
    --eam-panel:#071a29;
    --eam-panel-soft:#0a263b;
    --eam-field:#12334b;

    --eam-line:#1d5f8f;
    --eam-line-soft:rgba(29,95,143,.34);

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

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

    position:relative;
    display:inline-grid;
    grid-template-rows:auto 1fr auto;

    width:calc(50% - 16px);
    min-height:390px;
    margin:0 6px 20px;

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

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(33,139,208,.15),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(7,26,41,.98),
            rgba(2,13,24,.99)
        );

    border:1px solid var(--eam-line-soft);
    border-radius:19px;

    box-shadow:
        0 15px 32px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.025);

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

    text-align:left;
    vertical-align:top;
    overflow:hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.eam-shield-card,
.eam-shield-card *,
.eam-shield-card *::before,
.eam-shield-card *::after{
    box-sizing:border-box;
}

.eam-shield-card:hover{
    transform:translateY(-3px);

    border-color:rgba(117,208,255,.55);

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

/* ==========================================================
   KOPFLEISTE
   ========================================================== */

.eam-shield-header{
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;

    min-height:61px;
    padding:10px 17px;

    color:var(--eam-text);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.23),
            rgba(11,49,80,.88)
        );

    border-bottom:1px solid var(--eam-line-soft);
}

.eam-shield-header::after{
    content:"";
    position:absolute;
    right:18px;
    bottom:-1px;

    width:85px;
    height:2px;

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

    box-shadow:0 0 10px rgba(117,208,255,.55);
}

.eam-shield-emblem{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;

    width:39px;
    height:39px;

    color:var(--eam-accent-light);
    background:rgba(1,9,20,.38);

    border:1px solid rgba(117,208,255,.55);
    border-radius:50%;

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

    letter-spacing:.5px;
}

.eam-shield-emblem::before{
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(117,208,255,.25);
    border-radius:50%;
}

.eam-shield-header-title{
    color:var(--eam-text);

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

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

.eam-shield-header-code{
    margin-left:auto;

    color:var(--eam-muted);

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

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

/* ==========================================================
   AKTENINHALT
   ========================================================== */

.eam-shield-body{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 155px;
    align-items:start;
    gap:14px;

    min-width:0;
    padding:16px;
}

/* ==========================================================
   IDENTITÄTSMARKER LINKS
   ========================================================== */

.eam-shield-ident{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;

    width:72px;
    height:88px;

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

    background:
        conic-gradient(
            var(--eam-field) 25%,
            var(--eam-deep) 0 50%,
            var(--eam-field) 0 75%,
            var(--eam-deep) 0
        );

    background-size:22px 22px;

    border:1px solid var(--eam-line);
    border-radius:8px;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.38),
        0 7px 15px rgba(0,0,0,.2);

    overflow:hidden;
}

.eam-shield-ident::before{
    content:"EA";
    position:relative;
    z-index:2;

    display:flex;
    justify-content:center;
    align-items:center;

    width:38px;
    height:38px;

    color:var(--eam-accent-light);
    background:rgba(1,9,20,.9);

    border:1px solid var(--eam-accent);
    border-radius:50%;

    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
}

.eam-shield-ident::after{
    content:"";
    position:absolute;
    inset:0;

    background:rgba(1,9,20,.25);
}

/* ==========================================================
   MITGLIEDSDATEN
   ========================================================== */

.eam-shield-information{
    min-width:0;
}

.eam-shield-name{
    margin:0;

    color:var(--eam-text);

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

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

.eam-shield-name a{
    text-decoration:none;
}

.eam-shield-name a:hover{
    filter:brightness(1.25);
}

.eam-shield-usertitle{
    display:block;
    min-height:18px;
    margin-top:3px;

    color:var(--eam-muted);

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

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

.eam-shield-accounts{
    margin-top:5px;

    color:var(--eam-muted);

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

.eam-shield-accounts:empty{
    display:none;
}

.eam-shield-accounts a{
    color:var(--eam-accent-light);
    font-size:12px;
}

/* ==========================================================
   DATENZEILEN
   ========================================================== */

.eam-shield-fields{
    display:grid;
    gap:7px;

    margin-top:12px;
}

.eam-shield-field{
    display:grid;
    grid-template-columns:105px minmax(0,1fr);
    align-items:center;
    gap:10px;

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

    background:
        linear-gradient(
            90deg,
            rgba(18,51,75,.84),
            rgba(8,36,58,.72)
        );

    border:1px solid rgba(29,95,143,.22);
    border-radius:10px;
}

.eam-shield-field-label{
    color:var(--eam-muted);

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

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

.eam-shield-field-value{
    min-width:0;

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

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

    overflow-wrap:anywhere;
}

/* ==========================================================
   ZUSATZDATEN
   ========================================================== */

.eam-shield-extra{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;

    margin-top:8px;
}

.eam-shield-extra-item{
    min-width:0;
    padding:7px 9px;

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

    border:1px solid rgba(29,95,143,.18);
    border-radius:8px;

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

    overflow-wrap:anywhere;
}

.eam-shield-extra-label{
    display:block;
    margin-bottom:2px;

    color:var(--eam-muted);

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

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

/* ==========================================================
   AVATAR RECHTS
   ========================================================== */

.eam-shield-avatar{
    position:relative;

    width:155px;
    height:222px;

    padding:4px;

    background:var(--eam-deep);

    border:1px solid var(--eam-accent-light);
    border-radius:14px;

    box-shadow:
        0 10px 22px rgba(0,0,0,.28),
        0 0 14px rgba(33,139,208,.08);

    overflow:hidden;
}

.eam-shield-avatar::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:4px;

    border:1px solid rgba(117,208,255,.18);
    border-radius:10px;

    pointer-events:none;
}

.eam-shield-avatar::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:4px;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(1,9,20,.32)
        );

    border-radius:10px;
    pointer-events:none;
}

.eam-shield-avatar img{
    display:block;
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center top;

    border-radius:10px;

    filter:
        saturate(.87)
        contrast(1.05);

    transition:
        transform .35s ease,
        filter .35s ease;
}

.eam-shield-card:hover .eam-shield-avatar img{
    transform:scale(1.025);

    filter:
        saturate(1)
        contrast(1.05);
}

/* ==========================================================
   FUSSLEISTE
   ========================================================== */

.eam-shield-footer{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;

    min-height:59px;
    padding:10px 16px;

    background:
        linear-gradient(
            90deg,
            rgba(11,49,80,.95),
            rgba(8,36,58,.88)
        );

    border-top:1px solid var(--eam-line-soft);
}

.eam-shield-serial{
    min-width:0;

    color:var(--eam-muted);

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

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

.eam-shield-profile{
    display:inline-flex;
    justify-content:center;
    align-items:center;

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

    color:var(--eam-text);
    background:var(--eam-deep);

    border:1px solid var(--eam-line);
    border-radius:10px;

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

    letter-spacing:.7px;
    text-decoration:none;
    text-transform:uppercase;

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

.eam-shield-profile:hover{
    color:var(--eam-deep);
    background:var(--eam-accent-light);
    border-color:var(--eam-accent-light);

    box-shadow:0 0 16px rgba(117,208,255,.22);
}

.eam-shield-level{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-height:37px;
    max-width:220px;
    padding:7px 13px;

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

    border:1px solid rgba(117,208,255,.38);
    border-radius:20px;

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

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

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

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

    .eam-shield-card{
        display:grid;
        width:100%;
        max-width:760px;
        margin:0 auto 20px;
    }
}

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

    .eam-shield-body{
        grid-template-columns:65px minmax(0,1fr);
    }

    .eam-shield-ident{
        width:65px;
        height:78px;
    }

    .eam-shield-avatar{
        grid-column:1 / -1;
        grid-row:2;

        width:100%;
        height:310px;
        margin-top:3px;
    }

    .eam-shield-avatar img{
        object-position:center 20%;
    }

    .eam-shield-footer{
        grid-template-columns:1fr;
    }

    .eam-shield-profile,
    .eam-shield-level{
        width:100%;
        max-width:none;
    }
}

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

    .eam-shield-header-code{
        display:none;
    }

    .eam-shield-body{
        grid-template-columns:1fr;
    }

    .eam-shield-ident{
        display:none;
    }

    .eam-shield-field{
        grid-template-columns:1fr;
        gap:2px;
    }

    .eam-shield-extra{
        grid-template-columns:1fr;
    }
}