/* ============================================================
   THE MILLION DOLLAR BUTTON — styles
   Aesthetic: "vault / casino-noir" — deep black, gold,
   neon crimson accent on the button. No generic gradients.
   ============================================================ */

:root{
  --bg:        #0a0a0f;
  --bg-soft:   #12121c;
  --panel:     #16161f;
  --panel-2:   #1d1d29;
  --line:      #2a2a38;
  --gold:      #f5c451;
  --gold-deep: #b8860b;
  --crimson:   #ff2d55;
  --crimson-2: #ff5e7a;
  --mint:      #34e0a1;
  --text:      #f4f1ea;
  --muted:     #8a889c;
  --bronze:    #cd7f32;
  --silver:    #c0c5cc;
  --goldr:     #ffd24a;
  --platinum:  #6fe3ff;
  --diamond:   #b388ff;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a1326 0%, transparent 60%),
    radial-gradient(800px 400px at 90% 110%, #131a26 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Sora',system-ui,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* grain overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.display{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.02em; }

.app{ max-width:480px; margin:0 auto; padding:0 16px 110px; position:relative; }

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4px 14px; position:sticky; top:0; z-index:50;
  background:linear-gradient(var(--bg) 65%, transparent);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand .logo{
  width:34px;height:34px;border-radius:10px;
  background:radial-gradient(circle at 30% 25%, var(--crimson-2), var(--crimson) 55%, #8c0020);
  box-shadow:0 0 18px rgba(255,45,85,.5), inset 0 0 8px rgba(255,255,255,.25);
}
.brand b{ font-family:'Syne',sans-serif; font-size:15px; letter-spacing:.04em; }
.brand small{ display:block; color:var(--muted); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }

.wallet-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line);
  padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600;
}
.wallet-chip .coin{ color:var(--gold); }
.wallet-chip .ton{ color:var(--platinum); }
.wallet-chip i{ width:16px;height:16px; }

/* ---------- Screens ---------- */
.screen{ display:none; animation:fade .35s ease both; }
.screen.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.section-title{ font-size:20px; margin:6px 0 14px; }
.section-title span{ color:var(--gold); }

/* ---------- GAME ---------- */
.stage{
  text-align:center; padding:14px 0 6px;
}
.day-pill{
  display:inline-flex; gap:8px; align-items:center;
  background:var(--panel); border:1px solid var(--line);
  padding:6px 14px; border-radius:999px; font-size:12px; color:var(--muted);
  letter-spacing:.05em; margin-bottom:10px;
}
.day-pill b{ color:var(--gold); }

.phase-final .day-pill{ border-color:var(--crimson); color:var(--crimson-2); }

.countdown{
  font-family:'Syne',sans-serif; font-weight:800; font-size:13px;
  color:var(--muted); letter-spacing:.06em; margin:4px 0 18px; min-height:18px;
}
.countdown b{ color:var(--text); font-variant-numeric:tabular-nums; }

/* The Button */
.btn-wrap{ position:relative; width:240px; height:240px; margin:14px auto 8px; }
.btn-aura{
  position:absolute; inset:-30px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,85,.35), transparent 65%);
  opacity:0; transition:opacity .4s;
}
.btn-wrap.live .btn-aura{ opacity:1; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:.55} 50%{transform:scale(1.12);opacity:.9} }

.the-button{
  width:240px; height:240px; border-radius:50%; border:none; cursor:pointer;
  position:relative; color:#fff; font-family:'Syne',sans-serif; font-weight:800;
  font-size:22px; letter-spacing:.02em; text-transform:uppercase;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), filter .3s;
  background:
    radial-gradient(circle at 32% 28%, #ff7d94, var(--crimson) 48%, #9c0026 100%);
  box-shadow:
    0 22px 50px rgba(255,45,85,.35),
    inset 0 -14px 30px rgba(0,0,0,.45),
    inset 0 10px 22px rgba(255,255,255,.35);
}
.the-button:active{ transform:scale(.93); }
.the-button.dormant{
  background:radial-gradient(circle at 32% 28%, #2f2f3d, #1a1a24 70%);
  box-shadow:inset 0 -10px 24px rgba(0,0,0,.6), inset 0 8px 18px rgba(255,255,255,.05);
  color:var(--muted); cursor:default;
}
.the-button small{ display:block; font-size:11px; font-weight:600; letter-spacing:.12em; opacity:.8; margin-top:4px; }

.tap-window{ font-size:13px; color:var(--muted); margin:14px 0 4px; }
.tap-window b{ color:var(--crimson-2); font-variant-numeric:tabular-nums; }

/* rescue / buy row */
.actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.pill-btn{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:11px 16px; border-radius:14px; font-weight:600; font-size:13px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:.2s;
}
.pill-btn:hover{ border-color:var(--gold); }
.pill-btn.gold{ background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#1a1208; border:none; }
.pill-btn i{ width:16px;height:16px; }

/* stats grid */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px; }
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:14px 8px; text-align:center;
}
.stat .v{ font-family:'Syne',sans-serif; font-weight:800; font-size:20px; }
.stat .l{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }

