/* Gramora — graphical page layer (glass / 3D), consistent with Play page. */
:root { --g-glass: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); --g-edge: rgba(255,255,255,.10); --g-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -12px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35); }

/* Page hero banner */
.page-hero { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 4px 0 14px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, var(--ph-c1, rgba(124,92,255,.38)), transparent 60%), radial-gradient(120% 140% at 100% 100%, var(--ph-c2, rgba(0,198,255,.22)), transparent 60%), rgba(18,22,42,.72);
  border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); }
.page-hero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 140px; height: 140px; border-radius: 50%; background: var(--ph-c1, #7c5cff); filter: blur(46px); opacity: .35; pointer-events: none; }
.page-hero .section-title { margin: 0 !important; font-size: 1.28rem; letter-spacing: .2px; }
.ph-ico { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px; border-radius: 16px; transform: perspective(300px) rotateX(10deg) rotateY(-10deg);
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 18px -6px var(--ph-c1, #7c5cff), inset 0 1px 0 rgba(255,255,255,.25); }
.ph-sub { margin: 2px 0 0; font-size: .82rem; opacity: .72; }
.ph-txt { min-width: 0; position: relative; z-index: 1; }
.ph-tasks { --ph-c1: rgba(46,204,113,.42); --ph-c2: rgba(0,198,255,.2); }
.ph-upgrades { --ph-c1: rgba(255,196,0,.4); --ph-c2: rgba(124,92,255,.3); }
.ph-daily { --ph-c1: rgba(255,94,148,.42); --ph-c2: rgba(255,196,0,.2); }
.ph-friends { --ph-c1: rgba(0,198,255,.42); --ph-c2: rgba(124,92,255,.25); }
.ph-vip { --ph-c1: rgba(255,196,0,.45); --ph-c2: rgba(255,94,148,.22); }
.ph-token { --ph-c1: rgba(0,224,255,.42); --ph-c2: rgba(124,92,255,.3); }
.ph-deposit { --ph-c1: rgba(38,161,123,.5); --ph-c2: rgba(0,198,255,.2); }
.ph-wallet { --ph-c1: rgba(124,92,255,.48); --ph-c2: rgba(0,198,255,.22); }
.ph-transfer { --ph-c1: rgba(0,198,255,.45); --ph-c2: rgba(46,204,113,.2); }
.ph-withdraw { --ph-c1: rgba(255,140,66,.45); --ph-c2: rgba(255,94,148,.2); }
.ph-rank { --ph-c1: rgba(255,196,0,.45); --ph-c2: rgba(255,140,66,.22); }
.ph-advertise { --ph-c1: rgba(255,94,148,.45); --ph-c2: rgba(124,92,255,.25); }
.ph-profile { --ph-c1: rgba(124,92,255,.45); --ph-c2: rgba(255,94,148,.2); }
.wp-head { display: flex; align-items: center; gap: 10px; }
.wp-head .page-hero { flex: 1; margin: 4px 0 14px; }

/* Glass cards */
.view:not([data-view="play"]) :is(.card-like, .card, .token-card, .daily-card, .friends-card, .referrals-card, .vip-card, .usdt-card, .pay-card, .withdraw-box, .transfer-box, .profile-card, .wp-wallet, .advertise-step, .advertise-checkout, .hist-acc, .tasks-block > .task-list > li, .task-list > li, .wp-bal, .lb-me) {
  background: var(--g-glass), rgba(20,24,46,.7); border: 1px solid var(--g-edge); border-radius: 18px; box-shadow: var(--g-shadow); }
.view:not([data-view="play"]) :is(.card, .vip-card, .task-list > li, .wp-bal) { transition: transform .18s ease, box-shadow .18s ease; }
.view:not([data-view="play"]) :is(.card, .vip-card, .task-list > li, .wp-bal):active { transform: translateY(1px) scale(.99); }
@media (hover: hover) { .view:not([data-view="play"]) :is(.card, .vip-card, .task-list > li, .wp-bal):hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 16px 30px -14px rgba(124,92,255,.55), 0 2px 6px rgba(0,0,0,.35); } }
.card-icon, .daily-icon, .token-logo { filter: drop-shadow(0 6px 12px rgba(124,92,255,.45)); }

/* Upgrades: glowing level ring around icon */
.view[data-view="upgrades"] .card-icon { border-radius: 16px; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), rgba(124,92,255,.25) 60%, transparent 70%); box-shadow: 0 0 0 2px rgba(255,196,0,.35), 0 0 18px rgba(255,196,0,.25); }

