:root {
    --bg: #07080d;
    --bg-soft: #0b0d14;

    --panel: #10131d;
    --panel-hover: #141824;
    --panel-soft: #0d1018;

    --line: #242938;
    --line-light: #303749;

    --text: #f4f5fa;
    --muted: #858da1;
    --muted-dark: #5e6679;

    --accent: #a879ff;
    --accent-soft: rgba(168, 121, 255, .12);
    --accent-border: rgba(168, 121, 255, .32);

    --cyan: #6ee7f7;

    --danger: #ff6f87;
    --danger-soft: rgba(255, 111, 135, .10);

    --ok: #6fe0a8;
    --warn: #ffd166;

    --radius: 14px;
}


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

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    background:
        radial-gradient(
            circle at 12% -10%,
            rgba(116, 69, 196, .18),
            transparent 31%
        ),
        radial-gradient(
            circle at 85% 0%,
            rgba(68, 122, 150, .07),
            transparent 25%
        ),
        var(--bg);
}

button,
input,
select {
    font: inherit;
}


/* =========================================================
   APP LAYOUT
   ========================================================= */

.app {
    display: grid;

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

    min-height: 100vh;
}


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

.side {
    position: sticky;

    top: 0;

    height: 100vh;

    display: flex;
    flex-direction: column;

    padding:
        20px 13px 16px;

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

    background:
        rgba(9, 11, 17, .94);

    backdrop-filter:
        blur(16px);
}


/* BRAND */

.brand {
    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        5px 8px 24px;
}

.brand-mark {
    width: 40px;
    height: 40px;

    display: flex;

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

    flex-shrink: 0;

    font-size: 19px;

    border:
        1px solid var(--accent-border);

    border-radius: 12px;

    background:
        var(--accent-soft);
}

.brand-title {
    font-size: 17px;

    font-weight: 900;

    letter-spacing: .4px;
}

.brand-title span {
    color: var(--accent);
}

.brand-subtitle {
    margin-top: 3px;

    color: var(--muted-dark);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


/* NAV */

.nav-label {
    padding:
        0 10px 7px;

    color: #555e72;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.nav {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.nav button {
    width: 100%;

    min-height: 41px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        8px 11px;

    border:
        1px solid transparent;

    border-radius: 10px;

    background:
        transparent;

    color: #9ba4b8;

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.nav button:hover {
    color: #fff;

    background:
        rgba(255, 255, 255, .035);
}

.nav button.active {
    color: #fff;

    border-color:
        var(--accent-border);

    background:
        linear-gradient(
            90deg,
            rgba(168, 121, 255, .16),
            rgba(168, 121, 255, .05)
        );
}

.nav button.active .nav-icon {
    color: var(--accent);
}

.nav-icon {
    width: 20px;

    display: inline-flex;

    justify-content: center;

    color: #6e778d;

    font-size: 15px;
}

.nav-divider {
    height: 1px;

    margin:
        11px 9px 15px;

    background:
        var(--line);
}


/* SIDEBAR FOOTER */

.sidefoot {
    margin-top: auto;

    padding:
        14px 9px 3px;

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

    color: var(--muted);
}

.server-status {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 11px;
}

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--ok);

    box-shadow:
        0 0 8px rgba(111, 224, 168, .45);
}

.tournament-id {
    margin-top: 5px;

    color:
        var(--muted-dark);

    font-size: 10px;
}


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

.main {
    width: 100%;

    max-width: 1560px;

    margin: 0 auto;

    padding:
        32px 34px 60px;

    min-width: 0;
}


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

.top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;
}

.eyebrow {
    color: var(--accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}

.title {
    margin:
        6px 0 5px;

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

    line-height: 1.1;

    font-weight: 850;

    letter-spacing: -.6px;
}

.subtitle {
    max-width: 760px;

    color: var(--muted);

    line-height: 1.5;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button {
    min-height: 38px;

    padding:
        8px 13px;

    border:
        1px solid #303649;

    border-radius: 9px;

    color: #dce1ec;

    background:
        #191d29;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease,
        opacity .15s ease;
}

button:hover:not(:disabled) {
    border-color:
        #454d65;

    background:
        #202534;
}

button:active:not(:disabled) {
    transform:
        translateY(1px);
}

button.primary {
    color: #fff;

    border-color:
        rgba(168, 121, 255, .55);

    background:
        linear-gradient(
            135deg,
            #9d6cff,
            #7557dc
        );
}

button.primary:hover:not(:disabled) {
    background:
        linear-gradient(
            135deg,
            #ad82ff,
            #8064e6
        );
}

button.danger {
    color: #ff9aae;

    border-color:
        rgba(255, 111, 135, .28);

    background:
        var(--danger-soft);
}

button.danger:hover:not(:disabled) {
    border-color:
        rgba(255, 111, 135, .55);

    background:
        rgba(255, 111, 135, .16);
}

button:disabled {
    opacity: .38;

    cursor: not-allowed;
}


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

.panel {
    min-width: 0;

    padding: 18px;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(17, 20, 30, .96),
            rgba(13, 16, 24, .96)
        );

    box-shadow:
        0 16px 40px rgba(0, 0, 0, .14);
}

.panel h2,
h2 {
    margin:
        0 0 14px;

    font-size: 16px;

    font-weight: 750;
}


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

.grid {
    display: grid;

    gap: 14px;
}

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

.cards {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


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

.stat {
    position: relative;

    overflow: hidden;
}

.stat::after {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;

    width: 35px;
    height: 2px;

    border-radius:
        0 0 3px 3px;

    background:
        var(--accent);
}

.stat small {
    color:
        var(--muted);

    font-size: 11px;
}

.stat b {
    display: block;

    margin-top: 8px;

    font-size: 29px;

    line-height: 1;

    font-weight: 850;
}


/* =========================================================
   FORMS
   ========================================================= */

input,
select {
    min-height: 39px;

    padding:
        8px 10px;

    outline: none;

    color: #eef1f8;

    border:
        1px solid #2d3446;

    border-radius: 9px;

    background:
        #0b0e16;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

input:focus,
select:focus {
    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(168, 121, 255, .10);
}

.toolbar {
    display: flex;

    gap: 9px;

    flex-wrap: wrap;

    margin-bottom: 15px;
}

.formgrid {
    display: grid;

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

    gap: 10px;
}

.check {
    display: flex;

    align-items: center;

    gap: 9px;

    margin:
        8px 0;

    color:
        #c5ccda;
}

.check input {
    width: auto;
    min-height: auto;
}


/* =========================================================
   TEXT HELPERS
   ========================================================= */

.muted {
    color:
        var(--muted);
}

.danger {
    color:
        #ff91a5;
}

.ok {
    color:
        var(--ok);
}

.actions {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}


/* =========================================================
   NOTICE / BADGES
   ========================================================= */

.notice {
    margin-bottom: 10px;

    padding:
        11px 12px;

    border:
        1px solid #293044;

    border-radius: 9px;

    color:
        #cbd1df;

    background:
        rgba(255, 255, 255, .025);

    line-height: 1.5;
}

.badge {
    display: inline-flex;

    align-items: center;

    padding:
        4px 7px;

    border:
        1px solid #343b50;

    border-radius: 999px;

    color:
        #bbc3d6;

    background:
        #151925;

    font-size: 10px;
}

.badge.ok {
    border-color:
        rgba(111, 224, 168, .35);
}

.badge.bad {
    border-color:
        rgba(255, 111, 135, .35);
}


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

.table {
    width: 100%;

    border-collapse: collapse;
}

.table th,
.table td {
    padding:
        11px 10px;

    border-bottom:
        1px solid #222735;

    text-align: left;
}

.table th {
    color:
        #727b90;

    font-size: 10px;

    font-weight: 750;

    letter-spacing: .5px;

    text-transform: uppercase;
}


/* =========================================================
   CHARACTER CARDS
   ========================================================= */

.chargrid {
    display: grid;

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

    gap: 14px;
}

.char {
    position: relative;

    min-width: 0;
    min-height: 285px;

    overflow: hidden;

    border:
        1px solid #292f40;

    border-radius: 14px;

    background:
        #11151f;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.char:hover {
    transform:
        translateY(-3px);

    border-color:
        #454e67;

    box-shadow:
        0 16px 35px
        rgba(0, 0, 0, .30);
}

.char.lock {
    opacity: .42;

    filter:
        grayscale(.7);
}

.char.selected {
    border-color:
        var(--accent);

    box-shadow:
        0 0 0 1px
        var(--accent);
}

.char .avatar {
    position: relative;

    height: 170px;

    display: flex;

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

    overflow: hidden;

    color:
        #dce2f6;

    font-size: 58px;

    font-weight: 900;

    background:
        radial-gradient(
            circle at 50% 20%,
            #353c59,
            #121620 72%
        );
}

.char .avatar::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 55px;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(17, 21, 31, .92)
        );
}

.char .avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center top;
}