/* progress to final */
.prog{ margin-top:22px; }
.prog-head{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:7px; }
.prog-bar{ height:10px; background:var(--panel-2); border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.prog-fill{ height:100%; background:linear-gradient(90deg,var(--gold),var(--crimson)); border-radius:999px; transition:width .6s; }

/* ---------- TASKS ---------- */
.task{
  display:flex; align-items:center; gap:14px; background:var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:11px;
  transition:.2s;
}
.task:hover{ border-color:var(--panel-2); transform:translateY(-1px); }
.task .ico{
  width:46px;height:46px;border-radius:14px; flex:0 0 auto;
  display:grid;place-items:center; background:var(--panel-2); color:var(--gold);
}
.task .ico i{ width:22px;height:22px; }
.task .body{ flex:1; min-width:0; }
.task .body h4{ margin:0; font-size:14px; font-weight:700; }
.task .body p{ margin:2px 0 0; font-size:11.5px; color:var(--muted); }
.task .reward{ font-size:11px; color:var(--gold); font-weight:700; margin-top:4px; display:flex; gap:8px; }
.task .reward .att{ color:var(--mint); }
.task .go{
  border:none; border-radius:12px; padding:9px 14px; font-weight:700; font-size:12px;
  cursor:pointer; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#1a1208;
  white-space:nowrap;
}
.task.done .go{ background:var(--panel-2); color:var(--mint); cursor:default; }

/* ---------- RATING ---------- */
.tier-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px; scrollbar-width:none; }
.tier-tabs::-webkit-scrollbar{ display:none; }
.tier-tab{
  flex:0 0 auto; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer; white-space:nowrap;
}
.tier-tab.active{ color:var(--text); border-color:var(--gold); }

.rank-row{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line); margin-bottom:8px;
}
.rank-row.me{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
.rank-row .pos{ font-family:'Syne',sans-serif; font-weight:800; width:30px; text-align:center; color:var(--muted); }
.rank-row .pos.top{ color:var(--gold); }
.rank-row .ava{ width:38px;height:38px;border-radius:50%; background:var(--panel-2); object-fit:cover; flex:0 0 auto; display:grid;place-items:center; font-weight:700; color:var(--muted); }
.rank-row .nm{ flex:1; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-row .sc{ font-family:'Syne',sans-serif; font-weight:800; color:var(--gold); }
.tier-badge{ font-size:9px; padding:2px 7px; border-radius:999px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.t-bronze{ background:rgba(205,127,50,.15); color:var(--bronze); }
.t-silver{ background:rgba(192,197,204,.15); color:var(--silver); }
.t-gold{ background:rgba(255,210,74,.15); color:var(--goldr); }
.t-platinum{ background:rgba(111,227,255,.15); color:var(--platinum); }
.t-diamond{ background:rgba(179,136,255,.15); color:var(--diamond); }

/* prize pool cards */
.pool-card{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; margin-bottom:8px;
}
.pool-card .usd{ font-family:'Syne',sans-serif; font-weight:800; color:var(--mint); font-size:17px; }

/* ---------- PROFILE ---------- */
.profile-head{ text-align:center; padding:18px 0 8px; }
.profile-head .ava{
  width:92px;height:92px;border-radius:50%;margin:0 auto 12px; object-fit:cover;
  border:3px solid var(--gold); background:var(--panel-2);
  display:grid;place-items:center;font-size:34px;font-weight:800;color:var(--muted);
}
.profile-head h2{ margin:0; font-size:22px; }
.profile-head .uname{ color:var(--muted); font-size:13px; margin-top:2px; }
.balance-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.bcard{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; }
.bcard .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.bcard .v{ font-family:'Syne',sans-serif; font-weight:800; font-size:24px; margin-top:6px; }
.bcard .v.coin{ color:var(--gold); }
.bcard .v.ton{ color:var(--platinum); }
.profile-actions{ display:flex; flex-direction:column; gap:10px; }
.big-btn{
  width:100%; border:none; border-radius:16px; padding:15px; font-weight:700; font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
}
.big-btn.ton{ background:linear-gradient(180deg,#3aa7ff,#0066d6); color:#fff; }
.big-btn.ghost{ background:var(--panel); border:1px solid var(--line); color:var(--text); }

/* ---------- Bottom nav ---------- */
.nav{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  width:min(456px,calc(100% - 24px)); z-index:60;
  background:rgba(22,22,31,.86); backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:22px;
  display:grid; grid-template-columns:repeat(4,1fr); padding:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.nav button{
  background:none; border:none; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0;
  font-size:10px; font-weight:600; letter-spacing:.03em; border-radius:14px; transition:.2s;
}
.nav button i{ width:21px;height:21px; }
.nav button.active{ color:var(--gold); }
.nav button.active i{ filter:drop-shadow(0 0 8px rgba(245,196,81,.6)); }

/* ---------- Modal / toast ---------- */
.modal-bg{
  position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  z-index:200; display:none; align-items:center; justify-content:center; padding:24px;
}
.modal-bg.show{ display:flex; }
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:24px;
  padding:24px; width:100%; max-width:360px; animation:pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{ from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.modal h3{ margin:0 0 6px; font-family:'Syne',sans-serif; }
.modal p{ color:var(--muted); font-size:13px; margin:0 0 16px; }
.modal .field{ width:100%; background:var(--bg-soft); border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:13px; font-size:15px; margin-bottom:12px; }
.modal .memo{ background:var(--bg-soft); border:1px dashed var(--gold); border-radius:12px;
  padding:12px; font-size:12px; word-break:break-all; color:var(--gold); margin-bottom:12px; }

.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:12px 18px; border-radius:14px; font-size:13px; font-weight:600;
  z-index:300; opacity:0; transition:.3s; pointer-events:none; max-width:90%;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.win{ border-color:var(--mint); color:var(--mint); }
.toast.err{ border-color:var(--crimson); color:var(--crimson-2); }

.skeleton{ background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 37%,var(--panel) 63%);
  background-size:400% 100%; animation:sh 1.3s infinite; border-radius:14px; }
@keyframes sh{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

.empty{ text-align:center; color:var(--muted); padding:40px 0; font-size:13px; }