*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Cairo',sans-serif;background:#0a0a0f;color:#f0f0f0;min-height:100vh;overflow-x:hidden;position:relative}
.stars{position:fixed;inset:0;background:radial-gradient(circle at 20% 30%,rgba(201,162,39,.08) 0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(100,50,150,.1) 0,transparent 40%),radial-gradient(circle at 50% 50%,#15151f 0,#0a0a0f 100%);z-index:-1}
.app{max-width:480px;margin:0 auto;padding:14px 16px 30px;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bot-name{font-weight:700;color:#c9a227;font-size:14px}
.balance-chip{background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.4);color:#e8c547;padding:5px 12px;border-radius:20px;font-size:13px;font-weight:600}
.title{text-align:center;font-size:26px;font-weight:900;background:linear-gradient(135deg,#e8c547,#c9a227);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:8px 0 4px}
.subtitle{text-align:center;font-size:12px;color:#8a8a9a;margin-bottom:14px}
.status-card{background:rgba(20,20,30,.7);border:1px solid rgba(201,162,39,.35);border-radius:14px;padding:12px 14px;margin-bottom:14px;backdrop-filter:blur(10px)}
.status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.status-label{font-size:13px;color:#b0b0c0}
.status-value{font-size:13px;font-weight:700;color:#e8c547}
.progress-bar{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:6px}
.progress-fill{height:100%;background:linear-gradient(90deg,#2ecc71,#e8c547);transition:width .6s ease;border-radius:3px;width:100%}
.progress-text{display:flex;justify-content:space-between;font-size:11px;color:#8a8a9a}
.progress-text b{color:#c9a227}
.wheel-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:360px;margin:6px auto 18px}
.pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:10;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid #fff;filter:drop-shadow(0 3px 6px rgba(0,0,0,.9))}
.wheel-svg-container{position:absolute;inset:0;border-radius:50%;border:6px solid #c9a227;box-shadow:0 0 0 3px rgba(201,162,39,.25),0 0 40px rgba(201,162,39,.4),inset 0 0 30px rgba(0,0,0,.6);background:#0a0a0f;overflow:hidden}
.wheel-svg{width:100%;height:100%;transition:transform 4s cubic-bezier(.17,.67,.12,.99);transform-origin:50% 50%}
.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,#1a1a25,#0a0a0f);border:3px solid #c9a227;display:flex;align-items:center;justify-content:center;font-size:24px;z-index:5;box-shadow:0 0 20px rgba(201,162,39,.5)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat-card{background:rgba(20,20,30,.7);border:1px solid rgba(201,162,39,.25);border-radius:12px;padding:10px 6px;text-align:center;backdrop-filter:blur(10px)}
.stat-icon{font-size:18px;margin-bottom:2px}
.stat-value{font-size:18px;font-weight:900;color:#e8c547;line-height:1.2}
.stat-label{font-size:10px;color:#8a8a9a;margin-top:2px}
.spin-btn{width:100%;padding:16px;font-family:inherit;font-size:17px;font-weight:900;color:#1a1a1a;background:linear-gradient(135deg,#e8c547,#c9a227);border:none;border-radius:14px;cursor:pointer;box-shadow:0 6px 24px rgba(201,162,39,.4);transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.spin-btn:active{transform:scale(.97);box-shadow:0 3px 12px rgba(201,162,39,.5)}
.spin-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.spin-icon{font-size:22px;display:inline-block}
.spin-btn:not(:disabled) .spin-icon{animation:wiggle 1.4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(20deg)}}
.footer{text-align:center;font-size:11px;color:#666;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fadeIn .3s}
.modal-overlay.show{display:flex}
.modal-card{background:linear-gradient(180deg,#1a1a25,#0f0f18);border:1px solid #c9a227;border-radius:20px;padding:24px 20px;text-align:center;max-width:340px;width:100%;box-shadow:0 20px 60px rgba(201,162,39,.3);animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
.modal-icon{font-size:56px;margin-bottom:8px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}
.modal-title{font-size:22px;font-weight:900;color:#e8c547;margin-bottom:12px}
.modal-prize{font-size:26px;font-weight:900;color:#fff;margin-bottom:8px;line-height:1.3}
.modal-message{font-size:13px;color:#8a8a9a;margin-bottom:18px;line-height:1.6}
.modal-btn{padding:12px 32px;background:linear-gradient(135deg,#e8c547,#c9a227);border:none;border-radius:12px;font-family:inherit;font-weight:900;font-size:15px;color:#1a1a1a;cursor:pointer}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(30,30,40,.95);border:1px solid #c9a227;color:#e8c547;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;z-index:200;transition:transform .3s;max-width:90%}
.toast.show{transform:translateX(-50%) translateY(0)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.confetti{position:fixed;width:10px;height:10px;top:-10px;z-index:150;pointer-events:none;animation:confettiFall 3s linear forwards}
@keyframes confettiFall{to{transform:translateY(100vh) rotate(720deg);opacity:0}}