.modal-backdrop {
  position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(29, 24, 39, .48); backdrop-filter: blur(10px); animation: fadeIn .25s ease;
}
.spin-modal, .result-modal {
  position: relative; width: min(100%, 470px); max-height: min(92dvh, 850px); overflow: auto;
  border-radius: 28px; padding: 25px 20px 22px; text-align: center;
  border: 1px solid rgba(161, 123, 194, .28); background: #fff;
  box-shadow: 0 18px 56px rgba(27, 22, 38, .2), 0 2px 10px rgba(27, 22, 38, .08);
}
.spin-modal {
  border: 1px solid rgba(255, 220, 137, .68);
  background: linear-gradient(150deg, rgba(22, 15, 38, .97), rgba(49, 25, 59, .95) 55%, rgba(24, 23, 43, .97));
  box-shadow: 0 22px 70px rgba(10, 5, 18, .5), inset 0 1px 0 rgba(255,255,255,.16), 0 0 28px rgba(232,174,65,.14);
  backdrop-filter: blur(18px) saturate(1.16);
}
.spin-modal::before {
  content: ""; position: absolute; pointer-events: none; inset: 8px;
  border: 1px solid rgba(255, 220, 137, .16); border-radius: 21px;
}
.modal-close { position: absolute; z-index: 5; right: 15px; top: 13px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #f7f6fa; color: #50465e; font-size: 25px; line-height: 1; }
.spin-modal .modal-close { color: #fff0c7; border-color: rgba(255,220,137,.34); background: rgba(255,255,255,.08); }
.modal-kicker, .result-eyebrow { color: #95680d; font-size: 10px; letter-spacing: 2px; font-weight: 900; }
.spin-modal h2, .result-modal h2 { font-size: 25px; margin: 7px 0 4px; color: #272236; }
.spin-modal h2 { color: #fff4d6; text-shadow: 0 2px 12px rgba(255,191,71,.22); }
.modal-subtitle, .result-modal > p { font-size: 12px; color: #707487; margin: 0 0 15px; }
.spin-modal .modal-subtitle { color: rgba(255,245,220,.72); }
.wheel-wrap { position: relative; width: min(84vw, 370px); aspect-ratio: 1; margin: 17px auto 20px; filter: drop-shadow(0 17px 28px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(232,174,65,.2)); }
.wheel-rim { position: absolute; inset: 0; border-radius: 50%; padding: 8px; background: linear-gradient(145deg, #fff9d4 0%, #bd7614 13%, #fff0a2 27%, #7e3d0c 47%, #ffdf72 67%, #97500d 82%, #fff1ae 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.88), 0 0 0 6px rgba(191,130,25,.4), 0 0 29px rgba(255,190,63,.42), inset 0 0 17px #fff9d8; }
.wheel-rim canvas { width: 100%; height: 100%; border-radius: 50%; display: block; transform-origin: 50% 50%; backface-visibility: hidden; }
.wheel-pointer { position: absolute; z-index: 3; left: 50%; top: -14px; transform: translateX(-50%); width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 58px solid #f5b82d; filter: drop-shadow(0 5px 5px rgba(0,0,0,.6)); }
.wheel-pointer:after { content: ""; position: absolute; left: -13px; top: -56px; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 31px solid #fff4bd; }
.wheel-pointer::before { content: ""; position: absolute; z-index: 1; left: -8px; top: -62px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #ffe28a 42%, #b36b12 80%); box-shadow: 0 1px 4px rgba(0,0,0,.65); }
.gold-button { width: min(100%, 300px); height: 54px; border: 2px solid #fff0a0; border-radius: 30px; color: #351000; font-size: 15px; font-weight: 1000; background: linear-gradient(180deg, #fff078, #ffb21b 50%, #ff8100); box-shadow: 0 4px 0 #b86a12, 0 0 18px rgba(255, 179, 41, .25), inset 0 2px 4px #fff; }
.gold-button span { font-size: 22px; vertical-align: -2px; margin-right: 6px; }
.gold-button:disabled { opacity: .6; filter: grayscale(.4); cursor: wait; }
.spin-footnote { font-size: 11px; color: #c9bdd8; margin: 16px 0 0; }
.spin-modal .modal-kicker { color: #f5ce77; }
.spin-status { font-size: 12px; min-height: 20px; color: #f3d68d; margin-top: 10px; }
.spin-status.error { color: #ff9aab; }
.result-modal { width: min(100%, 430px); padding: 26px 20px; }
.win-crown { font-size: 54px; color: #d39a23; filter: drop-shadow(0 3px 7px rgba(205, 146, 30, .25)); animation: float 2s ease-in-out infinite; }
.result-modal h2 { font-size: 32px; }
.result-prize { margin: 17px 0; padding: 16px 10px; border-radius: 17px; border: 1px solid #e7c56d; background: linear-gradient(110deg, #fff5cf, #ffe08b, #fff5cf); box-shadow: 0 6px 18px rgba(191, 139, 26, .14); color: #5a3b08; font-weight: 1000; font-size: clamp(22px, 7vw, 32px); }
.voucher-label { font-size: 10px; letter-spacing: 2px; color: #777084; font-weight: 900; }
.voucher-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0 15px; padding: 12px 13px; border: 1px solid rgba(111, 86, 145, .22); border-radius: 13px; background: #f8f7fb; box-shadow: inset 0 1px 3px rgba(31, 24, 41, .04); }
.voucher-code-row code { font-size: clamp(18px, 5vw, 23px); font-weight: 900; letter-spacing: 1px; color: #282437; }
.voucher-code-row button { width: 36px; height: 36px; border: 1px solid rgba(111, 86, 145, .22); border-radius: 9px; background: #fff; color: #57436e; font-size: 20px; }
.telegram-claim, .save-code { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 28px; font-weight: 900; font-size: 13px; margin-top: 10px; }
.telegram-claim { background: linear-gradient(100deg, #20aee8, #176fe0); box-shadow: 0 5px 14px rgba(32, 139, 220, .2); color: #fff; }
.save-code { background: linear-gradient(100deg, #7042a2, #9565c5); border: 1px solid #b89bd5; color: #fff; }
.secure-note { font-size: 10px; color: #747789; line-height: 1.5; margin: 14px 0 0; }
.spin-status.error { color: #c12b48; }
.aga-toast { position: fixed; z-index: 100; top: 92px; left: 50%; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 24px; border: 1px solid rgba(111, 86, 145, .22); background: #fff; color: #2b2636; font-size: 12px; box-shadow: 0 8px 24px rgba(31, 24, 41, .14); transition: .25s; }
.aga-toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 50% { transform: translateY(-7px) rotate(4deg); } }