:root {
    --bg: #02070c;
    --bg-2: #04101a;
    --panel: #06131f;
    --panel-2: #081826;
    --panel-3: #0a1d2d;

    --line: #12344b;
    --line-soft: #0d2739;

    --text: #e7eef5;
    --muted: #8ea2b4;
    --muted-2: #62798c;

    --blue: #1098f7;
    --blue-2: #056bb0;
    --cyan: #35c2ff;

    --gold: #e5aa3d;
    --gold-2: #f4ca68;

    --purple: #ad5cff;
    --green: #78db32;
    --red: #ff4d4d;

    --sidebar: 224px;
    --rightbar: 455px;

    --radius: 5px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-width: 320px;

    background:
        radial-gradient(
            circle at 73% -10%,
            rgba(19, 102, 160, .16),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 15%,
            rgba(4, 67, 112, .13),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #02070c,
            #030b12 70%,
            #02070b
        );

    color: var(--text);

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 13px;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: .20;

    background-image:
        linear-gradient(
            rgba(24, 93, 132, .05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(24, 93, 132, .04) 1px,
            transparent 1px
        );

    background-size: 34px 34px;
}

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

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

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

.header {
    height: 76px;

    padding: 0 20px;

    display: grid;

    grid-template-columns:
        310px
        minmax(600px, 1fr)
        245px;

    align-items: center;

    gap: 15px;

    border-bottom: 1px solid #0d334c;

    background:
        linear-gradient(
            180deg,
            rgba(2, 9, 15, .98),
            rgba(2, 12, 20, .98)
        );

    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;

    min-width: 0;
}

.logo-star {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    color: #f8d47a;

    font-size: 47px;
    line-height: 1;

    text-shadow:
        0 0 12px rgba(245, 190, 77, .42),
        1px 2px 0 #7b4e00;
}

.logo-copy {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.logo-copy small {
    margin-left: 2px;

    color: #e8edf3;

    font-size: 17px;
    font-style: italic;
    font-weight: 800;
}

.logo-copy strong {
    margin-top: 2px;

    color: var(--gold-2);

    font-size: 28px;
    font-weight: 900;

    letter-spacing: 1px;

    text-shadow:
        0 1px #60400a,
        0 0 10px rgba(224, 163, 54, .25);
}

.logo-copy span {
    margin-top: 4px;

    color: #d8dde2;

    font-size: 8px;

    letter-spacing: .75px;
}

.topnav {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    white-space: nowrap;
}

.topnav a {
    position: relative;

    color: #e2e9f0;

    font-size: 12px;
    font-weight: 700;
}

.topnav a:hover,
.topnav a.active {
    color: white;
}

.topnav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -27px;

    height: 2px;

    background: var(--blue);

    box-shadow:
        0 0 8px rgba(16, 152, 247, .7);
}

.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 18px;
}

.server-time {
    line-height: 1.5;

    color: var(--muted);

    font-size: 11px;
}

.server-time span,
.server-time strong {
    display: block;
}

.server-time strong {
    color: #c9d5df;
    font-weight: 500;
}

.top-login {
    min-width: 86px;

    padding: 10px 18px;

    border: 1px solid #0c5d97;
    border-radius: 4px;

    color: white;

    background:
        linear-gradient(
            180deg,
            #087ac5,
            #03446f
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.15),
        0 0 12px rgba(0, 122, 203, .15);

    font-weight: 700;
}

.top-login:hover {
    filter: brightness(1.12);
}

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

.app {
    width: 100%;

    display: grid;

    grid-template-columns:
        var(--sidebar)
        minmax(650px, 1fr)
        var(--rightbar);

    gap: 14px;

    padding: 12px;
}

.sidebar,
.rightbar,
.content {
    min-width: 0;
}

/* =========================================================
   PANELS
========================================================= */

.panel {
    overflow: hidden;

    margin-bottom: 12px;

    border: 1px solid var(--line);
    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(5, 20, 32, .97),
            rgba(3, 15, 25, .98)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.015),
        0 4px 16px rgba(0,0,0,.18);
}

.panel-title {
    min-height: 36px;

    padding: 10px 12px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid var(--line-soft);

    color: #d7e9f7;

    font-size: 12px;
    font-weight: 800;
}

.panel-title-flex {
    justify-content: space-between;

    gap: 15px;
}

.panel-title a {
    color: #8db7d3;

    font-size: 9px;
    font-weight: 500;
}

/* =========================================================
   LEFT LOGIN
========================================================= */

.login-panel {
    padding-bottom: 10px;
}

.login-field {
    margin: 10px 12px 0;

    min-height: 34px;

    display: flex;
    align-items: center;

    border: 1px solid #17384c;
    border-radius: 3px;

    background: #030b12;
}

.login-field span {
    width: 32px;

    text-align: center;

    color: #9fb1bf;
}

.login-field input {
    width: 100%;

    padding: 8px 8px 8px 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #e5edf4;
}

.login-field input::placeholder {
    color: #7e8e9d;
}

.login-submit {
    width: calc(100% - 24px);

    margin: 10px 12px 0;

    padding: 9px;

    border: 1px solid #0a6daa;
    border-radius: 3px;

    color: white;

    background:
        linear-gradient(
            180deg,
            #087fcf,
            #03466f
        );

    font-weight: 800;
}

.login-submit:disabled {
    opacity: .78;
}

.login-links {
    padding: 9px 13px 0;

    display: flex;
    justify-content: space-between;

    color: #43bdf8;

    font-size: 9px;
}

/* =========================================================
   LEFT NAVIGATION
========================================================= */

.side-nav {
    padding: 6px 0;
}

.side-nav a {
    min-height: 29px;

    padding: 6px 13px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #c7d1db;

    border-left: 3px solid transparent;
}

.side-nav a span {
    width: 18px;

    color: #aebdca;

    text-align: center;
}

.side-nav a:hover {
    background: rgba(14, 94, 144, .23);
}

.side-nav a.active {
    border-left-color: #2eb2ff;

    background:
        linear-gradient(
            90deg,
            rgba(6, 114, 181, .70),
            rgba(6, 81, 129, .35)
        );

    color: white;
}

/* =========================================================
   SERVER STATUS
========================================================= */

.status-main {
    padding: 12px 13px 7px;

    display: flex;
    align-items: center;

    gap: 8px;
}

.online-dot {
    width: 9px;
    height: 9px;

    display: inline-block;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 7px rgba(119, 220, 49, .62);
}

.online-dot.offline {
    background: var(--red);

    box-shadow:
        0 0 7px rgba(255, 77, 77, .55);
}

.status-list {
    padding: 0 13px 12px;
}

.status-list div {
    padding: 3px 0;

    display: flex;
    justify-content: space-between;

    gap: 12px;

    color: #c2ccd5;

    font-size: 11px;
}

.status-list span {
    color: var(--muted);
}

.status-list strong {
    color: #dce7ef;

    text-align: right;

    font-weight: 500;
}

.connect-panel {
    padding-bottom: 12px;
}

.connect-panel p,
.connect-panel strong,
.connect-port {
    margin-left: 13px;
    margin-right: 13px;
}

.connect-panel p {
    margin-bottom: 3px;

    color: #c9d3dc;
}

.connect-panel strong {
    display: block;

    color: #e4edf4;
}

.connect-port {
    margin-top: 7px;

    color: var(--muted);
}

/* =========================================================
   CONTENT
========================================================= */

.breadcrumb {
    height: 30px;

    padding: 5px 7px;

    color: #75899a;

    font-size: 10px;
}

.breadcrumb span {
    color: #2ebcff;
}

.breadcrumb b {
    margin: 0 8px;

    color: #52697b;
}

/* =========================================================
   PLAYER HERO
========================================================= */

.player-hero {
    min-height: 160px;

    padding: 12px;

    display: grid;

    grid-template-columns:
        140px
        minmax(160px, 1fr)
        205px
        205px;

    gap: 12px;

    align-items: stretch;

    border: 1px solid var(--line-soft);
    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(4, 18, 29, .98),
            rgba(5, 21, 34, .91)
        );
}

.portrait {
    display: grid;
    place-items: center;
}

.portrait-frame {
    width: 136px;
    height: 136px;

    padding: 3px;

    border: 2px solid #d2a23e;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #6c4918,
            #d3a53e,
            #4d3210
        );
}

.portrait-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    border-radius: 5px;

    background:
        radial-gradient(
            circle at 50% 40%,
            #273648,
            #060c13 67%
        );

    color: #d8ad4b;

    font-size: 33px;
    font-weight: 900;

    text-shadow:
        0 0 10px rgba(216, 173, 75, .25);
}

.player-identity {
    padding: 5px 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.player-name-row {
    display: flex;
    align-items: center;

    gap: 10px;
}

.player-name-row h1 {
    margin: 0;

    color: #e9eef4;

    font-size: 31px;
    font-style: italic;

    letter-spacing: -.8px;
}

.country-unset {
    padding: 2px 6px;

    color: #8c9cab;

    border: 1px solid #294152;

    background: #09141e;
}

.online-text {
    margin: 6px 0 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--green);

    font-size: 11px;
}

.player-meta {
    margin-top: 6px;

    color: #aebbc7;

    font-size: 11px;
}

.ladder-badge-card {
    position: relative;

    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid #12334a;
    border-radius: 4px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(27, 84, 124, .23),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #061522,
            #04101a
        );

    text-align: center;
}

.ladder-badge-card span {
    color: #b8c8d4;

    font-size: 11px;
}

