:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; background: #0c0820; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: #f8fafc; background: #0c0820; }
button { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 320px; background: radial-gradient(circle at 30% 15%, #34216c 0, #120c2b 34%, #0b071c 77%); }
.stage { isolation: isolate; position: relative; min-height: 100vh; overflow: hidden; border-right: 1px solid rgba(255,255,255,.1); }
.aurora { position: absolute; z-index: -1; width: 48vw; aspect-ratio: 1; border-radius: 999px; filter: blur(55px); opacity: .35; pointer-events: none; }
.aurora-one { top: -24vw; left: 15%; background: #8b5cf6; }.aurora-two { right: -18vw; bottom: -24vw; background: #e879f9; }
.brand { position: absolute; top: 28px; left: 34px; display: flex; align-items: center; gap: 9px; letter-spacing: .16em; font-size: 11px; font-weight: 700; }.brand-mark { color: #fde047; font-size: 18px; }
.stage-heading { position: absolute; z-index: 2; top: 13%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 88%; text-align: center; pointer-events: none; }.stage-heading p { margin: 0 0 8px; color: #facc15; letter-spacing: .22em; font: 700 10px/1 sans-serif; }.stage-heading h1 { margin: 0; text-shadow: 0 5px 34px #c084fc; letter-spacing: .14em; font-size: clamp(38px, 5vw, 68px); }.stage-heading span { color: #d8c8f6; font-size: 14px; letter-spacing: .14em; }
#name-cloud { display: block; width: 100%; height: 100%; }
.draw-controls { position: absolute; z-index: 3; left: 50%; bottom: clamp(28px, 7vh, 70px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(14, 8, 37, .67); box-shadow: 0 12px 40px rgba(0,0,0,.3); backdrop-filter: blur(15px); }
.count-picker { display: flex; gap: 3px; }.count-picker button, .reset-button { border: 0; border-radius: 10px; padding: 9px 11px; color: #c6bde1; background: transparent; cursor: pointer; }.count-picker button:hover, .count-picker .is-selected { color: #1f1435; background: #facc15; }.draw-button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 11px; padding: 11px 18px; color: #211338; font-weight: 800; background: linear-gradient(135deg, #fef08a, #fbbf24); cursor: pointer; box-shadow: 0 5px 18px rgba(250,204,21,.25); }.draw-button.is-running { color: white; background: linear-gradient(135deg, #f43f5e, #fb7185); }.button-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }.draw-button.is-running .button-dot { animation: pulse .7s infinite alternate; } .reset-button { color: #bdb0d5; }.reset-button:hover { color: white; background: rgba(255,255,255,.09); }
.result-panel { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(620px, calc(100% - 36px)); max-height: 62vh; padding: 29px; overflow: auto; transform: translate(-50%, -44%); text-align: center; border: 1px solid rgba(250,204,21,.52); border-radius: 25px; background: rgba(22, 12, 51, .92); box-shadow: 0 20px 70px rgba(0,0,0,.5); backdrop-filter: blur(20px); }.result-panel[hidden] { display: none; }.result-panel p { margin: 0 0 20px; color: #fde68a; letter-spacing: .12em; }.result-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }.result-list article { min-width: 130px; padding: 14px 22px; border-radius: 14px; background: linear-gradient(140deg, #fef3c7, #facc15); color: #38230b; }.result-list strong, .result-list span { display: block; }.result-list strong { font-size: 19px; }.result-list span { margin-top: 5px; opacity: .75; font-family: ui-monospace, monospace; }.result-panel button { margin-top: 24px; padding: 10px 24px; border: 1px solid #facc15; border-radius: 10px; color: #fef3c7; background: transparent; cursor: pointer; }.stage.is-revealed #name-cloud, .stage.is-revealed .stage-heading { filter: blur(7px); opacity: .45; }
.winner-board { min-height: 100vh; padding: 30px 22px 22px; background: rgba(12, 7, 29, .7); }.board-title { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }.board-title span { color: #fef3c7; font-size: 20px; font-weight: 800; }.board-title small { color: #9689b2; }.winner-list { height: calc(100vh - 145px); margin: 10px 0 0; padding: 0; overflow: auto; list-style: none; }.winner-list li { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); }.winner-list .empty { display: block; margin-top: 32px; color: #84789c; text-align: center; border: 0; }.rank { color: #8e80aa; font: 12px ui-monospace, monospace; }.person { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.code { color: #facc15; font: 12px ui-monospace, monospace; }.board-footer { position: fixed; right: 0; bottom: 0; width: 320px; padding: 15px 22px; color: #a89cbc; border-top: 1px solid rgba(255,255,255,.09); background: #130d2b; font-size: 13px; }.board-footer span { color: #facc15; font-weight: 800; }
@keyframes pulse { from { opacity: .4; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
@media (max-width: 780px) { .app-shell { display: block; }.stage { min-height: 76vh; border: 0; }.winner-board { min-height: 24vh; padding: 20px; }.winner-list { height: auto; max-height: 31vh; }.board-footer { position: static; width: 100%; padding: 13px 0 0; background: transparent; }.brand { top: 18px; left: 20px; }.stage-heading { top: 12%; }.draw-controls { flex-wrap: wrap; justify-content: center; width: min(390px, calc(100% - 26px)); }.reset-button { padding: 7px; }.result-panel { transform: translate(-50%, -50%); } }
@media (max-width: 400px) { .count-picker button { padding: 8px 8px; }.draw-button { padding: 10px 13px; }.stage-heading h1 { font-size: 34px; } }