/* --------------------------- */
/* Custom properties           */
/* --------------------------- */

:root {
  /* colors */
  --clr-dark-green: 202 32% 15%;
  --clr-light-green: 199 35% 19%;
  --clr-dark-grey: 198 23% 72%;
  --clr-light-grey: 197 33% 89%;
  --clr-dark-blue: 178 60% 48%;
  --clr-light-blue: 178 75% 65%;
  --clr-dark-yellow: 39 88% 58%;
  --clr-light-yellow: 39 100% 69%;

  /* font-sizes */
  --fs-large: 2.5rem;
  --fs-medium: 1.5rem;
  --fs-small: 1.25rem;
  --fs-xsmall: 1rem;
  --fs-body: 0.875rem;

  /* font-families */
  --ff-outfit: "Outfit", sans-serif;

  /* font-weight */
  --fw-500: 500;
  --fw-700: 700;
}

/* --------------------------- */
/* Font                        */
/* --------------------------- */

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-weight: 500;
  src: url('./assets/fonts/static/Outfit-Medium.ttf');
}

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-weight: 700;
  src: url('./assets/fonts/static/Outfit-Bold.ttf') format('ttf');
}

/* --------------------------- */
/* Reset                       */
/* --------------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

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

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: var(--fw-500);
}

/* set up the body */
body {
  font-family: var(--ff-outfit);
  font-size: var(--fs-body);
  color: hsl(var(--clr-dark-grey));
  background-color: hsl( var(--clr-dark-green) );
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-height: 100vh;
}

/* make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* make form elements easier to work with */
input,
button,
textarea,
select {
  font: inherit;
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------- */
/* Utility classes              */
/* --------------------------- */

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

/* screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

/* colors */

.bg-blue {
  background-color: hsl(var(--clr-dark-blue));
}

.bg-grey {
  background-color: hsl(var(--clr-dark-grey));
}

.bg-yellow {
  background-color: hsl(var(--clr-dark-yellow));
}

/* typography */

.letter-spacing-1 { letter-spacing: 0.8px; } 
.letter-spacing-2 { letter-spacing: 1px; } 
.letter-spacing-3 { letter-spacing: 1.25px; }
.letter-spacing-4 { letter-spacing: 1.5px; } 
.letter-spacing-5 { letter-spacing: 2.5px; }

.uppercase { text-transform: uppercase; }

/* --------------------------- */
/* Compontents                 */
/* --------------------------- */

/* New game menu section */
.new-game-menu {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  padding-block: 5rem;
  width: 100%;
}

.logo-icon-x {
  fill: hsl(var(--clr-dark-blue));
}

.logo-icon-o {
  fill: hsl(var(--clr-dark-yellow));
}

.new-game-btn {
  padding-block: .75rem;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  color: hsl( var(--clr-dark-green));
  width: 100%;
  cursor: pointer;
}

.player-choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
  background-color: hsl(var(--clr-light-green));
  border-radius: 10px;
}


.player-choice > .mark-container {
  background-color:  hsl(var(--clr-dark-green));
  width: 100%;
  padding: .5rem;
  border-radius: 10px;
  gap:0;
}

.mark-container > [aria-checked="true"] {
  background-color:  hsl(var(--clr-dark-grey));
  border: none;
  border-radius: 10px;
  width: 100%;
  padding-block: .75rem;
  justify-content: center;
  align-items: center;
}

.mark-container > [aria-checked="false"]:hover {
  background-color: hsl(var(--clr-light-green));
}

.mark-btn {
  background-color:  hsl(var(--clr-dark-green));
  border: none;
  border-radius: 10px;
  width: 100%;
  padding-block: .75rem;
  justify-content: center;
  align-items: center;
  transition: background-color 300ms ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mark-btn:active {
  transform: scale(0.97);
  transition: transform 100ms ease;
}

.mark-container > [aria-checked="true"] .mark-icon {
  fill: hsl(var(--clr-dark-green));
  width: 32px;
  height: 32px;
}

.mark-icon {
  fill: hsl(var(--clr-dark-grey));
  width: 32px;
  height: 32px;
}

.btn1-cpu {
  background-color: hsl(var(--clr-dark-yellow));
  box-shadow: 0 6px 1px hsl(39, 88%, 43%);
  transition: background-color 300ms ease;
}

.btn1-cpu:hover {
  background-color: hsl(var(--clr-light-yellow));
}

.btn2-player {
  background-color: hsl(var(--clr-dark-blue));
  box-shadow: 0 6px 1px hsl(178, 60%, 32%);
  transition: background-color 300ms ease;
}

.btn2-player:hover {
  background-color: hsl(var(--clr-light-blue));
}

/* Game board section */
.game-board-section {
  position: relative;
  padding: 1.5rem;
  width: 100%;
}

.game-board-header {
  padding-block-end: 4.5rem;
}

.logo-icons {
  display: flex;
  justify-content: start;
  align-items: center;
}

.players-turn {
  background-color: hsl(var(--clr-light-green));
  border-radius: 6px;
  padding: .5rem;
  justify-content: space-evenly;
  align-items: center;
  box-shadow: 0 5px 1px hsl(199, 69%, 9%);
  gap: 0;
}

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

.whos-turn svg {
  fill: hsl(var(--clr-dark-grey));
  width: 16px;
  height: 16px;
}

.game-board > .reset-btn {
  justify-self: end;
}

.reset-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(var(--clr-dark-grey));
  padding: .75rem;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 6px;
  border: none;
  box-shadow: 0 3px 1px hsl(198, 23%, 48%);
  cursor: pointer;
  transition: background-color 300ms ease;
}

