*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Vazirmatn,sans-serif;
}

body{
background:#000;
overflow-x:hidden;
}

/* ---------------- Hero ---------------- */

.hero{

position:relative;
width:100%;
height:100vh;

background:
linear-gradient(
rgba(0,0,0,.20),
rgba(0,0,0,.75)
),
url("hero.png");

background-size:cover;
background-position:center center;
background-repeat:no-repeat;

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

padding-bottom:60px;
}

@media screen and (min-width:800px){

.hero{

width:100%;
height:175vh;

padding-bottom:460px;
}

}

.panel{

width:95%;
max-width:550px;

padding:30px;

border-radius:30px;

background:rgba(0,0,0,.15);

backdrop-filter:blur(4px);

border:1px solid rgba(255,215,0,.35);

box-shadow:
0 0 40px rgba(255,215,0,.25);
}

.title{

text-align:center;

font-size:40px;

font-weight:900;

color:#ffd700;

margin-bottom:10px;
}

.desc{

text-align:center;

color:#fff;

line-height:2;

margin-bottom:20px;
}

input{

width:100%;

height:55px;

border:none;
outline:none;

border-radius:15px;

padding:0 15px;

font-size:18px;

text-align:center;

margin-bottom:15px;
}

button{

width:100%;
height:60px;

border:none;
cursor:pointer;

border-radius:15px;

font-size:22px;

font-weight:900;

background:
linear-gradient(
135deg,
#ffe27a,
#d4af37
);

color:#000;

box-shadow:
0 0 25px rgba(255,215,0,.6);

transition:.3s;
}

button:hover{

transform:scale(1.03);
}

/* ---------------- Wheel Modal ---------------- */

.spinModal{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.92);

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

z-index:9999;
}

.wheelContainer{

position:relative;

display:flex;

justify-content:center;
align-items:center;
}

/* ---------------- Wheel ---------------- */

.wheelWrap{

position:relative;

width:520px;
height:520px;

border-radius:50%;

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

transform-origin:center center;

transition:
transform 9s cubic-bezier(.17,.67,.12,.99);

box-shadow:
0 0 40px rgba(212,175,55,.45),
0 0 90px rgba(212,175,55,.25);

overflow:visible !important;
}

#wheelCanvas{

display:block;

border-radius:50%;
}

/* ---------------- Ring ---------------- */

.led-ring{

position:absolute;

inset:-20px;

border-radius:50%;

pointer-events:none;

background:transparent;

box-shadow:none;

animation:none;

z-index:150;
}

.led-dot{

position:absolute;

width:12px;
height:12px;

border-radius:50%;

background:#5a4a00;

pointer-events:none;

box-shadow:
0 0 2px rgba(255,215,0,.2);

transition:none;
}

.led-dot.on{

background:#ffd700;

box-shadow:
0 0 8px #ffd700,
0 0 16px #ffd700,
0 0 24px rgba(255,215,0,.6);
}

/* ---------------- Pointer ---------------- */

.pointer{

position:absolute;

top:-20px;
left:50%;

transform:translateX(-50%);

width:50px;
height:60px;

background:
linear-gradient(
180deg,
#ffe27a,
#d4af37
);

clip-path:
polygon(
50% 100%,
0 0,
100% 0
);

border-radius:6px;

z-index:99999;

box-shadow:
0 0 15px gold,
0 0 30px gold;
}

/* ---------------- Center ---------------- */

.center{

position:absolute;

top:50%;
left:50%;

transform:
translate(-50%,-50%);

width:170px;
height:170px;

border-radius:50%;

background:
radial-gradient(
circle,
#2a2a2a,
#000
);

border:8px solid #d4af37;

display:flex;

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

z-index:50;

box-shadow:
0 0 20px gold,
0 0 40px rgba(212,175,55,.5),
inset 0 0 25px rgba(255,215,0,.3);
}

.center-inner{

text-align:center;

font-size:24px;

font-weight:900;

line-height:1.8;

color:#fff;
}

/* ---------------- Result ---------------- */

.result{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.92);

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

padding:15px;

z-index:999999;
}

.card{

width:100%;
max-width:550px;

padding:35px;

border-radius:30px;

background:#141414;

border:2px solid #d4af37;

text-align:center;

animation:show .4s ease;
}

@keyframes show{

from{
opacity:0;
transform:scale(.8);
}

to{
opacity:1;
transform:scale(1);
}

}

.card h2{

font-size:36px;

margin-bottom:15px;

color:#ffd700;
}

.prize{

font-size:42px;

font-weight:900;

color:#fff;

margin:20px 0;
}

.code{

background:#222;

padding:15px;

border-radius:12px;

color:#ffd700;

word-break:break-word;

margin:15px 0;
}

.link{

background:#111;

border:1px solid #333;

padding:15px;

border-radius:12px;

word-break:break-all;

font-size:13px;
}

.link a{

color:#f5d77c;

text-decoration:none;
}

.close{

margin-top:20px;
}

