* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #05030a;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 210, 90, .24), transparent 28%),
    radial-gradient(circle at 18% 24%, rgba(111, 40, 152, .36), transparent 36%),
    radial-gradient(circle at 82% 24%, rgba(129, 27, 81, .32), transparent 34%),
    linear-gradient(180deg, #12051a 0%, #080511 48%, #030205 100%);
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 16%;
  width: 140px;
  opacity: .36;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 216, 120, .65), transparent 22%),
    linear-gradient(90deg, transparent, rgba(255, 200, 85, .32), transparent),
    linear-gradient(180deg, rgba(255, 215, 110, .20), transparent 16%, transparent 84%, rgba(255, 215, 110, .18));
  filter: blur(.3px);
}

.scene::before {
  left: -72px;
  border-radius: 0 100px 100px 0;
}

.scene::after {
  right: -72px;
  border-radius: 100px 0 0 100px;
}

.floating-dust {
  position: fixed;
  inset: 0;
  opacity: .26;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 222, 120, .9) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 58, 135, .6) 0 1px, transparent 2px);
  background-size: 80px 80px, 128px 128px;
  animation: dust 15s linear infinite;
}

@keyframes dust {
  from { transform: translateY(-80px); }
  to { transform: translateY(80px); }
}

.app {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 12px 14px 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.page {
  width: min(560px, 100%);
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-cards {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  z-index: 3;
}

.mini-card {
  min-width: 100px;
  height: 56px;
  padding: 9px 12px;
  border-radius: 13px;
  background: rgba(11, 7, 17, .72);
  border: 1px solid rgba(255, 216, 104, .34);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, .04), 0 12px 30px rgba(0,0,0,.28);
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-card b {
  display: block;
  font-size: 13px;
  line-height: 1.1;
  color: #ffe17a;
  font-weight: 1000;
  letter-spacing: .04em;
}

.ticket-card {
  min-width: 80px;
  justify-content: center;
}

.gift-mini,
.gift-line {
  width: 31px;
  height: 31px;
  border-radius: 6px;
  position: relative;
  background: linear-gradient(180deg, #fff2a8, #d49312);
  box-shadow: inset 12px 0 rgba(255, 213, 70, .55);
}

.gift-mini::before,
.gift-line::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  width: 7px;
  height: 100%;
  background: #5a2400;
  opacity: .45;
}

.gift-mini::after,
.gift-line::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 9px;
  width: 37px;
  height: 7px;
  border-radius: 5px;
  background: #ffec93;
}

.ticket-mini,
.ticket-small {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 23px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff3d91, #8b38ff);
  color: #ffe37f;
  font-weight: 1000;
  border: 2px solid #ffbf42;
}

.hero {
  margin-top: 2px;
  text-align: center;
  z-index: 2;
}

.logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 15vw, 92px);
  line-height: .88;
  font-weight: 900;
  letter-spacing: .085em;
  color: #ffd86a;
  text-shadow:
    0 2px 0 #835000,
    0 0 22px rgba(255, 216, 104, .8),
    0 0 46px rgba(255, 45, 126, .24);
}

.subtitle {
  margin-top: 9px;
  color: #ffe48a;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 1000;
  letter-spacing: .16em;
  text-shadow: 0 0 22px rgba(255, 216, 104, .45);
}

.wheel-area {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 385px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -8px;
}

.wheel-wrap {
  position: relative;
  width: min(96vw, 520px, 58vh);
  height: min(96vw, 520px, 58vh);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 30px 58px rgba(0,0,0,.82));
}

.wheel-wrap.spinning {
  animation: wrapGlow .38s linear infinite;
}

@keyframes wrapGlow {
  50% {
    filter:
      drop-shadow(0 30px 58px rgba(0,0,0,.82))
      drop-shadow(0 0 24px rgba(255, 216, 104, .55));
  }
}

.pointer {
  position: absolute;
  z-index: 20;
  top: 2px;
  left: 50%;
  width: 82px;
  height: 96px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff7bd, #ffc238 58%, #865000);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.75));
}

.pointer-gem {
  position: absolute;
  top: 17px;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #ffb5ff, #8e0fb9 70%);
  border: 3px solid #ffd875;
  box-shadow: 0 0 18px rgba(255, 69, 255, .65);
}

.wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    conic-gradient(
      from -15deg,
      #99101d 0 30deg,
      #121016 30deg 60deg,
      #9e0d1c 60deg 90deg,
      #151017 90deg 120deg,
      #8f0d19 120deg 150deg,
      #121016 150deg 180deg,
      #a50f20 180deg 210deg,
      #151017 210deg 240deg,
      #8f0d19 240deg 270deg,
      #121016 270deg 300deg,
      #a50f20 300deg 330deg,
      #151017 330deg 360deg
    );
  transition: transform 5.3s cubic-bezier(.07,.78,.09,1);
  will-change: transform;
  box-shadow:
    inset 0 0 0 12px #ffe083,
    inset 0 0 0 25px #8a4f08,
    inset 0 0 0 32px #ffd15a,
    inset 0 0 76px rgba(0,0,0,.78);
}

