body{margin:0;padding:0}.spin-the-wheel-wrapper{background-color:#f2e9fd;justify-content:center;align-items:center;width:100%;height:100vh;font-family:Arial;display:flex}.spin-the-wheel-container{transform-origin:50%;background-image:url(/spin-the-wheel/images/spin-the-wheel/spin-the-wheel-backgorund.png);background-size:cover;border-radius:clamp(15px,2vw,30px);flex-flow:wrap;justify-content:center;align-items:flex-start;gap:clamp(15px,2vw,30px);width:fit-content;padding:clamp(20px,2vw,30px);display:flex;transform:scale(.9);box-shadow:0 clamp(5px,1vw,10px) clamp(10px,2vw,20px) #0000002f}.spin-the-wheel-wheel{border-radius:50%;width:clamp(250px,50vw,500px);height:clamp(250px,50vw,500px);transition:transform 4s cubic-bezier(.17,.67,.2,1);position:relative;overflow:hidden;box-shadow:inset 0 0 clamp(5px,1vw,10px) #0003,0 0 clamp(10px,2vw,20px) #00000026}.spin-the-wheel-wheel:before{content:"";-webkit-mask-composite:xor;pointer-events:none;z-index:4;background:linear-gradient(135deg,gold,#ff8c00,#ff3b30,#b22222);border-radius:50%;padding:clamp(10px,4vw,20px);position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.spin-the-wheel-wheel-center-dot{z-index:5;background-color:#ff503c;border-radius:50%;width:clamp(20px,4vw,40px);height:clamp(20px,4vw,40px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spin-the-wheel-wheel-item{text-align:center;color:#fff;text-shadow:1px 1px 2px #000;transform-origin:50%;white-space:nowrap;text-overflow:ellipsis;width:120px;margin-left:-60px;font-size:clamp(14px,2vw,18px);font-weight:700;position:absolute;top:50%;left:50%;overflow:hidden}.spin-the-wheel-arrow{width:clamp(80px,15vw,150px);height:clamp(80px,15vw,150px);position:absolute;top:clamp(-42px,-4vw,-20px);left:50%;transform:translate(-50%)}.spin-the-wheel-spin-button{color:#fff;cursor:pointer;background-color:#ff503c;border:none;border-radius:50%;padding:clamp(10px,2vw,15px) clamp(40px,8vw,70px);font-size:clamp(16px,3vw,24px);font-weight:700;position:absolute;bottom:clamp(0px,2vw,0px);left:50%;transform:translate(-50%);box-shadow:0 clamp(-5px,-1vw,-10px) clamp(4px,1.8vw,8px) clamp(-.5px,-.5vw,-2px) #00000059}.spin-the-wheel-spin-button:hover{background-color:#fd422d}.spin-the-wheel-wheel-container{flex:clamp(250px,50vw,500px);justify-content:center;align-items:center;display:flex;position:relative}.spin-the-wheel-add-names-container{background-color:#fff;border:clamp(1px,.3vw,2px) solid #00000014;border-radius:clamp(15px,2vw,20px);flex-direction:column;flex:clamp(220px,35vw,300px);row-gap:clamp(10px,2vw,15px);min-width:180px;padding:clamp(15px,2vw,25px);transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 clamp(4px,1vw,10px) clamp(10px,2vw,20px) #0000001f}.spin-the-wheel-add-names-textarea{resize:vertical;box-sizing:border-box;resize:none;border:clamp(1px,.3vw,2px) solid #c8c8c8;border-radius:clamp(10px,1.5vw,15px);outline:none;width:100%;height:clamp(120px,20vw,180px);padding:clamp(10px,2vw,15px);font-size:clamp(14px,2.5vw,18px);transition:box-shadow .2s,border-color .2s}.spin-theWheel-add-names-header{text-align:center;color:#ff503c;margin-bottom:clamp(10px,1.5vw,15px);font-size:clamp(20px,3vw,26px);font-weight:700;position:relative}.spin-theWheel-add-names-header:after{content:"";background:linear-gradient(90deg,#ff503c,#fd422d);border-radius:clamp(1px,.2vw,2px);width:50%;height:clamp(3px,.5vw,5px);margin:clamp(5px,1vw,10px) auto 0;display:block}.spin-the-wheel-add-names-button{color:#fff;cursor:pointer;background-color:#ff503c;border:none;border-radius:clamp(10px,1.5vw,15px);align-self:center;padding:clamp(10px,2vw,15px) clamp(20px,4vw,40px);font-size:clamp(16px,3vw,22px);font-weight:700;box-shadow:0 clamp(-3px,-.6vw,-6px) clamp(3px,.6vw,6px) clamp(-.5px,-.5vw,-2px) #00000059}.spin-the-wheel-add-names-button:hover{background-color:#fd422d}.spin-the-wheel-result-container{text-align:center;background-color:#fffffff2;border-radius:clamp(15px,2vw,30px);padding:clamp(20px,3vw,30px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 clamp(5px,1vw,10px) clamp(10px,2vw,20px) #00000040}.spin-the-wheel-result-header{color:#ff503c;margin-bottom:clamp(10px,1.5vw,15px);font-size:clamp(22px,3vw,28px);font-weight:700}.spin-the-wheel-result-name{color:#323232;font-size:clamp(18px,2.5vw,24px);font-weight:600}.spin-the-wheel-result-close-button{color:#fff;cursor:pointer;background-color:#ff503c;border:none;border-radius:clamp(10px,1.5vw,15px);margin-top:clamp(15px,2.5vw,30px);padding:clamp(10px,2vw,15px) clamp(20px,4vw,40px);font-size:clamp(16px,3vw,22px);font-weight:700;box-shadow:0 clamp(-3px,-.6vw,-6px) clamp(3px,.6vw,6px) clamp(-.5px,-.5vw,-2px) #00000059}.spin-the-wheel-result-close-button:hover{background-color:#fd422d}.spin-the-wheel-result-delete-name-button{color:#323232;cursor:pointer;background-color:#c8c8c8;border:none;border-radius:clamp(8px,1.5vw,12px);margin-top:clamp(10px,1.5vw,20px);padding:clamp(8px,1.5vw,12px) clamp(15px,3vw,30px);font-size:clamp(14px,2.5vw,18px);font-weight:700;box-shadow:0 clamp(-2px,-.4vw,-4px) clamp(2px,.4vw,4px) clamp(-.5px,-.5vw,-2px) #00000040}.spin-the-wheel-result-delete-name-button:hover{background-color:#b4b4b4}