:root {
  color-scheme: only light;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --stage-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #44314c;
}

body.is-hidden * {
  animation-play-state: paused !important;
}

html:has(body.capture-mode),
body.capture-mode,
body.capture-mode #playable-shell {
  width: 941px;
  min-width: 941px;
  height: 1672px;
  min-height: 1672px;
  overflow: visible;
}

body.capture-mode #stage {
  left: 0;
  top: 0;
  transform: none;
}

body.phone-capture,
body.phone-capture #playable-shell {
  width: 342px;
  height: 623px;
}

body.phone-capture #stage {
  left: 171px;
  top: 311.5px;
  --stage-scale: 0.3634431456;
}

body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}

#playable-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#loading {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  color: #fff3df;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px #2b1c30;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 941px;
  height: 1672px;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: 50% 50%;
  touch-action: none;
  background: #6f7751;
  isolation: isolate;
  transition: opacity 280ms ease-out;
}

#stage.ready {
  opacity: 1;
}

.garden {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 941px;
  height: 1672px;
  object-fit: contain;
  pointer-events: none;
}

#lane-guides {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

#stage:not([data-state="LOAD"]) #lane-guides {
  opacity: 0.52;
}

#lane-guides i {
  position: absolute;
  top: 330px;
  width: 2px;
  height: 980px;
  border-left: 2px solid rgba(255, 116, 205, 0.68);
  filter: drop-shadow(0 0 7px rgba(255, 105, 205, 0.78));
  transform-origin: 50% 0;
}

#lane-guides i:nth-child(1) {
  left: 27%;
  transform: rotate(6.5deg);
}

#lane-guides i:nth-child(2) {
  left: 50%;
}

#lane-guides i:nth-child(3) {
  left: 73%;
  transform: rotate(-6.5deg);
}

#falling-layer,
#effects-layer,
#edge-blooms {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#falling-layer {
  z-index: 3;
}

#player {
  position: absolute;
  left: 0;
  top: 960px;
  z-index: 4;
  width: 620px;
  height: auto;
  will-change: transform;
  pointer-events: none;
}

#player img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 18px rgba(66, 34, 42, 0.22));
  transform-origin: 74% 56%;
}

#player.caught img {
  animation: basket-catch 240ms ease-out;
}

#player.hit img {
  animation: character-hit 320ms ease-out;
}

#effects-layer {
  z-index: 5;
}

.petal-sprite {
  position: absolute;
  width: 170px;
  height: 170px;
  background-image: url("assets/petal-sprites.png");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 12px rgba(255, 135, 213, 0.55));
}

.petal-front {
  background-position: 0% 0%;
}

.petal-left {
  background-position: 33.333% 0%;
}

.petal-right {
  background-position: 66.667% 0%;
}

.thorn {
  background-position: 100% 0%;
  filter: drop-shadow(0 9px 11px rgba(40, 15, 37, 0.42));
}

.catch-ring {
  width: 280px;
  height: 280px;
  background-position: 0% 100%;
  animation: ring-pop 430ms ease-out forwards;
}

.success-cluster {
  width: 420px;
  height: 420px;
  background-position: 33.333% 100%;
  animation: cluster-pop 880ms ease-out forwards;
}

.gold-petal {
  background-position: 66.667% 100%;
  filter: drop-shadow(0 0 18px rgba(255, 216, 64, 0.7));
}

.cracked-petal {
  width: 190px;
  height: 190px;
  background-position: 100% 100%;
  animation: crack-pop 620ms ease-out forwards;
}

.score-pop {
  position: absolute;
  z-index: 2;
  min-width: 120px;
  color: #fff7ff;
  font-size: 70px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: 6px #f04caa;
  paint-order: stroke fill;
  text-shadow: 0 7px 16px rgba(101, 29, 87, 0.35);
  animation: score-rise 500ms ease-out forwards;
}

.score-pop.negative {
  color: #fff2d9;
  -webkit-text-stroke-color: #5b244c;
}

.static-effect {
  opacity: 1 !important;
  animation: none !important;
}

#tutorial {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  pointer-events: none;
}

#stage[data-state="TUTORIAL"] #tutorial {
  display: block;
}

