*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.lucky-wheel-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;max-width:1200px;margin:0 auto}.prize-info{background:#fffaf0f2;padding:20px 40px;border-radius:15px;box-shadow:0 10px 30px #d4543e33;border:2px solid rgba(255,157,61,.3);text-align:center;min-width:400px}.prize-info h2{margin:0 0 10px;font-size:2rem;color:#d4543e}.prize-info p{margin:5px 0;font-size:1.1rem;color:#8b6f47}.slot-machine{background:linear-gradient(135deg,#e8c9a8,#dab890);border-radius:20px;padding:30px;box-shadow:0 20px 60px #0000004d,inset 0 0 20px #ffffff1a;border:5px solid #d4543e}.slot-header{text-align:center;margin-bottom:20px}.slot-header h2{color:#ff9d3d;font-size:2.5rem;text-shadow:0 0 10px rgba(255,157,61,.6),2px 2px 4px rgba(212,84,62,.5);margin:0}.slots-container{display:flex;gap:15px;position:relative;background:#b886594d;padding:20px;border-radius:15px}.slot-column{width:250px;height:150px;background:#fff;border-radius:10px;overflow:hidden;position:relative;box-shadow:inset 0 0 20px #0000004d}.slot-column.slot-single{width:1050px}.slot-column.slot-active{box-shadow:0 0 30px #ffd700cc,0 0 50px #ffd70099,inset 0 0 20px #ffd7004d;border:3px solid #FFD700;animation:glowPulse 1s ease-in-out infinite}@keyframes glowPulse{0%,to{box-shadow:0 0 30px #ffd700cc,0 0 50px #ffd70099,inset 0 0 20px #ffd7004d}50%{box-shadow:0 0 40px gold,0 0 70px #ffd700cc,inset 0 0 30px #ffd70080}}.slot-items{position:absolute;width:100%;top:0;left:0}.slot-item{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border-bottom:2px solid rgba(255,255,255,.5);padding:5px}.participant-code{font-size:20px;color:gold;text-shadow:2px 2px 4px rgba(0,0,0,.8);margin-bottom:5px}.participant-name{font-size:24px;text-shadow:1px 1px 2px rgba(0,0,0,.5);text-align:center;font-weight:700}.controls{display:flex;justify-content:center}.spin-button{background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border:none;padding:20px 60px;font-size:24px;font-weight:700;border-radius:50px;cursor:pointer;box-shadow:0 10px 30px #d4543e66;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px}.spin-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 15px 40px #0006}.spin-button:active:not(:disabled){transform:translateY(-1px)}.spin-button:disabled{opacity:.7;cursor:not-allowed}.spin-button.spinning{animation:buttonPulse 1s ease-in-out infinite}.reset-button{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#c8a882,#a89070);color:#fff;border:none;padding:15px 35px;font-size:18px;font-weight:700;border-radius:50px;cursor:pointer;box-shadow:0 6px 20px #a8907066;transition:all .3s ease;text-transform:uppercase;z-index:100}.reset-button:hover{transform:translateY(-3px);box-shadow:0 10px 30px #a8907099}.popup-overlay{position:fixed;inset:0;background:#000000b3;z-index:999;animation:fadeIn .3s ease-out}.popup-result{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#fffaf0fa,#fff5e6fa);padding:50px;border-radius:30px;box-shadow:0 20px 60px #0006,0 0 0 3px #ff9d3d4d,inset 0 0 30px #ffffff80;z-index:1000;min-width:700px;max-width:90vw;animation:popupSlideIn .4s ease-out;border:5px solid #ff9d3d}.popup-result h2{color:#d4543e;margin-bottom:15px;font-size:52px;text-align:center;text-shadow:3px 3px 6px rgba(255,215,0,.3),0 0 20px rgba(255,157,61,.2);animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.prize-title{font-size:38px;font-weight:700;text-align:center;margin-bottom:35px;padding:15px 30px;background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border-radius:15px;text-shadow:2px 2px 4px rgba(0,0,0,.3);box-shadow:0 5px 20px #d4543e66}.popup-close-btn{background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border:none;padding:15px 50px;font-size:20px;font-weight:700;border-radius:50px;cursor:pointer;margin-top:25px;width:100%;box-shadow:0 5px 20px #d4543e66;transition:all .3s ease}.popup-close-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #d4543e99}.popup-close-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes buttonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.result{background:#fff;padding:30px;border-radius:20px;box-shadow:0 10px 40px #0003;animation:slideIn .5s ease-out;min-width:600px}.result h2{color:#d4543e;margin-bottom:20px;font-size:28px;text-align:center}.winners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;margin-bottom:10px}.winner-card{background:linear-gradient(135deg,#ff9d3d,#d4543e);padding:35px 25px;border-radius:20px;text-align:center;color:#fff;box-shadow:0 8px 25px #d4543e66;border:3px solid rgba(255,255,255,.3);transform:translateY(0);transition:all .3s ease;position:relative;overflow:hidden}.winner-card:before{content:"★";position:absolute;top:10px;right:10px;font-size:30px;color:#ffd70066}.winner-card:hover{transform:translateY(-5px);box-shadow:0 12px 35px #d4543e99}.winner-code{font-size:26px;font-weight:700;color:gold;margin-bottom:8px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.winner-name{font-size:18px;line-height:1.4;font-weight:600;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.all-winners{background:#fff;padding:30px;border-radius:20px;box-shadow:0 10px 40px #0003;width:100%;max-width:1200px}.all-winners h3{color:#d4543e;margin-bottom:20px;text-align:center;font-weight:700}.winners-list{display:flex;flex-direction:column;gap:25px}.prize-group{background:#fffaf0cc;padding:25px;border-radius:15px;box-shadow:0 4px 10px #d4543e1a;border:2px solid rgba(255,157,61,.3)}.prize-group h4{margin:0 0 15px;font-size:1.5rem;text-align:center;padding-bottom:10px;border-bottom:3px solid currentColor}.prize-winners{display:grid;grid-template-columns:1fr 1fr;gap:12px}.winner-tag{background:#fff;padding:12px 18px;border-radius:10px;font-size:15px;color:#2c3e50;border:2px solid #bdc3c7;box-shadow:0 2px 5px #0000001a;transition:all .3s ease}.winner-tag:hover{transform:translateY(-2px);box-shadow:0 4px 10px #d4543e40;border-color:#ff9d3d}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.prize-info{min-width:auto;padding:15px 20px}.prize-info h2{font-size:1.5rem}.slot-machine{padding:20px}.slot-header h2{font-size:1.8rem}.slots-container{gap:10px;padding:15px}.slot-column{width:100px;height:80px}.slot-column.slot-single{width:430px}.slot-item{height:80px}.participant-code{font-size:16px}.participant-name{font-size:11px}.spin-button,.reset-button{padding:15px 30px;font-size:16px}.result{min-width:auto;width:100%}.result h2{font-size:22px}.winners-grid{grid-template-columns:repeat(2,1fr)}.winner-code{font-size:18px}.winner-name{font-size:13px}}@media(max-width:480px){.slot-machine{padding:15px}.slot-header h2{font-size:1.5rem}.slots-container{gap:8px;padding:10px}.slot-column{width:70px;height:60px}.slot-column.slot-single{width:298px}.slot-item{height:60px}.participant-code{font-size:13px}.participant-name{font-size:9px}.controls{flex-direction:column;width:100%}.spin-button,.reset-button{width:100%}.winners-grid{grid-template-columns:1fr}}.upload-button{position:fixed;top:20px;right:20px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border:none;font-size:36px;font-weight:700;cursor:pointer;box-shadow:0 4px 15px #d4543e66;transition:all .3s ease;z-index:100;display:flex;align-items:center;justify-content:center;line-height:1}.upload-button:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 6px 20px #ff9d3d99}.upload-button:active{transform:scale(.95) rotate(90deg)}.music-button{position:fixed;top:20px;right:100px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border:none;font-size:28px;cursor:pointer;box-shadow:0 4px 15px #d4543e66;transition:all .3s ease;z-index:100;display:flex;align-items:center;justify-content:center;line-height:1}.music-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #ff9d3d99}.music-button:active{transform:scale(.95)}.upload-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:40px;border-radius:20px;box-shadow:0 20px 60px #0000004d;z-index:1001;min-width:500px;max-width:600px;animation:popupSlideIn .3s ease}.upload-popup h2{margin:0 0 25px;color:#d4543e;text-align:center;font-weight:700}.upload-content{display:flex;flex-direction:column;gap:20px;margin-bottom:25px}.upload-instruction{background:#fffaf0cc;padding:15px;border-radius:10px;border-left:4px solid #ff9d3d;margin:0;font-size:14px;line-height:1.6;color:#555}.download-sample-btn{background:linear-gradient(135deg,#ffc571,#ff9d3d);color:#fff;border:none;padding:12px 25px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ffc5714d}.download-sample-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ffc57180}.upload-area{border:2px dashed #ff9d3d;border-radius:10px;padding:10px;text-align:center;background:#fffaf080}.upload-file-btn{background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border:none;padding:12px 30px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #d4543e4d}.upload-file-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.participants-table-container{margin-top:20px}.participants-table-container h3{color:#d4543e;margin-bottom:10px;font-size:18px;text-align:left;font-weight:700}.participants-table{max-height:300px;overflow-y:auto;border:1px solid #ddd;border-radius:10px;background:#fff}.participants-table table{width:100%;border-collapse:collapse}.participants-table thead{position:sticky;top:0;background:linear-gradient(135deg,#ff9d3d,#d4543e);z-index:1}.participants-table th{padding:12px;text-align:left;color:#fff;font-weight:700;font-size:14px}.participants-table th:first-child{width:80px;text-align:center}.participants-table tbody tr{border-bottom:1px solid #eee;transition:background-color .2s}.participants-table tbody tr:hover{background-color:#f8f9fa}.participants-table td{padding:10px 12px;font-size:14px;color:#555}.participants-table td:first-child{text-align:center;font-weight:700;color:#ff9d3d}.participants-table::-webkit-scrollbar{width:8px}.participants-table::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.participants-table::-webkit-scrollbar-thumb{background:#ff9d3d;border-radius:10px}.participants-table::-webkit-scrollbar-thumb:hover{background:#d4543e}.reset-confirm-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:40px;border-radius:20px;box-shadow:0 20px 60px #0006;z-index:1001;min-width:500px;max-width:600px;animation:popupSlideIn .3s ease;border:3px solid #d4543e}.reset-confirm-popup h2{margin:0 0 20px;color:#d4543e;text-align:center;font-size:28px}.reset-warning{text-align:center;font-size:16px;line-height:1.6;color:#555;margin-bottom:30px;padding:20px;background:#fffaf0cc;border-radius:10px;border-left:4px solid #ff9d3d}.reset-warning strong{color:#d4543e;font-size:17px}.reset-confirm-buttons{display:flex;gap:15px}.reset-cancel-btn{flex:1;background:linear-gradient(135deg,#c8a882,#a89070);color:#fff;border:none;padding:15px 30px;font-size:18px;font-weight:700;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #a890704d}.reset-cancel-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #a8907080}.reset-confirm-btn{flex:1;background:linear-gradient(135deg,#ff9d3d,#d4543e);color:#fff;border:none;padding:15px 30px;font-size:18px;font-weight:700;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #d4543e66}.reset-confirm-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d4543e99}@keyframes popupSlideIn{0%{opacity:0;transform:translate(-50%,-60%)}to{opacity:1;transform:translate(-50%,-50%)}}.App{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:160px 20px 20px;background-image:url(/assets/Background_Luckydraw-CEh6r2bI.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}.container{text-align:center;max-width:800px;width:100%}.title{color:#fff;font-size:2.5rem;margin-bottom:5px;text-shadow:3px 3px 6px rgba(212,84,62,.6),0 0 20px rgba(255,157,61,.4);animation:pulse 2s ease-in-out infinite;font-weight:700}.subtitle{color:#d4543e;font-size:1.5rem;margin-bottom:30px;font-weight:700;text-shadow:2px 2px 4px rgba(255,255,255,.8),0 0 10px rgba(212,84,62,.3)}.footer{margin-top:40px;color:#fff;font-size:1.1rem;opacity:.8}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media(max-width:768px){.title{font-size:2rem}.subtitle{font-size:1rem}}