:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#101010}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:28px;text-align:center}header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #eb0028;padding-bottom:18px}header strong{font-size:32px}header span,.wheel-center span{color:#eb0028}header small{letter-spacing:3px}h1{font-size:clamp(30px,5vw,64px);margin:36px 0 10px}p{font-size:22px;color:#ddd}button{background:#eb0028;color:white;border:0;padding:18px 32px;font-size:22px;font-weight:bold;cursor:pointer;border-radius:6px}button:disabled{opacity:.5}input{display:block;margin:12px auto;padding:16px;width:min(100%,380px);font-size:18px}footer{margin-top:50px;color:#aaa}a{color:#fff}.wheel{margin:30px auto;width:min(65vw,500px);aspect-ratio:1;border:12px solid white;border-radius:50%;background:conic-gradient(#eb0028 0deg 45deg,#fff 45deg 90deg,#222 90deg 135deg,#eb0028 135deg 180deg,#fff 180deg 225deg,#222 225deg 270deg,#eb0028 270deg 315deg,#fff 315deg 360deg);display:grid;place-items:center;position:relative}.wheel:before{content:'▼';position:absolute;top:-36px;font-size:35px;color:#eb0028}.wheel-center{background:#111;color:white;padding:26px;border-radius:50%;font-weight:bold;font-size:30px}.wheel.spinning{animation:spin 7s cubic-bezier(.1,.7,.15,1) forwards}@keyframes spin{to{transform:rotate(2160deg)}}#qr{background:#fff;color:#111;padding:18px;margin:20px auto;width:max-content;max-width:100%}#qr img{display:block;width:210px;height:210px}form{margin-top:25px}[hidden]{display:none!important}body[data-mode=tv] main{max-width:1500px}body[data-mode=tv] .wheel{width:min(55vh,550px)}

/* Wheel v2: 16 segments, fixed pointer and accessible legend */
.brand img{display:block;max-width:min(38vw,330px);max-height:90px;object-fit:contain}.wheel-wrap{position:relative;width:min(60vh,610px);margin:22px auto 8px;padding-top:24px}.wheel-wrap .wheel{margin:0;width:100%;border:10px solid #fff;transform:rotate(0deg);background:conic-gradient(from -11.25deg,#252525 0deg 22.5deg,#eb0028 22.5deg 45deg,#252525 45deg 67.5deg,#fff 67.5deg 90deg,#252525 90deg 112.5deg,#eb0028 112.5deg 135deg,#252525 135deg 157.5deg,#eb0028 157.5deg 180deg,#252525 180deg 202.5deg,#fff 202.5deg 225deg,#252525 225deg 247.5deg,#eb0028 247.5deg 270deg,#252525 270deg 292.5deg,#fff 292.5deg 315deg,#252525 315deg 337.5deg,#d8ad39 337.5deg 360deg)}
.wheel:before{content:none}.wheel-pointer{position:absolute;z-index:5;left:50%;top:0;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:36px solid #eb0028;filter:drop-shadow(0 2px 2px #000)}.wheel-center{position:relative;z-index:1;border:3px solid #fff}.wheel.spinning{animation:spin 7s cubic-bezier(.12,.78,.15,1) forwards}.legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:17px;margin:12px auto 18px}.legend span{display:flex;gap:7px;align-items:center}.swatch{display:inline-block;width:17px;height:17px;border:1px solid #aaa}.swatch-lose{background:#252525}.swatch-five{background:#eb0028}.swatch-ten{background:#fff}.swatch-ticket{background:#d8ad39}@media(max-width:650px){.wheel-wrap{width:min(85vw,460px)}.legend{font-size:14px;gap:10px}}

/* V4: wheel animation is controlled by JS, not a fixed CSS keyframe. */
.wheel.spinning{animation:none!important}
.wheel{transition:none;will-change:transform}
.wheel-center{width:31%;height:31%;padding:5%;background:#050505;display:flex;align-items:center;justify-content:center;overflow:hidden;border:5px solid #fff;box-shadow:0 0 0 4px #111}
.wheel-center img{width:100%;height:100%;object-fit:contain}
/* V5: white central disc for the official black-lettered TEDx logo. */
.wheel-center{background:#fff;color:#111;border:5px solid #fff;box-shadow:0 0 0 4px #111}

/* V8 administration and celebration */
body.admin main{max-width:1100px;text-align:left}body.admin h1{font-size:34px}body.admin h2{margin-top:38px}body.admin form{margin:18px 0 32px}body.admin table{border-collapse:collapse;width:100%;overflow-x:auto;display:block}body.admin td,body.admin th{border-bottom:1px solid #555;padding:12px;text-align:left}body.admin input{width:100%;min-width:80px;max-width:380px;margin:6px 0}body.admin input[type=checkbox]{min-width:0;width:24px;height:24px}body.admin textarea{display:block;width:100%;max-width:600px;padding:15px;font-size:17px;margin:12px 0}body.admin button{font-size:17px;padding:12px 20px}body.admin label{display:block;margin:14px 0}.admin-ok{color:#88efaa}.admin-error{color:#ff9d9d}
#fireworks{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:42%;left:50%;width:9px;height:14px;border-radius:2px;opacity:0;animation:firefall var(--duration) ease-out forwards;box-shadow:0 0 10px currentColor}@keyframes firefall{0%{transform:translate(0,0) scale(.25) rotate(0);opacity:1}28%{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(250deg);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + var(--fall))) scale(.8) rotate(720deg);opacity:0}}#qr img{width:200px;height:200px;image-rendering:pixelated}#qr div{font-size:15px;margin-top:8px}

/* V11: TV two-column layout, QR code on the right. */
@media (min-width: 900px) {
 body[data-mode="tv"] main{max-width:1600px;padding:24px 34px}
 body[data-mode="tv"] #screen{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,.75fr);column-gap:48px;align-items:center}
 body[data-mode="tv"] #screen>h1,body[data-mode="tv"] #screen>p{grid-column:1/-1}
 body[data-mode="tv"] #screen>h1{margin:20px 0 0;font-size:clamp(32px,4vw,60px)}
 body[data-mode="tv"] #screen>p{margin:8px 0 4px}
 body[data-mode="tv"] .wheel-wrap{grid-column:1;grid-row:3;width:min(56vh,100%);justify-self:center;margin:10px auto 0}
 body[data-mode="tv"] .legend{grid-column:1;grid-row:4;margin:10px auto}
 body[data-mode="tv"] #qr{grid-column:2;grid-row:3/5;align-self:center;justify-self:center;margin:0;padding:24px;border-radius:14px;box-shadow:0 12px 50px #0008}
 body[data-mode="tv"] #qr img{width:clamp(190px,20vw,300px);height:auto;aspect-ratio:1}
 body[data-mode="tv"] #qr div{max-width:300px;overflow-wrap:anywhere}
}