/* ═══════════════════════════════════════════════════════
   Arrow Puzzle — All Keyframe Animations
   ═══════════════════════════════════════════════════════ */

/* ── Loading bar ───────────────────────────────────────── */
@keyframes loading-fill {
  0%   { width: 0%; }
  60%  { width: 80%; }
  100% { width: 100%; }
}
@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* ── Modal entrance ────────────────────────────────────── */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.82) translateY(24px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Win / Lose emoji bounce ───────────────────────────── */
@keyframes bounce-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  80%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ── Stars pop-in (staggered via nth-child) ────────────── */
@keyframes star-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.4) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.stars-row .star {
  display: inline-block;
  animation: star-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.stars-row .star:nth-child(1) { animation-delay: 0.1s; }
.stars-row .star:nth-child(2) { animation-delay: 0.25s; }
.stars-row .star:nth-child(3) { animation-delay: 0.4s; }

/* ── Arrow: unified glow (same for valid AND blocked) ───── */
@keyframes arrow-glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--token-glow, currentColor)); }
  50%      { filter: drop-shadow(0 0 6px var(--token-glow, currentColor)); }
}
.arrow-token.valid,
.arrow-token.blocked {
  animation: arrow-glow 2.4s ease-in-out infinite;
}

/* ── Arrow: hint pulse (stronger) ──────────────────────── */
@keyframes hint-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--token-glow, currentColor)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 14px var(--token-glow, currentColor)) drop-shadow(0 0 6px var(--token-glow, currentColor)); transform: scale(1.08); }
}
.arrow-token.hint {
  animation: hint-pulse 0.9s ease-in-out infinite;
}

/* ── Arrow: shake on wrong click ───────────────────────── */
/* MUST be declared last — overrides arrow-glow when both classes present */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  35%      { transform: translateX(7px); }
  55%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.arrow-token.shake {
  animation: shake 0.38s ease !important;
}

/* ── Cell: path flash ──────────────────────────────────── */
@keyframes path-flash {
  0%   { background: var(--flash-clr, rgba(255,167,38,0.3)); }
  100% { background: var(--cell-bg); }
}
.cell.path-flash { animation: path-flash 0.28s ease forwards; }

/* ── Cell: blocked flash ────────────────────────────────── */
@keyframes cell-blocked {
  0%   { background: rgba(239, 83, 80, 0.45); }
  100% { background: var(--cell-bg); }
}
.cell.blocked { animation: cell-blocked 0.38s ease forwards; }

/* ── Arrow: spin-rotate (power-up) ─────────────────────── */
@keyframes spin-rotate-anim {
  0%   { transform: rotate(0deg) scale(1); }
  40%  { transform: rotate(200deg) scale(1.3); }
  70%  { transform: rotate(320deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.arrow-token.spin-rotate {
  animation: spin-rotate-anim 0.38s ease forwards !important;
}

/* ── Arrow: rotate-target highlight ────────────────────── */
.arrow-token.rotate-target {
  outline: 2px dashed #00e5b4;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Bomb: blast ring ───────────────────────────────────── */
@keyframes blast-ring-anim {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 6px; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; border-width: 1px; }
}
.blast-ring {
  position: fixed;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 6px solid #ffa726;
  box-shadow: 0 0 20px #ffa726, 0 0 40px #ef5350;
  pointer-events: none;
  z-index: 1001;
  animation: blast-ring-anim 0.55s ease-out forwards;
}

/* ── Screen shake ───────────────────────────────────────── */
@keyframes screen-shake-anim {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px) rotate(-0.5deg); }
  40%     { transform: translateX(6px)  rotate(0.5deg); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.screen-shake { animation: screen-shake-anim 0.38s ease; }

/* ── Heart: life lost ───────────────────────────────────── */
@keyframes heart-crack-anim {
  0%   { transform: scale(1); filter: none; }
  30%  { transform: scale(1.4); filter: brightness(2) saturate(0); }
  60%  { transform: scale(0.7) rotate(15deg); opacity: 0.5; }
  100% { transform: scale(0.4); opacity: 0; }
}
.heart-icon.heart-crack { animation: heart-crack-anim 0.55s ease forwards; }

/* ── Toast slide-up ─────────────────────────────────────── */
@keyframes toast-in {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(-50%) translateY(0);    opacity: 1; }
  to   { transform: translateX(-50%) translateY(-20px); opacity: 0; }
}

/* ── Badge glow (earned) ────────────────────────────────── */
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent); }
  50%      { box-shadow: 0 0 16px 4px var(--accent), 0 0 32px var(--accent); }
}
.badge-card.earned { animation: badge-glow 2.5s ease-in-out infinite; }

