:root{
--main-gold:#d4af37;
--color-L:#8da37e;
--color-M:#a6514d;
--color-R:#bc7c4f;
--color-P:#6d527a;
--glass:rgba(255,255,255,.92);
}

/* الخلفية */
body{
margin:0;
font-family:'IBM Plex Sans Arabic',sans-serif;
background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
url('../images/background.webp');
background-size:cover;
background-position:center;
background-attachment:scroll;
display:flex;
flex-direction:column;
align-items:center;
min-height:100vh;
}

/* الحاوية */
.container{
max-width:460px;
width:100%;
padding:20px;
text-align:center;
}

/* العنوان */
.page-header h1{
font-size:2rem;
background:linear-gradient(90deg,#b8860b,#fff,#b8860b);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:shine 3s linear infinite;
}

@keyframes shine{
to{background-position:200% center;}
}

/* دوران هادئ */
@keyframes idleRotation{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

/* العجلة */
.wheel-outer{
position:relative;
--size:min(82vw, 300px);
--ring:calc(var(--size) * 0.055);
width:var(--size);
height:var(--size);
margin:40px auto 18px auto;
display:block;
}

.pointer-container{
position:absolute;
top:calc(var(--size) * -0.06);
left:50%;
transform:translateX(-50%);
z-index:100;
}

.real-pointer{
width:calc(var(--size) * 0.085);
height:calc(var(--size) * 0.11);
background:linear-gradient(135deg,#f7ef8a,#d1b464,#7a5d0f);
clip-path:polygon(50% 100%,0% 0%,100% 0%);
filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));
}

.gold-ring{
position:absolute;
inset:0;
border-radius:50%;
background:linear-gradient(145deg,#f7ef8a,#d1b464,#7a5d0f);
padding:var(--ring);
box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.wheel{
position:relative;
width:100%;
height:100%;
border-radius:50%;
overflow:hidden;

background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.35) 0%, transparent 45%),
radial-gradient(circle at 70% 75%, rgba(0,0,0,.25) 0%, transparent 50%),
conic-gradient(
var(--color-L) 0deg 90deg,
var(--color-P) 90deg 180deg,
var(--color-R) 180deg 270deg,
var(--color-M) 270deg 360deg
);

animation: idleRotation 40s linear infinite;

transition: background 1s ease, filter .6s ease;

box-shadow:
0 25px 60px rgba(0,0,0,.35),
inset 0 10px 25px rgba(255,255,255,.25),
inset 0 -20px 35px rgba(0,0,0,.5);
}

/* طبقة لمعان */
.wheel::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
pointer-events:none;

background:
linear-gradient(
135deg,
rgba(255,255,255,0.35) 0%,
rgba(255,255,255,0.15) 25%,
transparent 45%,
rgba(0,0,0,0.18) 80%
);

mix-blend-mode:soft-light;
}

/* وميض العجلة عند التحميل */
.wheel.labels-ready{
animation:
wheelFlash .9s ease-out,
idleRotation 40s linear infinite;
}

/* تظليل الفئات غير المختارة */
.wheel.dimmed::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:
conic-gradient(
rgba(0,0,0,.55) 0deg var(--highlight-start),
transparent var(--highlight-start) var(--highlight-end),
rgba(0,0,0,.55) var(--highlight-end) 360deg
);
transition:.6s ease;
}

/* الحروف */
.label{
position:absolute;
top:50%;
left:50%;
color:#fff;
font-weight:900;
font-size:clamp(1.4rem,5vw,1.9rem);
text-shadow:0 2px 5px rgba(0,0,0,.4);
opacity:0;

transform:translate(-50%,-50%) scale(0) rotate(var(--off));

transition:
transform 1.1s cubic-bezier(.2,.8,.2,1),
opacity .5s ease;
}

/* انبثاق الحروف */
.wheel.labels-ready .label{
opacity:1;

transform:
translate(-50%,-50%)
scale(1)
rotate(var(--off))
translateY(calc(var(--size) * -0.32));

animation:letterPop 1s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes letterPop{
0%{transform:translate(-50%,-50%) scale(0) rotate(var(--off));opacity:0;}
70%{transform:translate(-50%,-50%) scale(1.15) rotate(var(--off)) translateY(calc(var(--size) * -0.32));}
100%{transform:translate(-50%,-50%) scale(1) rotate(var(--off)) translateY(calc(var(--size) * -0.32));opacity:1;}
}

/* وميض العجلة */
@keyframes wheelFlash{
0%{
box-shadow:
0 0 0 rgba(255,215,0,0),
inset 0 0 0 rgba(255,255,255,0);
}

40%{
box-shadow:
0 0 35px rgba(255,215,0,0.45),
inset 0 0 25px rgba(255,255,255,0.35);
}

100%{
box-shadow:
0 25px 60px rgba(0,0,0,.35),
inset 0 10px 25px rgba(255,255,255,.25),
inset 0 -20px 35px rgba(0,0,0,.5);
}
}

/* الكروت */
.quiz-card{
background:var(--glass);
backdrop-filter:blur(15px);
border-radius:30px;
padding:28px;
box-shadow:0 25px 50px rgba(0,0,0,.2);
margin-top:20px;
display:none;
border:1px solid rgba(255,255,255,.6);
}

.quiz-card.active{display:block;}

.opt-btn{
width:100%;
padding:20px 24px;
margin-bottom:16px;
border-radius:22px;
border:1px solid rgba(0,0,0,.06);
background:#f9f6f1;
font-weight:800;
font-size:18px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
transition:.25s ease;
box-shadow:0 6px 18px rgba(0,0,0,.05);
min-height:64px;
}

.opt-btn:hover{
transform:translateY(-2px);
background:#fff;
box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.buy-btn{
display:block;
padding:22px 24px;
border-radius:999px;
color:#fff;
text-decoration:none;
font-weight:900;
font-size:20px;
line-height:1.2;
margin-top:20px;
box-shadow:0 14px 32px rgba(0,0,0,.22);
transition:transform .15s ease, filter .15s ease;
}

.buy-btn:hover{
filter:brightness(1.04);
transform:translateY(-1px);
}

/* سهم السؤال */
@keyframes pulseArrow{
0%{opacity:0; transform:translateX(-50%) translateY(-4px);}
50%{opacity:1; transform:translateX(-50%) translateY(6px);}
100%{opacity:0; transform:translateX(-50%) translateY(-4px);}
}

.q1-arrow{
position:absolute;
top:-26px;
left:50%;
transform:translateX(-50%);
font-size:24px;
animation:pulseArrow 1.2s infinite;
}

/* الحرف المختار */
.label.active{
animation: glowLetter 1.2s ease-in-out infinite alternate;

text-shadow:
0 0 8px #fff,
0 0 18px #ffd700,
0 0 28px #ffd700;

scale:1.18;
}


@keyframes glowLetter{
from{
text-shadow:0 0 5px rgba(255,255,255,.6),
0 0 10px rgba(255,215,0,.4);
}
to{
text-shadow:0 0 15px rgba(255,255,255,1),
0 0 25px rgba(255,215,0,.9);
}
}

/* اهتزاز المؤشر */
@keyframes pointerTick{
0%{transform:translateX(-50%) rotate(0deg);}
25%{transform:translateX(-50%) rotate(-6deg);}
50%{transform:translateX(-50%) rotate(5deg);}
75%{transform:translateX(-50%) rotate(-3deg);}
100%{transform:translateX(-50%) rotate(0deg);}
}

.pointer-tick{
animation:pointerTick .35s ease-out;
}