*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--red:#FF231F;--gold:#FFD56B;--bg:#050202}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100dvh}
.bg{position:fixed;inset:0;background:
radial-gradient(circle at 50% -12%,rgba(255,35,31,.34),transparent 36%),
radial-gradient(circle at 10% 70%,rgba(255,35,31,.13),transparent 28%),
radial-gradient(circle at 90% 75%,rgba(255,213,107,.08),transparent 24%),
linear-gradient(180deg,#160303,#070202 54%,#020101)}
.sparks{position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:
radial-gradient(circle,rgba(255,35,31,.95) 0 1px,transparent 2px),
radial-gradient(circle,rgba(255,213,107,.85) 0 1px,transparent 2px);
background-size:90px 90px,145px 145px;animation:sparks 18s linear infinite}
@keyframes sparks{from{transform:translateY(-70px)}to{transform:translateY(90px)}}
.app{position:relative;width:min(430px,100%);height:100dvh;margin:auto;padding:max(12px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.logo{width:min(132px,36vw);height:70px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,35,31,.7)) drop-shadow(0 0 25px rgba(255,213,107,.16))}
.heading{text-align:center;margin-top:0}
.heading span{display:block;color:#fff;font-size:30px;font-weight:1000;letter-spacing:.08em}
.heading strong{display:block;color:var(--red);font-size:54px;line-height:.9;font-weight:1000;text-shadow:0 0 15px rgba(255,35,31,.72),0 0 34px rgba(255,35,31,.3)}
.heading p{margin:8px 0 0;color:rgba(255,255,255,.56);font-size:13px}
.coin-area{position:relative;flex:1;min-height:270px;width:100%;display:grid;place-items:center;perspective:1300px}
.red-glow{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(255,35,31,.18),transparent 68%);filter:blur(8px);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08);opacity:.68}}
.shadow{position:absolute;bottom:12%;width:205px;height:30px;border-radius:50%;background:rgba(0,0,0,.82);filter:blur(9px);transition:.2s}
.coin-button{position:relative;width:min(67vw,285px,38dvh);aspect-ratio:1;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;perspective:1300px}
.coin{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 30px 35px rgba(0,0,0,.74)) drop-shadow(0 0 26px rgba(255,35,31,.26))}
.coin.toss{animation:toss 2.8s cubic-bezier(.12,.75,.15,1) forwards}
@keyframes toss{
0%{transform:translateY(0) rotateY(0deg) rotateX(0deg) scale(1)}
12%{transform:translateY(-35px) rotateY(250deg) rotateX(10deg) scale(1.03)}
35%{transform:translateY(-130px) rotateY(980deg) rotateX(-15deg) scale(1.08)}
55%{transform:translateY(-165px) rotateY(1580deg) rotateX(16deg) scale(1.11)}
75%{transform:translateY(-60px) rotateY(2180deg) rotateX(-6deg) scale(1.03)}
88%{transform:translateY(9px) rotateY(2470deg) scale(.995)}
94%{transform:translateY(-14px) rotateY(2510deg) scale(1.01)}
100%{transform:translateY(0) rotateY(2520deg) rotateX(0) scale(1)}
}
.face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;display:grid;place-items:center;background:
radial-gradient(circle at 31% 23%,#fff9d0 0%,#ffe48a 16%,#f0ba43 34%,#c47712 57%,#733500 80%,#291000 100%);
border:12px solid #b46d0c;box-shadow:inset 0 0 0 3px #fff1ab,inset 0 0 0 11px rgba(100,42,0,.28),inset -20px -24px 30px rgba(65,20,0,.34),inset 14px 12px 22px rgba(255,255,255,.17)}
.face:before{content:"";position:absolute;inset:4%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.05) 0 1.5deg,transparent 1.5deg 8deg)}
.back{transform:rotateY(180deg)}
.rim{position:absolute;inset:8%;border-radius:50%;border:3px solid rgba(92,37,0,.6);box-shadow:0 0 0 4px rgba(255,242,173,.18),inset 0 0 18px rgba(73,24,0,.25)}
.face img{position:relative;z-index:3;width:58%;max-height:42%;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(255,255,255,.32)) drop-shadow(0 4px 6px rgba(75,22,0,.22))}
.face small{position:absolute;z-index:4;bottom:20%;color:#702300;font-size:13px;font-weight:1000;letter-spacing:.18em}
.star{position:relative;z-index:3;margin-top:-4px;font-size:120px;color:#7d2a00;text-shadow:0 2px 0 #fff0a0,2px 4px 0 rgba(61,18,0,.28)}
.status{text-align:center;margin-top:-6px;min-height:42px}
.status span{display:block;color:var(--gold);font-size:10px;font-weight:1000;letter-spacing:.18em}
.status strong{display:block;margin-top:4px;font-size:16px}
.reward{width:100%;margin-top:10px;padding:14px;border-radius:20px;background:linear-gradient(180deg,rgba(255,35,31,.19),rgba(255,35,31,.05)),rgba(7,3,3,.9);border:1px solid rgba(255,35,31,.72);box-shadow:0 0 25px rgba(255,35,31,.22)}
.hidden{display:none!important}
.reward>span{display:block;color:var(--gold);font-size:10px;font-weight:1000;letter-spacing:.18em}
.reward h2{margin:5px 0 0;font-size:23px}
.promo{margin-top:10px;padding:9px 10px;border-radius:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:rgba(0,0,0,.28);border:1px solid rgba(255,213,107,.22)}
.promo small{display:block;color:rgba(255,255,255,.48);font-size:9px;letter-spacing:.14em}
.promo strong{display:block;margin-top:4px;color:#FFF1AD;font-size:19px;word-break:break-all}
.promo button{height:38px;padding:0 13px;border-radius:11px;border:1px solid rgba(255,213,107,.5);background:rgba(255,213,107,.08);color:var(--gold);font-weight:1000}
.claim,.flip{width:100%;border:0;color:#fff;font-weight:1000;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.24),transparent 35%),linear-gradient(135deg,#ff6b61 0%,var(--red) 46%,#b50c08 72%,#600000 100%);box-shadow:0 0 0 3px rgba(255,213,107,.9),0 13px 28px rgba(0,0,0,.54),0 0 28px rgba(255,35,31,.44)}
.claim{min-height:48px;margin-top:10px;border-radius:14px;font-size:16px;letter-spacing:.08em}
.flip{min-height:62px;margin-top:12px;border-radius:21px;font-size:24px;letter-spacing:.075em}
.flip:disabled{opacity:.62}
.footer{margin-top:8px;color:rgba(255,213,107,.6);font-size:12px;font-weight:800}
#confetti{position:fixed;inset:0;z-index:100;pointer-events:none}
@media(max-height:720px){
.logo{width:104px;height:48px}.heading span{font-size:22px}.heading strong{font-size:39px}.heading p{margin-top:4px;font-size:10px}
.coin-area{min-height:205px}.coin-button{width:min(54vw,205px,31dvh)}.status strong{font-size:13px}.reward{padding:10px;margin-top:7px}.reward h2{font-size:18px}
.promo{margin-top:7px;padding:7px 8px}.claim{min-height:42px;margin-top:7px}.flip{min-height:48px;margin-top:8px;font-size:19px}.footer{margin-top:4px}}