.tutorial-copy {
  position: absolute;
  left: 190px;
  top: 1065px;
  width: 560px;
  color: #fff6df;
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 5px 11px rgba(64, 36, 50, 0.72);
}

.ui-window {
  position: absolute;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.ui-sheet {
  position: absolute;
  display: block;
  background-image: url("assets/ui-kit.png");
  background-repeat: no-repeat;
  background-size: 200% 200%;
}

.ui-cutout {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.hand-window {
  left: 60px;
  top: 1170px;
  width: 820px;
  height: 205px;
  animation: hand-swipe 1.55s ease-in-out infinite;
}

.ui-hand {
  left: -45px;
  top: -230px;
  width: 900px;
  height: 900px;
  background-position: 100% 0%;
}

.hand-finger-window {
  left: 440px;
  top: 1340px;
  width: 480px;
  height: 310px;
  animation: hand-swipe-small 1.55s ease-in-out infinite;
}

.ui-hand-finger {
  left: -40px;
  top: -310px;
  width: 520px;
  height: 520px;
  background-position: 100% 0%;
}

#hud {
  position: absolute;
  left: 204px;
  top: calc(30px + env(safe-area-inset-top));
  z-index: 7;
  width: 720px;
  height: 230px;
  opacity: 0;
  transform: translateY(-20px) scale(0.74);
  transform-origin: 0 0;
  transition: opacity 330ms ease, transform 330ms ease;
  pointer-events: none;
}

#stage:not([data-state="LOAD"]) #hud {
  opacity: 1;
  transform: translateY(0) scale(0.74);
}

.hud-window {
  inset: 0;
  width: 720px;
  height: 235px;
}

.ui-hud {
  left: 0;
  top: 0;
  width: 720px;
  height: auto;
}

.hud-title {
  position: absolute;
  left: 176px;
  top: 24px;
  width: 500px;
  color: #4b260e;
  font-size: 35px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
}

.hud-track {
  position: absolute;
  left: 171px;
  top: 103px;
  width: 505px;
  height: 77px;
  overflow: hidden;
  border-radius: 38px;
}

#progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #f64f98;
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, 0.22), 0 0 16px rgba(255, 88, 170, 0.42);
  transition: width 260ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

#progress-text {
  position: absolute;
  left: 171px;
  top: 103px;
  width: 505px;
  color: #fff7ff;
  font-size: 62px;
  font-weight: 1000;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 4px 7px rgba(92, 30, 64, 0.56);
}

#garden-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 198, 118, 0.24);
  mix-blend-mode: screen;
  transition: opacity 500ms ease;
}

#stage[data-state="SUCCESS"] #garden-glow,
#stage[data-state="PAYOFF"] #garden-glow,
#stage[data-state="END_CARD"] #garden-glow {
  opacity: 1;
}

#stage[data-state="SUCCESS"] .garden,
#stage[data-state="PAYOFF"] .garden,
#stage[data-state="END_CARD"] .garden {
  transform: scale(1.03);
  transform-origin: 50% 56%;
  transition: transform 650ms ease-out;
}

#edge-blooms {
  z-index: 5;
}

.edge-bloom {
  opacity: 0;
  animation: edge-bloom 850ms ease-out forwards;
}

.result-panel,
#end-card,
#try-again {
  display: none;
}

.result-panel {
  position: absolute;
  left: 181px;
  top: 515px;
  z-index: 8;
  width: 580px;
  height: 560px;
}

#payoff.show,
.end-badge {
  display: block;
}

.badge-window {
  left: 30px;
  top: 0;
  width: 520px;
  height: 527px;
}

.ui-badge {
  inset: 0;
  width: 520px;
  height: 527px;
}

.badge-copy {
  position: absolute;
  left: 110px;
  top: 205px;
  width: 360px;
  color: #5a2d14;
  font-size: 52px;
  font-weight: 1000;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.4);
}

#payoff.show {
  animation: badge-arrive 520ms cubic-bezier(0.15, 0.95, 0.25, 1.18);
}

#end-card {
  position: absolute;
  inset: 0;
  z-index: 8;
}

#stage[data-state="END_CARD"] #end-card {
  display: block;
}

.end-badge {
  top: 250px;
}

#stage[data-state="END_CARD"] #player {
  top: 670px;
  z-index: 7;
  width: 520px;
}

