#triviaFrenzia {
    display: grid;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

#hexagon-container {
    --height: 300px;
    position: relative;
    width: 350px;
    height: 300px;
    margin-top: 5%;
    /* background-color: pink; */
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    /* align-items: center; */
    /* margin-top: 20%; */
    transform-origin: center;
    /* box-shadow: inset 10px 3px 5px rgba(0, 255, 0, 0.093); */
    transition: transform 1s;
}

.squash-me {
    animation: squash .5s 0s forwards;
}

.expand-me {
    animation: expand .5s 0s forwards;
}

.spin-me {
    animation: spin .5s 0s forwards;
}

#spinButton {
    background-color: #ff006e;
    background-color: #1f2224;
    color: white;
    font-family: Comfortaa, sans-serif;
    font-size: clamp(1em, 2vh, 25px);
    font-weight: bold;
    border-radius: 10% / 50%;
    border: 15px solid white;
    margin-top: 0px;
    margin-bottom: 20px;

}

#spinButton:disabled {
    background-color: #dddddd;
    font-size: clamp(1em, 2vh, 25px);
    color: rgba(255, 255, 255, 0.445)
}

.prompt {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 2% 10%;
    align-items: center;
    justify-content: center;
    /* background-color: #1f2224; */
    color: black;
    border-radius: 10% / 50%;
    border: 5px solid white;
    font-size: 30px;
}

.sub-category-name {
    color: lightskyblue;
    /* color: white; */
    font-size: clamp(1em, 3vh, 75px);
}

.sub-category-first-beginning-with {
    color: lightskyblue;
    color: white;
    font-size: clamp(0.7em, 1vh, 25px);
}

.sub-category-first-letter {
    font-size: clamp(1em, 7vh, 75px);
    /* color: greenyellow; */
}

.hexagon {
    width: 100px;
    height: 80px;
    /* Approximate height for regular hexagon */
    background-color: #989898;
    /* margin: 0px 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition: transform 0.3s, background-color 0.3s;
    position: relative;
    opacity: 100%;

}

.hexagon1 {
    position: absolute;
    top: 0%;
    left: calc(50% - 50px);
}

.hexagon6 {
    position: absolute;
    top: calc(var(--height)*.15);
    left: calc(27% - 50px);
}

.hexagon2 {
    position: absolute;
    top: calc(var(--height)*.15);
    left: calc(73% - 50px);
}

.hexagon5 {
    position: absolute;
    top: calc(var(--height)*.45);
    left: calc(27% - 50px);
}

.hexagon3 {
    position: absolute;
    top: calc(var(--height)*.45);
    left: calc(73% - 50px);
}

.hexagon4 {
    position: absolute;
    top: calc(var(--height)*.6);
    left: calc(50% - 50px);
}

.hexagon i {
    /* color: grey; */
    font-size: 30px;
    /* Adjust font size as necessary */
    text-align: center;
}


.hexagon.active {
    /* transform: scale(1.1); */
    /* background-color: #4CAF50; */
    opacity: 100%;
    background-color: #141414;

}

.hexagon.active i {
    /* color: #fff; */
    border-bottom: 2px solid white;
    animation: spin .2s 0s forwards;

}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes squash {
    0% {
        transform: scale(1);
        height: 300px;
    }

    100% {
        transform: scale(.1);
        height: 10px;
    }
}

@keyframes expand {
    0% {
        transform: scale(.1);
        height: 10px;
    }

    100% {
        transform: scale(1);
        height: 300px;
    }
}

#voteDiv {
    max-height: 550px; /* Adjust based on your needs */
    overflow-y: auto; 
    overflow-x: hidden;
    background: #f0f0f00c; /* Light gray background */
    border: 2px solid rgba(0, 0, 0, 0.156); /* Light gray border */
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-around;
    gap: 5px; /* Space between buttons */
}

#playersWaitingDiv{
    display: flex;
    min-width: 300px;
    flex-direction: column;
    /* font-size: 20px; */
    /* border-block: 2px solid rgba(255, 255, 255, 0.381); */
    padding: 3% 1%;
    /* background:linear-gradient(135deg, hsl(210, 6%, 14%) 10%, hsl(210, 4%, 29%) 50%, hsl(216, 3%, 32%) 100%); */
    /* z-index: 5; */
}

.player-row-div{
    display: grid;
    grid-template-columns: 50% 25% 25%;
    justify-content: space-around;
    align-items: center;
    width:100%;
    border-top: 1px solid rgba(255, 255, 255, 0.234);
    padding-top: 3%;
    padding-bottom: 3%;
    opacity: 10%;
    text-align: left;
}



