/* ==========================================================
   BünStats - Spielerkarten im FIFA-Ultimate-Team-Stil.
   Ergaenzt style.css, nutzt dieselben Farbvariablen.
   ========================================================== */

/* -------------------- Roster / Spielerliste -------------------- */

.roster{
    padding:28px clamp(16px,4vw,48px);
}

.roster-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:20px;
}

.roster-title{
    color:var(--gold-light);
    font-size:22px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin:0;
}

.player-search{
    background:var(--anthracite);
    border:1px solid #444;
    border-radius:20px;
    padding:10px 18px;
    color:var(--text);
    font-size:14px;
    min-width:220px;
    outline:none;
    transition:border-color .2s ease;
}

.player-search:focus{
    border-color:var(--gold);
}

.player-search::placeholder{
    color:var(--text-dim);
}

.roster-rank-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:8px;
}

.roster-rank{
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    color:var(--text-dim);
}

.rank-badge{
    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
    padding:2px 8px;
    border-radius:10px;
}

.rank-up{
    color:#3ddc84;
    background:rgba(61,220,132,.12);
}

.rank-down{
    color:#e05555;
    background:rgba(224,85,85,.12);
}

.rank-same{
    color:var(--text-dim);
    background:rgba(255,255,255,.06);
}

.rank-new{
    color:var(--gold-light);
    background:rgba(212,175,55,.14);
}

.roster-ovr{
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    margin-top:4px;
}