.char .charbody {
    padding:
        12px 13px 14px;
}

.char b {
    display: block;

    font-size: 16px;

    font-weight: 750;
}

.char small {
    color:
        var(--muted);
}

.char .reason {
    margin-top: 7px;

    color:
        #ff91a5;

    font-size: 10px;
}

.char .support,
.char .rarity {
    position: absolute;

    top: 10px;

    z-index: 2;

    padding:
        5px 7px;

    border-radius: 7px;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .6px;

    backdrop-filter:
        blur(8px);
}

.char .support {
    left: 10px;

    color:
        #fff;

    border:
        1px solid rgba(255, 111, 135, .5);

    background:
        rgba(201, 58, 83, .82);
}

.char .rarity {
    right: 10px;

    color:
        #fff;

    border:
        1px solid rgba(255, 255, 255, .18);

    background:
        rgba(10, 13, 20, .75);
}


/* =========================================================
   CHARACTER META
   ========================================================= */

.metaicons {
    display: flex;

    gap: 5px;

    flex-wrap: wrap;

    margin-top: 9px;
}

.metaicon {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        4px 6px;

    border:
        1px solid #303648;

    border-radius: 7px;

    color:
        #bac2d2;

    background:
        #141822;

    font-size: 9px;
}

.element-icon {
    width: 17px;
    height: 17px;

    display: inline-flex;

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

    border-radius: 50%;

    font-size: 8px;

    font-weight: 900;
}

.e-cosmos {
    color: #202330;
    background: #d8d9e4;
}

.e-anima {
    color: #08291c;
    background: #57d69b;
}

.e-charms {
    color: #fff;
    background: #f05b70;
}

.e-chaos {
    color: #fff;
    background: #9d6cff;
}

.e-psyche {
    color: #061b29;
    background: #52bfff;
}

.e-lak {
    color: #2c2200;
    background: #e9c64b;
}

.arc-icon {
    width: 17px;
    height: 17px;

    display: inline-flex;

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

    border-radius: 5px;

    color:
        #dfe5ff;

    background:
        #272d40;

    font-size: 8px;

    font-weight: 900;
}
/* =========================================================
   CHARACTER BANK
   ========================================================= */

.character-bank-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    padding: 0;

    border: 1px solid #292f40;
    border-radius: 13px;

    background: #0d1119;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.character-bank-card:hover {
    transform: translateY(-3px);

    border-color: #444d63;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .20);
}

.character-bank-card.clickable {
    cursor: pointer;
}

.character-bank-card.selected {
    border-color: var(--accent);

    box-shadow:
        0 0 0 1px
        rgba(168, 121, 255, .18);
}

.character-bank-card.lock {
    border-color:
        rgba(255, 111, 135, .16);
}


/* ART */

.character-bank-art {
    position: relative;

    height: 210px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 25%,
            #343b57,
            #11151e 72%
        );
}

.character-bank-art > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;

    transition:
        transform .3s ease,
        filter .2s ease;
}

.character-bank-card:hover
.character-bank-art > img {
    transform: scale(1.035);
}

.character-bank-card.lock
.character-bank-art > img {
    filter:
        grayscale(.72)
        brightness(.55);
}


/* FALLBACK */

.character-bank-fallback {
    position: absolute;

    inset: 0;

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

    color: #667087;

    font-size: 54px;
    font-weight: 900;
}


/* GRADIENT */

.character-bank-gradient {
    position: absolute;

    inset: 35% 0 0;

    background:
        linear-gradient(
            transparent,
            rgba(13, 17, 25, .75) 55%,
            #0d1119 100%
        );

    pointer-events: none;
}


/* TOP */

.character-bank-top {
    position: absolute;

    top: 9px;
    right: 9px;
    left: 9px;

    z-index: 3;

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

    gap: 7px;
}

.character-bank-tags {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    gap: 4px;
}

.character-support-tag,
.character-lock-tag,
.character-available-tag {
    display: inline-flex;
    align-items: center;

    min-height: 20px;

    padding: 3px 6px;

    border-radius: 5px;

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

    letter-spacing: .45px;

    backdrop-filter: blur(7px);
}

.character-support-tag {
    color: #cdb9f4;

    border:
        1px solid
        rgba(168, 121, 255, .3);

    background:
        rgba(34, 24, 51, .82);
}

.character-available-tag {
    color: #91deb4;

    border:
        1px solid
        rgba(111, 224, 168, .24);

    background:
        rgba(16, 37, 30, .82);
}

.character-lock-tag {
    color: #e398a7;

    border:
        1px solid
        rgba(255, 111, 135, .26);

    background:
        rgba(48, 21, 29, .86);
}


/* RARITY */

.character-rarity {
    display: flex;
    align-items: center;

    gap: 4px;

    flex-shrink: 0;

    padding: 4px 6px;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 6px;

    color: #fff;

    background:
        rgba(8, 11, 17, .76);

    backdrop-filter: blur(7px);
}

.character-rarity span {
    font-size: 9px;
    font-weight: 900;
}

.character-rarity small {
    color: #c6adf4;

    font-size: 7px;
}


/* SELECTED */

