/* cherries.css - Cherries: a one-handed basket catcher. Reuses tokens from
   styles.css and game-shell.css's shell/bar/pause chrome, same as every
   other game. The interaction is dragging directly on the board (or the
   arrow keys) -- no joystick. The big centre score and the start/game-
   over overlays keep the preview's look; the stats row above the board
   is the shared pattern (Score / Best / Lives / Coins). */

.cherries-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 8px;
}

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

@media (max-width: 480px) {
  .cherries-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
    gap: 10px;
  }
  /* Same precedent as Wings' own mobile stat-row fix -- Coins is the
     least essential stat mid-play, so it's the one dropped when the
     shell's own button clearance squeezes this row. */
  .cherries-stats .cherries-stat-compact-hide {
    display: none;
  }
}

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

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

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

.cherries-board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Chromium (Chrome/Edge) paints its default tap-highlight colour over
     a tapped clickable element -- on this full-board drag surface that
     reads as a colour flash on every tap. Transparent keeps the drag
     itself working exactly as before, just without the flash. The
     property is inherited, so the canvas and overlays inside the board
     get it too. */
  -webkit-tap-highlight-color: transparent;
}

.cherries-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #7ec4e8;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
  /* Explicit on the canvas itself (the visible drag surface) as well as
     the wrap, so the flash stays gone even if the canvas is ever moved
     out of the board wrap. */
  -webkit-tap-highlight-color: transparent;
}

/* Big centre score while playing. */
.cherries-hud {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.cherries-hud[hidden] { display: none; }

.cherries-hud-score {
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(20, 40, 60, .18), 0 6px 22px rgba(20, 40, 60, .35);
  font-variant-numeric: tabular-nums;
}

.cherries-hud-label {
  margin-top: 2px;
  color: rgba(255, 255, 255, .92);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(20, 40, 60, .45);
}

/* -- Overlays (start/game-over) -- same pattern as every other game.
   The start overlay stays transparent so the sky, the drifting basket
   and the falling fruit show through, as in the preview. */

.cherries-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px;
  border-radius: var(--radius);
}

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

.cherries-basket-mark {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 8px 18px rgba(20, 40, 60, .35));
}

.cherries-kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(20, 40, 60, .4);
  margin: 0 0 6px;
}

.cherries-overlay-title {
  font-family: Georgia, serif;
  font-size: 4.6rem;
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
  text-shadow: 0 3px 0 rgba(20, 40, 60, .15), 0 10px 30px rgba(20, 40, 60, .35);
}

.cherries-overlay-text {
  margin: 12px 0 0;
  max-width: 30ch;
  color: rgba(255, 255, 255, .94);
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(20, 40, 60, .45);
}

.cherries-tap-hint {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(13, 24, 36, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  animation: cherries-pulse 1.6s ease-in-out infinite;
}

@keyframes cherries-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .cherries-tap-hint { animation: none; }
}

.cherries-how {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: .85rem;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(20, 40, 60, .5);
  max-width: 34ch;
}

.cherries-how b { color: #fff; }

/* Game-over panel -- a solid card over a dimmed board, same pattern as
   every other game's game-over overlay. */

#cherriesGameOver {
  background: rgba(10, 13, 16, .72);
}

.cherries-panel {
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  padding: 22px 22px 20px;
  width: min(320px, 88%);
  box-shadow: 0 16px 44px rgba(10, 25, 40, .35);
  cursor: default;
}

.cherries-panel h2 {
  font-family: Georgia, serif;
  font-size: 1.9rem;
  line-height: 1.05;
  margin: 0;
  font-weight: 800;
}

.cherries-newbest {
  display: none;
  margin: 10px auto 0;
  width: fit-content;
  background: var(--accent);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

.cherries-newbest.show { display: block; }

.cherries-panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 18px 0;
}

.cherries-panel-stat {
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 4px 9px;
}

.cherries-panel-num {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cherries-panel-lab {
  margin-top: 5px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cherries-again-hint {
  margin: 11px 0 0;
  font-size: .8rem;
  color: var(--muted);
}