html,
body {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background: var(--light-colour); /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Game Board */
.game-board {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.cards-grid {
  width: min(
    99vw,
    120vh
  ); /* grow as wide as possible, but stop if height would exceed viewport */
  padding: 1vmin;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto); /* 4 rows that auto-fit card height */
  gap: 0.5vmin;
  background-color: rgba(0, 0, 0, 0.2);
  user-select: none;
  border-radius: 1.5vmin;
  perspective: 1000px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.cards-grid.faded {
  background-color: transparent;
  box-shadow: none;
}

.card {
  width: 100%; /* fill the column */
  aspect-ratio: 3/2; /* maintain 3:2 card ratio */
  background-color: var(--light-colour);
  border-radius: 1vmin;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-origin: center center;
  transform-style: preserve-3d; /* Enable 3D transforms */
  user-select: none;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.15) 0 0.35vmin 0.6vmin -0.15vmin,
    rgba(0, 0, 0, 0.1) 0 -0.3vmin 0 inset;
  transition: opacity 0.4s ease;
}

.card.faded {
  opacity: 0;
  pointer-events: none;
}

.card:hover .card-back {
  background-color: var(--white-colour);
}

.card.disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.card.active {
  box-shadow: none;
}

.card.active .card-back {
  background-color: var(--yellow-colour);
  box-shadow: inset 0 0 0 0.5vmin rgba(255, 255, 255, 0.4);
}

.card.found {
  cursor: help;
}

.card.flipped {
  transform-style: flat; /* Fix blurry text after flip */
}

.card.flipped .card-front {
  backface-visibility: visible;
}

.card.no-pointer-events {
  pointer-events: none;
}

/* Shake animation for failed connection */
.card.shake {
  animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-3px);
  }
  40%,
  60% {
    transform: translateX(3px);
  }
}

.card-back,
.card-front {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 1vmin;
}

.card-back {
  background-color: var(--light-colour);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  transition: background-color 0.2s ease;
}

.card-back.hidden-face {
  display: none;
}

.card-back p,
.card-front p {
  width: 100%;
  height: 100%;
  padding: 1vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vmin;
  font-weight: 300;
  color: var(--dark-colour);
  text-align: center;
}

.card-front {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-direction: column;
  gap: 1vmin;
  display: none;
  justify-content: center;
  position: relative;
}

.card-front.visible-face {
  display: flex;
}

/* Category-specific background colors for flipped cards */
.card.category-A .card-front {
  background-color: #16a085;
  border: solid 0.5vmin #16a085;
}

.card.category-B .card-front {
  background-color: #8e44ad;
  border: solid 0.5vmin #8e44ad;
}

.card.category-C .card-front {
  background-color: #3498db;
  border: solid 0.5vmin #3498db;
}

.card.category-D .card-front {
  background-color: #c0392b;
  border: solid 0.5vmin #c0392b;
}

/* Ensure text remains visible on colored backgrounds */
.card.category-A .card-front p,
.card.category-B .card-front p,
.card.category-C .card-front p,
.card.category-D .card-front p {
  color: var(--white-colour);
}

/* Connection Question Dialog */
.connection-question-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.connection-question-dialog.visible {
  opacity: 1;
  pointer-events: auto;
}

.connection-question {
  background-color: var(--light-colour);
  min-width: 80vmin;
  padding: 4vmin 6vmin;
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2.75vmin 0 -2vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vmin;
}

.connection-question p:not(.simpleButton p),
.largerText {
  font-size: 3vmin !important;
  font-weight: 100 !important;
  color: var(--dark-colour);
  text-align: center;
  margin: 0;
  text-wrap: balance;
}

.connection-question .simpleButton {
  margin-top: 1vmin;
}

.text-focus-in {
  -webkit-animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}