.reset-btn:hover {
  background-color: hsl(var(--clr-light-grey));
}

.reset-icon {
  fill: hsl(var(--clr-dark-green));
}

.game-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  column-gap: 1.25rem;
  row-gap: 1.8rem;
}

.game-board-block {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  aspect-ratio: 1/0.9;
  border: none;
  border-radius: 10px;
  background-color: hsl(var(--clr-light-green));
  box-shadow: 0 8px 1px hsl(199, 69%, 9%);
}

.game-board-block::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.game-board-blocks.x-turn .game-board-block:hover::before {
  content: '';
  background-image: url('./assets/icon-x-outline.svg');
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.game-board-blocks.o-turn .game-board-block:hover::before {
  content: '';
  background-image: url('./assets/icon-o-outline.svg');
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

.game-board-block.filled::before {
  display: none;
}

.game-board-block .icon-x {
  fill: hsl(var(--clr-dark-blue));
  width: 44px;
  height: 44px;
}

.game-board-block .icon-o {
  fill: hsl(var(--clr-dark-yellow));
  width: 46px;
  height: 46px;
}

.score-section {
  padding-block-start: 2rem;
}

.player1,
.ties,
.player2 {
  color: hsl(var(--clr-dark-green));
  text-align: center;
  border-radius: 10px;
  padding-block: .5rem;
}

.score {
  font-weight: var(--fw-700);
  font-size: var(--fs-small);
}

/* Overlay section */
.overlay-section {
  position: fixed;
  z-index: 1;
  inset: 0 0 0 0;
  background-color: rgba(0, 0, 0, 40%);
  display: grid;
  place-items: center;
}

.overlay {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 0;
  right: 0;
  background-color: hsl(var(--clr-light-green));
  padding: 2.5rem;
  position: fixed;
  z-index: 100;
  overflow: hidden;
}

.takes-round-msg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-medium);
  font-weight: var(--fw-700);
}

.takes-round-msg.x-turn {
  color: hsl(var(--clr-dark-blue));
}

.takes-round-msg.o-turn {
  color: hsl(var(--clr-dark-yellow));
}

.takes-round-msg .icon-x {
  fill: hsl(var(--clr-dark-blue));
  width: 20px;
  height: 20px;
}

.takes-round-msg .icon-o {
  fill: hsl(var(--clr-dark-yellow));
  width: 20px;
  height: 20px;
}

.overlay-btns {
  padding-inline: 1rem;
  padding-block: .75rem;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  color: hsl( var(--clr-dark-green));
  width: 100%;
  text-wrap: nowrap;
  cursor: pointer;
}

.quit-btn {
  background-color: hsl(var(--clr-dark-grey));
  box-shadow: 0 4px 1px hsl(198, 23%, 48%);
  transition: background-color 300ms ease;
}

.quit-btn:hover {
  background-color: hsl(var(--clr-light-grey));
}

.next-round-btn {
  background-color: hsl(var(--clr-dark-yellow));
  box-shadow: 0 4px 1px hsl(39, 88%, 43%);
  transition: background-color 300ms ease;
}

.next-round-btn:hover {
  background-color: hsl(var(--clr-light-yellow));
}

@media (min-width: 27rem) {
  body {
    display: grid;
    place-items: center;
  }

  .new-game-menu,
  .game-board-section {
    width: 500px;
  }

  .game-board-header {
    padding-block-end: 1.8rem;
  }

  .players-turn p {
    font-weight: var(--fw-700);
  }

  .game-board-block .icon-x {
    fill: hsl(var(--clr-dark-blue));
    width: 64px;
    height: 64px;
  }

  .game-board-block .icon-o {
    fill: hsl(var(--clr-dark-yellow));
    width: 66px;
    height: 66px;
  }

  .overlay {
    padding-block: 3.25rem;
  }

  .who-won-info {
    font-weight: var(--fw-700);
  }
}

@media (min-width: 35rem) {
  .takes-round-msg {
    font-size: var(--fs-large);
  }

  .takes-round-msg .icon-x {
    width: 60px;
    height: 60px;
  }

  .takes-round-msg .icon-o {
    width: 60px;
    height: 60px;
  }
}