*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Roboto',sans-serif;background:#f0f2f5;color:#333;display:flex;flex-direction:column;min-height:100vh}
.demo-banner{background:#ff9800;color:#fff;text-align:center;padding:6px;font-size:12px;font-weight:700;z-index:1000}

/* MAIN CONTENT */
.main-content { flex: 1; display: flex; flex-direction: column; }
.screen{display:none;flex:1;padding:20px 16px; align-items: center; justify-content: center;}
.screen.active{display:flex;}

/* HEADER */
.header{width:100%;}
.header-top{background:#000;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 15%;font-size:12px;opacity:.9;}
.top-right{color:#ffd700;font-weight:700;}
.header-main{background:linear-gradient(90deg, #00562b 0%, #00562b 60%, #003a70 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 15%}
.logo{display:flex;align-items:center;gap:12px}
.logo-img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.logo-text-group{display:flex;flex-direction:column;text-align:left;}
.logo-text{font-size:20px;font-weight:800;}
.logo-subtext{font-size:11px;font-weight:400;opacity:0.9;}
.jackpot-badge{background:linear-gradient(135deg,#ffcc00,#ff9900);border-radius:8px;padding:8px 20px;text-align:right;box-shadow:0 2px 10px rgba(0,0,0,.3);color:#000;}
.jackpot-badge small{font-size:10px;display:block;letter-spacing:1px;font-weight:700;}
.jackpot-badge strong{font-size:18px;display:flex;align-items:center;gap:6px;font-weight:900;}
.header-sub{text-align:right;padding:8px 15%;font-size:12px;font-weight:700;letter-spacing:1px;color:#ffd700;background:#004d26;}
.header-bar{height:6px;background:linear-gradient(90deg, #ffcc00 25%, #008000 25%, #008000 50%, #cc0000 50%, #cc0000 75%, #0000cc 75%);}

/* CARD */
.card{background:#fff;border-radius:16px;padding:40px 30px;box-shadow:0 10px 30px rgba(0,0,0,.08);text-align:center;width:100%;max-width:550px;}
.card-icon{font-size:40px;margin-bottom:12px;}
.card-icon.hashtag-icon { width: 60px; height: 60px; background: #e8f5e9; color: #0a7e55; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; margin: 0 auto 16px; }
.card h1{font-size:24px;color:#1a1a2e;margin-bottom:10px}
.subtitle{color:#777;font-size:15px;margin-bottom:28px}

/* FORM */
form{text-align:left}
label{display:block;font-size:14px;font-weight:500;margin:16px 0 8px;color:#444}
input,select{width:100%;padding:14px 16px;border:1.5px solid #ddd;border-radius:10px;font-size:15px;font-family:inherit;transition:border .2s;background:#fff}
input:focus,select:focus{outline:none;border-color:#0a7e55;box-shadow:0 0 0 3px rgba(10,126,85,.1)}
select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 16px center #fff}
.error{color:#e53935;font-size:12px;min-height:16px;margin-top:4px}

/* LARGE INPUT (Lucky Number) */
.large-input { font-size: 48px; color: #6e9f80; font-weight: 900; text-align: center; border: 2px solid #0a7e55; border-radius: 12px; height: 90px; letter-spacing: 10px; background: #f1f8f4; }
.large-input:focus { border-color: #006d4e; box-shadow: 0 0 0 4px rgba(10,126,85,.15); }
.large-input::placeholder { color: #a5d6a7; }

/* BUTTONS */
.btn{width:100%;padding:16px;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;margin-top:20px;transition:all .3s;font-family:inherit;letter-spacing:.5px}
.btn-green{background:linear-gradient(135deg,#0a7e55,#004d34);color:#fff}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(10,126,85,.4)}
.btn-blue{background:linear-gradient(135deg,#002395,#003cb3);color:#fff}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,35,149,.4)}
.btn-gold{background:linear-gradient(135deg,#f5c518,#e8a000);color:#1a1a2e;font-size:17px}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(245,197,24,.5)}
.secure-text{color:#888;font-size:12px;margin-top:16px}
.info-text{color:#666;font-size:13px;text-align:center;margin:12px 0;font-style:italic}

/* PRIZES */
.prize-list{text-align:left;margin:16px 0}
.prize{display:flex;align-items:center;padding:16px;border-radius:12px;margin-bottom:12px;background:#f8f9fa;border:1px solid #eee;transition:transform .2s}
.prize:hover{transform:translateX(5px)}
.prize.gold{background:linear-gradient(135deg,#fff8e1,#ffecb3);border-color:#ffd54f}
.prize.silver{background:linear-gradient(135deg,#f5f5f5,#e0e0e0);border-color:#bdbdbd}
.prize.bronze{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-color:#ffb74d}
.prize-pos{font-weight:700;font-size:14px;min-width:120px}
.prize-label{flex:1;font-size:14px;color:#555}
.prize-val{font-weight:900;color:#0a7e55;font-size:16px;white-space:nowrap}

/* DRAW ANIMATION / DRUM MACHINE */
#drawCard { position: relative; overflow: hidden; }
#confettiCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.draw-anim{text-align:center;padding:10px 0 20px}
.drum-container { position: relative; width: 280px; height: 300px; margin: 20px auto; display: flex; flex-direction: column; align-items: center; }
.drum-handle { width: 40px; height: 15px; background: #06402B; border-radius: 5px 5px 0 0; }
.drum { width: 260px; height: 260px; background: radial-gradient(circle, #2E8B57 0%, #006400 80%, #06402B 100%); border-radius: 50%; border: 8px solid #06402B; position: relative; overflow: hidden; box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 10px 20px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.drum::before { content: ''; position: absolute; width: 100%; height: 100%; background: repeating-conic-gradient(from 0deg, transparent 0deg 15deg, rgba(255,255,255,0.05) 15deg 30deg); border-radius: 50%; animation: spin-bg 10s linear infinite; }
@keyframes spin-bg { 100% { transform: rotate(360deg); } }
.drum-shine { position: absolute; top: 5%; left: 10%; width: 80%; height: 80%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 50%); border-radius: 50%; pointer-events: none; z-index: 5; }
.drum-base { width: 120px; height: 15px; background: #06402B; border-radius: 0 0 15px 15px; margin-top: -5px; z-index: 2; }
.live-indicator { color: #e53935; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: 1px; }
.live-dot { width: 10px; height: 10px; background: #e53935; border-radius: 50%; animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* LOTTERY BALLS */
.ball { position: absolute; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; color: #111; box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.4); z-index: 3; }
.ball::after { content: ''; position: absolute; width: 25px; height: 25px; background: #fff; border-radius: 50%; z-index: -1; }
.ball.color-1 { background: radial-gradient(circle at 30% 30%, #ffd54f, #ffb300); }
.ball.color-2 { background: radial-gradient(circle at 30% 30%, #ff8a65, #e64a19); }
.ball.color-3 { background: radial-gradient(circle at 30% 30%, #ce93d8, #8e24aa); }
.ball.color-4 { background: radial-gradient(circle at 30% 30%, #90caf9, #1e88e5); }
.ball.color-5 { background: radial-gradient(circle at 30% 30%, #a5d6a7, #43a047); }

/* DRAW RESULT */
#drawResult { text-align: center; }
.drum-result .drum { animation: none; }
.drum-result .drum::before { animation: none; transform: rotate(15deg); }
.winning-ball { width: 80px; height: 80px; background: radial-gradient(circle at 30% 30%, #ffd54f, #ffb300); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset -8px -8px 15px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.5); z-index: 4; transform: scale(0); animation: pop-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.winning-ball span { width: 40px; height: 40px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 26px; color: #111; }
@keyframes pop-in { to { transform: scale(1); } }
.winner-card {
  background: linear-gradient(180deg, #f1fcf5 0%, #fdfcf3 100%);
  border: 1px solid #c8e6c9;
  border-radius: 16px;
  padding: 30px;
  margin: 20px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.winner-tag{display:inline-block;background:#10874e;color:#fff;padding:6px 20px;border-radius:20px;font-weight:800;font-size:11px;margin-bottom:12px;letter-spacing:1px;text-transform:uppercase;}
#congratsName{color:#0b5c36;font-size:22px;font-weight:900;margin-bottom:12px;text-transform:uppercase;}
.result-text{color:#555;font-size:14px;margin-bottom:6px;}
.result-text strong { color: #10874e; font-weight:800; }
.prize-amount-glow {
  font-size: 48px;
  font-weight: 900;
  color: #ffc107;
  text-shadow: 0 0 30px rgba(255,193,7,0.8);
  margin: 10px 0;
}
.result-subtext { color: #888; font-size: 12px; }

/* PAYMENT */
.payment-methods{display:flex;gap:12px;margin:16px 0}
.pay-opt{flex:1;cursor:pointer}
.pay-opt input{display:none}
.pay-box{border:2px solid #ddd;border-radius:12px;padding:16px;text-align:center;font-weight:600;font-size:14px;transition:all .2s}
.pay-box span{display:block;font-size:24px;margin-bottom:6px}
.pay-box.selected{border-color:#0a7e55;background:#e8f5e9;color:#0a7e55}

/* FOOTER */
.footer{background:#003311;color:#ccc;width:100%;margin-top:auto;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:30px;padding:40px 15%;}
.footer h3{color:#ffd700;font-size:16px;margin-bottom:12px;font-weight:700;}
.footer p{font-size:14px;margin-bottom:6px;line-height:1.5;}
.footer-bottom{padding:20px 15%;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:12px;color:#888;background:#00220a;}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
.modal-content{background:#fff;border-radius:16px;padding:30px;max-width:400px;width:100%;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modal-content h2{margin-bottom:12px;color:#e65100}
.modal-content p{color:#555;margin-bottom:20px;line-height:1.5}

/* RESPONSIVE */
@media(min-width:768px){
 .footer-grid{grid-template-columns:repeat(3, 1fr);}
 .footer-bottom{text-align:left;}
}
@media(max-width:767px){
 .header-top{justify-content:center;padding:8px;font-size:11px;}
 .top-right{display:none;}
 .header-main{flex-direction:column;gap:16px;text-align:center;padding:16px;}
 .logo{justify-content:center;}
 .header-sub{text-align:center;}
 .large-input { font-size: 36px; height: 70px; letter-spacing: 5px; }
 .prize-amount-glow { font-size: 28px; }
 #congratsName { font-size: 18px; }
 .winner-card { padding: 20px; }
 .prize { flex-wrap: wrap; padding: 12px; gap: 4px; }
 .prize-pos { min-width: auto; font-size: 13px; }
 .prize-label { flex: 0 0 auto; font-size: 13px; }
 .prize-val { flex: 0 0 100%; text-align: right; font-size: 18px; margin-top: 4px; }
 .card { padding: 28px 16px; }
 .card h1 { font-size: 20px; }
 .subtitle { font-size: 13px; margin-bottom: 20px; }
}