/* Make the container responsive with a grid instead of absolute positioning */
/* Container: columns only; rows are implicit */
.widget-container {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    grid-auto-rows: 136px;
    /* each row is exactly 136px */
    grid-auto-flow: dense;
    /* fill holes if spans create gaps */
    position: relative;
    width: calc(100% - 112px);
    top: 72px;
    left: 90px;
    height: 100vh;
    padding-bottom: 40px;
    min-height: 1110px;
}


/* == Career Stats Widget - 1 == */
.career-stats-widget-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--Obsidian);
    border: 1px solid var(--Charcoal);
    border-radius: 9px;
    color: var(--Silver);
    padding: 16px;

    /* responsive sizing inside grid */
    grid-column: 1 / 5;
    height: 320px;

}

/* Top Section */
.top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.career-stats-heading {
    font-size: 16px;
    font-weight: 600;
    color: white;
    text-align: left;
    line-height: 1.2;
}

/* Consolidated Career Stats Headings and Top Grid */
.career-stats-headings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 16px;
    margin-bottom: 4px;
}

.career-stats-heading.pvp {
    justify-self: start;
}

.career-stats-heading.pve {
    justify-self: start;
}

.career-stats-top-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 24px;
    align-items: start;
}

/* Divider inside the top grid should stretch with content */
.career-stats-top-grid .vertical-divider {
    height: auto;
    align-self: stretch;
}

/* Change Canvas size for Charts */
.kda-kpi canvas {
    width: 120px !important;
    height: 120px !important;
}

/* Left and Right KPIs */
.win-rate,
.kda-ratio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.kda-kpi {
    position: relative;
}

.kda-ratio-icon {
    width: 124px;
    height: 124px;
    object-fit: contain;
}

.kda-group,
.win-rate-details {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 80%;
}

.kda-label {
    font-size: 12px;
    color: var(--Silver);
}

.kda-number,
.win-rate-number {
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin-top: 4px;
}

/* Breakdown Rows */
.kda-group-lines {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
    text-align: center;
    flex-direction: row;
}

.win-loss-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
    text-align: center;
    flex-direction: row;
    width: 60px;
}

.kills,
.wins {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 70px;
}

.kills-label {
    font-size: 12px;
    color: var(--Silver);
    text-align: center;
}

.kills-number,
.wins-number {
    font-size: 20px;
    font-weight: 600;
    color: white;
}

.kills-line-icon {
    width: 48px;
    height: auto;
}

.kpi-stat-line {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: var(--Silver);
    margin-bottom: 4px;
}

/* Divider */
.vertical-divider {
    width: 1px;
    background-color: var(--Charcoal);
    height: 240px;
    align-self: center;
}

/* Bottom Section */
.bottom {
    border-top: 1px solid var(--Charcoal);
    padding-top: 12px;
    margin-top: auto;
}