.wheel::before {
  content: "";
  position: absolute;
  inset: 43px;
  border-radius: 50%;
  border: 2px solid rgba(255,222,120,.40);
  box-shadow:
    inset 0 0 46px rgba(0,0,0,.45),
    0 0 36px rgba(255,216,104,.22);
}

.wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(130deg, rgba(255,255,255,.28), transparent 22%),
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.20), transparent 14%),
    radial-gradient(circle at 72% 72%, rgba(255,216,104,.13), transparent 25%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.sector {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
    transform-origin: 0 0;
}

.p1 { transform: rotate(0deg); }
.p2 { transform: rotate(30deg); }
.p3 { transform: rotate(60deg); }
.p4 { transform: rotate(90deg); }
.p5 { transform: rotate(120deg); }
.p6 { transform: rotate(150deg); }
.p7 { transform: rotate(180deg); }
.p8 { transform: rotate(210deg); }
.p9 { transform: rotate(240deg); }
.p10 { transform: rotate(270deg); }
.p11 { transform: rotate(300deg); }
.p12 { transform: rotate(330deg); }

.prize {
    width: 24px;
    height: 24px;

    display: flex;
    justify-content: center;
    align-items: center;

    transform: rotate(15deg) translateX(30px);

    filter: drop-shadow(0 0 4px rgba(255,215,0,.45));
}

.prize span {
    display: none;
}

.prize::before,
.prize::after {
  content: "";
  display: block;
}

.crown::before {
  width: 56px;
  height: 38px;
  background: linear-gradient(180deg, #fff5a8, #ffc73a 70%, #a45d00);
  clip-path: polygon(0 100%, 10% 25%, 32% 64%, 50% 0, 68% 64%, 90% 25%, 100% 100%);
}

.diamond::before {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #eaffff, #43dcff 45%, #335dff);
  clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
  box-shadow: 0 0 20px rgba(62,220,255,.65);
}

.gift::before {
  width: 58px;
  height: 50px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff0a0, #ff3e72 65%);
  box-shadow: inset 22px 0 rgba(255,214,79,.78);
}

.coins::before {
  width: 58px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 30%, #fff8ba, transparent 24%),
    linear-gradient(180deg, #fff0a0, #d79211);
  box-shadow: 15px 10px 0 -4px #e7a61c, -15px 10px 0 -5px #ffc747;
}

.discount::before {
  width: 62px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff62c5, #862bff);
  border: 4px solid #ffcf67;
}

.discount::after {
  content: "%";
  position: absolute;
  margin-top: -52px;
  color: #fff;
  font-size: 38px;
  font-weight: 1000;
}

.clover::before {
  width: 58px;
  height: 58px;
  background: radial-gradient(circle at 30% 30%, #bfff78, #20b819 60%, #09660d);
  clip-path: polygon(50% 10%,63% 35%,90% 35%,70% 55%,80% 83%,50% 68%,20% 83%,30% 55%,10% 35%,37% 35%);
}

.cross::before {
  width: 58px;
  height: 58px;
  background: linear-gradient(180deg,#ff9677,#d41414);
  clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);
  transform: rotate(45deg);
}

.bolt::before {
  width: 48px;
  height: 68px;
  background: linear-gradient(180deg,#fff7a8,#ffbf22);
  clip-path: polygon(58% 0,18% 50%,44% 50%,32% 100%,83% 40%,55% 40%);
}

.chest::before {
  width: 64px;
  height: 50px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 46%, #ffd663 46% 56%, transparent 56%),
    linear-gradient(180deg, #ffe193 0 33%, #7a340d 34% 100%);
  border: 4px solid #ffc750;
}

.star::before {
  width: 64px;
  height: 64px;
  background: linear-gradient(180deg,#fff7b4,#ffc226);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 91%,50% 69%,21% 91%,32% 56%,2% 35%,39% 35%);
}

.vip::before {
  content: "VIP";
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 5px solid #ffd96a;
  display: grid;
  place-items: center;
  color: #ffe487;
  font-size: 21px;
  font-weight: 1000;
  background: rgba(0,0,0,.25);
}

.cash::before {
  width: 66px;
  height: 48px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 42%, #e9ffad 42% 58%, transparent 58%),
    linear-gradient(180deg, #a4ff7b, #1a9a26);
  box-shadow: 10px 8px 0 -2px #0c6f19, -10px 8px 0 -2px #49d34c;
}

.rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px #fff0a2,
    inset 0 0 0 46px rgba(119,64,3,.25);
}

.bulbs {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,245,180,1) 0 1.6deg, transparent 1.6deg 10deg);
  mask: radial-gradient(circle, transparent 0 86%, #000 87% 94%, transparent 95%);
  filter: drop-shadow(0 0 10px rgba(255,222,90,.85));
  animation: bulbsRun 1.2s linear infinite;
}

@keyframes bulbsRun {
  to { transform: rotate(360deg); }
}

.glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(255,255,255,.055) 37% 56%, transparent 57%);
}

.hub {
  position: absolute;
  z-index: 8;
  width: 148px;
  height: 148px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #ffd96f;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), transparent 25%),
    linear-gradient(180deg, #2a1119, #0d080b);
  box-shadow:
    inset 0 0 0 8px #f6c456,
    inset 0 0 0 13px rgba(255,255,255,.18),
    0 0 22px rgba(255,214,86,.7),
    0 15px 28px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hub small {
  font-size: 23px;
}

.hub strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  letter-spacing: .08em;
}

.spin {
  position: relative;
  z-index: 5;
  width: min(380px, 92%);
  min-height: 88px;
  border: 0;
  border-radius: 22px;
  margin-top: -10px;
  cursor: pointer;
  color: #401000;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 35%),
    linear-gradient(135deg, #ffd864, #d81448 55%, #7b29c8);
  box-shadow:
    0 0 0 3px #ffdf78,
    0 13px 26px rgba(0,0,0,.55),
    0 0 32px rgba(255,61,127,.45);
  transition: transform .12s ease;
}

.spin:active {
  transform: scale(.97);
}

.spin b {
  display: block;
  font-size: clamp(27px, 8vw, 38px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .04em;
}

.spin span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .07em;
}

.spin:disabled {
  opacity: .72;
}

.bottom {
  width: 100%;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.bottom-card {
  min-height: 78px;
  padding: 11px;
  border-radius: 13px;
  background: rgba(11,8,17,.78);
  border: 1px solid rgba(255,216,104,.22);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.bottom-card b {
  display: block;
  color: #ffe07a;
  font-size: 12px;
  line-height: 1.1;
}

.bottom-card span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.15;
}

.bottom-card strong {
  display: block;
  margin-top: 6px;
  font-size: 17px;
}

.round-i {
  width: 29px;
  height: 29px;
  border: 2px solid rgba(255,225,120,.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffe07a;
  font-weight: 1000;
  flex: 0 0 auto;
}

.center-card {
  justify-content: center;
  text-align: center;
}

.reward-card {
  justify-content: space-between;
}

.arrow {
  font-size: 38px;
  opacity: .75;
}

.result-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(8px);
}

.result-modal.show {
  display: grid;
}

.modal-card {
  width: min(360px, 100%);
  padding: 28px 20px 20px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,216,104,.24), transparent 35%),
    linear-gradient(180deg, #211019, #08050a);
  border: 1px solid rgba(255,216,104,.36);
  box-shadow: 0 26px 80px rgba(0,0,0,.7);
  text-align: center;
}

.modal-glow {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe783, #d29313);
  box-shadow: 0 0 30px rgba(255,216,104,.55);
}

.modal-kicker {
  color: #ffe07a;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.modal-title {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 1000;
}

.modal-prize {
  margin: 8px 0 20px;
  color: #ffe07a;
  font-size: 24px;
  font-weight: 1000;
}

.modal-card button {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 15px;
  color: #260a00;
  background: linear-gradient(135deg, #ffe07a, #ff347d);
  font-weight: 1000;
}

#confetti {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

@media (max-height: 740px) {
  .top-cards { display: none; }
  .logo { font-size: 58px; }
  .subtitle { font-size: 14px; margin-top: 6px; }
  .wheel-area { min-height: 360px; }
  .wheel-wrap {
    width: min(92vw, 410px, 56vh);
    height: min(92vw, 410px, 56vh);
  }
  .sector { padding-right: 38px; }
  .prize { width: 74px; height: 86px; }
  .prize span { font-size: 11px; }
  .hub { width: 118px; height: 118px; }
  .hub strong { font-size: 27px; }
  .spin { min-height: 72px; }
  .spin b { font-size: 25px; }
  .spin span { font-size: 12px; }
  .bottom { display: none; }
}

@media (max-width: 390px) {
  .wheel-wrap {
    width: min(94vw, 390px, 55vh);
    height: min(94vw, 390px, 55vh);
  }
  .sector { padding-right: 34px; }
  .prize { width: 72px; }
  .prize span { font-size: 10px; }
  .hub { width: 112px; height: 112px; }
}

/* Размер всех иконок */
.prize::before {
    zoom: .65;
}

.prize::after {
    zoom: .65;
}