/* _content/Catcomp.Trax/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-r3sb8tpabd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-r3sb8tpabd] {
    flex: 1;
}

.top-row[b-r3sb8tpabd] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    line-height: 3em;
    background: linear-gradient(180deg, rgba(31, 35, 255, 1) 0%, rgb(77, 103, 253) 17%, rgba(31, 35, 255, 1) 48%, rgba(31, 35, 255, 1) 53%, rgba(12, 13, 84, 1) 100%);
    border-top: 2px solid yellow;
    border-bottom: 3px solid rgb(255, 238, 0);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 2em;
}

    .top-row[b-r3sb8tpabd]  a, .top-row[b-r3sb8tpabd]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
    }

    .top-row[b-r3sb8tpabd]  a:hover, .top-row[b-r3sb8tpabd]  .btn-link:hover {
        text-decoration: none;
    }

    .top-row[b-r3sb8tpabd]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }



@media (min-width: 641px) {
    .page[b-r3sb8tpabd] {
        flex-direction: row;
    }

    .top-row[b-r3sb8tpabd] {
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-r3sb8tpabd]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-r3sb8tpabd], article[b-r3sb8tpabd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-r3sb8tpabd] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-r3sb8tpabd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.top-menu[b-r3sb8tpabd] {
    display:flex;
}

@media (max-width: 875px) {
    .top-menu[b-r3sb8tpabd] {
        display: block;
    }
}
/* _content/Catcomp.Trax/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-brand[b-s65n5oxtbk] {
    font-size: 1.1rem;
}

.bi[b-s65n5oxtbk] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-s65n5oxtbk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-s65n5oxtbk] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    display:inline-block;
}

    .nav-item:first-of-type[b-s65n5oxtbk] {
    }

    .nav-item:last-of-type[b-s65n5oxtbk] {
        padding-bottom: 1rem;
    }

    .nav-item[b-s65n5oxtbk]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 2rem;
        display: flex;
        align-items: center;
        line-height: 2rem;
        width: 100%;
        text-transform: uppercase;
    }

.nav-item[b-s65n5oxtbk]  a.active {
    color: white;
}

    .nav-item[b-s65n5oxtbk]  .nav-link:hover {
        color: white;
        transform: scale(1.1);
    }





.nav-item[b-s65n5oxtbk] {
    cursor: pointer;
    transition: transform 0.1s;
    padding: 1em;
}

.menu-item:hover[b-s65n5oxtbk] {
    transform: scale(1.1);
}

.menu-logo-container[b-s65n5oxtbk]{
    display:inline-block;
}
.menu-logo[b-s65n5oxtbk] {
    position: relative;
    width: 320px;
    height: 150px;
    background: url('TraxLogo.png') no-repeat center center;
    background-size: contain;
    margin-bottom: -110px;
    top: -15px;
}

@media (max-width: 875px) {

    .nav-container[b-s65n5oxtbk] {
        text-align: center;
    }

    .nav-item[b-s65n5oxtbk] {
        
    }

    .nav-link a[b-s65n5oxtbk] {
        justify-content: center;
    }

    .menu-logo-container[b-s65n5oxtbk] {
        display: flex;
        justify-content: center;
    }

    .menu-logo[b-s65n5oxtbk] {
        display: flex;
        margin-bottom: 0px;
        top: 0px;
    }
}
/* _content/Catcomp.Trax/Components/Pages/Debug.razor.rz.scp.css */
/* We want to hide the popup at the side fo the screen and pull out like a drawer  */
.debug-anchor[b-pkxp2x7ck7] {
    width: 5vw;
    height: 10vh;
    top: 45vh;
    left: 0;
    background-color: red;
}

