/* ===================================
   EVERYTHING
   =================================== */

* {
    font-family: var(--default-font);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   }

body {
   background-color: var(--body-color);
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   -webkit-user-select: none; /* no highlighting - Safari */
   user-select: none; /* no highlighting */
}

body.dark-mode {
   --body-color: #2a2a2a;
   --grid-color: #5a5a5a; 
   --link-color: #c97f4a;
   --light-text-color: #2a2a2a;
   --dark-text-color: #e0e0e0;
   --button-color: #e0e0e0;
   --button-border: 1px #000000 solid
}

:root {
   --link-color: #c97f4a;
   --dark-text-color: #2a2a2a;
   --h1-font-size: 2em;
   --h2-font-size: 1.45em;
   --h3-font-size: 1.15em;
   --h4-font-size: 0.8em;
   --score-font-size: 1.6em;
   --button-radius: 50px;
   --button-border: 1px #2a2a2a solid;
   --box-shadow: 0px 4px 6px rbga(0,0,0,0.1);
   --body-color: #ffffff;
   --grid-color:#2a2a2a;
   --button-color: #e0e0e0;
   --handwritten-font: 'Finger Paint', 'JetBrains Mono', monospace;
   --default-font:'JetBrains Mono', 'Finger Paint', monospace;
}

button,
a,
svg.light-dark-mode {
    cursor: pointer;
}

a {
    color: var(--dark-text-color);
    text-decoration: none;
}

a:visited {
    color: var(--dark-text-color);
}

a:hover {
    text-decoration: overline;
}

/* ===================================
   HEADER
   =================================== */
.header {
   display: flex;
   flex-wrap: wrap;
   width: 100vw;
   padding: 15px 0px;
   justify-content: center;
   align-items: center;
}

.header-left,
.header-right {
   width: 10%;
   display: flex;
   align-items: center;

}

.header .title {
   font-size: var(--h1-font-size);
   color: var(--dark-text-color);
   justify-self: center;
   text-align: center;
   width: 80%;
}

.header svg {
   height: var(--h1-font-size);
   fill: var(--dark-text-color);
}

/* ===================================
   MODAL
   =================================== */
dialog {
   padding: 20px;
   border: none;
   border-radius: 10px;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   margin: auto;
   background-color: #eeeeee;
   color: var(--dark-text-color);
}

dialog legend {
   font-size: var(--h2-font-size);
   padding: 0 0 20px 0;
   align-items: center;
   color: var(--light-text-color);
   text-align: center;
}

dialog fieldset {
   border: none;
   padding: 0 0 20px 0 ;
}

.form-item {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   width: 100%;
   color: var(--light-text-color);

}

label {
   text-transform: uppercase;
   padding-right: 25px;
}

input[type="text"] {
   margin: 0 0 20px 0;
   padding: 5px;
   font-weight: 300;
   background: transparent;
   border: none;
   border-bottom: 1px solid #cccccc;
   font-size: var(--h3-font-size);
}

input:focus {
   outline: none;
   border-bottom: 1px solid #0075fc;
}

dialog .modal-button {
   display: flex;
   justify-content: space-evenly;
}

dialog button {
   border-radius: var(--button-radius);
   padding: 5px 12px;
   border: solid 1px;
   background-color: var(--button-color);
}

dialog::backdrop {
   backdrop-filter: blur(3px);
}

/* ===================================
   MAIN BODY CONTAINERS
   =================================== */
.container {
   display: flex;
   flex-wrap: wrap;
   width: 100vw;
   justify-content: center;
}

.left-container,
.right-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 50px;
}

/* ===================================
   SCOREBOARD
   =================================== */
.scoreboard {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   border: none;
   width: 250px;
   height: 230px;
   background-color: #eeeeee;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}


.score-title {
   font-size: var(--h2-font-size);
   font-weight: bold;
   color: #2a2a2a;
   margin: 20px 0px;
}

.score-container {
   display: grid;
   gap: 3px;
   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: 11fr 1fr;
   align-items: center;
   width: 65%;
}

.name {
   font-family: var(--default-font);
   font-size: var(--h3-font-size);
   color: #2a2a2a;
}

.score {
   font-family: var(--handwritten-font);
   font-size: var(--score-font-size);
   color: #2a2a2a;
}

.active-player {
   color: var(--link-color);
   font-weight: 700;
}

.reset-game-button {
   cursor: pointer;
   border-radius: var(--button-radius);
   padding: 8px 16px;
   color: #2a2a2a;
   border: var(--button-border);
   margin: 20px 0px;
   background-color: var(--button-color);
   transition: all 0.2s ease-in-out;
}

.reset-game-button.hover {
   transform: translateY(-4px) translateX(-2px);
   box-shadow: 2px 5px 0 0 #2a2a2a;
}

#scoreboard-name1,
#scoreboard-name2 {
   display: grid;
   overflow: hidden;
   text-overflow: clip;
   min-width: 0;
}
   
/* ===================================
   GAME GRID & GAME MESSAGES
   =================================== */
.win-message,
.tie-message {
   font-family: var(--default-font);
   color: var(--dark-text-color);
   font-size: var(--h2-font-size);
   padding: 20px 0px;
}

.grid-container {
   justify-self: center;
   display: grid;
   width: fit-content;
   gap: 5px;
   grid-template-rows: repeat(3, 100px);
   grid-template-columns: repeat(3, 100px);
   background-color: var(--grid-color);
}

.grid-space {
   font-family: var(--handwritten-font);
   background-color: var(--body-color);
   color: var(--dark-text-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 55px;
}

.clear-grid-button {
   border-radius: var(--button-radius);
   border: var(--button-border);
   padding: 8px 16px;
   margin: 20px 0px;
   background-color: var(--button-color);
}

/* ===================================
   FOOTER
   =================================== */
.footer {
   text-align: center;
}