@font-face {
  font-family: "Mansalva";
  src: url("fonts/Mansalva-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf") format("truetype");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

:root {
  --bg: linear-gradient(to right, #c6817f, #fcd29b); /* Correct definition */
  --bg-modal: #212121;
  --bg-border: #292929;
  --clr: #213a57;
  --clr-modal: #2aca72;
  --clr-first: #e22a2a;
  --clr-second: #fec803;
  font-size: 1rem;
}


body {
  font-family: "Lato", sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background: var(--bg); /* Correct usage */
}

/* initial welcome page style */

#initial-welcome-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("images/connect_4.png") no-repeat center center fixed;
  background-size: cover;
}

.glass-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  height: 10rem;
  max-width: 65rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Fallback for browsers that do not support backdrop-filter */
.glass-card {
  background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Border to create a similar effect */
}

#typewriter {
  text-align: center;
  color: var(--clr);
  font-family: "Mansalva", cursive;
  font-size: 4rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

/* game board style */

#game-board {
  display: none;
  grid-template-columns: repeat(7, 3.5rem);
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem auto;
  
}

#top-row {
  display: grid;
  grid-template-columns: repeat(7, 3.5rem);
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem auto;
}

.token {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--bg-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 10px 20px rgba(0, 0, 0, 0.4);
  background-color: var(--clr-first); /* Default to player1's color */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.token.player2 {
  background-color: var(--clr-second); /* Change to player2's color */
}

.token:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cell {
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(to bottom, #875237, #cb7e49);
  border: 1px solid var(--bg-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 10px 20px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cell.falling {
  background: none; /* Ensure no gradient background is applied */
  box-shadow: none; /* Prevent inherited shadow */
}

.cell.falling.player1::before {
  background-color: var(--clr-first); /* Explicit red for player 1 */
}

.cell.falling.player2::before {
  background-color: var(--clr-second); /* Explicit yellow for player 2 */
}

.cell.falling::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: -3.5rem;
  border-radius: 50%;
  animation: fall 0.5s ease-in;
}

.cell.player1 {
  background-color: var(--clr-first); /* Explicit red for player 1 */
  background: none; /* Remove inherited gradient */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); /* Optional shadow */
}

.cell.player2 {
  background-color: var(--clr-second); /* Explicit yellow for player 2 */
  background: none; /* Remove inherited gradient */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); /* Optional shadow */
}


@keyframes fall {
  from {
    top: -3.5rem;
  }
  to {
    top: 0;
  }
}



/* result modal style */

#game-board.blurred,
#top-row.blurred {
  filter: blur(5px); /* Apply blur only to these sections */
}

.modal {
  display: none;
  position: fixed;
  z-index: 2; /* Ensure modal is above blurred background */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
}

.modal-content {
  background-color: var(--bg-modal);
  color: var(--clr-modal);
  margin: 15% auto;
  padding: 2rem;
  border: 1px solid #888;
  border-radius: 0.7rem;
  width: 80%;
  max-width: 20rem;
  text-align: center;
  z-index: 3; /* Ensure the modal's content is above everything else */
}

#reset-button {
  --border-radius: 1rem;
  --border-width: 0.25rem;
  appearance: none;
  position: relative;
  margin-top: 1rem;
  padding: 1rem 2rem;
  border: 0;
  background-color: var(--bg-modal);
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-modal);
  cursor: pointer;
  z-index: 2;
}

#reset-button::after {
  --m-i: linear-gradient(#000, #000);
  --m-o: content-box, padding-box;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background-image: conic-gradient(
    #488cfb,
    #29dbbc,
    #ddf505,
    #ff9f0e,
    #e440bb,
    #655adc,
    #488cfb
  );
  -webkit-mask-image: var(--m-i), var(--m-i);
  mask-image: var(--m-i), var(--m-i);
  -webkit-mask-origin: var(--m-o);
  mask-origin: var(--m-o);
  -webkit-mask-clip: var(--m-o);
  mask-clip: var(--m-o);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  filter: hue-rotate(0);
  animation: rotate-hue linear 500ms infinite;
  animation-play-state: paused;
}

