/* =============================================================
   GAME: Fruit Merge
   ============================================================= */
.board-fruitmerge { display: flex; flex-direction: column; align-items: center; gap: 10px; outline: none; }
.fm-stage { position: relative; touch-action: none; }
.fm-canvas {
  display: block; border-radius: 16px; background: #1a0a16; cursor: crosshair;
  box-shadow: 0 0 0 2px #ff8a4d, 0 0 28px rgba(255, 138, 77, .35);
}
.board-fruitmerge:focus-visible .fm-canvas { box-shadow: 0 0 0 3px #fff, 0 0 28px rgba(255, 138, 77, .55); }
.fm-msg {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: max-content; max-width: 82%;
  padding: 10px 16px; border-radius: 12px; background: rgba(30, 10, 18, .86); color: #ffe8da; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px rgba(255, 138, 77, .55); pointer-events: none;
}
.fm-msg[hidden] { display: none; }
.fm-num { color: #ffb48e; font-variant-numeric: tabular-nums; }
.fm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

/* on-screen buttons: phones and tablets only */
.fm-pad { display: none; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; width: min(100%, 360px); touch-action: none; }
.fm-key {
  display: grid; place-items: center; height: 52px; border: 0; border-radius: 14px; cursor: pointer; color: #ffb48e;
  font: 800 .95rem var(--font-head, system-ui); text-transform: uppercase; letter-spacing: .04em;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 138, 77, .45), 0 4px 0 rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.fm-key svg { width: 26px; height: 26px; fill: currentColor; }
.fm-key-drop { color: #fff; background: linear-gradient(180deg, #ff9a5c, #e0562a); box-shadow: 0 0 16px rgba(255, 138, 77, .4), 0 4px 0 rgba(0, 0, 0, .35); }
.fm-key.down { transform: translateY(2px); filter: brightness(1.2); }
@media (pointer: coarse) { .fm-pad { display: grid; } }

/* game over: a short shake of the jar (off when motion is reduced) */
.fm-crash { animation: fmShake .45s cubic-bezier(.36, .07, .19, .97); }
.fm-crash .fm-canvas { box-shadow: 0 0 0 2px #ff3d5e, 0 0 30px rgba(255, 61, 94, .5); }
@keyframes fmShake { 15%, 55% { translate: -5px 0; } 35%, 75% { translate: 5px 0; } 90% { translate: -2px 0; } }
@media (prefers-reduced-motion: reduce) { .fm-crash { animation: none; } }