/* =========================================================
   GLOBAL RESET & BASE
========================================================= */
* {
  box-sizing: border-box;
}



body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, #91b4ae 0%, #7aa29c 100%);
  text-align: center;
  margin: 0;
  padding: clamp(12px, 3vw, 24px);
  
  min-height: 100vh;
  background-attachment: fixed;

}

h1 {
  margin-bottom: 6px;
}

.subtitle {
  margin-bottom: 26px;
}


/* =====================================
   BLUE SELECT DROPDOWNS
===================================== */

.blue-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;          /* Remove default browser styling */

  font-size: 16px;           /* Similar size to body text */
  font-family: inherit;
  line-height: 1.3;

  padding: 10px 14px;        /* Comfortable click target */
  border-radius: 10px;       /* Rounded corners */

  min-width: 180px;          /* Consistent sizing */
  max-width: 240px;

  background-color: #e8f1ff;
  color: #123a63;

  border: 1px solid #5d88c8;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.6),
    0 2px 4px rgba(0,0,0,0.15);

  cursor: pointer;
}

/* Hover / focus states */
.blue-select:hover {
  background-color: #ddeaff;
}

.blue-select:focus {
  outline: none;
  border-color: #2a6edb;
  box-shadow:
    0 0 0 3px rgba(42,110,219,0.25),
    inset 0 1px 2px rgba(255,255,255,0.6);
}

/* Disabled state (if used later) */
.blue-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* =========================================================
   GAME BOARD – FLUID GRID
========================================================= */
#game-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  max-width: 920px;
  margin: 0 auto;
  gap: clamp(18px, 3vw, 36px);
  justify-items: center;
}

/* =========================================================
   CARD WRAPPER (ANCHOR – NEVER MOVES)
========================================================= */
.card {
  position: relative;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 13 / 9;  /* fluid height */
  perspective: 1400px;
  cursor: pointer;
  touch-action: manipulation;
}

/* =========================================================
   CARD INNER (ROTATING ELEMENT)
========================================================= */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;

  transform-style: preserve-3d;
  transform-origin: center center;

  transition:
    transform 0.65s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.35s ease;

  /* Playing-card depth */
  box-shadow:
    0 6px 10px rgba(0,0,0,0.25),
    0 1px 3px rgba(0,0,0,0.2);
}

/* ✅ Pure rotation only – no lateral movement */
.card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* =========================================================
   CARD FACES
========================================================= */
.card-front,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.5vw, 14px);

  backface-visibility: hidden;

  /* Edge definition */
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* FRONT – WHITE PLAYING CARD */
.card-front {
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  color: #222;
  font-weight: 600;

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.12),
    inset 0 -1px 2px rgba(0,0,0,0.08);
}

/* BACK – COLOURED CARD BACK */
.card-back {
  background:
    linear-gradient(135deg, #4b8f8c 0%, #356c6a 100%);
  color: #ffffff;
  font-weight: bold;
  text-align: center;

  transform: rotateY(180deg);

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.18);
}

/* =========================================================
   LIFT & FEEL (FLUID, NOT JERKY)
========================================================= */
.card:hover .card-inner {
  box-shadow:
    0 14px 24px rgba(0,0,0,0.32),
    0 6px 12px rgba(0,0,0,0.22);
}

/* =========================================================
   MATCHED STATE
========================================================= */
.card.matched {
  pointer-events: none;
  opacity: 0.7;
}

/* =========================================================
   CONTROLS
========================================================= */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}


#start-btn,
#restart-btn {
  padding: 11px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid #5d88c8;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #e8f1ff);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    inset 0 1px 2px rgba(255,255,255,0.6);
  transition: all 0.15s ease;
}

#timer,
#best-time {
  margin-left: 14px;
  font-weight: bold;
}
#start-btn {
  background: linear-gradient(180deg, #5d88c8, #3f6fb2);
  color: #ffffff;
}

#start-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #4d79c2, #345f99);
}

/* =========================================================
   DISABLED BOARD
========================================================= */
#game-board.disabled .card {
  pointer-events: none;
  opacity: 0.7;
}

/* =========================================================
   MOBILE REFINEMENTS
========================================================= */
@media (max-width: 600px) {
  #game-board {
    gap: 22px;
  }

  .card {
    max-width: 100%;
  }
}
.controls select:disabled,
.controls button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}