.character-selected-mark {
    position: absolute;

    top: 42px;
    right: 9px;

    z-index: 4;

    width: 28px;
    height: 28px;

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

    border:
        1px solid
        #b28aff;

    border-radius: 8px;

    color: white;

    background:
        rgba(139, 92, 226, .92);

    box-shadow:
        0 4px 14px
        rgba(139, 92, 226, .25);

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


/* NAME */

.character-bank-name {
    position: absolute;

    right: 12px;
    bottom: 10px;
    left: 12px;

    z-index: 3;
}

.character-bank-name h3 {
    margin: 0;

    overflow: hidden;

    color: #f1f3f8;

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

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

.character-bank-name > span {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #9aa3b5;

    font-size: 8px;

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


/* BODY */

.character-bank-body {
    padding: 10px;
}


/* PROPERTIES */

.character-properties {
    display: grid;

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

    gap: 5px;
}

.character-property {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 6px;

    border: 1px solid #252b3a;
    border-radius: 7px;

    background: #0a0d14;
}

.character-property-icon {
    width: 20px;
    height: 20px;

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

    flex-shrink: 0;

    border-radius: 5px;

    color: #b7bfd0;

    background: #181d29;

    font-size: 9px;
}

.character-property > div {
    min-width: 0;
}

.character-property small {
    display: block;

    margin-bottom: 1px;

    color: #555e72;

    font-size: 6px;

    letter-spacing: .35px;
}

.character-property strong {
    display: block;

    overflow: hidden;

    color: #aab2c3;

    font-size: 7px;

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


/* AVAILABLE */

.character-bank-ready {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid #242a38;

    color: #75bd98;

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

.character-bank-ready span {
    font-weight: 900;
}


/* LOCK REASON */

.character-bank-reason {
    display: flex;
    align-items: center;

    gap: 6px;

    min-height: 31px;

    margin-top: 8px;

    padding-top: 8px;

    border-top:
        1px solid
        rgba(255, 111, 135, .12);
}

.character-bank-reason > span {
    flex-shrink: 0;

    font-size: 9px;
}

.character-bank-reason > div {
    min-width: 0;
}

.character-bank-reason small {
    display: block;

    color: #805661;

    font-size: 6px;

    letter-spacing: .3px;
}

.character-bank-reason strong {
    display: block;

    margin-top: 1px;

    overflow: hidden;

    color: #c98794;

    font-size: 7px;

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


/* LOCKED CARD */

.character-bank-card.lock
.character-bank-body {
    opacity: .7;
}


/* =========================================================
   CHARACTER GRID
   ========================================================= */

.chargrid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px, 1fr)
        );

    gap: 11px;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .chargrid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .character-bank-art {
        height: 185px;
    }

}

@media (max-width: 440px) {

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

}

/* =========================================================
   BRACKET
   ========================================================= */

.bracket-overview {
    display: grid;

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

    gap: 10px;

    margin-bottom: 16px;
}

.bracket-stat {
    min-width: 0;

    padding:
        13px 14px;

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

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .018);
}

.bracket-stat span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;
}

.bracket-stat strong {
    display: block;

    overflow: hidden;

    color:
        var(--text);

    font-size: 17px;

    font-weight: 800;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.bracket-stat small {
    color:
        var(--muted);

    font-size: 11px;
}


/* OUTER AREA */

.bracket-shell {
    overflow-x: auto;

    padding:
        18px;

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

    border-radius:
        var(--radius);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(168, 121, 255, .045),
            transparent 35%
        ),
        rgba(8, 10, 15, .55);
}


/* ROUNDS */

.bracket-flow {
    display: flex;

    align-items: stretch;

    gap: 46px;

    min-width: max-content;
}

.bracket-round {
    position: relative;

    width: 310px;

    flex:
        0 0 310px;
}


/* connector between rounds */

.bracket-round:not(:last-child)::after {
    content: "›";

    position: absolute;

    top: 5px;
    right: -31px;

    display: flex;

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

    width: 18px;
    height: 18px;

    color:
        #515a70;

    font-size: 24px;
}


/* ROUND HEADER */

.round-header {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 45px;

    margin-bottom: 14px;
}

.round-number {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex-shrink: 0;

    border:
        1px solid var(--accent-border);

    border-radius: 9px;

    color:
        var(--accent);

    background:
        var(--accent-soft);

    font-size: 13px;

    font-weight: 900;
}

.round-title {
    color:
        #dce1ec;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .9px;
}

.round-subtitle {
    margin-top: 2px;

    color:
        var(--muted-dark);

    font-size: 10px;
}


/* MATCH LIST */

.round-matches {
    display: flex;

    flex-direction: column;

    justify-content: space-around;

    gap: 18px;

    min-height: calc(100% - 60px);
}


/* MATCH */

.bracket-match {
    position: relative;

    overflow: hidden;

    border:
        1px solid #292f40;

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            #11151f,
            #0d1018
        );

    transition:
        border-color .16s ease,
        transform .16s ease;
}

.bracket-match:hover {
    border-color:
        #3b4358;
}

.bracket-match-active {
    border-color:
        rgba(168, 121, 255, .38);
}

.bracket-match-active::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 2px;

    background:
        var(--accent);
}

.bracket-match-done::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 2px;

    background:
        var(--ok);
}

.bracket-match-pending {
    opacity: .66;
}


/* MATCH HEADER */

.match-head {
    display: flex;

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

    gap: 10px;

    padding:
        11px 12px 9px;

    border-bottom:
        1px solid #222735;
}

.match-number {
    color:
        #697286;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1px;
}

.match-status {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        4px 6px;

    border-radius: 6px;

    color:
        var(--muted);

    background:
        rgba(255, 255, 255, .025);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: .6px;
}

.match-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #687084;
}

.match-status.active {
    color:
        #cdb9ff;
}

.match-status.active i {
    background:
        var(--accent);

    box-shadow:
        0 0 7px
        rgba(168, 121, 255, .65);
}

.match-status.done {
    color:
        #92e6bb;
}

.match-status.done i {
    background:
        var(--ok);
}

.match-status.pending i {
    background:
        #606879;
}


/* PLAYERS */

.match-players {
    padding:
        8px;
}

.bracket-player {
    min-height: 48px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        7px 8px;

    border:
        1px solid transparent;

    border-radius: 8px;

    background:
        #0a0d14;
}

.bracket-player +
.bracket-player {
    margin-top: 5px;
}

.bracket-player.winner {
    border-color:
        rgba(111, 224, 168, .22);

    background:
        rgba(111, 224, 168, .035);
}

.bracket-player.empty {
    justify-content: center;

    color:
        var(--muted);
}

.player-avatar {
    width: 31px;
    height: 31px;

    display: flex;

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

    flex-shrink: 0;

    border:
        1px solid #343b4d;

    border-radius: 8px;

    color:
        #d4d9e5;

    background:
        #171b26;

    font-size: 11px;

    font-weight: 850;
}

.bracket-player.winner
.player-avatar {
    border-color:
        rgba(111, 224, 168, .32);

    color:
        #9aebc1;

    background:
        rgba(111, 224, 168, .08);
}

.player-info {
    min-width: 0;

    flex: 1;
}

