:root {
    --g-grey: rgba(211, 211, 211, 0.5);
    --g-grey-solid: rgba(211, 211, 211);
    --g-dark-grey: hsl(0, 0%, 40%);
    --g-light-black: #131314;
    --g-green: #72d972;
    --g-success: #198754;
    --g-success-hover: #157347;
    --g-failure: #dc3545;
    --g-alert: #f5c6cb;
    --g-red: #e15754;
    --g-ready: 7
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.header, .footer {
    background-color: var(--g-light-black);
    color: #fff;
    padding: 10px;
    position: fixed;
    width: 100%;
    text-align: center;
}
.header {
    top: 0;
    height: 5vw;
    font-size: 2vw;
}

.header.hidden {
    top: -5vw;
}

.header span.play-mafia {
    position: absolute;
    top: 0vw;
    left: 1vw;
    height: 5vw;
    width: 5vw;
    font-size: 5vw;
    color: white;
}

.header span.play-mafia:before {
    content: "stadia_controller";
}

.header span.user-logout,
.header span.user-login {
    position: absolute;
    top: 0vw;
    right: 1vw;
    height: 5vw;
    width: 5vw;
    font-size: 5vw;
    color: white;
}

.header span.user-sign-up {
    position: absolute;
    top: 0vw;
    right: 6vw;
    height: 5vw;
    width: 5vw;
    font-size: 5vw;
    color: white;
}

.header a:visited {
    color: white;  /* Change color when the link has been visited */
    /*text-decoration: underline;  !* Optionally, add an underline *!*/
}
.header span.user-logout:before {
    content: "logout";
}
.header span.user-logout:hover {
    color: var(--g-failure);
}


.header a:visited {
    color: white;  /* Change color when the link has been visited */
    /*text-decoration: underline;  !* Optionally, add an underline *!*/
}
.header span.user-login:before {
    content: "login";
}
.header span.user-login:hover {
    color: var(--g-success);
}

.header span.user-sign-up:before {
    content: "person_check";
}
.header span.user-sign-up:hover {
    color: var(--g-success);
}

.header span.user-avatar {
    position: absolute;
    top: 0vw;
    right: 6vw;
    height: 5vw;
}


.header span.user-avatar img {
    height: 5vw;
}
.footer {
    bottom: 0;
    height: 3vw;
    font-size: 1vw;
    text-align: center;
}

.container {
    /*margin: 5.2vw auto; !* Adjust margin to make space for header and footer *!*/
    padding: 10px;
}
.container.homepage,
.container.signup,
.container.login,
.container.user {
    max-width: 80vw;
    margin-top: 5vw;
    margin-bottom: 3vw;
    max-height: calc(100vh - 8.2vw); /* Viewport minus header+footer */
    overflow-y: hidden;
}

/*.container.homepage .table-container{*/
/*    overflow: hidden;*/
/*}*/

form {
    max-width: 600px;
    margin: auto;
}
.form-control {
    width: auto; /* Adjust input width */
}
.btn-create {
    width: auto; /* Adjust button width */
}
.table-container {
    max-height: calc(100vh - 11vw); /* Adjust maximum height for scroll */
    overflow-y: auto; /* Enable vertical scrolling */
    /*margin-top: 2vw; !* Adjust margin to avoid overlapping with header *!*/
    /*margin-bottom: 2vw; !* Adjust margin to avoid overlapping with footer *!*/
}

.th-host, .th-club, .th-result, .th-phase  {
    width: 5vw;
}
.th-users {
    width: 32vw;
}
.th-actions {
    width: 10vw;
}

/* Game Password Popup*/

.game-password-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--g-dark-grey);
    color: var(--g-grey);
    padding: 1em;
    border: 1px solid var(--g-grey);
    z-index: 1000;
    visibility: hidden;
}

.game-password-popup.show {
    visibility: visible;
}

.game-password-popup h2 {
    margin: 0 0 1em 0;
    text-align: center;
}

.game-password-popup label {
    min-width:8vw;
    font-size: 1.2em;
    margin-bottom: 0.5em;
    display: inline-block;
}

.game-password-popup select {
    /*width: 100%;*/
    padding: 0.5em;
    margin-bottom: 1em;
}

.game-password-popup button {
    width: 45%;
    padding: 0.5em;

    color: white;
    border: none;
    cursor: pointer;
}

.game-password-popup button#startButton {
    background-color: var(--g-success);
}

.game-password-popup button#closeButton {
    background-color: var(--g-failure);
}

.game-password-popup button:hover {
    background-color: var(--g-success-hover);
}

span.pwd:before {
    content: 'password';
    vertical-align: middle;
}

tr {
    vertical-align: middle;
}
#history-tab td {
    /*padding: 0;*/
}

.player-slots-cell {
    white-space: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    padding: 0;
    width: 32vw;
}

