/* ============================================
   Extracted from index.html <style> blocks
   for Cloudflare Pages caching optimization
   ============================================ */


:root{
  --bg:#f0f4ff;
  --surface:#f7f9ff;
  --surface2:#e8eeff;
  --surface3:#dde6ff;
  --blue:#3b82f6;
  --blue-light:#2563eb;
  --blue-glow:rgba(59,130,246,.2);
  --purple:#6366f1;
  --purple-glow:rgba(99,102,241,.15);
  --accent:#4f46e5;
  --gold:#d97706;
  --gold-dim:rgba(217,119,6,.1);
  --border:rgba(59,130,246,.22);
  --border2:rgba(59,130,246,.12);
  --text:#1e3a5f;
  --muted:#94b3d4;
  --muted2:#5a7fa8;
  --success:#059669;
  --success-dim:rgba(5,150,105,.1);
  --danger:#dc2626;
  --danger-dim:rgba(220,38,38,.1);
  --warn:#b45309;
  --warn-dim:rgba(180,83,9,.1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;}
/* FIX 2: Prevent any child from causing horizontal scroll.
   overflow-x:hidden on BOTH html AND body is required —
   on html alone, body can still scroll horizontally in some WebViews */
html,body{width:100%;overflow-x:hidden;position:relative;}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;}
html,body{scrollbar-width:none;}

/* ══════════════════════════════════════════════════════
   ROOT CAUSE FIX:
   Telegram Desktop opens Mini App in a panel. The panel
   background (#17212b dark) shows through on the right
   because only <body> had background-color, not <html>.
   When body width < panel width (due to max-width:100vw
   injection), the html element's transparent background
   shows Telegram's dark chrome.
   
   Fix: Set background on BOTH html AND body, use !important
   to override Telegram SDK's inline style injection.
   ══════════════════════════════════════════════════════ */
html{
  /* Use header-banner dark color — if body is narrower than html on Telegram Desktop,
     the html background shows through. Making it dark means no visible strip near header. */
  background:#0f172a !important;
  max-width:100% !important;
  width:100% !important;
  overflow-x:hidden !important;
  min-height:100% !important;
}
/* merged: duplicate body block removed */
body{
  background:var(--bg);color:var(--text);
  font-family:'Noto Sans Bengali',sans-serif;
  max-width:100% !important;
  width:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  min-height:100vh !important;
  padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px));
}
body::before{
  content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 10%,rgba(59,130,246,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 80%,rgba(99,102,241,.05) 0%,transparent 60%);
  pointer-events:none;z-index:0;
  transform:translateZ(0);
}
body::after{
  content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(59,130,246,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.04) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;z-index:0;
  transform:translateZ(0);
}
/* FIX 6: Define --wrap-px as CSS variable so header-banner negative bleed
   stays perfectly in sync with wrap padding across ALL breakpoints.
   This is the only safe way to do full-bleed inside a centered container. */
.wrap{
  --wrap-px: 18px;
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:0 var(--wrap-px);
  position:relative;
  z-index:1;
  /* overflow-x:clip prevents horizontal overflow WITHOUT creating a new scroll container,
     unlike overflow-x:hidden which forces overflow-y:auto and breaks page scroll */
  overflow-x:clip;
}
@media(min-width:640px){
  .wrap{
    --wrap-px: 24px;
    max-width:540px;
    padding:0 var(--wrap-px);
  }
}
@media(min-width:900px){
  .wrap{
    --wrap-px: 28px;
    max-width:600px;
    padding:0 var(--wrap-px);
  }
}

/* HEADER BANNER */
/* FIX 4: CRITICAL — The original margin:0 -18px caused horizontal overflow.
   Negative margins expand the element beyond the parent, and Telegram WebView's
   layout engine registers this as scrollable horizontal content = white strip.

   NEW APPROACH: Remove negative margins entirely. Instead, let the header-banner
   sit inside .wrap at full width, and compensate visually with extra padding.
   The overflow:hidden on .wrap clips it cleanly at the container boundary.

   Safe-area top padding ensures the banner doesn't overlap iOS notch/status bar. */
.header-banner{
  position:relative;
  margin:0;
  width:100%;
  padding:max(env(safe-area-inset-top, 0px) + 8px, 16px) 18px 52px;
  background:linear-gradient(145deg,#0f172a 0%,#1e293b 50%,#1a2540 100%);
  border-radius:0 0 36px 36px;
  clip-path: inset(0 0 -100px 0 round 0 0 36px 36px);
  animation:fadeDown .35s ease-out both;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  z-index:1;
}
.header-banner::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:220px;height:220px;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%);
  pointer-events:none;
}
.header-banner::after{
  content:'';position:absolute;bottom:-40px;left:-30px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(99,102,241,.18),transparent 65%);
  pointer-events:none;
}

/* HEADER */
.header{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;max-width:480px;margin:0 auto;}
.profile-pill{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:60px;padding:7px 13px 7px 7px;backdrop-filter:blur(16px);box-shadow:0 2px 12px rgba(0,0,0,.1);flex-shrink:1;min-width:0;}
.av{position:relative;}
.av img{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.7);display:block;}
.av-ring{position:absolute;inset:-3px;border-radius:50%;border:1.5px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.3)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;}
.av-dot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;background:var(--success);border-radius:50%;border:2px solid rgba(255,255,255,.5);}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.7;}}
.profile-text h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:#ffffff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
.profile-text span{font-size:11px;color:rgba(255,255,255,.75);font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.4px;white-space:nowrap;}
.header-actions{display:flex;gap:8px;flex-shrink:0;}
.icon-btn{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .2s;position:relative;backdrop-filter:blur(10px);}
.icon-btn:hover{background:rgba(255,255,255,.28);}

/* WALLET CARD — Compact */
.wallet-card{background:linear-gradient(145deg,#000d1a 0%,#001f4d 25%,#003080 50%,#001f4d 75%,#000d1a 100%);border:1px solid rgba(59,130,246,.35);border-radius:26px;padding:20px 18px 18px;position:relative;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.55),0 4px 14px rgba(6,20,40,.6),0 1px 0 rgba(255,255,255,.07) inset;}
.wallet-card::before{content:none;}
.wallet-card::after{content:none;}
.wallet-card-texture{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;border-radius:22px;}
.wallet-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;position:relative;z-index:1;gap:8px;}
.wallet-badge.is-active{padding:4px 10px;font-size:10px;gap:4px;}
.wallet-label{font-size:11px;color:rgba(255,255,255,.55);font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:6px;font-weight:600;}
.wallet-amount{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;}
.wallet-amount .big{font-family:'Plus Jakarta Sans',sans-serif;font-size:44px;font-weight:800;color:#ffffff;line-height:1;letter-spacing:-2px;text-shadow:0 2px 16px rgba(0,0,0,.15);}
.wallet-amount .currency{font-size:16px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.4px;white-space:nowrap;}
.wallet-badge{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(12px);color:#ffffff;font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:700;padding:5px 11px;border-radius:50px;letter-spacing:.3px;white-space:nowrap;display:flex;align-items:center;gap:5px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.wallet-action-btn{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.wallet-badge:hover{background:rgba(255,255,255,.21);border-color:rgba(255,255,255,.4);}
.wallet-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 20%,rgba(255,255,255,.18) 80%,transparent);margin:12px 0;position:relative;z-index:1;}
.wallet-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0;position:relative;z-index:1;}
.w-stat{text-align:center;padding:4px 6px 0;}
.w-stat+.w-stat{border-left:1px solid rgba(255,255,255,.14);}
.w-stat .ws-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:#ffffff;letter-spacing:-.4px;}
.w-stat .ws-label{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.6);margin-top:3px;letter-spacing:.2px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;}

