/* =========================================================
   CUBE TIMER - CODIS
   CLEAN / MINIMAL
========================================================= */


/* =========================================================
   CORES
========================================================= */

:root {

    color-scheme: dark;

    --bg: #071827;
    --sidebar: #061421;

    --card: #0c1d2b;
    --card-hover: #102535;

    --border:
        rgba(255, 255, 255, 0.07);

    --text: #f4f7fa;

    --muted: #7891a6;

    --green: #38dc83;
    --red: #ff606b;
    --yellow: #f4c95d;

    --blue: #3195d5;
}


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

* {
    box-sizing: border-box;
}


html,
body {

    width: 100%;
    height: 100%;

}


body {

    margin: 0;

    overflow: hidden;

    background: var(--bg);

    color: var(--text);

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

}


button,
input {

    font: inherit;

}


button {

    cursor: pointer;

}


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

.app {

    width: 100%;
    height: 100vh;

    display: flex;

    overflow: hidden;

}


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

.sidebar {

    width: 220px;

    flex:
        0
        0
        220px;

    height: 100vh;

    padding:
        24px
        14px
        16px;

    display: flex;
    flex-direction: column;

    background: var(--sidebar);

    border-right:
        1px solid
        rgba(255,255,255,.05);

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        0
        8px
        24px;

    margin-bottom: 22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}


.logo-icon {

    width: 40px;
    height: 40px;

    overflow: hidden;

    flex-shrink: 0;

    border-radius: 10px;

}


.logo-icon img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.logo-text {

    display: flex;
    flex-direction: column;

}


.logo-text strong {

    font-size: 16px;

    color: #fff;

}


.logo-text span {

    margin-top: 2px;

    font-size: 11px;

    color: #819eb5;

}


/* =========================================================
   MENU
========================================================= */

.menu {

    display: flex;
    flex-direction: column;

    gap: 8px;

}


.menu-item {

    min-height: 45px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        0
        14px;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    color: #aac0d1;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        .15s ease;

}


.menu-item:hover {

    color: #fff;

    background:
        rgba(38, 139, 198, .08);

}


.menu-item.ativo {

    color: #fff;

    background: #0d2a3c;

    border-color: #16445f;

}


.menu-icon {

    width: 22px;

    flex:
        0
        0
        22px;

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

}


.menu-text {

    white-space: nowrap;

}


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

.sidebar-footer {

    margin-top: auto;

    padding:
        10px
        8px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #7899b1;

    font-size: 11px;

}


.status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #32dc86;

    box-shadow:
        0 0 8px
        rgba(50,220,134,.75);

}


/* =========================================================
   CONTEÚDO
========================================================= */

.conteudo {

    flex: 1;

    min-width: 0;

    height: 100vh;

    padding:
        24px
        40px
        14px;

    overflow: hidden;

}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {

    height: 58px;

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

    margin-bottom: 10px;

}


.pagina-label {

    display: block;

    margin-bottom: 3px;

    color: #459bd0;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;

}


.topbar h1 {

    margin: 0;

    font-size: 25px;

    font-weight: 650;

}


.topbar-direita {

    display: flex;
    align-items: center;

    gap: 12px;

}


/* =========================================================
   MODO
========================================================= */

.mode-card {

    display: flex;

    padding: 3px;

    border-radius: 10px;

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

}


.mode-btn {

    padding:
        7px
        12px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--muted);

    font-size: 12px;

}


.mode-btn.active {

    color: #fff;

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

}


/* =========================================================
   RELÓGIO
========================================================= */

.relogio {

    padding:
        8px
        12px;

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

    border-radius: 9px;

    color: #83a6bf;

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

    font-size: 12px;

    font-variant-numeric:
        tabular-nums;

}


/* =========================================================
   LAYOUT CUBE TIMER
========================================================= */

.cube-page {
    grid-template-rows:
        60px
        minmax(280px, 1fr)
        auto
        auto
        minmax(130px, 180px);
}


/* =========================================================
   SCRAMBLE CLEAN
========================================================= */

