/* finders.css - Finders: flip the cards, find every pair.
   Reuses tokens from styles.css and game-shell.css's shell/bar/pause
   chrome, same as every other game. No joystick -- entirely tap-driven,
   same control-free posture as Letters/Numbers/Doors/Sliders. */

.finders-stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  box-sizing: border-box;
  /* Warm felt-table background so the cards read as objects on a
     table, not floating on the site's dark void. */
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(52, 211, 153, .14), transparent 70%),
    linear-gradient(to bottom, #123524, #0b1f16 70%, #081710);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.finders-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .finders-stats {
    /* Same real-bug precedent as Colors'/Cubes' own mobile stat-row
       fix -- the shell's buttons overlay the stage top on a phone, so
       the row needs clearance on BOTH sides. Coins was removed from
       the row entirely (same posture as Numbers'/Spiders'/Vines'/
       Cubes' own Coins removal -- still accrues via the shared system,
       just no on-screen readout), which is what lets Pairs/Moves/Time
       sit comfortably on one line in the narrow strip left between the
       shell's own left/right button clearance. Gap/min-width shrink
       further on mobile, same as Numbers. */
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
    gap: 6px;
  }
  /* min-width dropped to 0, not just a smaller floor -- see
     numbers.css's own comment on the specificity trap here (a plain
     single-class override loses to the base rule in source order). */
  .finders-stats .finders-stat {
    min-width: 0;
  }
  .finders-stats .finders-stat-value {
    font-size: 16px;
  }
  .finders-stats .finders-stat-label {
    font-size: 9px;
  }
}

.finders-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.finders-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.finders-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Countdown display: the Time stat is the time left. Under 10 seconds
   it turns red and pulses so the player feels the clock. The "+3s"
   flash appears beside it whenever a match banks time back. */
.finders-stat-time {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.finders-stat-value.is-low {
  color: #f87171;
  animation: finders-low-time-pulse 1s ease-in-out infinite;
}

@keyframes finders-low-time-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

.finders-time-bonus {
  position: absolute;
  left: 100%;
  top: -2px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #4ade80;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.finders-time-bonus.show {
  animation: finders-bonus-rise 1s ease-out forwards;
}

@keyframes finders-bonus-rise {
  0% { opacity: 0; transform: translateY(4px); }
  25% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* -- Board ---------------------------------------------------------- */

.finders-board {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  align-content: center;
}

.finders-cols-4 { grid-template-columns: repeat(4, 1fr); }
.finders-cols-5 { grid-template-columns: repeat(5, 1fr); }
.finders-cols-6 { grid-template-columns: repeat(6, 1fr); }

.finders-card {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 600px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.finders-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.3, 1.2, .4, 1);
}

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

.finders-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
}

/* Card back: deep teal with a gold star, so the face-down board reads
   as a neat set rather than a blank grid. */
.finders-card-back {
  background: linear-gradient(145deg, #0f766e, #134e4a 60%, #0b3b36);
  border: 2px solid rgba(242, 177, 52, .55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
  /* Face images enlarged 30% (26px -> 34px = 26 x 1.3 = 33.8, rounded). */
  font-size: 34px;
  color: #f2b134;
}

.finders-card-front {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
  border: 2px solid var(--face-border, #d97706);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  /* Face images enlarged 30% (34px -> 44px = 34 x 1.3 = 44.2, rounded). */
  font-size: 44px;
  line-height: 1;
}

.finders-cols-5 .finders-card-front { font-size: 39px; } /* 30px x 1.3 = 39 */
.finders-cols-5 .finders-card-back { font-size: 30px; } /* 23px x 1.3 = 29.9, rounded */
.finders-cols-6 .finders-card-front { font-size: 34px; } /* 26px x 1.3 = 33.8, rounded */
.finders-cols-6 .finders-card-back { font-size: 26px; } /* 20px x 1.3 = 26 */

/* A matched pair stays face-up with a soft gold glow + a little pop,
   so a found pair is unmistakable at a glance. */
.finders-card.is-matched .finders-card-front {
  border-color: #f2b134;
  box-shadow: 0 0 0 2px rgba(242, 177, 52, .65), 0 0 14px rgba(242, 177, 52, .45);
  animation: finders-match-pop .4s ease-out;
}

@keyframes finders-match-pop {
  0% { transform: rotateY(180deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}

.finders-card.is-matched { cursor: default; }

/* -- Actions + overlays (start/game-over) -- same pattern as every
   other game. */

.finders-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.finders-secondary-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.finders-secondary-btn:active { transform: scale(.96); }

.finders-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Lightened (.55) so the attract-mode board shows through behind
     the title, same posture as Slither/Spiders/Cubes/Vines. */
  background: rgba(10, 13, 16, .55);
  border-radius: var(--radius);
}

.finders-overlay[hidden] { display: none; }

.finders-overlay-card {
  text-align: center;
  padding: 24px;
  max-width: 340px;
}

.finders-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.finders-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.finders-overlay-card .course-primary {
  display: block;
  margin: 0 auto 10px;
}

.finders-end-run-btn {
  display: block;
  margin: 0 auto;
}