/* =========================
   LEFT COLUMN
========================= */

.profile-page .profile-overview .left .rank .current {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 10px 5px;
}

/* LEFT COMPONENT BASE */
.profile-page .profile-overview .left-comp {
    background-color: #1c212f;
    border: 1px solid #293644;
    border-radius: 5px;
}

/* SECTION TITLES */
.profile-page .profile-overview .left-comp .h2-sec {
    background-color: #131620;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    padding: 6px 10px;
    text-align: center;
}

.profile-page .profile-overview .left-comp .sec-head h2 {
    padding: 0;
    text-align: left;
}

.profile-page .profile-overview .left-comp .sec-head {
    align-items: center;
    background-color: #131620;
    border-radius: 5px;
    display: flex;
    gap: 5px;
    justify-content: space-between;
    padding: 6px 5px;
}

/* =========================
   RANK
========================= */

.profile-page .profile-overview .left .rank .highest .rank-badge {
    justify-content: center;
}

.rank-badge {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 180px;
}

.rank-badge .image img {
    width: 60px;
    height: 60px;
}

.rank-info .name {
    font-weight: 700;
}

.profile-page .profile-overview .left .rank .rank-badge .name {
    font-size: 18px;
    font-weight: 600;
}

.profile-page .profile-overview .left .rank .highest .rank-badge .name {
    font-size: 16px;
}

.profile-page .profile-overview .left .rank .rank-badge .score {
    color: #cecece;
    font-size: 14px;
}

.profile-page .profile-overview .left .rank .current .rates {
    color: #b9c2c9;
    font-size: 14px;
}

.rank .info {
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.profile-page .profile-overview .left .rank .highest {
    border-top: 1px solid #293644;
    margin-top: 5px;
    padding: 5px 10px 10px;
}

.profile-page .profile-overview .left .rank .highest p {
    color: #9fb7d0;
    margin-bottom: 5px;
    text-align: center;
}

.current {
align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 10px 5px;
}

/* =========================
   TOP MAPS
========================= */

/* Filters (keep mostly same) */
.filters {
    align-items: center;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    justify-content: left;
    margin-bottom: 5px;
}

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

.filters button.active {
    background: #2b3145;
    color: #fff;
}

.profile-page .profile-overview .left-comp .sec-head .filters {
    align-items: center;
    display: flex;
    gap: 5px;
    margin-bottom: 0;
}

.profile-page .profile-overview .left-comp .sec-head .filters button {
    background-color: #1e2233;
    font-size: 14px;
    font-weight: 600;
    padding: 3px 5px;
}

.profile-page .profile-overview .left-comp .sec-head .filters button.active {
    background-color: #2e3b83;
}

.topmaps-row .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #282e43;
    z-index: 1;
    transition: width 0.3s ease;
}

/* =========================
   CONTENT (ON TOP)
========================= */

.topmaps-row .content {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    z-index: 10;
}

/* =========================
   MAP LIST
========================= */

.top-maps-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ROW */
.content .topmaps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    background: #1e2233;
    transition: 0.2s;
}

.topmaps-row:hover {
    background: #242836;
}

/* =========================
   LEFT (MAP INFO)
========================= */

.topmaps-row .info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topmaps-row .info img {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    background-color: #1a1d29;
}

.topmaps-row .name {
    max-width: 100px;
    width: 100px;
    font-size: 13px;
font-weight: 600;
}

.content.topmaps-row {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    z-index: 10;
}

/* =========================
   CENTER (WIN % / W-L)
========================= */

.topmaps-row .kda {
    text-align: center;
}

.topmaps-row .sum {
    font-size: 15px;
    font-weight: 600;
}

.topmaps-row .avg {
    color: #fff;
    font-size: 13px;
font-weight: 600;
}

/* =========================
   RIGHT (MATCH COUNT)
========================= */

.topmaps-row .matches {
    color: #c5c3c0;
    font-size: 15px;
    text-align: center;
}

.topmaps-row .matches .winrate {
    font-weight: 600;
}

.topmaps-row .matches .total {
    font-size: 13px;
}

