/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    /* width: 100%; */
    max-width: 500px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: 'Comfortaa', sans-serif;
    background-color: #ff006e;
    background-color: #bde0fe;
    background-color: #ffbe0b;
    background: linear-gradient(to right, #aec3b0, #598392, #124559);
    background: linear-gradient(to right, #495057, #343a40, #212529);

    color: white;
    /* Prevents scrolling */
    overflow: hidden;
}

header {
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    padding: 10px;
}

header h1 {
    margin: 0;
}

#logo {
    width: 0%
}

.icon-btn {
    background-color: #333333;
    border: none;
    color: white;
    /* Adjust the color to fit your design */
    border: 1px solid #424242;
    border-radius: 50%;
    height: 34px;
    width: 34px;
    text-align: center;
    cursor: pointer;
    font-size: 25px;
    /* Adjust size as needed */
    /* margin: 0 10px; Add some space around the icons */
}

.icon-btn:hover {
    color: #ccc;
    /* Change color on hover for visual feedback */
}

.icon-btn:disabled {
    color: #515151;
    /* Change color on hover for visual feedback */
}

.pulse {
    animation: pulse 0.4s linear infinite alternate-reverse;
    color: red;
}

/* Safari */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(80%);
    }

    100% {
        -webkit-transform: scale(100%);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(85%);
    }

    100% {
        -webkit-transform: scale(100%);
    }
}

main {
    padding-inline: 5%;
}

.intro-text {
    margin-top: 10px;
}

.grayed-out {
    opacity: 10%;
}

#promptSection {
    display: flex;
    justify-content: space-between;
    margin-block: 20px;
    margin-top: 5px;
}

#promptInput {
    font-family: 'Comfortaa', sans-serif;
    padding: 10px;
    margin-right: 10px;
    width: calc(100% - 55px);
    font-size: clamp(1em, 4.5vw, 40px);
    /* letter-spacing: 3px; */
    text-transform: uppercase;
    background-color: #00000000;
    color: rgb(255, 255, 255);
    border: 5px solid #ffffff;
    border-radius: 10% / 50%;
}

#promptInput:focus {
    outline: 2px solid #124559;
    /* Change 'blue' to your preferred color */
}

input::placeholder {
    color: rgb(255, 255, 255);
    font-size: clamp(.4em, 3vw, 15px);
    padding-top: -30px;
}

#submitBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Ensure proper positioning context for absolute children */
    padding: 5px;
    background-color: #ff006f00;
    color: white;
    font-family: Comfortaa, sans-serif;
    font-size: clamp(1em, 4vw, 20px);
    font-weight: bold;
    border-radius: 10% / 20%;
    border: 5px solid white;
    cursor: pointer;
    width: 40%;
    /* height: 40%; */
}

#submitBtnText {
    /* Ensure the text is also centered if displayed alongside the progress circle */
    display: flex;
    justify-content: center;
    align-items: center;
}

#submitBtn:disabled {
    background-color: #ffffff97;
    /* Greyed out color */
    color: #fcfcfc;
    cursor: not-allowed;
    /* Cursor indicates the button is disabled */
}

#progressCircle {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #000;
    width: 25px;
    height: 25px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
    margin: auto;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

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

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

#wordsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 64vh;
    max-height: 64vh;
    /* Adjust based on your needs */
    /* Placeholder for ChatGPT API background */
    /* background-size: cover;
    background-position-y: 125px; */
    position: relative;
    font-size: 20px;
    font-variant: small-caps;
    color: white;
    margin-top: -20px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {

    /* Adjust the max-width as needed for targeting mobile devices */
    #wordsContainer {
        height: 65vh;
        max-height: 65vh;
    }
}

/* Media query for iPads and similar tablets in both portrait and landscape */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Covers standard iPad resolutions */
    #wordsContainer {
        height: 60vh;
        max-height: 60vh;
    }
}

/* Optionally, for newer iPads with higher resolutions */
@media (min-width: 1025px) and (max-width: 1366px) {
    #wordsContainer {
        height: 50vh;
        max-height: 50vh;
    }
}