.player-info strong {
    display: block;

    overflow: hidden;

    font-size: 12px;

    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.player-info small {
    display: block;

    margin-top: 2px;

    color:
        var(--muted-dark);

    font-size: 9px;
}

.player-awards {
    display: flex;

    align-items: center;

    gap: 4px;
}

.winner-badge {
    width: 25px;
    height: 25px;

    display: inline-flex;

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

    border-radius: 7px;

    font-size: 12px;
}

.winner-badge.fons {
    border:
        1px solid rgba(255, 209, 102, .22);

    background:
        rgba(255, 209, 102, .07);
}

.winner-badge.paws {
    border:
        1px solid var(--accent-border);

    background:
        var(--accent-soft);
}


/* RESULT */

.match-result {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 6px;

    padding:
        0 8px 8px;
}

.match-result > div {
    min-width: 0;

    padding:
        8px;

    border:
        1px solid #292f3d;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, .018);
}

.match-result span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--muted);

    font-size: 8px;

    text-transform: uppercase;
}

.match-result strong {
    display: block;

    overflow: hidden;

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* BRANCH BAN */

.branch-ban {
    margin:
        0 8px 8px;

    border:
        1px solid #292f3d;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, .018);
}

.branch-ban summary {
    padding:
        8px;

    color:
        var(--muted);

    font-size: 9px;

    cursor: pointer;

    list-style: none;
}

.branch-ban summary::-webkit-details-marker {
    display: none;
}

.branch-ban summary span {
    float: right;

    padding:
        1px 5px;

    border-radius: 5px;

    color:
        #aeb6c8;

    background:
        #1b202c;
}

.branch-ban-list {
    display: flex;

    gap: 4px;

    flex-wrap: wrap;

    padding:
        0 8px 8px;
}

.branch-ban-list span {
    padding:
        3px 5px;

    border:
        1px solid #303647;

    border-radius: 5px;

    color:
        #8992a5;

    font-size: 8px;
}


/* ACTION */

.match-actions {
    padding:
        0 8px 8px;
}

.match-actions button {
    width: 100%;
}

.match-waiting {
    display: block;

    padding:
        8px;

    color:
        var(--muted-dark);

    font-size: 9px;

    text-align: center;
}


/* EMPTY */

.bracket-empty {
    max-width: 500px;

    padding:
        35px;

    text-align: center;
}

.empty-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin:
        0 auto 15px;

    border:
        1px solid var(--accent-border);

    border-radius: 13px;

    color:
        var(--accent);

    background:
        var(--accent-soft);

    font-size: 20px;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .bracket-overview {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .bracket-overview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .bracket-shell {
        padding: 12px;
    }

    .bracket-flow {
        gap: 32px;
    }

    .bracket-round {
        width: 275px;

        flex-basis: 275px;
    }

}
/* =========================================================
   DRAFT
   ========================================================= */

.draft-header-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;

    padding: 15px 17px;

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

    background:
        linear-gradient(
            135deg,
            rgba(168, 121, 255, .07),
            rgba(255, 255, 255, .015)
        );
}

.draft-match-info {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.draft-match-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border: 1px solid var(--accent-border);
    border-radius: 11px;

    color: var(--accent);

    background: var(--accent-soft);

    font-size: 18px;
}

.draft-match-info > div:last-child {
    min-width: 0;
}

.draft-label {
    display: block;

    margin-bottom: 4px;

    color: var(--muted-dark);

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

    letter-spacing: 1px;
}

.draft-match-info strong {
    display: block;

    overflow: hidden;

    font-size: 14px;

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


/* SUMMARY */

.draft-summary {
    display: flex;

    flex-shrink: 0;

    gap: 7px;
}

.draft-summary > div {
    min-width: 75px;

    padding: 7px 10px;

    border: 1px solid #292f40;
    border-radius: 8px;

    background: rgba(0, 0, 0, .13);
}

.draft-summary span {
    display: block;

    color: var(--muted-dark);

    font-size: 8px;

    text-transform: uppercase;
}

.draft-summary strong {
    display: block;

    margin-top: 2px;

    font-size: 12px;
}


/* BANS */

.draft-ban-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 16px;

    padding: 11px 14px;

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

    background: rgba(255, 255, 255, .015);
}

.draft-ban-panel.has-bans {
    border-color: rgba(255, 111, 135, .20);

    background: rgba(255, 111, 135, .025);
}

.draft-ban-title {
    display: flex;
    align-items: center;

    gap: 9px;
}

.draft-ban-title > span {
    font-size: 15px;
}

.draft-ban-title strong {
    display: block;

    font-size: 11px;
}

.draft-ban-title small {
    display: block;

    margin-top: 2px;

    color: var(--muted-dark);

    font-size: 9px;
}

.draft-ban-list {
    display: flex;

    justify-content: flex-end;

    gap: 5px;

    flex-wrap: wrap;
}

.draft-ban-list > span {
    padding: 4px 7px;

    border: 1px solid rgba(255, 111, 135, .22);
    border-radius: 6px;

    color: #d995a2;

    background: rgba(255, 111, 135, .05);

    font-size: 9px;
}

.draft-ban-list .draft-no-bans {
    color: var(--muted-dark);

    border-color: #292f40;

    background: transparent;
}


/* PLAYERS */

.draft-players {
    display: grid;

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

    gap: 13px;
}

.draft-player-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 14px;

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

    background:
        linear-gradient(
            180deg,
            #11151f,
            #0d1018
        );

    transition:
        border-color .16s ease,
        transform .16s ease;
}

.draft-player-card:hover {
    border-color: #3a4256;

    transform: translateY(-2px);
}

.draft-player-card.ready {
    border-color: rgba(111, 224, 168, .22);
}


/* PLAYER HEADER */

.draft-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}

.draft-player-identity {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}

