:root {
  --speed: 1;
  --ground-h: 16vh;
  --sky-1: #ffd6e0;
  --sky-2: #ffe8c2;
  --sky-3: #c7e8ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
  font-family: "Georgia", "Iowan Old Style", serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  touch-action: none;
}

/* ---------- Sky ---------- */
.sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255,255,200,0.6), transparent 55%),
    linear-gradient(to bottom, var(--sky-3) 0%, var(--sky-1) 55%, var(--sky-2) 100%);
}

/* ---------- Parallax layers ---------- */
.parallax {
  position: absolute;
  left: 0;
  width: 200vw;
  height: 100vh;
  background-image: url("assets/meadow-background.png");
  background-repeat: repeat-x;
  background-size: auto 100vh;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.parallax.far {
  top: 0;
  opacity: 0.55;
  filter: blur(2px) saturate(0.8) brightness(1.05);
  animation-name: scroll-left;
  animation-duration: calc(80s / var(--speed));
  mix-blend-mode: multiply;
}

.parallax.mid {
  top: 0;
  opacity: 0.85;
  filter: saturate(0.95);
  animation-name: scroll-left;
  animation-duration: calc(45s / var(--speed));
}

.parallax.near {
  top: 6vh;
  opacity: 1;
  animation-name: scroll-left;
  animation-duration: calc(22s / var(--speed));
  transform-origin: bottom center;
}

@keyframes scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100vw, 0, 0); }
}

/* ---------- Foreground grass strip ---------- */
.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--ground-h);
  background:
    linear-gradient(to bottom,
      rgba(90,160,90,0) 0%,
      rgba(60,120,60,0.45) 25%,
      rgba(30,80,50,0.9) 100%);
  pointer-events: none;
  z-index: 3;
}

.ground::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 80%, #ffcce2 0 4px, transparent 5px),
    radial-gradient(circle at 30% 60%, #fff7a8 0 3px, transparent 4px),
    radial-gradient(circle at 55% 85%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 80% 65%, #b4d9ff 0 3px, transparent 4px),
    radial-gradient(circle at 92% 88%, #ffb4b4 0 3px, transparent 4px);
  background-size: 200px 100px;
  animation: scroll-left 6s linear infinite;
  animation-duration: calc(6s / var(--speed));
  opacity: 0.9;
}

/* ---------- Alicorns ---------- */
.runner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: clamp(220px, 32vw, 460px);
  transform-origin: center center;
  pointer-events: none;
  filter: drop-shadow(0 22px 16px rgba(0,0,0,0.28));
  will-change: transform;
}

.runner .body {
  position: relative;
  width: 100%;
  animation: float-bob 1.3s ease-in-out infinite;
  transform-origin: 60% 60%;
}

/* Gentle bob while flying */
@keyframes float-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(6px); }
}

.runner img.wing-frame {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* Make the first frame (wings-down) establish container height */
.runner img.wing-frame.wing-down {
  position: relative;
}

/* Wing flap: alternate which frame is visible ~5 Hz */
.runner img.wing-up {
  animation: wing-flap 0.22s steps(1) infinite;
}

.runner-isla  img.wing-up { animation-delay: -0.03s; }
.runner-wynne img.wing-up { animation-delay: -0.11s; }

@keyframes wing-flap {
  0%, 49.99%   { opacity: 1; }
  50%, 100%    { opacity: 0; }
}

/* Tiny flash when moving fast */
.runner.thrusting .body {
  animation-duration: 0.9s;
}

/* Stronger/faster visual flaps while actively lifting */
.runner.flapping img.wing-up {
  animation-duration: 0.11s;
}

.runner.flapping .body {
  animation-duration: 0.6s;
}

/* Flip the sprite horizontally when moving leftward so they face the right way */
.runner.facing-left {
  transform: var(--base-transform, translate3d(0,0,0)) scaleX(-1);
}

/* Subtle wind swoosh emitted when thrusting */
.runner .swoosh {
  position: absolute;
  right: -4%;
  top: 35%;
  width: 38%;
  height: 30%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(255,255,255,0.7), transparent 70%);
  filter: blur(6px);
}

