:root{--bonus-purple:var(--lifetime-purple);--bonus-pink-glow:0 0 16px var(--pink);--bonus-cyan-glow:0 0 16px var(--cyan);--bonus-gold-glow:0 0 18px var(--amber);--bonus-dimmer:.48;--bonus-backdrop:color-mix(in srgb,var(--navy) 94%,transparent)}
#propage{position:fixed;inset:0;z-index:30;overflow:auto;touch-action:pan-y;background:var(--navy);padding:54px 16px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
#propage h2{margin:0;font:800 28px var(--title);color:var(--cream);text-shadow:2px 2px 0 var(--pink),4px 4px 0 var(--cyan)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:1050px}
#propage .pro{max-width:none;border-radius:8px;background:var(--navy2);border-color:var(--pink);box-shadow:var(--bonus-pink-glow);display:flex;flex-direction:column;gap:12px;padding:20px 16px}
#propage .pro.yearly{border-color:var(--amber);box-shadow:var(--bonus-gold-glow)}
#propage .pro.lifetime{border-color:var(--cyan);box-shadow:var(--lifetime-glow)}
#propage .pro h3{letter-spacing:0;color:var(--pink);margin:0;font-size:24px}
#propage .pro.yearly h3{color:var(--amber)}#propage .pro.lifetime h3{color:var(--cyan)}
.plan-tag{min-height:18px;font:700 12px var(--mono);color:var(--amber)}.lifetime .plan-tag{color:var(--cyan)}
.plan-price{font:800 36px var(--title);color:var(--cream)}.plan-price small{display:block;font:14px var(--mono);margin-top:4px}
#propage .pro ul{font:14px/1.65 var(--mono);color:var(--cream);margin:0 0 4px;padding-left:18px;list-style:disc;flex:1}
#propage .pro li{margin-bottom:9px}#propage .pro p{margin:0;text-align:left;color:var(--cyan);font-size:14px}
#propage .pro .pb{margin-top:auto;display:block}#propage .pro button{width:100%;padding:12px;font-size:20px;letter-spacing:0}
.plan-current{color:var(--cyan);font:14px var(--mono)}
.lifetime-availability{font:12px/1.5 var(--mono);color:var(--cyan)}
#lifetimeprogress{display:block;width:100%;height:6px;margin:7px 0;appearance:none;border:1px solid var(--cyan);border-radius:3px;background:var(--navy);overflow:hidden;box-shadow:var(--bonus-cyan-glow)}
#lifetimeprogress::-webkit-progress-bar{background:var(--navy)}
#lifetimeprogress::-webkit-progress-value{background:var(--cyan)}
#lifetimeprogress::-moz-progress-bar{background:var(--cyan)}
#rewardpro{font-size:17px;padding:9px 20px;margin:4px auto}
#bonusbutton{font:800 20px var(--title);border:2px solid var(--cyan);border-radius:6px;color:var(--cyan);background:var(--navy2);padding:10px 20px;box-shadow:var(--bonus-cyan-glow);cursor:pointer;margin:8px 0;min-height:44px}
#bonusbutton.locked{font-size:16px;box-shadow:none}#bonusbutton:disabled{opacity:var(--bonus-dimmer);box-shadow:none;cursor:default;filter:grayscale(1)}
#bonusmodal{position:fixed;inset:0;z-index:55;overflow:auto;touch-action:pan-y;background:var(--bonus-backdrop);display:flex;align-items:center;justify-content:center;padding:18px}
.bonus-box{position:relative;width:100%;max-width:410px;margin:auto;text-align:center;background:var(--navy2);border:2px solid var(--cyan);border-radius:8px;box-shadow:var(--bonus-cyan-glow);padding:24px 16px 18px}
.bonus-box h2{font:800 28px var(--title);color:var(--cream);margin:0 0 18px;text-shadow:2px 2px 0 var(--pink)}
#bonusclose{position:absolute;right:8px;top:8px;width:32px;height:32px;background:none;border:0;color:var(--cyan);font-size:22px;cursor:pointer}
.wheel-frame{position:relative;width:min(100%,320px);aspect-ratio:1;margin:20px auto;border:5px dotted var(--amber);border-radius:50%;box-shadow:var(--bonus-gold-glow);animation:rimflash .6s steps(2) infinite}
.wheel-frame canvas{display:block;width:100%;height:100%;border-radius:50%}
.wheel-pointer{position:absolute;left:50%;top:-17px;transform:translateX(-50%);z-index:2;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:30px solid var(--pink);filter:drop-shadow(0 0 5px var(--pink))}
.wheel-hub{position:absolute;inset:36%;border-radius:50%;border:3px solid var(--cyan);background:var(--navy);box-shadow:var(--bonus-cyan-glow);object-fit:cover;width:28%;height:28%}
#bonuswin{display:block;width:100px;height:100px;object-fit:contain;margin:10px auto}
#bonusmessage{font:16px/1.5 var(--mono);color:var(--cream);margin:12px 0;min-height:48px}
#bonusspin,#bonusupgrade{width:100%;font-size:20px}.bonus-legend{color:var(--cyan);font:12px/1.6 var(--mono);margin:10px 0}
@keyframes rimflash{50%{border-color:var(--pink);box-shadow:var(--bonus-pink-glow)}}
@media(max-width:700px){.plan-grid{grid-template-columns:minmax(0,1fr);max-width:390px}}
@media(prefers-reduced-motion:reduce){.wheel-frame{animation:none}#propage .pro button{animation:none}}