*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#000;
}

img,
button,
.wheel-wrap,
.spin-page{
    -webkit-user-drag:none;
    user-select:none;
    -webkit-user-select:none;
}

.spin-page{
    width:100%;
    min-height:100vh;
    background-image:var(--bg-desktop);
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    position:relative;
    overflow:hidden;
}

.spin-page::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.18);
    pointer-events:none;
}

.spin-shell{
    width:100%;
    max-width:1280px;
    display:grid;
    grid-template-columns:56% 44%;
    align-items:center;
    position:relative;
    z-index:2;
    transform:translateY(18px);
}

.mobile-top-logo{
    display:none;
}

.wheel-area{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding-left:40px;
}

.wheel-wrap{
    width:min(720px,50vw);
    aspect-ratio:1/1;
    position:relative;
}

.wheel-glow{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(255,215,90,.35) 0%,
            rgba(255,215,90,.12) 45%,
            transparent 72%
        );
    z-index:0;
}

.wheel-prize{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    transform-origin:center center;
    backface-visibility:hidden;
    will-change:transform;
    border-radius:50%;
    overflow:hidden;
    background:
        radial-gradient(circle at center, #07143c 0 9%, transparent 9.6%),
        conic-gradient(from -22.5deg,
            #071b55 0deg 45deg,
            #f6f8ff 45deg 90deg,
            #071b55 90deg 135deg,
            #f6f8ff 135deg 180deg,
            #071b55 180deg 225deg,
            #f6f8ff 225deg 270deg,
            #071b55 270deg 315deg,
            #f6f8ff 315deg 360deg);
    box-shadow:
inset 0 0 0 7px rgb(255 0 0 / 72%), inset 0 0 0 13px rgba(255, 255, 255, .14), inset 0 0 38px rgba(0, 0, 0, .68);
}

.wheel-prize::before{
    content:"";
    position:absolute;
    inset:10.4%;
    border-radius:50%;
    background:
        repeating-conic-gradient(from -22.5deg,
            rgba(255,255,255,.22) 0deg 1deg,
            transparent 1deg 45deg);
    pointer-events:none;
    z-index:1;
}

.wheel-prize::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 34% 22%, rgba(255,255,255,.22), transparent 18%),
        radial-gradient(circle at center, transparent 0 56%, rgba(0,0,0,.28) 100%);
    pointer-events:none;
    z-index:4;
}

.wheel-center-cap{
    position:absolute;
    left:50%;
    top:50%;
    width:18%;
    aspect-ratio:1/1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle, #fff7bc 0%, #f2b735 44%, #7d3900 100%);
    box-shadow:0 0 0 5px rgba(255,255,255,.2), 0 8px 18px rgba(0,0,0,.45);
    z-index:5;
    pointer-events:none;
}

.wheel-prize.is-spinning{
    filter:none !important;
}

.wheel-frame-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    z-index:2;
    pointer-events:none;
    transform:none !important;
    animation:none !important;
}

.form-area{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-top:10px;
}

.brand-logo{
    width:360px;
    max-width:90%;
    margin-bottom:18px;
}

.form-area h1{
    font-size:26px;
    color:#fff;
    font-weight:600;
    text-align:center;
    margin-bottom:22px;
    text-shadow:0 3px 8px #000;
}

.voucher-form{
    width:100%;
    max-width:390px;
}

.voucher-form input{
    width:100%;
    height:51px;
    display:block;
    margin-bottom:17px;
    border-radius:5px;
    border:0;
    background:#fff;
    color:#555;
    padding:0 18px;
    font-size:19px;
    outline:none;
}

.voucher-form input:focus{
    box-shadow:0 0 0 3px rgba(0,132,255,.45);
}

.button-row{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:22px;
}