.debug-popout[b-pkxp2x7ck7] {
    width: 30vw;
    height: 75vh;
    position: absolute;
    top: 25vh;
    left: -28vw;
    background: linear-gradient(180deg, rgba(255,255,255,255) 0%, rgba(200,200,200,256) 100%);
    border: 6px solid gold;
    padding: 4px;
    border-radius: 25px;
    color: #fff;
    transition: 0.4s ease;
    overflow:hidden;
}
.debug-popout-content[b-pkxp2x7ck7] {
    height: 75vh;
    overflow: scroll;
}
    .debug-popout-active[b-pkxp2x7ck7] {
        left: 0vw;
    }
/* _content/Catcomp.Trax/Components/Pages/Home.razor.rz.scp.css */

.avatar[b-zpnai31vkf] {
    width: 200px;
    height: 200px;
    background-size: 200px;
}

.avatar-default-blue[b-zpnai31vkf] {
    background: url('img\\avatars\\avatar_blue.png') no-repeat center center;
    width: 200px;
    height: 200px;
    background-size: 200px;
}

.avatar-default-black[b-zpnai31vkf] {
    background: url('img\\avatars\\avatar_black.png') no-repeat center center;
    width: 200px;
    height: 200px;
    background-size: 200px;
}
/* _content/Catcomp.Trax/Components/Pages/Lobby.razor.rz.scp.css */

/* HUD styles (Micro Machines-inspired) */
#race-container[b-jnklj29ylo] {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
    align-items: start
}

.game-wrap[b-jnklj29ylo] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg,#031635,#041a3a);
    box-shadow: 0 8px 30px rgba(2,6,20,0.6);
    min-height: 520px
}
/* big placeholder canvas */
#game-canvas[b-jnklj29ylo] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, rgba(0,0,0,0.02) 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfe6ff;
    font-family: 'Press Start 2P',monospace;
    font-size: 14px
}


/* Top thin bar */
.hud-top[b-jnklj29ylo] {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    height: 44px;
    background: linear-gradient(90deg,#052449,#06427a);
    border: 3px solid #ffcc33;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    z-index: 50
}

    .hud-top .left[b-jnklj29ylo], .hud-top .center[b-jnklj29ylo], .hud-top .right[b-jnklj29ylo] {
        display: flex;
        align-items: center;
        gap: 12px
    }

.hud-pill[b-jnklj29ylo] {
    background: rgba(255,255,255,0.04);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    color: #ffd;
    backdrop-filter: blur(2px)
}


/* Minimap top-left */
.minimap[b-jnklj29ylo] {
    position: absolute;
    left: 12px;
    top: 68px;
    width: 112px;
    height: 112px;
    border-radius: 8px;
    border: 3px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg,#06335a,#083a66);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #bfe0ff
}


/* Controls bottom-left */
.controls[b-jnklj29ylo] {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 160px;
    padding: 8px;
    border-radius: 8px;
    background: linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
    border: 2px solid rgba(255,255,255,0.03);
    z-index: 40
}

    .controls .key[b-jnklj29ylo] {
        display: inline-block;
        padding: 6px 8px;
        margin: 4px;
        border-radius: 6px;
        background: linear-gradient(180deg,#0b2a4a,#05203a);
        color: #fff;
        font-weight: 700;
        font-family: 'Inter',sans-serif;
        font-size: 12px
    }


/* Lapbox bottom-right */
.lapbox[b-jnklj29ylo] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 220px;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg,#021328,#04203a);
    border: 3px solid #113b6b;
    color: #cfe6ff;
    font-family: 'Press Start 2P',monospace;
    font-size: 12px;
    z-index: 40
}

    .lapbox .row[b-jnklj29ylo] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px
    }


