:root{--color-primary:#ff4f00;--color-secondary:#10b981;--color-danger:#ef4444;--color-warning:#f59e0b;--color-info:#3b82f6;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-slate-950:#020617;--color-white:#fff;--color-black:#000;--spacing-1:.25rem;--spacing-2:.5rem;--spacing-3:.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-32:8rem;--radius-sm:.125rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040}.spin-wheel{background-color:var(--color-white);min-block-size:100vh;padding-block-end:var(--spacing-32);animation:.8s cubic-bezier(.16,1,.3,1) forwards fade-in;overflow:hidden}.spin-wheel__hero{padding-top:var(--spacing-4);padding-bottom:var(--spacing-6)}@media (min-width:1024px){.spin-wheel__hero{padding-top:var(--spacing-8);padding-bottom:var(--spacing-12)}}.spin-wheel__header{justify-content:space-between;align-items:center;gap:var(--spacing-8);text-align:center;flex-direction:column;margin-block-end:var(--spacing-12);display:flex}@media (min-width:1024px){.spin-wheel__header{text-align:inherit;flex-direction:row}}.spin-wheel__header-text{inline-size:100%}.spin-wheel__title{color:var(--color-slate-900);margin-block-end:var(--spacing-6);font-size:3rem;font-weight:900;line-height:1.2}@media (min-width:1024px){.spin-wheel__title{font-size:5rem}}.spin-wheel__title-highlight{color:#0000;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right,var(--color-primary),#fb923c)}.spin-wheel__description{color:var(--color-slate-400);border-inline-start:4px solid var(--color-primary);max-inline-size:40rem;margin-block-end:var(--spacing-8);padding-inline-start:1rem;font-size:1.125rem;font-weight:700;line-height:1.6}.spin-wheel__back-btn{border-radius:var(--radius-3xl);background-color:var(--color-white);border:2px solid var(--color-slate-100);block-size:4rem;inline-size:4rem;color:var(--color-slate-400);box-shadow:var(--shadow-xl);justify-content:center;align-items:center;transition:all .3s;display:flex}.spin-wheel__back-btn:hover{color:var(--color-primary);border-color:#ffedd5}.spin-wheel__back-btn:hover svg{transform:translate(.25rem)}.spin-wheel__back-btn:active{transform:scale(.9)}.spin-wheel__back-btn svg{transition:transform .3s}.spin-wheel__grid{justify-content:center;align-items:center;gap:var(--spacing-10);flex-direction:column;display:flex}@media (min-width:1024px){.spin-wheel__grid{gap:var(--spacing-16);flex-direction:row}}.spin-wheel__wheel-section{inline-size:100%;max-inline-size:450px;position:relative}@media (min-width:768px){.spin-wheel__wheel-section{max-inline-size:650px}}.spin-wheel__wheel-section{justify-content:center;align-items:center;display:flex}.spin-wheel__pointer{z-index:30;filter:drop-shadow(0 10px 8px #0000000a);position:absolute;inset-block-start:-25px;inset-inline-start:50%;transform:translate(-50%)}.spin-wheel__pointer-inner{background-color:var(--color-white);block-size:4rem;inline-size:3rem;box-shadow:var(--shadow-2xl);border:4px solid var(--color-slate-900);border-start-start-radius:var(--radius-2xl);border-start-end-radius:var(--radius-2xl);border-end-end-radius:var(--radius-full);border-end-start-radius:var(--radius-full);justify-content:center;align-items:center;display:flex;position:relative}.spin-wheel__pointer-dot{border-radius:var(--radius-full);background-color:#f97316;block-size:.75rem;inline-size:.75rem;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse;box-shadow:0 0 10px #f9731699}.spin-wheel__glow{border-radius:var(--radius-full);filter:blur(3rem);z-index:-10;opacity:.6;background-image:linear-gradient(to top right,#ffedd54d,#dbeafe4d);position:absolute;inset:-2.5rem}.spin-wheel__wheel-outer{aspect-ratio:1;border-radius:var(--radius-full);background-color:var(--color-slate-900);inline-size:100%;box-shadow:var(--shadow-2xl);border:4px solid var(--color-slate-100);outline:4px solid var(--color-white);position:relative}.spin-wheel__wheel-inner{border-radius:var(--radius-full);block-size:100%;inline-size:100%;transition:transform 5s cubic-bezier(.15,0,.15,1);position:relative;overflow:hidden}.spin-wheel__slice{transform-origin:50%;border-inline-end:1px solid #ffffff14;block-size:100%;inline-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.spin-wheel__labels{pointer-events:none;position:absolute;inset:0}.spin-wheel__label-container{transform-origin:0;justify-content:flex-end;align-items:center;block-size:2rem;inline-size:46%;padding-inline-end:.75rem;display:flex;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translateY(-50%)}.spin-wheel__label-text{color:var(--color-white);white-space:nowrap;text-overflow:ellipsis;text-align:end;text-shadow:0 1px 2px #00000080;max-inline-size:100%;font-family:Cairo,sans-serif;font-size:.5rem;font-weight:900;line-height:normal;display:block;overflow:hidden}@media (min-width:480px){.spin-wheel__label-text{font-size:.625rem}}@media (min-width:768px){.spin-wheel__label-text{font-size:.75rem}}.spin-wheel__pivot{z-index:20;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.spin-wheel__spin-btn{border-radius:var(--radius-full);background-color:var(--color-white);border:8px solid var(--color-slate-900);flex-direction:column;justify-content:center;align-items:center;block-size:6rem;inline-size:6rem;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 15px 40px #00000040}@media (min-width:768px){.spin-wheel__spin-btn{block-size:8rem;inline-size:8rem}}.spin-wheel__spin-btn:active{transform:scale(.95)}.spin-wheel__spin-btn:disabled{opacity:.95}.spin-wheel__spin-btn-shimmer{background-image:linear-gradient(to bottom right,var(--color-white),var(--color-slate-100));position:absolute;inset:0}.spin-wheel__spin-btn-icon{z-index:10;color:var(--color-primary);transition:all .7s;position:relative}.spin-wheel__spin-btn-icon--spinning{animation:1s linear infinite spin;transform:scale(.9)}.spin-wheel__spin-btn-icon--idle:hover{transform:scale(1.1)}.spin-wheel__spin-btn-text{z-index:10;color:var(--color-slate-900);text-transform:uppercase;letter-spacing:.1em;margin-block-start:.25rem;font-size:9px;font-weight:900;position:relative}.spin-wheel__winner-section{flex:1;inline-size:100%}@media (min-width:1024px){.spin-wheel__winner-section{max-inline-size:28rem}}.spin-wheel__card{background-color:var(--color-white);border:1px solid var(--color-slate-100);border-radius:3rem;padding:2rem;animation:.7s forwards zoom-in;position:relative;overflow:hidden;box-shadow:0 40px 100px -30px #00000026}@media (min-width:768px){.spin-wheel__card{padding:3rem}}.spin-wheel__card-header{align-items:center;gap:var(--spacing-5);margin-block-end:var(--spacing-8);display:flex}.spin-wheel__trophy-box{border-radius:var(--radius-2xl);block-size:4rem;inline-size:4rem;color:var(--color-primary);box-shadow:var(--shadow-sm);background-color:#fff7ed;justify-content:center;align-items:center;display:flex}.spin-wheel__congrats-text{color:var(--color-slate-400);text-transform:uppercase;letter-spacing:.1em;font-size:.625rem;font-weight:900;display:block}.spin-wheel__winner-name-title{color:var(--color-slate-900);margin-block-start:.25rem;font-size:1.5rem;font-weight:900;line-height:1}.spin-wheel__image-box{border-radius:var(--radius-2xl);aspect-ratio:16/9;box-shadow:var(--shadow-sm);border:4px solid var(--color-white);outline:1px solid var(--color-slate-100);margin-block-end:var(--spacing-8);position:relative;overflow:hidden}.spin-wheel__image-box-overlay{background-image:linear-gradient(#0000,#0000,#000c);position:absolute;inset:0}.spin-wheel__image-box-name{color:var(--color-white);white-space:nowrap;text-overflow:ellipsis;max-inline-size:90%;padding-inline-end:.5rem;font-size:1.5rem;font-weight:900;position:absolute;inset-block-end:1rem;inset-inline-end:1.5rem;overflow:hidden}.spin-wheel__discover-btn{inline-size:100%;padding:var(--spacing-5);background-color:var(--color-slate-900);color:var(--color-white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);justify-content:center;align-items:center;gap:var(--spacing-3);margin-block-end:var(--spacing-4);font-size:1.125rem;font-weight:900;transition:all .3s;display:flex}.spin-wheel__discover-btn:hover{background-color:var(--color-black)}.spin-wheel__discover-btn:active{transform:scale(.95)}.spin-wheel__reset-btn{inline-size:100%;padding:var(--spacing-4);background-color:var(--color-slate-50);color:var(--color-slate-500);border-radius:var(--radius-xl);justify-content:center;align-items:center;gap:var(--spacing-2);font-size:.875rem;font-weight:700;transition:all .3s;display:flex}.spin-wheel__reset-btn:hover{background-color:var(--color-slate-100)}.spin-wheel__empty-card{border:2px dashed var(--color-slate-200);text-align:center;background-color:#f8fafc80;border-radius:3rem;flex-direction:column;justify-content:center;align-items:center;min-block-size:400px;padding:3rem;display:flex}.spin-wheel__empty-icon{background-color:var(--color-white);border-radius:var(--radius-full);block-size:5rem;inline-size:5rem;box-shadow:var(--shadow-sm);color:var(--color-slate-300);justify-content:center;align-items:center;margin-block-end:var(--spacing-6);display:flex}.spin-wheel__empty-title{color:var(--color-slate-800);margin-block-end:var(--spacing-3);font-size:1.5rem;font-weight:900}.spin-wheel__empty-desc{color:var(--color-slate-400);max-inline-size:200px;font-size:.875rem;font-weight:700;line-height:1.625}.spin-wheel__loading{background-color:var(--color-white);min-block-size:100vh;padding:var(--spacing-4);flex-direction:column;justify-content:center;align-items:center;display:flex}.spin-wheel__loading-container{inline-size:calc(var(--spacing-32)*2);block-size:calc(var(--spacing-32)*2);justify-content:center;align-items:center;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse;display:flex;position:relative}@media (min-width:768px){.spin-wheel__loading-container{block-size:20rem;inline-size:20rem}}.spin-wheel__loading-ring-1{border:4px dashed var(--color-slate-200);border-radius:var(--radius-full);animation:45s linear infinite spin;position:absolute;inset:0}.spin-wheel__loading-ring-2{border-radius:var(--radius-full);border:4px dashed #ffedd5;animation:10s linear infinite reverse-spin;position:absolute;inset:2rem}.spin-wheel__loading-box{z-index:10;align-items:center;gap:var(--spacing-6);flex-direction:column;display:flex;position:relative}.spin-wheel__loading-icon{background-color:var(--color-slate-950);block-size:6rem;inline-size:6rem;color:var(--color-primary);border:1px solid #ffffff0d;border-radius:3rem;justify-content:center;align-items:center;display:flex;box-shadow:0 25px 50px -12px #00000080}@media (min-width:768px){.spin-wheel__loading-icon{block-size:8rem;inline-size:8rem}}.spin-wheel__loading-icon svg{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.spin-wheel__loading-text{text-align:center}.spin-wheel__loading-title{color:var(--color-slate-900);margin-block-end:var(--spacing-2);font-size:1.5rem;font-weight:900}@media (min-width:768px){.spin-wheel__loading-title{font-size:1.875rem}}.spin-wheel__loading-desc{color:var(--color-slate-400);letter-spacing:-.025em;font-size:.875rem;font-weight:700}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes reverse-spin{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}