/* =========================
   RESET / BASE
========================= */

body {
    color: #fff;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
    font-family: Plus Jakarta Sans, sans-serif;
    margin: 0;
    padding: 0;
}

button
{
    background-color: #314fa7;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 8px 15px;
}

/* =========================
   PAGE WRAPPER (CRITICAL)
========================= */

.page-wrapper {
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 16px;
    min-height: 86vh;
color: white;
box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* =========================
   PROFILE PAGE
========================= */

.profile-page {
    width: 100%;
}

.profile-overview {
    display: flex;
    gap: 1rem;
font-family: Plus Jakarta Sans, sans-serif;
}

/* =========================
   PROFILE HEAD
========================= */

/* TOP ROW */
.profile-head .head {
    align-items: center;
    background-color: #1c212f;
    border: 1px solid #6f91ac;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 12px;
}

/* LEFT SIDE */
.head-left {
    display: flex;
    align-items: center;   /* vertical alignment */
    gap: 12px;             /* slightly more breathing room */
}

/* IMAGE */
.profile-head .image {
    position: relative;
}

.profile-head .image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    vertical-align: middle;
}

/* LEVEL BADGE */
.profile-head .level {
    background-color: #28354b;
    border-radius: 2px;
    bottom: 0;
    color: #babec9;
    font-size: 14px;
    font-weight: 700;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translate(-50%, 50%);
    width: 35px;
}

/* TEXT BLOCK */
.profile-head .next {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* 🔥 THIS centers vertically with image */
    gap: 2px;                  /* tighter spacing like RivalsMeta */
}

/* NAME ROW */
.profile-head .name {
    align-items: center;
    color: #dde4ec;
    display: flex;
    gap: 5px;
font-size: 1.5rem;
}

/* ICON BUTTONS */
.icon-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #242836;
    border: 1px solid #2a3042;
    border-radius: 6px;
    transition: 0.2s;
}

.icon-btn:hover {
    border-color: #c855f7;
    background: #2b3145;
}

.social-icon {
    width: 14px;
    height: 14px;
}

/* CLUB */
.profile-head .club {
    color: #b5a4f3;
    font-size: 15px;
    font-weight: 600;
}

.club-link:hover {
    color: #e84f64;
}

/* LAST MATCH */
.profile-head .last-match {
color: #babec9;
    font-size: 14px;
}

.profile-head .last-match span {
    color: #fff;
}

.previous-rewards {
    color: #babec9;
    font-size: 12px;
    margin-top: 4px;
}

.reward-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.reward-chip {
    background: #263249;
    border: 1px solid #3d4f6e;
    border-radius: 999px;
    color: #dbe7f7;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
}

.reward-medal {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 26px;
    min-width: 26px;
    padding: 2px;
}

.reward-medal img {
    display: block;
    height: 20px;
    object-fit: contain;
    width: 20px;
}

.reward-chip.is-gold {
    border-color: #d9b24f;
    color: #ffe7a6;
}

.reward-chip.is-silver {
    border-color: #9fa9be;
    color: #edf2ff;
}

.reward-chip.is-bronze {
    border-color: #b47b58;
    color: #ffd9c2;
}

/* RIGHT SIDE BUTTON */
.update-btn button {
    background-color: #314fa7;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 8px 15px;
}

/* =========================
   HEAD BOTTOM (TABS + SEASON)
========================= */

.head-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #2a3042;
margin-bottom: 1rem;
}

/* TABS */
.tabs {
    display: flex;
    height: 37px;
    justify-content: center;
    position: relative;
    width: 100%;
}

.select-season {
    margin-top: -6px;
}

.select-ladder {
    margin-top: -6px;
    margin-right: 8px;
}

.tabs-links {
    align-items: center;
    background-color: #1c212f;
border: 1px solid #6f91ac;
border-top: none;
    border-radius: 0 0 5px 5px;
    border-top-color: #6f91ac79;
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: 5px;
    left: 0;
    padding: 3px;
    position: absolute;
    top: -1px;
}

.tabs-links button {
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #1e2233;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    padding: 5px;
color: white;
}

.tabs-links button.active {
    background-color: #314fa7;
    color: #fff;
}

.new-flag {
    font-size: 10px;
    background: #314fa7;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

/* SEASON SELECT */
.select-season select,
.select-ladder select {
background-color: #81a7c5;
    border: 1px solid #6f91ac;
    border-radius: 0 0 5px 5px;
    color: #fff;
    color: #1e2233;
    font-size: 15px;
    font-weight: 600;
    min-width: 115px;
    outline: none;
    padding: 6px;
    width: 100%;
}

.link-ind {
    align-items: center;
    background-color: #2b3245;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 20px;
}

.current-season {
    color: purple;
    font-weight: 600;
}

/* =========================
   PAGE WRAPPER
========================= */

.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* =========================
   MAIN LAYOUT
========================= */

.profile-overview {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    margin-top: 16px;
}

/* =========================
   CONNECTIONS
========================= */

.connections {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
}

.conn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s ease;
}

.conn.discord {
    background: #5865F2;
}

.conn.twitch {
    background: #9146FF;
}

.conn:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

/* =========================
   BALANCES
========================= */

.head-right {
    display: flex;
    align-items: center;
}

.balance-wrapper {
    display: flex;
    gap: 8px;
}

.balance-box {
    background: #171b27;
    border: 1px solid #2a3042;
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* Coins */
.balance-box.coins i {
    color: #ffd66b;
}

/* Gems */
.balance-box.gems i {
    color: #6bd0ff;
}