/* ─── Spin trigger CTA (on the result screen and, for now, on Home) ───
   Exactly the PLAY_NOW button (.subs-btn2) — same markup, same classes,
   same sizing/responsive breakpoints — just gold instead of red. Reusing
   a button that's already proven to center correctly beats hand-rolling
   another one. */
.subs-btn2.spin-gold {
    background: #FFD700 !important;
    border-bottom: solid 5px #a67c00 !important;
    color: #161C4A !important;
}

/* ─── Spinner modal shell ─── */
.spinner-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
}

.spinner-modal-content {
    z-index: 99998;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    border: transparent !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.06) !important;
    padding: 0 !important;
    max-width: 520px;
    width: 90vw;
}

/* ─── Header band ─── */
.spinner-modal-header {
    background: linear-gradient(135deg, #161C4A 0%, #DA3832 100%);
    padding: 16px 50px 16px 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-modal-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
}

/* ─── Close button ─── */
.spinner-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    line-height: 1;
    padding: 0;
}

.spinner-close-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* ─── Wheel area ─── */
.spinner-wheel-wrapper {
    display: flex;
    justify-content: center;
    padding: 24px 0;
    position: relative;
}

.spinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 112%;
    height: 112%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218, 56, 50, 0.10) 0%, transparent 68%);
    pointer-events: none;
}

.spinner-container {
    text-align: center;
}

/* Fluid: matches the modal's own min(520px, 90vw) formula, minus room for
   the wrapper's side padding and the glow bleed, so the wheel never
   exceeds the modal's content width and gets clipped on narrow phones. */
.spinner,
.spinner-loading {
    width: min(400px, calc(90vw - 72px));
    height: min(400px, calc(90vw - 72px));
    max-width: 100%;
    position: relative;
    margin: 0 auto;
}

#spinner-canvas {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 2s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

/* ─── Loading state (shown while fetchSpinnerData is in-flight) ─── */
.spinner-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-loading-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 5px solid rgba(218, 56, 50, 0.14);
    border-top-color: #DA3832;
    animation: spinner-loading-spin 0.9s linear infinite;
}

@keyframes spinner-loading-spin {
    to { transform: rotate(360deg); }
}

/* ─── SPIN button ─── */
#spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    z-index: 1000;
    cursor: pointer;
    border: none;
    background: radial-gradient(circle at 38% 35%, #ffffff, #e0e0e0);
    box-shadow:
        0 0 0 4px #FFD700,
        0 0 0 8px rgba(255, 185, 0, 0.22),
        0 6px 22px rgba(0, 0, 0, 0.32);
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

#spin:not([disabled]) {
    animation: spin-idle-pulse 2.6s ease-in-out infinite;
}

@keyframes spin-idle-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px #FFD700,
            0 0 0 8px rgba(255, 185, 0, 0.22),
            0 6px 22px rgba(0, 0, 0, 0.32);
    }
    50% {
        box-shadow:
            0 0 0 4px #FFD700,
            0 0 0 14px rgba(255, 185, 0, 0.38),
            0 6px 28px rgba(0, 0, 0, 0.32);
    }
}

/* NunitoSans-Bold's @font-face is registered at font-weight: normal, so
   asking for font-weight: bold against that family name doesn't actually
   embolden anything — use a numeric weight against the fallback stack
   instead, same as PLAY_NOW's fw-bolder elsewhere in this app. */
#spin-label {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #161C4A;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Letter-spacing breaks Arabic ligatures/connections between letters.
   Use the project's Arabic heavy face instead of faux-bolding the regular
   one, and size up since Arabic script reads smaller at the same pixel size. */
[data-lang="AR"] #spin-label {
    letter-spacing: normal;
    font-family: 'OoredooArabic-Heavy', sans-serif;
    font-weight: bold;
    font-size: 16px;
}

#spin:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 13px 22px 13px;
    border-color: transparent transparent #FFD700 transparent;
    top: -20px;
    left: 23px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

@media (max-width: 380px) {
    #spin {
        width: 58px;
        height: 58px;
        margin: -29px 0 0 -29px;
    }

    #spin-label {
        font-size: 9px;
    }

    [data-lang="AR"] #spin-label {
        font-size: 13px;
    }

    #spin:before {
        border-width: 0 11px 18px 11px;
        top: -16px;
        left: 18px;
    }

    #inner-spin {
        width: 46px;
        height: 46px;
        margin: -23px 0 0 -23px;
    }
}

#inner-spin {
    width: 58px;
    height: 58px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    z-index: 999;
    background: radial-gradient(circle at 38% 35%, #fff, #d4d4d4);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

#spin:not([disabled]):active {
    transform: scale(0.93);
    box-shadow:
        0 0 0 4px #FFD700,
        0 2px 10px rgba(0, 0, 0, 0.3);
}

#spin:not([disabled]):active #inner-spin {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18);
}

#spin:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

/* ─── Result message ─── */
.spinner-result {
    margin: 8px 16px 20px;
    padding: 16px 24px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.75;
    word-spacing: 0.04em;
    animation: spinner-result-in 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes spinner-result-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.spinner-result--success {
    background: linear-gradient(135deg,
        rgba(218, 56, 50, 0.05) 0%,
        rgba(22, 28, 74, 0.06) 100%);
    border: 1px solid rgba(218, 56, 50, 0.16);
    color: #971318;
    font-weight: 600;
}

.spinner-result--error {
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.18);
    color: #b91c1c;
}

.spinner-result-icon {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 6px;
    line-height: 1;
}

/* ─── Floating "you have a spin!" badge on the home page ─── */
.spin-available-badge {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 9998;
    background: linear-gradient(135deg, #a67c00, #FFD700 30%, #FFF176 50%, #FFD700 70%, #a67c00);
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.3),
        0 8px 22px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spin-badge-pulse 2.4s ease-in-out infinite;
    transition: transform 150ms ease;
}

.spin-available-badge:hover {
    transform: scale(1.08);
}

.spin-available-badge-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: #FFD700 transparent transparent transparent;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
    z-index: 2;
}

.spin-available-badge-wheel {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        #DA3832 0deg 45deg,
        #E67E22 45deg 90deg,
        #F39C12 90deg 135deg,
        #27AE60 135deg 180deg,
        #161C4A 180deg 225deg,
        #8E44AD 225deg 270deg,
        #16A085 270deg 315deg,
        #971318 315deg 360deg
    );
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    animation: spin-badge-rotate 5s linear infinite;
}

.spin-available-badge-hub {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #d8d8d8);
    box-shadow: 0 0 0 2px #FFD700, 0 1px 3px rgba(0, 0, 0, 0.4);
}

@keyframes spin-badge-rotate {
    to { transform: rotate(360deg); }
}

@keyframes spin-badge-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(255, 215, 0, 0.3),
            0 8px 22px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 9px rgba(255, 215, 0, 0.16),
            0 8px 26px rgba(0, 0, 0, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spin-available-badge,
    .spin-available-badge-wheel,
    #spin:not([disabled]),
    .spinner-loading-ring,
    .spinner-result {
        animation: none;
    }
}

@media (max-width: 576px) {
    .spin-available-badge {
        width: 54px;
        height: 54px;
        bottom: 20px;
        left: 20px;
    }

    .spin-available-badge-wheel {
        width: 44px;
        height: 44px;
    }

    .spin-available-badge-hub {
        width: 13px;
        height: 13px;
    }
}