@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root{--flamengo-red:#C00;--flamengo-black:#222;--white:#fff}
body{font-family:'Roboto',sans-serif;background-image:url(banner.jpg);background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:fixed;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}
.main-container{background-color:var(--white);border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.2);width:90%;max-width:600px;overflow:hidden;text-align:center}
#quiz-container{padding:2rem}
#quiz-container h2{color:var(--flamengo-red);margin-top:0}
#question-area ul{list-style-type:none;padding:0;text-align:left}
#question-area ul li{margin:1rem 0;font-size:1.1rem}
#question-area ul li label{cursor:pointer}
#submit{background-color:var(--flamengo-black);color:var(--white);border:none;padding:1rem 2rem;font-size:1.2rem;font-weight:700;width:100%;cursor:pointer;border-radius:5px;transition:background-color .3s}
#submit:hover{background-color:#444}
#roulette-container{padding:2rem;position:relative}
.wheel-wrapper{position:relative;width:300px;height:300px;margin:2rem auto}
.arrow{width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:30px solid var(--flamengo-black);position:absolute;top:-15px;left:50%;transform:translateX(-50%);z-index:2}
#wheel{width:100%;height:100%;border-radius:50%;border:5px solid var(--flamengo-black);position:relative;transition:transform 5s cubic-bezier(.25,1,.5,1);display:flex;justify-content:center;align-items:center;overflow:hidden}
.prize-label{position:absolute;color:var(--white);font-weight:700;font-size:14px;text-align:center;transform-origin:center;pointer-events:none;max-width:85px;word-wrap:break-word;line-height:1.1}
#spin-btn{background-color:var(--flamengo-red);color:var(--white);border:none;padding:1rem 2rem;font-size:1.2rem;font-weight:700;cursor:pointer;border-radius:5px;transition:background-color .3s}
#spin-btn:disabled{background-color:#888;cursor:not-allowed}
#prize-result{margin-top:2rem;font-size:1.5rem;font-weight:700;color:var(--flamengo-red);min-height:2.25rem}
.hidden{display:none!important}
#modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000}
#modal{background:var(--white);padding:2rem 3rem;border-radius:10px;text-align:center;position:relative;overflow:hidden;border:3px solid var(--flamengo-red)}
#modal h2{color:var(--flamengo-black);margin-top:0}
#modal p{color:#333;font-size:1.1rem}
.prize-highlight{font-size:1.5rem;font-weight:700;color:var(--flamengo-red);margin:1rem 0}
.cta-button{display:inline-block;padding:1rem 2rem;background-color:var(--flamengo-red);color:var(--white);text-decoration:none;font-weight:700;border-radius:5px;margin-top:1rem;transition:transform .2s}
.cta-button:hover{transform:scale(1.05)}
#close-modal{background:0 0;border:1px solid #ccc;color:#888;border-radius:5px;padding:.5rem 1rem;margin-top:1.5rem;cursor:pointer}
#confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.confetti{position:absolute;width:10px;height:10px;background-color:var(--flamengo-red);opacity:0;animation:confetti-fall 3s ease-out forwards}
@keyframes confetti-fall{0%{transform:translateY(-10vh) rotateZ(0);opacity:1}100%{transform:translateY(110vh) rotateZ(720deg);opacity:0}}