/* custom fonts */
@font-face {
    font-family: 'comfortaa';
    src: url('./../assets/fonts/Comfortaa/comfortaa-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'comfortaa';
    src: url('./../assets/fonts/Comfortaa/comfortaa-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal; 
}

/* variables */
:root {
    --cell-size: 150px;
    
    /* making the symbol slightly smaller than the grid cell */
    --icon-size: calc(var(--cell-size) * 0.9);

    --x-color: white;
    --o-color: white;

    --font-main: 'comfortaa', 'futura', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

*, *::after, *::before {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
}

.app-title {
    font-size: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 55px;
    text-align: center;
}

main {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

svg {
    color: white;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-player-info:hover,
.submit-player-info:hover,
#reset-icon:hover,
.clear-scores:hover,
.btn-save:hover,
.btn-retrieve-data:hover,
#no-sound-icon:hover,
#play-sound-icon:hover,
.player-symbol:hover {
    transform: scale(1.15);
    transition: 0.3s;
}

ul {
    list-style: none;
}

/* 
----------------------------------------------------------------------------------------------------------------
LEFT section of screen | score board
----------------------------------------------------------------------------------------------------------------
*/

.left {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
}

.left .score-board {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.left .score-board .score-board-title { 
    width: 100%;
    display: flex;
    flex-direction : column;
    align-items: center;
    justify-content: center;
    font-size: 2.15rem;
}

.left .score-board .player-scores {
    width: 100%;
    font-size: 2rem;
    display: flex;
    flex-direction : row;
    align-items: center;
    justify-content: center; 
}

.left .player-scores .score-board-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem auto; 
}

.left .score-board .player-scores .score {
    width: 100%;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
}

.left .score-board .draw-score-reset {
    width: 85%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left .score-board .draw-score-reset .btn-clear-scores {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    margin-left: 15%;
    background-color: black;
}

.left .score-board .draw-score-reset .draw-score {
    font-size: 2rem;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
}

.left .score-board .draw-score-reset .btn-clear-scores .clear-scores:hover {
    color: #FA645C;
}

.player-scores, .scores-title, .score, .current-player-display {
    display:flex;
    justify-content: center;
    align-items: center;
}

/* 
----------------------------------------------------------------------------------------------------------------
CENTER section of screen | grid
----------------------------------------------------------------------------------------------------------------
*/

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 100%;
    gap: 5rem;
}

.center .start-game-btn { /* overlay button that starts the game and then disappears */
    font-size: 2.2rem;
    background-color: black;
    border: 2px solid white;
    color:  white;
    padding: 1.5rem;
    cursor: pointer;
    border-radius: 8px;
    position:absolute;
    top:51%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index: 1000;
    opacity: 0;
}

.center .start-game-btn:hover {
    background-color: rgb(152, 201, 146);
    border: 2px solid rgb(26, 60, 18);
    color: rgb(26, 60, 18);
    transition: 0.4s;
}

.center .grid {
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-content: center;
    justify-items: center;
    grid-template-columns: repeat(3, auto);
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

/* removing the outside border of the grid */
.cell:nth-child(1), .cell:nth-child(2), .cell:nth-child(3) {
    border-top: none;
}
.cell:nth-child(3n+3) {
    border-right: none;   
}
.cell:nth-child(9), .cell:nth-child(8), .cell:nth-child(7) {
    border-bottom: none;
}
.cell:nth-child(3n+1) {
    border-left: none;   
}

/* x and o symbols for grid -> 'x' class for cross, 'o' class for circle*/

/* x symbol */
.cell.x::before, 
.cell.x::after, 
.grid.x .cell:not(.x):not(.o):hover::before,
.grid.x .cell:not(.x):not(.o):hover::after  {
    content: '';
    position: absolute;
    width: calc(var(--icon-size) * .15);
    height: var(--icon-size);
    background-color: white;
}

.cell.x::before,
.grid.x .cell:not(.x):not(.o):hover::before {
    transform: rotate(45deg);
}
.cell.x::after,
.grid.x .cell:not(.x):not(.o):hover::after {
    transform: rotate(-45deg);
}

/*  o symbol */
.cell.o::before,
.cell.o::after,
.grid.o .cell:not(.x):not(.o):hover::before,
.grid.o .cell:not(.x):not(.o):hover::after  {
    content: '';
    position: absolute;
    border-radius: 50%;    
}

/* larger circle i.e. "outside" circle */
.cell.o::before,
.grid.o .cell:not(.x):not(.o):hover::before {
    width: calc(var(--icon-size)* 0.9);
    height: calc(var(--icon-size)* 0.9);  
}

/* slightly smaller circle i.e. "inside" circle */
.cell.x::before, .cell.x::after {
    background-color: var(--x-color, white);
}

.cell.o::before  {
    background-color: var(--o-color, white);
}

/* preview lighter symbol when user hovers over empty cell */
.grid.x .cell:not(.x):not(.o):hover::before,
.grid.x .cell:not(.x):not(.o):hover::after,
.grid.o .cell:not(.x):not(.o):hover::before {
    background-color: rgb(47, 47, 47);
}

.cell.o::before,
.grid.o .cell:not(.x):not(.o):hover::before {
    width: calc(var(--icon-size)* 0.9);
    height: calc(var(--icon-size)* 0.9);  
}

.cell.o::after,
.grid.o .cell:not(.x):not(.o):hover::after {
    width: calc(var(--icon-size)* 0.6);
    height: calc(var(--icon-size)* 0.6);
    background-color: black;
}

/* when cursor moves over cell that already has an x or o it changes to signal to user that cell is not available */
.cell.x, .cell.o {
    cursor: not-allowed;
}

.center .settings {
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.center .settings .btn-reset, .btn-sound, .btn-save, .btn-retrieve-data {
    background-color: black;
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border: none;
    cursor: pointer;
}

#reset-icon:hover {
    color: rgb(64,200,225);
}

#no-sound-icon:hover, #play-sound-icon:hover {
    color:rgb(237, 237, 122);
}

#save-icon:hover {
    color: rgb(238, 131, 184);
}

#retrieve-icon:hover {
    color: rgb(163, 117, 205)
}

/* 
----------------------------------------------------------------------------------------------------------------
RIGHT section of screen | player info
----------------------------------------------------------------------------------------------------------------
*/

.right { 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
   width: 30%;
   gap: 2rem;     
}

.right .current-player-display {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255 239 0);
    width: 100%;
}

.right .current-player-display .current-player { /* <div> displaying whose turn it is */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1.75rem;
}

.svg-party-hat {
    margin-bottom: 3%;
}

.your-turn-display {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 80%;
    font-size: 2rem;
    font-weight: bold;
}

.welcome {
    color: white;
    font-size: 2.75rem !important;
    display: flex;
    justify-content: flex-start !important;
    flex-direction: row;
    width: 80% !important;
}

.right .players {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1.75rem;
    gap: 5rem;
}

.right .players .player {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; 
}

.right .players .player .player-visible {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 80%;
    gap: 2rem;   
}

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

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

#player-2-symbol-display {
    margin-left: 5px;
}

.right .players .player .player-visible .btn-add-player-info,
.right .players .player .player-input-form .btn-submit-player-input {
    border: none;
    background-color: black;
}

.right .players .player .player-visible .btn-add-player-info .add-player-info:hover,
.right .players .player .player-input-form .btn-submit-player-input .submit-player-info:hover{
    color: rgb(150, 223, 141);
    cursor: pointer;
} 

.player-input-form {    
    display: none;
}

.player-input-form.display { 
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 1rem;
    width: 80%;
    margin-top: 4rem;
}

.right .players .player .player-input-form .name-input {
    background-color: black;
    display:flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    font-size: 1.2rem;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid rgb(150, 223, 141);
    color: rgb(150, 223, 141);
    font-family: var(--font-main);
    outline: none;
    box-shadow: none;
}

.right .players .player .player-input-form .name-input::placeholder {
    color: rgb(150, 223, 141);
    opacity: 0.5;
}

.right .players .player .player-input-form .btn-submit-player-input .submit-player-info {
    color: rgb(150, 223, 141);
}

/* colour dropdown menu */
.player-symbol {
    position: relative;
    z-index: 0;
}

.player-symbol:hover {
    cursor: pointer;
}

.color-dropdown {
    display: none;
}

.color-dropdown.show-colors {
    position: absolute;
    left: 0;
    bottom: -2.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 1000;
    border: 2px solid black;
}

.color-option {
    font-size: 1.2rem;
    width: 2.5rem;
    border: 1px solid black;
    z-index: 1000;
}

#red1, #red2  {
    background-color: rgb(255, 99, 71);
    border: 2px solid rgb(255, 99, 71);
    border-radius: 5px 0px 0px 5px;
} 

