@font-face {
  font-family: f;
  src: url("/media/games/chicken-run/fonts/FoxDiegoRegular.ttf");
}
#full-area {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
#full-area #game-area {
  width: 1280px;
  height: 720px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  font-family: f;
  color: #fff;
  background: linear-gradient(to bottom, #1e9fd8 0%, #86d6ee 100%);
  user-select: none;
}

#sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #1e9fd8 0%, #4cbde2 45%, #86d6ee 100%);
  z-index: 1;
}

#cloud-animation {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 380px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
@keyframes moveCloud {
  from {
    transform: translateX(1360px);
  }
  to {
    transform: translateX(-420px);
  }
}
#cloud-animation .cloud {
  position: absolute;
  height: 80px;
  width: auto;
  opacity: 0.85;
  animation: moveCloud linear forwards;
}

#birds {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 320px;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
@keyframes birdFly {
  from {
    transform: translateX(1340px);
  }
  to {
    transform: translateX(-140px);
  }
}
@keyframes birdFlap {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
}
#birds .bird {
  position: absolute;
  width: 46px;
  height: 24px;
  animation: birdFly linear infinite;
}
#birds .bird svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(28, 68, 94, 0.5);
  stroke-width: 4;
  stroke-linecap: round;
  animation: birdFlap 0.5s ease-in-out infinite;
}
#birds .b1 {
  top: 84px;
  animation-duration: 20s;
}
#birds .b2 {
  top: 148px;
  width: 34px;
  height: 18px;
  animation-duration: 26s;
  animation-delay: -9s;
}
#birds .b2 svg {
  animation-duration: 0.58s;
}
#birds .b3 {
  top: 44px;
  width: 27px;
  height: 14px;
  animation-duration: 33s;
  animation-delay: -18s;
}
#birds .b3 svg {
  animation-duration: 0.66s;
}

.ground-strip {
  position: absolute;
  left: 0;
  top: 470px;
  width: 100%;
  height: 250px;
  z-index: 1;
  background: linear-gradient(to bottom, #45b95f 0, #45b95f 22px, #c9843c 22px);
}
.ground-strip.low {
  top: 600px;
  height: 120px;
}

.coin-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 12px;
  border-radius: 18px;
  background: rgba(9, 42, 62, 0.42);
  border: 3px solid rgba(255, 255, 255, 0.5);
}
.coin-pill span {
  text-shadow: -3px 0 0 #123044, 3px 0 0 #123044, 0 -3px 0 #123044, 0 3px 0 #123044, -3px -3px 0 #123044, 3px -3px 0 #123044, -3px 3px 0 #123044, 3px 3px 0 #123044, 0 4px 0 rgba(0, 0, 0, 0.3);
}

.icon-btn {
  width: 62px;
  height: 62px;
  padding: 0;
  display: grid;
  place-items: center;
  background: #2ba7e0;
  border: 4px solid #fff;
  border-radius: 16px;
  cursor: pointer;
}
.icon-btn svg {
  width: 36px;
  height: 36px;
  fill: #fff;
}
.icon-btn .stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:active {
  transform: translateY(3px);
}

#intro-section {
  position: absolute;
  inset: 0;
  z-index: 40;
}
@keyframes logoAnim {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}
#intro-section #logo {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 60%;
  transform: translate(-50%, -50%);
  animation: logoAnim 1.3s infinite;
}