.bottom-kpi-group {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.current-rank {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.lp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.games-played {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    min-width: 0;
    flex: 1;
}

.time-played {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    min-width: 0;
    flex: 1;
}

.current-rank-name,
.lp-number {
    font-size: 16px;
    font-weight: 500;
    color: white;
    margin-top: 4px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.current-rank,
.lp-label, .games-played-label, .time-played-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.games-played-number,
.time-played-number {
    font-size: 16px;
    font-weight: 500;
    color: white;
    margin-top: 4px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.current-rank-name {
    display: flex;
    gap: 10px;
    align-items: center;
    overflow: hidden;
}

.current-rank-name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.icon-challenger {
    width: 22px;
    height: 22px;
    object-fit: cover;
}






/* == Widget Table V2 - Lane Performance (container) == */
.widget-table-v2 {
    background-color: var(--Obsidian);
    border: 1px solid var(--Charcoal);
    border-radius: 9px;
    color: var(--Silver);
    font-size: 13px;
    grid-column: 1 / 5;
    position: relative;
    /* let the page grid place it */
    grid-row: 5;
    top: 66px;
    grid-row: 5 / 7;
}

/* Title */
.widget-table-v2 .widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
    padding-top: 16px;
    padding-left: 16px;
}

.icon-table-v2 {
    width: 16px;
    height: 16px;
}

/* ===== Header (edge-to-edge border, inner padding on cells) ===== */
.table-v2-header-row {
    grid-template-columns: minmax(140px, 1fr) 4rem 6rem 4rem;

    align-items: center;
    border-bottom: 1px solid var(--Charcoal);
    color: var(--Silver);
    font-size: 12px;
    display: grid;
}

.table-v2-header-row>div {
    padding: 6.5px 8px;
}

.table-v2 {
    text-align: right;
}

.table-v2--name {
    text-align: left;
}

/* ===== Rows (edge-to-edge border, inner padding on cells) ===== */
.table-v2-rows {
    display: block;
}

.table-v2-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 4rem 6rem 4rem;

    align-items: center;
    border-bottom: 1px solid var(--Charcoal);
    color: #fff;
}

.table-v2-row>div {
    padding: 7.5px 8px;
}

.table-v2-row:last-child {
    border-bottom: 0;
}

.table-v2-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Name cell (index + avatar + name) */
.table-v2-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    /* allow truncation */
}

.table-v2-index {
    width: 16px;
    text-align: right;
    color: var(--Silver);
    flex: 0 0 auto;
}

.table-v2-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.table-v2-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.table-v2-name {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Numeric cells */
.table-v2-cell {
    text-align: right;
    font-weight: 500;
}

.table-v2-winrate {
    color: var(--Green);
}

.table-v2-cell.is-positive {
    color: var(--Green);
}

.table-v2-cell.is-negative {
    color: #f42746;
}

/* Only apply flex to name columns in v2 body rows */
.table-v2-row .table-v2-col--name {
    display: flex;
    align-items: center;
    column-gap: 8px;
    /* space between icon and name */
}

/* Ensure the v2 icons remain fixed size */
.table-v2-row .weapon-icon img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.table-v2-header-row> :nth-child(2),
.table-v2-row> :nth-child(2) {
    display: none;
}








/* ───────── Widget Base ───────── */
.widget {
    position: relative;
    width: auto;
    height: 136px;
    top: 105px;
    width: auto;
    top: 66px;
    /* fixed height for minis */
    border-radius: 9px;
    background-color: var(--Obsidian);
    border: 1px solid var(--Charcoal);
    box-sizing: border-box;
    font-size: 14px;
    color: white;
    padding: 12px;
}

/* 1) Minis participate directly in the parent grid */
.mini-widgets {
    display: contents;
}


.widget-supers {
    grid-column: 1 / 2;
    grid-row: 4;
}

.widget-precision-kills {
    grid-column: 2 / 3;
    grid-row: 4;
}

.widget-killstreak {
    grid-column: 3 / 4;
    grid-row: 4;
}

.widget-damage {
    grid-column: 4 / 5;
    grid-row: 4;
}

/* 3) multi: same column band, starts on the row you choose, spans 4 rows tall */
.widget-multi {
    grid-column: 1 / 5;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 12px;
    grid-row: 3;
    position: relative;
}

/* ───────── Heading with Icon ───────── */
.widget-heading {
    position: relative;
    display: block;
    /* no flex: lets ellipsis work on the text node */
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 22px;
    line-height: 1.2;

    /* Ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Space for the icon (icon width + visual gap) */
    padding-left: 28px;
    /* adjust if your icon is wider/narrower */
    min-height: 18px;
}

/* Keep the icon where it was visually, without affecting text flow */
.widget-heading .icon {
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    flex: none;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
}

/* ───────── KPI Display ───────── */
.kpi-value {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
    margin-bottom: 4px;
}

.kpi-meta {
    font-size: 12px;
    color: #A8AAAF;
    margin-bottom: 12px;

    /* Ellipsis */
    display: block;
    /* ensures width context */
    width: 100%;
    /* fill row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.performance-bar-filled {
    height: 100%;
    border-radius: 3px;
}

.performance-bar-remaining {
    flex: 1;
}


/* ───────── multi Control: Sub-KPI Layout ───────── */
.multi-kpi-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.multi-kpi {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
}

.multi-kpi-value {
    font-size: 24px;
    font-weight: 500;
    color: white;
    margin-bottom: 2px;
}

.multi-kpi-meta {
    font-size: 12px;
    color: #A8AAAF;
    margin-bottom: 4px;
}

.multi-kpi .performance-indicator.progress-bar {
    display: flex;
    height: 6px;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 16px;
}



/* == Character Card == */

.character-cards-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.character-and-performance {
    grid-column: 5 / 14;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ================================
   Character Card
   ================================ */
.character-card {
    background-color: var(--Obsidian);
    border: 1px solid var(--Charcoal);
    border-radius: 9px;
    color: #f3f5f7;
    padding: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35);
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.character-card.first {
    grid-column: 5 / 8;
}

.character-card.second {
    grid-column: 8 / 11;
}


.character-card.third {
    grid-column: 11 / 14;
}


/* ================================
   Header (banner that touches the card’s top edge)
   ================================ */
.char-header {
    /* your original layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -16px -16px 3px;
    padding: 16px;
    background-size: cover !important;
    background-position: top center !important;
    background-repeat: no-repeat;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    overflow: hidden;
    position: relative;

}

/* optional readability gradient at the bottom of the banner */
.char-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 55%,
            rgba(15, 16, 20, 0.65) 100%);
    pointer-events: none;
}

/* Left side: avatar + title */
.char-left {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    /* sit above gradient */
    z-index: 1;
}

.char-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #2a2d34;
    background: #1f2127;
    object-fit: cover;
}

.char-title {
    display: grid;
    gap: 4px;
}

.char-name {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
}

.char-subtitle {
    font-size: 13px;
    color: #aeb6c2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 120px;
}

/* Right side: Power above Level, right-aligned */
.char-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* <- right align (was center) */
    gap: 6px;
    color: #aeb6c2;
    font-size: 13px;
    position: relative;
    z-index: 1;
    /* above gradient */
}

/* Power pill + star */
.char-power {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f5b301;
    font-weight: 600;
}

.char-power .star {
    font-size: 14px;
    line-height: 1;
    color: #f5b301;
    display: inline-block;
    transform: translateY(-0.5px);
}

.char-level span[data-text="level"] {
    font-weight: 600;
    color: #f3f5f7;
}

/* ================================
   Tags / Pills
   ================================ */

/* === Tags row (replaces .char-tags) === */
.char-tags-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 14px;
    /* was padding-bottom:12px */
}