/* Right column players list */
.players-col[b-jnklj29ylo] {
    background: linear-gradient(180deg,#041331,#06284a);
    border-radius: 10px;
    padding: 12px;
    color: #dff4ff;
    min-height: 520px
}

    .players-col h3[b-jnklj29ylo] {
        font-family: 'Press Start 2P',monospace;
        font-size: 12px;
        margin: 0 0 10px
    }

.player[b-jnklj29ylo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: linear-gradient(90deg,rgba(255,255,255,0.02),transparent)
}

    .player .avatar[b-jnklj29ylo] {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        background: #0a2b55;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800
    }

    .player .meta[b-jnklj29ylo] {
        font-size: 12px
    }

    .player.you[b-jnklj29ylo] {
        outline: 3px solid #ffcc33
    }


/* Responsive tweaks */
@media (max-width:980px) {
    #race-container[b-jnklj29ylo] {
        grid-template-columns: 1fr
    }

    .players-col[b-jnklj29ylo] {
        order: 2;
        width: 100%
    }
}
/* _content/Catcomp.Trax/Components/Pages/SrsVideoFeed.razor.rz.scp.css */
#game-canvas[b-0qcdxgqc7e] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, rgba(0,0,0,0.02) 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfe6ff;
    font-family: 'Press Start 2P',monospace;
    font-size: 14px
}
/* _content/Catcomp.Trax/Components/Pages/TeamStats.razor.rz.scp.css */

/* HUD styles (Micro Machines-inspired) */
#race-container[b-r0e4ceihod] {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
    align-items: start
}

.game-wrap[b-r0e4ceihod] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg,#031635,#041a3a);
    box-shadow: 0 8px 30px rgba(2,6,20,0.6);
    min-height: 520px
}
/* big placeholder canvas */
#game-canvas[b-r0e4ceihod] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, rgba(0,0,0,0.02) 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfe6ff;
    font-family: 'Press Start 2P',monospace;
    font-size: 14px
}


/* Top thin bar */
.hud-top[b-r0e4ceihod] {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    height: 44px;
    background: linear-gradient(90deg,#052449,#06427a);
    border: 3px solid #ffcc33;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    z-index: 50
}

    .hud-top .left[b-r0e4ceihod], .hud-top .center[b-r0e4ceihod], .hud-top .right[b-r0e4ceihod] {
        display: flex;
        align-items: center;
        gap: 12px
    }

.hud-pill[b-r0e4ceihod] {
    background: rgba(255,255,255,0.04);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    color: #ffd;
    backdrop-filter: blur(2px)
}


/* Minimap top-left */
.minimap[b-r0e4ceihod] {
    position: absolute;
    left: 12px;
    top: 68px;
    width: 112px;
    height: 112px;
    border-radius: 8px;
    border: 3px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg,#06335a,#083a66);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #bfe0ff
}


/* Controls bottom-left */
.controls[b-r0e4ceihod] {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 160px;
    padding: 8px;
    border-radius: 8px;
    background: linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
    border: 2px solid rgba(255,255,255,0.03);
    z-index: 40
}

    .controls .key[b-r0e4ceihod] {
        display: inline-block;
        padding: 6px 8px;
        margin: 4px;
        border-radius: 6px;
        background: linear-gradient(180deg,#0b2a4a,#05203a);
        color: #fff;
        font-weight: 700;
        font-family: 'Inter',sans-serif;
        font-size: 12px
    }


/* Lapbox bottom-right */
.lapbox[b-r0e4ceihod] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 220px;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg,#021328,#04203a);
    border: 3px solid #113b6b;
    color: #cfe6ff;
    font-family: 'Press Start 2P',monospace;
    font-size: 12px;
    z-index: 40
}

    .lapbox .row[b-r0e4ceihod] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px
    }


/* Right column players list */
.players-col[b-r0e4ceihod] {
    background: linear-gradient(180deg,#041331,#06284a);
    border-radius: 10px;
    padding: 12px;
    color: #dff4ff;
    min-height: 520px
}

    .players-col h3[b-r0e4ceihod] {
        font-family: 'Press Start 2P',monospace;
        font-size: 12px;
        margin: 0 0 10px
    }

.player[b-r0e4ceihod] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: linear-gradient(90deg,rgba(255,255,255,0.02),transparent)
}

    .player .avatar[b-r0e4ceihod] {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        background: #0a2b55;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800
    }

    .player .meta[b-r0e4ceihod] {
        font-size: 12px
    }

    .player.you[b-r0e4ceihod] {
        outline: 3px solid #ffcc33
    }


