/* Index.
* 1. CSS Reset.
* 2. CSS Variable and color palette.
* 3. Font.
* 4. Layout: 
*   a. Body and Main
*   b. Board
*   c. End game state on section.board
*   d. Footer
*   e. Player Name and Play Again
*   f. Start button
*   g. Change Name and switch Human / Bot buttons
*   h. Change Name card
* 5. Style:
*   a. Body and Main
*   b. Header and Player Name Text
*   c. End Game State
*   d. Board
*   e. Footer
*   f. Buttons
*   g. Radio Buttons
*   h. Change Name Card
*/

/* 1. CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*  2. CSS variables
    Color Palette: Tailwind Zinc 
*/
:root {
    --zinc-50: #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;

    --emerald-400: #34d399;
    --emerald-700: #047857;
    --orange-700: #c2410c;

    --gameBoardBorder: 5px solid var(--zinc-500);
    --standard-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    --shadow-press-btn: 5px 5px 5px rgba(0, 0, 0, 0.2);
    --card-shadow: 10px 10px 10px var(--zinc-500)
}

/* 3. Font */
body {
    font-family: 'Roboto', sans-serif;
}

/* 4. Layout */
/* a. Body and Main */

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

    width: 100vw;
    height: 100vh;
}

main {
    display: grid;
    grid: 
        [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "game game game" 4fr [row2-end]
        [row3-start] "footer footer footer" 1fr [row3-end]
        / 1fr 1fr 1fr;
    ;

    justify-items: center;
    align-items: center;
    gap: 10px;
    width: 80vw;
    height: 80vh;
} 

main #title {
    grid-area: header;
}

p#info-text {
    grid-area: game;
}

/* b. Board */
section.board {
    grid-area: game;
    display: grid;
    grid: 
        [row1-start] "spot0 spot1 spot2" 1fr [row1-end]
        [row2-start] "spot3 spot4 spot5" 1fr [row2-end]
        [row3-start] "spot6 spot7 spot8" 1fr [row3-end]
        / 1fr 1fr 1fr;
        
    width: 40%;
    height: 100%;
}

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

#spot-zero {
    grid-area: spot0;  
}

#spot-one {
    grid-area: spot1;   
}

#spot-two {
    grid-area: spot2;
}

#spot-three {
    grid-area: spot3;
}

#spot-four {
    grid-area: spot4;
}
#spot-five {
    grid-area: spot5;
}
#spot-six {
    grid-area: spot6;
}
#spot-seven {
    grid-area: spot7;
}
#spot-eight {
    grid-area: spot8;
}

/* c. End game state on section.board */
.winning-msg {
    grid-area: game;;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
}

.invisible {
    display: none;
}

/* d. Footer*/
footer {
    grid-area: footer;
    display: grid;
    grid: 
        [row1-start] "player-one-set-play player-two-set-play btn-start" 1fr [row1-end]
        [row2-start] "player-one-btn player-two-btn btn-start" 1fr [row2-end]
        / 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
    justify-items: center;
    align-items: center;
}

/* e. Player name and play again */
footer div.player-one-set-play,
footer div.player-two-set-play {
    display: grid;
    justify-items: center;
    align-items: flex-start;
}

footer div.player-one-set-play {
    grid-area: player-one-set-play;
    grid:
        [row1-start] "player-one-name" 1fr [row1-end]
        [row2-start] "player-one-play-first-btn" 1fr [row2-end]
        / 1fr;
}

div.player-one-set-play #player-one-name {
    grid-area: player-one-name;
}

div.player-one-set-play #radio-player-one-play-first {
    grid-area: player-one-play-first-btn;
}

footer div.player-two-set-play {
    grid-area: player-two-set-play;
    grid:
        [row1-start] "player-two-name" 1fr [row1-end]
        [row2-start] "player-two-play-first-btn" 1fr [row2-end]
        / 1fr;
}

div.player-two-set-play #player-two-name {
    grid-area: player-two-name;
}

div.player-two-set-play #radio-player-two-play-first {
    grid-area: player-two-play-first-btn;
}

/* f. Start button */
footer button#btn-start {
    grid-area: btn-start;
}

.btn-start {
    padding: 2rem 4rem;
}

/* g. Change Name and switch Human / Bot buttons */
footer .player-one-btn,
footer .player-two-btn {
    display: grid;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 10px;
}

footer .player-one-btn {
    grid-area: player-one-btn;
    grid: 
        [row1-start] "player-one-btn-change player-one-btn-radio" 1fr [row1-end]
        / 1fr 1fr;
}

footer .player-two-btn {
    grid-area: player-two-btn;
    grid: 
        [row1-start] "player-two-btn-change player-two-btn-radio" 1fr [row1-end]
        / 1fr 1fr;  
}