#cta {
  position: absolute;
  left: 130px;
  top: 1270px;
  width: 680px;
  height: 250px;
  overflow: visible;
  cursor: pointer;
  background: transparent;
  color: #fffbe8;
  filter: drop-shadow(0 12px 18px rgba(68, 47, 19, 0.28));
  animation: cta-arrive 440ms ease-out both, cta-pulse 1.7s ease-in-out 700ms infinite;
}

.cta-window {
  inset: 0;
  width: 680px;
  height: 250px;
}

.ui-cta {
  left: 13px;
  top: 0;
  width: 654px;
  height: 242px;
}

.cta-copy {
  position: absolute;
  left: 85px;
  top: 82px;
  width: 510px;
  font-size: 64px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 5px 5px rgba(31, 92, 15, 0.52);
}

#cta:focus-visible,
#replay:focus-visible,
#try-again:focus-visible,
#compare-controls button:focus-visible {
  outline: 6px solid #fff7df;
  outline-offset: -8px;
}

#replay {
  position: absolute;
  left: 330px;
  top: calc(1540px - env(safe-area-inset-bottom));
  width: 280px;
  min-height: 82px;
  cursor: pointer;
  background: rgba(76, 45, 55, 0.92);
  border: 4px solid #fff0d5;
  border-radius: 41px;
  color: #fff4df;
  font-size: 32px;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-shadow: 0 3px 6px #342330;
}

#try-again {
  position: absolute;
  left: 181px;
  top: 485px;
  z-index: 9;
  width: 580px;
  height: 560px;
  cursor: pointer;
  background: transparent;
}

#try-again.show {
  display: block;
  animation: badge-arrive 520ms cubic-bezier(0.15, 0.95, 0.25, 1.18);
}

#try-again .badge-copy {
  top: 218px;
  font-size: 58px;
}

#reference-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  width: 941px;
  height: 1672px;
  object-fit: contain;
  pointer-events: none;
}

#compare-controls {
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  z-index: 200;
  display: none;
  gap: 8px;
  transform: translateX(-50%);
  padding: 8px;
  border-radius: 18px;
  background: rgba(42, 31, 45, 0.88);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24);
}

body.compare-mode #compare-controls {
  display: flex;
}

#compare-controls button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  cursor: pointer;
  background: #fff3dc;
  color: #44243b;
  font-size: 14px;
  font-weight: 900;
}

body.compare-mode[data-compare-view="reference"] #reference-overlay {
  display: block;
  opacity: 1;
}

body.compare-mode[data-compare-view="reference"] #stage > :not(#reference-overlay) {
  visibility: hidden;
}

body.compare-mode[data-compare-view="overlay"] #reference-overlay {
  display: block;
  opacity: 0.5;
}

.visually-hidden {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes basket-catch {
  0%, 100% { transform: scale(1); }
  45% { transform: scaleX(1.045) scaleY(0.955); }
}

@keyframes character-hit {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-16px) rotate(-1deg); }
  48% { transform: translateX(15px) rotate(1deg); }
  72% { transform: translateX(-8px); }
}

@keyframes hand-swipe {
  0%, 100% { transform: translateX(-46px); }
  50% { transform: translateX(46px); }
}

@keyframes hand-swipe-small {
  0%, 100% { transform: translateX(-26px); }
  50% { transform: translateX(26px); }
}

@keyframes ring-pop {
  0% { opacity: 0; transform: scale(0.42); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15); }
}

@keyframes cluster-pop {
  0% { opacity: 0; transform: scale(0.45) rotate(-7deg); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12) rotate(4deg); }
}

@keyframes crack-pop {
  0% { opacity: 0; transform: scale(0.5); }
  28% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: translateY(42px) scale(0.88); }
}

@keyframes score-rise {
  0% { opacity: 0; transform: translateY(20px) scale(0.72); }
  26% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-78px) scale(0.94); }
}

@keyframes badge-arrive {
  0% { opacity: 0; transform: scale(0.52) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes cta-arrive {
  0% { opacity: 0; transform: translateY(45px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes edge-bloom {
  0% { opacity: 0; transform: scale(0.35); }
  58% { opacity: 0.9; }
  100% { opacity: 0.52; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  #garden-glow {
    opacity: 0.14 !important;
  }
}