.player-slots-container {
    display: inline-flex; /* Horizontal layout */
    overflow-y: hidden;


}

.player-slot {
    position: relative;
    display: inline-block;
    flex-direction: column;
    align-items: center;
    width: 4vw;
    flex-shrink: 0;
    margin-left: -1vw;
}

.player-slot.first {
    margin-left: 0;
}

.avatar-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: white;
}

.role-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1.5vw;
    height: 1.5vw;

    border-radius: 25%;
    border: 0.1vw solid white;
    /*transform: translate(-25%, 25%);*/
    z-index: 2;
    background-size: contain;
    background: white;
    background-repeat: no-repeat;
    background-position: center;
}

/* Role-specific styling using classes */
/*.role-badge.R {*/
/*    background-color: var(--g-failure);*/
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z'/%3E%3C/svg%3E");*/
/*}*/
.role-badge.R:before {
    content: "frame_person";
    color: var(--g-failure);
    font-size: 1.4vw;
    vertical-align: top;
}

.role-badge.S {
    background-image: url('/static/img/sheriff-star.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

/*.role-badge.B {*/
/*    background-color: black;*/
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z'/%3E%3C/svg%3E");*/
/*}*/

.role-badge.B:before {
    content: "frame_person";
    color: black;
    fonnt-weight: 800;
    font-size: 1.4vw;
    vertical-align: top;
}

.role-badge.H {
    visibility: hidden;
}

.role-badge.H:before {
    content: "frame_person_mic";
    color: var(--g-green);
    fonnt-weight: 800;
    font-size: 1.4vw;
    vertical-align: top;

}

.role-badge[data-status="unknown"]:before {
    content: "circle";
    color: var(--g-dark-grey);
    font-size: 1.4vw;
    vertical-align: top;
}

.role-badge[data-status="ready"]:before {
    content: "check_circle";
    color: var(--g-success);
    font-size: 1.4vw;
    vertical-align: top;
}

.role-badge[data-status="alive"]:before {
    content: "frame_person";
    color: var(--g-success);
    font-size: 1.4vw;
    vertical-align: top;
}

.role-badge[data-status="locked"]:before {
    content: "grid_4x4";
    color: var(--g-failure);
    font-size: 1.4vw;
    vertical-align: top;
}

.role-badge[data-status="killed"]:before {
    content: "motion_sensor_active";
    color: var(--g-failure);
    font-size: 1.4vw;
    vertical-align: top;
}

.role-badge[data-status="disqualified"]:before {
    content: "bolt";
    color: var(--g-failure);
    font-size: 1.4vw;
    vertical-align: top;
}


.role-badge.D {

    background-image: url('/static/img/don-ring.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

td.game-result:before {
    content: "frame_person";
    font-size: 4vw;
    font-weight: 800;
}

td.game-result[data-result="red"] {
    color: var(--g-failure);
}

td.game-result[data-result="black"] {
    color: black;
}


/* Адаптивные стили для мобильных устройств в портретной ориентации */
@media screen and (max-width: 768px) and (orientation: portrait) {
    /*header, footer {*/
    /*    height: 10vh; !* Используем vh вместо vw *!*/
    /*}*/

    .header
    {
        top: 0;
        height: 7vh;
        font-size: 3vh;
    }

    .footer {
        bottom: 0;
        height: 7vh;
        font-size: 2vh;
        display: flex;
        align-items: center;     /* vertical align */
        justify-content: center;
    }

    .header-icon {
        width: 8vh;
        height: 8vh;
    }
    .container {
        /*margin: 5.2vw auto; !* Adjust margin to make space for header and footer *!*/
        padding: 3px;
    }
    .container.homepage,
    .container.signup,
    .container.login,
    .container.user {
        max-width: 100vw;
        margin-top: 7vh;
        margin-bottom: 7vh;
        max-height: calc(100vh - 14vh); /* Viewport minus header+footer */
        overflow-y: hidden;
    }

    .header span.user-avatar {
        position: absolute;
        top: 0.5vw;
        right: 6.3vh;
        height: 6vh;
    }


    .header span.user-avatar img {
        height: 6vh;
    }

    .header span.user-logout,
    .header span.user-login {
        position: absolute;
        top: 0.5vw;
        right: 0.5vh;
        height: 6vh;
        width: 6vh;
        font-size: 6vh;
        color: white;
    }

    .header span.user-sign-up {
        position: absolute;
        top: 0.5vw;
        right: 6.3vh;
        height: 6vh;
        width: 6vh;
        font-size: 6vh;
        color: white;
    }

    .header span.play-mafia {
        position: absolute;
        top: 0.5vh;
        left: 0.5vh;
        height: 6vh;
        width: 6vh;
        font-size: 6vh;
        color: white;
    }

}