.team-page {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}

/* =========================
TEAM HEADER
========================= */

.team-header {

    text-align: center;

    margin-bottom: 30px;

}

.team-logo-large {

    width: 220px;

    height: auto;

    margin-bottom: 15px;

}

.team-title {

    font-size: 36px;

    font-weight: bold;

    margin-bottom: 6px;

}

.team-subtitle {

    color: #aaa;

    margin-bottom: 25px;

}

/* =========================
ROSTER TABLE
========================= */

.roster-table {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    border-collapse: collapse;

    background: #0d0d0d;

    border-radius: 14px;

    overflow: hidden;

}

.roster-table th {

    padding: 18px 16px;

    background: #161616;

    color: #00e5ff;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    border-bottom: 1px solid #222;

}

.roster-table td {

    padding: 16px;

    border-bottom: 1px solid #1d1d1d;

    vertical-align: middle;

    text-align: center;

}

.roster-table tr:hover {

    background: #151515;

}

/* =========================
PLAYER COLUMN
========================= */

.player-col {

    text-align: left !important;

    display: flex;

    align-items: center;

    gap: 14px;

}

.player-col a {

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;

}

.player-col a:hover {

    color: #00e5ff;

}

.mini-headshot {

    width: 52px;

    height: 52px;

    object-fit: cover;

    border-radius: 10px;

    background: #111;

    border: 1px solid #222;

    flex-shrink: 0;

}

/* =========================
COUNTRY COLUMN
========================= */

.country-cell {

    text-align: center;

    vertical-align: middle;

    min-width: 70px;

}

.country-code {

    font-size: 15px;

    font-weight: 700;

    color: #fff;

    line-height: 1.1;

    margin-bottom: 6px;

}

.country-flag {

    font-size: 22px;

    line-height: 1;

    text-transform: none !important;

    font-family:
        "Segoe UI Emoji",
        "Apple Color Emoji",
        "Noto Color Emoji",
        sans-serif;

}

/* =========================
PLAYER PAGE
========================= */

body {

    margin: 0;

    padding: 40px 20px;

    background: #000;

    color: #fff;

    font-family: Arial, sans-serif;

}

.player-wrap {

    max-width: 900px;

    margin: 0 auto;

}

.player-card {

    background:
        linear-gradient(
            180deg,
            #111 0%,
            #050505 100%
        );

    border: 1px solid #222;

    border-radius: 18px;

    box-shadow:
        0 0 25px rgba(0,255,255,.08);

    overflow: hidden;

}

.player-top {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    align-items: center;

    padding: 35px;

}

.player-image {

    width: 220px;

    height: 220px;

    object-fit: cover;

    border-radius: 16px;

    background: #111;

    border: 2px solid #222;

}

.player-info {

    flex: 1;

}

.player-name {

    font-size: 42px;

    font-weight: bold;

    margin-bottom: 10px;

}

.player-team {

    font-size: 22px;

    color: #00e5ff;

    margin-bottom: 25px;

}

/* =========================
META GRID
========================= */

.player-meta-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap: 16px;

}

.meta-box {

    background: #0d0d0d;

    border: 1px solid #222;

    border-radius: 12px;

    padding: 14px;

}

.meta-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #888;

    margin-bottom: 6px;

}

.meta-value {

    font-size: 20px;

    font-weight: bold;

    color: #fff;

}

/* =========================
PLAYER DETAILS
========================= */

.player-bottom {

    border-top: 1px solid #222;

    padding: 25px 35px 35px;

}

.section-title {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 20px;

    color: #00e5ff;

}

.player-details {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 15px;

}

.detail-row {

    background: #0a0a0a;

    border: 1px solid #1d1d1d;

    border-radius: 10px;

    padding: 14px;

}

.detail-label {

    font-size: 12px;

    color: #888;

    margin-bottom: 5px;

}

.detail-value {

    font-size: 18px;

    color: #fff;

}

/* =========================
BACK LINK
========================= */

.back-link {

    display: inline-block;

    margin-bottom: 20px;

    color: #00e5ff;

    text-decoration: none;

    font-weight: bold;

    transition: .2s ease;

}

.back-link:hover {

    color: #fff;

}

/* =========================
MOBILE
========================= */

@media (max-width: 768px) {

    .team-page {

        padding: 10px;

    }

    .team-title {

        font-size: 28px;

    }

    .roster-table th,
    .roster-table td {

        padding: 12px 8px;

        font-size: 13px;

    }

    .mini-headshot {

        width: 42px;

        height: 42px;

    }

    .player-col a {

        font-size: 15px;

    }

    .country-flag {

        font-size: 18px;

    }

    .player-top {

        padding: 25px;

    }

    .player-image {

        width: 180px;

        height: 180px;

    }

    .player-name {

        font-size: 32px;

    }

}

.country-flag-img {

    width: 26px;

    height: 18px;

    object-fit: cover;

    border-radius: 3px;

    border: 1px solid #333;

    display: inline-block;

}