* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Gloria Hallelujah", cursive, "Roboto", sans-serif, serif;
    font-weight: 700;
    font-style: normal;
}

:root {
    --background: #111111;
    --grid-items: #d9d7d7;
    --grid-item-hover: #bdbdbd;
    --grid-item-active: #a2a2a2;
    --shadow: #303030;
    --turn-indicator: #a3a3a3;

    --playerX: #249ebf;
    --playerXShadow: #1e4482;
    --playerO: #dd2427;
    --playerOShadow: #691112;
    --tie: #FFD966;
    --tieShadow: #5e4600;

    --noHover: #be1e21;
    --noShadowHover: #580f10;
    --noActive: #a5191b;
    --noShadowActive: #3d0a0b;

    --yesHover: #1f87a3;
    --yesActive: #2186a1;
    --yesShadowHover: #193768;
    --yesShadowActive: #122749;

    --buttonHover: #dfb945;
    --buttonShadowHover: #604701;
    --buttonActive: #d0ac40;
    --buttonShadowActive: #4e3901;

    --grayText: #f2f2f2;
    --gray-text-shadow: #696969;
    --gray-text-shadow-dark: #494949;
}

/* BACKGROUND */

body, html {
    overflow-x: hidden;
    height: 100%;
    background-color: var(--background);
}

.game-container {
    background-color: var(--background);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    padding: 2em;
    gap: 2em;

    min-height: 100vh;
    height: auto;
    min-width: 100vw;
}

/* HEADER */

.header {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;

    width: 70vw;
    max-width: 100%;  
    height: fit-content;

    padding: 2w;
    gap: 2em;  

    flex-wrap: wrap; 
}

.turn-indicator {
    background-color: var(--shadow);
    padding: 0.5em;
    padding-right: 1.5em;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 1.5em;

    color: var(--playerX);
    text-shadow: 0 0 0.1em var(--playerXShadow);
}

#restart {
	background: var(--grayText);
	color: var(--gray-text-shadow);
	
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;

    border-radius: 1.5em;
    border: none;

    box-shadow: 0 0 0.5em var(--shadow);

    transition: transform 0.2s ease-in-out,
        translateY 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
}

#restart:hover {
    background-color: var(--gray-text-shadow-dark);
    box-shadow: inset 0 0 0.5em var(--shadow);
}

#restart:active {
    background-color: var(--shadow);
    box-shadow: inset 0 0 0.5em var(--background);
    transform: scale(0.95);
}

/* GRID */

#grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

    min-width: min(55vw, 80vh);
    min-height: min(55vw, 80vh);
    width: auto;
    height: auto;

    gap: 1.5em;
    padding: 1.5em;
    background-color: var(--shadow);

    border-radius: 2em;
}

.grid-item {
    background-color: var(--grid-items);
    border-radius: 1em;
    box-shadow: inset 0 0 0.5em var(--background);

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    transition: transform 0.2s ease-in-out,
            translateY 0.2s ease-in-out,
            background-color 0.2s ease-in-out;
}

.grid-item img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.grid-item:hover {
    background-color: var(--grid-item-hover);
    box-shadow: inset 0 0 1em var(--background);
}

.grid-item:active {
    background-color: var(--grid-item-active);
    transform: scale(0.92) translateY(0.2em);
    box-shadow: inset 0 0 1.2em var(--background);
}

/* SCORE INDICATOR */

.score-container {
    width: 90vw;
    height: auto;

    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2em;

    flex-wrap: wrap;
}

.score {
    width: 22vw;
    height: auto;
    padding: 1em;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border-radius: 1.5em;

    color: var(--grayText);
    text-shadow: 0 0 0.2em var(--background);
}

.score > h2 {
    font-size: calc(2em + 2vw);
}

.score-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

#playerX {
    background-color: var(--playerX);
    box-shadow: inset 0 0 0.5em var(--playerXShadow);
}

#playerO {
    background-color: var(--playerO);
    box-shadow: inset 0 0 0.5em var(--playerOShadow);
}

#tie {
    background-color: var(--tie);
    box-shadow: inset 0 0 0.5em var(--tieShadow);
    flex-shrink: 0;
}

/* IMGS */

.non-game-mark {
    max-width: 8em;
    max-height: 8em; 
    height: auto;
    width: auto;
    object-fit: contain;
}

.header > img {
    display: block;
    max-width: clamp(2em, 30vw, 8em); 
    height: auto;
}

