:root{
  --velvet:#240914;
  --velvet-2:#5b1630;
  --wine:#8b263e;
  --gold:#d9a84e;
  --gold-bright:#ffd98b;
  --ivory:#fff5d8;
  --ink:#40101e;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;background:var(--velvet);color:var(--ivory)}
button{font:inherit}
.draw-return{min-height:42px;padding:0 16px;position:absolute;z-index:60;right:clamp(18px,2.6vw,48px);bottom:clamp(18px,2.3vh,30px);display:inline-flex;align-items:center;border:1px solid rgba(255,225,151,.46);border-radius:999px;background:rgba(38,5,17,.72);color:#ffe6a4;font-size:12px;font-weight:900;text-decoration:none;letter-spacing:.04em;box-shadow:0 8px 22px rgba(0,0,0,.3);backdrop-filter:blur(9px)}
.draw-return:hover,.draw-return:focus-visible{background:rgba(111,24,50,.9);outline:2px solid rgba(255,224,142,.85);outline-offset:3px}
.draw-stage{width:100vw;height:100svh;min-height:620px;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(ellipse at 50% 34%,rgba(255,219,143,.19),transparent 31%),radial-gradient(ellipse at 50% 105%,#7e2745 0,transparent 49%),linear-gradient(120deg,#18070f 0,#3c0d20 48%,#19070f 100%)}
.draw-stage::before{content:"";position:absolute;z-index:-4;inset:0;background-image:repeating-radial-gradient(circle at 50% 120%,transparent 0 54px,rgba(255,217,139,.055) 56px 58px);opacity:.62}
.draw-stage::after{content:"";position:absolute;z-index:12;inset:0;pointer-events:none;box-shadow:inset 0 0 110px 18px #13040b}
.curtain{width:54vw;height:116%;position:absolute;z-index:9;top:-4%;background:repeating-linear-gradient(90deg,#3b0b1d 0,#781f3b 18%,#4a1026 37%);filter:drop-shadow(0 0 28px #0b0206);transition:transform 1.05s cubic-bezier(.7,0,.25,1)}
.curtain::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 28%,rgba(0,0,0,.28) 70%)}
.curtain-left{left:-2vw;transform:translateX(0) skewX(2deg)}
.curtain-right{right:-2vw;transform:translateX(0) scaleX(-1) skewX(2deg)}
.draw-stage:not([data-state="intro"]) .curtain-left{transform:translateX(-47vw) skewX(2deg)}
.draw-stage:not([data-state="intro"]) .curtain-right{transform:translateX(47vw) scaleX(-1) skewX(2deg)}
.light-beam{width:32vw;height:100vh;position:absolute;z-index:-2;top:-20vh;opacity:.22;filter:blur(9px);background:linear-gradient(180deg,rgba(255,239,185,.88),rgba(255,222,137,.06) 72%,transparent);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 0}
.beam-left{left:8vw;transform:rotate(13deg)}
.beam-right{right:8vw;transform:rotate(-13deg)}
.spark-field{position:absolute;z-index:-1;inset:0;background-image:radial-gradient(circle,#ffeab3 0 1.5px,transparent 2px),radial-gradient(circle,#f6bb62 0 1px,transparent 1.6px);background-position:0 0,37px 31px;background-size:86px 86px,119px 119px;mask-image:linear-gradient(180deg,transparent 0,#000 18%,transparent 83%);opacity:.42}
.draw-header{min-height:150px;padding:24px clamp(32px,5vw,88px) 10px;display:grid;grid-template-columns:230px 1fr 230px;align-items:center;position:relative;z-index:13}
.draw-header>img{width:190px;height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.32))}
.draw-heading{text-align:center}
.draw-heading p{margin:0 0 3px;color:#efc474;font:800 clamp(14px,1.4vw,20px)/1.3 "Noto Serif TC","PMingLiU",serif;letter-spacing:.34em}
.draw-heading h1{margin:0;color:#fff8df;font:900 clamp(46px,5.2vw,82px)/1 "Noto Serif TC","PMingLiU",serif;letter-spacing:.09em;text-shadow:0 3px 0 #5d1b2a,0 0 35px rgba(255,210,120,.25)}
.draw-heading span{display:inline-block;margin-top:10px;color:#e9cfa8;font-size:13px;letter-spacing:.12em}
.draw-seal{width:112px;height:112px;justify-self:end;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,218,142,.72);border-radius:50%;background:radial-gradient(circle,#fff2bd 0,#d9a84e 62%,#8e5a22 100%);color:#571628;box-shadow:0 0 0 7px rgba(255,216,132,.08),0 12px 30px rgba(0,0,0,.3)}
.draw-seal b{font:900 42px/.9 Georgia,serif}
.draw-seal span{margin-top:7px;font-size:10px;font-weight:900}
.record-table{min-height:0;display:grid;align-content:center;position:relative;z-index:2}
.candidate-list{width:min(1030px,72vw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,68px);perspective:1400px;-webkit-perspective:1400px}
.draw-stage[data-state="intro"] .record-table{visibility:hidden;opacity:0}
.candidate-card{min-width:0;aspect-ratio:.78;padding:0;position:relative;border:0;background:transparent;color:inherit;cursor:default;transition:filter .45s ease,opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.candidate-card:nth-child(1){--tilt:-2.4deg}.candidate-card:nth-child(2){--tilt:1.2deg}.candidate-card:nth-child(3){--tilt:-1deg}
.card-inner{width:100%;height:100%;position:relative;display:block;transform:rotateY(0) rotate(var(--tilt));-webkit-transform:rotateY(0) rotate(var(--tilt));transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1);will-change:transform}
.candidate-card.covered .card-inner{transform:rotateY(180deg) rotate(0);-webkit-transform:rotateY(180deg) rotate(0)}
.draw-stage:is([data-state="countdown"],[data-state="shuffling"],[data-state="pick"]) .candidate-card .card-inner{transform:rotateY(180deg) rotate(0);-webkit-transform:rotateY(180deg) rotate(0)}
.card-face{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;border:1px solid rgba(255,227,164,.65);border-radius:4% 4% 3% 3%;box-shadow:0 28px 45px rgba(0,0,0,.35),inset 0 0 0 7px rgba(255,244,210,.08);will-change:transform}
.card-front{padding:7%;grid-template-rows:1fr auto;background:linear-gradient(155deg,#fff0bc 0,#d79c3e 49%,#7b1d36 49.5%,#350b19 100%);transform:rotateY(0deg) translateZ(1px);-webkit-transform:rotateY(0deg) translateZ(1px)}
.candidate-card.covered:not(.turning-over):not(.revealing) .card-front{visibility:hidden;opacity:0}
.candidate-photo{width:78%;aspect-ratio:1;align-self:center;z-index:2;overflow:hidden;display:grid;place-items:center;border:7px solid #ffe9a9;border-radius:50%;background:linear-gradient(145deg,#7d213b,#3c0d1c);color:#fff5d5;font:900 clamp(34px,4vw,64px)/1 "Noto Serif TC","PMingLiU",serif;box-shadow:0 0 0 4px rgba(103,31,48,.72),0 18px 34px rgba(0,0,0,.28)}
.candidate-photo img{width:100%;height:100%;display:block;object-fit:cover}
.candidate-copy{z-index:2;display:grid;justify-items:center;align-content:center;min-height:28%;padding-top:5%;text-align:center}
.candidate-name{width:100%;min-height:2.3em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#fff9e5;font:900 clamp(19px,1.75vw,28px)/1.15 "Noto Serif TC","PMingLiU",serif;text-shadow:0 2px 9px rgba(0,0,0,.42)}
.candidate-score{margin-top:3%;color:#eecb85;font-size:clamp(12px,1vw,16px);font-style:normal;font-weight:900;letter-spacing:.09em}
.card-back{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px);grid-template-rows:1fr auto;padding:11%;background:radial-gradient(circle at 50% 41%,rgba(255,232,164,.19),transparent 23%),repeating-radial-gradient(circle at 50% 41%,transparent 0 14px,rgba(238,188,92,.11) 15px 16px),linear-gradient(145deg,#761c38,#260916)}
.card-back>i{width:52%;aspect-ratio:1;display:grid;place-items:center;align-self:center;border:2px solid #efc66e;border-radius:50%;color:#ffdf91;font:900 clamp(50px,7vw,100px)/1 Georgia,serif;font-style:normal;box-shadow:0 0 0 10px rgba(255,222,145,.06),0 0 35px rgba(255,210,118,.25)}
.card-back>b{opacity:0;color:#ffe8a8;font-size:16px;letter-spacing:.12em;transition:opacity .25s ease}
.draw-stage[data-state="pick"] .candidate-card{cursor:pointer}
.draw-stage[data-state="pick"] .candidate-card .card-back>b{opacity:1}
.draw-stage[data-state="pick"] .candidate-card:hover .card-inner,.draw-stage[data-state="pick"] .candidate-card:focus-visible .card-inner{filter:drop-shadow(0 0 24px rgba(255,218,126,.65));transform:rotateY(180deg) translateY(-10px) scale(1.035);-webkit-transform:rotateY(180deg) translateY(-10px) scale(1.035)}
.draw-stage[data-state="reveal"] .candidate-card{transition-duration:.8s}
.draw-stage[data-state="reveal"] .candidate-card:not(.selected){opacity:0;filter:blur(18px) saturate(.2);transform:translateY(80px) scale(.28)}
.draw-stage[data-state="reveal"] .candidate-card.selected{z-index:35;cursor:default;filter:drop-shadow(0 0 56px rgba(255,215,121,.88))}
.stage-line{width:min(1120px,80vw);margin:clamp(14px,2vh,28px) auto 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;color:#dcae58}
.stage-line i{height:1px;background:linear-gradient(90deg,transparent,#d7a853)}
.stage-line i:last-child{transform:scaleX(-1)}
.stage-line span{font:700 23px/1 Georgia,serif}
.draw-stage[data-state="shuffling"] .candidate-list{filter:drop-shadow(0 0 28px rgba(255,215,121,.25))}
.draw-stage[data-state="result"] .record-table{opacity:.2;filter:blur(6px);transform:scale(.94);transition:.75s ease}
.draw-controls{min-height:110px;padding:14px 30px 26px;position:relative;z-index:20;display:flex;align-items:center;justify-content:center;gap:18px}
.draw-controls p{max-width:520px;margin:0 22px 0 0;color:#d9c2ad;font-size:13px}
.draw-controls button{min-width:180px;min-height:54px;padding:0 26px;border:1px solid #ffe2a1;border-radius:999px;background:linear-gradient(180deg,#ffe8a6,#d7a54b);color:#4c1323;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px #fff8dc}
.draw-controls button.secondary{background:rgba(59,12,29,.7);color:#f6d99b;border-color:rgba(246,217,155,.46)}
.draw-controls button:disabled{cursor:wait;opacity:.58}
.countdown{position:absolute;z-index:30;inset:0;display:none;place-items:center;background:radial-gradient(circle,rgba(96,22,49,.3),rgba(12,2,7,.88));color:#ffe59f;text-shadow:0 0 55px rgba(255,215,128,.55)}
.draw-stage[data-state="countdown"] .countdown{display:grid}
.countdown i{grid-area:1/1;width:min(42vw,480px);aspect-ratio:1;border:7px solid #ffd982;border-radius:50%;box-shadow:0 0 0 18px rgba(255,219,139,.08),0 0 70px rgba(255,210,110,.5)}
.countdown strong{grid-area:1/1;font:900 min(30vw,350px)/1 Georgia,serif}
.countdown span{grid-area:1/1;align-self:end;margin-bottom:17vh;color:#fff0c5;font-size:20px;font-weight:900;letter-spacing:.28em}
.shuffle-flare{position:absolute;z-index:15;inset:0;display:none;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(255,222,137,.2),transparent 46%)}
.draw-stage[data-state="shuffling"] .shuffle-flare{display:grid}
.shuffle-flare i{grid-area:1/1;width:min(28vw,380px);aspect-ratio:1;border:2px solid rgba(255,220,137,.7);border-radius:50%;opacity:.3;animation:shuffle-ring 1.2s ease-out infinite}
.shuffle-flare i:nth-child(2){animation-delay:.35s}.shuffle-flare i:nth-child(3){animation-delay:.7s}
@keyframes shuffle-ring{0%{opacity:.8;transform:scale(.2)}100%{opacity:0;transform:scale(2.3)}}
.reveal-flash{position:absolute;z-index:28;inset:0;display:none;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(255,230,153,.24) 0 14%,rgba(35,4,15,.38) 44%,rgba(7,0,4,.78) 100%)}
.draw-stage[data-state="reveal"] .reveal-flash{display:grid}
.reveal-flash i{grid-area:1/1;width:min(36vw,520px);aspect-ratio:1;border:3px solid rgba(255,222,133,.92);border-radius:50%;box-shadow:0 0 36px rgba(255,207,94,.58),inset 0 0 30px rgba(255,235,177,.24);animation:reveal-ring 1.55s ease-out infinite}
.reveal-flash i:nth-child(2){width:min(23vw,330px);animation-delay:.34s;animation-direction:reverse}
.reveal-flash strong{grid-area:1/1;margin-top:min(47vw,660px);color:#ffe7a2;font:900 clamp(22px,2.4vw,38px)/1 "Noto Serif TC","PMingLiU",serif;letter-spacing:.32em;text-shadow:0 0 18px rgba(255,216,122,.85);animation:reveal-word 1.2s ease-in-out infinite alternate}
@keyframes reveal-ring{0%{opacity:0;transform:scale(.34) rotate(0)}35%{opacity:1}100%{opacity:0;transform:scale(1.55) rotate(120deg)}}
@keyframes reveal-word{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sound-toggle{position:absolute;z-index:50;left:clamp(18px,2.6vw,48px);bottom:clamp(18px,2.3vh,30px);min-width:120px;min-height:42px;padding:8px 16px;border:1px solid rgba(255,225,151,.64);border-radius:999px;background:rgba(38,5,17,.72);color:#ffe6a4;font:800 14px/1 "Noto Sans TC","Microsoft JhengHei",sans-serif;letter-spacing:.05em;box-shadow:0 8px 22px rgba(0,0,0,.3),inset 0 0 18px rgba(255,223,139,.07);backdrop-filter:blur(9px);cursor:pointer}
.sound-toggle:hover,.sound-toggle:focus-visible{background:rgba(111,24,50,.9);outline:2px solid rgba(255,224,142,.85);outline-offset:3px}
.sound-toggle[aria-pressed="false"]{border-color:rgba(255,255,255,.26);color:rgba(255,247,226,.62);background:rgba(25,8,14,.62)}
.winner-scene{position:absolute;z-index:18;inset:148px 0 106px;display:grid;place-content:center;justify-items:center;text-align:center}
.winner-halo{width:min(41vw,560px);aspect-ratio:1;position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,230,155,.29) 0 2deg,transparent 2deg 11deg);mask-image:radial-gradient(circle,transparent 0 25%,#000 26% 63%,transparent 70%);animation:halo 16s linear infinite}
@keyframes halo{to{transform:translate(-50%,-50%) rotate(360deg)}}
.winner-scene>p{margin:0 0 10px;color:#e7bf70;font-size:16px;font-weight:900;letter-spacing:.28em}
.winner-avatar{width:clamp(120px,11vw,176px);aspect-ratio:1;overflow:hidden;display:grid;place-items:center;border:8px solid #ffe49c;border-radius:50%;background:linear-gradient(145deg,#8a2944,#3e0d1d);color:#fff6d3;font:900 60px/1 "Noto Serif TC","PMingLiU",serif;box-shadow:0 0 0 10px rgba(255,226,149,.08),0 0 60px rgba(255,207,99,.45)}
.winner-avatar img{width:100%;height:100%;object-fit:cover}
.winner-scene h2{margin:18px 0 6px;color:#fff8de;font:900 clamp(42px,5.5vw,84px)/1.08 "Noto Serif TC","PMingLiU",serif;letter-spacing:.03em;text-shadow:0 5px 28px rgba(0,0,0,.52)}
.winner-scene>span{color:#f1c66e;font-size:20px;font-weight:900}
.winner-scene>strong{margin-top:16px;padding:10px 22px;border:1px solid rgba(255,224,150,.55);border-radius:999px;background:rgba(83,19,40,.68);color:#ffedbe;font-size:15px;letter-spacing:.12em}
.winner-scene>small{margin-top:11px;color:rgba(255,238,193,.7);font-size:11px;font-weight:800;letter-spacing:.12em}
.confetti{position:absolute;z-index:17;inset:0;pointer-events:none;overflow:hidden}
.confetti i{width:9px;height:18px;position:absolute;top:-25px;background:var(--confetti);animation:confetti-fall var(--duration) linear var(--delay) forwards}
@keyframes confetti-fall{to{transform:translate(var(--drift),110vh) rotate(780deg)}}
@media(max-aspect-ratio:1/1){.draw-stage{min-height:720px}.draw-header{min-height:132px;padding:18px 20px 4px;grid-template-columns:90px 1fr 90px}.draw-header>img{width:88px}.draw-heading p{font-size:11px}.draw-heading h1{font-size:clamp(34px,9vw,52px)}.draw-heading span{font-size:10px}.draw-seal{width:72px;height:72px}.draw-seal b{font-size:28px}.draw-seal span{font-size:7px}.candidate-list{width:min(94vw,630px);gap:10px}.candidate-name{font-size:clamp(11px,3.1vw,18px)}.candidate-score{font-size:10px}.draw-controls{padding:8px 16px 20px;flex-wrap:wrap;gap:8px}.draw-controls p{width:100%;margin:0;text-align:center;font-size:10px}.draw-controls button{min-width:150px;min-height:48px}.winner-scene{inset:125px 0 120px}.winner-avatar{width:118px}.winner-scene h2{font-size:clamp(35px,9vw,58px)}.winner-scene>small{max-width:190px;font-size:9px;line-height:1.5}.reveal-flash strong{margin-top:72vh}.reveal-flash i{width:min(90vw,440px)}.reveal-flash i:nth-child(2){width:min(62vw,300px)}.sound-toggle{left:12px;bottom:12px;min-width:104px;min-height:38px;padding:7px 12px;font-size:12px}.draw-return{right:12px;bottom:12px;min-height:38px;padding:0 12px;font-size:10px}}
@media(max-height:720px) and (min-aspect-ratio:1/1){.draw-header{min-height:118px;padding-top:14px}.draw-header>img{width:145px}.draw-seal{width:84px;height:84px}.candidate-list{width:min(880px,67vw)}.draw-controls{min-height:80px;padding-bottom:15px}.winner-scene{inset:110px 0 78px}.winner-avatar{width:105px}.winner-scene h2{font-size:52px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}