.runner.thrusting .swoosh { animation: swoosh 0.5s ease-out infinite; }

@keyframes swoosh {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  40%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-36px, 10px) scale(1.2); }
}

.nameplate {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: rgba(255,255,255,0.9);
  color: #7a3f6e;
  border-radius: 999px;
  font-family: "Georgia", serif;
  font-weight: bold;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  white-space: nowrap;
}

.isla-plate  { color: #9c3d76; }
.wynne-plate { color: #0f6b6b; }

/* ---------- Particles ---------- */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.petal {
  position: absolute;
  top: -40px;
  width: 14px;
  height: 14px;
  border-radius: 60% 0 60% 0;
  opacity: 0.9;
  will-change: transform, opacity;
  animation: petal-fall linear forwards;
}

@keyframes petal-fall {
  0%   { transform: translate(0, -10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(calc(-30vw * var(--drift, 1)), 110vh) rotate(720deg); opacity: 0; }
}

/* ---------- Lightning & blooms ---------- */
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.lightning {
  position: absolute;
  pointer-events: none;
  transform-origin: top center;
  animation: lightning-flash 0.45s ease-out forwards;
  filter: drop-shadow(0 0 8px currentColor);
}

.lightning polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes lightning-flash {
  0%   { opacity: 0; transform: translate(-50%, 0) scaleY(0.3); }
  15%  { opacity: 1; transform: translate(-50%, 0) scaleY(1); }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, 0) scaleY(1); }
}

.bloom-item {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  font-size: 44px;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
  animation: bloom-grow 5s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes bloom-grow {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; }
  18%  { transform: translate(-50%, -60%) scale(1.3) rotate(10deg); opacity: 1; }
  28%  { transform: translate(-50%, -50%) scale(1) rotate(0deg);   opacity: 1; }
  75%  { transform: translate(-50%, -55%) scale(1) rotate(-4deg);  opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(0.8) rotate(12deg); opacity: 0; }
}

/* ---------- Collectibles ---------- */
.collectibles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.sparkle-item {
  position: absolute;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 230, 120, 0.7));
  animation: sparkle-spin 1.6s linear infinite;
  will-change: transform, left;
}

.sparkle-item .glyph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  text-shadow: 0 0 8px rgba(255,255,180,0.9);
}

@keyframes sparkle-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.pickup-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pickup-pop 0.7s ease-out forwards;
  font-weight: bold;
  font-size: 1.6rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  z-index: 9;
}

@keyframes pickup-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30%  { opacity: 1; transform: translate(-50%, -80%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  top: 2vh;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  z-index: 10;
  pointer-events: none;
}

.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  font-family: "Georgia", serif;
}

.score .label {
  font-family: "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 1.3rem;
  letter-spacing: 1px;
}
.score .value {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
}

.score-isla  { color: #9c3d76; border: 2px solid #f3b3d4; }
.score-wynne { color: #0f6b6b; border: 2px solid #b3eae6; }

.score .value.bump { animation: bump 0.35s ease-out; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); color: #ffb400; }
  100% { transform: scale(1); }
}

.title {
  text-align: center;
  text-shadow: 0 2px 8px rgba(80,40,90,0.45);
  animation: fadeInDown 1.4s ease-out both;
}

.title h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  letter-spacing: 3px;
  background: linear-gradient(90deg, #fff, #ffd1e8, #fff7a8, #c8fff0, #fff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.title .tagline {
  margin-top: 0.1rem;
  font-style: italic;
  color: #fff;
  opacity: 0.95;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Touch / keyboard hint ---------- */
.touch-hint {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  animation: touchFade 8s ease-out forwards;
}

.touch-half {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(var(--ground-h) + 40px);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  font-style: italic;
}

.touch-half b {
  font-family: "Menlo", monospace;
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 6px;
  font-style: normal;
  margin-left: 6px;
  letter-spacing: 2px;
}

.touch-half.left  { border-right: 1px dashed rgba(255,255,255,0.35); }

@keyframes touchFade {
  0%, 70% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .runner { width: clamp(180px, 48vw, 320px); }
  .score  { min-width: 80px; padding: 8px 12px; }
  .score .value { font-size: 1.6rem; }
}