/*
 * YourLucky.click - Shared theme (home page, game, end page)
 * Colors, radii and shadows of the home page; the 5 choice colors of the "Help me choose!" wheel
 */
:root {
    --font: 'Varela Round', system-ui, sans-serif;

    --ink: #2b2838;
    --text: #5b5769;
    --muted: #8b879a;
    --line: #ece9f2;
    --bg: #ffffff;
    --bg-soft: #faf9fc;
    --surface-2: #f5f3f9;

    --violet: #a35bb8;
    --violet-mid: #c47ddd;
    --violet-soft: #f6eefa;
    --blue: #2a9bb0;
    --blue-mid: #9ecaed;
    --blue-soft: #ecf7fa;
    --pink: #c9578f;
    --pink-mid: #f3a2c7;
    --pink-soft: #fde9f2;
    --green: #1e7b45;
    --green-soft: #eefaf3;
    --red: #b3261e;
    --red-soft: #fdecea;
    --gradient: linear-gradient(135deg, #c47ddd, #9ecaed);

    /* Gold accents of the wheel */
    --gold: #e3b14f;
    --gold-dark: #b98427;
    --gold-soft: #fdf3dd;
    --gold-gradient: linear-gradient(135deg, #fff3c4, #e3b14f 30%, #fbe3a0 55%, #c38f2e 80%, #f2d27f);

    /* The 5 choice colors (wheel sectors, players, badges) */
    --pick-1: #c98ff3; --pick-1-soft: #f4e8fd;
    --pick-2: #7fd3e0; --pick-2-soft: #e2f6f9;
    --pick-3: #f3a2c7; --pick-3-soft: #fde9f2;
    --pick-4: #a5b1f4; --pick-4-soft: #eaedfd;
    --pick-5: #f0c062; --pick-5-soft: #fdf3dd;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 18px 50px rgba(83, 62, 120, 0.12), 0 2px 6px rgba(83, 62, 120, 0.05);
    --shadow-sm: 0 6px 18px rgba(83, 62, 120, 0.08), 0 1px 3px rgba(83, 62, 120, 0.05);
}

/* The gold wheel of chance (js/lucky_wheel.js) */
.lucky-wheel { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 22px rgba(83, 62, 120, 0.2)); }
.lucky-wheel.is-done .lucky-wheel__pointer { animation: lucky-wheel-nudge 0.5s ease-out 2; }
@keyframes lucky-wheel-nudge { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
    .lucky-wheel.is-done .lucky-wheel__pointer { animation: none; }
}