/* ---------------- Mobile ---------------- */

@media(max-width:800px){

.wheelWrap{

width:360px;
height:360px;
}

.pointer{

top:-20px;

width:38px;
height:48px;
}

.center{

width:120px;
height:120px;
}

.center-inner{

font-size:15px;
}

.title{

font-size:30px;
}

.desc{

font-size:14px;
}

.prize{

font-size:30px;
}

.card{

padding:25px;
}

}

/* =========================================================
   حالت برنده - چشمک‌زدن LEDهای پایه
   ========================================================= */

#wheel.winning .led-dot{

animation:
ledFlash .4s ease-in-out infinite alternate;
}

#wheel.winning .led-dot:nth-child(odd){
animation-delay:.1s;
}

#wheel.winning .led-dot:nth-child(3n){
animation-delay:.2s;
}

#wheel.winning .led-dot:nth-child(5n){
animation-delay:.3s;
}

@keyframes ledFlash{

0%{
background:#5a4a00;
box-shadow:0 0 2px rgba(255,215,0,.2);
}

100%{
background:#fff5b8;
box-shadow:
0 0 12px #ffd700,
0 0 24px #ffd700,
0 0 40px #ffd700,
0 0 60px rgba(255,215,0,.7);
}

}

/* =========================================================
   پالس طلایی روی کل گردونه هنگام برد
   ========================================================= */

#wheel.winning{

animation:
winPulse 1.5s ease-in-out infinite;
}

@keyframes winPulse{

0%,100%{

box-shadow:
0 0 40px rgba(212,175,55,.45),
0 0 90px rgba(212,175,55,.25);

}

50%{

box-shadow:
0 0 60px rgba(255,215,0,.9),
0 0 140px rgba(255,215,0,.6),
0 0 200px rgba(255,215,0,.35);

}

}

/* =========================================================
   میله‌های فلزی - شعاعی (angle + 90)
   ========================================================= */

.pegs{
position:absolute;
inset:0;
border-radius:50%;
pointer-events:none;
z-index:200;
}

.peg{
position:absolute;
width:14px;
height:26px;
background:linear-gradient(
180deg,
#fff5b8 0%,
#ffd700 30%,
#d4af37 70%,
#8b6914 100%
);
border-radius:3px 3px 50% 50%;
box-shadow:
0 2px 4px rgba(0,0,0,.6),
0 0 6px rgba(255,215,0,.6),
inset 0 1px 2px rgba(255,255,255,.7);
transform-origin:center center;
transform:rotate(calc(var(--peg-rotate, 0deg) + var(--peg-extra, 0deg)));
}

/* حالت ضربه - فشردگی به سمت مرکز */
.peg.hit{
animation:pegBounce .28s ease-out;
}

@keyframes pegBounce{

0%{
transform:translateY(0) rotate(calc(var(--peg-rotate, 0deg) + var(--peg-extra, 0deg)));
}

30%{
transform:translateY(6px) rotate(calc(var(--peg-rotate, 0deg) + var(--peg-extra, 0deg)));
box-shadow:
0 4px 8px rgba(0,0,0,.7),
0 0 16px rgba(255,215,0,1),
inset 0 1px 3px rgba(255,255,255,.9);
}

60%{
transform:translateY(-3px) rotate(calc(var(--peg-rotate, 0deg) + var(--peg-extra, 0deg)));
}

80%{
transform:translateY(1px) rotate(calc(var(--peg-rotate, 0deg) + var(--peg-extra, 0deg)));
}

100%{
transform:translateY(0) rotate(calc(var(--peg-rotate, 0deg) + var(--peg-extra, 0deg)));
}

}

/* میله برنده - به داخل فشرده + درخشان (بدون کج) */
.peg.peg-pressed{
transform:translateY(5px) rotate(var(--peg-rotate, 0deg));
box-shadow:
0 4px 8px rgba(0,0,0,.7),
0 0 20px rgba(255,215,0,1),
0 0 40px rgba(255,215,0,.7),
inset 0 1px 3px rgba(255,255,255,.9);
animation:winnerPulse 1.2s ease-in-out infinite alternate;
}

@keyframes winnerPulse{

from{
box-shadow:
0 4px 8px rgba(0,0,0,.7),
0 0 15px rgba(255,215,0,.8),
inset 0 1px 3px rgba(255,255,255,.9);
}

to{
box-shadow:
0 4px 8px rgba(0,0,0,.7),
0 0 30px rgba(255,215,0,1),
0 0 60px rgba(255,215,0,.7),
inset 0 1px 4px rgba(255,255,255,1);
}

}

@media (max-width:800px){

.peg{
width:10px;
height:20px;
}

}

/* =========================================================
   کاهش حرکت برای کاربران حساس
   ========================================================= */

@media (prefers-reduced-motion: reduce){

#wheel.winning,
#wheel.winning .led-dot,
.peg.hit,
.peg.peg-pressed{

animation:none !important;
transition:none !important;
}

}