.scramble-bar {
    position: relative;

    min-width: 0;

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

    gap: 14px;

    padding:
        0
        16px;
}


.scramble-text {

    max-width:
        calc(100% - 110px);

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    text-align: center;

    color: #e8f1f6;

    font-size:
        clamp(
            18px,
            1.7vw,
            24px
        );

    font-weight: 650;

    letter-spacing: 0.025em;

    word-spacing: 0.18em;

}


.scramble-button {

    width: 32px;
    height: 32px;

    flex:
        0
        0
        32px;

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

    border:
        1px solid
        transparent;

    border-radius: 8px;

    background: transparent;

    color: #8ca6ba;

    font-size: 14px;

    transition:
        .15s ease;

}


.scramble-button:hover {

    color: #fff;

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

    border-color:
        var(--border);

}


.scramble-button.primary {

    color: #5aa9dc;

}


.scramble-status {

    display: none;

}


/* =========================================================
   TIMER + CUBO
========================================================= */

.main-timer-card {

    min-height: 0;

    display: grid;

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

    align-items: stretch;

    gap: 12px;

    padding:
        14px
        18px;

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

    border-radius: 15px;

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

}


/* =========================================================
   TIMER
========================================================= */

.timer-zone {

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    user-select: none;

}


.phase-label {

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

}


.timer-display {

    color: #fff;

    font-size:
        clamp(
            6rem,
            11vw,
            11rem
        );

    line-height: .88;

    font-weight: 650;

    letter-spacing: -.065em;

    font-variant-numeric:
        tabular-nums;

    transition:
        color .1s ease,
        transform .1s ease;

}


.timer-display.holding {

    color: var(--red);

}


.timer-display.ready {

    color: var(--green);

    transform:
        scale(1.015);

}


.timer-display.inspection {

    color: var(--yellow);

}


.inspection-hint {

    margin-top: 16px;

    color: #637f94;

    font-size: 12px;

}


/* =========================================================
   CUBO
========================================================= */

.cube-preview {

    min-width: 0;

    position: relative;

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

    border-left:
        1px solid
        rgba(255,255,255,.05);

    cursor: grab;

}


.cube-preview:active {

    cursor: grabbing;

}


.cube-preview twisty-player {

    width: 100%;
    height: 100%;

    min-height: 250px;

    cursor: grab;

}


.cube-preview twisty-player:active {

    cursor: grabbing;

}


.cube-help {

    position: absolute;

    left: 50%;
    bottom: 4px;

    transform:
        translateX(-50%);

    color: #526b7d;

    font-size: 10px;

    white-space: nowrap;

    pointer-events: none;

}


/* =========================================================
   SETTINGS
========================================================= */

.settings-card,
.manual-card {

    padding:
        9px
        14px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 12px;

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

    border-radius: 12px;

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

}


.switch-row,
.key-setting {

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

    gap: 12px;

}


.switch-row > span:first-child,
.key-setting > div {

    display: flex;
    flex-direction: column;

    gap: 1px;

}


.switch-row b,
.key-setting b {

    font-size: 12px;

}


.switch-row small,
.key-setting small {

    color: var(--muted);

    font-size: 10px;

}


/* =========================================================
   SWITCH
========================================================= */

.switch-row input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.switch {

    width: 40px;
    height: 22px;

    position: relative;

    flex:
        0
        0
        40px;

    border-radius: 99px;

    background: #293a46;

    transition:
        .2s ease;

}


.switch::after {

    content: "";

    width: 16px;
    height: 16px;

    position: absolute;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: #fff;

    transition:
        .2s ease;

}


.switch-row input:checked + .switch {

    background: var(--green);

}


.switch-row input:checked + .switch::after {

    transform:
        translateX(18px);

}


/* =========================================================
   BOTÕES
========================================================= */

.secondary-btn {

    padding:
        6px
        10px;

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

    border-radius: 8px;

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

    color: #becfdc;

    font-size: 11px;

}


.secondary-btn:hover {

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

}


.secondary-btn.listening {

    color: var(--green);

    border-color: var(--green);

}


/* =========================================================
   MANUAL
========================================================= */

