/* =====================================================
   ROOT WRAPPER
===================================================== */

.erw-wheel-app {

    --bg1: #0b1020;
    --bg2: #161b31;

    --gold1: #f6d365;
    --gold2: #fda085;

    --card: #121a30;

    --text: #f7f8fb;
    --muted: #b8bfd7;

    max-width: 1100px;
    margin: 30px auto;
    padding: 24px;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);

}

.erw-wheel-app * {

    box-sizing: border-box;

}


/* =====================================================
   PANEL LAYOUT
===================================================== */

.erw-panel {

    display: grid;
    grid-template-columns: minmax(320px,560px) 1fr;

    gap: 36px;
    align-items: center;

    padding: 32px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at top left,
            #29304f 0%,
            #14192d 45%,
            #0b1020 100%
        );

    box-shadow: 0 20px 60px rgba(0,0,0,.3);

}


/* =====================================================
   LEFT SIDE (WHEEL)
===================================================== */

.erw-left {

    display: flex;
    justify-content: center;

}

.erw-wheel-shell {

    position: relative;

    width: min(88vw,520px);
    aspect-ratio: 1 / 1;

}


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

.erw-wheel-frame {

    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 50%;
    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #ffda86,
            #d58b09
        );

    box-shadow:

        0 0 0 8px rgba(255,255,255,.06),
        0 20px 50px rgba(0,0,0,.45),
        inset 0 0 0 3px rgba(255,255,255,.35);

}


/* GOLD LIGHT RING */

.erw-wheel-frame::before {

    content: "";

    position: absolute;
    inset: 8px;

    border-radius: 50%;

    background:

        repeating-conic-gradient(
            from 0deg,
            #ffd76b 0deg 6deg,
            #8f5f00 6deg 12deg
        );

    opacity: .95;

    filter: saturate(1.1);

}


/* INNER DARK RING */

.erw-wheel-frame::after {

    content: "";

    position: absolute;
    inset: 30px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #1f2740 0%,
            #131a2d 70%,
            #0d1220 100%
        );

    box-shadow:

        inset 0 0 0 3px rgba(255,255,255,.12);

}


/* =====================================================
   WHEEL CANVAS
===================================================== */

.erw-wheel-canvas {

    position: absolute;

    inset: 44px;

    width: calc(100% - 88px);
    height: calc(100% - 88px);

    border-radius: 50%;

    z-index: 3;

    transition:

        transform 5.2s cubic-bezier(.15,.75,.12,1);

}


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

.erw-wheel-center {

    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 102px;
    height: 102px;

    border-radius: 50%;

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

    background:

        linear-gradient(
            145deg,
            #f7d572,
            #d18d10
        );

    z-index: 4;

    color: #2f2204;

    font-weight: 700;
    letter-spacing: 1px;

    box-shadow:

        0 6px 16px rgba(0,0,0,.35),
        inset 0 0 0 5px rgba(255,255,255,.25);

}



/* =====================================================
   POINTER (ΝΕΟ)
===================================================== */
.erw-pointer {
    position: absolute;
    left: 50%;
    top: -72px;           /* ← ελαφρώς πιο πάνω για καλύτερη εμφάνιση */
    transform: translateX(-50%);
    width: 145px;
    height: 145px;
    background: url("pointer.png") no-repeat center;
    background-size: contain;
    z-index: 5;
    pointer-events: none;
}




/* =====================================================
   RIGHT PANEL CONTENT
===================================================== */

.erw-right h3 {

    font-size: 34px;
    line-height: 1.1;

    margin: 10px 0 12px;

}

.erw-badge {

    display: inline-flex;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(255,255,255,.08);

    font-size: 13px;

    color: #ffe4a4;

    border: 1px solid rgba(255,255,255,.12);

}

.erw-intro {

    font-size: 17px;

    color: var(--muted);

    max-width: 420px;

}


/* =====================================================
   FEATURE BOXES
===================================================== */

.erw-features {

    display: flex;
    gap: 14px;

    flex-wrap: wrap;

    margin: 22px 0;

}

.erw-feature {

    min-width: 95px;

    padding: 14px 16px;

    border-radius: 18px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    display: flex;
    flex-direction: column;

    gap: 4px;

}

.erw-feature strong {

    font-size: 20px;

}

.erw-feature span {

    font-size: 13px;

    color: var(--muted);

}


/* =====================================================
   BUTTONS
===================================================== */

.erw-spin-btn,
.erw-cta-btn,
.erw-submit-btn,
.erw-secondary-btn {

    border: 0;

    border-radius: 16px;

    padding: 16px 22px;

    font-weight: 700;

    cursor: pointer;

    transition:

        .18s transform,
        .18s opacity;

}

.erw-spin-btn:hover,
.erw-cta-btn:hover,
.erw-submit-btn:hover,
.erw-secondary-btn:hover {

    transform: translateY(-1px);

}


/* PRIMARY BUTTON */

.erw-spin-btn {

    background:

        linear-gradient(
            145deg,
            #2fe18b,
            #18b463
        );

    color: #072916;

    min-width: 240px;

    font-size: 16px;

    box-shadow:

        0 10px 30px rgba(47,225,139,.25);

}


/* =====================================================
   NOTE TEXT
===================================================== */

.erw-note {

    margin-top: 14px;

    color: var(--muted);

    font-size: 13px;

    max-width: 420px;

}


/* =====================================================
   MODAL
===================================================== */

.erw-modal {

    position: fixed;
    inset: 0;

    display: flex;

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

    background: rgba(8,10,18,.72);

    padding: 20px;

    z-index: 9999;

}

.erw-modal[hidden] {

    display: none !important;

}


/* MODAL CARD */

.erw-modal-card {

    position: relative;

    width: min(100%,520px);

    border-radius: 24px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #f4f6fb
        );

    padding: 30px;

    box-shadow:

        0 24px 60px rgba(0,0,0,.28);

    color: #182038;

}


/* CLOSE BUTTON */

.erw-close-modal {

    position: absolute;

    right: 14px;
    top: 12px;

    border: 0;

    background: transparent;

    font-size: 32px;

    cursor: pointer;

    color: #63708c;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .erw-panel {

        grid-template-columns: 1fr;

        padding: 20px;

    }

    .erw-right {

        text-align: center;

    }

    .erw-intro,
    .erw-note {

        max-width: none;

    }

    .erw-features {

        justify-content: center;

    }

}