/* Daily */
.view[data-view="daily"] .daily-card { text-align: center; background: radial-gradient(90% 80% at 50% 0%, rgba(255,94,148,.25), transparent 70%), var(--g-glass), rgba(20,24,46,.72); }
.view[data-view="daily"] .daily-icon { font-size: 54px; display: inline-block; animation: gFloat 3.2s ease-in-out infinite; }
.view[data-view="daily"] .daily-amount { font-size: 1.9rem; font-weight: 800; background: linear-gradient(90deg,#ffd36b,#ff7eb3); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Friends */
.view[data-view="friends"] .invite-count { font-weight: 800; font-size: 1.6rem; background: linear-gradient(90deg,#5fd3ff,#9b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.view[data-view="friends"] .referrals-list > li { border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px 2px; }

/* VIP tier cards */
.vip-card { position: relative; overflow: hidden; }
.vip-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tier, linear-gradient(90deg,#9b7bff,#5fd3ff)); }
.vip-card::after { content: var(--tier-ico, "⭐"); position: absolute; right: 12px; top: 10px; font-size: 26px; opacity: .9; filter: drop-shadow(0 4px 10px var(--tier-glow, rgba(124,92,255,.6))); }
.vip-card h3 { padding-right: 40px; }
.vip-card.tier-1 { --tier: linear-gradient(90deg,#c0c7d6,#eef2fa); --tier-ico: "🥈"; --tier-glow: rgba(200,210,230,.5); background: radial-gradient(100% 80% at 100% 0%, rgba(200,210,230,.18), transparent 60%), rgba(20,24,46,.72) !important; }
.vip-card.tier-2 { --tier: linear-gradient(90deg,#d58b4d,#ffc48a); --tier-ico: "🥉"; --tier-glow: rgba(213,139,77,.5); background: radial-gradient(100% 80% at 100% 0%, rgba(213,139,77,.22), transparent 60%), rgba(20,24,46,.72) !important; }
.vip-card.tier-3 { --tier: linear-gradient(90deg,#ffb800,#fff1a8); --tier-ico: "🥇"; --tier-glow: rgba(255,196,0,.55); background: radial-gradient(100% 80% at 100% 0%, rgba(255,196,0,.22), transparent 60%), rgba(20,24,46,.72) !important; }
.vip-card.tier-4 { --tier: linear-gradient(90deg,#5fd3ff,#b8f1ff); --tier-ico: "💎"; --tier-glow: rgba(95,211,255,.55); background: radial-gradient(100% 80% at 100% 0%, rgba(95,211,255,.22), transparent 60%), rgba(20,24,46,.72) !important; }
.vip-card.tier-5 { --tier: linear-gradient(90deg,#9b7bff,#ff7eb3); --tier-ico: "👑"; --tier-glow: rgba(155,123,255,.6); background: radial-gradient(100% 80% at 100% 0%, rgba(155,123,255,.25), transparent 60%), rgba(20,24,46,.72) !important; }
.vip-card.active-level { box-shadow: 0 0 0 2px rgba(46,204,113,.7), 0 14px 30px -12px rgba(46,204,113,.55) !important; }

/* Token / deposit */
.view[data-view="token"] .token-card { background: radial-gradient(90% 90% at 50% 0%, rgba(0,224,255,.2), transparent 70%), var(--g-glass), rgba(20,24,46,.72); }
.view[data-view="token"] .token-logo { animation: gFloat 4s ease-in-out infinite; }
.usdt-nets { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--g-edge); }
.usdt-nets .usdt-net-btn { flex: 1; border-radius: 10px; }
.usdt-nets .usdt-net-btn.selected { background: linear-gradient(135deg,#26a17b,#1cc8a0); color: #fff; box-shadow: 0 6px 16px -6px rgba(38,161,123,.8); }
.view[data-view="deposit"] .usdt-invoice img, .view[data-view="deposit"] canvas { border-radius: 14px; padding: 8px; background: #fff; box-shadow: 0 0 0 4px rgba(38,161,123,.35), 0 12px 28px -10px rgba(38,161,123,.7); }

/* Wallet */
.wp-bal { position: relative; overflow: hidden; }
.wp-bal::after { content: ""; position: absolute; right: -24px; bottom: -24px; width: 80px; height: 80px; border-radius: 50%; background: rgba(124,92,255,.35); filter: blur(24px); pointer-events: none; }
.wp-bal:nth-child(2)::after { background: rgba(38,161,123,.4); }
.wp-bal:nth-child(3)::after { background: rgba(255,196,0,.35); }
.wp-bal:nth-child(4)::after { background: rgba(0,198,255,.35); }
.hist-acc-head { border-radius: 14px; }
.hist-acc-badge { background: linear-gradient(135deg,#7c5cff,#00c6ff); color: #fff; }

/* Rank podium */
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 6px 0 14px; }
.pod { text-align: center; min-width: 0; }
.pod-av { position: relative; margin: 0 auto 6px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff;
  background: linear-gradient(145deg, var(--pc1), var(--pc2)); box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 10px 22px -8px var(--pc1); }
.pod1 .pod-av { width: 66px; height: 66px; font-size: 1.6rem; }
.pod-medal { position: absolute; right: -6px; bottom: -6px; font-size: 22px; }
.pod-name { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-pts { font-size: .74rem; opacity: .75; margin-bottom: 6px; }
.pod-base { border-radius: 14px 14px 6px 6px; font-weight: 900; font-size: 1.4rem; color: rgba(255,255,255,.9); display: grid; place-items: center;
  background: linear-gradient(180deg, var(--pc1), rgba(20,24,46,.6)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 24px -12px var(--pc1); }
.pod1 { --pc1: #ffb800; --pc2: #ff7a00; } .pod1 .pod-base { height: 92px; }
.pod2 { --pc1: #aeb8cc; --pc2: #6c7894; } .pod2 .pod-base { height: 68px; }
.pod3 { --pc1: #d58b4d; --pc2: #8a4e22; } .pod3 .pod-base { height: 52px; }
.pod.me .pod-av { box-shadow: 0 0 0 3px #2ecc71, 0 10px 22px -8px #2ecc71; }
.lb-me { padding: 10px 14px; font-weight: 700; }
.leaderboard > li { background: var(--g-glass), rgba(20,24,46,.6); border: 1px solid var(--g-edge); border-radius: 14px; margin-bottom: 6px; }
.leaderboard > li.me { border-color: rgba(46,204,113,.6); box-shadow: 0 0 16px -6px rgba(46,204,113,.7); }

/* Profile */
.profile-avatar { box-shadow: 0 0 0 3px rgba(124,92,255,.5), 0 0 24px rgba(124,92,255,.45); }
.profile-hero { background: radial-gradient(100% 120% at 0% 0%, rgba(124,92,255,.3), transparent 60%), var(--g-glass), rgba(20,24,46,.72); border: 1px solid var(--g-edge); border-radius: 18px; }

/* Onboarding */
.onboarding { background: radial-gradient(80% 50% at 50% 0%, rgba(124,92,255,.3), transparent 70%), radial-gradient(70% 50% at 100% 100%, rgba(0,198,255,.18), transparent 70%), var(--bg); }
.ob-header .logo-img { border-radius: 16px; box-shadow: 0 0 30px rgba(124,92,255,.6); animation: gFloat 3.6s ease-in-out infinite; }
.ob-stepper li span { box-shadow: 0 0 0 2px rgba(255,255,255,.1); }
.ob-stepper li.active span, .ob-stepper li.done span { background: linear-gradient(135deg,#7c5cff,#00c6ff); color: #fff; box-shadow: 0 0 14px rgba(124,92,255,.7); }
.ob-panel { background: var(--g-glass), rgba(20,24,46,.72); border: 1px solid var(--g-edge); border-radius: 20px; box-shadow: var(--g-shadow); padding: 16px; }

/* Buttons */
.view:not([data-view="play"]) .primary-btn { background-image: linear-gradient(135deg,#7c5cff,#00c6ff); box-shadow: 0 10px 22px -10px rgba(124,92,255,.85), inset 0 1px 0 rgba(255,255,255,.25); }

/* Entrance animation */
.view.active:not([data-view="play"]) > * { animation: gRise .38s ease both; }
.view.active > *:nth-child(2) { animation-delay: .04s; } .view.active > *:nth-child(3) { animation-delay: .08s; } .view.active > *:nth-child(4) { animation-delay: .12s; } .view.active > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes gRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .view.active > *, .daily-icon, .token-logo, .ob-header .logo-img { animation: none !important; } .view :is(.card,.vip-card,.wp-bal) { transition: none !important; } }
.profile-head-row { display: flex; align-items: center; gap: 10px; }
.profile-head-row .page-hero { flex: 1 1 auto; min-width: 0; margin: 4px 0 14px; }
.profile-head-row { display: flex !important; flex-direction: row !important; }
.profile-head-row > #profileBackBtn { flex: 0 0 auto !important; width: auto !important; }
.profile-head-row .page-hero { flex: 1 1 0 !important; width: auto !important; }