.draft-player-avatar {
    width: 35px;
    height: 35px;

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

    flex-shrink: 0;

    border: 1px solid #343b4d;
    border-radius: 9px;

    color: #d8ddea;

    background: #191d28;

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

.draft-player-card.ready
.draft-player-avatar {
    color: #9be9bf;

    border-color: rgba(111, 224, 168, .28);

    background: rgba(111, 224, 168, .07);
}

.draft-player-number {
    margin-bottom: 2px;

    color: var(--muted-dark);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: .8px;
}

.draft-player-head h2 {
    margin: 0;

    overflow: hidden;

    font-size: 14px;

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


/* READY STATUS */

.draft-ready {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    flex-shrink: 0;

    padding: 4px 6px;

    border-radius: 6px;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .5px;
}

.draft-ready i {
    width: 5px;
    height: 5px;

    border-radius: 50%;
}

.draft-ready.ok {
    color: #8ee2b5;

    background: rgba(111, 224, 168, .06);
}

.draft-ready.ok i {
    background: var(--ok);
}

.draft-ready.waiting {
    color: #b5a0dd;

    background: rgba(168, 121, 255, .06);
}

.draft-ready.waiting i {
    background: var(--accent);
}


/* SELECTED CHARACTERS */

.draft-team {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-height: 112px;
}

.draft-character {
    display: flex;
    align-items: center;

    gap: 8px;

    min-height: 49px;

    padding: 5px 7px;

    border: 1px solid #272d3d;
    border-radius: 8px;

    background: #090c12;
}

.draft-character-image {
    width: 37px;
    height: 37px;

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

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 7px;

    color: #aab2c5;

    background: #1a1f2c;

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

.draft-character-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.draft-character-info {
    min-width: 0;

    flex: 1;
}

.draft-character-info strong {
    display: block;

    overflow: hidden;

    font-size: 11px;

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

.draft-character-info div {
    margin-top: 2px;

    color: var(--muted-dark);

    font-size: 8px;
}

.draft-rarity {
    flex-shrink: 0;

    padding: 3px 5px;

    border: 1px solid #343b4d;
    border-radius: 5px;

    color: #9fa8ba;

    font-size: 8px;
}


/* EMPTY TEAM */

.draft-no-character {
    min-height: 108px;

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

    gap: 10px;

    padding: 15px;

    border: 1px dashed #303647;
    border-radius: 9px;

    color: var(--muted);

    background: rgba(255, 255, 255, .01);
}

.draft-no-character-icon {
    width: 31px;
    height: 31px;

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

    flex-shrink: 0;

    border: 1px solid #353c50;
    border-radius: 8px;

    color: var(--accent);

    background: var(--accent-soft);

    font-size: 16px;
}

.draft-no-character strong {
    display: block;

    color: #aeb6c7;

    font-size: 10px;
}

.draft-no-character span {
    display: block;

    margin-top: 2px;

    color: var(--muted-dark);

    font-size: 8px;
}


/* PROGRESS */

.draft-team-progress {
    margin-top: 12px;
}

.draft-progress-label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 5px;

    color: var(--muted-dark);

    font-size: 8px;

    text-transform: uppercase;
}

.draft-progress-label strong {
    color: #a9b1c2;
}

.draft-progress {
    height: 3px;

    overflow: hidden;

    border-radius: 10px;

    background: #252a38;
}

.draft-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--accent);
}

.draft-player-card.ready
.draft-progress span {
    background: var(--ok);
}


/* VALIDATION */

.draft-validation {
    margin: 10px 0;

    flex: 1;
}

.draft-errors {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.draft-errors > div {
    display: flex;

    gap: 6px;

    color: #c98b98;

    font-size: 8px;

    line-height: 1.4;
}

.draft-errors > div > span {
    color: var(--danger);

    font-weight: 900;
}

.draft-valid {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #82cfa7;

    font-size: 8px;
}

.draft-valid span {
    font-weight: 900;
}


/* BUTTON */

.draft-select-button {
    width: 100%;

    margin-top: auto;
}


/* FOOTER */

.draft-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 15px;

    padding: 13px 14px;

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

    background: rgba(255, 255, 255, .015);
}

.draft-footer-status {
    display: flex;
    align-items: center;

    gap: 9px;
}

.draft-footer-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--accent);
}

.draft-footer-dot.ready {
    background: var(--ok);

    box-shadow:
        0 0 8px
        rgba(111, 224, 168, .35);
}

.draft-footer-status strong {
    display: block;

    font-size: 10px;
}

.draft-footer-status span {
    display: block;

    margin-top: 2px;

    color: var(--muted-dark);

    font-size: 8px;
}


/* DRAFT EMPTY */

.draft-empty {
    max-width: 480px;

    padding: 34px;

    text-align: center;
}


/* RESPONSIVE */

@media (max-width: 850px) {

    .draft-header-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .draft-summary {
        width: 100%;
    }

    .draft-summary > div {
        flex: 1;
    }

    .draft-ban-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .draft-ban-list {
        justify-content: flex-start;
    }

}

@media (max-width: 600px) {

    .draft-players {
        grid-template-columns: 1fr;
    }

    .draft-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .draft-footer .actions {
        width: 100%;
    }

    .draft-footer .actions button {
        flex: 1;
    }

}

/* =========================================================
   RULES
   ========================================================= */

.rule {
    margin:
        7px 0;

    padding:
        11px;

    border:
        1px solid #292f40;

    border-radius: 9px;

    background:
        #0d1119;

    line-height: 1.45;
}

.rule strong {
    display: block;

    margin-bottom: 4px;
}
/* =========================================================
   DRAFT CHARACTER PICKER
   ========================================================= */

.picker-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* HEADER */

.picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 16px;

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

.picker-title-block {
    display: flex;
    align-items: center;

    gap: 12px;
}

.picker-symbol {
    width: 43px;
    height: 43px;

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

    flex-shrink: 0;

    border: 1px solid var(--accent-border);
    border-radius: 11px;

    color: var(--accent);

    background: var(--accent-soft);

    font-size: 19px;
}

.picker-eyebrow {
    margin-bottom: 3px;

    color: var(--accent);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 1.2px;
}

.picker-title-block h2 {
    margin: 0 0 3px;

    font-size: 18px;
}

.picker-title-block .muted {
    font-size: 10px;
}

.picker-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

.picker-counter {
    min-width: 75px;

    padding: 7px 10px;

    border: 1px solid var(--accent-border);
    border-radius: 8px;

    background: var(--accent-soft);
}

.picker-counter span {
    display: block;

    color: #9d87c9;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: .7px;
}

.picker-counter strong {
    display: block;

    margin-top: 2px;

    font-size: 13px;
}

.picker-close {
    width: 36px;
    height: 36px;

    padding: 0;

    font-size: 19px;
}


/* TOOLBAR */

.picker-toolbar {
    display: grid;

    grid-template-columns:
        minmax(200px, 1fr)
        180px
        180px;

    gap: 8px;

    padding: 14px 0;
}

.picker-search {
    position: relative;
}

.picker-search > span {
    position: absolute;

    top: 50%;
    left: 11px;

    z-index: 1;

    color: var(--muted-dark);

    font-size: 16px;

    transform: translateY(-50%);

    pointer-events: none;
}

.picker-search input {
    width: 100%;

    padding-left: 34px;
}


/* SELECTED */

.picker-selected-section {
    padding: 12px;

    border: 1px solid #292f40;
    border-radius: 10px;

    background: rgba(255, 255, 255, .015);
}

.picker-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 9px;
}

.picker-section-label {
    margin-right: 7px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .8px;
}

.picker-section-head small {
    color: var(--muted-dark);

    font-size: 8px;
}

.picker-mini-progress {
    width: 100px;
    height: 3px;

    overflow: hidden;

    border-radius: 10px;

    background: #292e3d;
}

.picker-mini-progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--accent);

    transition: width .18s ease;
}

.picker-selected {
    display: flex;

    gap: 6px;

    flex-wrap: wrap;
}

.picker-selected-chip {
    min-height: 34px;

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

    gap: 6px;

    padding: 4px 7px 4px 4px;

    border-color: var(--accent-border);

    background: var(--accent-soft);

    font-size: 9px;
}

.picker-selected-chip b {
    margin-left: 2px;

    color: #9a84c6;

    font-size: 13px;
}

.picker-chip-avatar {
    width: 25px;
    height: 25px;

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

    overflow: hidden;

    border-radius: 6px;

    background: #242a39;

    font-size: 8px;
}

.picker-chip-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.picker-empty-slot {
    min-height: 34px;

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

    gap: 5px;

    padding: 4px 9px;

    border: 1px dashed #343a4b;
    border-radius: 8px;

    color: #555e71;

    font-size: 8px;
}

