/* Fairway Jam art: board look, sprite helpers and effects. Load after style.css.
   Every class is prefixed fj-. Sprites come from js/art.js as inline SVG strings. */

:root {
  --fj-fairway-a: #6cc463;
  --fj-fairway-b: #5cb554;
  --fj-fringe: #489b42;
  --fj-rough: #2f7a35;
  --fj-rough-edge: #1f5a27;
  --skin-fill: #fbfcf8;
}

/* ---------- board ---------- */
.fj-board {
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 45%, rgba(0, 40, 10, .10)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 var(--cell), rgba(0, 0, 0, .03) var(--cell) calc(var(--cell) * 2)),
    repeating-linear-gradient(180deg, var(--fj-fairway-a) 0 var(--cell), var(--fj-fairway-b) var(--cell) calc(var(--cell) * 2));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 4px 10px rgba(0, 30, 10, .18),
    0 0 0 3px var(--fj-fringe),
    0 0 0 calc(var(--cell) * .2 + 3px) var(--fj-rough),
    0 0 0 calc(var(--cell) * .2 + 6px) var(--fj-rough-edge),
    0 calc(var(--cell) * .3) calc(var(--cell) * .5) rgba(0, 0, 0, .35);
}

/* Any element holding a sprite: the SVG fills it and may overflow (shadows, flag). */
.fj-sprite { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: block; }
.fj-ball { inset: 24%; width: 52%; height: 52%; }
/* Tiles overlap neighbours by a hair; keep them under trees, carts and the ball. */
.fj-tile { z-index: 0; }

/* ---------- hole flag ---------- */
.fj-flag { transform-box: fill-box; transform-origin: 0% 50%; animation: fj-wave 1.8s ease-in-out infinite; }
@keyframes fj-wave {
  0%, 100% { transform: scaleX(1) skewY(0deg); }
  50% { transform: scaleX(.86) skewY(5deg); }
}

/* ---------- water ---------- */
.fj-ripple { transform-box: fill-box; transform-origin: 50% 50%; animation: fj-ripple 4s ease-in-out infinite; }
@keyframes fj-ripple {
  0%, 100% { opacity: 0; transform: translateX(-4px) scaleX(.7); }
  40%, 60% { opacity: .75; }
  50% { transform: translateX(3px) scaleX(1); }
}
.fj-sparkle { transform-box: fill-box; transform-origin: 50% 50%; animation: fj-sparkle 3s ease-in-out infinite; }
@keyframes fj-sparkle {
  0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  80% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* ---------- effects (one-shot; remove the element after FX_MS) ---------- */
/* Splash: a cell-sized element at the water cell, innerHTML = splashSVG(). The art is drawn 1.6 cells
   wide around the cell centre. A dark flash marks the spot, a white column of water jumps up, a crown
   of droplets is thrown up to 0.8 cell above the lake, and rings spread out. Lasts FX_MS.splash. */
.fj-splash { position: absolute; pointer-events: none; z-index: 6; }
.fj-splash .fj-splash-art { transform: scale(1.6); transform-origin: 50% 50%; }
.fj-splash .fj-splash-flash { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: fj-flash .5s ease-out forwards; }
@keyframes fj-flash {
  0% { opacity: 1; transform: scale(.5); }
  35% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}
.fj-splash .fj-splash-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: fj-ring 1s ease-out forwards; }
.fj-splash .fj-big { animation-name: fj-ring-big; animation-duration: 1.15s; }
.fj-splash .fj-late { animation-delay: .2s; opacity: 0; }
@keyframes fj-ring {
  0% { opacity: 1; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes fj-ring-big {
  0% { opacity: .9; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.8); }
}
.fj-splash .fj-splash-col { transform-box: fill-box; transform-origin: 50% 100%; animation: fj-col .7s ease-out forwards; }
@keyframes fj-col {
  0% { opacity: 1; transform: scale(.3, .2); }
  40% { opacity: 1; transform: scale(1, 1.3); }
  100% { opacity: 0; transform: scale(.6, .3); }
}
/* --dx / --dy are in sprite units (100 per cell). */
.fj-splash .fj-drop { opacity: 0; animation: fj-drop 1.05s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fj-drop {
  0% { opacity: 1; transform: translate(0, 0) scale(.6); }
  55% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) * .1 + 18px)) scale(.5); }
}

/* Sink: put fj-sink on the ball wrapper (or on the .fj-ball svg); the sprite drops into the cup. */
.fj-sink .fj-ball, .fj-ball.fj-sink, .ball.fj-sink .fj-ball { animation: fj-sink .42s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes fj-sink {
  0% { transform: scale(1); opacity: 1; }
  45% { transform: translateY(6%) scale(.8); opacity: 1; }
  100% { transform: translateY(26%) scale(.2); opacity: 0; }
}

/* Dust: a cell-sized element where a cart stopped, innerHTML = dustSVG(edge). */
.fj-dust { position: absolute; pointer-events: none; z-index: 1; }
.fj-dust .fj-puff { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: fj-puff .5s ease-out forwards; }
@keyframes fj-puff {
  0% { opacity: .9; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Confetti: a board-sized element (inset 0), innerHTML = confettiHTML(). */
.fj-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 8; }
.fj-confetti i {
  position: absolute; top: 35%; margin-left: -4px; width: 9px; height: 14px; border-radius: 2px;
  background: var(--c); opacity: 0;
  animation: fj-confetti 1.5s cubic-bezier(.15, .6, .4, 1) var(--d) forwards;
}
.fj-confetti i:nth-child(3n) { border-radius: 50%; width: 9px; height: 9px; }
@keyframes fj-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(var(--s)); }
  20% { opacity: 1; transform: translate(calc(var(--dx) * .5), -18vmin) rotate(calc(var(--r) * .3)) scale(var(--s)); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s)); }
}

/* Hint glow: put fj-hinted on a cart wrapper. */
.fj-hinted .fj-cart { animation: fj-glow .8s ease-in-out infinite; }
@keyframes fj-glow { 50% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 2px #fff); } }

@media (prefers-reduced-motion: reduce) {
  .fj-flag, .fj-ripple, .fj-sparkle, .fj-hinted .fj-cart { animation: none; }
  .fj-ripple { opacity: .5; }
  .fj-sparkle { opacity: 0; }
  .fj-splash .fj-drop { display: none; }
  .fj-splash .fj-splash-ring { animation-duration: .3s; }
  .fj-confetti i { animation-duration: .01s; }
  .fj-dust { display: none; }
  .fj-sink .fj-ball, .fj-ball.fj-sink, .ball.fj-sink .fj-ball { animation-duration: .2s; }
  .fj-splash .fj-splash-col, .fj-splash .fj-splash-flash { display: none; }
}