.manual-card {

    grid-template-columns:
        1fr
        auto;

}


.small {

    margin:
        3px
        0
        0;

    color: var(--muted);

    font-size: 10px;

}


.manual-entry {

    display: flex;

    gap: 7px;

}


.manual-entry input {

    width: 180px;

    padding:
        7px
        10px;

    outline: none;

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

    border-radius: 8px;

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

    color: #fff;

}


.manual-entry input:focus {

    border-color:
        rgba(80,160,210,.45);

}


.manual-entry button {

    padding:
        7px
        11px;

    border: 0;

    border-radius: 8px;

    background: #267bab;

    color: #fff;

}


.error {

    grid-column:
        1 / -1;

    color: var(--red);

    font-size: 11px;

}


.hidden {

    display:
        none
        !important;

}


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

.stats-grid {

    display: grid;

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

    gap: 7px;

}


.stat {

    min-width: 0;

    padding:
        8px
        11px;

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

    border-radius: 10px;

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

}


.stat span {
    display: block;

    color: #718da2;

    font-size: 12px;
}

.stat strong {
    display: block;

    margin-top: 4px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #e8f1f6;

    font-size: 30px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    line-height: 1.05;
}

.stat small {
    display: block;

    margin-top: 4px;

    overflow: hidden;

    color: #536c7e;

    font-size: 12px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


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

.history-card {

    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        10px
        12px;

    overflow: hidden;

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

    border-radius: 12px;

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

}


.history-head {

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

    flex:
        0
        0
        auto;

}


.history-head h2 {

    margin: 0;

    color: #d7e4ec;

    font-size: 13px;

    font-weight: 600;

}


.danger-btn {

    padding:
        5px
        8px;

    border:
        1px solid
        rgba(255,90,100,.17);

    border-radius: 7px;

    background:
        rgba(255,90,100,.06);

    color: #d96a73;

    font-size: 10px;

}


.history-list {

    min-height: 0;

    margin-top: 7px;

    padding-right: 4px;

    display: grid;

    align-content: start;

    gap: 5px;

    overflow-y: auto;

    overscroll-behavior: contain;

}


.history-list::-webkit-scrollbar {

    width: 6px;

}


.history-list::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background: #2a3b48;

}


