/*  
##################################################
General Styling
##################################################
*/

:root {
  --background-colour: #f4f4f9;
  --text-colour: #222831;
  --x-colour: #ff4c60;
  --o-colour: #3f72af;
  --x-accent-colour: #efdbe2;
  --o-accent-colour: #dbe2ef;
  --gridlines-colour: #393e46;
  --winner-colour: #c6f6d5;
  --button-colour: #222831;
  --button-hover: #393e46;
  --success-button-colour: #38a169;
  --success-button-hover: #2f855a;
  --main-font: "Inter", sans-serif;
  --marker-font: "Fredoka", sans-serif;
}

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

body {
  background-color: var(--background-colour);
  font-family: var(--main-font);
  color: var(--text-colour);
  font-size: 16px;
  line-height: 1.5;
}

/*  
##################################################
Game Container Styling
##################################################
*/

#game-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text-colour);
  margin-bottom: 1rem;
}

/* ########## Players Container Styling ########## */

#players-container {
  display: flex;
  justify-content: center;
  gap: clamp(0.5rem, 4vw, 2rem);
  max-width: 500px;
  width: 90vmin;
  text-align: center;
}

.player {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 5px solid transparent;
  border-radius: 12px 12px 0 0;
  position: relative;
  transition: background-color 0.3s ease;
}

/* Background colours for active player */
#player-one.active {
  background-color: var(--x-accent-colour);
}

#player-two.active {
  background-color: var(--o-accent-colour);
}

.player .mark {
  font-family: var(--marker-font);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
}

.player .name {
  font-family: var(--main-font);
  font-weight: 600;
  color: var(--text-colour);
}

/* Colours of the X and O icons */
.x {
  color: var(--x-colour);
}

.o {
  color: var(--o-colour);
}

/* ########## Game Results Styling ########## */

#game-info {
  display: flex;
  flex: 1.5;
  justify-content: center;
  align-items: center;
}

#game-result {
  font-size: 1.25rem;
  font-weight: 500;
}

/* Text Styling in the Results */
.red-text {
  color: var(--x-colour);
  font-weight: bold;
}

.blue-text {
  color: var(--o-colour);
  font-weight: bold;
}

.bold-text {
  font-weight: bold;
}

/* ########## Gameboard Styling ########## */

#gameboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 90vmin;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  border: 5px solid transparent;
  border-radius: 12px;
  padding: 1rem;
  margin: 0 auto 0 auto;
  transition: background-color 0.3s ease, border-radius 0.3s ease;
}

/* Active colour for the background of the gameboard */
#gameboard.x-turn {
  background-color: var(--x-accent-colour);
}

#gameboard.o-turn {
  background-color: var(--o-accent-colour);
}

/* Remove border radius when merging with active player */
#gameboard.no-top-left {
  border-top-left-radius: 0px;
}

#gameboard.no-top-right {
  border-top-right-radius: 0px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--marker-font);
  font-size: clamp(3rem, 10vmin, 6rem);
  font-weight: 700;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.cell.disabled {
  cursor: not-allowed;
}

/* Gridlines for the board */
.cell:not(:nth-child(3n)) {
  border-right: 10px solid var(--gridlines-colour);
}

.cell:nth-child(-n + 6) {
  border-bottom: 10px solid var(--gridlines-colour);
}

/* Colour for winning row */
.winning-cell {
  background-color: var(--winner-colour);
  transition: background-color 0.3s ease;
}

/* ########## Restart Button Styling ########## */

button {
  font-size: 1rem;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background-color: var(--button-colour);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 1rem;
}

button:hover {
  background-color: var(--button-hover);
}

/* Styling for button after a complete game */
button.success {
  background-color: var(--success-button-colour);
}

button.success:hover {
  background-color: var(--success-button-hover);
}

/*  
##################################################
Further Responsive Styling
##################################################
*/

@media (max-width: 480px) {
  #game-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: auto;
    padding-top: 1rem;
  }
}