Scoreboard {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: stretch;
    padding: 50px;

    &.full {
        padding: 0;
        align-items: end;
    }

    .container {
        position: absolute;
        width: 600px;
        display: flex;
        flex-direction: column;
        background: rgba(20, 20, 25, 0.92);
        border: 2px solid rgba(255,255,255,0.08);
        border-radius: 10px;
        overflow: hidden;

        &.full {
            width: 400px;
        }
    }

    .header {
        flex-direction: column;
        background-color: rgba(255,255,255,.04);
    }

    .match-info {
        height: 52px;
        padding: 0 18px;
        align-items: center;
        justify-content: space-between;
    }

    .state {
        font-size: 24px;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
    }

    .timer {
        font-size: 30px;
        font-weight: bold;
        color: #ffd54a;
    }

    .columns {
        height: 32px;
        padding: 0 18px;
        align-items: center;
        border-top: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.5);
        font-size: 14px;
        text-transform: uppercase;
    }

    .name {
        flex-grow: 1;
    }

    .score {
        width: 70px;
        text-align: center;
    }

    .ping {
        width: 60px;
        text-align: right;
    }

    .players {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
    }

    .map-vote {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px 14px;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .map-vote-title {
        font-size: 14px;
        font-weight: bold;
        color: rgba(255,255,255,.7);
        text-transform: uppercase;
    }

    .map-vote-options {
        flex-direction: row;
        gap: 8px;
    }

    .map-card {
        flex-grow: 1;
        flex-direction: column;
        gap: 4px;
        padding: 6px;
        background: rgba(255,255,255,.04);
        border: 2px solid rgba(255,255,255,.08);
        border-radius: 8px;
        cursor: pointer;
        pointer-events: all;

        &:hover {
            border-color: rgba(255,255,255,.25);
            background: rgba(255,255,255,.08);
        }

        &.selected {
            border-color: #ffd54a;
            background: rgba(255, 213, 74, .12);
        }
    }

    .map-thumb {
        width: 100%;
        height: 72px;
        background-size: cover;
        background-position: center;
        border-radius: 4px;
        pointer-events: none;

        &.placeholder {
            background: rgba(255,255,255,.06);
        }
    }

    .map-name {
        font-size: 13px;
        font-weight: bold;
        color: white;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        pointer-events: none;
    }

    .map-votes {
        font-size: 16px;
        font-weight: bold;
        color: #ffd54a;
        pointer-events: none;
    }
}