#gameMessage {
    background-color: black;
    color: white;
    padding: 10px;
    margin-top: 20px;
    /* Adjust based on your layout */
    border-radius: 8px;
    /* Rounded corners */
    text-align: center;
    /* Center the text */
    position: absolute;
    width: 94%;
    bottom: 0px;
    bottom: 0lvh;
    /* Position it at the bottom of the wordsContainer */
    /* left: 10px; Align with the container's left edge */
}

#backgroundImageContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('Assets/Images/prompt_1.png');
    background-size: cover;
    /* Cover the entire container */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    filter: brightness(50%);
    /* Apply the filter */
    z-index: -1;
    /* Ensure it's behind the content */
}

.wordBubble {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 10px;
    width: 100px;
    /* Adjust based on your needs */
    height: 90px;
    /* background-color: rgba(4, 4, 4, 0.794); */
    /* background: radial-gradient(circle at 100px 100px, #5cabff, #000); */
    background: radial-gradient(circle at 100px 100px, #5d5d5d92, #000);
    text-align: center;
    border-radius: 50%;
    animation-name: float;
    /* Name of the animation */
    /* Common animation properties */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    cursor: pointer;
    position: absolute;
    z-index: 1;
}

.large-word-bubble {
    width: 120px;
    /* Adjust based on your needs */
    height: 100px;
}

.wordBubble.obvious {
    /* background-color: rgba(255, 0, 0, 0.763); */
    background: radial-gradient(circle at 100px 100px, #e91f0992, #cf0202);
    color: white;
    /* animation-name: floatUp; */
    /* This will float upwards */
    /* animation-duration: 24s; */
    /* Adjust duration as needed */
}

.wordBubble.leastObvious {
    /* background-color: rgba(255, 217, 0, 0.924); */
    background: radial-gradient(circle at 100px 100px, #e3df04df, #a79905);
    color: white;
    /* animation-name: floatDown; */
    /* This will float downwards */
    /* animation-duration: 24s; */
    /* Adjust duration as needed, should match the 'obvious' duration */
}

.wordBubble.clicked {
    background-color: #ccc;
    color: #8e8e8e;
    border: 2px solid #666;
    /* filter: brightness(50%); */
    text-decoration: line-through;
    /* Add other styles as needed to indicate the clicked state */
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Keyframes for floating upwards */
@keyframes floatUp {
    0%, 100% {
        transform: translateY(-50px);
    }

    50% {
        transform: translateY(50px);
    }
}

/* Keyframes for floating downwards */
@keyframes floatDown {
    0%, 100% {
        transform: translateY(50px);
    }

    50% {
        transform: translateY(-50px);
    }
}

/* Modal CSS */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    color: black;
    margin: 5% auto;
    padding: 10px;
    width: 90%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* player popup styles */
.player-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.4);
}

.player-modal-content {
    background-color: #fefefe;
    color: rgb(0, 0, 0);
    margin: 10% auto;
    /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    /* Could adjust based on preference */
    height: 90%;
    /* Adjust for mobile responsiveness */
    position: relative;
}

.assign-score {
    background-color: #fefefe;
    color: rgb(0, 0, 0);
    margin: 10% auto;
    /* 10% from the top and centered */
    padding: 10px;
    border: 1px solid #888;
    width: 50%;
    /* Could adjust based on preference */
    /* height: 50%; Adjust for mobile responsiveness */
    position: relative;
    top: 20%;
}

.scoresAssignList {
    border: 1px solid rgba(232, 232, 232, 0.305);
    margin-bottom: 10px;
    padding: 10px;
}

.playerScoreAssign-item {
    display: flex;
    justify-content: space-between;
    margin-block: 3px;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border: 1px solid rgba(219, 219, 219, 0.228);
}

/* Highlight style for selected player */
.selected-player {
    border: 2px solid #4CAF50;
    /* Highlight color */
    padding: 15px;
    margin: -2px 0;
    /* Adjust margin to compensate for the added border */
}

.scrollable-list {
    overflow-y: auto;
    max-height: 80%;
    /* Adjust based on content */
    margin-top: 20px;
}

#confirmScoreBtn, #cancelScoreBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    background-color: #000000;
    color: white;
    font-family: Comfortaa, sans-serif;
    font-size: clamp(1em, 4vw, 20px);
    font-weight: bold;
    border-radius: 3px;
    border: 2px solid rgb(0, 0, 0);
    cursor: pointer;
    width: 100%;
    height: 40px;
}

#confirmScoreBtn:disabled {
    background-color: #d7d7d797;
    border: none;
    /* Greyed out color */
    color: #fcfcfc;
    cursor: not-allowed;
    /* Cursor indicates the button is disabled */
}