/* left stack of pills */
.tags-left {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* right emblem next to the pills */
.tags-emblem {
    width: 21px;
    height: 21px;
    border-radius: 8px;
    border: 1px solid #2a2d34;
    background: #1d2026;
    /* shows if image missing */
    object-fit: cover;
}

/* hide emblem cleanly if no image */
.tags-emblem.is-empty {
    display: none;
}

.char-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #d5d9e0;
    background: #0E0E10;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* Element variants */
.tag.solar {
    background: #0E0E10;
    border-color: #F0631E;
    color: #fff;
}

.tag.arc {
    background: #0d285a;
    border-color: #60a5fa;
    color: #eaf2ff;
}

.tag.void {
    background: #2d1d4d;
    border-color: #a78bfa;
    color: #f5f2ff;
}

.tag.stasis {
    background: #0b3d4a;
    border-color: #67e8f9;
    color: #ecfeff;
}

.tag.strand {
    background: #0d4028;
    border-color: #22c55e;
    color: #ecfdf3;
}

.tag[data-pill="element"] {
    position: relative;
    padding-left: 26px;
    /* room for icon */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag[data-pill="element"]::before {
    content: "";
    position: absolute;
    left: 6px;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.tag[data-pill="element"][data-element="arc"]::before {
    background-image: url("https://files.supernova-analytics.com/supernova-app-assets/Destiny%202/Icons/Element%20Icons/Destiny_Element_Arc.png");
}

.tag[data-pill="element"][data-element="void"]::before {
    background-image: url("https://files.supernova-analytics.com/supernova-app-assets/Destiny%202/Icons/Element%20Icons/Destiny_Element_Void.png");
}

.tag[data-pill="element"][data-element="solar"]::before {
    background-image: url("https://files.supernova-analytics.com/supernova-app-assets/Destiny%202/Icons/Element%20Icons/Destiny_Element_Solar.png");
}

.tag[data-pill="element"][data-element="stasis"]::before {
    background-image: url("https://files.supernova-analytics.com/supernova-app-assets/Destiny%202/Icons/Element%20Icons/Destiny_Element_Stasis.png");
}

.tag[data-pill="element"][data-element="strand"]::before {
    background-image: url("https://files.supernova-analytics.com/supernova-app-assets/Destiny%202/Icons/Element%20Icons/Destiny_Element_Strand.png");
}

.tag[data-pill="element"][data-element="prismatic"]::before {
    background-image: url("https://files.supernova-analytics.com/supernova-app-assets/Destiny%202/Icons/Element%20Icons/Destiny_Element_Prismatic.png");
}

.tag.tag--archetype {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0px 8px;
}

.tag.tag--archetype .tag-emblem {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ================================
   Sections
   ================================ */
.char-section {
    padding: 14px 0;
    border-top: 1px solid #22262c;
}

.char-section h3 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #aeb6c2;
    letter-spacing: .04em;
}

/* Rows & Columns */
.row {
    display: flex;
    gap: 21px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.col {
    display: grid;
    gap: 10px;
}

.row-title {
    font-size: 12px;
    color: #7c8491;
    letter-spacing: .04em;
}

/* ================================
   Icon Rows
   ================================ */
.icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.icon-row img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.icon-slot {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.icon-img.is-empty {
    opacity: 0.2;
    background: #0E0E10;
    border: 1px solid #2a2d34;
}





/* keep bars simple */
/* put bars in normal flow so they sit under the KPI meta */
.performance-indicator {
    position: static !important;
}

.widget-performance-history {
    grid-column: 5 / 14;
    position: relative;
    grid-row: 4;
}



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


    .widget-killstreak {
        grid-column: 1 / 3;
        grid-row: 5;
    }

    .widget-damage {
        grid-column: 3 / 5;
        grid-row: 5;
    }

    .widget-precision-kills {
        grid-column: 3 / 5;
        grid-row: 4;
    }

    .widget-supers {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    .widget-table-v2 {
        grid-row: 6 / 8;
    }
}

@media (max-width: 1540px) {

    /* collapsed: show ONLY header */
    .character-card.is-collapsed> :not(.char-header) {
        display: none !important;
    }

    /* optional: make header feel clickable */
    .character-card .char-header {
        cursor: pointer;
    }

    /* optional: tighten collapsed card spacing */
    .character-card.is-collapsed {
        padding-bottom: 0;
    }


    .career-stats-widget-1 {
        grid-column: 1 / 9;
        height: unset;
        grid-row: 1 / 3;
    }

    .win-loss-group {
        flex-direction: column;
    }

    .kda-group-lines {
        flex-direction: column;
    }

    .win-rate,
    .kda-ratio {
        flex-direction: row;
    }

    .widget-supers {
        grid-column: 7 / 9;
        grid-row: 3;
        top: unset;
    }

    .widget-precision-kills {
        grid-column: 9 / 11;
        grid-row: 3;
        top: unset;
    }

    .widget-killstreak {
        grid-column: 11 / 13;
        grid-row: 3;
        top: unset;
    }

    .widget-damage {
        grid-column: 13 / 15;
        grid-row: 3;
        top: unset;
    }

    .widget-multi {
        grid-column: 1 / 7;
        grid-row: 3;
        top: unset;
    }

    .widget-table-v2 {
        grid-column: 9 / 15;
        grid-row: 1 / 3;
        top: unset;
    }

    .character-and-performance {
        grid-column: 1 / 15;
        display: flex;
        flex-direction: column;
        gap: 16px;
        grid-row: 4;
    }

    .char-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        flex-direction: column;
    }

    .char-right {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 6px;
        justify-content: space-between;
        width: 100%;
    }


    .widget-container {
        grid-template-columns: repeat(14, minmax(0, 1fr));
        min-height: 1370px;
    }

    .kills,
    .wins {
        align-items: start;
    }

    .kills-label {
        text-align: left;
        font-size: 12px;
        color: var(--Silver);
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

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

    .widget-container {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        min-height: 1520px;
    }

    .character-and-performance {
        gap: 12px;
    }

    .career-stats-widget-1 {
        grid-column: 1 / 8;
    }

    .widget-supers {
        grid-column: 1 / 4;
        grid-row: 4;
    }

    .widget-precision-kills {
        grid-column: 4 / 7;
        grid-row: 4;
        top: unset;
    }

    .widget-killstreak {
        grid-column: 7 / 10;
        grid-row: 4;
        top: unset;
    }

    .widget-damage {
        grid-column: 10 / 13;
        grid-row: 4;
        top: unset;
    }

    .widget-multi {
        grid-column: 1 / 13;
        grid-row: 3;
        top: unset;
    }

    .multi-kpi-group {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 32px;
        width: 100%;
    }

    .multi-kpi .performance-indicator.progress-bar {
        display: flex;
        height: 6px;
        width: 100%;
        max-width: unset;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 16px;
    }

    .widget-table-v2 {
        grid-column: 8 / 13;
        grid-row: 1 / 3;
        top: unset;
    }

    .character-and-performance {
        grid-column: 1 / 13;
        display: flex;
        flex-direction: column;
        gap: 16px;
        grid-row: 5;
    }

    .icon-slot {
        width: 26px;
        height: 26px;
    }

    .row {
        gap: 12px 16px;
    }

    .character-cards-row {
        display: flex;
        gap: 12px;
    }

}

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

    .career-stats-widget-1 {
        grid-column: 1 / 13;
    }

    .widget-container {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        min-height: 1680px;
    }

    .widget-multi {
        grid-column: 1 / 13;
        grid-row: 3 / 4;
        top: unset;
    }

    .widget-supers {
        grid-column: 1 / 4;
        grid-row: 4;
    }

    .widget-precision-kills {
        grid-column: 4 / 7;
        grid-row: 4;
        top: unset;
    }

    .widget-killstreak {
        grid-column: 1 / 4;
        grid-row: 5;
        top: unset;
    }

    .widget-damage {
        grid-column: 4 / 7;
        grid-row: 5;
        top: unset;
    }

    .multi-kpi-group {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 32px;
        width: 100%;
        flex-wrap: wrap;
    }

    .multi-kpi {
        min-width: 112px;
    }

    .widget-table-v2 {
        grid-column: 7 / 13;
        grid-row: 4 / 6;
        top: unset;
    }

    .character-and-performance {
        grid-column: 1 / 13;
        display: flex;
        flex-direction: column;
        gap: 16px;
        grid-row: 6;
    }

    .career-stats-heading {
        font-size: 14px;
    }




}



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

    .character-and-performance {
        grid-column: 1 / 13;
    }

    .widget-container {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        min-height: 2340px;
    }

    .character-cards-row {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .character-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-self: stretch;
        /* overrides base align-self: start */
    }

}

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

    .widget-container {
        min-height: 2486px;
    }

    .character-and-performance {
        grid-row: 7;
    }

    .widget-supers {
        grid-row: 4;
    }

    .widget-precision-kills {
        grid-row: 4;
    }

    .widget-killstreak {
        grid-column: 7 / 10;
        grid-row: 4;
        top: unset;
    }

    .widget-damage {
        grid-column: 10 / 13;
        grid-row: 4;
        top: unset;
    }

    .widget-multi {
        grid-column: 1 / 13;
        grid-row: 3;
        top: unset;
    }

    .widget-table-v2 {
        grid-column: 1 / 13;
        grid-row: 5 / 7;
        top: unset;
    }



    .multi-kpi-group {
        gap: 22px;
    }




}






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



    .widget-container {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: 100%;
        box-sizing: border-box;
        padding: 0 18px;
        height: 130vh;
        left: 0;
        min-height: 2580px;
    }

    .career-stats-widget-1 {
        grid-column: 1 / 9;
    }

    .kda-number,
    .win-rate-number {
        font-size: 18px;
    }


    /* == Mini Widgets == */
    .widget-supers {
        grid-column: 1/3;
    }

    .widget-precision-kills {
        grid-column: 3/5;
    }

    .widget-killstreak {
        grid-column: 5/7;
    }

    .widget-damage {
        grid-column: 7/9;
    }

    .widget-multi {
        grid-column: 1 / 9;
    }

    /* == Tables == */


    .widget-table-v2 {
        grid-column: 1/9;
    }

    .character-and-performance {
        grid-column: 1 / 9;
    }


}

@media screen and (max-width: 580px) {
    .multi-kpi {
        flex: 0 0 calc(50% - 8px);
        min-width: 0;
    }

    .widget-container {
        min-height: 2940px;
    }


    .win-rate,
    .kda-ratio {
        flex-direction: column;
    }

    .kills,
    .wins {
        align-items: center;
    }

    .kills-label {
        text-align: center;
    }

    .kda-group-lines {
        flex-direction: row;
    }

    .win-loss-group {
        flex-direction: row;
    }

    .career-stats-widget-1 {
        grid-row: 1 / 3;
        height: 320px;
    }

    .widget-multi {
        grid-row: 3 / 5;
        top: 70px;
    }


    .multi-kpi-group {
        flex: 1;
        height: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        row-gap: 16px;
        column-gap: 16px;
    }

    .widget-supers {
        grid-column: 1 / 5;
        top: 70px;
        grid-row: 5;
    }

    .widget-precision-kills {
        grid-column: 5 / 9;
        top: 70px;
        grid-row: 5;
    }

    .widget-killstreak {
        grid-column: 1 / 5;
        top: 70px;
        grid-row: 6;
    }

    .widget-damage {
        grid-column: 5 / 9;
        top: 70px;
        grid-row: 6;
    }

    .widget-table-v2 {
        grid-row: 7 / 9;
        top: 70px;
    }

    .character-and-performance {
        grid-row: 9;
        top: 70px;
        position: relative;
    }



    /* the row that holds Current Rank / Games Played / Time Played / Score */
    .bottom-kpi-group {
        min-width: 0;
    }

    /* each column must be allowed to shrink */
    .bottom-kpi-group>div {
        min-width: 0;
    }


    .games-played-label,
    .current-rank-label,
    .time-played-label,
    .lp-label {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


}

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

    .win-loss-group {
        flex-direction: column;
    }

    .kda-group-lines {
        flex-direction: column;
    }

    .career-stats-widget-1 {
        grid-row: 1 / 4;
        height: unset;
    }

    .widget-container {
        min-height: 3420px;
    }


    .widget-supers {
        grid-row: 6;
        top: unset;
    }

    .widget-precision-kills {
        grid-row: 6;
        top: unset;
    }

    .widget-killstreak {
        grid-row: 7;
        top: unset;
    }

    .widget-damage {
        grid-row: 7;
        top: unset;
    }

    .widget-table-v2 {
        grid-row: 8 / 10;
        top: unset;
    }

    .character-and-performance {
        grid-row: 10;
        top: unset;
        position: relative;
    }

    .widget-multi {
        grid-row: 4 / 6;
        top: unset;
    }

}

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

    /* Top Activities: hide the “Clear Rate” column (4th header / 2nd‑to‑last cell) */
    .widget-table-v2 .table-v2-header-row>div:nth-child(5),
    .widget-table-v2 .table-v2-row>div:nth-last-child(1) {
        display: none;
    }

    /* Top Weapon: hide the last column (“HS %”) */
    .widget-table-v1 .table-v1-header-row>div:last-child,
    .widget-table-v1 .table-v1-row>div:last-child {
        display: none;
    }

    .table-v1-row,
    .table-v1-header-row,
    .lane-header-row,
    .lane-row {
        grid-template-columns: minmax(130px, 1fr) 4rem 6rem;
    }

    .table-v2-header-row,
    .table-v2-row {
        grid-template-columns: minmax(130px, 1fr) 4rem 6rem;
    }

}