@keyframes crRise {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes crSignDrop {
  0% {
    transform: translateY(-60px) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: translateY(4px) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes crIdle {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scaleY(0.96) translateY(2px);
  }
}
@keyframes crRunBob {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}
@keyframes crHop {
  0%, 100% {
    transform: none;
  }
  15% {
    transform: scale(1.08, 0.88);
  }
  45% {
    transform: translateY(-58px) rotate(-6deg);
  }
  75% {
    transform: translateY(0) scale(1.06, 0.9);
  }
  88% {
    transform: none;
  }
}
@keyframes crWave {
  0%, 100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}
@keyframes crEggGlow {
  0%, 100% {
    box-shadow: 0 8px 0 rgba(90, 50, 10, 0.35), 0 0 0 0 rgba(255, 220, 90, 0.8);
  }
  50% {
    box-shadow: 0 8px 0 rgba(90, 50, 10, 0.35), 0 0 22px 8px rgba(255, 220, 90, 0.75);
  }
}
@keyframes crEggWobble {
  0%, 60%, 100% {
    transform: none;
  }
  68% {
    transform: rotate(-8deg);
  }
  78% {
    transform: rotate(7deg);
  }
  88% {
    transform: rotate(-3deg);
  }
}
@keyframes crEggDrop {
  0% {
    transform: translateY(-40px) scale(0.7);
    opacity: 0;
  }
  65% {
    transform: translateY(4px) scaleY(0.9);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
#howto-section {
  position: absolute;
  inset: 0;
  z-index: 40;
  text-align: center;
}
#howto-section #howto-title {
  position: absolute;
  left: 0;
  top: 26px;
  width: 100%;
  margin: 0;
  z-index: 3;
  font-size: 60px;
  letter-spacing: 3px;
  text-shadow: -3px 0 0 #123044, 3px 0 0 #123044, 0 -3px 0 #123044, 0 3px 0 #123044, -3px -3px 0 #123044, 3px -3px 0 #123044, -3px 3px 0 #123044, 3px 3px 0 #123044, 0 7px 0 rgba(0, 0, 0, 0.3);
}
#howto-section #howto-grid {
  position: absolute;
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 70px;
}
#howto-section .howto-col {
  --zone: #7f9fb0;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#howto-section .howto-col.is-talk {
  --zone: #22b455;
}
#howto-section .howto-col.is-scream {
  --zone: #ff9d1a;
}
#howto-section .howto-col:nth-child(1) {
  --delay: .2s;
}
#howto-section .howto-col:nth-child(2) {
  --delay: .35s;
}
#howto-section .howto-col:nth-child(3) {
  --delay: .5s;
}
#howto-section .howto-card {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 124px;
  box-sizing: border-box;
  padding: 14px 0 0;
  border-radius: 16px;
  border: 5px solid #fff;
  border-top: 12px solid var(--zone);
  background: repeating-linear-gradient(to bottom, transparent 0 30px, rgba(90, 50, 8, 0.18) 30px 32px), linear-gradient(to bottom, #e6ad6d, #c07c3f);
  box-shadow: 0 7px 0 rgba(90, 50, 8, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: crSignDrop 0.5s var(--delay) cubic-bezier(0.3, 1.2, 0.4, 1) both;
}
#howto-section .howto-card::before, #howto-section .howto-card::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f4f7fb, #7d8797 70%);
  box-shadow: 0 0 0 2px #5a3208;
}
#howto-section .howto-card::before {
  left: 10px;
}
#howto-section .howto-card::after {
  right: 10px;
}
#howto-section .howto-voice {
  margin: 0;
  font-size: 32px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: -2px 0 0 #5a3208, 2px 0 0 #5a3208, 0 -2px 0 #5a3208, 0 2px 0 #5a3208, -2px -2px 0 #5a3208, 2px -2px 0 #5a3208, -2px 2px 0 #5a3208, 2px 2px 0 #5a3208;
}
#howto-section .howto-icon {
  width: 70px;
  height: 52px;
  fill: #5a3208;
}
#howto-section .howto-icon .stroke {
  fill: none;
  stroke: #5a3208;
  stroke-width: 5;
  stroke-linecap: round;
}
#howto-section .howto-icon .wave {
  animation: crWave 1.1s ease-in-out infinite;
}
#howto-section .howto-icon .w2 {
  animation-delay: 0.15s;
}
#howto-section .howto-icon .w3 {
  animation-delay: 0.3s;
}
#howto-section .howto-link {
  position: relative;
  z-index: 1;
  height: 86px;
  margin-top: -4px;
}
#howto-section .howto-link span {
  display: block;
  width: 18px;
  height: 100%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to right, #e6ad6d, #c07c3f);
  box-shadow: inset 0 0 0 3px #5a3208;
}
#howto-section .howto-chicken {
  position: relative;
  z-index: 2;
  height: 132px;
  width: auto;
  transform-origin: 50% 100%;
  animation: crIdle 1.8s ease-in-out infinite;
}
#howto-section .is-talk .howto-chicken {
  animation: crRunBob 0.36s ease-in-out infinite;
}
#howto-section .jump-col .howto-chicken {
  animation: crHop 1.3s ease-in-out infinite;
}
#howto-section .jump-col .howto-action {
  margin-top: 18px;
}
#howto-section .howto-action {
  margin: 18px 0 0;
  padding: 6px 24px 4px;
  font-size: 30px;
  letter-spacing: 2px;
  border-radius: 22px;
  border: 4px solid #fff;
  background: var(--zone);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  animation: crRise 0.35s calc(var(--delay) + 0.3s) ease-out both;
}
#howto-section #play-btn {
  position: absolute;
  left: 50%;
  top: 566px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 6px 62px;
  font-family: f;
  font-size: 40px;
  letter-spacing: 3px;
  color: #fff;
  background: linear-gradient(to bottom, #4fd97a 0%, #22b455 100%);
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: inset 0 0 0 3px #17853f, 0 7px 0 #17853f;
  cursor: pointer;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
#howto-section #play-btn:active {
  transform: translateX(-50%) translateY(4px);
  box-shadow: inset 0 0 0 3px #17853f, 0 3px 0 #17853f;
}

