:root{--primary:#6366f1;--accent:#f59e0b;--accent-hover:#d97706;--secondary:#8b5cf6;--secondary-hover:#7c3aed;--success:#10b981;--success-hover:#059669;--gray:#6b7280;--light-gray:#f3f4f6;--text:#1f2937;--bg-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--container-bg:#ffffff;--wheel-bg:radial-gradient(circle, #fefefe 60%, #e5e7eb 100%);--shadow:0 20px 50px rgba(0, 0, 0, 0.15);--shadow-inner:inset 0 0 40px rgba(0, 0, 0, 0.15);--ball-shadow:0 4px 12px rgba(0, 0, 0, 0.25);--result-shadow:0 5px 15px rgba(0, 0, 0, 0.2);--border-radius:24px;--transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1)}body.dark-mode{--primary:#a5b4fc;--text:#f9fafb;--success:#34d399;--container-bg:#0f172a;--wheel-bg:radial-gradient(circle, #1e293b 60%, #0f172a 100%);--shadow:0 20px 50px rgba(0, 0, 0, 0.6);--shadow-inner:inset 0 0 40px rgba(0, 0, 0, 0.6);--ball-shadow:0 4px 15px rgba(0, 0, 0, 0.7);--result-shadow:0 5px 20px rgba(0, 0, 0, 0.6);--bg-gradient:linear-gradient(135deg, #1e293b 0%, #334155 100%);--light-gray:#1e293b}.result-tray{min-height:80px;display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:25px;opacity:1}.spin-button{padding:0;position:absolute;box-sizing:content-box;inset:0;width:90px;height:90px;min-height:90px;min-width:90px;line-height:90px;border-radius:50%;box-shadow:0 8px 25px rgb(99 102 241 / .4);color:#fff;text-align:center;font-size:18px;font-weight:700;margin:auto;cursor:pointer;z-index:2;user-select:none;-webkit-tap-highlight-color:#fff0;outline:none;border:none;transition:var(--transition)}.container{max-width:100%;margin:auto;background:var(--container-bg);border-radius:0;padding:40px;overflow:hidden;position:relative;transition:background 0.6s ease}.theme-toggle{position:absolute;top:25px;right:25px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--primary);cursor:pointer;z-index:10;background:rgb(99 102 241 / .1);backdrop-filter:blur(10px);padding:10px 16px;border-radius:25px;border:2px solid rgb(99 102 241 / .2);box-shadow:0 4px 15px rgb(99 102 241 / .15);transition:var(--transition)}.theme-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(99 102 241 / .25)}body.dark-mode .theme-toggle{background:rgb(165 180 252 / .15);border-color:rgb(165 180 252 / .2);box-shadow:0 4px 15px rgb(165 180 252 / .2)}.theme-toggle span{transition:opacity 0.4s}.theme-toggle .sun,.theme-toggle .moon{font-size:20px;transition:opacity 0.4s}.theme-toggle .sun{opacity:1}.theme-toggle .moon{opacity:.3}body.dark-mode .theme-toggle .sun{opacity:.3}body.dark-mode .theme-toggle .moon{opacity:1}h1{font-size:36px;margin-bottom:12px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.spin-container p{color:var(--text);opacity:.75;margin-bottom:35px;font-size:17px;font-weight:400}.controls{display:grid;gap:25px;flex-wrap:wrap;justify-content:center;align-items:flex-end;margin-bottom:70px}.input-group{display:flex;flex-direction:column;gap:10px;align-items:center;margin:12px 0}.input-group label{min-height:28px;display:block}.input-group input[type="number"]{min-height:75px;height:75px}.draw-counter{font-size:20px;font-weight:700;color:var(--primary);margin:12px 0}label{font-size:16px;font-weight:600;color:var(--primary);min-height:24px;display:block;letter-spacing:.3px}input[type="number"]{padding:12px!important;width:50%!important;border:3px solid var(--primary);border-radius:16px;text-align:center;font-size:42px!important;font-weight:700;color:var(--primary);background:var(--light-gray);transition:var(--transition);box-shadow:0 4px 15px rgb(99 102 241 / .1);height:75px!important;min-height:75px;box-sizing:border-box}body.dark-mode input[type="number"]{background:#1e293b;border-color:var(--primary);color:#a5b4fc}input[type="number"]:focus{outline:none;border-color:var(--accent);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px rgb(245 158 11 / .3);overflow:hidden}input[type="number"]:hover{overflow:hidden;transform:translateY(-2px)}body.dark-mode input[type="number"]:focus{box-shadow:0 8px 25px rgb(245 158 11 / .4)}button{padding:20px 45px;border:none;border-radius:16px;font-size:18px;font-weight:700;cursor:pointer;text-shadow:none;box-shadow:0 10px 25px rgb(0 0 0 / .2);transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;box-sizing:border-box;letter-spacing:.5px}button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 15px 35px rgb(0 0 0 / .25)}button:active:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}#setup{background:linear-gradient(135deg,var(--success),#059669);color:#fff;padding:20px 70px;min-width:180px}#setup:hover:not(:disabled){background:linear-gradient(135deg,var(--success-hover),#047857)}body.dark-mode #setup{background:linear-gradient(135deg,var(--success),#059669)}#wheelContainer{position:relative;width:90vw;max-width:700px;aspect-ratio:1 / 1;margin:0;border-radius:50%;background:var(--wheel-bg);box-shadow:var(--shadow-inner),0 20px 40px rgb(0 0 0 / .25);overflow:hidden;transition:background 0.6s ease;contain:layout style paint;border:5px solid rgb(99 102 241 / .2)}body.dark-mode #wheelContainer{border-color:rgb(165 180 252 / .2)}.input-group-setup{margin:0 auto;text-align:center}.tool-wrapper{display:flex}@media (max-width:640px){.container{padding:0}#wheelContainer{width:83vw;margin:0 auto}.controls{margin-top:90px;min-height:300px}input[type="number"]{font-size:22px;padding:28px 45px}#setup{padding:20px 40px}.spin-info-container{display:grid!important;gap:25px!important;padding-bottom:12px}.controls button,.spin-extra-cta button{width:220px}#muteBtn{font-size:20px!important;line-height:15px!important;padding:8px!important}button{padding:20px 30px}.tool-wrapper{display:block!important;min-height:500px;padding-top:25px;padding-bottom:25px}.tool-wrapper{gap:0}.input-group-wrapper{display:flex!important;gap:12px!important;min-height:140px}.input-group-setup{margin:0 auto}.input-group{min-height:120px}}@media (max-width:769px){button#spin{width:160px!important}.input-group-wrapper{display:flex!important;gap:12px!important}button{padding:20px 30px;font-size:14px}.controls button,.spin-extra-cta button{width:160px!important}}.ball{position:absolute;border-radius:50%;width:35px;height:35px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;background:hsl(var(--hue),75%,55%);box-shadow:inset -4px -4px 8px rgb(0 0 0 / .25),inset 4px 4px 8px rgb(255 255 255 / .3),var(--ball-shadow);transition:opacity 0.6s,transform 0.6s;transform:translate(-50%,-50%);background-image:radial-gradient(circle at top left,rgb(255 255 255 / .3),transparent 45%),radial-gradient(circle at bottom right,rgb(0 0 0 / .15),transparent 45%);filter:drop-shadow(0 3px 6px rgb(0 0 0 / .35));contain:layout style}.ball::before{content:'';position:absolute;width:55%;height:55%;border-radius:50%;background:#fff;box-shadow:inset 0 0 12px rgb(0 0 0 / .15);z-index:1;top:8px;left:8px}.ball::after{content:attr(data-value);position:absolute;font-size:12px;font-weight:700;color:#000;text-align:center;z-index:2;pointer-events:none}.ball.removed{opacity:0;transform:translate(-50%,-50%) scale(.05);pointer-events:none}.ball.extra{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.input-group-wrapper{display:grid;gap:0}.result-ball{width:50px;height:50px;min-width:50px;min-height:50px;border-radius:50%;background:none;color:#000;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--result-shadow);transform:scale(0);opacity:0;transition:transform 0.7s cubic-bezier(.34,1.56,.64,1),opacity 0.7s ease;position:relative;overflow:hidden;flex-shrink:0}.result-ball.show{transform:scale(1);opacity:1}.result-ball.extra.show{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;width:55px;height:55px;min-width:55px;min-height:55px;font-size:26px;position:relative;top:-2px}.result-ball.match-wheel{position:relative;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;font-size:14px;font-weight:700;cursor:default;user-select:none;pointer-events:none;background:hsl(var(--hue),75%,55%);box-shadow:inset -4px -4px 8px rgb(0 0 0 / .25),inset 4px 4px 8px rgb(255 255 255 / .3),0 3px 6px rgb(0 0 0 / .35);background-image:radial-gradient(circle at top left,rgb(255 255 255 / .3),transparent 45%),radial-gradient(circle at bottom right,rgb(0 0 0 / .15),transparent 45%);filter:drop-shadow(0 3px 6px rgb(0 0 0 / .35));flex-shrink:0}.result-ball.match-wheel::before{content:'';position:absolute;width:55%;height:55%;border-radius:50%;background:#fff;box-shadow:inset 0 0 12px rgb(0 0 0 / .15);z-index:1;top:7px;left:8px}.result-ball.match-wheel::after{content:attr(data-value);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;text-shadow:0 1px 2px rgb(255 255 255 / .5);z-index:2;pointer-events:none}.confetti{position:absolute;pointer-events:none;width:100%;height:100%;top:45px;left:0;overflow:visible}.copy-container{margin:25px 0;text-align:center;min-height:55px}#copyBtn{visibility:hidden;opacity:0;transition:opacity 0.4s,visibility 0.4s;min-width:120px;min-height:50px}#copyBtn.visible{visibility:visible;opacity:1}.spin-stop-ctas{display:grid;align-items:center;justify-content:center;gap:25px;margin-bottom:30px}.spin-extra-cta{text-align:center}.spin-info-container{display:flex;align-items:center;justify-content:center}button#spin{width:220px}.volume-control{position:absolute;bottom:-12px;left:12px;transform:translateY(-50%);border-radius:12px;padding:12px;z-index:10;width:65px;height:65px;display:inline-block}.spin-button:disabled{opacity:.4;cursor:not-allowed;transform:scale(.92);box-shadow:none}#volumeSlider{width:65px;height:10px;border-radius:5px;background:#d1d5db;outline:none;-webkit-appearance:none;display:none}#volumeSlider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 2px 5px rgb(0 0 0 / .25)}#muteBtn{background:#fff0;color:#374151;font-size:42px;line-height:42px;cursor:pointer;margin-top:6px}.picker-popup{display:none;position:fixed;inset:0;background:rgb(0 0 0 / .75);z-index:1000;justify-content:center;align-items:center;backdrop-filter:blur(5px)}.picker-popup-content{background:var(--container-bg);padding:35px;border-radius:var(--border-radius);box-shadow:var(--shadow);max-width:550px;width:90%;text-align:center;color:var(--text);position:relative;overflow:hidden}.picker-popup-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:26px;font-weight:700;color:var(--text);cursor:pointer;line-height:1;width:45px;height:45px;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease}.picker-popup-close:hover{transform:scale(1.15) rotate(90deg)}.picker-popup h3{color:var(--primary)!important;margin:0 0 25px 0;font-size:28px;padding-bottom:28px;font-weight:700}.picker-popup .result-tray{justify-content:center;margin:12px auto}.picker-popup .result-tray#popupBonus{display:none}.picker-popup-copy{margin:35px auto;padding:14px 30px;background:linear-gradient(135deg,var(--success),#059669);color:#fff;border:none;border-radius:14px;cursor:pointer;font-weight:700;font-size:17px;width:auto;min-width:140px;min-height:52px;transition:var(--transition)}.picker-popup-copy:hover:not(:disabled){background:linear-gradient(135deg,var(--success-hover),#047857);transform:translateY(-3px);box-shadow:0 8px 20px rgb(16 185 129 / .3)}.picker-popup-copy:active:not(:disabled){transform:translateY(-1px)}.picker-popup-copy:disabled{opacity:.5;cursor:not-allowed}.picker-popup-wrapper{width:100%;justify-content:center;display:flex}.spin-button::before{content:"";position:absolute;inset:0;width:90px;height:90px;border-radius:50% 0 50% 50%;transform:rotate(-45deg);background:linear-gradient(135deg,var(--accent),#d97706);z-index:2}.spin-button::after{content:"SPIN";position:absolute;width:90px;height:90px;border-radius:50%;inset:0;z-index:3;-webkit-tap-highlight-color:#fff0;font-size:18px;font-weight:700;display:block;color:#fff;user-select:none;-webkit-text-stroke:.5px #fff;text-shadow:0 2px 6px rgb(0 0 0 / .4);letter-spacing:1px}.spin-button:hover:not(:disabled){box-shadow:0 10px 30px rgb(245 158 11 / .5);transform:scale(1.05)}.spin-button:active:not(:disabled){transform:scale(.95)}.picker-instructions-wrapper{text-align:center;margin:0 auto 8px;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;padding:0 20px;width:100%}.picker-instructions-wrapper h2{font-size:28px;margin-bottom:15px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.picker-instructions-wrapper p{opacity:.85;font-size:17px;line-height:1.8;margin-bottom:0}.picker-instructions-wrapper em{font-style:italic;opacity:.75;display:block;margin-top:10px;font-size:16px}.steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:55px;margin:35px auto}.step{display:flex;align-items:flex-start;gap:8px;padding:18px;border-radius:18px;background:rgb(99 102 241 / .05);border:2px solid rgb(99 102 241 / .1);box-shadow:0 4px 12px rgb(0 0 0 / .05);transition:var(--transition);text-align:left}.step:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgb(99 102 241 / .15);border-color:rgb(99 102 241 / .25)}body.dark-mode .step{background:rgb(165 180 252 / .08);border-color:rgb(165 180 252 / .15)}.step-number{display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;background:linear-gradient(135deg,var(--accent),#d97706);color:#fff;font-weight:700;border-radius:50%;flex-shrink:0;font-size:16px;box-shadow:0 5px 12px rgb(245 158 11 / .3)}.step p{margin:0;font-size:14px;opacity:1;line-height:1.6}.steps-grid-mobile{display:none}.text-primary-red{background:linear-gradient(135deg,var(--accent),#d97706);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}body.dark-mode .picker-numbers-title,body.dark-mode .picker-numbers-texte{color:#f9fafb}.picker-numbers-title{padding-top:55px;font-size:2.8rem;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.picker-numbers-texte{padding-bottom:55px;font-size:1.1rem}@media (max-width:768px){.steps-grid{grid-template-columns:1fr;margin-left:auto;margin-right:auto}.picker-instructions-wrapper h2{font-size:26px}.picker-instructions-wrapper p{font-size:16px}.step{padding:16px 20px}.step p{font-size:14px}}@media (max-width:480px){.picker-instructions-wrapper{padding:0 12px}.step{gap:12px;padding:14px 18px}.step-number{width:32px;height:32px;min-width:32px;min-height:32px;font-size:15px}.steps-grid{width:100%;margin-top:35px;display:none}.steps-grid-mobile{display:block!important;padding-bottom:55px}.picker-numbers-title{font-size:1.8rem;margin-top:35px}.picker-numbers-texte{padding-bottom:25px}.controls{margin-top:0;border:none!important;box-shadow:none!important}