#blue1, #blue2 {
    background-color: rgb(31, 81, 255);
    border: 2px solid rgb(31, 81, 255);
} 

#green1, #green2 {
    background-color: rgb(80, 200, 120);
    border: 2px solid rgb(80, 200, 120);
} 

#yellow1, #yellow2 {
    background-color: rgb(255 239 0);
    border: 2px solid rgb(255 239 0);
} 

#pink1, #pink2 {
    background-color: rgb(249, 120, 185);
    border: 2px solid rgb(249, 120, 185);
} 

#purple1, #purple2 {
    background-color: rgb(154,97,208);
    border: 2px solid rgb(154,97,208);
} 

#orange1, #orange2 {
    background-color: rgb(247, 135, 2);
    border: 2px solid rgb(247, 135, 2);
    border-radius: 0px 5px 5px 0px;
    height: 120%;
}

#white1, #white2 {
    background-color: rgb(255,255,255);
    border: 2px solid rgb(255,255,255);
}

#red1:hover, 
#blue1:hover, 
#green1:hover,
#yellow1:hover,
#pink1:hover,
#purple1:hover,
#orange1:hover,
#red2:hover, 
#blue2:hover, 
#green2:hover,
#yellow2:hover,
#pink2:hover,
#purple2:hover,
#orange2:hover {
    transform: scaleY(1.2);
    transition: .3s;
}