.ladder-badge-card.purple span {
    color: #e584ff;
}

.ladder-badge-card.blue span {
    color: #84cfff;
}

.large-rank {
    width: 78px;
    height: 78px;

    margin: 6px 0;

    display: grid;
    place-items: center;

    transform: rotate(45deg);

    border: 3px solid currentColor;

    background:
        rgba(3, 11, 18, .75);

    font-size: 38px;
    font-weight: 700;

    box-shadow:
        inset 0 0 12px currentColor,
        0 0 10px rgba(0,0,0,.75);
}

.large-rank::first-letter {
    transform: rotate(-45deg);
}

.purple .large-rank {
    color: #b46cff;
}

.blue .large-rank {
    color: #4cbcff;
}

.ladder-badge-card strong {
    color: #eef4f8;

    font-size: 13px;
}

.ladder-badge-card small {
    margin-top: 8px;

    color: #c3ccd4;

    font-size: 10px;
}

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

.profile-tabs {
    min-height: 43px;

    margin-top: 8px;

    display: grid;
    grid-template-columns: repeat(6, 1fr);

    border: 1px solid var(--line-soft);

    background: #05121d;
}

.profile-tabs button {
    position: relative;

    border: 0;

    color: #aab6c1;

    background: transparent;

    font-size: 10px;
}

.profile-tabs button:hover,
.profile-tabs button.active {
    color: white;
}

.profile-tabs button.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: #24aef5;
}

/* =========================================================
   DASHBOARD GRID
========================================================= */

.dashboard-grid {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        225px
        minmax(320px, 1fr)
        215px;

    gap: 10px;
}

.dashboard-panel,
.chart-panel,
.matchup-panel {
    margin-bottom: 0;
}

.summary-list {
    padding: 3px 12px 9px;
}

.summary-list div {
    min-height: 30px;

    padding: 6px 0;

    display: flex;
    justify-content: space-between;

    gap: 10px;

    border-bottom:
        1px solid #0c2536;
}

.summary-list div:last-child {
    border-bottom: 0;
}

.summary-list span {
    color: #b6c2cc;
}

.summary-list strong {
    color: #e7eef3;

    font-weight: 500;
}

.small-select {
    padding: 4px 9px;

    border: 1px solid #17384b;
    border-radius: 3px;

    color: #d8e5ee;

    background: #06111a;

    font-size: 10px;
}

.chart-empty {
    position: relative;

    min-height: 248px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.chart-lines {
    position: absolute;
    inset: 0;

    opacity: .33;

    background-image:
        linear-gradient(
            rgba(37, 87, 116, .25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37, 87, 116, .22) 1px,
            transparent 1px
        );

    background-size:
        42px 32px;
}

.chart-empty::after {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    top: 57%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #974cff,
            #d35bff 25%,
            #7e55ff 52%,
            #b05dff 75%,
            #9857ff
        );

    clip-path:
        polygon(
            0 80%,
            7% 44%,
            14% 55%,
            22% 15%,
            30% 40%,
            36% 25%,
            44% 62%,
            50% 45%,
            58% 72%,
            66% 39%,
            72% 57%,
            80% 30%,
            88% 45%,
            94% 17%,
            100% 28%,
            100% 100%,
            0 100%
        );
}

.chart-empty strong,
.chart-empty span {
    position: relative;
    z-index: 2;
}

.chart-empty strong {
    color: #bdcbd6;
}

.chart-empty span {
    max-width: 220px;

    margin-top: 7px;

    color: #6f8393;

    text-align: center;

    font-size: 10px;
}

.empty-state {
    min-height: 200px;

    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #8ea0af;

    text-align: center;
}

.empty-state strong {
    color: #c5d2dc;
}

.empty-state span {
    margin-top: 7px;

    color: #718696;

    font-size: 10px;
}

/* =========================================================
   TABLES
========================================================= */

.main-ladder {
    margin-top: 12px;
}

.table-scroll {
    overflow-x: auto;
}

.ladder-table,
.mini-table {
    width: 100%;

    border-collapse: collapse;
}

.ladder-table th,
.mini-table th {
    height: 30px;

    padding: 7px 10px;

    border-bottom: 1px solid #123048;

    color: #8aa1b3;

    background: #04111b;

    text-align: left;

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;
}

.ladder-table td {
    height: 34px;

    padding: 7px 10px;

    border-bottom: 1px solid #0d2739;

    color: #d2dce4;

    font-size: 11px;
}

.ladder-table tbody tr:hover,
.mini-table tbody tr:hover {
    background:
        rgba(10, 74, 113, .25);
}

.ladder-switch {
    display: flex;

    border: 1px solid #17384b;
    border-radius: 3px;

    overflow: hidden;
}

.ladder-switch button {
    padding: 4px 10px;

    border: 0;

    color: #8fa3b3;

    background: #04111b;

    font-size: 9px;
}

.ladder-switch button.active {
    color: white;

    background:
        linear-gradient(
            180deg,
            #0879bd,
            #07527f
        );
}

.rank-chip {
    min-width: 32px;

    padding: 2px 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid currentColor;
    border-radius: 3px;

    color: #a8bac7;

    background: #040b11;

    font-weight: 800;
}

.rank-chip.rank-d {
    color: #ba8b67;
}

.rank-chip.rank-c {
    color: #c2ccd2;
}

.rank-chip.rank-b {
    color: #52b7ff;
}

.rank-chip.rank-a {
    color: #c66dff;
}

.rank-chip.rank-o {
    color: #f1c94d;
}

.player-link {
    color: #e8eef3;

    font-weight: 600;
}

.rating-value {
    color: #dfeaf2;

    font-weight: 700;
}

.empty-row {
    height: 72px !important;

    color: #718797 !important;

    text-align: center;
}

/* =========================================================
   RIGHT TABLES
========================================================= */

.rightbar .panel {
    margin-bottom: 10px;
}

.mini-table th {
    padding: 6px 7px;

    font-size: 8px;
}

.mini-table td {
    height: 28px;

    padding: 5px 7px;

    border-bottom: 1px solid #0d2739;

    color: #d0d9e0;

    font-size: 10px;

    white-space: nowrap;
}

.mini-table td:nth-child(1) {
    width: 28px;

    color: #7f94a4;

    text-align: center;
}

.mini-table td:last-child {
    color: #eef3f6;

    font-weight: 700;
}

.recent-empty {
    min-height: 160px;
}

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

.ranks-panel {
    margin-top: 12px;
}

.rank-list {
    padding: 15px;

    display: grid;

    grid-template-columns:
        repeat(13, minmax(45px, 1fr));

    gap: 7px;
}

.rank-list span {
    min-height: 42px;

    padding: 7px 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #17364b;
    border-radius: 3px;

    color: #bcc8d0;

    background:
        linear-gradient(
            180deg,
            #071522,
            #040c13
        );

    font-size: 10px;
    font-weight: 800;

    text-align: center;
}

.rank-list span:nth-child(-n+3) {
    color: #bc8b68;
}

.rank-list span:nth-child(n+4):nth-child(-n+6) {
    color: #c3ccd3;
}

.rank-list span:nth-child(n+7):nth-child(-n+9) {
    color: #4bb4ff;
}

.rank-list span:nth-child(n+10):nth-child(-n+12) {
    color: #c164ff;
}

.rank-list span:last-child {
    color: #f4d05e;

    border-color: #8e6a1e;
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
    min-height: 42px;

    padding: 0 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid #0c3047;

    color: #788c9a;

    background: #02080d;

    font-size: 10px;
}

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

@media (max-width: 1450px) {

    :root {
        --rightbar: 380px;
    }

    .header {
        grid-template-columns:
            270px
            minmax(500px, 1fr)
            220px;
    }

    .topnav {
        gap: 20px;
    }

    .logo-copy strong {
        font-size: 24px;
    }

    .player-hero {
        grid-template-columns:
            125px
            minmax(145px, 1fr)
            175px
            175px;
    }

    .portrait-frame {
        width: 120px;
        height: 120px;
    }

    .dashboard-grid {
        grid-template-columns:
            205px
            minmax(270px, 1fr)
            190px;
    }
}