/* ── Badge unlock overlay ───────────────────────────────── */
@keyframes badge-icon-zoom {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
.badge-unlock-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.badge-unlock-overlay.active {
  opacity: 1; pointer-events: all;
}
.badge-unlock-card {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  max-width: 320px; width: 90%;
  position: relative;
  overflow: hidden;
}
.badge-unlock-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--accent)22 0%, transparent 70%);
  pointer-events: none;
}
.badge-icon-big {
  font-size: 80px;
  display: block;
  animation: badge-icon-zoom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.badge-unlock-name {
  font-size: 22px; font-weight: 800;
  color: var(--accent); margin: 8px 0 4px;
}

/* ── Coin shine ─────────────────────────────────────────── */
@keyframes coin-shine {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5) drop-shadow(0 0 4px gold); }
}
.hud-coins:has(span:last-child) { animation: coin-shine 1.5s ease-in-out 1; }

/* ── Pulse button ───────────────────────────────────────── */
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(233,69,96,0); }
}

/* ── Daily claim glow ───────────────────────────────────── */
@keyframes daily-today-glow {
  0%, 100% { box-shadow: 0 0 0 2px gold; }
  50%      { box-shadow: 0 0 12px 4px gold, 0 0 20px gold; }
}
.day-card.today { animation: daily-today-glow 1.4s ease-in-out infinite; }

/* ── Challenge button pulse ─────────────────────────────── */
@keyframes challenge-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(156,39,176,0.4); }
  50%      { box-shadow: 0 4px 32px rgba(156,39,176,0.8); }
}
.btn-challenge { animation: challenge-pulse 2s ease-in-out infinite; }

/* ── Grid cell drop-in (handled by JS but define base) ─── */
.cell {
  transition: background 0.2s ease;
}

/* ── Coin HUD pop (when balance updates) ────────────────── */
@keyframes coin-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); color: #ffd700; }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.coin-pop { animation: coin-pop 0.35s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }

/* ── Coin fly particle ──────────────────────────────────── */
.coin-fly {
  position: fixed;
  pointer-events: none;
  z-index: 600;
  font-size: 20px;
  transition: left 0.5s ease-in, top 0.5s ease-in, opacity 0.2s ease 0.4s;
}

/* ── Skin: Fire — flicker between orange and red ────────── */
@keyframes fire-flicker {
  0%,100% { color: #ff6f00; filter: drop-shadow(0 0 4px #ff6f00) drop-shadow(0 0 8px #ff3d0088); }
  33%     { color: #ff1744; filter: drop-shadow(0 0 8px #ff1744) drop-shadow(0 0 16px #ff174488) brightness(1.2); }
  66%     { color: #ff9800; filter: drop-shadow(0 0 5px #ff9800) drop-shadow(0 0 10px #ffa00066); }
}
[data-skin="fire"] .arrow-token {
  animation: fire-flicker 0.7s ease-in-out infinite !important;
}

/* ── Skin: Ice — frost shimmer ──────────────────────────── */
@keyframes ice-shimmer {
  0%,100% { filter: drop-shadow(0 0 3px #80d8ff); opacity: 1; }
  50%     { filter: drop-shadow(0 0 8px #b3e5fc) drop-shadow(0 0 14px #80d8ff) brightness(1.25); opacity: 0.85; }
}
[data-skin="ice"] .arrow-token {
  animation: ice-shimmer 2.2s ease-in-out infinite !important;
}

/* ── Skin: Gold — metallic pulse ────────────────────────── */
@keyframes gold-shine {
  0%,100% { filter: drop-shadow(0 0 3px #FFD700); }
  40%     { filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 4px #FF8F00) brightness(1.45); }
  70%     { filter: drop-shadow(0 0 5px #FFC107) brightness(1.1); }
}
[data-skin="gold"] .arrow-token {
  animation: gold-shine 1.6s ease-in-out infinite !important;
}

/* ── Skin: Neon — continuous hard glow (override default) ─ */
@keyframes neon-glow {
  0%,100% { filter: drop-shadow(0 0 4px #00e5ff) drop-shadow(0 0 8px #00e5ff88); }
  50%     { filter: drop-shadow(0 0 10px #00e5ff) drop-shadow(0 0 20px #00e5ffaa) brightness(1.3); }
}
[data-skin="neon"] .arrow-token {
  animation: neon-glow 1.4s ease-in-out infinite !important;
}

/* All skin animations must yield to shake */
[data-skin] .arrow-token.shake {
  animation: shake 0.38s ease !important;
}