#levels-section {
  position: absolute;
  inset: 0;
  z-index: 40;
  text-align: center;
}
#levels-section #levels-back {
  position: absolute;
  left: 34px;
  top: 34px;
  z-index: 5;
}
#levels-section #levels-back svg {
  width: 34px;
  height: 34px;
  fill: none;
}
#levels-section #levels-title {
  position: absolute;
  left: 0;
  top: 34px;
  width: 100%;
  margin: 0;
  z-index: 3;
  font-size: 54px;
  letter-spacing: 3px;
  text-shadow: -3px 0 0 #123044, 3px 0 0 #123044, 0 -3px 0 #123044, 0 3px 0 #123044, -3px -3px 0 #123044, 3px -3px 0 #123044, -3px 3px 0 #123044, 3px 3px 0 #123044, 0 7px 0 rgba(0, 0, 0, 0.3);
}
#levels-section #levels-grid {
  position: absolute;
  left: 50%;
  top: 124px;
  transform: translateX(-50%);
  z-index: 3;
  width: 860px;
  box-sizing: border-box;
  padding: 26px 34px 30px;
  border-radius: 28px;
  border: 6px solid #fff;
  background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.12) 0 2px, transparent 3px) 0 0/22px 26px, radial-gradient(circle at 60% 70%, rgba(90, 50, 8, 0.14) 0 2px, transparent 3px) 0 0/30px 18px, linear-gradient(to bottom, #e7bd84, #cf9656);
  box-shadow: inset 0 -10px 0 rgba(120, 70, 20, 0.28), 0 10px 0 rgba(90, 50, 8, 0.45), 0 20px 34px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: repeat(5, 116px);
  justify-content: center;
  column-gap: 44px;
  row-gap: 14px;
}
#levels-section .level-btn {
  position: relative;
  justify-self: center;
  width: 94px;
  height: 118px;
  padding: 10px 0 0;
  font-family: f;
  font-size: 46px;
  line-height: 1;
  color: #5a3208;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  border: 4px solid #fff;
  background: radial-gradient(circle at 34% 28%, #fff 0 14%, #fbf3e4 38%, #e4d2b3 100%);
  box-shadow: 0 8px 0 rgba(90, 50, 10, 0.35);
  cursor: pointer;
  animation: crEggDrop 0.4s calc(0.1s + var(--i) * 40ms) cubic-bezier(0.3, 1.2, 0.4, 1) both;
}
#levels-section .level-btn:hover {
  filter: brightness(1.05);
}
#levels-section .level-btn:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 rgba(90, 50, 10, 0.35);
}
#levels-section .level-btn::before {
  content: "";
  position: absolute;
  right: -4px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #22b455;
  border: 3px solid #fff;
}
#levels-section .level-btn::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 16px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
}
#levels-section .level-btn.current {
  font-size: 52px;
  text-shadow: 0 2px 0 rgba(255, 245, 200, 0.7);
  background: radial-gradient(circle at 34% 28%, #fffbe0 0 12%, #ffd257 45%, #f5a020 100%);
  animation: crEggDrop 0.4s calc(0.1s + var(--i) * 40ms) cubic-bezier(0.3, 1.2, 0.4, 1) both, crEggGlow 1.6s 1s ease-in-out infinite, crEggWobble 2.2s 1.2s ease-in-out infinite;
}
#levels-section .level-btn.current::before, #levels-section .level-btn.current::after {
  display: none;
}
#levels-section .level-btn.locked {
  display: grid;
  place-items: center;
  padding: 0;
  cursor: default;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 248, 232, 0.35);
  box-shadow: none;
}
#levels-section .level-btn.locked:hover {
  filter: none;
}
#levels-section .level-btn.locked:active {
  transform: none;
  box-shadow: none;
}
#levels-section .level-btn.locked::before, #levels-section .level-btn.locked::after {
  display: none;
}
#levels-section .level-btn.locked svg {
  width: 34px;
  height: 38px;
}
#levels-section .level-btn.locked .shackle {
  fill: none;
  stroke: rgba(90, 50, 8, 0.55);
  stroke-width: 6;
  stroke-linecap: round;
}
#levels-section .level-btn.locked .body {
  fill: rgba(90, 50, 8, 0.55);
}