footer .player-one-btn #btn-change-name-player-one {
    grid-area: player-one-btn-change;   
    justify-self: flex-end;
}

footer .player-one-btn .btn-radio-player-one {
    grid-area: player-one-btn-radio;
    justify-self: flex-start;
}

footer .player-two-btn #btn-change-name-player-two {
    grid-area: player-two-btn-change;
    justify-self: flex-end;
}

footer .player-two-btn .btn-radio-player-two {
    grid-area: player-two-btn-radio;
    justify-self: flex-start;
}

footer .player-one-btn .btn-radio-player-one,
footer .player-two-btn .btn-radio-player-two {
    display: grid;
        grid:
            [row1-start] "human-or-bot-btn" 0.5fr [row1-end]
            [row2-start] "bot-level" 0.5fr [row2-end]
            / 1fr;
    justify-items: center;
}

footer .player-one-btn .btn-radio-player-one .human-or-bot,
footer .player-two-btn .btn-radio-player-two .human-or-bot {
    grid-area: human-or-bot-btn;
}

footer .player-one-btn .btn-radio-player-one .bot-level,
footer .player-two-btn .btn-radio-player-two .bot-level {
    grid-area: bot-level;
}

.btn-change {
    padding: 1rem 2rem;
    max-width: 10rem;
    margin: 0 1rem 1rem;
}

select#levels {
    padding: 0.2rem 0.5rem;
    margin-bottom: 1rem;
}

/* h. Change Name card */
.layer {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    z-index: 2;
    width: 20%;
    height: 40%;
}

.card-label {
    margin-bottom: 1rem;
}

.card-input {
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.btn-card {
    padding: 0.5rem 1rem;
}

/* 5. Style */
/* a. Body and Main */
body {
    background-color: var(--zinc-50);
}

main {
    background-color: var(--zinc-100);
    box-shadow: var(--standard-shadow);
}

p#info-text {
    color: var(--zinc-800);
    font-weight: 700;
    font-size: 3rem; 
}

/* b. Header and Player Name Text */
h1,
.player-name-text {
    color: var(--zinc-800);
}

/* c. End Game State */
.winning-text,
.tie-text {
    font-size: 4rem;
    font-weight: 700;
}

.winning-text {
    color: var(--emerald-700);
}

.tie-text {
    color: var(--orange-700);
}

.restart-msg {
    text-align: center;
    font-weight: 700;
}

/* d. Board */
.spot {
    color: var(--zinc-900);
    font-size: 3rem;
}

.spot-right {
    border-right: var(--gameBoardBorder);
}

.spot-left {
    border-left: var(--gameBoardBorder);
}

.spot-bottom {
    border-bottom: var(--gameBoardBorder);
}

/* e. Footer*/

footer {
    color: var(--zinc-500);
    font-weight: 700;
    font-size: 1.5rem;
}

.in-play {
    color: var(--emerald-700);
}

/* f. Buttons */
.btn {
    background-color: var(--zinc-500);
    color: var(--zinc-50);
    box-shadow: var(--standard-shadow);
    border: none;
    border-radius: 15px;
    font-weight: 700;
}

.btn:hover {
    background-color: var(--zinc-700)
}

.btn:active {
  background-color: var(--zinc-700);
  box-shadow: var(--shadow-press-btn);
  transform: translateY(5px);

}

.btn:disabled {
    opacity: 0.5;
}

.btn:disabled:hover {
    background-color: var(--zinc-500);
}

.btn-start {
    font-size: 1.5rem;
}

/* g. Radio Buttons */
input[type="radio"] {
    appearance: none;
}

input[type="radio"]:checked + label {
    color: var(--emerald-700);  
}

input[type="radio"]:disabled + label {
    opacity: 0.5;
}

input[type="radio"]:disabled:checked + label {
    color:var(--emerald-700);
    opacity: 0.5;
}

.btn-play-first {
    font-size: 1.1rem;
}

/* h. Change Name Card*/
.layer {
    background-color: rgba(24, 24, 27, 0.5);   
}

.card {
    background-color: rgba(250, 250, 250, 0.9);
    box-shadow: var(--card-shadow);
    border-radius: 15px;
}

.card-label {
    font-size: 1.3rem;
    color: var(--zinc-800);
}

.card-input {
    font-size: 1.3rem;
} 

.btn-card {
    font-size: 1.3rem;
}

/* Bot level select stile */
label.invisible {
    appearance: none;
}

.menu-style {
    color: var(--emerald-700);
    font-weight: 700;
    background-color: var(--zinc-100);
    border-radius: 15px;
    box-shadow: var(--standard-shadow);
}