/* fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,500;9..40,700&display=swap');

:root {
    
    /* theme background */
    --light-background : #f6f6db;
    /* --dark-background : #373732; */
    --dark-background : #232322;

    /* theme element color */
    --light-primary : #373732;
    --dark-primary : #f6f6db;

    /* theme element color */
    --light-disabled : #DADAC4;
    --dark-disabled : #494946;

    /* pins colors */
    --red : #D48080;
    --blue : #8386D5;
    --green : #8FBF96;
    --rame : #D6976D;
    --pink : #F2CACA;
    --olive : #D3DA82;
    --brown : #938677;
    --purple : #5d4669;

    /* rgb */
    --red : rgb(212, 128, 128);
    --blue : rgb(131, 134, 213);
    --green : rgb(143, 191, 150);
    --rame : rgb(214, 151, 109);
    --pink : rgb(242, 202, 202);
    --olive : rgb(211, 218, 130);
    --brown : rgb(147, 134, 119);
    --purple : rgb(93, 70, 105);

}

body {
    background-color: var(--light-background) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode {
    background-color: var(--dark-background) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-switch {
    border-radius: 15px;
    padding-block: 5px; padding-inline: 10px;
    background-color: var(--light-primary);
    position: absolute; right: 2rem;
    color: var(--light-background); font-size: 18px;
}
.theme-switch-dark {
    background-color: var(--dark-primary);
    position: absolute; right: 2rem;
    color: var(--dark-background); font-size: 18px;
}

/* [modal] */

.modal-body {
    flex-direction: column;
    display: flex; justify-content: start; align-items: center;
    height: max-content; background-color: var(--light-primary);
    border-radius: 28px; padding-bottom: 3rem !important;
}
.modal-body-dark {
    flex-direction: column;
    height: max-content; background-color: var(--dark-primary);
    border-radius: 28px; padding-bottom: 3rem !important;
}

.modal-close-button {
    display: flex; justify-content: center; align-items: center;
    top: -3rem; right: -3rem;position: absolute;
    padding: 5px; height: 50px; width: 50px;border-radius: 50%;
    background-color: var(--light-primary); color: var(--light-background);
    border: none;
}
.modal-close-button-dark {
    display: flex; justify-content: center; align-items: center;
    top: -3rem; right: -3rem;position: absolute;
    padding: 5px; height: 50px; width: 50px;border-radius: 50%;
    background-color: var(--dark-primary); color: var(--dark-background);
    border: none;
}

.modal-win {
    outline: 10px solid var(--green);
}
.modal-lose {
    outline: 10px solid var(--red);
}

.modal-title {
    font-family: 'DM Sans', sans-serif; color: var(--light-background);
    font-size: min(max(90px), 5rem);; font-weight: bold;
}
.modal-title-dark {
    font-family: 'DM Sans', sans-serif; color: var(--light-background);
    font-size: 90px; font-weight: bold;
}

.modal-subtitle {
    font-family: 'DM Sans', sans-serif; color: var(--light-background);
    font-size: min(max(30px), 1.5rem); font-weight: 500;
}
.modal-subtitle-dark {
    font-family: 'DM Sans', sans-serif; color: var(--dark-background);
    font-size: min(max(30px), 1.5rem); font-weight: 500;
}

.modal-text {
    font-family: 'DM Sans', sans-serif; color: var(--light-background);
    font-size: min(max(20px), 1.5rem); font-weight: 500;
}
.modal-text-dark {
    font-family: 'DM Sans', sans-serif; color: var(--dark-background);
    font-size: min(max(20px), 1.5rem); font-weight: 500;
}

.modal-content {
    width: 85% !important;
}

.modal-content-wrap {
    width: 65%; padding-top: 2rem;
    display: flex; justify-content: space-between; align-items: center;
}

.modal-dialog-centered {
    justify-content: center;
}

/* [cursor] */
.cursor {
    position: fixed;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    left: -100px;
    top: 50%;
    z-index: 10000;
    height: 30px;
    width: 30px;
    transition: all 0.1s ease-out;
  }

/* [navbar] */

.navnav {
    padding-inline: 30px;
    width: 100%; height: auto;
    display: flex; justify-content: start; align-items: center;
}

.logo-wrap {
    text-decoration: none;
    position: absolute; top: 2.1rem;
    display: flex; justify-content: center; align-items: center; gap: 15px;
}

.logo-img {
    display: block;
    width: 50px; height: auto;
}
.logo-img-dark {
    display: none;
    width: 40px; height: auto;
}

.logo-img-2 {
    display: none;
    width: 40px; height: auto;
}
.logo-img-2-dark {
    display: block;
    width: 40px; height: auto;
}

.logo-txt-1h {
    font-family: 'DM Sans', sans-serif; color: var(--light-primary);
    font-size: 30px; font-weight: 500;
}
.logo-txt-1h-dark {
    font-family: 'DM Sans', sans-serif; color: var(--dark-primary);
    font-size: 30px; font-weight: 500;
}

.logo-txt-2h {
    font-family: 'DM Sans', sans-serif; color: var(--light-primary);
    font-size: 30px; font-weight: 300;
}
.logo-txt-2h-dark {
    font-family: 'DM Sans', sans-serif; color: var(--dark-primary);
    font-size: 30px; font-weight: 300;
}

.indicators-wrap {
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
}

/* [GameTable] */

#GameTable {
    display: flex; justify-content: start; align-items: center; flex-direction: column;
    padding-top: 2.5rem;
    height: max-content;
}

/* === Grid === */

/* row */

.row-wrap {
    display: flex; justify-content: center; align-items: center; gap: 24px;
    padding-right: 115px;
}

.game_grid_row {
    display: flex; justify-content: center; align-items: center; 
    width: max-content; height: 80px;
    border-bottom: 1.5px solid var(--light-primary);
    border-inline: 1.5px solid var(--light-primary);
}
.game_grid_row-dark {
    display: flex; justify-content: center; align-items: center; 
    width: max-content; height: 80px;
    border-bottom: 1.5px solid var(--dark-primary);
    border-inline: 1.5px solid var(--dark-primary);
}

.last-row {
    border-top: 1.5px solid var(--light-primary);
}
.last-row-dark {
    border-top: 1.5px solid var(--dark-primary);
}

.hint_pins {
    padding: 24px; gap: 15px;
    width: max-content; height: auto; 
    display: flex; justify-content: center; align-items: center; 
    flex-direction: column;
}

.hint_pins-row {
    display: flex; justify-content: center; align-items: center; 
    gap: 15px;
}

.guess_pins {
    /* padding: 28px; gap: 30px; */
    padding: 25px; gap: 30px;
    display: flex; justify-content: space-between; align-items: center;
    border-left: 1.5px solid var(--light-primary);
}
.guess_pins-dark {
    /* padding: 28px; gap: 30px; */
    padding: 25px; gap: 30px;
    display: flex; justify-content: space-between; align-items: center;
    border-left: 1.5px solid var(--dark-primary);
}

.mystery_pins {
    padding: 25px; gap: 30px; border-radius: 50%;
    display: flex; justify-content: space-between; align-items: center;
}
.mystery_pins-dark {
    padding: 25px; gap: 30px; border-radius: 50%;
    display: flex; justify-content: space-between; align-items: center;
}

/* [palette] */

.action_container {
    margin-top: 30px;
    width: 100%;
    gap: 0.75rem;
    display: flex; justify-content: center; align-items: center;
}

.palette_box {
    width: max-content; height: auto;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    border: 1.5px solid var(--light-primary);
}
.palette_box-dark {
    width: max-content; height: auto;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    border: 1.5px solid var(--dark-primary);
}

.palette_wrap {
    padding-inline: 98px; padding-block: 15px; gap: 15px;
    display: flex; justify-content: space-between; align-items: center; flex-direction: column;
}

.palette_pins {
    gap: 30px;
    display: flex; justify-content: space-between; align-items: center;
}


/* [pins] */

.hint-pin {
    width: 12px; height: 12px; border-radius: 50%;
}

.guess-pin {
    /* width: 24px; height: 24px; border-radius: 50%; */
    width: 30px; height: 30px; border-radius: 50%;
}

.mystery-pin {
    /* width: 24px; height: 24px; border-radius: 50%; */
    width: 30px; height: 30px; border-radius: 50%;
}

    .red-pin {
        background-color: var(--red);
    }
    
    .blue-pin {
        background-color: var(--blue);
    }
    
    .green-pin {
        background-color: var(--green);
    }
    
    .rame-pin {
        background-color: var(--rame);
    }
    
    .pink-pin {
        background-color: var(--pink);
    }
    
    .olive-pin {
        background-color: var(--olive);
    }
    
    .brown-pin {
        background-color: var(--brown);
    }

    .purple-pin {
        background-color: var(--purple);
    }

    .active-guess-pin {
        background-color: var(--light-background);
        border: 2px solid var(--light-disabled);
    }

    .active-guess-pin-dark {
        background-color: var(--dark-background);
        border: 2px solid var(--dark-disabled);
    }

    .half-guessed-hint-pin {
        border: 1.5px solid var(--light-primary);
    }
    .half-guessed-hint-pin-dark {
        border: 1.5px solid var(--dark-primary);
    }

    .full-guessed-hint-pin {
        background-color: var(--light-primary);
    }
    .full-guessed-hint-pin-dark {
        background-color: var(--dark-primary);
    }

    /* [disabled] */

    .disabled-hint-pin {
        background-color: var(--light-disabled);
    }

    .disabled-hint-pin-dark {
        background-color: var(--dark-disabled);
    }

    .disabled-guess-pin {
        background-color: var(--light-disabled);
    }
    .disabled-guess-pin-dark {
        background-color: var(--dark-disabled);
    }

/* buttons and text */

.toast-container {
    position: absolute; top: 7.5rem;
}

.submit-button-wrap {
    width: max-content; height: auto;
    display: flex; justify-content: center; align-items: center; 
}

.modal-button-wrap {
    width: 75%; height: auto;
    display: flex; justify-content: center; align-items: center; 
}

.timer-wrap {
    max-width: 80px; height: auto;
    display: flex; justify-content: center; align-items: center; 
}

.submit-button {
    transition: all .2s ease-in-out;
    display: flex; justify-content: center; align-items: center;
    border: none; padding-inline: 20px; padding-block: 7px;
    background-color: var(--light-primary); border-radius: 28px;
    color: var(--light-background); font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif;
}
.submit-button-dark {
    transition: all .2s ease-in;
    display: flex; justify-content: center; align-items: center;
    border: none; padding-inline: 20px; padding-block: 7px;
    background-color: var(--dark-primary); border-radius: 28px;
    color: var(--dark-background); font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif;
}

.modal-button {
    width: 95%; gap: .5rem;
    transition: all .2s ease-in-out;
    display: flex; justify-content: center; align-items: center;
    border: none; padding-inline: 20px; padding-block: 7px;
    background-color: var(--light-primary); border-radius: 28px;
    color: var(--light-background); font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif;
}
.modal-button-dark {
    width: 95%; gap: .5rem;
    transition: all .2s ease-in;
    display: flex; justify-content: center; align-items: center;
    border: none; padding-inline: 20px; padding-block: 7px;
    background-color: var(--dark-primary); border-radius: 28px;
    color: var(--dark-background); font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif;
}

.submit-button-alert {
    transition: all .2s ease-in-out;
    display: flex; justify-content: center; align-items: center;
    border: none; padding-inline: 20px; padding-block: 7px;
    background-color: var(--red); border-radius: 28px;
    color: var(--light-background); font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif;
}

/* .submit-button:hover, .submit-button-dark:hover {transition: all .2s ease-in; transform: scale(1.1);} */

.hidden {
    visibility: hidden;
}

.small-submit {
    display: none;
}

.big-submit {
    display: block;
}

.forced-hidden {
    display: none !important;
}