#play-section {
  position: absolute;
  inset: 0;
  z-index: 10;
}

#cr-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  z-index: 1;
  touch-action: none;
}

#cr-sprites {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
  z-index: 0;
}

#coin-hud {
  position: absolute;
  right: 34px;
  top: 30px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 12px;
  background: rgba(9, 42, 62, 0.42);
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}
#coin-hud img {
  width: 34px;
  height: 34px;
}
#coin-hud span {
  font-size: 30px;
  letter-spacing: 2px;
  color: #ffd257;
  text-shadow: -3px 0 0 #123044, 3px 0 0 #123044, 0 -3px 0 #123044, 0 3px 0 #123044, -3px -3px 0 #123044, 3px -3px 0 #123044, -3px 3px 0 #123044, 3px 3px 0 #123044, 0 3px 0 rgba(0, 0, 0, 0.3);
}

#play-levels {
  position: absolute;
  left: 34px;
  top: 30px;
  z-index: 30;
  width: 54px;
  height: 54px;
}
#play-levels svg {
  width: 30px;
  height: 30px;
}

#level-progress {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  z-index: 30;
  width: 440px;
  text-align: center;
}
#level-progress .level-label {
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: 2px;
  text-shadow: -3px 0 0 #123044, 3px 0 0 #123044, 0 -3px 0 #123044, 0 3px 0 #123044, -3px -3px 0 #123044, 3px -3px 0 #123044, -3px 3px 0 #123044, 3px 3px 0 #123044, 0 3px 0 rgba(0, 0, 0, 0.3);
}
#level-progress #progress-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(18, 48, 68, 0.35);
}
#level-progress #progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 7px;
}
#level-progress #progress-chicken {
  position: absolute;
  top: -32px;
  left: 0;
  height: 38px;
  width: auto;
  transform: translateX(-50%);
}
#level-progress #progress-goal {
  position: absolute;
  right: -15px;
  top: -34px;
  width: 30px;
  height: 36px;
}
#level-progress #progress-goal .pole {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}
#level-progress #progress-goal .flag {
  fill: #ffd257;
  stroke: #123044;
  stroke-width: 2;
  stroke-linejoin: round;
}

