/* --------------------- Global ------------------------- */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(135deg, #0b3773, #96deff);
}

button {
  padding: 10px 20px;
  border: none;
  background-color: #0b3773;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

button:hover { background-color: #2870bd;}

button:focus {
  outline: 3px solid #ffd54f;
  outline-offset: 2px;
}

h1 {font-size: clamp(1.5rem, 2.5vw, 1.5rem);}
h2 {font-size: clamp(1.2rem, 2.2vw, 1.2rem);}

h1, h2 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

p {
    text-align: center;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    font-weight: bold;
    color: white;
    margin: 10px 0 10px;
}

.hidden { display: none !important; }  /* hides other game mode */


/* ----------------- Memory Cards CSS ------------------ */
.actions {
    display: flex;
    justify-content: center;
}

.actions button {
    padding: 10px 10px;
    font-size: clamp(.9rem, 1.2vw, 1rem);
    border-radius: 8px;
    background-color: #27ae60;
    color: white;
}

.back, .front {
    backface-visibility: hidden;
    position: absolute;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

.front-image {
  max-width: 90%;        
  max-height: 90%;         
  display: block;  
  object-fit: cover;    
}

.grid-container {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(4, 140px);
  gap: 8px 8px;
  max-width: 700px; 
  align-content: center;
}

.grid-container.is-busy .memcard { pointer-events: none;}

.memcard {
  height: calc(100px / 2 * 3);
  width: 100px;
  border-radius: 8px;
  background-color: white;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.5s ease-in-out;
  justify-self: center;
}

.memcard .front {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
}

.memcard .back {
  position: relative;
  background-image: url('../assets/GUC_cover.png') ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  backface-visibility: hidden;
}

.memcard.matched .front,
.memcard.matched .front img {
  filter: grayscale(100%) brightness(0.9) contrast(0.9);
  opacity: 0.75;                
}

.memcard:focus { 
  outline: 2px solid #ffa; 
  outline-offset: 2px; 
}

.memcard.flipped { transform: rotateY(180deg);}
.memcard:hover { transform: translateY(-5px); }
.memcard.matched { pointer-events: none; }

.status-msg {
  margin-top: 8px;
  margin-bottom: 8px;
  min-height: 1.25em; 
  text-align: center; 
  color: yellow;               
  font-weight: 500;
}

/* ----------------- Flash Cards CSS ------------------ */
.flashcard-container {
  display: flex;
  perspective: 1000px;
  width: clamp(200px, 25vw, 240px);
  height: clamp(300px, 40vh, 400px);
  margin: 0.8rem auto 0.8rem; 
  align-items: center;
  justify-content: center;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  align-items: center;
  justify-content: center;
}

.card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.card__inner.is-flipped { transform: rotateY(180deg);}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3.5rem, 11vw, 10rem);
}

.card__face--front {
  background: #f3f3f3;
  color: #0b3773;
}

.card__face--back {
  background: #f3f3f3;
  color: #222;
  font-size: clamp(1rem, 3vw, 2.2rem);
  transform: rotateY(180deg);
  background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
}

.controls {
  display: flex;
  gap: 15px;
  margin-top: 12px; 
}

/* Arrow buttons */
.arrow-btn{
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: .25rem .25rem;
  font-size: clamp(2rem, 2vw, 4rem);
}

.arrow-btn:hover { opacity: .9; }

.arrow-btn:disabled { 
  opacity: .45; 
  cursor: not-allowed;
  filter: grayscale(20%); 
}

button:disabled { /* disables got it and again button unless flip interaction is done */
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

#progress-display{ /* Score */
  grid-column: 1 / -1;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 600;
  text-align: center;
  color: white;  
  margin: .25rem 0 .75rem;
}

#flash-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#flash-stage{
  display: grid;               
  grid-template-columns: 44px minmax(260px, 340px) 44px; 
  gap: 4px 4px;                
  align-items: center;
  justify-content: center;
}