.picker-empty-slot span {
    color: #777f92;

    font-size: 12px;
}


/* CONTENT HEADER */

.picker-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin: 17px 0 9px;
}

.picker-content-head strong {
    font-size: 12px;
}

.picker-content-head > div > span {
    margin-left: 7px;

    color: var(--muted-dark);

    font-size: 8px;
}

.picker-hint {
    color: var(--muted-dark);

    font-size: 8px;
}


/* GRID */

.picker-grid {
    display: grid;

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

    gap: 9px;
}

.picker-character {
    min-height: 0;

    overflow: hidden;

    padding: 0;

    border: 1px solid #292f40;
    border-radius: 11px;

    color: var(--text);

    background: #0d1119;

    text-align: left;

    transition:
        border-color .15s ease,
        transform .15s ease,
        background .15s ease;
}

.picker-character:hover:not(:disabled) {
    transform: translateY(-2px);

    border-color: #4a536b;

    background: #111620;
}

.picker-character.selected {
    border-color: var(--accent);

    background: rgba(168, 121, 255, .055);

    box-shadow:
        0 0 0 1px
        rgba(168, 121, 255, .18);
}

.picker-character.locked {
    opacity: .43;

    filter: grayscale(.65);
}

.picker-character.locked.selected {
    opacity: .75;
}

.picker-character:disabled {
    cursor: not-allowed;
}


/* IMAGE */

.picker-character-image {
    position: relative;

    height: 125px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            #353c59,
            #121620 72%
        );
}

.picker-character-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.picker-character-overlay {
    position: absolute;

    inset: 50% 0 0;

    background:
        linear-gradient(
            transparent,
            rgba(13, 17, 25, .96)
        );
}

.picker-character-letter {
    position: absolute;

    inset: 0;

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

    color: #737d94;

    font-size: 34px;
    font-weight: 900;
}

.picker-selected-mark,
.picker-lock-mark {
    position: absolute;

    top: 8px;
    left: 8px;

    z-index: 2;

    width: 25px;
    height: 25px;

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

    border-radius: 7px;

    font-size: 11px;
}

.picker-selected-mark {
    color: #fff;

    border: 1px solid #b48dff;

    background: rgba(139, 92, 226, .92);
}

.picker-lock-mark {
    border: 1px solid rgba(255, 111, 135, .3);

    background: rgba(21, 18, 25, .88);

    font-size: 9px;
}

.picker-card-rarity {
    position: absolute;

    top: 8px;
    right: 8px;

    z-index: 2;

    padding: 3px 5px;

    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 5px;

    color: #fff;

    background: rgba(9, 11, 17, .75);

    font-size: 8px;
    font-weight: 850;
}


/* CARD BODY */

.picker-character-body {
    padding: 8px 9px 9px;
}

.picker-character-body > strong {
    display: block;

    overflow: hidden;

    font-size: 11px;

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

.picker-character-meta {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-top: 3px;

    overflow: hidden;

    color: var(--muted);

    font-size: 8px;

    white-space: nowrap;
}

.picker-character-meta i {
    color: #454d5f;

    font-style: normal;
}

.picker-card-state {
    margin-top: 7px;

    color: #657086;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .4px;

    text-transform: uppercase;
}

.picker-card-state.selected {
    color: var(--accent);
}

.picker-lock-reason {
    min-height: 20px;

    margin-top: 6px;

    overflow: hidden;

    color: #c78391;

    font-size: 7px;

    line-height: 1.35;
}


/* EMPTY SEARCH */

.picker-nothing {
    grid-column: 1 / -1;

    padding: 35px;

    color: var(--muted);

    text-align: center;
}

.picker-nothing > div {
    margin-bottom: 8px;

    color: #596174;

    font-size: 25px;
}

.picker-nothing strong {
    display: block;

    color: #9ca5b7;

    font-size: 11px;
}

.picker-nothing span {
    display: block;

    margin-top: 4px;

    color: var(--muted-dark);

    font-size: 8px;
}


/* FOOTER */

.picker-footer {
    position: sticky;

    bottom: -21px;

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

    gap: 16px;

    margin: 18px -21px -21px;

    padding: 13px 21px;

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

    background:
        rgba(16, 20, 30, .96);

    backdrop-filter: blur(12px);
}

.picker-validation {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}

.picker-validation-icon {
    width: 28px;
    height: 28px;

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

    flex-shrink: 0;

    border-radius: 7px;

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

.picker-validation.valid
.picker-validation-icon {
    color: var(--ok);

    border: 1px solid rgba(111, 224, 168, .25);

    background: rgba(111, 224, 168, .06);
}

.picker-validation.invalid
.picker-validation-icon {
    color: var(--danger);

    border: 1px solid rgba(255, 111, 135, .25);

    background: rgba(255, 111, 135, .06);
}

.picker-validation strong {
    display: block;

    font-size: 9px;
}

.picker-validation small {
    display: block;

    max-width: 480px;

    margin-top: 2px;

    overflow: hidden;

    color: var(--muted-dark);

    font-size: 8px;

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


/* RESPONSIVE */

@media (max-width: 1000px) {

    .picker-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}

@media (max-width: 750px) {

    .picker-toolbar {
        grid-template-columns:
            1fr 1fr;
    }

    .picker-search {
        grid-column: 1 / -1;
    }

    .picker-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 550px) {

    .picker-header {
        align-items: stretch;
        flex-direction: column;
    }

    .picker-header-actions {
        justify-content: space-between;
    }

    .picker-toolbar {
        grid-template-columns: 1fr;
    }

    .picker-search {
        grid-column: auto;
    }

    .picker-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .picker-hint {
        display: none;
    }

    .picker-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .picker-footer .actions {
        width: 100%;
    }

    .picker-footer .actions button {
        flex: 1;
    }

}

/* =========================================================
   MODAL
   ========================================================= */

.modal {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: none;

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

    padding: 22px;

    background:
        rgba(0, 0, 0, .72);

    backdrop-filter:
        blur(5px);
}

.modal.show {
    display: flex;
}

.modalbox {
    width: 100%;

    max-width: 1100px;

    max-height: 90vh;

    overflow: auto;

    padding: 21px;

    border:
        1px solid #363d50;

    border-radius: 15px;

    background:
        #10141e;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .55);
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-panel {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--muted);
}

.loading-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--accent);

    animation:
        loadingPulse 1.2s infinite;
}

@keyframes loadingPulse {
    50% {
        opacity: .3;

        transform:
            scale(.8);
    }
}


/* =========================================================
   HELPERS
   ========================================================= */

.hidden {
    display: none !important;
}


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

@media (max-width: 1250px) {

    .chargrid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 1000px) {

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

    .side {
        position: relative;

        height: auto;

        border-right: 0;

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

    .brand {
        padding-bottom: 15px;
    }

    .nav {
        display: grid;

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

    .nav-divider,
    .nav-label {
        display: none;
    }

    .sidefoot {
        display: none;
    }

    .main {
        padding:
            24px 20px 50px;
    }

    .stats,
    .cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 720px) {

    .nav {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .chargrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .top {
        flex-direction: column;
    }

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

}


@media (max-width: 520px) {

    .main {
        padding:
            18px 12px 40px;
    }

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

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

    .nav button {
        padding:
            8px 9px;
    }

    .title {
        font-size: 26px;
    }

}
.logout-button {
    width: 100%;
    margin-top: auto;
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.03);
    color: #aeb5c7;

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

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.logout-button:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.logout-button span {
    font-size: 17px;
}
/* =========================================================
   PLAYER PROFILE
   ========================================================= */

.player-profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* =========================================================
   PROFILE HERO
   ========================================================= */

.player-profile-hero {
    position: relative;

    display: flex;
    align-items: center;

    gap: 22px;

    overflow: hidden;

    padding: 24px;

    border:
        1px solid var(--accent-border);

    border-radius:
        var(--radius);

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(168, 121, 255, .16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(18, 21, 32, .98),
            rgba(11, 13, 21, .98)
        );

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, .20);
}

.player-profile-hero::after {
    content: "";

    position: absolute;

    top: -90px;
    right: -70px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        rgba(168, 121, 255, .06);

    filter:
        blur(10px);

    pointer-events: none;
}


/* AVATAR */

.player-profile-avatar {
    position: relative;
    z-index: 1;

    width: 92px;
    height: 92px;

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

    flex-shrink: 0;

    border:
        1px solid rgba(168, 121, 255, .55);

    border-radius: 24px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(168, 121, 255, .32),
            rgba(94, 71, 170, .16)
        );

    box-shadow:
        0 12px 35px
        rgba(100, 67, 180, .18);

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

    text-transform: uppercase;
}


/* IDENTITY */

.player-profile-identity {
    position: relative;
    z-index: 1;

    min-width: 0;

    flex: 1;
}

.player-profile-identity h2 {
    margin:
        0 0 6px;

    overflow: hidden;

    color:
        var(--text);

    font-size:
        clamp(23px, 3vw, 31px);

    font-weight: 850;

    letter-spacing: -.5px;

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

.player-profile-role {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        5px 8px;

    border:
        1px solid var(--accent-border);

    border-radius: 7px;

    color:
        #cbb7f5;

    background:
        var(--accent-soft);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.player-profile-contacts {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 11px;
}

.player-profile-contact {
    padding:
        5px 8px;

    border:
        1px solid #2d3446;

    border-radius: 7px;

    color:
        var(--muted);

    background:
        rgba(255, 255, 255, .025);

    font-size: 10px;
}


/* =========================================================
   RATINGS
   ========================================================= */

.player-profile-ratings {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(100px, 1fr));

    gap: 8px;

    flex-shrink: 0;
}

.player-profile-rating {
    min-width: 105px;

    padding:
        10px 12px;

    border:
        1px solid #2b3142;

    border-radius: 10px;

    background:
        rgba(6, 8, 13, .48);

    text-align: center;
}

.player-profile-rating span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--muted-dark);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .6px;

    text-transform: uppercase;
}

.player-profile-rating strong {
    color:
        var(--text);

    font-size: 20px;

    font-weight: 900;
}

.player-profile-rating:first-child strong {
    color:
        var(--accent);
}


/* =========================================================
   MAIN STATISTICS
   ========================================================= */

.player-profile-stats {
    display: grid;

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

    gap: 12px;
}

.player-profile-stat {
    position: relative;

    overflow: hidden;

    min-width: 0;

    padding: 17px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 20, 30, .96),
            rgba(13, 16, 24, .96)
        );
}

