/* Fruit Falls — widget-local styles. Widget chrome (HUD, arena base, overlays,
   score form, leaderboard) lives in ../../style.css. Fruit colors are CSS
   variables with dark variants; the six fruits also have distinct SVG
   silhouettes so color is never the only signal. */

:root {
  --ff-cell: rgba(27, 39, 64, 0.07);
  --ff-f0: #e2564f;  /* apple */
  --ff-f1: #f0913c;  /* orange slice */
  --ff-f2: #8d63d6;  /* grape */
  --ff-f3: #e8c93e;  /* lemon */
  --ff-f4: #e2568b;  /* berry */
  --ff-f5: #5a76d8;  /* plum */
  --ff-detail: rgba(255, 255, 255, 0.55);
  --ff-shadow: rgba(27, 39, 64, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ff-cell: rgba(255, 255, 255, 0.055);
    --ff-f0: #d4685f;
    --ff-f1: #d98d4b;
    --ff-f2: #9a77d8;
    --ff-f3: #cfb552;
    --ff-f4: #d06a94;
    --ff-f5: #7289d4;
    --ff-detail: rgba(255, 255, 255, 0.4);
    --ff-shadow: rgba(0, 0, 0, 0.4);
  }
}

.arena-ff {
  height: auto;
  min-height: 0;
  /* No horizontal padding: on a 390px viewport the board needs the full page
     width for 7 cells to stay >= 48px. */
  padding: 10px 0;
  display: flex;
  justify-content: center;
  background: var(--surface);
}

/* touch-action: none on the board only — swipe-swapping must not scroll.
   overflow: hidden clips refill tiles, which start at negative rows and
   glide in — without it they visibly float above the board every cascade. */
.ff-board {
  position: relative;
  width: min(100%, 448px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  touch-action: none;
  border-radius: 12px;
  overflow: hidden;
}

.ff-board:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}

.ff-cellbg {
  background: var(--ff-cell);
  border-radius: 8px;
}

/* Tile = translating outer element; inner .fruit scales/fades so the two
   transforms never fight (pattern shared with merge-zen). */
.ff-tile {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  cursor: grab;
}

.ff-tile .fruit {
  display: block;
  width: 100%;
  height: 100%;
  padding: 6%;
  box-sizing: border-box;
  filter: drop-shadow(0 1px 1.5px var(--ff-shadow));
}

.ff-tile svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ff-f0 { color: var(--ff-f0); }
.ff-f1 { color: var(--ff-f1); }
.ff-f2 { color: var(--ff-f2); }
.ff-f3 { color: var(--ff-f3); }
.ff-f4 { color: var(--ff-f4); }
.ff-f5 { color: var(--ff-f5); }

.ff-detail {
  fill: var(--ff-detail);
}

.ff-sun {
  color: var(--ink);
}

/* Selection (tap-tap + keyboard pick) and keyboard cursor. */
.ff-tile.sel .fruit {
  outline: 3px solid var(--accent);
  outline-offset: -1px;
  border-radius: 10px;
}

.ff-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  border: 3px solid var(--accent);
  border-radius: 10px;
  pointer-events: none;
  display: none;
}

.ff-cursor.show { display: block; }
.ff-cursor.grab { border-style: dashed; }

/* When the run ends, the results replace the board: a statically-positioned
   overlay sizes the arena to its own content, so nothing clips or scrolls
   inside a too-short box on phones (the absolute inset:0 overlay clipped —
   the arena is only as tall as the board). */
.arena-ff.ended {
  display: block;
}

.arena-ff.ended .ff-board,
.arena-ff.ended .ff-toast,
.arena-ff.ended .ff-callout {
  display: none;
}

.arena-ff.ended .overlay {
  position: static;
}

@media (prefers-reduced-motion: no-preference) {
  .ff-tile {
    transition: transform 0.2s cubic-bezier(0.45, 0, 0.8, 1); /* slight ease-in: gravity */
  }

  .ff-tile.swapping {
    transition: transform 0.14s ease-out;
  }

  .fruit.pop {
    animation: ff-pop 0.21s ease-out forwards;
  }

  .fruit.spawn {
    animation: ff-spawn 0.2s ease-out;
  }

  @keyframes ff-pop {
    45%  { transform: scale(1.18); opacity: 0.9; }
    100% { transform: scale(0.25); opacity: 0; }
  }

  @keyframes ff-spawn {
    from { transform: scale(0.4); opacity: 0.2; }
  }

  .ff-callout {
    animation: ff-callout 0.85s ease-out forwards;
  }

  @keyframes ff-callout {
    0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
    25%  { transform: translate(-50%, -12px) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, -34px) scale(1); opacity: 0; }
  }

  #movesChip.low strong {
    animation: ff-pulse 1.4s ease-in-out infinite;
  }

  @keyframes ff-pulse {
    50% { transform: scale(1.22); }
  }
}

/* Reduced motion: clears/falls become quick opacity cues; the chain callout
   stays visible (it's information, not decoration) and just fades. */
@media (prefers-reduced-motion: reduce) {
  .fruit.pop {
    animation: ff-fadeout 0.1s linear forwards;
  }

  .fruit.spawn {
    animation: ff-fadein 0.12s linear;
  }

  @keyframes ff-fadeout { to { opacity: 0; } }
  @keyframes ff-fadein { from { opacity: 0.2; } }

  .ff-callout {
    animation: ff-fadeholdout 1.1s linear forwards;
  }

  @keyframes ff-fadeholdout {
    0% { opacity: 0; }
    15% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }
}

#movesChip.low strong {
  color: #c2410c;
}

@media (prefers-color-scheme: dark) {
  #movesChip.low strong {
    color: #fdba74;
  }
}

/* --- callout / toast --------------------------------------------------------- */

.ff-callout {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  z-index: 15;
  margin: 0;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--accent-ink);
  pointer-events: none;
}

.ff-toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 15;
  margin: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: 0.92rem;
  pointer-events: none;
}

/* --- HUD sound button (house pattern) ------------------------------------------ */

.toolbar-spacer { flex: 1; }

.hud .tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hud .tool[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.hud .tool svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hud .tool svg .fill { fill: currentColor; stroke: none; }

#soundBtn .icon-when-on { display: none; }
#soundBtn[aria-pressed="true"] .icon-when-on { display: initial; }
#soundBtn[aria-pressed="true"] .icon-when-off { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}