/* Game-feel layer: pops, shakes, flashes, and the night transition. */

.fx-pop {
  position: fixed;
  z-index: 90;
  transform: translate(-50%, 0);
  pointer-events: none;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #ffa62b;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.45);
  animation: fx-rise 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.fx-pop.gold { color: #ffa62b; font-size: 26px; }
.fx-pop.up { color: #86d24a; }
.fx-pop.down { color: #e04b31; }
.fx-pop.xp { color: #c9995e; font-size: 17px; }
.fx-pop.friend { color: #8cc7ff; font-size: 18px; }

@keyframes fx-rise {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.12); }
  30% { transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.96); }
}

.fx-shake { animation: fx-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes fx-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.fx-pulse { animation: fx-pulse 0.36s ease-out; }
@keyframes fx-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.fx-flash {
  position: fixed; inset: 0; z-index: 85; pointer-events: none;
  animation: fx-flash 0.7s ease-out forwards;
}
.fx-flash.gold { box-shadow: inset 0 0 90px 20px rgba(255, 166, 43, 0.55); }
.fx-flash.rust { box-shadow: inset 0 0 90px 20px rgba(224, 75, 49, 0.55); }
@keyframes fx-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- night ---------- */

.fx-night {
  position: fixed; inset: 0; z-index: 80; overflow: hidden; cursor: pointer;
  opacity: 0; transition: opacity 0.38s ease;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  color: #f3e9da;
  -webkit-tap-highlight-color: transparent;
}
.fx-night.in { opacity: 1; }
.fx-night.out { opacity: 0; }

.fx-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 70% at 50% 110%, #2a2147 0%, rgba(42, 33, 71, 0) 60%),
    linear-gradient(180deg, #05060f 0%, #0c0f24 45%, #1b1836 80%, #2b2140 100%);
}

.fx-stars { position: absolute; inset: 0; }
.fx-stars i {
  position: absolute; border-radius: 50%; background: #fff6e0;
  box-shadow: 0 0 4px rgba(255, 246, 224, 0.8);
  animation: fx-twinkle 3s ease-in-out infinite;
}
@keyframes fx-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.4); opacity: 0.25; } }

.fx-moon {
  position: absolute; top: 9%; right: 14%; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffaf0 0%, #f2e6c9 55%, #d9c9a3 100%);
  box-shadow: 0 0 40px 10px rgba(255, 240, 200, 0.18), 0 0 120px 40px rgba(180, 170, 255, 0.08);
  transform: translateY(10px); opacity: 0;
  transition: transform 1.4s ease, opacity 0.9s ease;
}
.fx-moon::after {
  content: ''; position: absolute; top: 18px; left: 14px; width: 11px; height: 9px; border-radius: 50%;
  background: rgba(170, 150, 110, 0.25); box-shadow: 18px 14px 0 -2px rgba(170, 150, 110, 0.2), 8px 26px 0 -3px rgba(170, 150, 110, 0.18);
}
.fx-night.in .fx-moon { opacity: 1; transform: none; }

.fx-sunrise {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(90% 55% at 50% 102%, #ffd08a 0%, #ff9a52 22%, rgba(224, 75, 49, 0.55) 45%, rgba(224, 75, 49, 0) 70%),
    linear-gradient(180deg, #2b3a66 0%, #6a5a8c 40%, #d9826a 75%, #ffb36b 100%);
  transition: opacity 0.75s ease;
}
.fx-night.dawn .fx-sunrise { opacity: 1; }
.fx-night.dawn .fx-stars, .fx-night.dawn .fx-moon { opacity: 0; transition: opacity 0.6s ease; }

.fx-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background:
    linear-gradient(transparent 0 0),
    #07070d;
  clip-path: polygon(0 62%, 6% 62%, 6% 40%, 12% 40%, 12% 55%, 17% 55%, 17% 22%, 22% 22%, 22% 48%, 28% 48%, 28% 33%, 31% 33%, 31% 10%, 35% 10%, 35% 44%, 42% 44%, 42% 58%, 48% 58%, 48% 30%, 54% 30%, 54% 50%, 59% 50%, 59% 18%, 63% 18%, 63% 4%, 66% 4%, 66% 38%, 72% 38%, 72% 56%, 78% 56%, 78% 26%, 84% 26%, 84% 46%, 90% 46%, 90% 36%, 95% 36%, 95% 60%, 100% 60%, 100% 100%, 0 100%);
  transition: background-color 0.75s ease;
}
.fx-skyline::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(#ffcf6b 0.9px, transparent 1.2px);
  background-size: 17px 19px; background-position: 5px 40%;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(transparent 20%, #000 45%, #000 85%, transparent);
  mask-image: linear-gradient(transparent 20%, #000 45%, #000 85%, transparent);
  transition: opacity 0.75s ease;
}
.fx-night.dawn .fx-skyline { background-color: #1d1420; }
.fx-night.dawn .fx-skyline::before { opacity: 0.12; }

.fx-night-text {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(88vw, 400px); text-align: center;
}
.fx-night-text h2 {
  margin: 0; font-family: 'Permanent Marker', 'Bradley Hand', cursive; font-weight: 400;
  font-size: clamp(34px, 11vw, 52px); line-height: 1; transform: rotate(-2deg);
  color: #f3e9da; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 30px rgba(140, 140, 255, 0.25);
  opacity: 0; translate: 0 8px; transition: opacity 0.5s ease 0.15s, translate 0.6s ease 0.15s;
}
.fx-night.in .fx-night-text h2 { opacity: 1; translate: 0 0; }
.fx-sub {
  margin: 10px 0 0; font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #a9a3c9; opacity: 0; transition: opacity 0.5s ease 0.35s;
}
.fx-night.in .fx-sub { opacity: 1; }
.fx-lines { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.fx-lines li {
  font-family: 'Barlow', ui-sans-serif, sans-serif; font-size: 15px; color: #ddd2c2;
  opacity: 0; translate: 0 6px; transition: opacity 0.35s ease, translate 0.35s ease;
}
.fx-lines li.on { opacity: 1; translate: 0 0; }
.fx-morning {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0;
  font-size: 18px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2c1d0d;
  opacity: 0; transition: opacity 0.5s ease 0.15s;
}
.fx-night.dawn .fx-morning { opacity: 1; }
.fx-morning { text-shadow: 0 1px 0 rgba(255, 230, 190, 0.5); }
.fx-night.dawn .fx-night-text h2 { color: #fff4e0; text-shadow: 0 3px 0 rgba(90, 40, 20, 0.35); }
.fx-night.dawn .fx-sub { color: #fbe1c4; }
.fx-night.dawn .fx-lines li { color: #fff1dd; }

.fx-skip {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243, 233, 218, 0.4);
}

.fx-weather { position: absolute; inset: 0; pointer-events: none; }
.fx-weather b { position: absolute; top: -10px; display: block; }
.fx-weather.snow b {
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.85);
  animation: fx-snow linear infinite;
}
.fx-weather.rain b {
  width: 1px; height: 16px; background: linear-gradient(transparent, rgba(190, 210, 255, 0.6));
  animation: fx-rain linear infinite;
}
@keyframes fx-snow { to { transform: translate(24px, 105vh); } }
@keyframes fx-rain { to { transform: translate(-30px, 105vh); } }

.fx-night.reduced, .fx-night.reduced * { transition-duration: 0.01ms !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-pop { animation-duration: 0.9s; }
  .fx-shake, .fx-pulse { animation: none; }
}