.player-profile-stat::before {
    content: "";

    position: absolute;

    top: 0;
    left: 17px;

    width: 32px;
    height: 2px;

    border-radius:
        0 0 3px 3px;

    background:
        var(--accent);
}

.player-profile-stat span {
    display: block;

    color:
        var(--muted);

    font-size: 10px;

    font-weight: 700;
}

.player-profile-stat strong {
    display: block;

    margin-top: 8px;

    overflow: hidden;

    color:
        var(--text);

    font-size: 26px;

    font-weight: 900;

    text-overflow: ellipsis;
}


/* =========================================================
   EXTRA STATISTICS
   ========================================================= */

.player-profile-extra {
    display: grid;

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

    gap: 12px;
}

.player-profile-extra-card {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 16px;

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

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .018);
}

.player-profile-extra-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border:
        1px solid #303749;

    border-radius: 9px;

    background:
        #171b26;

    font-size: 17px;
}

.player-profile-extra-card span {
    display: block;

    color:
        var(--muted);

    font-size: 9px;
}

.player-profile-extra-card strong {
    display: block;

    margin-top: 3px;

    font-size: 17px;

    font-weight: 850;
}


/* =========================================================
   MATCH HISTORY
   ========================================================= */

.player-profile-history {
    padding: 18px;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(17, 20, 30, .96),
            rgba(13, 16, 24, .96)
        );
}

.player-profile-history-head {
    display: flex;

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

    gap: 15px;

    margin-bottom: 14px;
}

.player-profile-history-head h2 {
    margin: 0;
}

.player-profile-history-head span {
    color:
        var(--muted);

    font-size: 10px;
}

.player-profile-match {
    display: grid;

    grid-template-columns:
        minmax(150px, 1.4fr)
        repeat(4, minmax(80px, 1fr));

    align-items: center;

    gap: 10px;

    padding:
        11px 12px;

    border:
        1px solid #252b39;

    border-radius: 9px;

    background:
        rgba(0, 0, 0, .12);
}

.player-profile-match +
.player-profile-match {
    margin-top: 7px;
}

.player-profile-match-main strong {
    display: block;

    font-size: 12px;
}

.player-profile-match-main span {
    display: block;

    margin-top: 3px;

    color:
        var(--muted-dark);

    font-size: 9px;
}

.player-profile-match-value {
    min-width: 0;
}

.player-profile-match-value span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--muted-dark);

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;
}

.player-profile-match-value strong {
    display: block;

    overflow: hidden;

    font-size: 11px;

    text-overflow: ellipsis;
}

.player-profile-match-total strong {
    color:
        var(--accent);

    font-size: 13px;
}


/* EMPTY HISTORY */

.player-profile-empty {
    padding:
        28px 18px;

    border:
        1px dashed #303749;

    border-radius: 10px;

    color:
        var(--muted);

    text-align: center;
}


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