.tier-text-bronze{ color:#c98a4a; }
.tier-text-silver{ color:#c7ccd3; }
.tier-text-gold{ color:var(--gold); }
.tier-text-diamond{ color:#8fe3ff; }

.roster-grid{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.roster-tile{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:16px;
    background:linear-gradient(90deg,var(--anthracite-light),var(--anthracite));
    border:1px solid #333;
    border-radius:10px;
    padding:10px 18px;
    text-decoration:none;
    transition:border-color .2s ease, transform .2s ease;
}

.roster-tile:hover{
    border-color:var(--gold);
    transform:translateX(4px);
}

.roster-rank-col{
    flex:none;
    width:36px;
    text-align:center;
    font-size:16px;
    font-weight:900;
    color:var(--text-dim);
}

.roster-avatar{
    flex:none;
    width:44px;
    height:44px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--gold);
    background:#000;
}

.roster-avatar-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.roster-name{
    flex:1;
    min-width:0;
    color:var(--text);
    font-weight:800;
    text-transform:uppercase;
    font-size:15px;
    letter-spacing:.5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.roster-badges{
    flex:none;
    display:flex;
    align-items:center;
    gap:10px;
}

.roster-ovr{
    flex:none;
    font-size:14px;
    font-weight:900;
    letter-spacing:1px;
    min-width:150px;
    text-align:right;
}

.roster-matches{
    flex:none;
    color:var(--text-dim);
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    min-width:80px;
    text-align:right;
}

/* -------------------- FIFA-artige Spielerkarte -------------------- */

.card-page{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:40px 16px;
}

.player-card{
    width:320px;
    padding:24px 20px 28px;
    border-radius:18px;
    position:relative;
    background:linear-gradient(160deg,#2a2a2a 0%,#0d0d0d 60%,#000 100%);
    border:2px solid var(--gold);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 40px rgba(212,175,55,.15);
}

/* Rarity-Tiers - deutlich unterscheidbare Farbwelten je Stufe */

.player-card.tier-bronze{
    border-color:#b3702f;
    background:linear-gradient(160deg,#3a2818 0%,#0d0d0d 60%,#000 100%);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 28px rgba(179,112,47,.28);
}

.player-card.tier-silver{
    border-color:#c7ccd3;
    background:linear-gradient(160deg,#2b2e33 0%,#0d0d0d 60%,#000 100%);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(199,204,211,.28);
}

.player-card.tier-gold{
    border-color:var(--gold);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 35px rgba(212,175,55,.32);
}

.player-card.tier-diamond{
    border-color:#8fe3ff;
    background:linear-gradient(160deg,#0e2a33 0%,#0d0d0d 55%,#000 100%);
    box-shadow:0 20px 50px rgba(0,0,0,.7), 0 0 55px rgba(143,227,255,.45);
}

.player-card-top{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:8px;
}

.player-card-rating{
    flex:none;
    text-align:center;
}

.rating-value{
    font-size:44px;
    font-weight:900;
    color:var(--gold-light);
    line-height:1;
}

.rating-label{
    font-size:12px;
    letter-spacing:2px;
    color:var(--text-dim);
    margin-top:2px;
}

.player-card-photo{
    flex:1;
    display:flex;
    justify-content:center;
}

.player-card-photo img{
    width:110px;
    height:110px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--gold-light);
    background:#000;
}

.photo-placeholder{
    width:110px;
    height:110px;
    border-radius:50%;
    border:3px solid var(--gold-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    background:#111;
}

.player-card-name{
    text-align:center;
    font-size:24px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#fff;
    margin-top:10px;
}

.player-card-subtitle{
    text-align:center;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-top:2px;
    margin-bottom:18px;
}

.player-card-tier{
    text-align:center;
    font-size:13px;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-top:4px;
}

.player-card-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 20px;
    padding-top:16px;
    border-top:1px solid rgba(212,175,55,.35);
}

.stat-item{
    display:flex;
    align-items:baseline;
    gap:8px;
}

.stat-value{
    font-size:22px;
    font-weight:900;
    color:var(--gold-light);
    font-variant-numeric:tabular-nums;
    min-width:38px;
}

.stat-label{
    font-size:12px;
    letter-spacing:1px;
    color:var(--text-dim);
    text-transform:uppercase;
}

/* ==========================================================
   Belohnungssystem: Abzeichen-Reihe auf der Karte + Vitrine-Seite
   ========================================================== */

.badge-row-wrap{
    width:320px;
    margin-top:16px;
    padding:16px 18px;
    border-radius:14px;
    background:linear-gradient(180deg,var(--anthracite-light),var(--anthracite));
    border:1px solid #333;
}

.badge-row-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:10px;
}

.badge-row-link{
    color:var(--gold-light);
    text-decoration:none;
    font-size:12px;
}

.badge-row-link:hover{
    text-decoration:underline;
}

.badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.mini-badge{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    background:#111;
    cursor:default;
}

/* Badge-Seltenheit (unabhaengig vom Spieler-Tier) */

.badge-bronze{ border:2px solid #b3702f; box-shadow:0 0 8px rgba(179,112,47,.35); }
.badge-silver{ border:2px solid #c7ccd3; box-shadow:0 0 8px rgba(199,204,211,.35); }
.badge-gold{ border:2px solid var(--gold); box-shadow:0 0 10px rgba(212,175,55,.4); }

/* ---------------- Vitrine-Seite ---------------- */

.showcase{
    padding:32px clamp(16px,4vw,64px);
    max-width:900px;
    margin:0 auto;
}

.showcase-header{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:32px;
}

.showcase-avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--gold);
    background:#000;
}

.showcase-name{
    font-size:26px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#fff;
    margin:0;
}

.showcase-total{
    color:var(--gold-light);
    font-size:14px;
    letter-spacing:1px;
    margin-top:4px;
}

.achievement-category{
    margin-bottom:28px;
}

.category-title{
    color:var(--text-dim);
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:14px;
    padding-bottom:8px;
    border-bottom:1px solid #2c2c2c;
}

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:12px;
}

.achievement-badge{
    background:linear-gradient(180deg,var(--anthracite-light),var(--anthracite));
    border-radius:10px;
    padding:16px;
    text-align:center;
}

.badge-icon{
    font-size:28px;
    margin-bottom:8px;
}

.badge-label{
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.badge-date{
    font-size:11px;
    color:var(--text-dim);
    margin-top:6px;
    letter-spacing:.5px;
}

.badge-count{
    font-size:12px;
    font-weight:700;
    color:var(--gold-light);
    margin-top:2px;
}

/* ---------------- Erfolge-Katalog (Uebersicht aller moeglichen Erfolge) ---------------- */

.catalog-header{
    margin-bottom:32px;
}

.catalog-title{
    font-size:24px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#fff;
    margin:0 0 6px;
}

.catalog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:14px;
}

.catalog-entry{
    background:linear-gradient(180deg,var(--anthracite-light),var(--anthracite));
    border-radius:10px;
    padding:18px;
    border:1px solid #2c2c2c;
}

.catalog-entry-label{
    font-size:14px;
    font-weight:800;
    color:var(--text);
    margin-top:6px;
}

.catalog-entry-description{
    font-size:12px;
    color:var(--text-dim);
    margin-top:8px;
    line-height:1.5;
}

/* ---------------- Match-Detail (Gesamt + Pro-Leg + Heatmap) ---------------- */

.match-detail-players{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
}

.match-detail-player-col .standings-table td:first-child{
    color:var(--text-dim);
}

.match-detail-player-col .standings-table td:last-child{
    text-align:right;
    font-weight:800;
    color:var(--gold-light);
}

.heatmap-wrap{
    display:flex;
    justify-content:center;
    margin-top:8px;
}

.heatmap-wrap svg{
    width:220px;
    height:220px;
}

@media(max-width:700px){
    .match-detail-players{
        grid-template-columns:1fr;
    }
}