/* ==========================================================================
   Alzar Wheel v8.0 — the ONE wheel component (home banner, game page, modals)
   + the shared "gate" sheet, CTA pill and modal chrome.

   EVERYTHING is a CSS variable. Change a colour from the dashboard
   (Appearance ← تصميم الزر) or override a variable in a child theme:

     --alzw-c1 … --alzw-c6   the six slice colours (cycled)
     --alzw-rim              the outer ring            --alzw-pointer  the pointer
     --alzw-bulb-a/-b        the two blinking bulb colours
     --alzw-hub              the centre button         --alzw-size     wheel diameter
   Brand tokens (--az-navy, --az-green, --az-gold …) come from the theme and
   are used as the defaults, so the wheel always follows the site palette.
   ========================================================================== */
.alzw,.alzw-gate,.alzw-cta,.alzw-modal{
        --alzw-navy:var(--az-navy,#222D65);--alzw-navy-deep:var(--az-navy-deep,#161D47);
        --alzw-green:var(--az-green,#1A994A);--alzw-green-deep:var(--az-green-deep,#137A3A);
        --alzw-gold:var(--az-gold,#F2B33D);--alzw-mint:var(--az-mint,#E6F4EB);--alzw-ink:var(--az-ink,#141A3D);
        --alzw-muted:var(--az-muted,#5A6187);--alzw-line:var(--az-line,#E3E6F0);--alzw-sale:var(--az-sale,#D93A3A);
}
.alzw{
        --alzw-s1:var(--alzw-c1,var(--alzw-navy));--alzw-s2:var(--alzw-c2,var(--alzw-green));--alzw-s3:var(--alzw-c3,var(--alzw-gold));
        --alzw-s4:var(--alzw-c4,var(--alzw-green-deep));--alzw-s5:var(--alzw-c5,#2B3A8C);--alzw-s6:var(--alzw-c6,#2FB35F);
        --alzw-rimc:var(--alzw-rim,var(--alzw-navy-deep));--alzw-ptr:var(--alzw-pointer,var(--alzw-gold));
        --alzw-ba:var(--alzw-bulb-a,var(--alzw-gold));--alzw-bb:var(--alzw-bulb-b,#fff);--alzw-hubc:var(--alzw-hub,#fff);
        position:relative;display:block;width:var(--alzw-size,min(300px,78vw));aspect-ratio:1;margin-inline:auto;
        -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;contain:layout;
}
.alzw *{box-sizing:border-box}
.alzw__rim{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 22px 26px rgba(20,26,61,.35))}
.alzw__rim-bg{fill:var(--alzw-rimc);stroke:color-mix(in srgb,var(--alzw-rimc) 60%,#fff);stroke-width:1}
.alzw__bulb{fill:var(--alzw-ba)}
.alzw__bulb.is-b{fill:var(--alzw-bb)}
.alzw:not(.is-offscreen) .alzw__bulb.is-a{animation:alzw-blink 1.3s steps(1) infinite}
.alzw:not(.is-offscreen) .alzw__bulb.is-b{animation:alzw-blink 1.3s steps(1) infinite -.65s}
.alzw[data-spin="spin"] .alzw__bulb,.alzw[data-spin="auto"] .alzw__bulb{animation-duration:.42s}
@keyframes alzw-blink{0%{opacity:1}50%{opacity:.28}}
.alzw__rotor{position:absolute;inset:4.55%;border-radius:50%;will-change:auto;transform:rotate(0)}
.alzw__rotor.is-spinning{will-change:transform}
.alzw__disc{display:block;width:100%;height:100%;border-radius:50%;overflow:visible}
.alzw__slice{stroke:rgba(255,255,255,.92);stroke-width:1.1;transition:filter .3s}
.alzw__s1{fill:var(--alzw-s1)}.alzw__s2{fill:var(--alzw-s2)}.alzw__s3{fill:var(--alzw-s3)}
.alzw__s4{fill:var(--alzw-s4)}.alzw__s5{fill:var(--alzw-s5)}.alzw__s6{fill:var(--alzw-s6)}
.alzw__peg{fill:#fff;stroke:rgba(20,26,61,.35);stroke-width:.5}
.alzw__slice.is-win{filter:brightness(1.18) saturate(1.1);stroke:#fff;stroke-width:2.2}
.alzw__gift .alzw__gi{transform-box:fill-box;transform-origin:center}
.alzw__gift.is-win .alzw__gi{animation:alzw-pop .55s cubic-bezier(.34,1.56,.64,1) infinite alternate}
@keyframes alzw-pop{from{transform:scale(1)}to{transform:scale(1.28)}}
/* a static glossy highlight — it does NOT rotate, so the wheel reads as a real glossy object */
.alzw__shine{position:absolute;inset:4.55%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.34),rgba(255,255,255,0) 42%),radial-gradient(circle,rgba(0,0,0,0) 62%,rgba(0,0,0,.22) 100%)}
/* pointer + flapper (the flapper is kicked by every slice that passes) */
.alzw__pointer{position:absolute;top:-5.5%;left:50%;width:12.5%;aspect-ratio:40/54;transform:translateX(-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.alzw__flap{display:block;width:100%;height:100%;transform-origin:50% 33%;overflow:visible}
.alzw__flap path{fill:var(--alzw-ptr);stroke:var(--alzw-navy-deep);stroke-width:2.4;stroke-linejoin:round}
.alzw__flap circle{fill:#fff;stroke:var(--alzw-navy-deep);stroke-width:1.6}
/* centre hub = the brand mark, and it IS the play button */
.alzw__hub{position:absolute;top:50%;left:50%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--alzw-hubc);box-shadow:0 0 0 .35rem var(--alzw-gold),0 0 0 .5rem rgba(255,255,255,.55),0 10px 22px rgba(0,0,0,.4);transition:transform .18s}
.alzw__hub img,.alzw__hub svg{display:block;width:72%;height:72%;object-fit:contain;pointer-events:none}
.alzw__hub:hover{transform:translate(-50%,-50%) scale(1.06)}
.alzw__hub:active{transform:translate(-50%,-50%) scale(.95)}
.alzw__hub:focus-visible{outline:3px solid var(--alzw-navy);outline-offset:5px}
.alzw__hub:disabled{cursor:default}
.alzw__hub::before{content:"";position:absolute;inset:-12%;border-radius:50%;border:2px solid var(--alzw-gold);opacity:0;pointer-events:none}
.alzw[data-spin="idle"]:not(.is-offscreen) .alzw__hub::before,.alzw:not([data-spin]):not(.is-offscreen) .alzw__hub::before{animation:alzw-ping 2.2s ease-out infinite}
@keyframes alzw-ping{0%{opacity:.85;transform:scale(.92)}100%{opacity:0;transform:scale(1.5)}}
/* the gift announced at the pointer */
.alzw__pick{position:absolute;top:-3.3rem;left:50%;transform:translateX(-50%);z-index:5;max-width:min(300px,86vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff;color:var(--alzw-navy);font-weight:800;font-size:.95rem;line-height:1.4;padding:.34rem .9rem;border-radius:999px;border:2px solid var(--alzw-gold);box-shadow:0 10px 24px -10px rgba(20,26,61,.55)}
.alzw__pick.is-in{animation:alzw-pick .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes alzw-pick{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.85)}to{opacity:1;transform:translateX(-50%)}}
/* sound button */
.alzw__snd{position:absolute;inset-inline-end:-.4rem;bottom:-.9rem;z-index:6;display:inline-flex;align-items:center;gap:.4rem;height:2.5rem;min-width:2.5rem;padding:0 .7rem;border:1.5px solid var(--alzw-line);border-radius:999px;background:#fff;color:var(--alzw-navy);font-family:inherit;font-weight:700;font-size:.78rem;line-height:1;cursor:pointer;box-shadow:0 8px 20px -8px rgba(20,26,61,.5);transition:transform .15s}
.alzw__snd[hidden]{display:none!important}
.alzw__snd:hover{transform:translateY(-2px)}
.alzw__snd:focus-visible{outline:3px solid var(--alzw-navy);outline-offset:3px}
.alzw__snd-ico{display:grid;place-items:center}
.alzw__snd-x{opacity:0}
.alzw__snd[data-sound="off"] .alzw__snd-w{opacity:0}
.alzw__snd[data-sound="off"] .alzw__snd-x{opacity:1}
.alzw__snd[data-sound="off"]{color:var(--alzw-muted)}
.alzw__snd[data-sound="locked"]{animation:alzw-nudge 2.4s ease-in-out infinite;border-color:var(--alzw-gold)}
.alzw__snd[data-sound="on"] .alzw__snd-tip{display:none}
.alzw__snd[data-sound="off"] .alzw__snd-tip{display:none}
@keyframes alzw-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.alzw-stage{padding-top:3.4rem;padding-bottom:1.4rem;position:relative}
.alzw__confetti{position:absolute}

/* ---------- Shared CTA pill ---------- */
.alzw-cta{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:56px;padding:0 1.9rem;border:0;border-radius:999px;background:var(--alzw-gold);color:var(--alzw-navy-deep);font-family:inherit;font-weight:800;font-size:1.12rem;line-height:1.2;cursor:pointer;text-decoration:none;box-shadow:0 18px 38px -16px rgba(242,179,61,.9);transition:transform .2s,background .2s,box-shadow .2s;animation:alzw-cta 2.6s ease-in-out 6}
.alzw-cta:hover{background:color-mix(in srgb,var(--alzw-gold) 82%,#fff);transform:translateY(-2px)}
.alzw-cta:active{transform:scale(.98)}
.alzw-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.alzw-cta svg{flex-shrink:0}
.alzw-cta--green{background:var(--alzw-green);color:#fff;box-shadow:0 16px 34px -14px rgba(26,153,74,.75);animation:none}
.alzw-cta--green:hover{background:var(--alzw-green-deep)}
@keyframes alzw-cta{0%,100%{box-shadow:0 18px 38px -16px rgba(242,179,61,.9),0 0 0 0 rgba(242,179,61,.45)}60%{box-shadow:0 18px 38px -16px rgba(242,179,61,.9),0 0 0 12px rgba(242,179,61,0)}}

/* ---------- Gate: the "register to see your gift" sheet (v8.1).
   It now lands ON the game itself: a dimmed scrim covers the wheel stage and
   the sheet is centered over it. The visitor is looking at the wheel when it
   stops, so the message appears exactly where their eyes are (this is what was
   broken on phones, where the old inline position landed above the fold). ---------- */
.alzw-gate-layer{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:clamp(.6rem,2.5vw,1.2rem);background:rgba(16,20,48,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:alzw-fade .3s ease-out}
.alzw-gate-layer[hidden]{display:none!important}
.alzw-gate-layer .alzw-gate{width:min(400px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.alzw-gate-layer .alzw-gate .alzw-cta{width:100%}
@keyframes alzw-fade{from{opacity:0}to{opacity:1}}
.alzw-gate{display:grid;gap:.5rem;justify-items:start;padding:1.1rem 1.15rem;border-radius:24px;background:linear-gradient(165deg,#FFF8E8,#fff 62%);border:2px dashed var(--alzw-gold);color:var(--alzw-ink);box-shadow:0 22px 44px -22px rgba(0,0,0,.6);animation:alzw-gate .55s cubic-bezier(.34,1.56,.64,1)}
.alzw-gate[hidden]{display:none!important}
@keyframes alzw-gate{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.alzw-gate__row{display:flex;align-items:center;gap:.8rem}
.alzw-gate__gift{flex-shrink:0;line-height:0;animation:alzw-bounce 1s cubic-bezier(.34,1.56,.64,1) .15s both}
@keyframes alzw-bounce{0%{transform:scale(0) rotate(-14deg)}60%{transform:scale(1.18) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.alzw-gate__gift svg{filter:drop-shadow(0 8px 12px rgba(20,26,61,.3))}
.alzw-gate__title{margin:0;font-size:1.15rem;font-weight:800;line-height:1.35;color:var(--alzw-navy)}
.alzw-gate__sub{margin:0;color:var(--alzw-muted);line-height:1.7;font-size:.92rem}
.alzw-gate__btns{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;margin-top:.2rem}
.alzw-gate .alzw-cta{min-height:50px;font-size:1.02rem;padding:0 1.5rem;animation:none}
.alzw-link{background:none;border:0;padding:.35rem;color:var(--alzw-navy);font-family:inherit;font-weight:700;font-size:.9rem;line-height:1.3;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.alzw-link:hover{color:var(--alzw-green-deep)}
.alzw-link:focus-visible{outline:3px solid var(--alzw-navy);outline-offset:2px;border-radius:6px}

/* ---------- Trust chips ---------- */
.alzw-trust{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem .5rem}
.alzw-trust li{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.82rem;font-weight:700;line-height:1.2;border:1px solid rgba(255,255,255,.22)}
.alzw-trust li::before{content:"✓";color:var(--alzw-gold);font-weight:800}

/* ---------- Modal chrome (registration + game card) ---------- */
body.az-lock{overflow:hidden}
.alzw-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:1rem;opacity:0;transition:opacity .25s}
.alzw-modal.is-open{opacity:1}
.alzw-modal[hidden]{display:none!important}
.alzw-modal__scrim{position:absolute;inset:0;background:rgba(16,20,48,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.alzw-modal__panel{position:relative;width:min(440px,94vw);max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:28px;padding:1.5rem 1.25rem 1.5rem;box-shadow:0 30px 70px -22px rgba(20,26,61,.6);transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.17,.67,.12,.99);text-align:center;color:var(--alzw-ink)}
.alzw-modal.is-open .alzw-modal__panel{transform:none}
.alzw-modal__x{position:absolute;top:.7rem;left:.7rem;width:40px;height:40px;border:1.5px solid var(--alzw-line);border-radius:12px;background:var(--az-mist,#EEF0F8);color:var(--alzw-green-deep);font-size:1rem;font-weight:800;cursor:pointer;z-index:2}
.alzw-modal__x:focus-visible{outline:3px solid var(--alzw-green);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
        .alzw *,.alzw-gate,.alzw-gate *,.alzw-cta,.alzw-modal,.alzw-modal *{animation:none!important;transition:none!important}
}
.alzw.no-lights .alzw__bulb{display:none}