/* =========================
   TEAMMATES
========================= */

.teammates .heroes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero .content {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    z-index: 10;
}

.teammates .matches {
    color: #c5c3c0;
    font-size: 15px;
    text-align: center;
}

.hero .winrate
{
    font-weight: 600;
}

.hero .total {
    font-size: 13px;
}

.teammates-row .hero .content .info .image {
    background-color: #1a1d29;
    border-radius: 5px;
    vertical-align: middle;
}

.teammates-row .image img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.hero .info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero .image img {
    vertical-align: middle;
}

.match-history .matches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}

.match-history .matches .match .hero {
    align-items: center;
    display: flex;
    gap: 10px;
    width: 230px;
}

.match-history .matches .match .hero .wrapper .name {
    font-size: 14px;
    font-weight: 600;
}

.match-history .matches .match .hero .wrapper .date {
    color: #c1c1c1;
    font-size: 14px;
}

.match-history .matches .match .hero .wrapper .duration {
    border-top: 1px solid #404454;
    color: #c1c1c1;
    font-size: 14px;
    margin-top: 8px;
    padding-top: 4px;
    width: 100px;
}

.match-history .matches .match .hero .wrapper .duration .w 
{
    color: #00dc82;
    font-weight: 600;
    margin-right: 5px;
}

.match-history .matches .match .hero .wrapper .duration .l
{
    color: #e84f64;
    font-weight: 600;
    margin-right: 5px;
}

.match-history .matches .match .map .image img {
    border-radius: 5px;
    vertical-align: middle;
}

.match-history .matches .match .map {
    margin-right: 25px;
    text-align: center;
    width: 134px;
}

.match-history .matches .match .stats .stat .value {
    font-size: 15px;
    font-weight: 600;
}

.match-history .matches .match .map .image {
    position: relative;
}

.match-history .matches .match .kda .sum {
    color: #c1c1c1;
    font-size: 14px;
}

.match-history .matches .match .kda .avg {
    font-size: 17px;
    font-weight: 600;
}

.match-history .matches .match .kda .avg span {
    color: #ff6b6b;
}

.match-history .matches .match .stats .name {
    color: #c1c1c1;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.roles-card {
 border-radius: 0 8px 8px 0;
}

.show-more-btn {
    background-color: #282e43;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #242837;
    font-size: 15px;
    font-weight: 600;
    padding: 7px;
    width: 100%;
}

.w-dot {
color: #3ddc84;
    font-size: 10px;
}

.l-dot {
color: #e05c5c;
    font-size: 10px;
}

.sep {
color: #3a4148;
    margin: 0 1px;
}

.total-games {
    color: #9ca3af;
    font-size: 12px;
}
/* =========================
   RIGHT COLUMN
========================= */