.history-row {

    min-height: 37px;

    display: grid;

    grid-template-columns:
        42px
        minmax(90px,1fr)
        minmax(110px,1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding:
        5px
        7px;

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

    border-radius: 8px;

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

}


.history-number,
.history-meta {

    color: #5d7587;

    font-size: 10px;

}


.history-time {

    font-size: 14px;

    font-weight: 600;

    font-variant-numeric:
        tabular-nums;

}


.history-actions {

    display: flex;

    gap: 4px;

}


.row-action {

    padding:
        4px
        6px;

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

    border-radius: 6px;

    background: transparent;

    color: #92a9ba;

    font-size: 9px;

}


.row-action:hover {

    color: #fff;

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

}


.row-action.penalty {

    color: var(--yellow);

}


.row-action.dnf,
.row-action.delete {

    color: var(--red);

}


.row-action.active {

    border-color: currentColor;

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

}


.empty {

    padding: 20px;

    text-align: center;

    color: #526d80;

    font-size: 11px;

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1100px) {

    .conteudo {

        padding:
            20px
            20px
            10px;

    }


    .main-timer-card {

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

    }


    .timer-display {

        font-size:
            clamp(
                5rem,
                11vw,
                9rem
            );

    }

}


@media (max-width: 900px) {

    .sidebar {

        width: 72px;

        flex-basis: 72px;

        padding:
            18px
            8px;

    }


    .logo {

        justify-content: center;

        padding:
            0
            0
            18px;

    }


    .logo-text {

        display: none;

    }


    .menu-item {

        justify-content: center;

        padding: 0;

    }


    .menu-text {

        display: none;

    }


    .sidebar-footer {

        justify-content: center;

    }


    .sidebar-footer span {

        display: none;

    }


    .main-timer-card {

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

    }


    .stats-grid {

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

    }

}


@media (max-width: 700px) {

    .sidebar {

        width: 58px;

        flex-basis: 58px;

        padding:
            12px
            5px;

    }


    .logo-icon {

        width: 34px;
        height: 34px;

    }


    .conteudo {

        padding:
            10px
            8px
            6px;

    }


    .topbar {

        height: 45px;

    }


    .topbar h1 {

        font-size: 19px;

    }


    .pagina-label {

        display: none;

    }


    .relogio {

        display: none;

    }


    .cube-page {

        height:
            calc(100vh - 61px);

        grid-template-rows:
            40px
            minmax(230px,1fr)
            auto
            auto
            minmax(110px,160px);

        gap: 6px;

    }


    .main-timer-card {

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

        padding:
            8px;

        gap: 4px;

    }


    .cube-preview twisty-player {

        min-height: 180px;

    }


    .cube-help {

        display: none;

    }


    .timer-display {

        font-size:
            clamp(
                4rem,
                15vw,
                6rem
            );

    }


    .inspection-hint {

        font-size: 10px;

    }


    .settings-card,
    .manual-card {

        grid-template-columns:
            1fr;

        padding:
            7px
            9px;

    }


    .manual-entry {

        width: 100%;

    }


    .manual-entry input {

        width: 100%;

    }


    .stats-grid {

        gap: 4px;

    }


    .stat {

        padding:
            6px
            7px;

    }


    .stat strong {

        font-size: 14px;

    }


    .history-row {

        grid-template-columns:
            30px
            1fr
            auto;

    }


    .history-meta {

        display: none;

    }

}


@media (max-width: 500px) {

    .main-timer-card {

        grid-template-columns:
            1fr
            120px;

    }


    .cube-preview twisty-player {

        min-height: 140px;

    }


    .scramble-text {

        font-size: 11px;

    }


    .stats-grid {

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

    }

}

.key-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.secondary-btn.active {
    color: var(--green);
    border-color: var(--green);

    background:
        rgba(54, 214, 126, 0.08);
}
.secondary-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* =========================================================
   CONTROLO TÁCTIL / TELEMÓVEL
========================================================= */

.timer-zone {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.cube-preview,
.cube-preview twisty-player {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (pointer: coarse) {
    .timer-zone {
        cursor: pointer;
    }

    .timer-zone:active .timer-display {
        transform: scale(.985);
    }

    .cube-help {
        display: inline-block;
    }
}


/* =========================================================
   MOBILE TOUCH TIMER
   ========================================================= */
@media (pointer: coarse) {
  .timer-zone {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
}


/* =========================================================
   SCRAMBLE COMPLETO NO TELEMÓVEL
========================================================= */

@media (max-width: 700px) {

    .cube-page {
        grid-template-rows:
            auto
            minmax(230px, 1fr)
            auto
            auto
            minmax(110px, 160px);
    }

    .scramble-bar {
        min-height: 54px;
        align-items: center;
        gap: 8px;
        padding: 6px 4px;
    }

    .scramble-text {
        flex: 1 1 auto;
        max-width: none;

        overflow: visible;
        white-space: normal;
        text-overflow: clip;

        overflow-wrap: anywhere;
        word-break: normal;

        line-height: 1.35;

        font-size:
            clamp(
                13px,
                3.5vw,
                16px
            );
    }

    .scramble-button {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
    }
}


@media (max-width: 500px) {

    .scramble-text {
        font-size:
            clamp(
                12px,
                3.4vw,
                15px
            );
    }

}


/* =========================================================
   CUBE TIMER PARTY
========================================================= */

.party-top-btn {
    min-height: 34px;
    padding: 0 12px;

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

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

    color: #b9d3e5;
    background: rgba(255,255,255,.025);

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

    cursor: pointer;
    transition: .15s ease;
}

.party-top-btn:hover,
.party-top-btn.active {
    color: #fff;
    border-color: #22577a;
    background: rgba(38,139,198,.12);
}

.party-top-btn.active {
    color: #69c5ff;
}


.party-bar {
    min-height: 54px;

    margin-bottom: 8px;
    padding: 7px 10px;

    display: flex;
    align-items: center;

    gap: 12px;

    border: 1px solid #16445f;
    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(13,42,60,.94),
            rgba(8,28,41,.88)
        );
}

.party-bar.hidden {
    display: none;
}

.party-room-main {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 205px;
}

.party-room-main > div {
    display: flex;
    flex-direction: column;
}

.party-room-main small,
.party-round-box small {
    color: #5d88a5;

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

    letter-spacing: .16em;
}

.party-room-main strong {
    color: #e9f5fc;

    font-size: 12px;
    letter-spacing: .04em;
}

#partyRoomCode {
    color: #69c5ff;
    letter-spacing: .14em;
}

.party-live-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #35dd88;

    box-shadow:
        0 0 8px
        rgba(53,221,136,.7);
}

.party-mini-btn,
.party-leave-btn {
    padding: 6px 8px;

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

    background: rgba(255,255,255,.025);
    color: #91afc4;

    font-size: 10px;

    cursor: pointer;
}

.party-mini-btn:hover {
    color: #fff;
}

.party-leave-btn {
    margin-left: auto;

    color: #d68d93;
    border-color: rgba(200,84,94,.22);
}

.party-leave-btn:hover {
    color: #ffb7bd;
    background: rgba(200,84,94,.08);
}


.party-members {
    flex: 1;
    min-width: 0;

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

    gap: 7px;
}

.party-member {
    min-width: 0;

    padding: 5px 8px;

    display: flex;
    align-items: center;

    gap: 7px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;

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

.party-member.waiting-slot {
    color: #557084;
    border-style: dashed;
    justify-content: center;

    font-size: 10px;
}

.party-avatar {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    border-radius: 50%;

    object-fit: cover;

    background: #0b2434;
}

.party-member-info {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.party-member-name {
    overflow: hidden;

    color: #dcebf4;

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

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

.party-member-status {
    overflow: hidden;

    color: #65879e;

    font-size: 9px;

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

.party-member-result {
    flex: 0 0 auto;

    color: #64dca1;

    font-size: 13px;
    font-weight: 750;

    font-variant-numeric: tabular-nums;
}

.party-member-result.dnf {
    color: #e37e87;
}


.party-round-box {
    min-width: 42px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.party-round-box strong {
    color: #fff;

    font-size: 17px;
    font-variant-numeric: tabular-nums;
}


/* MODAL */

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

    z-index: 10000;

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

    padding: 20px;
}

.party-modal.hidden {
    display: none;
}

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

    background:
        rgba(2,10,15,.78);

    backdrop-filter:
        blur(8px);
}

.party-modal-card {
    position: relative;

    width: min(460px, 100%);

    padding: 26px;

    border: 1px solid #17435d;
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #0c2637,
            #081b28
        );

    box-shadow:
        0 28px 90px
        rgba(0,0,0,.46);
}

.party-modal-close {
    position: absolute;

    top: 9px;
    right: 11px;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 8px;

    color: #7798ad;
    background: transparent;

    font-size: 24px;

    cursor: pointer;
}

.party-modal-close:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
}

.party-modal-icon {
    margin-bottom: 8px;

    font-size: 30px;
}

.party-modal-card h2 {
    margin:
        0
        0
        8px;

    color: #fff;

    font-size: 23px;
}

.party-modal-description {
    margin:
        0
        0
        16px;

    color: #7fa1b8;

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

.party-auth-status {
    margin-bottom: 15px;
    padding: 9px 10px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;

    color: #8fafc5;
    background: rgba(255,255,255,.025);

    font-size: 11px;
}

.party-auth-status.ok {
    color: #6edba6;
}

.party-auth-status.error {
    color: #e68d95;
}


.party-modal-actions {
    display: grid;

    gap: 11px;
}

.party-main-action {
    min-height: 42px;

    border: 1px solid #21628a;
    border-radius: 10px;

    color: #fff;
    background: #126492;

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

    cursor: pointer;
}

.party-main-action:hover {
    background: #1775aa;
}

.party-main-action.secondary {
    min-width: 100px;

    background: rgba(255,255,255,.045);
    border-color: var(--border);

    color: #c2d8e7;
}

.party-main-action:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.party-divider {
    display: flex;
    align-items: center;

    color: #527187;

    font-size: 9px;
}

.party-divider::before,
.party-divider::after {
    content: "";

    flex: 1;

    height: 1px;

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

.party-divider span {
    padding: 0 9px;
}

.party-join-row {
    display: flex;

    gap: 8px;
}

#partyCodeInput {
    min-width: 0;
    flex: 1;

    height: 42px;

    padding: 0 13px;

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

    outline: none;

    color: #fff;
    background: rgba(0,0,0,.16);

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

    letter-spacing: .18em;
    text-transform: uppercase;
}

#partyCodeInput:focus {
    border-color: #21628a;
}

.party-message {
    min-height: 17px;

    margin-top: 12px;

    color: #e38e96;

    font-size: 11px;
}


/* MOBILE PARTY */

@media (max-width: 700px) {

    .topbar-direita {
        gap: 5px;
    }

    .party-top-btn {
        min-height: 30px;

        padding: 0 8px;

        font-size: 10px;
    }

    .party-bar {
        min-height: 0;

        margin-bottom: 6px;
        padding: 6px;

        flex-wrap: wrap;

        gap: 6px;
    }

    .party-room-main {
        min-width: 0;
        flex: 1 1 180px;
    }

    .party-members {
        flex: 1 0 100%;

        order: 3;
    }

    .party-round-box {
        min-width: 35px;
    }

    .party-member {
        padding: 4px 6px;
    }

    .party-avatar {
        width: 23px;
        height: 23px;

        flex-basis: 23px;
    }

    .party-member-name {
        font-size: 10px;
    }

    .party-member-result {
        font-size: 11px;
    }

    .party-mini-btn {
        display: none;
    }

    .party-leave-btn {
        margin-left: 0;
    }

    .party-modal-card {
        padding: 22px 17px;
    }

}


@media (max-width: 500px) {

    .party-top-btn {
        width: 34px;

        overflow: hidden;

        padding: 0;

        font-size: 0;
    }

    .party-top-btn::before {
        content: "👥";

        font-size: 15px;
    }

}


/* =========================================================
   PARTY — COMPARAÇÃO
========================================================= */

.party-compare-btn {
    padding: 6px 9px;

    border: 1px solid rgba(80,160,210,.28);
    border-radius: 8px;

    background: rgba(48,125,175,.08);
    color: #8fd0f5;

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

    cursor: pointer;
}

.party-compare-btn:hover {
    color: #fff;
    background: rgba(48,125,175,.16);
    border-color: rgba(95,183,235,.42);
}

.party-compare-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
}


.party-compare-card {
    width: min(720px, 100%);
    max-height: min(820px, calc(100vh - 30px));

    overflow-y: auto;
}


.party-head-to-head {
    margin:
        4px
        0
        14px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;
}

.party-h2h-player {
    min-width: 0;

    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;

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

.party-h2h-player.right {
    flex-direction: row-reverse;
    text-align: right;
}

.party-h2h-player img,
.party-h2h-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    object-fit: cover;

    background: #0b2434;
}

.party-h2h-name {
    min-width: 0;
    flex: 1;

    overflow: hidden;

    color: #dcebf4;

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

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

.party-h2h-score {
    color: #fff;

    font-size:
        clamp(
            25px,
            5vw,
            38px
        );

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

    font-variant-numeric: tabular-nums;
}

.party-h2h-vs {
    color: #55798f;

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

    letter-spacing: .16em;
}


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

    gap: 8px;

    margin-bottom: 18px;
}

.party-compare-stat {
    min-width: 0;

    padding: 10px;

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

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

.party-compare-stat small {
    display: block;

    margin-bottom: 6px;

    color: #5f8197;

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

    letter-spacing: .12em;
    text-transform: uppercase;
}

.party-compare-stat-row {
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 5px;
}

.party-compare-stat-row strong {
    overflow: hidden;

    color: #d8e8f2;

    font-size: 12px;

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

    font-variant-numeric: tabular-nums;
}

.party-compare-stat-row strong:last-child {
    text-align: right;
}

.party-compare-stat-divider {
    color: #405d70;

    font-size: 9px;
}


.party-round-history-title {
    margin-bottom: 7px;

    color: #7899ae;

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

    letter-spacing: .1em;
    text-transform: uppercase;
}

.party-compare-rounds {
    display: grid;

    gap: 6px;
}

.party-compare-empty {
    padding: 16px;

    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 10px;

    color: #587589;

    text-align: center;

    font-size: 11px;
}

.party-round-row {
    display: grid;
    grid-template-columns:
        42px
        minmax(80px, 1fr)
        auto
        minmax(80px, 1fr);

    align-items: center;

    gap: 8px;

    padding: 8px 10px;

    border: 1px solid rgba(255,255,255,.05);
    border-radius: 9px;

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

.party-round-number {
    color: #57778b;

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

.party-round-time {
    color: #cfe0ea;

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

    font-variant-numeric: tabular-nums;
}

.party-round-time.right {
    text-align: right;
}

.party-round-time.winner {
    color: #5ce0a1;
}

.party-round-time.dnf {
    color: #df838b;
}

.party-round-delta {
    min-width: 70px;

    color: #63869c;

    text-align: center;

    font-size: 9px;

    font-variant-numeric: tabular-nums;
}


@media (max-width: 700px) {

    .party-compare-btn {
        padding: 6px 7px;

        font-size: 9px;
    }

    .party-compare-card {
        max-height: calc(100vh - 14px);

        padding:
            20px
            13px;
    }

    .party-head-to-head {
        grid-template-columns:
            1fr
            26px
            1fr;

        gap: 4px;
    }

    .party-h2h-player {
        padding: 8px;

        gap: 6px;
    }

    .party-h2h-player img,
    .party-h2h-avatar {
        width: 29px;
        height: 29px;

        flex-basis: 29px;
    }

    .party-h2h-name {
        font-size: 10px;
    }

    .party-h2h-score {
        font-size: 25px;
    }

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

    .party-round-row {
        grid-template-columns:
            32px
            minmax(65px, 1fr)
            58px
            minmax(65px, 1fr);

        gap: 4px;

        padding: 7px 6px;
    }

    .party-round-time {
        font-size: 10px;
    }

    .party-round-delta {
        min-width: 0;

        font-size: 8px;
    }

}


/* =========================================================
   STACKMAT
========================================================= */

.stackmat-card {
    grid-template-columns: minmax(0,1fr) auto;
}

.stackmat-status-block {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.stackmat-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.stackmat-title-row > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stackmat-title-row b {
    color: #dcebf5;
    font-size: 12px;
}

.stackmat-title-row small {
    color: #7895a9;
    font-size: 10px;
}

.stackmat-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #526878;
    box-shadow: 0 0 0 3px rgba(82,104,120,.12);
}

.stackmat-status-dot.connecting {
    background: #e7ae53;
    box-shadow: 0 0 8px rgba(231,174,83,.45);
}

.stackmat-status-dot.connected {
    background: #46d794;
    box-shadow: 0 0 8px rgba(70,215,148,.55);
}

.stackmat-status-dot.error {
    background: #e36f79;
    box-shadow: 0 0 8px rgba(227,111,121,.45);
}

.stackmat-help {
    margin: 0;
    max-width: 760px;
    color: #69879b;
    font-size: 10px;
    line-height: 1.45;
}

.stackmat-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.stackmat-actions .secondary-btn {
    min-width: 120px;
}

@media (max-width: 700px) {

    .mode-btn {
        padding: 6px 8px;
        font-size: 10px;
    }

    .stackmat-card {
        grid-template-columns: 1fr;
    }

    .stackmat-actions {
        justify-content: flex-start;
    }

    .stackmat-actions .secondary-btn {
        width: 100%;
    }

}

@media (max-width: 500px) {

    .mode-btn {
        padding: 6px;
        font-size: 9px;
    }

}