/* Three supplied transparent PNGs share one 1536 x 1024 coordinate system. */
.topbar {
  height: 96px;
  align-content: center;
  gap: 5px;
}

.birthday-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 42px;
  color: #bd7357;
  font-size: 25px;
  line-height: 1;
}

.birthday-line strong { font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }

.balloon-bunch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 54px;
  margin-top: 12px;
  transform-origin: 50% 100%;
}

.balloon-bunch i {
  position: absolute;
  width: 22px;
  height: 28px;
  border-radius: 52% 48% 48% 52% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 32% 25%,#fff9 0 8%,transparent 10%),linear-gradient(135deg,#ff9a88,#c95c55 72%);
  box-shadow: inset -4px -5px 8px #7e2f2950,0 3px 5px #633c3038;
}
.balloon-bunch i::after {
  content:""; position:absolute; left:8px; bottom:-5px;
  border-left:3px solid transparent; border-right:3px solid transparent; border-top:6px solid #b5544c;
}
.balloon-bunch i:nth-child(1){left:16px;top:0;background:radial-gradient(circle at 32% 25%,#fff9 0 8%,transparent 10%),linear-gradient(135deg,#ef9bb2,#bd607c 72%)}
.balloon-bunch i:nth-child(2){left:1px;top:10px;background:radial-gradient(circle at 32% 25%,#fff9 0 8%,transparent 10%),linear-gradient(135deg,#ffd78f,#dca754 72%)}
.balloon-bunch i:nth-child(3){right:1px;top:11px;background:radial-gradient(circle at 32% 25%,#fff9 0 8%,transparent 10%),linear-gradient(135deg,#9bc9b4,#579377 72%)}
.balloon-bunch i:nth-child(4){left:9px;top:24px;background:radial-gradient(circle at 32% 25%,#fff9 0 8%,transparent 10%),linear-gradient(135deg,#a9c8e9,#668fbf 72%)}
.balloon-bunch i:nth-child(5){right:9px;top:25px;background:radial-gradient(circle at 32% 25%,#fff9 0 8%,transparent 10%),linear-gradient(135deg,#f4a88e,#c96b53 72%)}
.balloon-bunch b::before,.balloon-bunch b::after{content:"";position:absolute;bottom:-12px;width:1px;height:27px;background:#9e8069;transform-origin:bottom}
.balloon-bunch b::before{left:18px;transform:rotate(-18deg)}
.balloon-bunch b::after{right:18px;transform:rotate(18deg)}

.balloons-fly .balloon-left {
  animation: balloon-fly-left 3.2s cubic-bezier(.2,.65,.25,1) forwards;
}

.balloons-fly .balloon-right {
  animation: balloon-fly-right 3.2s cubic-bezier(.2,.65,.25,1) forwards;
}

@keyframes balloon-fly-left {
  0% { transform: translate(0,0) rotate(-5deg); opacity: 1; }
  35% { transform: translate(-28px,-65px) rotate(-9deg); opacity: 1; }
  70% { transform: translate(-58px,-145px) rotate(8deg); opacity: .9; }
  100% { transform: translate(-100px,-260px) rotate(-14deg) scale(.82); opacity: 0; }
}

@keyframes balloon-fly-right {
  0% { transform: translate(0,0) rotate(5deg); opacity: 1; }
  35% { transform: translate(28px,-65px) rotate(9deg); opacity: 1; }
  70% { transform: translate(58px,-145px) rotate(-8deg); opacity: .9; }
  100% { transform: translate(100px,-260px) rotate(14deg) scale(.82); opacity: 0; }
}

.copy-status { min-height: 22px; margin: 10px 0 0!important; color:#6f8b6d; font-weight:650; }
.save-warning { margin: 8px 0 0!important; color:#9b5e49; font-size:14px; line-height:1.35; }
.promo-row button { width:42px; height:42px; border:1px solid #d8b49e!important; border-radius:10px; background:#fff5ed!important; display:grid; place-items:center; font-size:28px!important; line-height:1; }
.rules-consent { max-width:330px; margin:20px auto 0; color:#76675d; font-size:12px; line-height:1.45; }
.rules-consent button { padding:0; border:0; border-bottom:1px solid currentColor; background:transparent; color:#8f5744; font:inherit; cursor:pointer; }
.rules-dialog { max-height:min(86vh,760px); overflow:hidden; padding:32px 26px 24px; }
.rules-dialog h2 { padding-right:24px; font-size:23px; line-height:1.15; }
.rules-content { max-height:calc(86vh - 125px); overflow-y:auto; padding-right:8px; text-align:left; scrollbar-width:thin; }
.rules-content h3 { margin:20px 0 7px; font-size:17px; }
.rules-content p,.rules-content li { font-size:14px; line-height:1.5; }
.rules-content p { margin:0 0 10px; }
.rules-content ul { margin:8px 0 12px; padding-left:21px; }
.rules-content a { color:#9b5e49; }
.how-dialog { max-height:none; }
.how-dialog h2 { margin-bottom:20px; }
.how-steps p { margin:0 0 14px; font-size:16px; line-height:1.45; text-align:left; }
.how-steps p:last-child { margin-bottom:0; }
.how-steps b { color:#bd7357; }
.snowman-help { margin:0 0 13px; color:#795c4b; font-size:15px; line-height:1.4; }
.telegram-prize { display:block; margin:0 0 12px; padding:15px; border-radius:99px; background:#2aabee; color:#fff; text-decoration:none; font-size:17px; box-shadow:0 7px 15px #2aabee33; }

.wheel-stage {
  --size: min(
    calc(
      100vw
      - max(env(safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px))
      - max(env(safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px))
      - 20px
    ),
    470px
  );
  width: var(--size);
  height: calc(var(--size) * 1.08);
  margin: 5px auto 8px;
  isolation: isolate;
}

.wheel-static-pointer,
.wheel-static-stand,
.wheel-static-button,
.rotor-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: calc(var(--size) * .90);
  object-fit: cover;
  pointer-events: none;
}

.wheel-static-pointer {
  z-index: 4;
  clip-path: inset(0 0 74% 0);
  transform: translateY(-9%) scale(.75);
  transform-origin: 50% 50%;
}

.wheel-static-stand {
  z-index: 1;
  top: 10%;
  clip-path: inset(68% 0 0 0);
  transform: translateY(11%) scaleY(.78);
  transform-origin: 50% 100%;
}

.wheel-static-button {
  z-index: 5;
  top: 10%;
  transform: scale(.50);
  transform-origin: 50% 50%;
}

.wheel-stage > .pointer,
.wheel-stage > .wheel-stand { display: none; }

.wheel-stage > .wheel {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 0;
  width: 100%;
  height: calc(var(--size) * .90);
  border-radius: 0;
  overflow: visible;
  filter: none;
  background: transparent;
  transform-origin: 50% 50%;
  transition: transform 9.2s cubic-bezier(.08,.68,.08,1);
}

.rotor-image { z-index: 2; }

.wheel > .sectors,
.wheel > .sector-item,
.wheel > .wood-ring { display: none; }

.wheel-stage > .hub-button {
  z-index: 6;
  top: 54.1%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  opacity: 0;
}

@media (max-width: 390px) {
  .topbar { height: 112px; }
  .birthday-line { font-size: 23px; gap: 17px; }
  .wheel-stage {
    --size: min(
      calc(
        100vw
        - max(env(safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px))
        - max(env(safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px))
        - 20px
      ),
      386px
    );
    height: calc(var(--size) * 1.08);
  }
}