.player-row-div > div:first-child {
    flex: 0 1 40%; /* no grow, yes shrink, basis of 50% */
    min-width: 0; /* Ensures the div can shrink below its content size if needed (prevent overflow) */
    white-space: normal; 
}

#promptText{
    margin-block: 15px;
    font-size: 30px;
}

#responseInput, #promptInput {
    /* display: block; */
    /* width:100%; */
    font-family: comfortta, sans-serif;
    font-size: 1rem;
    width: calc(100% - 22px);
    height: 100px;
    /* Account for padding and border */
    margin: 10px 0;
    margin-top:0;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 12px;
    background-color: #00000000;
    color: black;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#responseInput::placeholder, #promptInput::placeholder {
    color: black;
    font-size: clamp(0.5rem, 1rem, 25px);
    opacity: 50%;
}

#responseInput:focus,  #promptInput:focus {
    outline: none;
}

#responseSubmitBtn, #promptSubmitBtn {
    background-color: #ff006e;
    background-color: #1f2224;
    margin-top:0px;
    margin-bottom: 10px;
    /* color: #ffbe0b; */
    font-family: Comfortaa, sans-serif;
    font-size: clamp(1em, 2vh, 25px);
    font-weight: bold;
    border-radius: 10% / 50%;
    border: 15px solid white;
    color:white;
}

#responseSubmitBtn:disabled, #promptSubmitBtn:disabled {
    background-color: #dddddd;
    opacity: 50%;
    font-size: clamp(1em, 2vh, 25px);
    color: rgba(255, 255, 255, 0.445)
}

#duplicateResponse{
    font-size: 15px;
    color:red;
}


#ownResponsesList, #ownPromptList {
    max-height: 200px; /* Adjust this value as needed */
    overflow-y: auto;
    border: 2px solid #ccc;
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
}

#ownResponsesList div, #ownPromptList div {
    padding: 5px;
    border-bottom: 1px solid #eee;
}

#ownResponsesList div:last-child, #ownPromptList div:last-child {
    border-bottom: none;
}

.response-container {
    width: 350px;
    /* border: 1px solid #000; */
    padding: 20px;
    margin: 50px auto;
    text-align: center;
    overflow: hidden;
}

#response-container .player-name {
    visibility: hidden;
    position: relative;
    font-size: 30px;
    color: lightskyblue;
    margin-bottom: 10px;
    transition: all 1s ease;  
}

.response-element {
    visibility: hidden;
    position: relative;
    font-size: 30px;
    margin-bottom: 40px;
    transition: all 1s ease;
}

.status-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
}

#dead-end-text {
    /* border: 1px solid #000; */
    padding: 5px;
    color:white;
    text-shadow: -1px -1px 0 whitesmoke, 1px -1px 0 whitesmoke, -1px 1px 0 whitesmoke, 1px 1px 0 whitesmoke;
    opacity:100%;
}

#response-icon {
    visibility: hidden;
    font-size: 30px;
    text-shadow: -1px -1px 0 whitesmoke, 1px -1px 0 whitesmoke, -1px 1px 0 whitesmoke, 1px 1px 0 whitesmoke;
    color:black;
}

#skull-icon {
    font-size: 30px;
    /* border: 1px solid #000; */
    padding: 5px;
    opacity: 10%;
    color:black;
}

#points {
    visibility: hidden;
}

.dead-end-player {
    margin-top: 10px;
    color:black;
}

.slide-down{
    animation: slide-down .2s 0s forwards;
}

.slide-right{
    animation: slide-right .2s 0s forwards;
}

@keyframes slide-down {
    0% {
        transform: translateY(-300%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

.prompt{
    width: 100%;
    min-width: 350px;
}

#voteResultsMessage1Div{
    color:black;
    font-size: 20px;
    animation: appear 2.25s 0.25s backwards;
}

#voteResultsPromptDiv{
    color:lightskyblue;
    animation: appear 2.5s 0.5s backwards;
}

#voteResultsMessage2Div{
    color:black;
    font-size: 20px;
    animation: appear 2.25s 0.75s backwards;
}

#voteResultsPlayerNameDiv{
    color:lightskyblue;
    animation: appear 1.5s 1.5s backwards;
}

#voteResultsPoints{
    color:lightskyblue;
    font-size: 15px;
    animation: appear 1.5s 1.75s backwards;
}

@keyframes appear {
    0% {
        opacity:0%;
    }

    100% {
        opacity:100%;;
    }
}

#voteDiv button{
    border:none;
    border-radius: 150px;
    font-family: Comfortaa, sans-serif;
    min-width: 325px;
    margin-top: 2px;
    color:black;
}

.hidden{
    display: none !important; 
}