#addPlayerBtn, #playerNameInput {
    margin-top: 10px;
}

.player-modal-content h2,
.player-modal-content #roundNumber {
    text-align: center;
}

#addPlayerBtn, #doneBtn {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    position: relative;
    /* Ensure proper positioning context for absolute children */
    padding: 10px;
    background-color: black;
    color: white;
    font-family: Comfortaa, sans-serif;
    font-size: clamp(1em, 4vw, 40px);
    font-weight: bold;
    border-radius: 5%;
    border: 2px solid white;
    cursor: pointer;
    width: 30%;
    /* height: 40%; */
}

#addPlayerBtn:disabled {
    background-color: rgb(229, 227, 227);
    color: white;
    cursor: not-allowed;
}

#playerNameInput {
    font-family: 'Comfortaa', sans-serif;
    padding: 10px;
    margin-right: 10px;
    width: calc(80% - 55px);
    font-size: clamp(1em, 4.5vw, 40px);
    /* letter-spacing: 3px; */
    text-transform: uppercase;
    background-color: #00000000;
    color: rgb(0, 0, 0);
    border: 2px solid #000000;
    border-radius: 10% / 50%;
}

#playerNameInput::placeholder {
    color: rgb(0, 0, 0);
    font-size: clamp(.4em, 3vw, 15px);
    padding-top: -30px;
}

#playerList, #scoresList {
    border: 1px solid black;
    min-height: 10vh;
    margin-bottom: 30px;
    /* padding: 10px; */
}

.player-item {
    display: flex;
    justify-content: space-between;
    margin-block: 10px;
    padding: 10px;
    background-color: black;
    color: white;
    border: 1px solid black;
}

#startGameBtn {
    position: absolute;
    width: 94%;
    bottom: 70px;
    bottom: 8lvh;
    display: block;
    justify-content: center;
    align-items: center;
    margin: 2px auto;
    padding: 5px 20px;
    background-color: #ff006f00;
    color: white;
    font-family: Comfortaa, sans-serif;
    font-size: clamp(1em, 4vw, 20px);
    font-weight: bold;
    border-radius: 10% / 50%;
    border: 5px solid white;
    cursor: pointer;
    width: 60%;
    /* height: 40%; */
}

#startGameBtn:disabled {
    opacity: 10%;
    /* background-color: #ffffff97; */
    /* Greyed out color */
    /* color: #fcfcfc; */
    cursor: not-allowed;
    /* Cursor indicates the button is disabled */
}

.bonus-points-text {
    display: none;
    position: absolute;
    text-align: center;
    font-size: small;
    top: 0;
    left: 0;
    padding: 5px;
    width: 50px;
    height: 50px;
    border: 3px solid rgb(226, 13, 13);
    border-radius: 50%;
    background-color: red;
}

.animated-bonus {
    animation: flyInRotate 1s forwards;
}

@keyframes flyInRotate {
    0% {
        transform: translateX(-500%) rotate(0deg) scale(1);
        filter: brightness(1);
        opacity: 0.5;
    }

    75% {
        transform: translateX(50%) rotate(360deg) scale(1.5);
        filter: brightness(1.5);
        opacity: 0.75;
    }

    100% {
        transform: translateX(0%) rotate(0deg) scale(1);
        filter: brightness(1);
        opacity: 1;
    }
}



@keyframes buttonFlash {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
        /* opacity: 0%; */
    }

    50% {
        transform: scale(1.5);
        filter: brightness(1.5);
    }
}