.turn-indicator > img,
.icon  {
    height: clamp(2em, 30vw, 5em);
    width: auto;
}

/* MEDIA QUERIES */
@media (max-width: 800px) {
    .header,
    .score-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .score-container {
        justify-content: stretch;
        width: 80vw;
    }

    #grid-container {
        width: 80vw;
        height: 80vw;
        padding: 1em;
        gap: 1em;

        margin: 0 auto;  
    }

    .score {
        width: 100%;
        font-size: 1.2em;
    }

    .game-container {
        padding: 1em;
        align-items: center; 
    }

    .turn-indicator, #restart {
        width: 100%;
    }

    .modal > div > h1 {
        font-size: calc(80vw + 1em);
    }
}

@media (max-width: 1200px) {
    .modal {
        height: 30vw;
    }
}

/* MODALS */

.modal-background {
    position: absolute;
    top: 0;
    left: 0;
    
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;

    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    pointer-events: auto;
    transition: opacity 0.2s ease-in-out;

    overflow-y: auto;
    padding: 2em;

    opacity: 100;
}

.modal {
    background-color: var(--grayText);
    padding: 1em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    border-radius: 1em;
    width: 80vw;
    height: 50vh;

    display: flex;
    justify-content: center;
    align-items: center;

    pointer-events: auto;

    flex-direction: column;
    box-shadow: inset 0 0 1em var(--background),
                0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal > button {
    background-color: var(--tie);
    box-shadow: inset 0 0 0.5em var(--tieShadow),
                0 0 0.5em rgba(0, 0, 0, 0.5);
    border-radius: 1em;
    padding: 1em;
    border: none;

    width: 30vw;
    height: auto;

    font-size: calc(0.5vw + 1em);


    transition: transform 0.2s ease-in-out,
            translateY 0.2s ease-in-out,
            background-color 0.2s ease-in-out;
}

.modal > button:hover {
    background-color: var(--buttonHover);
    box-shadow: inset 0 0 0.5em var(--buttonShadowHover),
                0 0 0.5em rgba(0, 0, 0, 0.5);
    transform: scale(0.99);
}

.modal  > button:active {
    background-color: var(--buttonActive);
    box-shadow: inset 0 0 0.5em var(--buttonShadowActive),
                0 0 0.5em rgba(0, 0, 0, 0.5);
    transform: scale(0.97) translateY(0.2em);
}

.modal > div > h1 {
    font-size: calc(4vw + 1em);
}

.modal > h1 {
    justify-self: center;
    text-align: center;

    font-size: calc(1vw + 2em);
}

.modal .button-container {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 70%;
    gap: 5%;
}

.modal .button-container button {
    border-radius: 1em;
    padding: 1em;
    border: none;

    width: 20vw;
    height: auto;

    font-size: calc(1vw + 1em);

    transition: transform 0.2s ease-in-out,
            translateY 0.2s ease-in-out,
            background-color 0.2s ease-in-out;
}

#no {
    background-color: var(--playerO);
    box-shadow: inset 0 0 0.5em var(--playerOShadow),
                0 0 0.5em rgba(0, 0, 0, 0.5);
}

#yes {
    background-color: var(--playerX);
    box-shadow: inset 0 0 0.5em var(--playerXShadow),
                0 0 0.5em rgba(0, 0, 0, 0.5);
}

#no:hover {
    background-color: var(--noHover);
    box-shadow: inset 0 0 0.5em var(--noShadowHover),
                0 0 0.5em rgba(0, 0, 0, 0.5);
    transform: scale(0.99);
}

#no:active {
    background-color: var(--noActive);
    box-shadow: inset 0 0 0.5em var(--noShadowActive),
                0 0 0.5em rgba(0, 0, 0, 0.5);
    transform: scale(0.97) translateY(0.2em);
}

#yes:hover {
    background-color: var(--yesHover);
    box-shadow: inset 0 0 0.5em var(--yesShadowHover),
                0 0 0.5em rgba(0, 0, 0, 0.5);
    transform: scale(0.99);
}

#yes:active {
    background-color: var(--yesActive);
    box-shadow: inset 0 0 0.5em var(--yesShadowActive),
                0 0 0.5em rgba(0, 0, 0, 0.5);
    transform: scale(0.97) translateY(0.2em);
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

#winner {
    display: flex;
    align-items: center;
    justify-content: center;
    
    gap: 1em;
}

/* Z-Indexes */

.modal-background {
    z-index: 999;
}

.modal {
    z-index: 1000;
}