/* Overlay Message displaying winner or draw */
.message {
    display: none;
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(59, 82, 53, 0.97);
    justify-content: center;
    align-items: center;
    color: yellow;
    font-size: 6rem;
    flex-direction: column;
}

.message.display-win {
    display: flex;
    background-color: rgba(59, 82, 53, 0.97);
    color: yellow;
}

.message.display-draw {
    display: flex;
    background-color: rgba(52, 66, 114, 0.97)
}

.message .btn {
    font-size: 2.3rem;
    background-color: rgb(164, 197, 153);
    border: 3px solid rgb(40, 61, 35);
    color:  rgb(40, 61, 35);
    padding: 1rem;
    cursor: pointer;
    margin-top: 4rem;
    border-radius: 8px;
}

.message.display-draw .btn {
    font-size: 2.3rem;
    background-color: rgb(128, 193, 229);
    border: 3px solid rgb(47, 37, 94);
    color:  rgb(47, 37, 94);
    padding: 1rem;
    cursor: pointer;
    margin-top: 4rem;
    border-radius: 8px;
} 

.message .btn:hover {
    background-color: rgb(40, 61, 35);
    border: 3px solid rgb(164, 197, 153);
    color: rgb(164, 197, 153);
    transition: 0.4s;
}

.message.display-draw .btn:hover {
    background-color: rgb(47, 37, 94);
    border: 3px solid rgb(128, 193, 229);
    color: rgb(128, 193, 229);
    transition: 0.4s;
}

.message .draw-sad-face .sad-face {
    background-color: rgba(59, 82, 53, 0);
    color: yellow;

}

.message .draw-sad-face {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

.contact-icons {
    position: absolute;
    bottom: 8px;
    left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    font-size: 1.2rem;
    width: 100%;
}

.contact-icon {    
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    font-size: 1.5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(108, 119, 137, 0.6);
}

.contact-icon a svg {
    color: rgba(108, 119, 137, 0.6);
    width: 20px;
    height: 20px;
    padding-top: 3px;
    transition: all 0.3s ease-in-out; 
    padding-bottom: 2px;
    scale: 1.1;
    border-radius: 30%;

}

.contact-icon-portfolio a svg{
    scale: 0.9;
}

.contact-icon a svg:hover {
    color: #6b7688;
}

.contact-icon:hover {
    border: 1px solid #6b7688;
}