/* Responsive tweaks */
@media (max-width:980px) {
    #race-container[b-r0e4ceihod] {
        grid-template-columns: 1fr
    }

    .players-col[b-r0e4ceihod] {
        order: 2;
        width: 100%
    }
}
/* _content/Catcomp.Trax/Components/Pages/Track.razor.rz.scp.css */
.old_data[b-iuevh8w3ys]
{
    border: 3px solid red;
}

.blazor_team_stats[b-iuevh8w3ys] {
    border: 3px solid green;
}

.race-button[b-iuevh8w3ys] {
    display: flex;
    align-items: center;
    background-color: #007bff; /* Blue for active */
    border: 4px solid #0056b3; /* Darker blue border */
    border-radius: 8px; /* Slightly rounded for 16-bit */
    padding: 15px 25px;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.1s;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.4); /* Retro shadow effect */
    position: relative;
    overflow: hidden; /* For potential internal elements */
    width: 380px; /* Fixed width for consistency */
    text-align: left;
}

    .race-button:hover[b-iuevh8w3ys] {
        transform: translateY(-2px);
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.5);
    }

    .race-button:active[b-iuevh8w3ys] {
        transform: translateY(2px);
        box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
        background-color: #0056b3;
    }

.race-button-content[b-iuevh8w3ys] {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.race-icon[b-iuevh8w3ys] {
    width: 150px;
    height: 150px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em; /* For placeholder text */
    color: #000;
}

/* Specific icon styles (placeholders) */
.icon-head-to-head[b-iuevh8w3ys] {
    background-image: url('/img/icon-head-to-head.png');
    background-size: cover; /* <------ */
    background-repeat: no-repeat;
    background-position: center center;
}

.icon-relay[b-iuevh8w3ys] {
    background-image: url('/img/icon-relay.png');
    background-size: cover; /* <------ */
    background-repeat: no-repeat;
    background-position: center center;
}
/* Pink */
.icon-team-relay[b-iuevh8w3ys] {
    background-color: #448aff;
    color: #fff;
}
/* Light Blue */

.race-details[b-iuevh8w3ys] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
}

.track-name[b-iuevh8w3ys] {
    font-size: 1.1em;
    color: #fff;
    text-shadow: 1px 1px #000;
}

.players-info[b-iuevh8w3ys] {
    font-size: 0.9em;
    color: #ccc;
    text-shadow: 1px 1px #000;
}

/* * ----------------------------------------
         * 3. Spectate Only / Subdued State
         * ----------------------------------------
         */
.race-button.spectate-only[b-iuevh8w3ys] {
    background-color: #444; /* Darker, subdued background */
    border-color: #333; /* Darker border */
    cursor: default;
    pointer-events: none; /* Disable interaction */
    opacity: 0.7; /* Slightly faded */
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3); /* Softer shadow */
}

    .race-button.spectate-only:hover[b-iuevh8w3ys] {
        transform: none; /* No hover lift */
        box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
    }

.spectate-tag[b-iuevh8w3ys] {
    background-color: #880e4f; /* Dark red/maroon for "Spectate" */
    color: #fff;
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: 4px;
    margin-left: auto; /* Push to the right */
    border: 2px solid #5d0735;
    text-shadow: 1px 1px #000;
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.2);
}

.race-button.spectate-only .track-name[b-iuevh8w3ys],
.race-button.spectate-only .players-info[b-iuevh8w3ys] {
    color: #aaa; /* Subdued text color */
}

.race-button.spectate-only .race-icon[b-iuevh8w3ys] {
    opacity: 0.6; /* Faded icon */
    border-color: #aaa;
}

