/* ===== MONEY TAP — cosmic space premium theme ===== */
:root{
  --gold:#f5c542; --gold-deep:#d4a017; --gold-light:#ffe9a8;
  --space:#0a0618; --space-2:#120b2e; --space-3:#1c1245;
  --cosmic:#8b5cf6; --nebula:#c026d3; --starblue:#5cc8ff;
  --cream:#f0eafc; --muted:#a79fc9;
  --card:rgba(28,18,69,.72); --stroke:rgba(139,92,246,.35);
  --gold-stroke:rgba(245,197,66,.35);
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(60% 40% at 15% 10%, rgba(192,38,211,.28) 0%, transparent 70%),
    radial-gradient(50% 35% at 85% 20%, rgba(92,200,255,.18) 0%, transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(76,29,149,.45) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% -10%, #1c1245 0%, var(--space) 55%, #050310 100%);
  color:var(--cream); overflow:hidden; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
/* ---- STARFIELD ---- */
.starfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--tw,3s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.nebula-wisp{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}

#app{height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;position:relative;z-index:1}

/* ---- TOP BAR ---- */
#topbar{
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
  background:linear-gradient(180deg,rgba(10,6,24,.96),rgba(10,6,24,.7));
  border-bottom:1px solid var(--stroke);
  box-shadow:0 1px 24px rgba(139,92,246,.25);
  z-index:5; backdrop-filter:blur(10px);
}
.tb-row{display:flex;align-items:center;justify-content:space-between}
.tb-left{display:flex;align-items:center;gap:10px}
.tb-logo{width:44px;height:44px;border-radius:50%;box-shadow:0 0 18px rgba(245,197,66,.55),0 0 34px rgba(139,92,246,.4);animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.tb-title{font-weight:900;letter-spacing:2.5px;font-size:18px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(245,197,66,.35))}
.tb-tier{font-size:13px;color:var(--muted)}
.tb-reset{background:rgba(139,92,246,.08);border:1px solid var(--stroke);color:var(--cream);
  width:40px;height:40px;border-radius:12px;font-size:20px;cursor:pointer;opacity:.4}
.tb-reset:active{opacity:1}
.tb-reset:active{transform:scale(.92)}

.coins-bar{margin-top:10px;text-align:center}
.coins-row{display:flex;align-items:center;justify-content:center;gap:8px}
.coin-ico{font-size:34px;filter:drop-shadow(0 0 10px rgba(245,197,66,.7))}
.gold-coin{display:inline-block;width:34px;height:34px;border-radius:50%;vertical-align:middle;
background:radial-gradient(circle at 35% 30%, #fff6c9 0%, #f5c542 35%, #d4a017 70%, #8a5a00 100%);
border:3px solid #ffe27a;box-shadow:0 0 14px rgba(245,197,66,.85),0 0 30px rgba(139,92,246,.4), inset 0 -3px 6px rgba(0,0,0,.3);
position:relative}
.gold-coin::after{content:'$';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:900;color:#8a5a00}
.gold-coin.sm{width:24px;height:24px;border-width:2px}
.gold-coin.sm::after{font-size:14px}
.coins-num{font-size:44px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.5px;
  background:linear-gradient(180deg,#fff7dd,var(--gold) 65%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 20px rgba(245,197,66,.4))}
.coins-sub{margin-top:2px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dot{margin:0 6px;opacity:.5}
.tier-progress{height:8px;background:rgba(139,92,246,.15);border-radius:99px;margin-top:10px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.tier-fill{height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--cosmic),var(--nebula),var(--gold));transition:width .4s ease;
  box-shadow:0 0 14px rgba(192,38,211,.7)}
.tier-next{text-align:center;font-size:12px;color:var(--muted);margin-top:5px}

/* ---- VIEWS ---- */
#main{flex:1;overflow:hidden;position:relative}
.view{display:none;height:100%;overflow-y:auto;padding:16px 16px 20px;-webkit-overflow-scrolling:touch}
.view.active{display:block}

/* ---- TAP STAGE ---- */
#view-tap{display:none;align-items:center;justify-content:center;flex-direction:column;padding:0}
#view-tap.active{display:flex}
.tap-stage{position:relative;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
#particles{position:absolute;inset:0;pointer-events:none;z-index:1}
#floaters{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.floater{position:absolute;font-weight:900;color:var(--gold-light);font-size:22px;
  text-shadow:0 2px 8px rgba(0,0,0,.6),0 0 16px rgba(245,197,66,.7);
  animation:floatUp .9s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(1.15)}}
.tap-btn{background:none;border:none;cursor:pointer;z-index:2;position:relative;
  filter:drop-shadow(0 18px 44px rgba(139,92,246,.45));touch-action:manipulation}
/* Saturn orbit ring around the coin */
.tap-btn::before{content:'';position:absolute;left:50%;top:50%;width:135%;height:44%;
  transform:translate(-50%,-50%) rotate(-14deg);border:3px solid rgba(139,92,246,.5);
  border-radius:50%;box-shadow:0 0 18px rgba(139,92,246,.5),inset 0 0 12px rgba(139,92,246,.25);
  pointer-events:none;z-index:3}
.tap-btn img{width:min(66vw,270px);height:min(66vw,270px);border-radius:50%;
  animation:coinGlow 2.4s ease-in-out infinite;pointer-events:none}
@keyframes coinGlow{0%,100%{filter:drop-shadow(0 0 16px rgba(245,197,66,.6)) drop-shadow(0 0 40px rgba(139,92,246,.3))}
  50%{filter:drop-shadow(0 0 34px rgba(245,197,66,.95)) drop-shadow(0 0 60px rgba(139,92,246,.5))}}
.tap-btn.tapped img{animation:tapSquash .18s ease-out}
@keyframes tapSquash{0%{transform:scale(1)}40%{transform:scale(.88,.92)}100%{transform:scale(1)}}
.tap-hint{margin-top:26px;font-weight:800;letter-spacing:4px;font-size:14px;color:var(--gold);
  animation:hintPulse 1.6s ease-in-out infinite;z-index:2;text-shadow:0 0 16px rgba(245,197,66,.5)}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}
.combo{position:absolute;top:18px;z-index:4;background:linear-gradient(180deg,#ff9a3d,#ff5f2b);
  padding:8px 18px;border-radius:99px;font-weight:900;font-size:15px;letter-spacing:1px;
  box-shadow:0 4px 20px rgba(255,120,40,.5);animation:comboPop .25s ease-out}
.combo.hidden{display:none}
@keyframes comboPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.golden-btn{position:absolute;bottom:24px;z-index:4;border:none;cursor:pointer;
  background:linear-gradient(180deg,#fff3c4,var(--gold) 60%,var(--gold-deep));
  color:#3a2a00;font-weight:900;font-size:17px;padding:14px 26px;border-radius:99px;
  box-shadow:0 6px 30px rgba(245,197,66,.7),0 0 50px rgba(139,92,246,.4);animation:goldenShake .5s ease-in-out infinite}
.golden-btn.hidden{display:none}
@keyframes goldenShake{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.05)}}

/* ---- SHOP ---- */
.view-title{font-size:26px;font-weight:900;margin-bottom:4px;letter-spacing:.5px;
  background:linear-gradient(120deg,var(--starblue),var(--cosmic) 40%,var(--gold-light) 75%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(139,92,246,.35))}
.shop-tabs{display:flex;gap:8px;margin:14px 0}
.shop-tab{flex:1;padding:11px 6px;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(139,92,246,.08);color:var(--cream);font-weight:700;font-size:13px;cursor:pointer;
  transition:all .2s}
.shop-tab.active{background:linear-gradient(180deg,rgba(139,92,246,.35),rgba(139,92,246,.12));
  border-color:var(--cosmic);color:#fff;box-shadow:0 0 16px rgba(139,92,246,.45)}
.shop-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--stroke);
  border-radius:var(--radius);padding:14px;margin-bottom:10px;backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  animation:cardIn .35s ease-out}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.shop-ico{font-size:34px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(139,92,246,.3),rgba(92,200,255,.12));border-radius:14px;flex-shrink:0;
  border:1px solid var(--stroke);box-shadow:0 0 12px rgba(139,92,246,.3)}
.shop-info{flex:1;min-width:0}
.shop-name{font-weight:800;font-size:15px}
.shop-desc{font-size:12px;color:var(--muted);margin-top:2px}
.shop-owned{font-size:12px;color:var(--starblue);font-weight:700;margin-top:3px}
.shop-buy{flex-shrink:0;border:none;cursor:pointer;font-weight:900;font-size:14px;
  padding:12px 16px;border-radius:14px;min-width:96px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#3a2a00;box-shadow:0 4px 16px rgba(245,197,66,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.shop-buy:active{transform:scale(.94)}
.shop-buy.cant{opacity:.35;box-shadow:none;filter:grayscale(.6)}
.shop-buy.maxed{background:rgba(139,92,246,.12);color:var(--muted);box-shadow:none}

/* ---- LEADERS / STATS ---- */
.leaders-card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px;margin:14px 0;
  box-shadow:0 4px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.leaders-sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.leader-list{list-style:none}
.leader-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(139,92,246,.15);font-size:15px}
.leader-list li:last-child{border:none}
.leader-rank{font-size:20px;width:34px;text-align:center}
.leader-name{flex:1;font-weight:700}
.leader-score{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:800}
.leaders-empty{color:var(--muted);font-size:14px;text-align:center;padding:14px 0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat-card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:14px;text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
.stat-num{font-size:22px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(245,197,66,.4)}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:4px}
.btn-gold{display:block;width:100%;border:none;cursor:pointer;font-weight:900;font-size:17px;
  padding:16px;border-radius:16px;margin-top:6px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#3a2a00;box-shadow:0 6px 24px rgba(245,197,66,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:active{transform:scale(.97)}
.ascend-info{text-align:center;font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}


/* ---- REWARDED ADS / FREE COINS ---- */
.reward-card{background:linear-gradient(160deg,rgba(245,197,66,.14),rgba(139,92,246,.14));
  border:1px solid var(--gold-stroke);border-radius:var(--radius);padding:16px;margin:0 0 14px;
  box-shadow:0 0 24px rgba(245,197,66,.18),inset 0 1px 0 rgba(255,255,255,.08);
  animation:cardIn .35s ease-out}
.reward-title{font-weight:900;font-size:15px;color:var(--gold-light);margin-bottom:10px;letter-spacing:.5px;
  text-shadow:0 0 12px rgba(245,197,66,.5)}
.reward-btns{display:flex;gap:10px}
.reward-btn{flex:1;margin-top:0!important;font-size:14px;padding:13px 8px}
.reward-note{text-align:center;font-size:12px;color:var(--starblue);margin-top:8px;font-weight:700;min-height:16px}
.reward-progress{height:8px;background:rgba(139,92,246,.2);border-radius:99px;margin:14px 0 4px;overflow:hidden}
#rewardFill{height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--cosmic),var(--gold));box-shadow:0 0 10px rgba(245,197,66,.6)}

/* ---- TAB BAR ---- */
#tabbar{display:flex;background:rgba(10,6,24,.96);border-top:1px solid var(--stroke);
  box-shadow:0 -4px 24px rgba(139,92,246,.25);
  padding:8px 8px calc(env(safe-area-inset-bottom,0px) + 8px);z-index:5}
.tab{flex:1;background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px;border-radius:14px}
.tab span{font-size:11px;font-weight:700}
.tab.active{color:var(--gold);background:rgba(139,92,246,.16);
  box-shadow:inset 0 0 0 1px var(--stroke),0 0 14px rgba(139,92,246,.3)}

/* ---- AD SLOTS ---- */
.ad-banner{min-height:64px;background:rgba(0,0,0,.5);border-top:1px solid rgba(139,92,246,.2);
  display:flex;align-items:center;justify-content:center;z-index:5}
.ad-placeholder{font-size:12px;color:rgba(255,255,255,.35);text-align:center;padding:10px;line-height:1.5}
.ad-placeholder.big{font-size:16px;padding:30px}
.ad-inter{position:fixed;inset:0;background:rgba(5,3,16,.88);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px}
.ad-inter.hidden{display:none}
.ad-inter-box{background:var(--space-2);border:1px solid var(--stroke);border-radius:20px;
  padding:20px;width:100%;max-width:380px;text-align:center;
  box-shadow:0 0 40px rgba(139,92,246,.35)}
.ad-inter-box .btn-gold{margin-top:14px}

/* ---- TOAST & MODALS ---- */
.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 90px);left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#241a4d,#120b2e);border:1px solid var(--gold);color:var(--gold-light);
  padding:12px 22px;border-radius:99px;font-weight:800;font-size:15px;z-index:200;white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 24px rgba(139,92,246,.5);animation:toastIn .3s ease-out}
.toast.hidden{display:none}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%)}}
.modal{position:fixed;inset:0;background:rgba(5,3,16,.75);z-index:150;display:flex;
  align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(4px)}
.modal.hidden{display:none}
.modal-box{background:linear-gradient(180deg,var(--space-3),var(--space-2));border:1px solid var(--stroke);
  border-radius:22px;padding:26px;width:100%;max-width:360px;text-align:center;animation:cardIn .3s ease-out;
  box-shadow:0 0 40px rgba(139,92,246,.35)}
.modal-box h3{font-size:20px;margin-bottom:10px;color:var(--gold-light)}
.modal-box p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.modal-btns{display:flex;gap:10px}
.btn-ghost{flex:1;padding:14px;border-radius:14px;border:1px solid rgba(139,92,246,.4);
  background:transparent;color:var(--cream);font-weight:700;cursor:pointer}
.btn-danger{flex:1;padding:14px;border-radius:14px;border:none;background:#c0392b;color:#fff;font-weight:800;cursor:pointer}
.modal-btns .btn-gold{flex:1;margin-top:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}