/* PAGES */
.page{display:none;contain:layout style;}
.page.active{display:block;}

/* SECTION TITLE */
.sec-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;color:#1e3a5f;margin:8px 0 8px;display:flex;align-items:center;justify-content:flex-start;gap:10px;}
.sec-title span{font-size:12px;font-weight:500;color:var(--blue-light);cursor:pointer;letter-spacing:.3px;}

/* TASK CATEGORY TABS */
.task-cat-tabs{display:flex;gap:10px;margin:10px 0 14px;}
.task-cat-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:14px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.2px;transition:all .22s cubic-bezier(.34,1.2,.64,1);border:1.5px solid transparent;user-select:none;-webkit-user-select:none;}
.task-cat-tab.active{background:linear-gradient(135deg,#2563eb 0%,#4f46e5 100%);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(59,130,246,.32),0 1px 0 rgba(255,255,255,.15) inset;}
.task-cat-tab.inactive{background:#ffffff;color:#1e3a5f;border-color:rgba(59,130,246,.15);box-shadow:0 2px 8px rgba(59,130,246,.08);}
.task-cat-tab.inactive:active{transform:scale(.97);}
.task-cat-tab-icon{font-size:16px;line-height:1;}
.task-cat-panel{display:none;}
.task-cat-panel.active{display:block;}
.task-cat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center;}
.task-cat-empty-icon{font-size:44px;opacity:.5;}
.task-cat-empty-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:600;color:var(--muted2);}
.task-cat-empty-sub{font-size:12px;color:var(--muted);margin-top:2px;}

/* LUCKY SPIN — game card on Games tab */
.spin-game-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(59,130,246,.06));border:1px solid rgba(99,102,241,.18);border-radius:18px;padding:16px;cursor:pointer;transition:transform .15s,opacity .2s;}
.spin-game-card:active{transform:scale(.97);}
.spin-game-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(145deg,#a855f7,#6366f1);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;box-shadow:0 4px 12px rgba(99,102,241,.35);}
.spin-game-info{flex:1;min-width:0;}
.spin-game-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:var(--text);}
.spin-game-desc{font-size:12px;color:var(--muted2);margin-top:2px;}
.spin-game-status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:50px;background:rgba(34,197,94,.12);color:#16a34a;flex-shrink:0;}
.spin-game-status.cooldown{background:rgba(251,191,36,.12);color:#d97706;}

/* FLAPPY GEM — new game card on Games tab */
.flappy-canvas-wrap{position:relative;border-radius:16px;overflow:hidden;border:2px solid rgba(255,255,255,.15);}
#flappyCanvas{display:block;width:100%;touch-action:none;background:#70c5ce;}
.flappy-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:rgba(0,0,0,.55);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;text-align:center;padding:16px 18px;pointer-events:none;overflow-y:auto;}
.flappy-overlay button{pointer-events:auto;}
.flappy-hero-title{font-size:21px;font-weight:800;letter-spacing:.5px;margin:6px 0 4px;}
.flappy-hero-tagline{font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:14px;}
.flappy-play-wrap{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:8px;padding-top:20px;}
.flappy-play-btn{pointer-events:auto;width:96px;height:96px;border:none;border-radius:50%;cursor:pointer;padding:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 32%),radial-gradient(circle at 35% 30%,#818cf8 0%,#4f6ef7 55%,#4338ca 100%);
  box-shadow:0 0 0 3px rgba(94,234,212,.85),inset 0 3px 6px rgba(255,255,255,.35),inset 0 -6px 10px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.45);
  animation:flappyFloat 3s ease-in-out infinite,flappyPulseGlow 2.2s ease-in-out infinite;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.flappy-play-btn::before{content:'';position:absolute;inset:4%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%);pointer-events:none;}
