:root {
  --bg-gradient-start: #a8edea;
  --bg-gradient-end: #fed6e3;
  --card-back-color: #6c5ce7;
  --card-front-bg: #ffffff;
  --button-gradient-start: #fd79a8;
  --button-gradient-end: #e84393;
  --text-color: #2d3436;
  --text-light: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.2);
  --card-radius: 16px;
  --flip-duration: 300ms;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
}

#game-container {
  width: 100%;
  max-width: 500px;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 12px;
  padding-top: 140px;
  padding-bottom: env(safe-area-inset-bottom, 12px);
  position: relative;
  overflow: hidden;
}

/* Tablet: widen the container so cards scale up. The card-grid sizing
   logic is height-capped too, so cards won't go absurd on larger screens. */
@media (min-width: 768px) {
  #game-container {
    max-width: 900px;
  }
}

/* Screens */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  user-select: none;
  -webkit-user-select: none;
}

/* Title Screen */
.title-screen {
  text-align: center;
}

.game-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-color);
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
  animation: bounce-in 0.6s ease-out;
}

@keyframes bounce-in {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.play-button {
  font-size: 2rem;
  font-weight: 700;
  padding: 20px 60px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--button-gradient-start), var(--button-gradient-end));
  color: var(--text-light);
  cursor: pointer;
  box-shadow: 0 8px 20px var(--shadow-color);
  transition: transform 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.play-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px var(--shadow-color);
}

.play-button:active {
  transform: scale(0.95);
}

.mute-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mute-button .sound-off {
  display: none;
}

/* Difficulty Chooser (SCRUM-33) */
.difficulty-screen {
  gap: 18px;
  text-align: center;
}

.difficulty-subtitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
  opacity: 0.7;
}

.difficulty-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 300px;
  margin-top: 14px;
}

.difficulty-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-weight: 800;
  color: var(--text-light);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.difficulty-btn:active {
  transform: scale(0.96);
}

.difficulty-btn.easy {
  background: linear-gradient(135deg, #00B5B5, #00cec9);
  box-shadow: 0 4px 12px rgba(0, 181, 181, 0.4);
}

.difficulty-btn.medium {
  background: linear-gradient(135deg, #FF7639, #f39c12);
  box-shadow: 0 4px 12px rgba(255, 118, 57, 0.4);
}

.difficulty-btn.hard {
  background: linear-gradient(135deg, #e17055, #d63031);
  box-shadow: 0 4px 12px rgba(225, 112, 85, 0.4);
}

.diff-label {
  font-size: 1.15rem;
}

.diff-count {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.85;
}

/* Locked difficulties (paygate) — mirrors jigsaw-puzzle's gallery lock
   treatment: desaturated content + subtle scrim + white lock badge. */
.difficulty-btn.locked {
  filter: saturate(0.55);
  /* Keep the pair count clear of the lock badge sitting in the padding. */
  padding-right: 64px;
}

.difficulty-btn.locked::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.lock-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.mute-button.is-muted .sound-on {
  display: none;
}

.mute-button.is-muted .sound-off {
  display: block;
}

/* Game Screen */
.game-screen {
  gap: 0;
  padding: 0;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

.level-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.5;
  z-index: 100;
}

/* Card Grid */
.card-grid {
  --grid-gap: 8px;
  /* SCRUM-35: perimeter breathing room so the grid never sits flush
     against the screen edges (or the Flutter header above). The frame is
     subtracted from both the height and width budgets, and the centered
     grid leaves it as symmetric padding all around. */
  --grid-frame: 20px;
  --available-height: calc(100dvh - 164px - 2 * var(--grid-frame));
  --card-max-height: calc((var(--available-height) - (var(--rows) - 1) * var(--grid-gap)) / var(--rows));
  --card-width: calc(var(--card-max-height) * 3 / 4);
  --card-max-width: calc((100% - (var(--cols) - 1) * var(--grid-gap) - 2 * var(--grid-frame)) / var(--cols));

  display: grid;
  grid-template-columns: repeat(var(--cols), min(var(--card-width), var(--card-max-width)));
  grid-template-rows: repeat(var(--rows), auto);
  gap: var(--grid-gap);
  width: 100%;
  max-height: var(--available-height);
  margin: auto;
  align-content: center;
  justify-content: center;
}

/* Cards */
.card {
  width: 100%;
  aspect-ratio: 3 / 4;
  perspective: 1000px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration) ease-in-out, box-shadow 0.1s;
}

.card:not(.is-flipped):not(.is-matched):active .card-back {
  box-shadow: 0 2px 8px var(--shadow-color);
  transform: scale(0.95);
}

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

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--card-radius);
  box-shadow: 0 4px 12px var(--shadow-color);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 3px solid white;
}

.card-front {
  transform: rotateY(180deg);
  background: #FFF4E6;
}

.card-back {
  background: #004D81;
  transition: transform 0.1s, box-shadow 0.1s;
}

.card-back .card-image {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--card-radius);
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Match celebration */
.card.is-matched .card-inner {
  transform: rotateY(180deg);
  transition: none;
  animation: match-celebrate 0.5s ease-in-out forwards;
}

@keyframes match-celebrate {
  0%, 100% { transform: rotateY(180deg) scale(1); }
  25% { transform: rotateY(180deg) scale(1.1); }
  50% { transform: rotateY(180deg) scale(1.05); }
  75% { transform: rotateY(180deg) scale(1.1); }
}

.card.is-removed .card-inner {
  transform: rotateY(180deg);
}

.card.is-removed {
  animation: card-remove 0.4s ease-in forwards;
  pointer-events: none;
}

@keyframes card-remove {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* Sparkles */
.sparkle {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle-burst 0.6s ease-out forwards;
  z-index: 1000;
}

@keyframes sparkle-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* Level Complete Screen */
.level-complete-screen {
  animation: fade-in 0.5s ease-out;
}

.complete-text {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-color);
  animation: bounce-in 0.6s ease-out;
}

/* Game Complete Screen */
.game-complete-screen {
  position: relative;
  overflow: hidden;
}

.win-text {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--text-color);
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
  animation: bounce-in 0.6s ease-out;
  z-index: 10;
}

.complete-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

/* Secondary action on the completion screen ("Choose Level"). */
.play-button.secondary {
  font-size: 1.4rem;
  padding: 14px 44px;
  background: linear-gradient(135deg, #00B5B5, #00cec9);
  box-shadow: 0 6px 16px rgba(0, 181, 181, 0.4);
}

/* Confetti */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  animation: confetti-fall linear infinite;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Leave Confirmation (shared "leave?" design; SCRUM-7) ──── */
#leave-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#leave-overlay.visible {
  display: flex;
}

#leave-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#leave-card {
  position: relative;
  background: #FFEED3;
  border-radius: 24px;
  padding: 28px 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-family: 'Nunito', sans-serif;
}

#leave-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: #1a1a1a;
}

#leave-message {
  margin: 0 0 20px;
  font-size: 16px;
  color: #4a4a4a;
}

#leave-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#leave-buttons button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 24px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease;
}

#leave-buttons button:active {
  transform: scale(0.96);
}

#leave-confirm-btn {
  background: #00B5B5;
  color: #fff;
}

#leave-cancel-btn {
  background: #fff;
  color: #00B5B5;
  border: 2px solid #00B5B5;
}