:root {
  --ink: #061327;
  --ink-soft: #0b2341;
  --paper: #09294d;
  --red: #0c82f5;
  --gold: #f2bd35;
  --teal: #17d6ff;
  --white: #ffffff;
  --muted: #b9d4e9;
}

* { box-sizing: border-box; letter-spacing: 0; }
html, body { min-width: 1024px; min-height: 100%; margin: 0; overflow: hidden; }
body { color: var(--white); background: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }

#tech-canvas { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#confetti-canvas { position: fixed; z-index: 30; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.draw-screen { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100vw; height: 100vh; overflow: hidden; background: transparent; }
.draw-screen::before { position: absolute; inset: 0; content: ""; opacity: .2; background-image: repeating-linear-gradient(135deg, transparent 0, transparent 30px, rgba(45,180,255,.055) 30px, rgba(45,180,255,.055) 31px); pointer-events: none; }
.top-accent { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 44% 28% 28%; height: 6px; }
.top-accent span:nth-child(1) { background: #0869e9; }
.top-accent span:nth-child(2) { background: #20caff; }
.top-accent span:nth-child(3) { background: var(--gold); }

.screen-header { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 4.6vh 4.5vw 2.2vh; }
.event-label { color: #79dcff; font-size: 15px; font-weight: 900; text-shadow: 0 0 12px rgba(23,214,255,.7); }
.event-heading h1 { margin: .7vh 0 .4vh; color: #fff; font-size: 50px; line-height: 1.2; text-shadow: 0 3px 0 #164f8d, 0 0 22px rgba(41,160,255,.5); }
.event-heading p { margin: 0; color: #c1c8cd; font-size: 22px; }
.screen-tools { display: flex; align-items: stretch; gap: .8vw; }
.draw-stat { position: relative; display: grid; align-content: center; min-width: clamp(112px, 8.6vw, 170px); padding: 1.1vh 1.2vw; border: 1px solid rgba(23,214,255,.68); border-radius: 6px; background: rgba(8,46,86,.74); box-shadow: inset 0 0 18px rgba(18,132,255,.16), 0 0 14px rgba(23,214,255,.16); }
.draw-stat::before, .draw-stat::after { position: absolute; width: 17px; height: 7px; content: ""; border-color: #84eaff; }
.draw-stat::before { top: -2px; left: -2px; border-top: 2px solid; border-left: 2px solid; }
.draw-stat::after { right: -2px; bottom: -2px; border-right: 2px solid; border-bottom: 2px solid; }
.draw-stat span { color: #aeb7bd; font-size: 14px; }
.draw-stat strong { margin-top: .25vh; color: var(--gold); font-size: 34px; }
.tool-button { display: grid; place-items: center; width: clamp(44px, 3.1vw, 60px); border: 1px solid rgba(23,214,255,.55); border-radius: 6px; color: #dff8ff; background: rgba(8,46,86,.74); box-shadow: inset 0 0 15px rgba(18,132,255,.15); }
.tool-button:hover { border-color: rgba(242,189,53,.65); color: var(--gold); }
.tool-button svg { width: 42%; height: 42%; }

.draw-area { position: relative; z-index: 3; display: grid; place-items: center; min-height: 0; padding: 1vh 4.5vw; }
.idle-state { display: grid; justify-items: center; text-align: center; }
.lucky-emblem { position: relative; display: grid; place-items: center; width: 190px; height: 190px; border: 3px solid #78e5ff; border-radius: 50%; background: rgba(6,35,70,.82); box-shadow: inset 0 0 28px rgba(23,214,255,.26), 0 0 0 13px rgba(13,126,255,.09), 0 0 38px rgba(23,214,255,.55); }
.lucky-emblem::before { position: absolute; inset: -34px; border: 2px dashed rgba(65,182,255,.72); border-radius: 50%; content: ""; animation: ring-spin 13s linear infinite; }
.lucky-emblem::after { position: absolute; inset: -65px; border: 1px solid rgba(23,214,255,.28); border-radius: 50%; content: ""; box-shadow: 0 0 0 8px rgba(15,105,213,.035); animation: ring-spin-reverse 19s linear infinite; }
.lucky-emblem span { position: relative; z-index: 1; color: #fff; font-family: "STKaiti", "KaiTi", serif; font-size: 88px; font-weight: 900; text-shadow: 0 2px 0 #1176d0, 0 0 20px rgba(104,224,255,.9); }
.idle-state h2 { margin: 5.4vh 0 .7vh; color: #fff; font-size: 48px; text-shadow: 0 3px 0 #164f8d, 0 0 18px rgba(41,160,255,.45); }
.idle-state p { margin: 0; color: var(--muted); font-size: 20px; }
.idle-state p strong { color: var(--white); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-spin-reverse { to { transform: rotate(-360deg); } }
.name-stream { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, .9vw, 18px); width: min(1400px, 100%); }
.stream-name { display: grid; place-items: center; min-height: clamp(64px, 7vh, 100px); padding: 1.2vh 1vw; border: 1px solid rgba(23,214,255,.48); border-radius: 6px; color: #eefbff; background: rgba(8,43,78,.86); box-shadow: inset 0 0 16px rgba(18,132,255,.13); text-align: center; font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.stream-name.hot { border-color: var(--gold); color: #2e2614; background: var(--gold); transform: scale(1.025); }
.winner-reveal { width: min(1600px, 100%); text-align: center; }
.winner-title span { color: var(--gold); font-size: 15px; font-weight: 900; }
.winner-title h2 { margin: .5vh 0 2.3vh; font-size: 50px; }
.winner-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1vw, 20px); }
.winner-card { position: relative; display: grid; place-items: center; min-height: clamp(155px, 21vh, 240px); padding: 2vh 1vw; overflow: hidden; border: 2px solid rgba(242,189,53,.9); border-radius: 6px; color: #fff; background: rgba(8,43,78,.94); opacity: 0; transform: translateY(22px) scale(.94); box-shadow: inset 0 0 24px rgba(23,214,255,.18), 0 0 24px rgba(23,214,255,.22); }
.winner-card::before { position: absolute; top: 0; right: 0; left: 0; height: 7px; content: ""; background: var(--gold); }
.winner-card.revealed { animation: reveal-winner .52s ease forwards; }
.winner-card small { color: #976d0e; font-size: 14px; font-weight: 900; }
.winner-card strong { margin-top: 1.1vh; overflow-wrap: anywhere; font-size: 27px; line-height: 1.45; }
@keyframes reveal-winner { to { opacity: 1; transform: translateY(0) scale(1); } }

.screen-footer { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 13vh; padding: 1.8vh 4.5vw 3.6vh; }
.draw-status, .round-rule { color: #aab3ba; font-size: 16px; }
.draw-status { display: flex; align-items: center; gap: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #43ca96; box-shadow: 0 0 0 5px rgba(67,202,150,.12); }
.round-rule { justify-self: end; }
.draw-button, .next-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: clamp(280px, 19vw, 370px); height: clamp(64px, 7vh, 84px); overflow: hidden; border: 2px solid #77e8ff; border-radius: 0; clip-path: polygon(7% 0, 93% 0, 100% 24%, 100% 76%, 93% 100%, 7% 100%, 0 76%, 0 24%); color: #fff; background: #087ee9; box-shadow: inset 0 0 24px rgba(68,220,255,.35), 0 0 12px rgba(23,214,255,.68), 0 0 32px rgba(13,126,255,.48); font-size: 24px; font-weight: 900; transform: translateY(-50px); animation: button-glow 2.4s ease-in-out infinite; }
.draw-button::before, .next-button::before { position: absolute; z-index: -1; inset: 5px; border: 1px solid rgba(210,248,255,.65); content: ""; clip-path: polygon(6% 0, 94% 0, 100% 24%, 100% 76%, 94% 100%, 6% 100%, 0 76%, 0 24%); pointer-events: none; }
.draw-button::after, .next-button::after { position: absolute; z-index: -1; top: -30%; bottom: -30%; left: -22%; width: 12%; content: ""; background: rgba(255,255,255,.28); transform: skewX(-24deg); animation: button-scan 2.8s linear infinite; pointer-events: none; }
.draw-button > *, .next-button > * { position: relative; z-index: 1; }
.draw-button:hover, .next-button:hover { color: #fff; background: #159cff; transform: translateY(-54px) scale(1.018); }
.draw-button:active, .next-button:active { transform: translateY(-48px) scale(.99); }
.draw-button.stop { border-color: #ffe28a; color: #342a15; background: var(--gold); box-shadow: inset 0 0 18px rgba(255,255,255,.3), 0 0 24px rgba(242,189,53,.58); }
.draw-button svg, .next-button svg { width: 1.2em; height: 1.2em; filter: drop-shadow(0 0 5px rgba(255,255,255,.55)); }
.next-button { border-color: #77e8ff; color: #fff; background: #0a64c8; }
@keyframes button-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }
@keyframes button-scan { 0% { left: -22%; } 70%, 100% { left: 116%; } }
.toast { position: fixed; z-index: 50; top: 3vh; left: 50%; min-width: 280px; padding: 14px 20px; border-left: 5px solid var(--gold); border-radius: 5px; color: #fff; background: #2a3035; box-shadow: 0 14px 36px rgba(0,0,0,.3); text-align: center; transform: translateX(-50%); }
.toast.error { border-left-color: var(--red); }

@media (max-height: 700px) {
  .screen-header { padding-top: 3.4vh; }
  .winner-card { min-height: 140px; }
}

@media (max-width: 1280px) {
  .event-heading h1 { font-size: 38px; }
  .event-heading p { font-size: 18px; }
  .draw-stat strong { font-size: 28px; }
  .stream-name { font-size: 17px; }
  .winner-title h2 { font-size: 40px; }
  .winner-card strong { font-size: 21px; }
  .draw-button { font-size: 20px; }
}