/* SnakeLoader — Capicúa's signature loading animation. Self-contained (no game CSS needed):
   a blank ivory domino snake being laid on the same warm-wood table the board uses. Pure
   transforms + opacity; positions are pre-computed so nothing reflows while it loops. */

.snake-loader { display: inline-flex; align-items: center; justify-content: center; }

/* the table surface — the SAME warm wood radial the game board uses (game.css .board-bg) */
.snake-loader-felt {
  position: relative; overflow: hidden; border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 28%, #8e5a32 0%, #6a3f22 48%, #4a2a14 100%);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .25), 0 6px 16px rgba(0, 0, 0, .28);
}
.snake-loader-snake { position: absolute; left: 0; top: 0; transition: opacity var(--sl-fade, .42s) ease; }

/* a blank ivory domino — same cream + rounded corners + shadow as a real tile, no pips */
.snake-loader-tile {
  position: absolute; border-radius: 3px;
  background: linear-gradient(160deg, #fbf6ea, #efe1c6);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(-10px) scale(.9);
  transition: opacity var(--sl-slide, .3s) ease-out, transform var(--sl-slide, .34s) cubic-bezier(.2, .85, .3, 1.06);
  transition-delay: var(--sl-delay, 0ms);
  will-change: transform, opacity;
}
/* the domino's centre divider — a blank tile still shows the split between its two halves */
.snake-loader-tile::before {
  content: ''; position: absolute; background: rgba(0, 0, 0, .16); border-radius: 2px;
  left: 16%; right: 16%; top: 50%; height: 2px; transform: translateY(-1px);
}
.snake-loader-tile.is-horiz::before {
  left: 50%; right: auto; top: 16%; bottom: 16%; width: 2px; height: auto; transform: translateX(-1px);
}

/* placed → slide/settle into position */
.snake-loader.is-placing .snake-loader-tile { opacity: 1; transform: translateY(0) scale(1); }
/* fade the whole snake out before the next round (the table stays) */
.snake-loader.is-fading .snake-loader-snake { opacity: 0; }
/* instant reset between loops — no reverse-transition flash */
.snake-loader.sl-reset .snake-loader-tile,
.snake-loader.sl-reset .snake-loader-snake { transition: none !important; }

/* full-bleed overlay (showSnakeLoader): warm-wood scrim that covers the app/target and holds
   the loader centred, then fades out to reveal the content underneath. */
.snake-loader-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 30%, rgba(58, 36, 21, .94), rgba(20, 12, 7, .97));
  transition: opacity .34s ease;
}
.snake-loader-overlay.is-local { position: absolute; z-index: 40; border-radius: inherit; }
.snake-loader-overlay.is-out { opacity: 0; pointer-events: none; }

/* swap helper: loader out / real content in, within the same box */
.snake-loader-host { position: relative; }
.snake-loader.is-done { opacity: 0; transition: opacity .3s ease; }
.snake-loader-in { animation: slFadeIn .3s ease both; }
@keyframes slFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* reduced motion: tiles simply fade in — no sliding/scaling */
@media (prefers-reduced-motion: reduce) {
  .snake-loader-tile { transform: none !important; transition: opacity .4s ease !important; transition-delay: var(--sl-delay, 0ms); }
  .snake-loader.is-placing .snake-loader-tile { transform: none !important; }
}