.gold-button{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:0 12px;
    border:.1rem solid transparent;
    border-radius:2rem;
    background:linear-gradient(90deg,#FDD13C,#FEE381,#F2AA53);
    box-shadow:0 0 0.05rem 0.02rem #e0b91a inset;
    color:#fff;
    cursor:pointer;
    position:relative;
    font-size:20px;
    font-weight:700;
    text-transform:uppercase;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1;
}

.gold-button:hover{
    filter:brightness(1.08);
}

.gold-button:disabled,
.gold-button.is-loading{
    opacity:.7;
    cursor:not-allowed;
    filter:grayscale(.15);
}

.login-button{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
    line-height:1;
}

/* MODAL BASE */

.modal-overlay{
    position:fixed;
    inset:0;
    width:100vw;
    max-width:100vw;
    background:rgba(0,0,0,.68);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:18px;
    overflow:hidden;
}

.modal-overlay.is-active{
    display:flex;
}

.welcome-modal,
.alert-modal,
.success-modal,
.history-modal{
    background:rgba(15,18,28,.58) !important;
    border:1px solid rgb(103 19 19) !important;
    color:#fff !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:
        0 22px 70px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.welcome-modal,
.alert-modal,
.success-modal{
    width:100%;
    max-width:430px;
    box-sizing:border-box;
    border-radius:20px;
    padding:32px 26px 28px;
    text-align:center;
}

.welcome-modal{
    max-width:560px;
}

.welcome-modal h2,
.alert-modal h2,
.success-modal h2{
    color:#FF3B30 !important;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.welcome-modal h2{
    font-size:30px;
    line-height:1.2;
    margin-bottom:22px;
    font-weight:800;
}

.welcome-modal p{
    font-size:18px;
    line-height:1.45;
    margin-bottom:34px;
    color:#fff !important;
}

.modal-gold-button{
    min-width:130px;
    height:46px;
    border:1px solid #740404;
    border-radius:8px;
    background:linear-gradient(135deg, #e30000e3, #cd0808) !important;
    color:#fff !important;
    font-weight:800;
    font-size:15px;
    cursor:pointer;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
}

.alert-modal{
    min-height:260px;
}

.alert-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    border:4px solid #ef7777;
    color:#ef7777;
    font-size:70px;
    line-height:76px;
    margin:0 auto 30px;
    font-weight:300;
}

.alert-icon.success{
    border-color:#4dcf72;
    color:#4dcf72;
}

.alert-icon.error{
    border-color:#ef7777;
    color:#ef7777;
}

.alert-modal h2{
    font-size:30px;
    line-height:1.15;
    margin-bottom:28px;
}

.success-badge{
    width:92px;
    height:92px;
    margin:0 auto 18px;
    border-radius:50%;
    background:rgb(255 255 255 / 22%) !important;
    border:1px solid rgba(90,129,255,.75);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.success-modal h2{
    font-size:34px;
    font-weight:900;
    margin-bottom:10px;
}

.success-modal p{
    font-size:22px;
    font-weight:800;
    color:#fff !important;
    line-height:1.35;
    margin-bottom:25px;
}

.success-claim-link{
    text-decoration:none;
}

/* HISTORY MODAL */

.history-modal{
    width:100%;
    max-width:430px;
    height:620px;
    overflow:hidden;
    border-radius:22px;
    position:relative;
    background:rgba(8,12,24,.72) !important;
}

.history-close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.16);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    z-index:3;
}

.history-header{
    height:62px;
    background:linear-gradient(135deg, #e30000e3, #cd0808) !important;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:18px;
    letter-spacing:.8px;
}

.history-body{
    height:558px;
    padding:14px;
    overflow-y:auto;
}

.history-body::-webkit-scrollbar{
    width:6px;
}

.history-body::-webkit-scrollbar-thumb{
    background:rgb(235 64 64 / 65%);
    border-radius:999px;
}

.history-body table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
    font-size:15px;
}

.history-body th,
.history-body td{
    padding:11px 8px;
}

.history-body thead th{
    color:#fff;
    font-size:13px;
    padding:6px 8px;
    text-align:left;
}

.history-body th:first-child,
.history-body td:first-child{
    width:45px;
    text-align:center;
}

.history-body th:last-child,
.history-body td:last-child{
    text-align:center;
}

.history-body tbody tr{
    background:rgba(255,255,255,.075);
}

.history-body tbody td:first-child{
    border-radius:12px 0 0 12px;
    color:#ff1212;
    font-weight:800;
}

.history-body tbody td:last-child{
    border-radius:0 12px 12px 0;
    color:#fff;
    font-weight:800;
}

/* MOBILE */

@media(max-width:900px){

    .spin-page{
        align-items:flex-start;
        padding:0;
        background-image:var(--bg-mobile);
        background-position:center top;
        background-size:cover;
    }

    .spin-shell{
        width:100%;
        max-width:430px;
        margin:0 auto;
        padding:18px 18px 35px;
        transform:none !important;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .mobile-top-logo{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-bottom:40px;
        position:relative;
        z-index:20;
    }

    .mobile-top-logo img{
        width:min(72vw,200px);
        height:auto;
        object-fit:contain;
        margin-top:10px;
        filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
    }

    .desktop-logo{
        display:none !important;
    }

    .wheel-area{
        width:100%;
        display:flex;
        justify-content:center !important;
        align-items:center;
        padding-left:0 !important;
        margin-top: 30px;
    }

    .wheel-wrap{
        width:min(88vw,360px);
        max-width:360px;
        margin:0 auto !important;
    }

    .form-area{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        margin-top:40px;
        padding-top:0;
    }

    .form-area h1{
        font-size:23px;
        margin-bottom:18px;
    }

    .voucher-form{
        width:100%;
        max-width:305px;
        margin:0 auto;
    }

    .voucher-form input{
        height:47px;
        font-size:18px;
        margin-bottom:13px;
    }

    .button-row{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:18px;
    }

    .gold-button{
        min-height:43px;
        height:43px;
        font-size:19px;
    }

    .modal-overlay{
        align-items:center !important;
        justify-content:center !important;
        padding:14px !important;
    }

    .success-modal,
    .alert-modal,
    .welcome-modal{
        width:calc(100vw - 28px) !important;
        max-width:360px !important;
        min-height:auto !important;
        padding:24px 18px 22px !important;
        border-radius:20px !important;
        margin:0 auto !important;
        transform:none !important;
    }

    .success-badge{
        width:76px !important;
        height:76px !important;
        font-size:40px !important;
        margin-bottom:16px !important;
    }

    .success-modal h2,
    .alert-modal h2,
    .welcome-modal h2{
        font-size:28px !important;
        line-height:1.15 !important;
        margin-bottom:12px !important;
    }

    .success-modal p,
    .welcome-modal p{
        font-size:19px !important;
        line-height:1.35 !important;
        margin-bottom:20px !important;
        word-break:normal;
    }

    .modal-gold-button{
        width:auto !important;
        min-width:130px !important;
        height:44px !important;
        border-radius:8px !important;
        font-size:14px !important;
    }

    .history-modal{
        max-width:360px;
        height:560px;
    }

    .history-body{
        height:498px;
    }
}

@media(max-width:430px){

    .success-modal,
    .alert-modal,
    .welcome-modal{
        width:calc(100vw - 24px) !important;
        max-width:340px !important;
        padding:22px 16px 20px !important;
    }

    .success-modal h2,
    .alert-modal h2,
    .welcome-modal h2{
        font-size:26px !important;
    }

    .success-modal p,
    .welcome-modal p{
        font-size:18px !important;
    }
}
.settings-two-col{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.settings-form-grid.single{
    grid-template-columns:1fr;
}

@media(max-width:1100px){
    .settings-two-col{
        grid-template-columns:1fr;
        gap:16px;
    }
}

/* Dynamic prize items from admin */
.wheel-segment-item{
    position:absolute;
    left:50%;
    top:50%;
    width:27%;
    height:24%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    color:#fff;
    font-weight:900;
    font-size:clamp(8px,1vw,14px);
    line-height:1.05;
    text-transform:uppercase;
    text-shadow:0 2px 4px rgba(0,0,0,.92), 0 0 8px rgba(0,0,0,.7);
    pointer-events:none;
    z-index:3;
    transform-origin:center center;
}

.wheel-segment-item img{
    width:50%;
    max-height:50%;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
}

.wheel-segment-item span{
    display:block;
    max-width:100%;
    word-break:break-word;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.wheel-segment-item.is-empty{
    opacity:.18;
}

.wheel-segment-item.is-empty span::before{
    content:"-";
}

.segment-0{ left:50%; top:19%; transform:translate(-50%,-50%) rotate(0deg); }
.segment-1{ left:72%; top:28%; transform:translate(-50%,-50%) rotate(45deg); }
.segment-2{ left:81%; top:50%; transform:translate(-50%,-50%) rotate(90deg); }
.segment-3{ left:72%; top:72%; transform:translate(-50%,-50%) rotate(135deg); }
.segment-4{ left:50%; top:81%; transform:translate(-50%,-50%) rotate(180deg); }
.segment-5{ left:28%; top:72%; transform:translate(-50%,-50%) rotate(225deg); }
.segment-6{ left:19%; top:50%; transform:translate(-50%,-50%) rotate(270deg); }
.segment-7{ left:28%; top:28%; transform:translate(-50%,-50%) rotate(315deg); }

.success-prize-image{
    width:96px;
    height:96px;
    object-fit:contain;
    display:block;
    margin:0 auto 12px;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

@media (max-width:768px){
    .wheel-segment-item{
        width:28%;
        height:24%;
        font-size:clamp(7px,2.4vw,10px);
    }

    .wheel-segment-item img{
        width:46%;
        max-height:44%;
    }
}
/* =========================================================
   DYNAMIC WHEEL FIX - CSS FRAME VERSION
   ========================================================= */

.wheel-wrap{
  position:relative;
  width:min(72vw, 560px);
  aspect-ratio:1/1;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wheel-dynamic{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  z-index:3;
  transform-origin:center center;
  background:
    conic-gradient(
      from -22.5deg,
      #f7c948 0deg 45deg,
      #7b109b 45deg 90deg,
      #f7c948 90deg 135deg,
      #7b109b 135deg 180deg,
      #f7c948 180deg 225deg,
      #7b109b 225deg 270deg,
      #f7c948 270deg 315deg,
      #7b109b 315deg 360deg
    );
  box-shadow:
    inset 0 0 28px rgba(0,0,0,.45),
    0 18px 38px rgba(0,0,0,.45);
}

.wheel-segment-item{
  position:absolute;
  left:50%;
  top:50%;
  width:118px;
  min-height:92px;
  margin-left:-59px;
  margin-top:-46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  z-index:4;
  transform-origin:center center;
  pointer-events:none;
}

.wheel-segment-item img{
  width:58px;
  height:58px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.45));
}

.wheel-segment-item span{
  max-width:105px;
  font-size:11px;
  line-height:1.05;
  font-weight:900;
  color:#fff7c8;
  text-transform:uppercase;
  text-shadow:
    0 2px 2px rgba(0,0,0,.8),
    0 0 5px rgba(0,0,0,.55);
  white-space:normal;
  word-break:break-word;
}

.wheel-segment-item.is-empty{
  display:none;
}

/* 8 segment positions */
.wheel-segment-item.segment-0{
  transform:rotate(0deg) translateY(-185px) rotate(0deg);
}

.wheel-segment-item.segment-1{
  transform:rotate(45deg) translateY(-185px) rotate(-45deg);
}

.wheel-segment-item.segment-2{
  transform:rotate(90deg) translateY(-185px) rotate(-90deg);
}

.wheel-segment-item.segment-3{
  transform:rotate(135deg) translateY(-185px) rotate(-135deg);
}

.wheel-segment-item.segment-4{
  transform:rotate(180deg) translateY(-185px) rotate(-180deg);
}

.wheel-segment-item.segment-5{
  transform:rotate(225deg) translateY(-185px) rotate(-225deg);
}

.wheel-segment-item.segment-6{
  transform:rotate(270deg) translateY(-185px) rotate(-270deg);
}

.wheel-segment-item.segment-7{
  transform:rotate(315deg) translateY(-185px) rotate(-315deg);
}

.css-wheel-frame{
  position:absolute;
  inset:-15px;
  border-radius:50%;
  pointer-events:none;
  z-index:7;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0%,
      transparent 62%,
      rgba(255,246,177,.95) 63%,
      rgba(255,205,67,1) 66%,
      rgba(146,75,12,1) 70%,
      rgba(255,236,140,1) 74%,
      rgba(81,39,7,1) 78%,
      transparent 79%
    );
  box-shadow:
    0 0 0 5px rgb(176 0 255 / 95%), 0 0 22px rgb(200 0 255 / 70%), 0 18px 32px rgba(0, 0, 0, .38), inset 0 0 18px rgba(255, 255, 255, .28);
}

.css-wheel-frame::before{
  content:"";
  position:absolute;
  inset:19px;
  border-radius:50%;
  border:3px solid rgba(255,245,168,.85);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.5),
    0 0 12px rgba(255,218,90,.45);
}

.css-wheel-center{
  position:absolute;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:8;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 25%, #fff7b5 0%, #ffd56b 20%, #c97612 50%, #4e1d05 100%);
  border:7px solid #ffe28a;
  box-shadow:
    0 9px 20px rgba(0,0,0,.55),
    inset 0 5px 10px rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(0,0,0,.45);
}

.css-wheel-center::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #ffdd75 25%, #a84d0b 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.5);
}

/* Popup prize image */
.success-prize-image{
  width:118px;
  height:118px;
  object-fit:contain;
  margin:8px auto 12px;
  display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

/* Mobile */
@media (max-width: 768px){
  .wheel-wrap{
    width:min(92vw, 390px);
  }

  .wheel-segment-item{
    width:82px;
    min-height:70px;
    margin-left:-41px;
    margin-top:-35px;
    gap:3px;
  }

  .wheel-segment-item img{
    width:42px;
    height:42px;
  }

  .wheel-segment-item span{
    max-width:76px;
    font-size:8.5px;
  }

  .wheel-segment-item.segment-0{
    transform:rotate(0deg) translateY(-128px) rotate(0deg);
  }

  .wheel-segment-item.segment-1{
    transform:rotate(45deg) translateY(-128px) rotate(-45deg);
  }

  .wheel-segment-item.segment-2{
    transform:rotate(90deg) translateY(-128px) rotate(-90deg);
  }

  .wheel-segment-item.segment-3{
    transform:rotate(135deg) translateY(-128px) rotate(-135deg);
  }

  .wheel-segment-item.segment-4{
    transform:rotate(180deg) translateY(-128px) rotate(-180deg);
  }

  .wheel-segment-item.segment-5{
    transform:rotate(225deg) translateY(-128px) rotate(-225deg);
  }

  .wheel-segment-item.segment-6{
    transform:rotate(270deg) translateY(-128px) rotate(-270deg);
  }

  .wheel-segment-item.segment-7{
    transform:rotate(315deg) translateY(-128px) rotate(-315deg);
  }

  .css-wheel-frame{
    inset:-10px;
    box-shadow:
      0 0 0 3px rgba(212, 0, 255, 0.95),
      0 0 15px rgba(195, 0, 255, 0.65),
      0 12px 22px rgba(0,0,0,.34);
  }

  .css-wheel-center{
    width:70px;
    height:70px;
    border-width:5px;
  }

  .css-wheel-center::after{
    inset:16px;
  }
}
/* =========================================================
   LIGHTNING POINTER
   ========================================================= */

.lightning-pointer{
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  width:75px;
  height:250px;
  pointer-events:none;
}

.lightning-svg{
  width:100%;
  height:100%;
  display:block;
  animation:lightningPulse 1.8s ease-in-out infinite;
}

@keyframes lightningPulse{
  0%{
    transform:translateY(0px) scale(1);
    filter:
drop-shadow(0 0 24px rgba(255,65,65,.85))
drop-shadow(0 0 34px rgba(255,0,0,.95))
  }

  50%{
    transform:translateY(-4px) scale(1.03);
    filter:
drop-shadow(0 0 24px rgba(255,65,65,.85))
drop-shadow(0 0 34px rgba(255,0,0,.95))
  }

  100%{
    transform:translateY(0px) scale(1);
    filter:
drop-shadow(0 0 24px rgba(255,65,65,.85))
drop-shadow(0 0 34px rgba(255,0,0,.95))
  }
}

/* =========================================================
   WHEEL WRAP
   ========================================================= */

.wheel-wrap{
  position:relative;
  width:min(72vw,560px);
  aspect-ratio:1/1;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   DYNAMIC WHEEL
   ========================================================= */

.wheel-dynamic{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  z-index:3;
  transform-origin:center center;
  background:
    conic-gradient(
      from -22.5deg,
      #f4ca4d 0deg 45deg,
      #ad1212  45deg 90deg,
      #f4ca4d 90deg 135deg,
      #ad1212  135deg 180deg,
      #f4ca4d 180deg 225deg,
      #ad1212  225deg 270deg,
      #f4ca4d 270deg 315deg,
      #ad1212  315deg 360deg
    );
  box-shadow:
    inset 0 0 26px rgba(0,0,0,.45),
    0 18px 36px rgba(0,0,0,.45);
}

/* =========================================================
   SEGMENTS
   ========================================================= */

.wheel-segment-item{
  position:absolute;
  left:50%;
  top:50%;
  width:118px;
  min-height:92px;
  margin-left:-59px;
  margin-top:-46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  z-index:5;
  transform-origin:center center;
  pointer-events:none;
}

.wheel-segment-item img{
  width:58px;
  height:58px;
  object-fit:contain;
  display:block;
  filter:
    drop-shadow(0 5px 5px rgba(0,0,0,.45));
}

.wheel-segment-item span{
  max-width:105px;
  font-size:11px;
  line-height:1.05;
  font-weight:900;
  color:#fff7d0;
  text-transform:uppercase;
  text-shadow:
    0 2px 2px rgba(0,0,0,.8),
    0 0 6px rgba(0,0,0,.55);
  white-space:normal;
  word-break:break-word;
}

.wheel-segment-item.is-empty{
  display:none;
}

/* =========================================================
   SEGMENT POSITIONS
   ========================================================= */

.wheel-segment-item.segment-0{
  transform:rotate(0deg) translateY(-185px) rotate(0deg);
}

.wheel-segment-item.segment-1{
  transform:rotate(45deg) translateY(-185px) rotate(-45deg);
}

.wheel-segment-item.segment-2{
  transform:rotate(90deg) translateY(-185px) rotate(-90deg);
}

.wheel-segment-item.segment-3{
  transform:rotate(135deg) translateY(-185px) rotate(-135deg);
}

.wheel-segment-item.segment-4{
  transform:rotate(180deg) translateY(-185px) rotate(-180deg);
}

.wheel-segment-item.segment-5{
  transform:rotate(225deg) translateY(-185px) rotate(-225deg);
}

.wheel-segment-item.segment-6{
  transform:rotate(270deg) translateY(-185px) rotate(-270deg);
}

.wheel-segment-item.segment-7{
  transform:rotate(315deg) translateY(-185px) rotate(-315deg);
}

/* =========================================================
   FRAME
   ========================================================= */

.css-wheel-frame{
  position:absolute;
  inset:-15px;
  border-radius:50%;
  pointer-events:none;
  z-index:10;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0%,
      transparent 62%,
      rgba(255,246,177,.95) 63%,
      rgba(255,205,67,1) 66%,
      rgba(146,75,12,1) 70%,
      rgba(255,236,140,1) 74%,
      rgba(81,39,7,1) 78%,
      transparent 79%
    );
  box-shadow: 0 0 0 5px rgb(255 0 0 / 95%), 0 0 28px rgb(255 0 43 / 85%), 0 20px 36px rgba(0, 0, 0, .42), inset 0 0 20px rgba(255, 255, 255, .28);

}

.css-wheel-frame::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:3px solid rgba(255,245,168,.85);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.5),
    0 0 12px rgba(255,218,90,.45);
}