#reset-button:hover::after {
  animation-play-state: running;
}

@keyframes rotate-hue {
  to {
    filter: hue-rotate(1turn);
  }
}

#reset-button,
#reset-button::after {
  box-sizing: border-box;
}

#reset-button:active {
  --border-width: 0.25rem;
}

/* social contacts */

.socials-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
}

#social-container {
  position: fixed;
  bottom: 5.3rem;
  right: 7.6rem;
  display: flex;
  align-items: center;
  z-index: 2;
}

#click-hint {
  font-size: 0.9rem;
  color: var(--clr-first);
  margin-left: 0.5rem;
  white-space: nowrap;
}

.socials-menu {
  opacity: 0;
  transition: opacity 0.5s;
}

.active > .socials-menu {
  opacity: 1;
}

#share-button {
  position: fixed;
  bottom: 4.6rem;
  right: 4.6rem;
  width: 3rem;
  height: 3rem;
  z-index: 2;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.4s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

#share-button img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
}

.active #share-button img {
  transform: scale(1.03);
}

.social {
  position: fixed;
  list-style: none;
  bottom: 5rem;
  right: 5rem;
  display: grid;
  cursor: pointer;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  outline: 2px solid var(--clr-first);
  outline-offset: 3px;
  transition: all 0.5s ease-in-out;
}

.social img {
  width: 2rem; /* Adjust size as needed */
  height: 2rem; /* Adjust size as needed */
  display: block;
}

.active .social:nth-child(1) {
  transform: translate(-30px, -45px);
}

.active .social:nth-child(2) {
  transform: translate(-50px, 12px);
}

.active .social:nth-child(3) {
  transform: translate(30px, -45px);
}

.active .social:nth-child(4) {
  transform: translate(50px, 12px);
}

.active .social:nth-child(5) {
  transform: translateY(50px);
}


/* responsive mode */


@media (max-width: 680px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center everything vertically */
    align-items: center;
    min-height: 100vh; /* Ensure the body takes the full viewport height */
  }

  #typewriter {
    font-size: 2.5rem;
  }

  #game-board,
  #top-row {
    gap: 0.2rem; /* Smaller gap for tighter grid */
    margin: 0.5rem auto; /* Top and bottom margin reduced, centered horizontally */
    grid-template-columns: repeat(7, minmax(1.5rem, 1fr)); /* Dynamically adjust column width */
    width: 90%; /* Let the board take 90% of the screen width */
  }

  .token,
  .cell {
    width: 100%; /* Automatically adjust to the size of the grid column */
    height: auto; /* Keep proportional height */
    aspect-ratio: 1 / 1; /* Force square shape */
    border-radius: 50%;
  }

  #result-modal .modal-content {
    margin: auto; /* Center the modal vertically */
    top: 10%;
    transform: translateY(150%); /* Adjust for exact centering */
  }

  #social-container {
    position: static; /* Make sure it's within the flow of the document */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;/* Adjust the spacing as needed */
    width: 100%;
  }

  #click-hint {
    margin: 0 0 0.5rem 0; /* Space between text and image */
    text-align: center;
  }

  #share-button {
    position: static;
    margin: 0.5rem auto; /* Center the button initially */
    transition: all 0.4s ease-in-out;
  }

  .social {
    position: static; /* Make sure it's within the flow of the document */
    margin: 0.7rem; /* Adjust margin as needed */
    display: inline-block; /* Display inline to align them properly */
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
  }

  .socials-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Wrap the items to the next line if needed */
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .social img {
    width: 1.5rem; /* Adjust size as needed */
    height: 1.5rem; /* Adjust size as needed */
    display: block;
  }

  .active .social:nth-child(1),
  .active .social:nth-child(2),
  .active .social:nth-child(3),
  .active .social:nth-child(4),
  .active .social:nth-child(5) {
    transform: none; /* Reset transform for mobile */
  }

  .icon-button,
  .task-item input[type="checkbox"],
  .task-item button {
    transform: none; /* Reset transforms on hover */
    box-shadow: none; /* Reset shadows on hover */
  }
}