.flappy-play-btn.is-pressed{animation-play-state:paused,paused;transform:scale(.95);}
.flappy-play-triangle{width:0;height:0;margin-left:8%;border-top:18px solid transparent;border-bottom:18px solid transparent;border-left:28px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));pointer-events:none;}
@keyframes flappyFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@keyframes flappyPulseGlow{0%,100%{box-shadow:0 0 0 3px rgba(94,234,212,.85),inset 0 3px 6px rgba(255,255,255,.35),inset 0 -6px 10px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.45),0 0 22px 6px rgba(79,110,247,.55);}50%{box-shadow:0 0 0 3px rgba(94,234,212,1),inset 0 3px 6px rgba(255,255,255,.35),inset 0 -6px 10px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.45),0 0 40px 14px rgba(79,110,247,.85);}}
.flappy-play-pedestal{width:150px;height:30px;border-radius:50%;position:relative;z-index:1;margin-top:-18px;
  background:radial-gradient(ellipse at 50% 20%,rgba(125,211,252,.35) 0%,rgba(125,211,252,0) 55%),linear-gradient(180deg,#16233f 0%,#0c1730 55%,#060c1c 100%);
  box-shadow:0 0 0 1px rgba(94,234,212,.18),0 10px 18px rgba(0,0,0,.55),0 0 40px 8px rgba(56,189,248,.35),0 0 90px 20px rgba(56,189,248,.18);}
.flappy-play-pedestal::before{content:'';position:absolute;left:50%;top:0;transform:translate(-50%,-38%);width:78%;height:60%;border-radius:50%;box-shadow:0 0 0 2px rgba(103,232,249,.9),0 0 14px 3px rgba(103,232,249,.8),0 0 34px 10px rgba(56,189,248,.55);opacity:.9;}

/* ── 2048 PUZZLE GAME ── */
.p2048-board-wrap{position:relative;touch-action:none;cursor:grab;user-select:none;}
.p2048-board-wrap:active{cursor:grabbing;}
.p2048-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:rgba(0,0,0,.35);border-radius:16px;padding:8px;aspect-ratio:1/1;}
.p2048-cell{background:rgba(255,255,255,.06);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:#fff;font-size:22px;aspect-ratio:1/1;transition:background .12s;}
.p2048-cell[data-v="2"]{background:#3a3550;color:rgba(255,255,255,.85);}
.p2048-cell[data-v="4"]{background:#4a3f68;color:rgba(255,255,255,.92);}
.p2048-cell[data-v="8"]{background:#a855f7;}
.p2048-cell[data-v="16"]{background:#f97316;}
.p2048-cell[data-v="32"]{background:#f97316;font-size:19px;}
.p2048-cell[data-v="64"]{background:#ef4444;font-size:19px;}
.p2048-cell[data-v="128"]{background:#eab308;font-size:17px;}
.p2048-cell[data-v="256"]{background:#eab308;font-size:17px;}
.p2048-cell[data-v="512"]{background:#22c55e;font-size:17px;}
.p2048-cell[data-v="1024"]{background:#22c55e;font-size:14px;}
.p2048-cell[data-v="2048"]{background:#facc15;color:#1a1625;font-size:14px;box-shadow:0 0 20px rgba(250,204,21,.6);}
@keyframes p2048Pop{0%{transform:scale(.55);opacity:.5;}60%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);}}
.p2048-cell.p2048-pop{animation:p2048Pop .18s ease-out;}
.p2048-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(10,6,20,.75);border-radius:16px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;}
.p2048-overlay-home{justify-content:center;padding:16px 14px;overflow-y:auto;background:rgba(10,6,20,.82);scrollbar-width:none;-ms-overflow-style:none;}
.p2048-overlay-home::-webkit-scrollbar{display:none;}
.p2048-overlay-title{font-size:20px;font-weight:800;}
.p2048-overlay-actions{display:flex;gap:10px;}
.p2048-restart-btn{background:linear-gradient(145deg,#a855f7,#7c3aed);border:none;border-radius:10px;padding:10px 22px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
.p2048-home-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:10px 18px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
.flappy-lb-preview{pointer-events:auto;width:100%;max-width:300px;margin-top:16px;background:rgba(8,12,24,.78);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 12px 8px;flex-shrink:0;}
.flappy-lb-preview-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.4px;color:rgba(255,255,255,.85);margin-bottom:6px;}
.flappy-lb-viewall{background:none;border:none;color:#7dd3fc;font-size:11px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;padding:2px;}
.flappy-lb-preview-list{display:flex;flex-direction:column;gap:4px;}
.flappy-fulllb-list{max-height:56vh;overflow-y:auto;padding-right:2px;}
.flappy-lb-prow{display:flex;align-items:center;gap:8px;padding:6px;border-radius:10px;font-size:12.5px;}
.flappy-lb-prow.rank1{background:linear-gradient(90deg,rgba(251,191,36,.4),rgba(251,191,36,.1));border:1px solid rgba(251,191,36,.6);}
.flappy-lb-prank{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex-shrink:0;background:rgba(255,255,255,.12);color:#fff;}
.flappy-lb-prow.rank1 .flappy-lb-prank{background:#fbbf24;color:#3f2d00;}
.flappy-lb-prow.rank2 .flappy-lb-prank{background:#cbd5e1;color:#1e293b;}
.flappy-lb-prow.rank3 .flappy-lb-prank{background:#d97706;color:#fff;}
.flappy-lb-pname{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:600;}
.flappy-lb-pscore{color:#fbbf24;font-weight:800;font-size:12px;flex-shrink:0;}
.flappy-lb-loading{text-align:center;color:rgba(255,255,255,.4);font-size:11.5px;padding:10px 0;}
/* Disable backdrop-filter blur while the game modal is open — blur recompute behind
   an actively-animating canvas (requestAnimationFrame loop) is the main lag source
   on mid/low-end mobile WebViews. */



/* Lucky Spin Modal */
.spin-wheel-wrap{position:relative;width:240px;height:240px;margin:0 auto 22px;}
.spin-wheel{width:100%;height:100%;border-radius:50%;position:relative;transform:rotate(0deg);box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 0 6px rgba(255,255,255,.06);}
.spin-wheel.spinning{transition:transform 4.8s cubic-bezier(.12,.71,.13,1);}
.spin-wheel-pointer{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:20px solid #fbbf24;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.spin-wheel-hub{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:linear-gradient(145deg,#fbbf24,#d97706);display:flex;align-items:center;justify-content:center;font-size:20px;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.12);}
.spin-segment-label{position:absolute;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.spin-action-btn{width:100%;background:linear-gradient(135deg,var(--blue),var(--purple));border:none;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;padding:16px;border-radius:16px;cursor:pointer;box-shadow:0 4px 20px rgba(99,102,241,.4);transition:opacity .2s;}
.spin-action-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}
.spin-cooldown-msg{display:none;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:14px;padding:12px 16px;font-size:13px;color:#fbbf24;margin-bottom:14px;}
body.lite-mode .spin-wheel.spinning{transition:transform 3.5s ease-out;}

/* TASK GRID */

/* AD TAP PRESS ANIMATION */
@keyframes adTapPress{
  0%{transform:scale3d(1,1,1);}
  35%{transform:scale3d(.93,.93,1);}
  100%{transform:scale3d(1,1,1);}
}
.ad-tap-bounce{animation:adTapPress .25s ease both!important;}

/* AD LOADING OVERLAY */
#adLoadingOverlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99990;
  flex-direction:column;
  gap:18px;
}
#adLoadingOverlay.show{display:flex;}
.ad-ld-box{
  background:linear-gradient(145deg,#1e293b,#1a2540);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:36px 32px 32px;
  text-align:center;
  width:calc(100% - 64px);
  max-width:300px;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}
.ad-ld-box::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:220px;height:220px;
  background:radial-gradient(circle,rgba(37,99,235,.25),transparent 65%);
  pointer-events:none;
}
.ad-ld-icon{font-size:52px;margin-bottom:16px;animation:adLdIconPulse 1.2s ease-in-out infinite;}
@keyframes adLdIconPulse{0%,100%{transform:scale3d(1,1,1);opacity:1;}50%{transform:scale3d(1.15,1.15,1);opacity:0.85;}}


.ad-ld-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:800;color:#fff;margin-bottom:6px;}
.ad-ld-sub{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:22px;line-height:1.5;}
/* 3 dot loader */
.ad-ld-dots{display:flex;justify-content:center;gap:8px;}
.ad-ld-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);animation:adLdDot 1.1s ease-in-out infinite;}
.ad-ld-dot:nth-child(2){animation-delay:.18s;}
.ad-ld-dot:nth-child(3){animation-delay:.36s;}
@keyframes adLdDot{0%,100%{transform:translate3d(0,0,0) scale3d(.7,.7,1);opacity:.4;}50%{transform:translate3d(0,-10px,0) scale3d(1,1,1);opacity:1;}}

/* NO ADS NOTIFICATION */
/* FIX 11: Same pattern as toast — always use left:50% + translateX(-50%).
   left:0;right:0;margin:0 auto in hidden state was causing paint at x=0
   which Telegram WebView could count as horizontal scroll width. */
#noAdsNotif{
  position:fixed;top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-120px) scale(0.85);
  z-index:99995;
  background:linear-gradient(145deg,#1e293b,#1c2438);
  border:1px solid rgba(251,191,36,.35);
  border-radius:22px;
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  min-width:280px;max-width:min(340px, calc(100vw - 32px));
  box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(251,191,36,.1) inset;
  opacity:0;
  transition:transform var(--dur-mid) cubic-bezier(.34,1.3,.64,1),opacity .35s;
  pointer-events:none;
}
#noAdsNotif.show{
  /* FIX 12: translateX(-50%) was already in transform — keep consistent */
  transform:translateX(-50%) translateY(0) scale(1);
  opacity:1;
}
.no-ads-icon-wrap{
  width:40px;height:40px;border-radius:13px;
  background:rgba(251,191,36,.15);
  border:1px solid rgba(251,191,36,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.no-ads-body{flex:1;}
.no-ads-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:#fbbf24;margin-bottom:2px;}
.no-ads-sub{font-size:11px;color:rgba(255,255,255,.5);line-height:1.4;}
.no-ads-close{font-size:16px;color:rgba(255,255,255,.3);cursor:pointer;flex-shrink:0;padding:4px;}
.no-ads-close:hover{color:rgba(255,255,255,.6);}

/* AD LOADING NOTIFICATION (top pop) */
/* FIX 13: Same left:0/translateX(-50%) mismatch fix */
#adLoadingNotif{
  position:fixed;top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-120px) scale(0.85);
  z-index:99995;
  background:linear-gradient(145deg,#1e293b,#1c2438);
  border:1px solid rgba(99,102,241,.4);
  border-radius:22px;
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  min-width:280px;max-width:min(340px, calc(100vw - 32px));
  box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.1) inset;
  opacity:0;
  transition:transform .45s cubic-bezier(.34,1.3,.64,1),opacity .35s;
  pointer-events:none;
}
#adLoadingNotif.show{
  /* FIX 14: Consistent translateX(-50%) */
  transform:translateX(-50%) translateY(0) scale(1);
  opacity:1;
}
.ad-loading-icon-wrap{
  width:40px;height:40px;border-radius:13px;
  background:rgba(99,102,241,.15);
  border:1px solid rgba(99,102,241,.3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  position:relative;
}
.ad-loading-spinner{
  width:20px;height:20px;
  border:2px solid rgba(99,102,241,.3);
  border-top-color:#6366f1;
  border-radius:50%;
  animation:spinnerRot .7s linear infinite;
}
@keyframes spinnerRot{to{transform:translate3d(0,0,0) rotate(360deg);}}
.ad-loading-body{flex:1;}
.ad-loading-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:#a5b4fc;margin-bottom:2px;}
.ad-loading-sub{font-size:11px;color:rgba(255,255,255,.5);line-height:1.4;}

/* REWARD NOTIFICATION (instant after ad done) */
/* FIX 15: Same left:0;right:0 pattern causing paint at x=0 when hidden */
#adRewardNotif{
  position:fixed;top:24px;
  left:50%;
  transform:translateX(-50%) translateY(-100px) scale(0.85);
  z-index:99995;
  background:linear-gradient(160deg,#020c1b,#0a1f3c,#061428);
  border:1px solid rgba(99,102,241,.35);
  border-radius:20px;
  padding:12px 20px;
  display:flex;align-items:center;gap:10px;
  white-space:nowrap;
  box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset;
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.4,.64,1),opacity .35s;
  pointer-events:none;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:#fff;
  /* FIX 16: Prevent overflow on narrow screens */
  max-width:calc(100vw - 32px);
}
#adRewardNotif.show{
  /* FIX 17: Consistent translateX(-50%) in show state */
  transform:translateX(-50%) translateY(0) scale(1);
  opacity:1;
}
.reward-notif-icon{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
}
.reward-notif-body{display:flex;align-items:center;gap:6px;}
.reward-notif-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:#fff;}
.reward-notif-checks{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.task-card{background:#ffffff;border:1px solid rgba(59,130,246,.13);border-radius:16px;padding:20px 16px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:all var(--dur-fast);box-shadow:0 4px 18px rgba(59,130,246,.10),0 1px 4px rgba(30,58,95,.05);}
.task-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 10px 28px rgba(59,130,246,.18);}
.task-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--purple));opacity:0;transition:opacity .2s;}
.task-card:hover::before{opacity:1;}

/* Ad card glowing border */
@keyframes adGlow {
  0%,100%{box-shadow:0 0 8px 2px rgba(59,130,246,.45),0 4px 18px rgba(59,130,246,.15);}
  33%{box-shadow:0 0 14px 4px rgba(99,102,241,.55),0 4px 18px rgba(99,102,241,.2);}
  66%{box-shadow:0 0 12px 3px rgba(139,92,246,.5),0 4px 18px rgba(139,92,246,.18);}
}
@keyframes adBorderSpin {
  0%{border-color:rgba(59,130,246,.8);}
  25%{border-color:rgba(99,102,241,.8);}
  50%{border-color:rgba(139,92,246,.8);}
  75%{border-color:rgba(99,102,241,.8);}
  100%{border-color:rgba(59,130,246,.8);}
}
.task-card.ad-glow{
  border-width:1.5px;
  animation:adBorderSpin 2.4s linear infinite;
  /* box-shadow glow সরানো — পাশাপাশি থাকায় ওভারল্যাপ করত */
}
.tc-icon{width:52px;height:52px;border-radius:16px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:26px;}
.tc-icon.blue{background:rgba(79,110,247,.12);}
.tc-icon.purple{background:rgba(139,92,246,.12);}
.tc-icon.gold{background:var(--gold-dim);}
.tc-icon.teal{background:var(--success-dim);}
.tc-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:#1e3a5f;margin-bottom:10px;}
.tc-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(79,110,247,.1);border:1px solid rgba(79,110,247,.25);color:var(--blue-light);font-size:11px;font-weight:600;padding:4px 12px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;}
.tc-progress{height:4px;background:rgba(255,255,255,.06);border-radius:10px;margin-top:10px;overflow:hidden;}
.tc-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:10px;}

/* ACTIVITY */
.activity-list{display:flex;flex-direction:column;gap:5px;}
.activity-item{background:#ffffff;border:1px solid rgba(59,130,246,.18);border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:9px;transition:background .15s;box-shadow:0 2px 8px rgba(59,130,246,.12),0 4px 16px rgba(99,102,241,.08),0 1px 0 rgba(255,255,255,.8) inset;}
.activity-item:hover{background:var(--surface2);}
.act-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.act-info{flex:1;min-width:0;}
.act-info .act-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;color:#1e3a5f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.act-info .act-sub{font-size:10px;color:var(--muted2);margin-top:1px;}

/* FULL TASKS */
.full-task-list{display:flex;flex-direction:column;gap:8px;}
.full-task{background:#ffffff;border:1px solid rgba(59,130,246,.10);border-radius:16px;padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:all var(--dur-fast);box-shadow:0 2px 10px rgba(59,130,246,.07),0 1px 3px rgba(30,58,95,.04);}
.full-task:hover{border-color:var(--blue);background:var(--surface2);}
.ft-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.ft-info{flex:1;}
.ft-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:#1e3a5f;}
.ft-desc{font-size:11px;color:var(--muted2);margin-top:2px;}
.ft-progress{height:5px;background:rgba(59,130,246,.15);border-radius:10px;margin-top:8px;overflow:hidden;}
.ft-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--blue),var(--purple));}
#fill-tgChannel,#fill-facebook,#fill-tgGroup{display:none;}
#fill-tgChannel ~ .ft-progress,#fill-tgGroup ~ .ft-progress,#fill-facebook ~ .ft-progress{display:none;}
.ft-progress:has(#fill-tgChannel),.ft-progress:has(#fill-tgGroup),.ft-progress:has(#fill-facebook){display:none;}
.ft-right{text-align:right;flex-shrink:0;}
.ft-earn{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:var(--accent);}
.ft-done{font-size:11px;color:var(--muted2);margin-top:2px;}

/* REFER */
.refer-hero{background:linear-gradient(135deg,#dbeafe,#e0e7ff);border:1px solid rgba(59,130,246,.2);border-radius:24px;padding:24px;text-align:center;position:relative;overflow:hidden;}
.refer-hero::before{content:'';position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(59,130,246,.15),transparent 65%);}
.refer-emoji{font-size:44px;margin-bottom:12px;position:relative;z-index:1;}
.refer-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;color:#1e3a5f;position:relative;z-index:1;}
.refer-sub{font-size:13px;color:var(--muted2);margin-top:6px;position:relative;z-index:1;}
.refer-code{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;color:var(--blue-light);letter-spacing:2px;}
.milestone-list{display:flex;flex-direction:column;gap:12px;}
.milestone{background:#ffffff;border:1px solid rgba(59,130,246,.13);border-radius:20px;padding:18px 18px 16px;transition:border-color .2s;box-shadow:0 4px 16px rgba(59,130,246,.09),0 1px 3px rgba(30,58,95,.05);}
.milestone:hover{border-color:var(--blue);}
.ms-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.ms-info h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:#1e3a5f;}
.ms-info p{font-size:13px;color:#7c3aed;font-weight:600;margin-top:3px;}
.ms-badge{background:var(--gold-dim);border:1px solid rgba(245,158,11,.3);color:var(--gold);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;padding:6px 14px;border-radius:50px;}
.ms-track{height:5px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden;}
.ms-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--blue),var(--purple));}

/* LEADERBOARD — Modern Podium */
/* ── PODIUM GRID ── */
.lb-podium{
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  gap:8px;
  align-items:stretch;
  margin-bottom:0;
}

/* BASE card */
.podium-item{
  border-radius:20px;
  padding:48px 8px 12px;
  text-align:center;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:0;
  justify-content:flex-end;
  transition:transform .2s;
}
/* Content wrapper — avatar + name + score grouped at bottom */
.podium-content{
  display:flex;flex-direction:column;align-items:center;gap:0;
  width:100%;
}
.podium-item:active{transform:scale(.97);}

/* RANK 1 — tallest */
.podium-item.rank-1{
  background:linear-gradient(170deg,#0c1340 0%,#162660 40%,#1a3080 100%);
  border:2px solid rgba(99,148,255,.7);
  box-shadow:0 0 28px rgba(59,130,246,.5),0 8px 24px rgba(0,0,50,.5);
  padding:48px 8px 14px;
  min-height:220px;
  z-index:3;
}
/* RANK 2 — medium */
.podium-item.rank-2{
  background:linear-gradient(170deg,#1a1a28 0%,#2e2e48 100%);
  border:2px solid rgba(180,180,220,.55);
  box-shadow:0 0 18px rgba(160,160,200,.3),0 6px 18px rgba(0,0,0,.4);
  min-height:220px;
  z-index:2;
}
/* RANK 3 — shortest */
.podium-item.rank-3{
  background:linear-gradient(170deg,#1e1000 0%,#3d2000 100%);
  border:2px solid rgba(205,140,50,.6);
  box-shadow:0 0 16px rgba(205,127,50,.3),0 5px 14px rgba(0,0,0,.4);
  min-height:220px;
  z-index:1;
}

/* Shimmer overlay */
.podium-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  animation:lbShimmer 2.6s ease-in-out infinite;
  pointer-events:none;
}
.podium-item.rank-1::after{animation-duration:2.2s;}
.podium-item.rank-3::after{animation-duration:3s;}
@keyframes lbShimmer{0%{transform:translateX(-120%);}100%{transform:translateX(200%);}}

/* Glow floor */
.podium-item.rank-1::before{
  content:'';position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:140px;height:60px;
  background:radial-gradient(ellipse,rgba(59,130,246,.35),transparent 70%);
  pointer-events:none;z-index:0;
}
.podium-item.rank-2::before{
  content:'';position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:110px;height:50px;
  background:radial-gradient(ellipse,rgba(160,160,200,.2),transparent 70%);
  pointer-events:none;z-index:0;
}
.podium-item.rank-3::before{
  content:'';position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:100px;height:45px;
  background:radial-gradient(ellipse,rgba(205,127,50,.25),transparent 70%);
  pointer-events:none;z-index:0;
}

/* Crown / emoji icon */
.podium-crown{display:none;}
@keyframes lbGlow{0%,100%{box-shadow:0 0 12px 4px rgba(99,102,241,.5),0 0 32px 8px rgba(99,102,241,.25);}50%{box-shadow:0 0 22px 8px rgba(139,92,246,.7),0 0 48px 16px rgba(99,102,241,.35);}}
.podium-item.rank-1 .podium-avatar-inner{animation:lbGlow 2.2s ease-in-out infinite;}

/* Avatar ring */
.podium-avatar-wrap{
  border-radius:50%;padding:3px;margin-bottom:8px;position:relative;z-index:2;display:inline-block;
}
.podium-item.rank-1 .podium-avatar-wrap{
  background:conic-gradient(#60a5fa,#818cf8,#38bdf8,#60a5fa);
  box-shadow:0 0 14px rgba(99,148,255,.7);
}
.podium-item.rank-2 .podium-avatar-wrap{
  background:conic-gradient(#d1d5db,#9ca3af,#f3f4f6,#d1d5db);
  box-shadow:0 0 10px rgba(180,180,200,.5);
}
.podium-item.rank-3 .podium-avatar-wrap{
  background:conic-gradient(#d97706,#f59e0b,#b45309,#d97706);
  box-shadow:0 0 10px rgba(205,127,50,.45);
}
.podium-avatar-inner{
  border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  line-height:0;
}

/* Rank badge top-right */
.podium-rank-badge{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;z-index:3;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.podium-item.rank-1 .podium-rank-badge{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.5);}
.podium-item.rank-2 .podium-rank-badge{background:linear-gradient(135deg,#9ca3af,#d1d5db);color:#1e293b;top:10px;}
.podium-item.rank-3 .podium-rank-badge{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;top:10px;}

/* Self tag */
.podium-self-tag{
  position:absolute;top:8px;left:8px;
  background:rgba(139,92,246,.3);border:1px solid rgba(139,92,246,.5);border-radius:6px;
  font-size:8px;font-weight:700;color:#c4b5fd;padding:2px 6px;z-index:3;
  font-family:'Plus Jakarta Sans',sans-serif;
}

/* Name */
.podium-name{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;
  color:#fff;margin-bottom:6px;position:relative;z-index:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;
}
.podium-item.rank-1 .podium-name{font-size:12px;}

/* Score pill */
.podium-score{
  font-family:'Plus Jakarta Sans',sans-serif;
  display:inline-flex;flex-direction:column;align-items:center;
  padding:5px 10px;border-radius:10px;position:relative;z-index:2;gap:0;
}
.podium-item.rank-1 .podium-score{background:rgba(59,130,246,.18);border:1px solid rgba(99,148,255,.45);}
.podium-item.rank-2 .podium-score{background:rgba(180,180,200,.15);border:1px solid rgba(180,180,200,.35);}
.podium-item.rank-3 .podium-score{background:rgba(205,127,50,.15);border:1px solid rgba(205,127,50,.35);}
.podium-score-num{font-size:15px;font-weight:900;color:#fff;line-height:1.1;}
.podium-item.rank-1 .podium-score-num{font-size:17px;}
.podium-score-lbl{font-size:9px;font-weight:600;color:rgba(255,255,255,.65);line-height:1.3;}

/* Responsive */
@media(min-width:480px){
  .lb-podium{gap:12px;}
  .podium-item{border-radius:24px;}
  .podium-item.rank-1{min-height:240px;padding:52px 10px 16px;}
  .podium-item.rank-2{min-height:240px;}
  .podium-item.rank-3{min-height:240px;}
  .podium-name{font-size:12px;max-width:100px;}
  .podium-item.rank-1 .podium-name{font-size:13px;}
  .podium-score-num{font-size:16px;}
  .podium-item.rank-1 .podium-score-num{font-size:18px;}
  .podium-item.rank-1 .podium-crown{}
}
@media(min-width:640px){
  .lb-podium{gap:16px;max-width:580px;margin-left:auto;margin-right:auto;}
}
@media(max-width:360px){
  .lb-podium{gap:6px;}
  .podium-item{border-radius:16px;padding:12px 5px 10px;}
  .podium-item.rank-1{min-height:200px;padding:44px 5px 12px;}
  .podium-item.rank-2{min-height:200px;}
  .podium-item.rank-3{min-height:200px;}
  .podium-name{font-size:10px;max-width:70px;}
  .podium-item.rank-1 .podium-crown{}
  .podium-score-num{font-size:13px;}
  .podium-item.rank-1 .podium-score-num{font-size:15px;}
  .podium-score-lbl{font-size:8px;}
  .podium-score{padding:4px 8px;}
  .podium-rank-badge{width:18px;height:18px;font-size:9px;}
}

/* LIST (rank 4+) */
.lb-list{background:#ffffff;border:1px solid rgba(59,130,246,.13);border-radius:18px;overflow:hidden;box-shadow:0 4px 16px rgba(59,130,246,.09),0 1px 3px rgba(30,58,95,.05);}
.lb-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(59,130,246,.07);transition:background .15s;}
.lb-row:last-child{border-bottom:none;}
.lb-row:hover{background:var(--surface2);}
.lb-rank{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:var(--muted);min-width:22px;text-align:center;}
.lb-row img{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(59,130,246,.15);}
.lb-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:#1e3a5f;flex:1;}
.lb-score{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:var(--blue-light);}
.lb-av-sm{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;overflow:visible;position:relative;}
/* Online status dot — static, no animation, per user request */
.online-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #ffffff;box-shadow:0 0 0 1px rgba(0,0,0,.08);z-index:3;}
.online-dot.dot-sm{width:9px;height:9px;border-width:1.5px;bottom:-1px;right:-1px;}
.online-dot.dot-podium{bottom:6px;right:2px;}
.lb-row.self-row{background:rgba(99,102,241,.07);}

/* WITHDRAW */
.withdraw-card{background:#ffffff;border:1px solid rgba(59,130,246,.13);border-radius:24px;padding:22px 22px 26px;overflow:visible;box-shadow:0 4px 18px rgba(59,130,246,.10),0 1px 4px rgba(30,58,95,.05);}
.inp{width:100%;background:var(--surface2);border:1px solid rgba(59,130,246,.15);border-radius:14px;padding:15px 18px;font-size:15px;font-family:'Noto Sans Bengali',sans-serif;color:#1e3a5f;outline:none;margin-top:10px;transition:border-color .2s;}
.inp::placeholder{color:var(--muted);}
.inp:focus{border-color:var(--blue);}
.w-btn{width:100%;background:linear-gradient(135deg,#3b5ce8,#6e4cf6);color:#fff;font-size:16px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;border:none;border-radius:14px;padding:17px;margin-top:14px;cursor:pointer;box-shadow:0 4px 18px rgba(79,110,247,.35),0 0 0 1px rgba(79,110,247,.25);transition:all .2s;letter-spacing:.3px;position:relative;display:block;box-sizing:border-box;}
.w-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);border-radius:14px;pointer-events:none;}
.w-btn:hover{transform:translateY(-1px);filter:brightness(1.08);}
.w-btn:active{transform:translateY(0);filter:brightness(.96);}
.history-list{display:flex;flex-direction:column;gap:10px;}
.history-item{background:#ffffff;border:1px solid rgba(59,130,246,.10);border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:13px;transition:background .15s;box-shadow:0 4px 16px rgba(59,130,246,.09),0 1px 3px rgba(30,58,95,.05);}
.history-item:hover{background:var(--surface2);}
.hi-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;}
.hi-icon.bkash{box-shadow:0 0 14px rgba(220,20,70,.45),0 0 4px rgba(220,20,70,.2);}
.hi-icon.rocket{box-shadow:0 0 14px rgba(124,58,237,.45),0 0 4px rgba(124,58,237,.2);}
.hi-icon img{width:44px;height:44px;object-fit:cover;display:block;}
.hi-info{flex:1;}
.hi-method{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:#1e3a5f;}
.hi-date{font-size:11px;color:var(--muted2);margin-top:3px;}
.hi-right{text-align:right;}
.hi-amount{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:#1e3a5f;}
.hi-status{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:50px;margin-top:4px;font-family:'Plus Jakarta Sans',sans-serif;}
.s-done{background:var(--success-dim);color:var(--success);}
.s-pending{background:var(--warn-dim);color:var(--warn);}
.s-approved{background:rgba(99,102,241,.12);color:#6366f1;}
.s-fail{background:var(--danger-dim);color:var(--danger);}

/* BOTTOM NAV — Premium Redesign */
/* FIX 18: Added safe-area-inset-bottom padding for iOS home indicator bar.
   Without this, the nav overlaps the home indicator on iPhone X+ and
   Telegram hides the home indicator area differently than Safari.
   FIX 19: Using left/right:16px with margin:0 auto is correct for centering,
   but we add left:50%;transform:translateX(-50%) as a fallback for
   Telegram WebViews that misreport element offsets. We use the left/right
   approach (it's more reliable for fixed elements in WebViews). */
.bottom-nav {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
   width: calc(100% - 16px);
  max-width: 480px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 28px;
  padding: 10px 6px;
  z-index: 999;
  box-shadow:
    0 16px 48px rgba(59,130,246,0.12),
    0 4px 16px rgba(30,58,95,0.08),
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 0 0 1px rgba(59,130,246,0.08) inset;
}
.nav-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 6px 6px;
  border-radius: 20px;
  transition: all 0.22s cubic-bezier(.34,1.56,.64,1);
  flex: 1;
  min-width: 0;
  position: relative;
}
.nav-btn .ni {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s cubic-bezier(.34,1.56,.64,1);
  color: #94a3b8;
  position: relative;
  z-index: 1;
}
.nav-btn .ni svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.22s;
}
.nav-btn .nl {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
  text-transform: capitalize;
  transition: all 0.22s;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
/* Active state — blue pill bg */
.nav-btn.active {
  background: linear-gradient(135deg,#0047b3 0%,#0066ff 100%);
  box-shadow:
    0 6px 20px rgba(0,102,255,0.45),
    0 2px 8px rgba(0,31,77,0.5),
    0 1px 0 rgba(255,255,255,0.2) inset;
  transform: translateY(-1px);
}
.nav-btn.active .ni {
  color: #ffffff;
}
.nav-btn.active .ni svg {
  stroke: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.nav-btn.active .nl {
  color: rgba(255,255,255,0.92);
  font-weight: 700;
}
/* Hover for inactive */
.nav-btn:not(.active):hover {
  background: rgba(59,130,246,0.07);
}
.nav-btn:not(.active):hover .ni { color: #3b82f6; }
.nav-btn:not(.active):hover .nl { color: #3b82f6; }
/* Press feedback */
.nav-btn:active { transform: scale(0.93); }

/* MODAL */
/* FIX: Use inset:0 instead of top/left/width/height — more reliable in Telegram WebView.
   Also use --tg-viewport-height if available for correct height on Desktop */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:none;
  justify-content:flex-end;
  align-items:flex-end;
  z-index:9999;
  /* Telegram Desktop safe: use env variable if available */
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  overflow:hidden;
}
.modal.open{display:flex;}
.modal-sheet{width:100%;max-width:430px;margin:0 auto;background:#ffffff;border-radius:28px 28px 0 0;border:1px solid rgba(59,130,246,.15);border-bottom:none;overflow:hidden;animation:slideUp .3s cubic-bezier(.22,.61,.36,1) both;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-handle{width:36px;height:4px;background:rgba(255,255,255,.12);border-radius:10px;margin:14px auto 18px;}
.sheet-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:#1e3a5f;padding:0 22px 14px;}
.sheet-option{display:flex;align-items:center;gap:14px;padding:17px 22px;border-top:1px solid rgba(59,130,246,.08);cursor:pointer;transition:background .15s;}
.sheet-option:hover{background:rgba(59,130,246,.06);}
.sopt-icon{font-size:24px;}
.sopt-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;color:#1e3a5f;}
.sopt-note{font-size:11px;color:var(--muted2);margin-top:2px;}

/* SEND MONEY STYLES */
.sm-field{display:flex;flex-direction:column;gap:7px;}
.sm-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;color:var(--muted2);letter-spacing:.4px;text-transform:uppercase;}
.sm-input-wrap{display:flex;align-items:center;background:var(--surface2);border:1px solid rgba(59,130,246,.15);border-radius:14px;padding:0 16px;transition:border-color .2s;}
.sm-input-wrap:focus-within{border-color:var(--blue);}
.sm-input-icon{font-size:16px;margin-right:10px;color:var(--muted2);flex-shrink:0;}
.sm-input{flex:1;background:none;border:none;outline:none;color:#1e3a5f;font-size:16px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;padding:14px 0;}
.sm-input::placeholder{color:var(--muted);font-weight:400;}
.sm-hint{font-size:11px;color:var(--muted2);padding-left:4px;}
.sm-send-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--blue),var(--purple));border:none;border-radius:16px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:opacity .2s,transform .15s;margin-top:4px;}
.sm-send-btn:hover{opacity:.9;transform:translateY(-1px);}
.sm-send-btn:active{transform:translateY(0);}

/* RECEIVE STYLES */
.receive-id-box{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1.5px dashed rgba(59,130,246,.3);border-radius:18px;padding:18px 20px;}
.copy-id-btn{background:linear-gradient(135deg,var(--blue),var(--purple));border:none;border-radius:12px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;padding:10px 16px;cursor:pointer;transition:opacity .2s,transform .15s;flex-shrink:0;}
.copy-id-btn:hover{opacity:.85;transform:scale(1.03);}

/* TOAST */
/* FIX 8: Toast was using left:0;right:0 in hidden state but translateX(-50%)
   in shown state. This inconsistency means the element is painted at x=0
   when hidden, potentially triggering scrollable overflow detection.
   Fix: Always use left:50% + translateX(-50%) for centering. The hidden
   state uses translateY(-120px) to hide it above viewport — no x offset needed. */
.toast-msg{
  position:fixed;top:24px;
  left:50%;
  /* Hidden: centered horizontally, above viewport */
  transform:translateX(-50%) translateY(-120px) scale(0.88);
  padding:13px 20px 13px 14px;border-radius:22px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:700;
  z-index:99999;
  transition:transform .45s cubic-bezier(.34,1.45,.64,1),opacity .35s;
  opacity:0;white-space:nowrap;
  box-shadow:0 16px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1) inset;
  display:flex;align-items:center;gap:11px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  /* FIX 9: Prevent toast from exceeding viewport width on narrow screens */
  max-width:calc(100vw - 32px);
  white-space:normal;
  word-break:break-word;
}
.toast-success{
  background:rgba(10,20,50,.88);
  border:1px solid rgba(99,102,241,.3);
  color:#fff;
}
/* FIX 10: Show state keeps translateX(-50%) — element was already centered */
.toast-msg.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;}
.toast-icon-wrap{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}


/* ANIMATIONS */
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* CARD SLIDER - Fade In/Out */
.card-slider-wrap{overflow:hidden;border-radius:28px;touch-action:pan-y;}
.card-slider-track{position:relative;}
.card-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;will-change:opacity,transform;border-radius:28px!important;}
.card-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative;}
.card-swipe-hint{text-align:center;font-size:10px;color:rgba(255,255,255,.35);margin-top:12px;letter-spacing:.3px;position:relative;z-index:1;}
.card-dots{display:flex;justify-content:center;gap:6px;margin-top:10px;}
.card-dot{width:6px;height:6px;border-radius:50%;background:rgba(59,130,246,.25);transition:all .3s;cursor:pointer;}
.card-dot.active{width:18px;border-radius:4px;background:var(--blue);}

/* MINING */
.mining-bar-wrap{height:5px;background:rgba(255,255,255,.12);border-radius:10px;overflow:hidden;}
.mining-bar-fill{height:100%;background:linear-gradient(90deg,rgba(255,255,255,.6),#ffffff);border-radius:10px;transition:width .5s ease;}
.mining-claim-btn{flex:1;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;padding:9px 0;border-radius:12px;cursor:pointer;transition:all .2s;letter-spacing:.2px;}
.mining-claim-btn:disabled{background:rgba(255,255,255,.15);color:rgba(255,255,255,.4);cursor:not-allowed;}
.mining-claim-btn:not(:disabled):hover{filter:brightness(1.1);}
.mining-upgrade-btn{flex:1;background:linear-gradient(135deg,#8B5CF6,#7C3AED);border:none;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;padding:9px 0;border-radius:12px;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;letter-spacing:.1px;box-shadow:0 4px 14px rgba(124,58,237,.4);touch-action:manipulation;}
.mining-upgrade-btn:hover{filter:brightness(1.1);}
.mining-upgrade-btn:active{transform:scale(.94);}
.mining-upgrade-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ══ LOADING SCREEN CSS ══ */
#loadingScreen{
  position:fixed;inset:0;z-index:99999;
  background:linear-gradient(145deg,#000d1a 0%,#001f4d 25%,#003080 50%,#001f4d 75%,#000d1a 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .35s ease,visibility .35s ease;
  overflow:hidden;
  opacity:1;
  visibility:visible;
  will-change:opacity;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  isolation:isolate;
}
#loadingScreen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.ld-np{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.9);
  animation:ldNpBounce 1.1s ease-in-out infinite;
  box-shadow:0 0 8px rgba(255,255,255,.5);
}
@keyframes ldNpBounce{
  0%,100%{transform:translateY(0) scale(.7);}
  50%{transform:translateY(-10px) scale(1);}
}
@keyframes ldLogoPulse{
  0%,100%{transform:translateZ(0) scale(1);}
  50%{transform:translateZ(0) scale(1.06);}
}

/* ══════ REFRESH RATE & PERFORMANCE OPTIMIZATION ══════ */

/* GPU layer promotion — শুধু যেগুলো animate হয় */
.header-banner,
.wallet-card,
.task-card,
.full-task,
.modal,
#adLoadingOverlay,
#noAdsNotif,
#adLoadingNotif,
#adRewardNotif,
.toast-msg,
.podium-item::after {
  will-change: transform;
}

/* Spinner আলাদা — শুধু rotate হয় */
.ad-loading-spinner {
  will-change: transform;
}

/* Blink/pulse — opacity change */
.av-dot,
.ad-ld-icon,
.ad-ld-dot {
  will-change: opacity, transform;
}

/* CSS variable দিয়ে refresh-rate-aware duration */
:root {
  --dur-fast: 0.22s;
  --dur-mid: 0.42s;
  --dur-slow: 0.5s;
  --dur-blink: 2.4s;
}

/* prefers-reduced-motion — accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* শুধু essential spinner চলবে */
  .ad-loading-spinner {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
  }
}


/* Reward banner */

/* Completed state */


/* Unlock cards */

/* ══════ NOTICE BANNER ══════ */
#noticeBanner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  animation: bannerSlideDown 0.35s cubic-bezier(.4,0,.2,1);
}
#noticeBanner.show { display: flex; }
#noticeBanner .banner-text { flex: 1; min-width: 0; }
#noticeBanner .banner-text.ticker-mode { overflow: hidden; white-space: nowrap; }
#noticeBanner .banner-text.ticker-mode .ticker-inner {
  display: inline-block;
  white-space: nowrap;
  animation: tickerScroll var(--ticker-speed, 25s) linear infinite;
}
@keyframes tickerScroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
#noticeBanner .banner-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: inherit;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#noticeBannerSpacer { display: none; height: 48px; }
#noticeBannerSpacer.show { display: block; }
@keyframes bannerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}





@keyframes gemFloatUpDown {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.06); }
}
@keyframes gemGlowPulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
@keyframes gemSparkle {
  0%,100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 0;  transform: scale(0); }
}




@keyframes megaphoneShake{0%,100%{transform:rotate(0deg) scale(1);}15%{transform:rotate(-12deg) scale(1.08);}30%{transform:rotate(10deg) scale(1.05);}45%{transform:rotate(-8deg) scale(1.07);}60%{transform:rotate(6deg) scale(1.04);}75%{transform:rotate(-3deg) scale(1.02);}90%{transform:rotate(2deg) scale(1.01);}}
@keyframes fireWiggle{0%,100%{transform:scale(1) rotate(-3deg);}50%{transform:scale(1.08) rotate(3deg);}}
@keyframes warningFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.05);}}




@keyframes floatStar{0%,100%{transform:translate3d(0,0,0) scale3d(1,1,1);}50%{transform:translate3d(0,-8px,0) scale3d(1.15,1.15,1);}}
@keyframes popIn{from{transform:scale3d(0.5,0.5,1);opacity:0;}to{transform:scale3d(1,1,1);opacity:1;}}




@keyframes rdmBounce{0%,100%{transform:translate3d(0,0,0) scale3d(1,1,1);}45%{transform:translate3d(0,-10px,0) scale3d(1.07,1.07,1);}70%{transform:translate3d(0,-4px,0) scale3d(1.03,1.03,1);}}




.rdm-spinner {
  display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:rdmSpin .7s linear infinite;
  vertical-align:middle;margin-right:6px;
}
@keyframes rdmSpin{to{transform:translate3d(0,0,0) rotate(360deg)}}

/* ── Performance optimizations ── */
/* GPU layer promotion for animated/transitioning elements */
.wallet-card,.header-banner,.profile-pill{will-change:transform;transform:translateZ(0);}
.task-card{will-change:transform;}

.toast-msg{will-change:transform,opacity;}
.icon-btn{will-change:background;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ── Low-end device: body.lite-mode এ blur effects বন্ধ ──
   JS detect করে class দেবে — low RAM/CPU device এ GPU composite layer বাঁচাবে */
body.lite-mode .profile-pill,
body.lite-mode .icon-btn,
body.lite-mode .wallet-badge,
body.lite-mode .wallet-action-btn,
body.lite-mode .bottom-nav,
body.lite-mode .modal-sheet,
body.lite-mode .modal,
body.lite-mode #adLoadingOverlay,
body.lite-mode #loadingScreen{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Modal overlay blur বন্ধ */
body.lite-mode .modal.open{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* will-change শুধু যখন actually animate হচ্ছে তখনই — lite-mode এ সরিয়ে দাও */
body.lite-mode .wallet-card,
body.lite-mode .header-banner,
body.lite-mode .task-card{
  will-change:auto !important;
}
/* content-visibility removed — Telegram WebView mobile এ flash করে */