.right {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* =========================
   STATS GRID
========================= */

.match-stats-overview {
    padding: 14px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* STAT CARD */
.stat-card {
    background: #1f2432;
    border: 1px solid #2a3042;
    padding: 12px;
    transition: 0.2s;
}

.stat-card:hover {
    border-color: #c855f7;
}

.winrate-card {
    align-items: center;
    display: flex;
    flex-direction: column;
 border-radius: 8px 0 0 8px;
background-color: #212736;
}

.kda-card {
background-color: #212736;
display: grid;
text-align: center;
}

/* CARD HEADER */
.card-header {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* =========================
   WINRATE CIRCLE
========================= */

.circle-wrap {
    width: 90px;
    height: 90px;
    margin: 8px auto;
    position: relative;
}

.circle-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.bg-ring {
    stroke: #2a3042;
    stroke-width: 6;
    fill: none;
}

.win-ring {
    stroke: #3ddc84;
    stroke-width: 6;
    fill: none;
}

.loss-ring {
    stroke: #e84f64;
    stroke-width: 6;
    fill: none;
}

.circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pct {
    font-size: 15px;
    font-weight: 700;
}

.wl-row {
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 3px;

}

/* =========================
   KDA
========================= */

.kda-big {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

.kda-bars {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bar-track {
    height: 6px;
    background: #242836;
    border-radius: 6px;
}

.bar-fill {
    height: 100%;
    border-radius: 6px;
}

.k-fill { background: #00dc80; }
.d-fill { background: #e84f64; }
.a-fill { background: #c855f7; }

/* =========================
   MATCH HISTORY (IMPORTANT)
========================= */

.match-history {
    background: #171b26;
    border: 1px solid #232938;
    border-radius: 10px;
    padding: 14px;
}

.match-history .matches .match {
    align-items: center;
    background-color: #23293b;
    border-left: 10px solid #838383;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    position: relative;
}

.match-history .matches .match.win {
    border-left-color: #00dc80;
}

.match-history .matches .match.loss {
    border-left-color: #e84f64;
}

.match-history .matches .match .link-ind svg {
    transform: rotate(180deg);
    width: 16px;
}

.match-details .match-breakdown {
    background: #1a2235;
    border: 1px solid #2f3b56;
    border-radius: 0 0 8px 8px;
    border-top: none;
    display: none;
    margin-top: -4px;
    overflow: hidden;
}

.match-details.is-open .match-breakdown {
    display: block;
}

.match-details.is-open .match {
    border-bottom: 1px solid #3a4868;
    border-radius: 5px 5px 0 0;
}

.match-details.is-open .match .link-ind svg {
    transform: rotate(0deg);
}

.match-breakdown-head,
.match-player-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 1.6fr 1fr 0.7fr 0.8fr;
    padding: 8px 10px;
}

.match-breakdown-head {
    background: #202b43;
    border-bottom: 1px solid #344464;
    color: #b8c4df;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.match-player-row {
    border-top: 1px solid #2a3652;
    color: #e7eefc;
    font-size: 13px;
}

.match-player-row.is-profile-user {
    background: linear-gradient(90deg, rgba(74, 147, 255, 0.18), rgba(74, 147, 255, 0.06));
    box-shadow: inset 3px 0 0 #6fb0ff;
}

.match-player-row.is-profile-user .player-col.player-name .name {
    color: #d7ebff;
    font-weight: 700;
}

.match-team-divider {
    background: linear-gradient(90deg, rgba(125, 142, 180, 0), rgba(125, 142, 180, 0.75), rgba(125, 142, 180, 0));
    height: 1px;
    margin: 6px 10px;
}

.match-team-label {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 8px 10px 4px;
}

.match-team-label .team-pill {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 3px 7px;
    text-transform: uppercase;
}

.match-team-label .team-name {
    color: #dce7fb;
    font-size: 12px;
    font-weight: 700;
}

.match-team-label.ally .team-pill {
    background: rgba(47, 210, 126, 0.2);
    border: 1px solid rgba(47, 210, 126, 0.55);
    color: #7ff0b5;
}

.match-team-label.enemy .team-pill {
    background: rgba(240, 95, 115, 0.2);
    border: 1px solid rgba(240, 95, 115, 0.55);
    color: #ff9aa8;
}

.match-player-row.ally .team-ind {
    background: #2fd27e;
}

.match-player-row.enemy .team-ind {
    background: #f05f73;
}

.player-col.player-name {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.player-col.player-name .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-ind {
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    min-width: 8px;
}

.mvp-badge {
    background: #f3cf56;
    border-radius: 4px;
    color: #1f2433;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
}

.player-col.points {
    color: #8fd3ff;
    font-weight: 700;
}

.match-player-empty {
    color: #a9b6d2;
    font-size: 13px;
    padding: 10px;
}

/* HEADER */
.head-matches {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.head-matches .title {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
}

/* MATCH ROW */
.match:hover {
    background: #242a3a;
}

/* RESULT COLORS */
.stats.win {
    color: #00dc80;
    font-weight: 600;
}

.stats.loss {
    color: #e84f64;
    font-weight: 600;
}

.profile-page .profile-overview .right .match-history .matches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}

.match-history .matches .match .map .image img {
    vertical-align: middle;
}

/* =========================
   TABS
========================= */

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* =========================
   KDA CARD (RIVALS STYLE)
========================= */

/* BIG NUMBERS */
.kda-big {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    font-size: 20px;
    font-weight: 700;
    margin-top: 6px;
}

/* COLORS */
.kda-val.k { color: #3ddc84; }
.kda-val.d { color: #e05c5c; }
.kda-val.a { color: #f0a832; }

.kda-sep {
color: #3a4148;
    font-size: 16px;
    font-weight: 400;
}

/* LABELS */
.kda-labels {
    display: flex;
    justify-content: center;
    gap: 28px;

    font-size: 10px;
    color: #6b7280;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* RATIO */
.kda-ratio-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.kda-ratio-badge {
align-items: center;
    background: #1b202f;
    border-radius: 5px;
    display: inline-flex;
    gap: 5px;
    padding: 3px 8px;
}

.ratio-num {
    color: #c8d6e5;
    font-size: 15px;
    font-weight: 800;
}

.ratio-label {
color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}

/* =========================
   BARS
========================= */

.kda-bars {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kda-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* K / D / A labels */
.bar-label {
    color: #9ca3af;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    width: 8px;
}

/* TRACK */
.bar-track {
    flex: 1;
    height: 6px;
    background: #242836;
    border-radius: 6px;
    overflow: hidden;
}

/* FILL */
.bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* COLORS */
.k-fill { background: #00dc80; }
.d-fill { background: #e84f64; }
.a-fill { background: #f0a832; }

/* =========================
   MAPS CARD (RIVALS STYLE)
========================= */

.card-label {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* LIST */
.maps-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ROW */
.map-row {
    display: flex;
    gap: 5px;
border-bottom: 1px solid #242837;
    position: relative;
}

.topmaps-row {
    gap: 5px;
border-bottom: 1px solid #242837;
    position: relative;
}

/* IMAGE */
.map-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}

/* INFO */
.map-info {
    flex: 1;
}

/* NAME ROW */
.map-name-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.map-nm {
    font-weight: 600;
}

.map-games {
color: #9ca3af;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
}

/* BAR */
.map-wl-bar {
    height: 6px;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

/* SEGMENTS */
.map-w-seg {
    background: #00dc80;
}

.map-l-seg {
    background: #e84f64;
}

/* TEXT */
.map-wl-text {
display: flex;
    font-size: 10px;
    font-weight: 700;
    gap: 5px;
}

.mw {
    color: #00dc80;
}

.ml {
    color: #e84f64;
}

.mpct {
    color: #9ca3af;
    margin-left: auto;
}

/* =========================
   SIDE PERFORMANCE (ROLES STYLE)
========================= */

.roles-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* ICON */
.role-icon-wrap {
    width: 26px;
    height: 26px;
}

.role-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* INFO */
.role-info {
    flex: 1;
}

/* TOP ROW */
.role-name-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.role-nm {
    font-weight: 600;
}

.role-pct {
    font-size: 11px;
    color: #3ddc84;
    font-weight: 800;
}

/* BAR */
.role-bar-track {
    height: 6px;
    background: #e05c5c;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

.role-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3ddc84, #27a560);
    border-radius: 6px;
}

/* SUB TEXT */
.role-sub {
    color: #9ca3af;
    font-size: 10px;
    font-weight: 600;
}

/* =========================
   MATCH HEADER (UPDATED)
========================= */

.head-matches {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* RIGHT SIDE WRAPPER */
.head-matches .filters {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}

/* BUTTON GROUP */
.filter-buttons {
    display: flex;
    gap: 6px;
}

.filter-buttons button {
    background: #242836;
    border: 1px solid #2a3042;
    color: #9ca3af;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.filter-buttons button.active {
    background: #2b3145;
    color: #fff;
font-weight: 700;
}

/* DROPDOWNS */
.filter-dropdowns {
    display: flex;
    gap: 6px;
}

/* SELECT STYLE */
.filter-select {
    background: #242836;
    border: 1px solid #2a3042;
    color: #fff;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}

/* HOVER */
.filter-select:hover {
    border-color: #c855f7;
}

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

@media (max-width: 900px) {

    .profile-overview {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .match {
        grid-template-columns: 1fr 1fr;
        row-gap: 6px;
    }
}