#micSensitivityContainer {
  position: absolute;
  left: 34px;
  bottom: 88px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
}
#micSensitivityContainer #micSensitivityIcon {
  width: 30px;
  height: 42px;
  fill: #fff;
}
#micSensitivityContainer #micSensitivityIcon .stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
}
#micSensitivityContainer #micSensitivityLabel {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: 2px;
  text-shadow: -3px 0 0 #123044, 3px 0 0 #123044, 0 -3px 0 #123044, 0 3px 0 #123044, -3px -3px 0 #123044, 3px -3px 0 #123044, -3px 3px 0 #123044, 3px 3px 0 #123044, 0 3px 0 rgba(0, 0, 0, 0.3);
}
#micSensitivityContainer #micSensitivityLabel span {
  font-size: 18px;
  opacity: 0.85;
}
#micSensitivityContainer #micSensitivitySlider {
  -webkit-appearance: none;
  appearance: none;
  width: 190px;
  height: 8px;
  border-radius: 4px;
  background: #012541;
  outline: none;
  cursor: pointer;
}
#micSensitivityContainer #micSensitivitySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e2445c;
}
#micSensitivityContainer #micSensitivitySlider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e2445c;
}

#loudness-meter {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 30;
  width: 460px;
  box-sizing: border-box;
  padding: 12px 16px 14px;
  border-radius: 20px;
  background: rgba(9, 42, 62, 0.42);
  border: 3px solid rgba(255, 255, 255, 0.5);
}
#loudness-meter .meter-labels {
  display: flex;
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
#loudness-meter .meter-labels span {
  text-align: center;
  opacity: 0.9;
}
#loudness-meter .meter-track {
  position: relative;
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
#loudness-meter .meter-track .zone-silent {
  background: #7f9fb0;
}
#loudness-meter .meter-track .zone-talk {
  background: #4fd97a;
}
#loudness-meter .meter-track .zone-scream {
  background: #ffb020;
}
#loudness-meter .meter-needle-row {
  position: relative;
  height: 0;
}
#loudness-meter #meter-needle {
  position: absolute;
  top: -30px;
  left: 0;
  width: 6px;
  height: 34px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(18, 48, 68, 0.55);
  transform: translateX(-50%);
}