@media (max-width: 1180px) {

    .header {
        grid-template-columns:
            260px
            1fr
            170px;
    }

    .topnav a:nth-child(n+6) {
        display: none;
    }

    .app {
        grid-template-columns:
            210px
            minmax(600px, 1fr);
    }

    .rightbar {
        grid-column: 2;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .rightbar .panel {
        margin-bottom: 0;
    }

    .rightbar .recent-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .header {
        height: auto;
        min-height: 68px;

        padding: 8px 12px;

        grid-template-columns:
            1fr
            auto;
    }

    .topnav {
        display: none;
    }

    .server-time {
        display: none;
    }

    .app {
        display: block;

        padding: 8px;
    }

    .sidebar {
        display: none;
    }

    .rightbar {
        display: block;
    }

    .player-hero {
        grid-template-columns:
            100px
            1fr
            160px
            160px;
    }

    .portrait-frame {
        width: 95px;
        height: 95px;
    }

    .player-name-row h1 {
        font-size: 24px;
    }

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

    .profile-tabs {
        overflow-x: auto;

        grid-template-columns:
            repeat(6, minmax(120px, 1fr));
    }

    .rank-list {
        grid-template-columns:
            repeat(7, minmax(50px, 1fr));
    }
}

@media (max-width: 650px) {

    .logo-star {
        width: 45px;
        height: 45px;

        font-size: 34px;
    }

    .logo-copy strong {
        font-size: 20px;
    }

    .logo-copy small {
        font-size: 13px;
    }

    .logo-copy span {
        display: none;
    }

    .top-login {
        min-width: 70px;

        padding: 8px 11px;
    }

    .player-hero {
        grid-template-columns:
            90px
            1fr;
    }

    .ladder-badge-card {
        min-height: 145px;
    }

    .player-hero .ladder-badge-card:nth-last-child(2) {
        grid-column: 1;
    }

    .player-hero .ladder-badge-card:last-child {
        grid-column: 2;
    }

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

    .footer {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;

        gap: 3px;
    }
}


/* =========================================================
   STARCUP V2.1
   Ajustes visuales basados en la maqueta oficial
========================================================= */


/* ---------------------------------------------------------
   LEGIBILIDAD GENERAL
--------------------------------------------------------- */

body {
    font-size: 14px;
}

.panel-title {
    min-height: 38px;

    padding: 10px 13px;

    font-size: 13px;
}

.side-nav a {
    min-height: 31px;

    font-size: 12px;
}

.status-list div {
    font-size: 12px;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.header {
    min-height: 80px;
}

.logo-copy strong {
    font-size: 30px;
}

.logo-copy small {
    font-size: 18px;
}

.topnav a {
    font-size: 13px;
}


/* ---------------------------------------------------------
   PLAYER PROFILE
--------------------------------------------------------- */

.player-hero {
    min-height: 184px;

    grid-template-columns:
        155px
        minmax(185px, 1fr)
        220px
        220px;

    gap: 14px;

    padding: 14px;
}

.portrait-frame {
    width: 145px;
    height: 145px;
}

.portrait-placeholder {
    font-size: 37px;

    background:
        radial-gradient(
            circle at 50% 38%,
            #243649 0%,
            #0b1622 45%,
            #03080d 100%
        );

    box-shadow:
        inset 0 0 35px rgba(0,0,0,.75);
}

.player-name-row h1 {
    font-size: 34px;
}

.player-meta {
    font-size: 12px;
}


/* ---------------------------------------------------------
   NO MOSTRAR ONLINE FICTICIO DEL JUGADOR

   El servidor sí se verifica por API.
   El usuario conectado se implementará después.
--------------------------------------------------------- */

.player-identity .online-text {
    display: none;
}


/* ---------------------------------------------------------
   RANGOS

   La insignia mantiene geometría de escudo,
   pero la letra queda completamente vertical.
--------------------------------------------------------- */

.large-rank {
    width: 88px;
    height: 88px;

    margin: 13px 0 12px;

    transform: none;

    clip-path:
        polygon(
            50% 0%,
            88% 17%,
            100% 50%,
            88% 83%,
            50% 100%,
            12% 83%,
            0% 50%,
            12% 17%
        );

    border: 0;

    font-size: 35px;
    font-weight: 900;

    line-height: 1;

    text-shadow:
        0 0 9px currentColor;

    position: relative;
}

.purple .large-rank {
    color: #d07aff;

    background:
        radial-gradient(
            circle,
            #3a125b 0%,
            #180727 57%,
            #08030d 100%
        );

    box-shadow:
        inset 0 0 16px #a640e9,
        0 0 14px rgba(174, 73, 255, .38);
}

.blue .large-rank {
    color: #67caff;

    background:
        radial-gradient(
            circle,
            #073e62 0%,
            #041d30 57%,
            #020a10 100%
        );

    box-shadow:
        inset 0 0 16px #1299ed,
        0 0 14px rgba(42, 173, 255, .32);
}


/* ---------------------------------------------------------
   2v2 UNRANKED

   No mostramos una raya como si fuera un rango.
--------------------------------------------------------- */

.large-rank.is-unranked {
    width: auto;
    height: auto;

    min-width: 130px;

    margin: 25px 0 18px;

    padding: 12px 14px;

    clip-path: none;

    border: 1px solid #18547a;
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #092439,
            #04121e
        );

    color: #89cfee;

    box-shadow:
        inset 0 0 15px rgba(27,129,190,.15);

    font-size: 17px;
    letter-spacing: 1px;

    text-shadow: none;
}

.ladder-badge-card strong {
    margin-top: 2px;

    font-size: 14px;
}

.ladder-badge-card small {
    font-size: 11px;
}


/* ---------------------------------------------------------
   TABS
--------------------------------------------------------- */

.profile-tabs {
    min-height: 46px;
}

.profile-tabs button {
    font-size: 11px;
}


/* ---------------------------------------------------------
   DASHBOARD CENTRAL
--------------------------------------------------------- */

.dashboard-grid {
    grid-template-columns:
        245px
        minmax(340px, 1fr)
        240px;

    gap: 11px;
}

.summary-list div {
    min-height: 32px;

    font-size: 12px;
}

.chart-empty,
.empty-state {
    min-height: 218px;
}


/* ---------------------------------------------------------
   EL PANEL VACIO NO NECESITA TANTA ALTURA
--------------------------------------------------------- */

.matchup-panel .empty-state {
    min-height: 218px;
}

.recent-empty {
    min-height: 150px;
}


/* ---------------------------------------------------------
   TABLAS
--------------------------------------------------------- */

.ladder-table th {
    font-size: 10px;
}

.ladder-table td {
    height: 37px;

    font-size: 12px;
}

.mini-table th {
    font-size: 9px;
}

.mini-table td {
    height: 31px;

    font-size: 11px;
}

.rank-chip {
    min-width: 36px;

    padding: 3px 7px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   TOP 1V1

   Da más presencia a los jugadores reales.
--------------------------------------------------------- */

.rightbar .mini-table td:nth-child(2) {
    font-weight: 700;

    color: #eef5fa;
}

.rightbar .mini-table td:last-child {
    color: #e8f3fa;

    font-size: 12px;
}


/* ---------------------------------------------------------
   ESTADOS VACIOS
--------------------------------------------------------- */

.empty-row {
    height: 90px !important;

    color: #718b9d !important;

    text-transform: uppercase;

    letter-spacing: .7px;
}


/* ---------------------------------------------------------
   RANK SYSTEM
--------------------------------------------------------- */

.rank-list {
    padding: 16px;

    gap: 8px;
}

.rank-list span {
    min-height: 48px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   AJUSTE PARA PANTALLAS COMO 1648x928
--------------------------------------------------------- */

@media (min-width: 1500px) {

    :root {
        --sidebar: 240px;
        --rightbar: 480px;
    }

    .app {
        gap: 14px;

        padding: 12px 16px;
    }

    .content {
        min-width: 0;
    }

    .dashboard-grid {
        grid-template-columns:
            245px
            minmax(340px, 1fr)
            240px;
    }
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1450px) {

    .player-hero {
        grid-template-columns:
            130px
            minmax(160px, 1fr)
            190px
            190px;
    }

    .portrait-frame {
        width: 122px;
        height: 122px;
    }

    .dashboard-grid {
        grid-template-columns:
            215px
            minmax(290px, 1fr)
            205px;
    }
}



/* =========================================================
   STARCUP V2.2
   FIX DEFINITIVO DE GRID / PANTALLAS GRANDES
========================================================= */


/* Todo elemento grid puede encogerse sin desbordar */
.app,
.sidebar,
.content,
.rightbar,
.player-hero,
.dashboard-grid,
.player-hero > *,
.dashboard-grid > * {
    min-width: 0;
}


/* =========================================================
   GRID PRINCIPAL

   Izquierda fija
   Centro flexible
   Derecha fija y controlada
========================================================= */

.app {
    width: 100%;

    display: grid;

    grid-template-columns:
        258px
        minmax(0, 1fr)
        460px;

    gap: 16px;

    padding: 14px 16px;

    align-items: start;
}


/* =========================================================
   SIDEBAR IZQUIERDO
========================================================= */

.sidebar {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.sidebar > * {
    width: 100%;
    max-width: 100%;

    position: relative;

    margin: 0;

    box-sizing: border-box;
}


/* =========================================================
   CENTRO
========================================================= */

.content {
    width: 100%;
    max-width: none;

    overflow: hidden;
}


/* =========================================================
   COLUMNA DERECHA

   Nunca invade el contenido central.
========================================================= */

.rightbar {
    width: 100%;
    max-width: 460px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    position: relative;
}

.rightbar > * {
    width: 100%;
    max-width: 100%;

    margin: 0;

    box-sizing: border-box;
}


/* =========================================================
   PERFIL SUPERIOR

   Avatar + jugador + 1v1 + 2v2
   TODO queda dentro del panel.
========================================================= */

.player-hero {
    width: 100%;

    display: grid;

    grid-template-columns:
        150px
        minmax(170px, 1fr)
        215px
        215px;

    gap: 16px;

    align-items: center;

    overflow: hidden;
}

.player-hero > * {
    position: relative;

    max-width: 100%;

    box-sizing: border-box;
}


/* Paneles 1v1 y 2v2 */
.ladder-badge-card {
    width: 100%;
    max-width: 215px;

    min-width: 0;

    justify-self: stretch;

    overflow: hidden;
}


/* Rango no puede crecer fuera del panel */
.large-rank {
    flex: 0 0 auto;

    max-width: 92px;
    max-height: 92px;
}


/* Unranked tampoco puede salir */
.large-rank.is-unranked {
    width: calc(100% - 28px);
    min-width: 0;
    max-width: 170px;

    text-align: center;

    font-size: 16px;
}


/* =========================================================
   FILA CENTRAL
========================================================= */

.dashboard-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(210px, 0.85fr)
        minmax(300px, 1.35fr)
        minmax(210px, 0.85fr);

    gap: 12px;

    align-items: stretch;
}

.dashboard-grid > * {
    width: 100%;
    max-width: 100%;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   TABLAS
========================================================= */

table {
    width: 100%;

    table-layout: fixed;
}

.ladder-table,
.mini-table {
    width: 100%;
}


/* =========================================================
   DESKTOP GRANDE
   1600px, 1920px, etc.

   IMPORTANTE:
   anulamos la regla anterior que causaba el problema.
========================================================= */

@media (min-width: 1500px) {

    .app {
        grid-template-columns:
            258px
            minmax(0, 1fr)
            460px;

        gap: 16px;

        padding-left: 16px;
        padding-right: 16px;
    }

    .player-hero {
        grid-template-columns:
            150px
            minmax(170px, 1fr)
            215px
            215px;
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(210px, .85fr)
            minmax(300px, 1.35fr)
            minmax(210px, .85fr);
    }
}


/* =========================================================
   DESKTOP MEDIO
========================================================= */

@media (max-width: 1450px) {

    .app {
        grid-template-columns:
            235px
            minmax(0, 1fr)
            390px;

        gap: 12px;
    }

    .player-hero {
        grid-template-columns:
            125px
            minmax(145px, 1fr)
            185px
            185px;

        gap: 10px;
    }

    .portrait-frame {
        width: 118px;
        height: 118px;
    }

    .ladder-badge-card {
        max-width: 185px;
    }

    .large-rank {
        max-width: 78px;
        max-height: 78px;
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(190px, .85fr)
            minmax(260px, 1.3fr)
            minmax(190px, .85fr);
    }
}


/* =========================================================
   PANTALLAS DONDE YA NO CABEN 3 COLUMNAS
========================================================= */

@media (max-width: 1180px) {

    .app {
        grid-template-columns:
            220px
            minmax(0, 1fr);
    }

    .rightbar {
        grid-column: 2;

        max-width: none;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .player-hero {
        grid-template-columns:
            120px
            minmax(150px, 1fr)
            repeat(2, minmax(160px, 190px));
    }
}


/* =========================================================
   MOVIL / TABLET
========================================================= */

@media (max-width: 900px) {

    .app {
        display: block;

        padding: 10px;
    }

    .sidebar,
    .content,
    .rightbar {
        width: 100%;
        max-width: none;

        margin-bottom: 12px;
    }

    .player-hero {
        grid-template-columns:
            120px
            minmax(0, 1fr);

        gap: 12px;
    }

    .ladder-badge-card {
        max-width: none;
    }

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

    .rightbar {
        display: block;
    }

    .rightbar > * {
        margin-bottom: 12px;
    }
}



/* =========================================================
   STARCUP V2.3
   CORRECCION DE DESBORDAMIENTO DEL CENTRO
========================================================= */


/* ---------------------------------------------------------
   GRID GENERAL
   Damos algo más de espacio al área central.
--------------------------------------------------------- */

@media (min-width: 1451px) {

    .app {
        grid-template-columns:
            240px
            minmax(0, 1fr)
            420px;

        gap: 14px;

        padding:
            14px 16px;
    }

    .rightbar {
        width: 100%;
        max-width: 420px;
    }
}


/* ---------------------------------------------------------
   MUY IMPORTANTE:
   el contenido central nunca puede crecer más
   que su propia columna.
--------------------------------------------------------- */

.content {
    min-width: 0;
    width: 100%;
    max-width: 100%;

    overflow: hidden;
}

.content > * {
    min-width: 0;
    max-width: 100%;
}


/* =========================================================
   PLAYER HERO

   Ya NO usamos 215px + 215px fijos.
   Los dos ladders comparten el espacio disponible.
========================================================= */

.player-hero {
    width: 100%;

    grid-template-columns:
        145px
        minmax(145px, 1fr)
        minmax(150px, .86fr)
        minmax(150px, .86fr);

    column-gap: 12px;
    row-gap: 12px;

    padding: 14px;

    overflow: hidden;
}


/* Todas las celdas pueden contraerse */
.player-hero > * {
    min-width: 0;

    width: auto;
    max-width: 100%;
}


/* Avatar */
.portrait {
    width: 100%;
}

.portrait-frame {
    width: 136px;
    height: 136px;

    max-width: 100%;
}


/* Identidad */
.player-identity {
    min-width: 0;

    padding-left: 5px;
    padding-right: 5px;
}

.player-name-row {
    min-width: 0;
}

.player-name-row h1 {
    min-width: 0;

    font-size: clamp(
        25px,
        2vw,
        34px
    );

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   TARJETAS 1v1 Y 2v2

   IMPORTANTE:
   anulamos los antiguos max-width.
--------------------------------------------------------- */

.player-hero .ladder-badge-card {
    width: 100%;
    max-width: none;
    min-width: 0;

    justify-self: stretch;

    padding:
        12px 8px;

    overflow: hidden;
}


/* Insignia */
.player-hero .large-rank {
    width: 78px;
    height: 78px;

    max-width: 78px;
    max-height: 78px;

    margin:
        10px auto;
}


/* Estado unranked */
.player-hero .large-rank.is-unranked {
    width: min(150px, calc(100% - 12px));
    height: auto;

    max-width: 150px;
    max-height: none;

    margin:
        21px auto 17px;

    padding:
        10px 7px;

    font-size: clamp(
        12px,
        1.1vw,
        16px
    );

    white-space: nowrap;
}


/* Textos dentro de los dos ladders */
.player-hero .ladder-badge-card strong,
.player-hero .ladder-badge-card small,
.player-hero .ladder-badge-card span {
    max-width: 100%;

    text-align: center;
}

.player-hero .ladder-badge-card strong {
    font-size: 13px;
}

.player-hero .ladder-badge-card small {
    font-size: 10px;

    white-space: normal;
}


/* =========================================================
   FILA PLAYER SUMMARY / CHART / MATCHUP

   También pasa a columnas proporcionales.
========================================================= */

.dashboard-grid {
    width: 100%;

    grid-template-columns:
        minmax(185px, .82fr)
        minmax(260px, 1.32fr)
        minmax(185px, .82fr);

    gap: 10px;

    overflow: hidden;
}

.dashboard-grid > * {
    min-width: 0;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
}


/* El contenido interno nunca fuerza el ancho */
.dashboard-grid .panel-title,
.dashboard-grid .summary-list,
.dashboard-grid .chart-empty,
.dashboard-grid .empty-state {
    max-width: 100%;
}


/* Textos largos del Matchup */
.matchup-panel .empty-state {
    padding-left: 12px;
    padding-right: 12px;
}

.matchup-panel .empty-state span {
    width: 100%;
    max-width: 185px;

    white-space: normal;
}


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

.profile-tabs {
    width: 100%;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    overflow: hidden;
}

.profile-tabs button {
    min-width: 0;

    padding-left: 5px;
    padding-right: 5px;

    white-space: nowrap;
}


/* =========================================================
   TABLAS PRINCIPALES
========================================================= */

.main-ladder,
.ranks-panel {
    width: 100%;
    max-width: 100%;

    overflow: hidden;
}


/* =========================================================
   AJUSTE 1200 - 1450
========================================================= */

@media (min-width: 1181px) and (max-width: 1450px) {

    .app {
        grid-template-columns:
            220px
            minmax(0, 1fr)
            350px;

        gap: 11px;
    }

    .rightbar {
        max-width: 350px;
    }

    .player-hero {
        grid-template-columns:
            115px
            minmax(120px, 1fr)
            minmax(135px, .8fr)
            minmax(135px, .8fr);

        gap: 9px;
    }

    .portrait-frame {
        width: 108px;
        height: 108px;
    }

    .player-hero .large-rank {
        width: 68px;
        height: 68px;

        max-width: 68px;
        max-height: 68px;

        font-size: 29px;
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(170px, .85fr)
            minmax(225px, 1.25fr)
            minmax(170px, .85fr);

        gap: 8px;
    }
}


/* =========================================================
   A PARTIR DE 1180
   abandonamos las tres columnas exteriores antes de
   permitir cualquier superposición.
========================================================= */

@media (max-width: 1180px) {

    .app {
        grid-template-columns:
            210px
            minmax(0, 1fr);

        gap: 10px;
    }

    .rightbar {
        grid-column: 2;

        width: 100%;
        max-width: none;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .rightbar .recent-panel {
        grid-column:
            1 / -1;
    }

    .player-hero {
        grid-template-columns:
            110px
            minmax(130px, 1fr)
            minmax(145px, .8fr)
            minmax(145px, .8fr);
    }
}



/* =========================================================
   STARCUP V2.4
   SISTEMA VISUAL DE RANGOS
========================================================= */

.large-rank {
    position: relative;

    width: 92px;
    height: 92px;

    max-width: 92px;
    max-height: 92px;

    display: grid;
    place-items: center;

    margin: 12px auto;

    clip-path: none;

    border-radius: 50%;

    font-size: 31px;
    font-weight: 900;

    letter-spacing: -1px;

    background: #071019;

    box-shadow:
        inset 0 0 20px rgba(255,255,255,.06),
        0 0 16px rgba(0,0,0,.6);
}

.large-rank::before,
.large-rank::after {
    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 50%;

    pointer-events: none;
}

.large-rank::before {
    border: 3px solid currentColor;

    transform: rotate(22.5deg);

    clip-path:
        polygon(
            50% 0%,
            85% 15%,
            100% 50%,
            85% 85%,
            50% 100%,
            15% 85%,
            0% 50%,
            15% 15%
        );

    box-shadow:
        inset 0 0 10px currentColor,
        0 0 10px currentColor;
}

.large-rank::after {
    inset: 14px;

    border: 1px solid currentColor;

    opacity: .55;
}

.large-rank.rank-d {
    color: #d58b4a;

    background:
        radial-gradient(
            circle,
            #562b11 0%,
            #291307 48%,
            #090605 100%
        );
}

.large-rank.rank-c {
    color: #c9d0d5;

    background:
        radial-gradient(
            circle,
            #4a5158 0%,
            #20262b 48%,
            #080b0d 100%
        );
}

.large-rank.rank-b {
    color: #39b9ff;

    background:
        radial-gradient(
            circle,
            #073f66 0%,
            #041d31 48%,
            #03080c 100%
        );
}

.large-rank.rank-a {
    color: #c65cff;

    background:
        radial-gradient(
            circle,
            #50106d 0%,
            #25072f 48%,
            #08030b 100%
        );
}

.large-rank.rank-o {
    color: #f7ce4e;

    background:
        radial-gradient(
            circle,
            #77530c 0%,
            #302003 48%,
            #090700 100%
        );

    box-shadow:
        inset 0 0 20px rgba(255,211,76,.18),
        0 0 18px rgba(255,197,39,.3);
}


/* ---------------------------------------------------------
   RANGOS DE TABLA
--------------------------------------------------------- */

.rank-chip {
    position: relative;

    min-width: 38px;

    padding: 4px 7px;

    border-radius: 4px;

    font-size: 11px;
    font-weight: 900;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #0b151e,
            #050b10
        );

    box-shadow:
        inset 0 0 7px rgba(255,255,255,.04);
}

.rank-chip.rank-d {
    color: #dc9659;

    border-color: #87501f;
}

.rank-chip.rank-c {
    color: #d1d7dc;

    border-color: #777f86;
}

.rank-chip.rank-b {
    color: #55c5ff;

    border-color: #176b9b;
}

.rank-chip.rank-a {
    color: #d66eff;

    border-color: #7b3397;
}

.rank-chip.rank-o {
    color: #f7d35c;

    border-color: #a17a16;
}


/* ---------------------------------------------------------
   RANK SYSTEM INFERIOR
--------------------------------------------------------- */

.rank-list span {
    position: relative;

    min-height: 58px;

    flex-direction: column;

    gap: 4px;

    font-weight: 900;
}

.rank-list span::before {
    content: "";

    width: 26px;
    height: 26px;

    display: block;

    border-radius: 50%;

    border: 2px solid currentColor;

    background:
        radial-gradient(
            circle,
            currentColor 0 7%,
            transparent 8% 100%
        );

    opacity: .8;

    box-shadow:
        0 0 7px currentColor;
}



/* =========================================================
   STARCUP V2.5
   ICONOS LADDER SVG
========================================================= */

.rank-icon-wrap {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}

.rank-icon {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* Perfil grande */

.rank-icon-large {
    width: 94px;
    height: 94px;
}


/* Tabla principal */

.rank-icon-small {
    width: 42px;
    height: 42px;
}


/* Top 1v1 / 2v2 derecho */

.rank-icon-mini {
    width: 30px;
    height: 30px;
}


/* ---------------------------------------------------------
   CONTENEDOR DEL RANGO GRANDE
   Ya no dibuja círculo/hexágono CSS.
--------------------------------------------------------- */

.player-hero .large-rank {
    width: auto;
    height: auto;

    max-width: none;
    max-height: none;

    margin:
        8px auto 7px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    clip-path: none;
    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    color: inherit;

    font-size: inherit;

    text-shadow: none;
}


/* anulamos pseudo-elementos antiguos */

.player-hero .large-rank:not(.is-unranked)::before,
.player-hero .large-rank:not(.is-unranked)::after {
    display: none;
}


/* ---------------------------------------------------------
   UNRANKED SE MANTIENE COMO TEXTO
--------------------------------------------------------- */

.player-hero .large-rank.is-unranked {
    width: min(
        150px,
        calc(100% - 12px)
    );

    min-width: 0;

    max-width: 150px;

    height: auto;

    margin:
        22px auto 18px;

    padding:
        11px 8px;

    display: flex;

    border:
        1px solid #18547a;

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #092439,
            #04121e
        );

    color: #89cfee;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: .8px;

    white-space: nowrap;

    box-shadow:
        inset 0 0 14px rgba(27,129,190,.15);
}


/* ---------------------------------------------------------
   TABLAS
--------------------------------------------------------- */

.ladder-table td:nth-child(3),
.mini-table td:nth-child(3) {
    vertical-align: middle;
}

.mini-table .rank-icon-wrap {
    margin:
        -3px 0;
}


/* ---------------------------------------------------------
   RANK SYSTEM INFERIOR
   Los cuadros antiguos permanecen por ahora,
   pero sin círculos CSS adicionales.
--------------------------------------------------------- */

.rank-list span::before {
    display: none;
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1450px) {

    .rank-icon-large {
        width: 78px;
        height: 78px;
    }

    .rank-icon-small {
        width: 38px;
        height: 38px;
    }
}



/* ==========================================================
   STARCUP V2.6
   RECTANGULAR LADDER RANK SYSTEM
========================================================== */


/* ----------------------------------------------------------
   BASE
---------------------------------------------------------- */

.starcup-rank-badge {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    font-weight: 800;
    line-height: 1;

    white-space: nowrap;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06) 0%,
            rgba(255,255,255,.015) 45%,
            rgba(0,0,0,.32) 100%
        ),
        #071018;

    border: 1px solid;

    border-radius: 3px;

    text-shadow:
        0 0 5px currentColor;

    box-shadow:
        inset 0 0 10px rgba(255,255,255,.025);
}


/* ----------------------------------------------------------
   PROFILE LARGE
---------------------------------------------------------- */

.starcup-rank-large {
    min-width: 108px;
    height: 58px;

    padding: 0 18px;

    font-size: 31px;

    letter-spacing: .3px;
}


/* ----------------------------------------------------------
   MAIN TABLE
---------------------------------------------------------- */

.starcup-rank-small {
    min-width: 43px;
    height: 27px;

    padding: 0 8px;

    font-size: 13px;
}


/* ----------------------------------------------------------
   RIGHT MINI TABLE
---------------------------------------------------------- */

.starcup-rank-mini {
    min-width: 42px;
    height: 25px;

    padding: 0 7px;

    font-size: 12px;
}


/* ==========================================================
   COLORS
========================================================== */


/* D-, D, D+ */

.starcup-rank-badge.rank-d {
    color: #f39a31;

    border-color: #a95309;

    background:
        linear-gradient(
            180deg,
            rgba(100,42,5,.76),
            rgba(31,14,4,.95)
        );

    box-shadow:
        inset 0 0 12px rgba(242,122,14,.13),
        0 0 5px rgba(225,94,0,.10);
}


/* C-, C, C+ */

.starcup-rank-badge.rank-c {
    color: #edf4f8;

    border-color: #87939c;

    background:
        linear-gradient(
            180deg,
            rgba(68,80,89,.75),
            rgba(14,20,25,.96)
        );

    box-shadow:
        inset 0 0 12px rgba(204,225,238,.10),
        0 0 5px rgba(190,215,230,.08);
}


/* B-, B, B+ */

.starcup-rank-badge.rank-b {
    color: #25c9ff;

    border-color: #0580b2;

    background:
        linear-gradient(
            180deg,
            rgba(4,62,91,.78),
            rgba(2,18,29,.97)
        );

    box-shadow:
        inset 0 0 12px rgba(0,172,237,.14),
        0 0 6px rgba(0,170,235,.10);
}


/* A-, A, A+ */

.starcup-rank-badge.rank-a {
    color: #ed57ff;

    border-color: #9326a8;

    background:
        linear-gradient(
            180deg,
            rgba(80,16,92,.78),
            rgba(25,5,31,.97)
        );

    box-shadow:
        inset 0 0 13px rgba(205,45,230,.14),
        0 0 6px rgba(203,32,230,.10);
}


/* OLYMPIC */

.starcup-rank-badge.rank-o {
    color: #ffd74b;

    border-color: #b98614;

    background:
        linear-gradient(
            180deg,
            rgba(94,67,5,.83),
            rgba(31,22,2,.98)
        );

    box-shadow:
        inset 0 0 14px rgba(255,198,38,.16),
        0 0 7px rgba(255,189,17,.12);

    font-size: .78em;
}


/* ==========================================================
   FEATURED PROFILE
========================================================== */

.player-hero .large-rank {
    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    max-width: none !important;

    padding: 0 !important;

    margin:
        14px auto 12px !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    clip-path: none !important;
}

.player-hero .large-rank::before,
.player-hero .large-rank::after {
    display: none !important;
}


/* UNRANKED stays rectangular */

.player-hero .large-rank.is-unranked {
    width: min(
        158px,
        calc(100% - 12px)
    ) !important;

    padding:
        11px 10px !important;

    border:
        1px solid #14658d !important;

    border-radius:
        3px !important;

    background:
        linear-gradient(
            180deg,
            #0a2d43,
            #06151f
        ) !important;

    color:
        #66cbed !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .6px !important;

    box-shadow:
        inset 0 0 12px rgba(47,170,219,.10) !important;
}


/* ==========================================================
   STARCUP RANK SYSTEM - BOTTOM
========================================================== */

.rank-list {
    display: grid;

    grid-template-columns:
        repeat(13, minmax(52px, 1fr));

    align-items: stretch;

    gap: 8px;
}


.rank-list > span {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 48px;

    padding: 0 5px;

    border-radius: 3px;

    font-size: 15px;
    font-weight: 800;

    line-height: 1;

    background: #061018;

    box-sizing: border-box;
}


.rank-list > span::before,
.rank-list > span::after {
    display: none !important;
}


/* D */

.rank-list > span[data-rank^="D"] {
    color: #f39a31;

    border:
        1px solid #a95309;

    background:
        linear-gradient(
            180deg,
            rgba(89,39,5,.76),
            rgba(29,13,3,.95)
        );
}


/* C */

.rank-list > span[data-rank^="C"] {
    color: #edf4f8;

    border:
        1px solid #87939c;

    background:
        linear-gradient(
            180deg,
            rgba(64,74,82,.74),
            rgba(14,19,23,.96)
        );
}


/* B */

.rank-list > span[data-rank^="B"] {
    color: #24c9ff;

    border:
        1px solid #057dab;

    background:
        linear-gradient(
            180deg,
            rgba(3,58,85,.76),
            rgba(2,17,27,.97)
        );
}


/* A */

.rank-list > span[data-rank^="A"] {
    color: #ed57ff;

    border:
        1px solid #9023a2;

    background:
        linear-gradient(
            180deg,
            rgba(74,14,87,.76),
            rgba(23,5,29,.97)
        );
}


/* Olympic */

.rank-list > span[data-rank="Olympic"] {
    color: #ffd84c;

    border:
        1px solid #b78a16;

    background:
        linear-gradient(
            180deg,
            rgba(90,66,5,.80),
            rgba(31,22,2,.98)
        );

    font-size: 11px;
}


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

@media (max-width: 1450px) {

    .starcup-rank-large {
        min-width: 96px;
        height: 52px;

        font-size: 27px;
    }

    .rank-list {
        gap: 5px;
    }

    .rank-list > span {
        height: 44px;

        font-size: 13px;
    }
}


@media (max-width: 1180px) {

    .rank-list {
        grid-template-columns:
            repeat(7, minmax(58px, 1fr));
    }
}


@media (max-width: 700px) {

    .rank-list {
        grid-template-columns:
            repeat(4, minmax(60px, 1fr));
    }
}



/* ==========================================================
   STARCUP V2.6 LOGO
========================================================== */

.header .logo.logo-v26 {
    width: 315px;

    min-width: 315px;

    height: 78px;

    padding: 2px 0 2px 12px;

    display: flex;
    align-items: center;

    text-decoration: none;

    overflow: visible;
}


.starcup-main-logo {
    display: block;

    width: 292px;
    height: auto;

    max-height: 76px;

    object-fit: contain;

    object-position: left center;

    filter:
        drop-shadow(
            0 0 7px rgba(25,117,164,.18)
        );
}


@media (max-width: 1450px) {

    .header .logo.logo-v26 {
        width: 280px;
        min-width: 280px;
    }

    .starcup-main-logo {
        width: 260px;
    }
}



/* ==========================================================
   STARCUP FINAL RANK SYSTEM
   DISEÑO APROBADO
========================================================== */

.rank-list {
    display: grid;
    grid-template-columns: repeat(13, minmax(60px, 1fr));

    gap: 9px;

    align-items: stretch;
}


.rank-list > span {
    min-width: 0;

    min-height: 66px;

    padding:
        7px 4px
        5px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    box-sizing: border-box;

    border-radius: 2px;
}


.rank-list > span strong {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 33px;

    font-size: 21px;
    font-weight: 800;

    line-height: 1;
}


.rank-list > span small {
    display: block;

    color: #c1c7cc;

    font-size: 10px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;
}


/* D */

.rank-list > span[data-rank^="D"] {
    color: #f39a31;

    border: 1px solid #a95309;

    background:
        linear-gradient(
            180deg,
            rgba(87,37,4,.84),
            rgba(25,11,3,.98)
        );
}


/* C */

.rank-list > span[data-rank^="C"] {
    color: #edf4f8;

    border: 1px solid #87939c;

    background:
        linear-gradient(
            180deg,
            rgba(66,76,84,.82),
            rgba(13,18,22,.98)
        );
}


/* B */

.rank-list > span[data-rank^="B"] {
    color: #25c9ff;

    border: 1px solid #087fae;

    background:
        linear-gradient(
            180deg,
            rgba(2,58,85,.85),
            rgba(1,17,27,.98)
        );
}


/* A */

.rank-list > span[data-rank^="A"] {
    color: #ed57ff;

    border: 1px solid #9023a2;

    background:
        linear-gradient(
            180deg,
            rgba(73,14,86,.85),
            rgba(22,5,28,.98)
        );
}


/* OLYMPIC */

.rank-list > span[data-rank="Olympic"] {
    color: #ffd64a;

    border: 1px solid #b88b16;

    background:
        linear-gradient(
            180deg,
            rgba(88,63,4,.87),
            rgba(29,20,1,.98)
        );
}


.rank-list > span[data-rank="Olympic"] strong {
    font-size: 24px;

    min-height: 22px;
}


.rank-list > span[data-rank="Olympic"] b {
    font-size: 9px;

    line-height: 1;

    color: #ffd64a;
}


/* ==========================================================
   RANK BADGES - PERFIL Y TABLAS
   NO MODIFICAR FORMA
========================================================== */

.starcup-rank-badge {
    border-radius: 2px !important;

    clip-path: none !important;

    transform: none !important;
}


.starcup-rank-large {
    min-width: 108px !important;
    height: 56px !important;

    padding: 0 18px !important;

    font-size: 30px !important;
}


.starcup-rank-small {
    min-width: 43px !important;
    height: 25px !important;

    padding: 0 7px !important;

    font-size: 13px !important;
}


.starcup-rank-mini {
    min-width: 42px !important;
    height: 24px !important;

    padding: 0 7px !important;

    font-size: 12px !important;
}


/* evitar cualquier decoración antigua */

.starcup-rank-badge::before,
.starcup-rank-badge::after,
.rank-list > span::before,
.rank-list > span::after {
    display: none !important;
}


/* responsive */

@media (max-width: 1450px) {

    .rank-list {
        gap: 6px;
    }

    .rank-list > span {
        min-height: 61px;
    }

    .rank-list > span strong {
        font-size: 18px;
    }

    .rank-list > span small {
        font-size: 9px;
    }
}


@media (max-width: 1180px) {

    .rank-list {
        grid-template-columns:
            repeat(7, minmax(64px, 1fr));
    }
}


@media (max-width: 700px) {

    .rank-list {
        grid-template-columns:
            repeat(4, minmax(66px, 1fr));
    }
}



/* ==========================================================
   STARCUP FINAL LADDER COLORS
   DISEÑO APROBADO - NO MODIFICAR
========================================================== */


/* ==========================================================
   BASE DE TODOS LOS RANGOS
========================================================== */

.starcup-rank-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 2px !important;

    clip-path: none !important;
    transform: none !important;

    font-weight: 800 !important;
    line-height: 1 !important;

    text-align: center !important;
    white-space: nowrap !important;
}


/* ==========================================================
   D-, D, D+
   BRONCE / NARANJA
========================================================== */

.starcup-rank-badge.rank-d,
.player-hero .starcup-rank-badge.rank-d,
.ladder-table .starcup-rank-badge.rank-d,
.mini-table .starcup-rank-badge.rank-d {

    color: #ff9b29 !important;

    border-color: #a94d00 !important;

    background:
        linear-gradient(
            180deg,
            #572300 0%,
            #321300 48%,
            #170900 100%
        ) !important;

    box-shadow:
        inset 0 0 13px rgba(255,125,18,.18),
        0 0 6px rgba(255,104,0,.13) !important;

    text-shadow:
        0 0 6px rgba(255,122,20,.55) !important;
}


/* ==========================================================
   C-, C, C+
   PLATA
========================================================== */

.starcup-rank-badge.rank-c,
.player-hero .starcup-rank-badge.rank-c,
.ladder-table .starcup-rank-badge.rank-c,
.mini-table .starcup-rank-badge.rank-c {

    color: #e7edf1 !important;

    border-color: #818e97 !important;

    background:
        linear-gradient(
            180deg,
            #48525a 0%,
            #252c31 48%,
            #101519 100%
        ) !important;

    box-shadow:
        inset 0 0 13px rgba(219,234,244,.13),
        0 0 5px rgba(200,220,232,.10) !important;

    text-shadow:
        0 0 5px rgba(220,238,248,.38) !important;
}


/* ==========================================================
   B-, B, B+
   AZUL / CIAN
========================================================== */

.starcup-rank-badge.rank-b,
.player-hero .starcup-rank-badge.rank-b,
.ladder-table .starcup-rank-badge.rank-b,
.mini-table .starcup-rank-badge.rank-b {

    color: #22c8ff !important;

    border-color: #087eac !important;

    background:
        linear-gradient(
            180deg,
            #073a55 0%,
            #03283c 48%,
            #01131e 100%
        ) !important;

    box-shadow:
        inset 0 0 13px rgba(16,182,242,.18),
        0 0 6px rgba(0,174,239,.13) !important;

    text-shadow:
        0 0 6px rgba(0,190,255,.50) !important;
}


/* ==========================================================
   A-, A, A+
   PURPURA / MAGENTA
========================================================== */

.starcup-rank-badge.rank-a,
.player-hero .starcup-rank-badge.rank-a,
.ladder-table .starcup-rank-badge.rank-a,
.mini-table .starcup-rank-badge.rank-a {

    color: #ec58ff !important;

    border-color: #9529aa !important;

    background:
        linear-gradient(
            180deg,
            #51105c 0%,
            #330a3d 48%,
            #18041e 100%
        ) !important;

    box-shadow:
        inset 0 0 13px rgba(220,55,240,.18),
        0 0 6px rgba(214,38,235,.13) !important;

    text-shadow:
        0 0 6px rgba(231,69,255,.50) !important;
}


/* ==========================================================
   OLYMPIC
   DORADO
========================================================== */

.starcup-rank-badge.rank-o,
.player-hero .starcup-rank-badge.rank-o,
.ladder-table .starcup-rank-badge.rank-o,
.mini-table .starcup-rank-badge.rank-o {

    color: #ffd642 !important;

    border-color: #b88a11 !important;

    background:
        linear-gradient(
            180deg,
            #5a4105 0%,
            #382804 48%,
            #191100 100%
        ) !important;

    box-shadow:
        inset 0 0 14px rgba(255,205,52,.18),
        0 0 7px rgba(255,191,15,.14) !important;

    text-shadow:
        0 0 6px rgba(255,208,50,.55) !important;
}


/* ==========================================================
   TAMAÑO DEL RANGO EN PERFIL
========================================================== */

.player-hero .large-rank {
    color: inherit !important;

    border: 0 !important;
    background: transparent !important;

    box-shadow: none !important;

    clip-path: none !important;
    transform: none !important;
}


.player-hero .starcup-rank-large {
    min-width: 108px !important;
    height: 56px !important;

    padding: 0 18px !important;

    font-size: 30px !important;
}


/* ==========================================================
   TABLAS
========================================================== */

.starcup-rank-small {
    min-width: 43px !important;
    height: 25px !important;

    padding: 0 7px !important;

    font-size: 13px !important;
}


.starcup-rank-mini {
    min-width: 42px !important;
    height: 24px !important;

    padding: 0 7px !important;

    font-size: 12px !important;
}


/* ==========================================================
   STARCUP RANK SYSTEM
========================================================== */


/* D */

.rank-list > span[data-rank="D-"],
.rank-list > span[data-rank="D"],
.rank-list > span[data-rank="D+"] {

    color: #ff9b29 !important;

    border-color: #a94d00 !important;

    background:
        linear-gradient(
            180deg,
            #572300,
            #1b0a00
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(255,125,18,.13) !important;
}


/* C */

.rank-list > span[data-rank="C-"],
.rank-list > span[data-rank="C"],
.rank-list > span[data-rank="C+"] {

    color: #e7edf1 !important;

    border-color: #818e97 !important;

    background:
        linear-gradient(
            180deg,
            #48525a,
            #101519
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(220,235,245,.10) !important;
}


/* B */

.rank-list > span[data-rank="B-"],
.rank-list > span[data-rank="B"],
.rank-list > span[data-rank="B+"] {

    color: #22c8ff !important;

    border-color: #087eac !important;

    background:
        linear-gradient(
            180deg,
            #073a55,
            #01131e
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(0,180,240,.13) !important;
}


/* A */

.rank-list > span[data-rank="A-"],
.rank-list > span[data-rank="A"],
.rank-list > span[data-rank="A+"] {

    color: #ec58ff !important;

    border-color: #9529aa !important;

    background:
        linear-gradient(
            180deg,
            #51105c,
            #18041e
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(220,55,240,.13) !important;
}


/* OLYMPIC */

.rank-list > span[data-rank="Olympic"] {

    color: #ffd642 !important;

    border-color: #b88a11 !important;

    background:
        linear-gradient(
            180deg,
            #5a4105,
            #191100
        ) !important;

    box-shadow:
        inset 0 0 13px rgba(255,205,52,.14) !important;
}


/* ==========================================================
   LEYENDAS DE PUNTOS
========================================================== */

.rank-list > span small {
    color: #c9ced2 !important;

    font-weight: 500 !important;

    text-shadow: none !important;
}


.rank-list > span[data-rank="Olympic"] b,
.rank-list > span[data-rank="Olympic"] strong {

    color: #ffd642 !important;
}


/* ==========================================================
   ELIMINAR FORMAS ANTIGUAS
========================================================== */

.starcup-rank-badge::before,
.starcup-rank-badge::after,
.rank-list > span::before,
.rank-list > span::after {

    display: none !important;
}



/* ==========================================================
   STARCUP DYNAMIC PLAYER PROFILE
   No modifica Ladder Rank System
========================================================== */

.player-row {
    cursor: pointer;

    transition:
        background-color .14s ease,
        box-shadow .14s ease;
}


.player-row:hover {
    background:
        rgba(18, 105, 151, .10);
}


.player-row .player-link {
    cursor: pointer;

    font-weight: 600;
}


.player-row:hover .player-link {
    color: #70d5ff;
}


.player-row.selected-player {
    background:
        linear-gradient(
            90deg,
            rgba(0, 137, 196, .15),
            rgba(0, 93, 139, .055)
        );

    box-shadow:
        inset 3px 0 0 #12a8e4;
}


.player-row.selected-player .player-link {
    color: #8bddff;

    text-shadow:
        0 0 5px rgba(41, 170, 224, .20);
}


.player-row:focus {
    outline:
        1px solid rgba(34, 172, 226, .55);

    outline-offset:
        -1px;
}



/* ==========================================================
   STARCUP PLAYER PROFILE DATA
========================================================== */

.portrait-placeholder.has-avatar {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    color: transparent !important;
}


#featuredCountry {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 26px;

    font-size: 18px;
    line-height: 1;
}



/* ==========================================================
   STARCUP RANK SYSTEM - FINAL RESPONSIVE LAYOUT
   Keep rank colors/design, fix desktop overflow
========================================================== */

.ranks-panel {
    min-width: 0;
    overflow: hidden;
}

.ranks-panel .rank-list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    display: grid !important;
    grid-template-columns:
        repeat(auto-fit, minmax(68px, 1fr)) !important;

    gap: 8px !important;

    padding: 12px 14px 14px !important;
    margin: 0 !important;

    overflow: visible !important;
}

.ranks-panel .rank-list > span {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}

.ranks-panel .rank-list > span strong {
    white-space: nowrap;
}

.ranks-panel .rank-list > span small {
    white-space: nowrap;

    font-size: 10px !important;
}


/* Medium desktop / laptop */

@media (max-width: 1500px) {

    .ranks-panel .rank-list {
        grid-template-columns:
            repeat(auto-fit, minmax(62px, 1fr)) !important;

        gap: 6px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }

}


/* Tablet */

@media (max-width: 900px) {

    .ranks-panel .rank-list {
        grid-template-columns:
            repeat(auto-fit, minmax(72px, 1fr)) !important;
    }

}


/* Phone */

@media (max-width: 520px) {

    .ranks-panel .rank-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}



/* ==========================================================
   STARCUP RANK SYSTEM
   FINAL DESKTOP 13-COLUMN FIX
========================================================== */

@media (min-width: 1101px) {

    .ranks-panel .rank-list {
        display: grid !important;

        grid-template-columns:
            repeat(13, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 6px !important;

        padding: 12px 14px 14px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    .ranks-panel .rank-list > span {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 72px !important;

        margin: 0 !important;
        padding: 5px 2px !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }


    .ranks-panel .rank-list > span strong {
        font-size: clamp(16px, 1.15vw, 22px) !important;
        line-height: 1 !important;
    }


    .ranks-panel .rank-list > span small {
        margin-top: 7px !important;

        font-size: clamp(7px, 0.56vw, 10px) !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }


    .ranks-panel
    .rank-list
    > span[data-rank="Olympic"] strong {

        font-size: clamp(16px, 1.1vw, 21px) !important;
    }


    .ranks-panel
    .rank-list
    > span[data-rank="Olympic"] b {

        font-size: clamp(6px, 0.48vw, 9px) !important;

        line-height: 1 !important;

        margin-top: 3px !important;
    }

}



/* ==========================================================
   COUNTRY + RACE VISUALS
========================================================== */

.country-info,
.race-info {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    white-space: nowrap;
}


.country-flag {
    width: 20px;
    height: 14px;

    object-fit: cover;

    border-radius: 2px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.15),
        0 0 5px rgba(0,174,255,.10);
}


.race-icon {
    width: 19px;
    height: 17px;

    object-fit: contain;

    image-rendering: auto;
}


.race-random {
    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #2783a7;

    color: #6cdcff;

    font-size: 10px;
    font-weight: 800;

    background: #071923;
}


#featuredCountry .country-info {
    gap: 5px;
}


#featuredCountry .country-flag {
    width: 22px;
    height: 15px;
}


#featuredCountry .country-info span:last-child {
    display: none;
}


.ladder-table .country-info {
    justify-content: center;
}



/* ==========================================================
   STARCUP RACE ICONS - FINAL VISIBILITY
========================================================== */

.race-icon {
    width: 21px !important;
    height: 21px !important;

    object-fit: contain !important;

    opacity: 1 !important;

    filter:
        brightness(1.8)
        contrast(1.25)
        drop-shadow(0 0 4px currentColor);

    vertical-align: middle;
}


/* TERRAN - CYAN */

.race-info:has(.race-terran) {
    color: #55dfff;
}

.race-icon.race-terran {
    filter:
        brightness(0)
        saturate(100%)
        invert(79%)
        sepia(50%)
        saturate(1219%)
        hue-rotate(157deg)
        brightness(103%)
        contrast(104%)
        drop-shadow(0 0 4px #21cfff)
        drop-shadow(0 0 7px rgba(33,207,255,.45));
}


/* PROTOSS - GOLD */

.race-info:has(.race-protoss) {
    color: #ffd75a;
}

.race-icon.race-protoss {
    filter:
        brightness(0)
        saturate(100%)
        invert(86%)
        sepia(87%)
        saturate(1117%)
        hue-rotate(330deg)
        brightness(105%)
        contrast(102%)
        drop-shadow(0 0 4px #ffc928)
        drop-shadow(0 0 7px rgba(255,201,40,.45));
}


/* ZERG - MAGENTA */

.race-info:has(.race-zerg) {
    color: #e978ff;
}

.race-icon.race-zerg {
    filter:
        brightness(0)
        saturate(100%)
        invert(60%)
        sepia(78%)
        saturate(2655%)
        hue-rotate(247deg)
        brightness(103%)
        contrast(105%)
        drop-shadow(0 0 4px #db4dff)
        drop-shadow(0 0 7px rgba(219,77,255,.45));
}


/* RANDOM */

.race-random {
    color: #bcefff !important;

    border-color: #42d7ff !important;

    box-shadow:
        0 0 5px rgba(66,215,255,.35);
}



/* ==========================================================
   STARCUP RACE ICONS
   FINAL THEME: SOFT GOLD
========================================================== */

/* Race text */

.race-info {
    color: #e6cf91 !important;
}


/* TERRAN / PROTOSS / ZERG
   Same soft-gold visual identity */

.race-icon.race-terran,
.race-icon.race-protoss,
.race-icon.race-zerg {

    width: 21px !important;
    height: 21px !important;

    object-fit: contain !important;

    opacity: 1 !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(82%)
        sepia(32%)
        saturate(748%)
        hue-rotate(358deg)
        brightness(96%)
        contrast(89%)
        drop-shadow(0 0 3px rgba(214,181,105,.45))
        drop-shadow(0 0 6px rgba(214,181,105,.18))
        !important;
}


/* Random - same soft-gold family */

.race-random {
    color: #e6cf91 !important;

    border-color: #b99a57 !important;

    background:
        rgba(185,154,87,.08) !important;

    box-shadow:
        0 0 4px rgba(214,181,105,.22) !important;
}



/* ============================================================
   STARCUP AUTHENTICATION UI
   ============================================================
   Independent from ladder/rank visual system.
   ============================================================ */

.authenticated-state[hidden],
#loginState[hidden] {
    display: none !important;
}


.auth-message {
    min-height: 18px;
    margin-top: 8px;

    font-size: 11px;
    line-height: 1.35;

    text-align: center;
}


.auth-message.auth-error {
    color: #ff6c79;
}


.auth-message.auth-success {
    color: #77d7a1;
}


.auth-link {
    padding: 0;
    border: 0;
    background: transparent;

    color: inherit;

    font: inherit;
    font-size: 11px;

    cursor: pointer;
}


.auth-link:hover:not(:disabled) {
    text-decoration: underline;
}


.auth-link:disabled {
    opacity: .45;
    cursor: default;
}


.authenticated-state {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.auth-user {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px;

    border: 1px solid
        rgba(91, 164, 255, .22);

    background:
        rgba(14, 31, 52, .55);
}


.auth-user-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border: 1px solid
        rgba(98, 178, 255, .55);

    background:
        rgba(18, 49, 79, .85);

    color: #9ed9ff;

    font-size: 11px;
    font-weight: 800;
}


.auth-user div {
    min-width: 0;
}


.auth-user small {
    display: block;

    margin-bottom: 3px;

    color: #74899f;

    font-size: 9px;
    letter-spacing: .8px;
}


.auth-user strong {
    display: block;

    overflow: hidden;

    color: #e9f6ff;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.auth-logout {
    width: 100%;

    padding: 8px 10px;

    border: 1px solid
        rgba(255, 91, 105, .32);

    background:
        rgba(71, 22, 31, .32);

    color: #ff8993;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;

    cursor: pointer;
}


.auth-logout:hover {
    background:
        rgba(91, 27, 38, .5);
}


.top-login.authenticated {
    max-width: 145px;

    overflow: hidden;

    border-color:
        rgba(88, 203, 145, .5);

    color: #89e0b0;

    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ============================================================
   STARCUP REGISTER MODAL
   ============================================================ */

body.auth-modal-open {
    overflow: hidden;
}


.auth-modal[hidden] {
    display: none !important;
}


.auth-modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}


.auth-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 7, 14, .84);

    backdrop-filter:
        blur(4px);
}


.auth-modal-dialog {
    position: relative;

    z-index: 1;

    width: min(720px, 100%);
    max-height: calc(100vh - 48px);

    overflow-y: auto;

    border:
        1px solid rgba(44, 160, 224, .42);

    background:
        linear-gradient(
            180deg,
            rgba(7, 25, 38, .99),
            rgba(3, 15, 25, .99)
        );

    box-shadow:
        0 0 0 1px
            rgba(0, 198, 255, .06),
        0 24px 80px
            rgba(0, 0, 0, .72),
        0 0 45px
            rgba(0, 117, 183, .12);

    padding: 28px;
}


.auth-modal-dialog::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #11b6ef,
            #8f4ad9,
            transparent
        );
}


.auth-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;

    width: 34px;
    height: 34px;

    border:
        1px solid rgba(126, 178, 211, .22);

    background:
        rgba(7, 24, 37, .9);

    color: #91a9b9;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}


.auth-modal-close:hover {
    border-color:
        rgba(31, 182, 239, .55);

    color: #dff5ff;
}


.auth-modal-heading {
    margin-bottom: 24px;
    padding-right: 40px;
}


.auth-modal-kicker {
    margin-bottom: 6px;

    color: #17b8ef;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.auth-modal-heading h2 {
    margin: 0 0 8px;

    color: #eef9ff;

    font-size: 23px;
    font-weight: 800;

    letter-spacing: .5px;
}


.auth-modal-heading p {
    margin: 0;

    color: #7890a2;

    font-size: 12px;
}


.register-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.register-control {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.register-control > span {
    margin-bottom: 7px;

    color: #8ea8ba;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .8px;
}


.register-control input,
.register-control select {
    width: 100%;
    height: 42px;

    box-sizing: border-box;

    border:
        1px solid rgba(68, 129, 164, .34);

    outline: none;

    background:
        rgba(1, 14, 23, .92);

    color: #e6f6ff;

    padding: 0 12px;

    font: inherit;
    font-size: 12px;
}


.register-control input:focus,
.register-control select:focus {
    border-color:
        rgba(18, 174, 232, .75);

    box-shadow:
        0 0 0 2px
        rgba(0, 168, 229, .08);
}


.register-control select {
    cursor: pointer;
}


.register-control option {
    background: #071824;
    color: #e7f7ff;
}


.register-control small {
    min-height: 26px;

    margin-top: 6px;

    color: #5f788a;

    font-size: 9px;
    line-height: 1.35;
}


.register-security-notice {
    margin-top: 18px;

    padding: 11px 13px;

    border: 1px solid;

    font-size: 10px;
    line-height: 1.55;
}


.register-security-notice strong {
    display: block;

    margin-bottom: 2px;

    font-size: 9px;
    letter-spacing: .8px;
}


.register-security-warning {
    border-color:
        rgba(224, 156, 51, .34);

    background:
        rgba(95, 60, 12, .18);

    color: #d9ad68;
}


.register-security-ok {
    border-color:
        rgba(64, 195, 128, .32);

    background:
        rgba(15, 85, 53, .17);

    color: #79d6a4;
}


.register-message {
    min-height: 20px;

    margin: 12px 0 3px;

    text-align: center;

    font-size: 11px;
}


.register-error {
    color: #ff737f;
}


.register-success {
    color: #76dca4;
}


.register-submit {
    width: 100%;
    height: 44px;

    margin-top: 6px;

    border:
        1px solid rgba(22, 170, 225, .72);

    background:
        linear-gradient(
            180deg,
            #078bc9,
            #05679d
        );

    color: #fff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .8px;

    cursor: pointer;
}


.register-submit:hover:not(:disabled) {
    filter: brightness(1.09);
}


.register-submit:disabled {
    opacity: .42;

    cursor: not-allowed;
}


.register-login-link {
    margin-top: 15px;

    color: #668094;

    text-align: center;

    font-size: 10px;
}


.register-login-link button {
    margin-left: 4px;

    border: 0;
    padding: 0;

    background: transparent;

    color: #14b5ef;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}


.register-login-link button:hover {
    text-decoration: underline;
}


@media (max-width: 700px) {

    .auth-modal {
        padding: 12px;
        align-items: flex-start;
    }

    .auth-modal-dialog {
        margin-top: 12px;
        padding: 22px 18px;
        max-height: calc(100vh - 24px);
    }

    .register-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}



/* ============================================================
   REGISTER - COUNTRY FINAL ROW
   Race will later come from real match data.
   ============================================================ */

.register-control:has(#registerCountry) {
    grid-column: 1 / -1;
}