.trax-starter-lights[b-iuevh8w3ys] {
    height: 20vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.trax-lights-none[b-iuevh8w3ys] {
    background-image: url('/img/StarterLights_0.png');
}
.trax-lights-red[b-iuevh8w3ys] {
    background-image: url('/img/StarterLights_1.png');
}
.trax-lights-amber[b-iuevh8w3ys] {
    background-image: url('/img/StarterLights_2.png');
}
.trax-lights-green[b-iuevh8w3ys] {
    background-image: url('/img/StarterLights_3.png');

}



/* HUD styles (Micro Machines-inspired) */
#race-container[b-iuevh8w3ys] {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
    align-items: start
}

.game-wrap[b-iuevh8w3ys] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg,#031635,#041a3a);
    box-shadow: 0 8px 30px rgba(2,6,20,0.6);
    min-height: 520px
}
/* big placeholder canvas */
#game-canvas[b-iuevh8w3ys] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, rgba(0,0,0,0.02) 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfe6ff;
    font-family: 'Press Start 2P',monospace;
    font-size: 14px
}

/* Responsive tweaks */
@media (max-width:980px) {
    #race-container[b-iuevh8w3ys] {
        grid-template-columns: 1fr
    }
}
/* _content/Catcomp.Trax/Components/Pages/VideoFeed.razor.rz.scp.css */


/* Top thin bar */
.hud-top[b-opwyy2a2cs] {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    height: 44px;
    background: linear-gradient(90deg,#052449,#06427a);
    border: 3px solid #ffcc33;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    z-index: 50
}

    .hud-top .left[b-opwyy2a2cs], .hud-top .center[b-opwyy2a2cs], .hud-top .right[b-opwyy2a2cs] {
        display: flex;
        align-items: center;
        gap: 12px
    }

.hud-pill[b-opwyy2a2cs] {
    background: rgba(255,255,255,0.04);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    color: #ffd;
    backdrop-filter: blur(2px)
}


/* Minimap top-left */
.minimap[b-opwyy2a2cs] {
    position: absolute;
    left: 12px;
    top: 68px;
    width: 112px;
    height: 112px;
    border-radius: 8px;
    border: 3px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg,#06335a,#083a66);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #bfe0ff
}


/* Controls bottom-left */
.controls[b-opwyy2a2cs] {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 160px;
    padding: 8px;
    border-radius: 8px;
    background: linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
    border: 2px solid rgba(255,255,255,0.03);
    z-index: 40
}

    .controls .key[b-opwyy2a2cs] {
        display: inline-block;
        padding: 6px 8px;
        margin: 4px;
        border-radius: 6px;
        background: linear-gradient(180deg,#0b2a4a,#05203a);
        color: #fff;
        font-weight: 700;
        font-family: 'Inter',sans-serif;
        font-size: 12px
    }


/* Lapbox bottom-right */
.lapbox[b-opwyy2a2cs] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 220px;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg,#021328,#04203a);
    border: 3px solid #113b6b;
    color: #cfe6ff;
    font-family: 'Press Start 2P',monospace;
    font-size: 12px;
    z-index: 40
}

    .lapbox .row[b-opwyy2a2cs] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px
    }


/* Right column players list */
.players-col[b-opwyy2a2cs] {
    background: linear-gradient(180deg,#041331,#06284a);
    border-radius: 10px;
    padding: 12px;
    color: #dff4ff;
    min-height: 520px
}

    .players-col h3[b-opwyy2a2cs] {
        font-family: 'Press Start 2P',monospace;
        font-size: 12px;
        margin: 0 0 10px
    }

.player[b-opwyy2a2cs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: linear-gradient(90deg,rgba(255,255,255,0.02),transparent)
}

    .player .avatar[b-opwyy2a2cs] {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        background: #0a2b55;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800
    }

    .player .meta[b-opwyy2a2cs] {
        font-size: 12px
    }

    .player.you[b-opwyy2a2cs] {
        outline: 3px solid #ffcc33
    }


/* Responsive tweaks */
@media (max-width:980px) {
    .players-col[b-opwyy2a2cs] {
        order: 2;
        width: 100%
    }
}