@keyframes crBarnRise {
  0% {
    transform: translateY(90px) scale(0.9);
    opacity: 0;
  }
  60% {
    transform: translateY(-8px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes crRibbonIn {
  0% {
    transform: translateX(-50%) rotate(-3deg) scaleX(0);
  }
  65% {
    transform: translateX(-50%) rotate(-3deg) scaleX(1.08);
  }
  100% {
    transform: translateX(-50%) rotate(-3deg);
  }
}
@keyframes crPop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  65% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes crEggIn {
  0% {
    transform: translateY(-40px) scale(0.6);
    opacity: 0;
  }
  60% {
    transform: translateY(3px) scaleY(0.85);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes crEggWiggle {
  0%, 70%, 100% {
    transform: none;
  }
  76% {
    transform: rotate(-12deg);
  }
  84% {
    transform: rotate(10deg);
  }
  92% {
    transform: rotate(-5deg);
  }
}
@keyframes crSparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.4) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}
#success-section {
  position: absolute;
  inset: 0;
  z-index: 45;
  background: radial-gradient(ellipse at 50% 45%, rgba(18, 48, 68, 0.15), rgba(18, 48, 68, 0.55));
}

#success-confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.result-content {
  position: absolute;
  left: 50%;
  top: calc(50% - 35px);
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cr-barn {
  position: relative;
  width: 620px;
  animation: crBarnRise 0.55s cubic-bezier(0.25, 1.2, 0.4, 1) both;
}

.cr-roof {
  position: relative;
  width: 690px;
  height: 124px;
  margin-left: -35px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cr-roof::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 20px, rgba(90, 29, 16, 0.28) 20px 23px), linear-gradient(to bottom, #e9573f, #a92d1b);
  clip-path: polygon(50% 13px, calc(100% - 26px) 100%, 26px 100%);
}

.cr-loft {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 14px;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  border: 6px solid #fff;
  background: linear-gradient(to right, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)), linear-gradient(to bottom, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)), radial-gradient(circle at 50% 40%, #6b3417, #2e1206);
}

.cr-barn-body {
  position: relative;
  height: 272px;
  box-sizing: border-box;
  padding: 18px 18px 42px;
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  gap: 18px;
  background: repeating-linear-gradient(to right, transparent 0 38px, rgba(90, 29, 16, 0.35) 38px 41px), linear-gradient(to bottom, #d8412b, #a92d1b);
  border: 8px solid #fff;
  border-top-width: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
}

.cr-door {
  border: 6px solid #fff;
  border-radius: 6px;
  background: linear-gradient(to top right, transparent calc(50% - 4px), #fff calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)), linear-gradient(to bottom right, transparent calc(50% - 4px), #fff calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)), rgba(90, 29, 16, 0.25);
}

.cr-sign {
  position: relative;
  padding-top: 30px;
  border-radius: 14px;
  border: 5px solid #fff;
  background: repeating-linear-gradient(to bottom, transparent 0 44px, rgba(150, 88, 12, 0.2) 44px 46px), linear-gradient(to bottom, #fff1cf, #ffd78a);
  box-shadow: 0 6px 0 rgba(90, 29, 16, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cr-sign-ribbon {
  position: absolute;
  left: 50%;
  top: -26px;
  margin: 0;
  padding: 7px 26px 5px;
  white-space: nowrap;
  font-size: 28px;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(to bottom, #94ff00 0%, #50ef00 50%, #0fc600 100%);
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 0 5px 0 #17853f;
  text-shadow: 0 3px 0 rgba(0, 90, 20, 0.5);
  animation: crRibbonIn 0.45s 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  transform: translateX(-50%) rotate(-3deg);
}

.result-title {
  margin: 0;
  font-size: 84px;
  line-height: 1;
  letter-spacing: 2px;
  color: #e2445c;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  animation: crPop 0.4s 0.65s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.cr-nest {
  position: absolute;
  left: -24px;
  right: -24px;
  bottom: -26px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  padding-bottom: 9px;
  box-sizing: border-box;
  border-radius: 29px;
  border: 5px solid #fff;
  background: repeating-linear-gradient(104deg, transparent 0 7px, rgba(150, 95, 12, 0.45) 7px 9px, transparent 9px 15px), repeating-linear-gradient(76deg, transparent 0 11px, rgba(255, 240, 180, 0.55) 11px 13px), linear-gradient(to bottom, #f7d46a, #f2c14e 50%, #d69c27);
  box-shadow: 0 7px 0 rgba(120, 70, 8, 0.6);
}

.cr-egg {
  position: relative;
  width: 28px;
  height: 36px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  box-sizing: border-box;
  border: 3px solid #5a1d10;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #fbf3e4 40%, #e6d6bb 100%);
  animation: crEggIn 0.35s calc(0.7s + var(--i) * 55ms) cubic-bezier(0.3, 1.2, 0.4, 1) both;
}
.cr-egg.todo {
  border: 3px dashed rgba(120, 70, 8, 0.55);
  background: rgba(255, 255, 255, 0.25);
}
.cr-egg.fresh {
  width: 34px;
  height: 44px;
  background: radial-gradient(circle at 35% 30%, #fffbe0 0 16%, #ffd257 45%, #f5a020 100%);
  box-shadow: 0 0 0 3px #fff, 0 0 18px 6px rgba(255, 220, 90, 0.95);
  animation: crEggIn 0.35s calc(0.7s + var(--i) * 55ms) cubic-bezier(0.3, 1.2, 0.4, 1) both, crEggWiggle 1.8s calc(1.6s + var(--i) * 40ms) ease-in-out infinite;
}
.cr-egg.fresh::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 14px;
  height: 14px;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: crSparkle 1.8s 1.6s ease-in-out infinite;
}

.cr-barn {
  margin-bottom: 30px;
}

#success-next {
  background: linear-gradient(to bottom, #4fd97a 0%, #22b455 100%);
  box-shadow: inset 0 0 0 4px #17853f;
  text-shadow: 0 3px 0 rgba(0, 80, 30, 0.45);
}

.result-btns {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.result-btn {
  padding: 10px 30px;
  font-family: f;
  font-size: 34px;
  letter-spacing: 2px;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(to bottom, #abf6fc 0%, #00d8f1 30%, #00b8e6 100%);
  border: 5px solid #fff;
  border-radius: 18px;
  box-shadow: inset 0 0 0 4px #0071bc;
  cursor: pointer;
  text-shadow: 0 3px 0 rgba(0, 80, 120, 0.45);
}
.result-btn:active {
  transform: translateY(3px);
}

/*# sourceMappingURL=style.css.map */