@media (max-width: 1050px) {

    .player-profile-hero {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .player-profile-ratings {
        width: 100%;
    }

}


@media (max-width: 800px) {

    .player-profile-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

    .player-profile-match {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .player-profile-match-main {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 560px) {

    .player-profile-hero {
        padding: 18px;
    }

    .player-profile-avatar {
        width: 70px;
        height: 70px;

        border-radius: 18px;

        font-size: 27px;
    }

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

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

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

}\n\n/* =========================================================\n   UNIFIED SIDEBAR LAYOUT\n   Keep the tournament sidebar geometrically identical to\n   profile/tournaments pages so navigation never jumps.\n   ========================================================= */\n@media (min-width: 1001px) {\n    .app {\n        display: block;\n        min-height: 100vh;\n        padding-left: 250px;\n    }\n\n    .side {\n        position: fixed;\n        z-index: 50;\n        inset: 0 auto 0 0;\n        width: 250px;\n        height: 100vh;\n        box-sizing: border-box;\n        padding: 20px 13px 16px;\n        overflow-y: auto;\n        border-right: 1px solid #252a38;\n        background: rgba(9, 11, 17, .98);\n        backdrop-filter: none;\n    }\n\n    .main {\n        width: 100%;\n        min-width: 0;\n    }\n}\n\n/* Shared navigation geometry with app-sidebar.css */\n.side .brand { padding: 5px 8px 24px; }\n.side .nav-label { padding: 0 10px 7px; }\n.side .nav { gap: 3px; }\n.side .nav button {\n    min-height: 41px;\n    gap: 11px;\n    padding: 8px 11px;\n    border-radius: 10px;\n    font-size: 14px;\n}\n.side .nav-icon {\n    width: 20px;\n    display: inline-flex;\n    justify-content: center;\n}\n.side .nav-divider {\n    height: 1px;\n    flex: 0 0 auto;\n    margin: 11px 9px 15px;\n    background: #252a38;\n}\n
/* Current tournament is a collapsible category, shared with the global sidebar. */
.current-toggle .nav-chevron{margin-left:auto;font-size:20px;line-height:1;transition:transform .15s}
.current-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(90deg)}
.tournament-nav-group[hidden]{display:none!important}


/* Match statistics: compact square launcher + popup */
.match-stats-launcher{display:flex;justify-content:flex-end;margin-top:12px}
.match-stats-square{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid #343b4d;border-radius:10px;background:#151a26;color:#e9edf7;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.match-stats-square:hover{transform:translateY(-2px);border-color:#69748e;background:#1b2130}
.match-stats-bars{height:19px;display:flex;align-items:flex-end;gap:3px}
.match-stats-bars i{display:block;width:4px;border-radius:2px 2px 0 0;background:currentColor}
.match-stats-bars i:nth-child(1){height:8px}.match-stats-bars i:nth-child(2){height:14px}.match-stats-bars i:nth-child(3){height:19px}
.modalbox:has(.match-stats-popup){max-width:720px;padding:0;overflow:hidden}
.match-stats-popup{padding:22px;max-height:86vh;overflow:auto}
.match-stats-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.match-stats-modal-head h2{margin:3px 0 0;font-size:24px}
.match-stats-kicker{font-size:11px;letter-spacing:.14em;color:var(--muted,#939bad);font-weight:800}
.match-stats-close{width:38px;height:38px;flex:0 0 auto;padding:0;border:1px solid #343b4d;border-radius:10px;background:#171c28;color:#dce2ee;font-size:25px;line-height:1;cursor:pointer}
.match-stat-list{display:grid;gap:10px}
.match-stat-player{padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.025)}
.match-stat-player-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:12px}
.match-stat-place{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:28px;padding:0 8px;border-radius:8px;background:#202737;font-weight:800}
.match-stat-player-head strong{font-size:15px}.match-stat-total{font-size:17px}.match-stat-total::after{content:' бал.';font-size:10px;color:var(--muted,#939bad);font-weight:600}
.match-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.match-stat-grid div{padding:9px 10px;border-radius:9px;background:rgba(0,0,0,.18)}
.match-stat-grid span{display:block;margin-bottom:4px;font-size:10px;color:var(--muted,#939bad)}
.match-stat-grid b{font-size:13px}
@media(max-width:650px){.match-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modal{padding:10px}.match-stats-popup{padding:16px}}

.tournament-nav-group{margin-top:2px;padding-left:10px;border-left:1px solid rgba(168,121,255,.20)}
.nav-current-caption{display:flex;align-items:center;gap:10px;min-height:34px;padding:5px 12px;color:#7f899f;font-size:11px;font-weight:800;letter-spacing:.35px;text-transform:uppercase}
.nav-current-caption .nav-icon{color:#a879ff}

/* v12 compact independent rankings */
.stats-ranking-card{overflow:hidden}.stats-ranking-head.stats-ranking-toggle{width:100%;border:0;background:transparent;color:inherit;text-align:left;display:flex;align-items:center;gap:12px;cursor:pointer;padding:0}.stats-ranking-head.stats-ranking-toggle>div:nth-child(2){flex:1}.stats-ranking-chevron{font-size:25px;color:#777b89;transition:transform .18s ease}.stats-ranking-card[data-expanded="true"] .stats-ranking-chevron{transform:rotate(90deg)}.stats-ranking-list{margin-top:14px;max-height:520px;overflow-y:auto;overscroll-behavior:contain;padding-right:5px;scrollbar-width:thin}.stats-ranking-list::-webkit-scrollbar{width:6px}.stats-ranking-list::-webkit-scrollbar-thumb{background:#343846;border-radius:99px}.stats-ranking-row{text-decoration:none;color:inherit}.ranking-more{width:100%;margin-top:10px;border:1px solid rgba(255,255,255,.08);background:#11131a;color:#aaaebe;border-radius:9px;padding:9px 12px;cursor:pointer}.ranking-more:hover{color:#fff;border-color:#4d456d}

/* v13 — fully collapsible statistics + per-character rankings */
.stats-ranking-body[hidden],.stats-fold-body[hidden]{display:none!important}
.stats-ranking-body{padding-top:2px}
.stats-fold-card{overflow:hidden}
.stats-fold-head{width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;display:flex;align-items:center;gap:12px;cursor:pointer}
.stats-fold-head>span:nth-child(2){flex:1;min-width:0}.stats-fold-head h2{margin:0 0 4px}.stats-fold-head i{font-style:normal;font-size:25px;color:#777b89;transition:transform .18s ease}
.stats-fold-card[data-expanded="true"] .stats-fold-head i{transform:rotate(90deg)}
.stats-fold-body{padding-top:16px}
.character-ranking-picker{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--muted,#939bad);font-size:12px;font-weight:700}
.character-ranking-picker select{min-width:220px;max-width:100%;padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#11131a;color:#fff}
.character-ranking-list{max-height:540px;overflow-y:auto;overscroll-behavior:contain;padding-right:5px;scrollbar-width:thin}
.character-ranking-list::-webkit-scrollbar{width:6px}.character-ranking-list::-webkit-scrollbar-thumb{background:#343846;border-radius:99px}
.character-ranking-row{display:grid;grid-template-columns:48px minmax(160px,1.5fr) repeat(3,minmax(90px,1fr));gap:10px;align-items:center;padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.055);color:inherit;text-decoration:none}
.character-ranking-row:hover{background:rgba(255,255,255,.025)}.character-ranking-player{display:flex;min-width:0;flex-direction:column;gap:3px}.character-ranking-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-ranking-player small,.character-ranking-row>span:not(.character-ranking-player) small{display:block;color:var(--muted,#939bad);font-size:9px}.character-ranking-row>span:not(.character-ranking-player) b{display:block;margin-top:3px;font-size:13px}
@media(max-width:760px){.character-ranking-row{grid-template-columns:42px 1fr auto}.character-ranking-row>span:nth-last-child(2),.character-ranking-row>span:nth-last-child(3){display:none}.character-ranking-picker{align-items:stretch;flex-direction:column}.character-ranking-picker select{width:100%}}