:root {
  --ink: #5d514d;
  --ink-soft: #81736d;
  --orange: #ff8b3d;
  --orange-dark: #ed672c;
  --green: #69bd67;
  --pink: #f58eae;
  --white: #fffdfb;
  --shadow: 0 14px 34px rgba(83, 91, 73, 0.2);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
html { touch-action: manipulation; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Jua", sans-serif;
  overscroll-behavior: none;
  overflow-x: hidden;
  touch-action: manipulation;
  background: linear-gradient(#ffd6b2 0 65%, #c5e992 65% 100%) fixed;
  transition: background 3s ease;
  -webkit-tap-highlight-color: transparent;
}
body.time-day { background: linear-gradient(#aee5fa 0 65%, #c5ea91 65% 100%) fixed; }
body.time-sunset { background: linear-gradient(#f49a91 0 35%, #ffc58d 65%, #b6d77f 65% 100%) fixed; }
body.time-night { background: linear-gradient(#172958 0 65%, #416c5e 65% 100%) fixed; }
body.is-instant-time-change,
.world.is-instant-time-change,
.world.is-instant-time-change .sun,
.world.is-instant-time-change .moon,
.world.is-instant-time-change .stars,
.world.is-instant-time-change .fireflies { transition: none !important; }
button, a { font: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  overflow: auto;
  background: linear-gradient(#bfeafa 0 62%, #bde68b 62% 100%);
}
.intro::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  opacity: .5;
  background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(80,154,76,.2) 23px 25px);
}
.intro__cloud, .cloud {
  position: absolute;
  width: 110px;
  height: 34px;
  border-radius: 99px;
  background: rgba(255,255,255,.72);
  box-shadow: 30px -18px 0 -2px rgba(255,255,255,.72), 60px 0 0 -6px rgba(255,255,255,.72);
}
.intro__cloud--one { top: 12%; left: 4%; animation: cloudFloat 6s ease-in-out infinite; }
.intro__cloud--two { top: 21%; right: 12%; transform: scale(.7); animation: cloudFloat 7s 1s ease-in-out infinite reverse; }
.intro-card {
  position: relative;
  z-index: 2;
  width: min(100%, 420px);
  padding: 22px 22px 20px;
  text-align: center;
  border: 3px solid rgba(255,255,255,.88);
  border-radius: 34px;
  background: rgba(255,253,251,.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.intro-card__eyebrow { margin: 0 0 2px; color: var(--ink-soft); font: 700 20px "Gaegu", cursive; }
.intro-card h1 { margin: 0; font: 700 clamp(42px, 13vw, 62px)/1 "Gaegu", cursive; }
.intro-card > p:not(.intro-card__eyebrow, .audio-status) { margin: 9px 0 14px; color: var(--ink-soft); }
.bunny--intro { margin: 13px auto 4px; transform: scale(.72); transform-origin: center; }
.start-button {
  min-height: 56px;
  padding: 13px 24px;
  color: #fff;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff9d4d, #f57935);
  box-shadow: 0 8px 0 #d95b27, 0 15px 24px rgba(225,99,40,.26);
  font-size: 20px;
  cursor: pointer;
}
.start-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #d95b27; }
.intro-card .intro-card__volume { margin: 15px 0 0; color: var(--ink-soft); font-size: 13px; }
.audio-status { min-height: 20px; margin: 12px 0 4px; color: #cb6842; font-size: 13px; }
.main-link { display: inline-block; min-height: 48px; padding: 14px; color: var(--ink-soft); text-decoration: none; }

.game { min-height: 100svh; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.audio-progress {
  position: fixed;
  top: max(7px, env(safe-area-inset-top));
  left: 50%;
  z-index: 46;
  display: flex;
  width: min(calc(100% - 24px), 460px);
  height: 28px;
  padding: 5px 10px;
  align-items: center;
  gap: 9px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 99px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 5px 14px rgba(67,101,76,.12);
  transform: translateX(-50%);
  backdrop-filter: blur(7px);
}
.audio-progress__track { flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: #f0e7df; box-shadow: inset 0 1px 3px rgba(0,0,0,.08); }
.audio-progress__fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffc25e,#f47a36); transition: width .2s linear; }
.audio-progress span { min-width: 92px; color: var(--ink-soft); font-size: 11px; text-align: right; }
.hud {
  position: fixed;
  top: max(41px, calc(env(safe-area-inset-top) + 34px));
  left: 50%;
  z-index: 40;
  display: grid;
  width: min(calc(100% - 24px), 620px);
  grid-template-columns: .75fr .75fr 1.4fr;
  gap: 7px;
  transform: translateX(-50%);
}
.hud-item {
  min-width: 0;
  padding: 7px 8px;
  text-align: center;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 17px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 6px 16px rgba(67,101,76,.13);
  backdrop-filter: blur(7px);
}
.hud-item span { display: block; color: var(--ink-soft); font-size: 10px; }
.hud-item strong { display: block; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.hud-item--stage strong { color: #df7438; font-size: 14px; }

.world {
  position: relative;
  height: calc(100svh - 76px - env(safe-area-inset-bottom));
  min-height: 530px;
  overflow: hidden;
  touch-action: none;
  background: linear-gradient(#ffd6b2 0 65%, #c5e992 65% 100%);
  transition: background 3s ease, filter 3s ease;
}
.world.time-day { background: linear-gradient(#aee5fa 0 65%, #c5ea91 65% 100%); }
.world.time-sunset { background: linear-gradient(#f49a91 0 35%, #ffc58d 65%, #b6d77f 65% 100%); }
.world.time-night { background: linear-gradient(#172958 0 65%, #416c5e 65% 100%); }
.world::before {
  content: "";
  position: absolute;
  left: -5%; right: -5%; bottom: 19%;
  height: 22%;
  border-radius: 50% 50% 0 0;
  background: #a8db78;
}
.sun { position: absolute; top: 86px; right: 7%; width: 68px; height: 68px; border-radius: 50%; background: #ffe87c; box-shadow: 0 0 0 13px rgba(255,232,124,.25); transition: opacity 2s ease, transform 3s ease, background 2s ease; }
.time-sunset .sun { background: #ff9d65; transform: translate(-25vw,120px) scale(1.15); }
.time-night .sun { opacity: 0; transform: translate(-45vw,180px) scale(.7); }
.time-sunset .cloud { filter: sepia(.25) saturate(1.3); opacity: .75; }
.time-night .cloud { opacity: .28; }
.moon { position: absolute; z-index: 2; top: 105px; right: 10%; width: 61px; height: 61px; border-radius: 50%; background: #fff4c7; box-shadow: 0 0 24px rgba(255,244,199,.7); opacity: 0; transform: translateY(90px); transition: opacity 2.5s ease, transform 3s ease; }
.moon::after { content: ""; position: absolute; top: -8px; left: -10px; width: 58px; height: 58px; border-radius: 50%; background: #172958; }
.time-night .moon { opacity: 1; transform: translateY(0); }
.stars { position: absolute; z-index: 1; inset: 70px 0 35%; opacity: 0; transition: opacity 2.5s ease; background-image: radial-gradient(circle at 12% 22%,#fff 0 2px,transparent 3px),radial-gradient(circle at 31% 9%,#ffe99a 0 1.5px,transparent 2.5px),radial-gradient(circle at 48% 28%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 69% 13%,#fff 0 2px,transparent 3px),radial-gradient(circle at 85% 34%,#ffe99a 0 1.5px,transparent 2.5px),radial-gradient(circle at 22% 55%,#fff 0 1px,transparent 2px),radial-gradient(circle at 76% 62%,#fff 0 1.5px,transparent 2.5px); }
.time-night .stars { opacity: .9; }
.fireflies { position: absolute; z-index: 12; inset: 45% 0 8%; opacity: 0; pointer-events: none; transition: opacity 2s ease; }
.time-night .fireflies { opacity: 1; }
.firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff88c; box-shadow: 0 0 9px 3px rgba(255,244,116,.7); animation: fireflyFloat var(--fly-time) ease-in-out infinite alternate; }
@keyframes fireflyFloat { to { transform: translate(var(--fly-x),var(--fly-y)); opacity: .35; } }
.cloud--one { top: 130px; left: -8px; transform: scale(.65); animation: cloudDrift 14s linear infinite; }
.cloud--two { top: 205px; right: 5%; transform: scale(.45); animation: cloudFloat 7s ease-in-out infinite; }
@keyframes cloudFloat { 50% { translate: 0 9px; } }
@keyframes cloudDrift { from { translate: -80px 0; } to { translate: calc(100vw + 160px) 0; } }

.game-message {
  position: absolute;
  top: 105px;
  left: 50%;
  z-index: 12;
  width: min(88%, 440px);
  margin: 0;
  padding: 8px 14px;
  text-align: center;
  color: #6e665f;
  border-radius: 99px;
  background: rgba(255,255,255,.7);
  transform: translateX(-50%);
}
.carrot-layer { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.falling-carrot {
  position: absolute;
  top: 0; left: 0;
  width: 46px;
  height: 78px;
  pointer-events: auto;
  cursor: pointer;
  contain: layout style;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 5px rgba(74,83,50,.2));
  touch-action: none;
}
.falling-carrot::before {
  content: "";
  position: absolute;
  left: 9px; top: 19px;
  width: 29px; height: 48px;
  border-radius: 55% 55% 70% 70% / 32% 32% 86% 86%;
  background: linear-gradient(100deg, #ffae55, var(--orange) 54%, #ef6d2e);
  box-shadow: inset -5px 0 0 rgba(205,79,28,.13);
}
.falling-carrot::after {
  content: "";
  position: absolute;
  top: 4px; left: 5px;
  width: 38px; height: 26px;
  background: conic-gradient(from 35deg at 50% 100%, transparent 0 8%, #5db961 9% 23%, transparent 24% 38%, #73c971 39% 56%, transparent 57% 72%, #4fae59 73% 89%, transparent 90%);
  border-radius: 50%;
}
.falling-carrot.is-golden::before { background: linear-gradient(100deg,#fff2a1,#ffc83f 50%,#e99916); box-shadow: 0 0 18px #ffd75e; }
.falling-carrot.is-rainbow::before { background: linear-gradient(#ff7f8e,#ffbc63,#ffef7e,#72d58d,#78bcec,#b98ce9); }
.falling-carrot.is-heart::before { background: #f58cae; clip-path: polygon(50% 100%,4% 43%,7% 21%,24% 8%,42% 13%,50% 27%,58% 13%,76% 8%,93% 21%,96% 43%); border-radius: 0; }
.falling-carrot.is-worm { animation: wormCarrotWiggle .45s ease-in-out infinite alternate; }
.falling-carrot.is-worm::before { background: radial-gradient(circle at 35% 42%,#6a4634 0 3px,transparent 4px),radial-gradient(circle at 67% 68%,#563b2e 0 4px,transparent 5px),linear-gradient(100deg,#bd8d55,#9f6d43 56%,#79513a); box-shadow: inset -5px 0 rgba(70,43,30,.13); }
.falling-carrot.is-worm::after { filter: sepia(1) saturate(.5); opacity: .72; transform: rotate(12deg); }
.falling-carrot.is-worm .carrot-worm { position: absolute; z-index: 3; left: 2px; top: 38px; font-size: 17px; transform: rotate(-20deg); }
@keyframes wormCarrotWiggle { to { rotate: 5deg; } }
.falling-carrot.is-piled { pointer-events: none; opacity: .92; filter: drop-shadow(0 3px 3px rgba(74,83,50,.18)); will-change: opacity; transition: opacity .8s ease, scale .8s ease; }
.falling-carrot.is-worm.is-piled { animation: none; }
.falling-carrot.is-piled.is-pile-fading { opacity: 0; scale: .82; }
.falling-carrot.is-fed { pointer-events: none; animation: carrotEat .32s ease forwards; }
@keyframes carrotEat { to { opacity: 0; transform: var(--last-transform) scale(.15) rotate(35deg); } }
.world.is-carrot-raining .falling-carrot { filter: none; }
.world.is-carrot-raining .falling-carrot.is-golden::before { box-shadow: none; }
.world.is-carrot-raining .falling-carrot.is-worm { animation: none; }
.world.is-carrot-raining .cloud,
.world.is-carrot-raining .firefly { animation-play-state: paused; }

.bunny-wrap { position: absolute; left: 50%; bottom: 7%; z-index: 20; width: 180px; height: 230px; transform: translateX(-50%); }
.bunny-wrap.stage-baby .bunny { scale: .94; transform-origin: bottom center; }
.bunny-wrap.is-petted-glow::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 47%; width: 290px; height: 290px; border-radius: 50%; background: radial-gradient(circle,rgba(255,247,132,.92) 0,rgba(255,225,86,.62) 28%,rgba(255,211,74,.25) 53%,transparent 72%); filter: blur(2px); pointer-events: none; animation: petGlow .82s ease-out; }
@keyframes petGlow { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35); } 32% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 72% { opacity: .82; transform: translate(-50%,-50%) scale(.95); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }
.bunny { position: relative; width: 180px; height: 222px; filter: drop-shadow(0 14px 9px rgba(69,92,57,.22)); }
.bunny__ear { position: absolute; z-index: 1; top: 2px; width: 50px; height: 108px; border: 4px solid #e8dedc; border-radius: 65% 65% 45% 45%; background: var(--white); transform-origin: bottom center; animation: earWiggle 3.4s ease-in-out infinite; }
.bunny__ear i { position: absolute; inset: 13px 12px 10px; border-radius: inherit; background: #ffc5d2; }
.bunny__ear--left { left: 31px; transform: rotate(-9deg); }
.bunny__ear--right { right: 31px; transform: rotate(9deg); animation-delay: .2s; }
.bunny__head { position: absolute; z-index: 3; top: 67px; left: 16px; width: 148px; height: 120px; border: 4px solid #e8dedc; border-radius: 49% 49% 45% 45%; background: var(--white); box-shadow: inset 0 -8px 0 #faf2ef; }
.bunny__body { position: absolute; z-index: 2; left: 35px; bottom: 0; width: 110px; height: 95px; border: 4px solid #e8dedc; border-radius: 55% 55% 44% 44%; background: var(--white); }
.bunny__tail { position: absolute; z-index: -1; right: -29px; top: 35px; width: 42px; height: 42px; border: 3px solid #e8dedc; border-radius: 50%; background: #fffdfb; transform-origin: left center; }
.bunny__eye { position: absolute; top: 40px; width: 15px; height: 20px; border-radius: 50%; background: #50474a; box-shadow: inset 4px 3px 0 rgba(255,255,255,.85); animation: blink 4.2s infinite; }
.bunny__eye--left { left: 38px; } .bunny__eye--right { right: 38px; }
.bunny__cheek { position: absolute; top: 68px; width: 28px; height: 15px; border-radius: 50%; background: rgba(255,158,181,.43); }
.bunny__cheek--left { left: 14px; } .bunny__cheek--right { right: 14px; }
.bunny__nose { position: absolute; top: 60px; left: 66px; width: 14px; height: 10px; border-radius: 50% 50% 55% 55%; background: #f399aa; }
.bunny__mouth { position: absolute; top: 72px; left: 68px; width: 12px; height: 8px; border-bottom: 3px solid #8d666d; border-radius: 50%; }
.bunny__paw { position: absolute; z-index: 4; top: 27px; width: 31px; height: 55px; border: 3px solid #e8dedc; border-radius: 60%; background: var(--white); }
.bunny__paw--left { left: -8px; transform: rotate(17deg); } .bunny__paw--right { right: -8px; transform: rotate(-17deg); }
.bunny__foot { position: absolute; z-index: 4; bottom: -5px; width: 55px; height: 29px; border: 3px solid #e8dedc; border-radius: 55%; background: var(--white); }
.bunny__foot--left { left: -13px; transform: rotate(-8deg); } .bunny__foot--right { right: -13px; transform: rotate(8deg); }
@keyframes blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.08); } }
@keyframes earWiggle { 0%,100% { rotate: 0; } 50% { rotate: 5deg; } }
.bunny.is-happy { animation: happyJump .55s cubic-bezier(.2,.8,.35,1); }
.bunny.is-happy .bunny__eye { height: 11px; border-radius: 0 0 50% 50%; background: transparent; border-bottom: 4px solid #50474a; box-shadow: none; }
.bunny.is-happy .bunny__cheek { transform: scale(1.3); }
.bunny.is-happy .bunny__mouth { animation: chew .18s 3 alternate; }
.bunny.is-happy .bunny__ear { animation: happyEar .18s 3 alternate; }
@keyframes happyJump { 45% { transform: translateY(-25px) scale(1.05,.96); } }
@keyframes chew { to { transform: scale(1.4,.55); } }
@keyframes happyEar { to { transform: rotate(16deg); } }
.bunny.is-petted { filter: drop-shadow(0 14px 9px rgba(69,92,57,.22)) drop-shadow(0 0 18px rgba(255,111,163,.8)); animation: petJump .8s cubic-bezier(.18,.82,.3,1); }
.bunny.is-petted::before { content: "🫳"; position: absolute; z-index: 15; left: 50%; top: -42px; font-size: 52px; transform: translateX(-50%); animation: petHand .8s ease; }
.bunny.is-petted::after { content: "💗"; position: absolute; z-index: 14; left: 50%; top: 55px; font-size: 76px; opacity: 0; pointer-events: none; animation: petHeart .8s ease; }
.bunny.is-petted .bunny__eye { height: 10px; border-radius: 0 0 50% 50%; border-bottom: 4px solid #50474a; background: transparent; box-shadow: none; }
.bunny.is-petted .bunny__cheek { background: rgba(255,116,151,.7); transform: scale(1.35); }
.bunny.is-petted .bunny__ear { animation: petEar .45s ease forwards; }
.bunny.is-petted .bunny__ear--left { --pet-rotate: -34deg; }
.bunny.is-petted .bunny__ear--right { --pet-rotate: 34deg; }
.bunny.is-petted .bunny__tail { animation: tailWag .16s 4 alternate; }
@keyframes petEar { to { transform: rotate(var(--pet-rotate,25deg)) translateY(18px); } }
@keyframes tailWag { to { transform: rotate(24deg) scale(1.12); } }
@keyframes petJump { 0% { transform: translateY(0) scale(1) rotate(0); } 22% { transform: translateY(-35px) scale(.92,1.12) rotate(-10deg); } 48% { transform: translateY(-76px) scale(1.18,.9) rotate(9deg); } 72% { transform: translateY(-20px) scale(.94,1.08) rotate(-5deg); } 100% { transform: translateY(0) scale(1) rotate(0); } }
@keyframes petHand { 0% { opacity: 0; transform: translate(-50%,-30px) rotate(-18deg); } 30%,65% { opacity: 1; transform: translate(-35%,12px) rotate(13deg); } 100% { opacity: 0; transform: translate(-65%,0) rotate(-12deg); } }
@keyframes petHeart { 0% { opacity: 0; transform: translate(-50%,20px) scale(.2); } 45% { opacity: .9; transform: translate(-50%,-25px) scale(1); } 100% { opacity: 0; transform: translate(-50%,-85px) scale(1.5); } }
.bunny.is-bored .bunny__ear { animation: boredEar .6s ease forwards; }
.bunny.is-bored .bunny__eye { transform: scaleY(.65); }
@keyframes boredEar { to { transform: rotate(45deg) translateY(24px); } }
.bunny.is-worm-sick .bunny__head { background: #dff0d2; }
.bunny.is-worm-sick .bunny__eye { box-shadow: none; background: repeating-conic-gradient(#50474a 0 18deg,#fff 19deg 36deg); }
.bunny__tongue, .bunny__tummy, .bunny__sick-stars, .bunny__flies { position: absolute; z-index: 9; display: none; }
.bunny__tongue { left: 82px; top: 149px; width: 20px; height: 22px; border-radius: 5px 5px 50% 50%; background: #f38fa5; }
.bunny__tummy { left: 68px; bottom: 24px; color: #81976e; font-size: 35px; }
.bunny__sick-stars { top: 51px; left: 54px; font-size: 24px; animation: sickStars 1s linear infinite; }
.bunny__flies { top: 84px; right: -9px; font-size: 21px; animation: flies .6s ease-in-out infinite alternate; }
.bunny.is-worm-sick .bunny__tongue, .bunny.is-worm-sick .bunny__tummy, .bunny.is-worm-sick .bunny__sick-stars, .bunny.is-worm-sick .bunny__flies { display: block; }
.bunny.is-stomachache { animation: stomachache .45s ease-in-out infinite alternate; }
.bunny.is-stomachache::after { content: "☁️"; position: absolute; z-index: 10; left: 60px; bottom: -12px; font-size: 36px; animation: flies .5s ease-in-out infinite alternate; }
.bunny.is-stomachache .bunny__paw { top: 49px; left: 38px; right: auto; transform: rotate(90deg); }
@keyframes sickStars { to { transform: rotate(360deg); } }
@keyframes flies { to { transform: translate(12px,-8px); } }
@keyframes stomachache { to { transform: translateY(14px) scale(.96,.9); } }

.speech { position: absolute; z-index: 20; left: 50%; top: -34px; width: max-content; min-width: 95px; max-width: min(78vw, 280px); padding: 9px 13px; text-align: center; white-space: nowrap; word-break: keep-all; border: 2px solid #ffd6e1; border-radius: 17px; background: #fff; box-shadow: 0 7px 14px rgba(85,69,71,.13); opacity: 0; transform: translate(-50%,8px) scale(.8); transition: .18s ease; }
.speech.is-show { opacity: 1; transform: translate(-50%,0) scale(1); }
.accessory { position: absolute; z-index: 26; display: none; pointer-events: none; }
.bunny-wrap.stage-ribbon .accessory--ribbon { display: block; top: 71px; right: 5px; font-size: 38px; transform: rotate(18deg); }
.bunny-wrap.stage-hat .accessory--hat { display: block; top: 40px; left: 50%; font-size: 69px; transform: translateX(-50%) rotate(-5deg); }
.bunny-wrap.stage-glasses .accessory--glasses { display: block; top: 100px; left: 50%; font-size: 51px; transform: translateX(-50%); }
.accessory--cape { left: 15px; top: 130px; width: 150px; height: 100px; border-radius: 35% 35% 60% 60%; background: linear-gradient(135deg,#ed6575,#b94567); }
.bunny-wrap.stage-cape .accessory--cape { display: block; }
.bunny-wrap.stage-king .accessory--crown { display: block; top: 30px; left: 50%; font-size: 65px; transform: translateX(-50%); }
.bunny-wrap.is-transforming { animation: transformPop .9s ease; }
@keyframes transformPop { 35% { transform: translateX(-50%) scale(1.3) rotate(-5deg); filter: brightness(1.3); } 65% { transform: translateX(-50%) scale(.92) rotate(5deg); } }
.bunny-wrap.is-running { animation: bunnyRun 3.2s ease-in-out; }
@keyframes bunnyRun { 0%,100% { left: 50%; } 20% { left: 16%; transform: translateX(-50%) rotate(-8deg); } 50% { left: 83%; transform: translateX(-50%) rotate(8deg); } 75% { left: 28%; } }

.grass { position: absolute; z-index: 18; left: 0; right: 0; bottom: 0; height: 10%; opacity: .55; background: repeating-linear-gradient(78deg, transparent 0 18px, #72bd62 19px 22px, transparent 23px 34px); }
.particle { position: fixed; z-index: 90; pointer-events: none; will-change: transform, opacity; animation: particleBurst .75s ease-out forwards; }
@keyframes particleBurst { to { opacity: 0; transform: translate(var(--px),var(--py)) rotate(var(--pr)) scale(.35); } }
.combo-pop { position: absolute; z-index: 50; left: 50%; top: 35%; color: #ff7245; font: 700 clamp(35px,12vw,64px) "Gaegu",cursive; text-shadow: 0 4px 0 white; opacity: 0; pointer-events: none; }
.combo-pop.is-show { animation: comboPop .8s ease; }
@keyframes comboPop { 0% { opacity: 0; transform: translate(-50%,20px) scale(.5); } 35% { opacity: 1; transform: translate(-50%,0) scale(1.25); } 100% { opacity: 0; transform: translate(-50%,-30px) scale(1); } }
.score-float { position: fixed; z-index: 95; pointer-events: none; font: 700 31px "Gaegu",cursive; text-shadow: 0 2px white; animation: scoreFloat .9s ease-out forwards; }
.score-float.is-good { color: #36a766; }.score-float.is-bad { color: #e85656; }
@keyframes scoreFloat { from { opacity: 0; transform: translate(-50%,10px) scale(.7); } 25% { opacity: 1; transform: translate(-50%,0) scale(1.2); } to { opacity: 0; transform: translate(-50%,-55px) scale(1); } }
.miss-pop { position: fixed; z-index: 96; left: 50%; top: 35%; color: #e75b54; font: 700 48px "Gaegu",cursive; text-shadow: 0 3px white; pointer-events: none; animation: missPop .75s ease forwards; }
@keyframes missPop { 0% { opacity: 0; transform: translate(-50%,20px) scale(.5) rotate(-8deg); } 35% { opacity: 1; transform: translate(-50%,0) scale(1.2) rotate(5deg); } 100% { opacity: 0; transform: translate(-50%,-30px); } }
.milestone-message { position: fixed; z-index: 140; left: 50%; top: 45%; width: max-content; max-width: calc(100% - 32px); padding: 18px 25px; color: #ec633f; border: 3px solid #fff; border-radius: 24px; background: rgba(255,247,205,.98); box-shadow: 0 16px 35px rgba(91,74,67,.25); font: 700 clamp(34px,11vw,62px) "Gaegu",cursive; text-align: center; pointer-events: none; animation: milestoneMessage 4s ease forwards; }
@keyframes milestoneMessage { 0% { opacity: 0; transform: translate(-50%,30px) scale(.55) rotate(-5deg); } 10%,85% { opacity: 1; transform: translate(-50%,0) scale(1) rotate(0); } 92% { opacity: .8; transform: translate(-50%,0) scale(1.08) rotate(3deg); } 100% { opacity: 0; transform: translate(-50%,-28px) scale(.9); } }
.rainbow { position: absolute; z-index: 3; left: 50%; bottom: 24%; width: 95vw; height: 48vw; max-height: 330px; border: 24px solid transparent; border-top-color: #ff818b; border-radius: 50% 50% 0 0; opacity: 0; transform: translateX(-50%) scale(.6); transition: .8s ease; box-shadow: inset 0 18px 0 #ffc761, inset 0 36px 0 #fff172, inset 0 54px 0 #72d88a, inset 0 72px 0 #71b8f3, inset 0 90px 0 #b98bea; }
.rainbow.is-show { opacity: .7; transform: translateX(-50%) scale(1); }
.world.combo-glow { animation: comboGlow .45s ease; }
@keyframes comboGlow { 50% { filter: brightness(1.18) saturate(1.15); } }

.rain-button { position: fixed; z-index: 55; right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); min-height: 49px; padding: 11px 15px; color: #fff; border: 2px solid rgba(255,255,255,.75); border-radius: 99px; background: linear-gradient(135deg,#ff9f4e,#f47732); box-shadow: 0 8px 22px rgba(190,83,39,.28); cursor: pointer; }
.controls { position: fixed; z-index: 60; left: 50%; bottom: 0; display: grid; width: min(100%,680px); min-height: calc(72px + env(safe-area-inset-bottom)); padding: 7px 7px calc(7px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5,1fr); gap: 5px; background: rgba(255,255,255,.94); border: 2px solid rgba(255,255,255,.9); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 25px rgba(70,89,65,.15); transform: translateX(-50%); backdrop-filter: blur(10px); }
.controls button, .controls a { display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center; flex-direction: column; gap: 1px; color: var(--ink); border: 0; border-radius: 14px; background: transparent; text-decoration: none; cursor: pointer; }
.controls button:active, .controls a:active { background: #fff0df; transform: scale(.94); }
.controls span { font-size: 21px; line-height: 1; } .controls small { font-size: 10px; white-space: nowrap; }
.volume-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: min(82vw,300px);
  padding: 14px 16px 16px;
  border: 2px solid #ffe3c9;
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 12px 28px rgba(91,74,67,.2);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
.volume-panel.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.volume-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--ink-soft); font-size: 14px; }
.volume-panel__info { display: flex; align-items: center; gap: 9px; }
.volume-mute { min-height: 28px !important; padding: 4px 9px; color: var(--ink-soft) !important; border: 1px solid #ffd9bd !important; border-radius: 999px !important; background: #fff5ec !important; font-size: 12px !important; }
.volume-mute[aria-pressed="true"] { color: var(--orange-dark) !important; background: #ffe3ce !important; }
.volume-slider { width: 100%; height: 28px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.song-ended { position: fixed; z-index: 58; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); width: min(calc(100% - 24px),560px); padding: 36px 13px 13px; text-align: center; border: 2px solid #fff; border-radius: 20px; background: rgba(255,253,247,.95); box-shadow: var(--shadow); transform: translateX(-50%); transition: width .2s ease, padding .2s ease; }
.song-ended p { margin: 0 0 9px; font-size: clamp(12px,3.7vw,16px); white-space: nowrap; word-break: keep-all; }.song-ended__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }.song-ended button { min-height: 42px; padding: 8px 11px; color: var(--ink); white-space: nowrap; border: 1px solid #ffd6b8; border-radius: 13px; background: #fff4e8; cursor: pointer; }
.song-ended .song-ended__toggle { position: absolute; top: 6px; right: 7px; min-height: 27px; padding: 3px 8px; color: var(--ink-soft); font-size: 11px; }
.song-ended.is-minimized { width: auto; padding: 6px; border-radius: 99px; }
.song-ended.is-minimized p,
.song-ended.is-minimized .song-ended__actions { display: none; }
.song-ended.is-minimized .song-ended__toggle { position: static; min-height: 39px; padding: 7px 13px; font-size: 12px; }
.toast { position: fixed; z-index: 150; left: 50%; top: max(84px,calc(env(safe-area-inset-top) + 70px)); width: max-content; max-width: calc(100% - 20px); padding: 10px 14px; color: #fff; white-space: nowrap; word-break: keep-all; font-size: clamp(11px,3.5vw,14px); border-radius: 99px; background: rgba(80,68,65,.88); opacity: 0; pointer-events: none; transform: translate(-50%,-10px); transition: .2s ease; }
.toast.is-show { opacity: 1; transform: translate(-50%,0); }

@media (min-width: 700px) {
  .world { width: min(100%,760px); margin: 0 auto; border-radius: 0 0 34px 34px; box-shadow: var(--shadow); }
  .hud-item { padding: 9px; }.hud-item span { font-size: 12px; }.hud-item strong { font-size: 20px; }
}
@media (max-width: 699px) {
  .bunny-wrap { bottom: 2%; scale: .92; transform-origin: bottom center; }
  .game-message { word-break: keep-all; text-wrap: balance; }
}
@media (max-height: 650px) {
  .bunny-wrap { bottom: 0; scale: .86; transform: translateX(-50%); transform-origin: bottom center; }
  .game-message { top: 101px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .falling-carrot { transition: none !important; }
}