/* =========================================================
   CENTER
   ========================================================= */

.css-wheel-center{
  position:absolute;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:20;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 25%, #fff7b5 0%, #ffd56b 20%, #c97612 50%, #4e1d05 100%);
  border:7px solid #ffe28a;
  box-shadow:
    0 9px 20px rgba(0,0,0,.55),
    inset 0 5px 10px rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(0,0,0,.45);
}

.css-wheel-center::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #ffdd75 25%, #a84d0b 100%);
}

/* =========================================================
   POPUP IMAGE
   ========================================================= */

.success-prize-image{
  width:118px;
  height:118px;
  object-fit:contain;
  margin:8px auto 12px;
  display:block;
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px){

  .wheel-wrap{
    width:min(92vw,390px);
  }

  .lightning-pointer{
    width:52px;
    height:140px;
    top:-82px;
  }

  .wheel-segment-item{
    width:82px;
    min-height:70px;
    margin-left:-41px;
    margin-top:-35px;
    gap:3px;
  }

  .wheel-segment-item img{
    width:42px;
    height:42px;
  }

  .wheel-segment-item span{
    max-width:76px;
    font-size:8.5px;
  }

  .wheel-segment-item.segment-0{
    transform:rotate(0deg) translateY(-128px) rotate(0deg);
  }

  .wheel-segment-item.segment-1{
    transform:rotate(45deg) translateY(-128px) rotate(-45deg);
  }

  .wheel-segment-item.segment-2{
    transform:rotate(90deg) translateY(-128px) rotate(-90deg);
  }

  .wheel-segment-item.segment-3{
    transform:rotate(135deg) translateY(-128px) rotate(-135deg);
  }

  .wheel-segment-item.segment-4{
    transform:rotate(180deg) translateY(-128px) rotate(-180deg);
  }

  .wheel-segment-item.segment-5{
    transform:rotate(225deg) translateY(-128px) rotate(-225deg);
  }

  .wheel-segment-item.segment-6{
    transform:rotate(270deg) translateY(-128px) rotate(-270deg);
  }

  .wheel-segment-item.segment-7{
    transform:rotate(315deg) translateY(-128px) rotate(-315deg);
  }

  .css-wheel-center{
    width:72px;
    height:72px;
    border-width:5px;
  }

  .css-wheel-center::after{
    inset:16px;
  }
}