/* Whale Stars UI (Neon) — unified style (matches provided template) */
:root{
  /* === Palette (from avatar) === */
  --bg-0:#050816;
  --bg-1:#070B1C;
  --card:#0B1028;
  --card-2:#0E1634;
  --stroke: rgba(148,163,184,.28);
  --stroke-2: rgba(56,189,248,.22);

  --text:#F8FAFF;
  --muted: rgba(248,250,255,.62);

  --violet:#8B5CF6;
  --violet-2:#6D28D9;
  --blue:#2563EB;
  --cyan:#22D3EE;
  --neon:#38BDF8;
  --gold:#FACC15;
  --good:#22C55E;
  --danger:#F97373;

  --shadow: 0 18px 40px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.32);

  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;

  --grad: linear-gradient(135deg, var(--violet-2), var(--blue), var(--cyan));
  --grad-soft: linear-gradient(135deg, rgba(109,40,217,.35), rgba(37,99,235,.35), rgba(34,211,238,.28));
  --glow: 0 0 18px rgba(56,189,248,.35), 0 0 48px rgba(37,99,235,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 70% 10%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 700px at 25% 20%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(900px 700px at 40% 85%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%, #040614);
  overflow-x:hidden;
}

/* Subtle "digital grid" like avatar */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  opacity:.28;
  background:
    linear-gradient(to right, rgba(56,189,248,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,92,246,.12) 1px, transparent 1px);
  background-size: 56px 56px;
  filter: blur(.2px);
  mask-image: radial-gradient(circle at 50% 30%, black 35%, transparent 70%);
}

/* Tiny particles */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.32) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.25) 0 1px, transparent 2px);
  background-size: 420px 420px;
  filter: blur(.2px);
}

/* ==== Core containers (mapped to your app) ==== */
.app{
  min-height:100%;
  display:flex;
  justify-content:center;
  padding:18px 12px 100px;
}
.shell{
  width:min(430px, 100%);
  border-radius: 30px;
  background: rgba(7,10,26,.35);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(14px);
  padding:14px 14px 18px;
}

/* Glass panels */
.glass,
.header,
.main-card,
.ref-card,
.panel,
.modal-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

/* Topbar */
.header{
  border-radius: 22px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.header-left{display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;}
.header-right{display:flex; align-items:center; gap:10px; flex:0 0 auto; flex-wrap:nowrap;}

/* Hide avatar/title in header (kept in DOM for JS safety) */
.header .avatar-wrap,
.header .title-block{display:none !important;}

/* Hide old balance block in content */
.old-balance-block{display:none !important;}

.avatar-wrap{flex:0 0 auto;}
.avatar,
#avatarInitial{
  width:40px;height:40px;border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(34,211,238,.30), rgba(37,99,235,.12) 45%, rgba(0,0,0,.2) 70%);
  border: 1px solid rgba(56,189,248,.25);
  position:relative;
  box-shadow: var(--glow);
  display:grid;place-items:center;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--text);
}

.title-block{flex:1 1 auto; min-width:0;}
.title-block h1{
  margin:0;
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:800;
  font-size:15px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle,
#userInfo{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* Profile Telegram user */
.profile-user-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:0 0 12px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}
.profile-user-avatar{
  width:54px;
  height:54px;
  flex:0 0 54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 35% 35%, rgba(34,211,238,.30), rgba(37,99,235,.12) 45%, rgba(0,0,0,.2) 70%);
  border:1px solid rgba(56,189,248,.25);
  box-shadow:var(--glow);
  font-size:20px;
  font-weight:800;
}
.profile-user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.profile-user-meta{min-width:0;flex:1;}
.profile-user-name{
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.profile-user-username{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Lang switch */
.lang-switch{
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 999px;
  overflow:hidden;
}
.lang-btn{
  appearance:none;
  border:0;
  color:var(--muted);
  background:transparent;
  padding:7px 10px;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
}
.lang-btn.active{
  color:var(--text);
  background: var(--grad);
  box-shadow: var(--glow);
}

/* Status chip (badge) */
.badge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.16);
  color: rgba(248,250,255,.74);
  font-size:12px;
  white-space:nowrap;
}
.badge-dot{
  width:9px;height:9px;border-radius:50%;
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12), 0 0 14px rgba(34,197,94,.35);
}

/* Balance card */
.main-card{
  margin-top:12px;
  border-radius: 22px;
  padding:14px;
  position:relative;
  overflow:hidden;
}
.main-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(700px 220px at 65% 0%, rgba(56,189,248,.22), transparent 55%),
              radial-gradient(520px 260px at 20% 35%, rgba(37,99,235,.12), transparent 60%);
  pointer-events:none;
}
.row-between{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  justify-content:space-between;
}
.balance-label{
  color:var(--muted);
  font-size:12px;
  margin-top:10px;
}
.balance-value{
  display:flex;
  align-items:baseline;
  gap:10px;
  justify-content:flex-end;
  font-size:40px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1;
  text-shadow: 0 0 22px rgba(56,189,248,.22);
}
.balance-value span{font:inherit}
#refreshBalance{opacity:.85}
.balance-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}
.icon-btn, .iconBtn, .mini-btn{
  width:36px;height:36px;
  border-radius:12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.05);
  display:grid;place-items:center;
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
  color:var(--text);
}
.icon-btn:hover, .iconBtn:hover, .mini-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07);}

/* Buttons */
.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  font-weight:800;
  border-radius: 999px;
  padding:11px 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: .15s transform ease, .15s filter ease, .15s box-shadow ease;
  color:var(--text);
  user-select:none;
  text-decoration:none;
}
.btn:active{transform: scale(.98);}
.btn-primary{
  background: var(--grad);
  box-shadow: var(--glow);
  border: 1px solid rgba(255,255,255,.08);
}
.btn-primary:hover{filter: brightness(1.06);}
.btn-secondary,
.btn-outline{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(248,250,255,.88);
}
.btn-ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
  color: rgba(248,250,255,.78);
}

/* Tabs / Main nav */
.main-nav{
  margin-top:14px;
  display:flex;
  gap:10px;
}
.main-nav-btn{
  flex:1 1 0;
  border-radius: 16px;
  padding:12px 12px;
  text-align:center;
  font-weight:800;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.70);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.main-nav-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.main-nav-btn.active{
  background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(37,99,235,.12));
  border-color: rgba(56,189,248,.25);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 26px rgba(56,189,248,.14);
}

/* Section titles */
.section-title, h2.section-title{
  margin-top:14px;
  font-weight:900;
  font-size:18px;
}
.section-desc, .muted{
  color: var(--muted);
  font-size:13px;
  line-height:1.35;
}

/* Segmented pills */
.filter-row, .seg{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.filter-btn, .seg .pill, .pill{
  flex:1 1 0;
  min-width:140px;
  text-align:center;
  border-radius: 999px;
  padding:11px 12px;
  font-weight:800;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.78);
  cursor:pointer;
}
.filter-btn.active, .seg .pill.active, .pill.active{
  background: var(--grad);
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--glow);
  color: var(--text);
}

/* Task cards (your renderer already uses .task) */
.task{
  margin-top:12px;
  border-radius: 20px;
  padding:12px;
  background: rgba(8,12,30,.52);
  border: 1px solid rgba(56,189,248,.18);
  box-shadow: 0 0 0 1px rgba(139,92,246,.10) inset, var(--shadow-soft);
  overflow:hidden;
  position:relative;
}
.task::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 180px at 15% 10%, rgba(139,92,246,.22), transparent 55%),
              radial-gradient(520px 200px at 85% 85%, rgba(34,211,238,.18), transparent 55%);
  pointer-events:none;
  opacity:.85;
}
.task .trow{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.task .reward{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(250,204,21,.22);
  box-shadow: 0 0 18px rgba(250,204,21,.10);
  font-weight:900;
}
.task .actions{
  position:relative;
  display:flex;
  gap:10px;
  margin-top:10px;
}
.task .actions .btn{
  flex:1 1 0;
  justify-content:center;
  border-radius: 14px;
  padding:11px 12px;
}

/* Subtabs */
.subtabs{
  margin-top:14px;
  display:flex;
  gap:10px;
}
.subtab{
  flex:1 1 0;
  padding:11px 12px;
  border-radius: 999px;
  text-align:center;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.70);
  cursor:pointer;
}
.subtab.active{
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.12));
  border-color: rgba(56,189,248,.22);
  color:var(--text);
  box-shadow: 0 0 20px rgba(56,189,248,.12);
}

/* Referral card */
.ref-card, .ref{
  margin-top:12px;
  border-radius: 20px;
  padding:12px;
}
.ref-card h3, .ref h3{
  margin:0;
  font-size:16px;
  font-weight:900;
}
.ref-card p, .ref p{
  margin:8px 0 0;
  color: var(--muted);
  font-size:13px;
  line-height:1.35;
}
.stats{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.stat{
  border-radius: 16px;
  padding:10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
}
.stat .k{color: rgba(248,250,255,.55); font-size:12px;}
.stat .v{margin-top:4px; font-weight:900; font-size:16px; display:flex; align-items:center; gap:8px;}
.refrow{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  padding:10px;
}
.refrow input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  color: rgba(248,250,255,.86);
  font-weight:700;
  font-size:13px;
}
.refrow .copy{
  flex:0 0 auto;
  border-radius: 12px;
  padding:10px 12px;
  font-weight:900;
}

/* Form controls */
.input, input[type="text"], input[type="number"], input[type="url"], textarea, select{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.90);
  padding:12px 12px;
  outline:none;
}
.input:focus, input:focus, textarea:focus, select:focus{
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 22px rgba(56,189,248,.12);
}
textarea{min-height:96px; resize:vertical;}

hr{border:0; border-top:1px solid rgba(148,163,184,.14); margin:12px 0;}
.hidden{display:none !important;}
.small{font-size:12px;color:var(--muted)}
.spacer{height:6px}

/* Mobile tweaks */
@media (max-width: 380px){
  .balance-value{font-size:34px}
  .badge{display:none}
  .filter-btn, .seg .pill, .pill{min-width: 120px}
}

/* Overrides for legacy inline-styled controls */
#refLinkInput{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  color: rgba(248,250,255,.86) !important;
  font-weight:700 !important;
  font-size:13px !important;
}
.btn-sm{padding:9px 12px; font-size:12px; border-radius:12px;}

/* === Additional mappings for app-specific classes (to ensure 100% coverage) === */

/* Generic headings / sections */
.section-title{
  margin-top:14px;
  font-weight:900;
  font-size:18px;
}
.section-sub,
.section-desc{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

/* Tabs used in app */
.offer-tabs,
.task-types{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.offer-tab,
.task-type-btn{
  flex:1 1 0;
  min-width:140px;
  border-radius: 999px;
  margin-bottom: 3px;
  margin-top: 3px;
  padding:11px 12px;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.78);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.offer-tab:hover,
.task-type-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.offer-tab.active,
.task-type-btn.active{
  background: var(--grad);
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--glow);
  color: var(--text);
}

/* Inner tabs (Create / My tasks etc.) */
.inner-tabs{display:flex; gap:10px; margin-top:12px;}
.inner-tab{
  flex:1 1 0;
  padding:11px 12px;
  border-radius: 999px;
  text-align:center;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.70);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.inner-tab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.inner-tab-active,
.inner-tab.active{
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.12));
  border-color: rgba(56,189,248,.22);
  color:var(--text);
  box-shadow: 0 0 20px rgba(56,189,248,.12);
}

/* Lists */
.list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.list-item{
  border-radius: 20px;
  padding:12px;
  background: rgba(8,12,30,.52);
  border: 1px solid rgba(56,189,248,.18);
  box-shadow: 0 0 0 1px rgba(139,92,246,.10) inset, var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.list-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 180px at 15% 10%, rgba(37,99,235,.12), transparent 55%),
              radial-gradient(520px 200px at 85% 85%, rgba(34,211,238,.14), transparent 55%);
  pointer-events:none;
  opacity:.75;
}

/* History list layout + status badges */
.list-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:relative;
  z-index:1;
}
.list-main-left{
  font-weight:900;
  font-size:13px;
  color: rgba(248,250,255,.92);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.list-sub{
  margin-top:6px;
  position:relative;
  z-index:1;
  font-weight:800;
  color: rgba(248,250,255,.88);
}
.list-meta{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color: var(--muted);
  position:relative;
  z-index:1;
}
.badge-status{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.05);
  color: rgba(248,250,255,.80);
  white-space:nowrap;
}
.badge-status.paid{
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.28);
  color: rgba(248,250,255,.92);
  box-shadow: 0 0 14px rgba(34,211,238,.16);
}
.badge-status.completed{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: rgba(248,250,255,.92);
  box-shadow: 0 0 14px rgba(34,197,94,.14);
}
.badge-status.pending{
  background: rgba(250,204,21,.10);
  border-color: rgba(250,204,21,.24);
  color: rgba(248,250,255,.90);
  box-shadow: 0 0 14px rgba(250,204,21,.10);
}
.badge-status.rejected,
.badge-status.canceled{
  background: rgba(249,115,115,.10);
  border-color: rgba(249,115,115,.24);
  color: rgba(248,250,255,.90);
}

/* Generic card class (some blocks in index.php use .card) */
.card{
  border-radius: 22px;
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px);
}

/* Form groups */
.input-group{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  padding:10px;
}

/* Ensure plain <button> inside app looks consistent even if missing .btn */
.shell button:not(.btn):not(.lang-btn):not(.offer-tab):not(.task-type-btn):not(.inner-tab):not(.main-nav-btn){
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.82);
  border-radius: 14px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
}

/* Small chips/badges */
.chip,
.badge{
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.05);
  color: rgba(248,250,255,.70);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Sections */
.main-section{margin-top:12px;}


/* === PATCH v3 fixes === */

/* Remove the "left line" effect on primary/active elements: use outline instead of border */
.btn-primary,
.offer-tab.active,
.task-type-btn.active,
.inner-tab-active{
  border: 0 !important;
  outline: 1px solid rgba(255,255,255,.10);
  outline-offset: -1px;
  box-shadow: var(--glow), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.btn-primary:hover{
  box-shadow: var(--glow), 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Tabs (Referrals / Withdraw / History) */
.tabs{
  margin-top: 14px;
  display:flex;
  gap:10px;
}
/* Profile tabs (only inside Profile section) */
.tabs.profile-tabs{
  flex-wrap: wrap;
}
.tabs.profile-tabs .tab{
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
}
.tabs.profile-tabs .tab span{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab{
  flex:1 1 0;
  border-radius: 16px;
  padding:12px 12px;
  text-align:center;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.72);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.tab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.tab.active{
  border:0;
  outline: 1px solid rgba(56,189,248,.20);
  outline-offset:-1px;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.12));
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(56,189,248,.12) inset, 0 0 22px rgba(56,189,248,.14);
}

/* Offerwall tabs: show all buttons (no horizontal scroll) */
.offer-tabs{
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
}
.offer-tab{
  flex: 1 1 0;
  min-width: 140px;
  white-space: normal;
}
/* Task-type buttons spacing */
.task-types{
  margin-top: 14px;
  margin-bottom: 12px;
}

/* Offerwall frame back */
.offerwall-frame{
  margin-top: 12px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(56,189,248,.18);
  background: rgba(8,12,30,.52);
  box-shadow: 0 0 0 1px rgba(139,92,246,.10) inset, var(--shadow-soft);
  position:relative;
}
.offerwall-frame::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(520px 180px at 15% 10%, rgba(37,99,235,.12), transparent 55%),
              radial-gradient(520px 200px at 85% 85%, rgba(34,211,238,.16), transparent 55%);
  pointer-events:none;
}
.offerwall-frame iframe{
  position:relative;
  width: 100%;
  height: min(72vh, 640px);
  border: 0;
  display:block;
  background: transparent;
}

/* Referral link input border visibility */
#refLinkInput{
  background: rgba(2,6,23,.55) !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,.10) inset, 0 0 18px rgba(56,189,248,.10);
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: rgba(248,250,255,.92) !important;
}

/* Make "Offerwalls" and "Create task" cards more neon (less grey feel) */
#sectionOfferwalls .card,
#sectionCreateTask .card{
  background: radial-gradient(700px 220px at 65% 0%, rgba(56,189,248,.14), transparent 55%),
              radial-gradient(520px 260px at 20% 35%, rgba(139,92,246,.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(56,189,248,.16);
}

/* Keep buttons from collapsing into full width single column where not needed */
.offer-tabs .offer-tab{width:auto}


/* Safety: badge removed from markup, but if exists, hide */
#i18n-badge{display:none !important;}


.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#08110a;border:0;}
.btn-success:disabled{opacity:.45;filter:saturate(.6);}


/* ===== Whale Crash Stage ===== */
.crash-stage{
  position:relative;
  width:100%;
  height:180px;
  border-radius:16px;
  overflow:hidden;
  background: radial-gradient(120% 120% at 20% 20%, rgba(46,249,255,.18) 0%, rgba(165,107,255,.14) 45%, rgba(10,12,30,.92) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.crash-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.crash-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.55;
  pointer-events:none;
}
.crash-whale{
  position:absolute;
  left:18px;
  bottom:18px;
  font-size:38px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
  transform: translate3d(0,0,0);
  pointer-events:none;
  transition: transform 80ms linear;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.crash-stage{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(46,249,255,.14), transparent 55%),
              radial-gradient(900px 520px at 85% 10%, rgba(165,107,255,.18), transparent 55%),
              rgba(10,14,28,.92);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

#crashCanvas{ width:100%; height:auto; display:block; }

.crash-hud{
  position:absolute; left:12px; right:12px; top:10px;
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  pointer-events:none;
}

.crash-mult{
  pointer-events:none;
  font-size:34px; font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.crash-pf{
  pointer-events:auto;
  max-width: 360px;
  font-size:12px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.crash-pf .muted{ opacity:.75; }
.crash-pf #pfSeed, .crash-pf #pfHash { word-break: break-all; }

.pf-actions{ display:flex; gap:10px; align-items:center; margin-top:8px; }



/* ===== Crash window from 1.html (scoped) ===== */
.crashWrap{
  --safe-top: 0px;
  position: relative;
  width: calc(100% + 28px);
  height: min(66vh, 330px);
  min-height: 220px;
  margin-top: -10px;
  margin-left: -14px;
  margin-right: -14px;
  border-radius: 18px;
  overflow: hidden;
}

.crashWrap .crashArea{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
  overflow: hidden;
}
.crashWrap .crashArea::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1100px 520px at 30% 10%, rgba(57,214,255,.16), transparent 60%),
        radial-gradient(980px 520px at 90% 40%, rgba(122,92,255,.14), transparent 60%),
        repeating-radial-gradient(circle at 30% 30%, rgba(57,214,255,.06) 0 2px, transparent 2px 22px);
      opacity:.95;
      pointer-events:none;
      mix-blend-mode: screen;
    }.crashWrap .crashArea::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height: 42%;
      background:
        linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
      pointer-events:none;
    }.crashWrap /* decors (left/center/right) */
    .decor{ position:absolute; z-index:3; pointer-events:none; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); opacity:.95; }.crashWrap .decor.left{ font-size: 40px; bottom: 14px; left: 14px; }.crashWrap .decor.center{ font-size: 38px; bottom: 16px; left: 50%; transform: translateX(-50%); }.crashWrap .decor.right{ font-size: 32px; bottom: 20px; right: 14px; opacity:.88; }.crashWrap .hud{
      position: relative;
      z-index: 4;
      padding: 14px 12px 0;
      text-align:center;
    }.crashWrap .mult{
      font-size: 58px;
      font-weight: 990;
      letter-spacing: .3px;
      color: var(--accent);
      text-shadow: 0 0 18px rgba(57,214,255,.35);
      line-height: 1;
    }.crashWrap .mult.crashed{
      color: var(--bad);
      text-shadow: 0 0 18px rgba(255,107,107,.30);
    }.crashWrap .status{
      margin-top: 6px;
      font-size: 13px;
      color: var(--hint);
      font-weight: 950;
    }.crashWrap .swimField{
      position: absolute;
      left: 0; right: 0;
      top: 92px;
      bottom: 0;
      z-index: 1;
      overflow:hidden;
    }.crashWrap .creature{
      position:absolute;
      left: 0; top: 0;
      opacity: 1;
      pointer-events:none;
      filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
      will-change: transform;
      user-select:none;
      transform: translate(-120px, 999px);
    }.crashWrap /* bubbles restored: emoji bubble up + burst bubbles */
    .emojiBubble{
      position:absolute;
      z-index: 2;
      font-size: 18px;
      opacity:.6;
      pointer-events:none;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
      animation: bubbleUp var(--dur) linear forwards;
      transform: translateY(20px);
    }@keyframes bubbleUp{
      0%{ transform: translateY(20px); opacity:.0; }.crashWrap 18%{ opacity:.6; }.crashWrap 100%{ transform: translateY(-240px); opacity:0; }.crashWrap }
    .burstBubble{
      position:absolute;
      width: 10px; height: 10px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(57,214,255,.35) 55%, rgba(57,214,255,.08) 72%, transparent 75%);
      border: 1px solid rgba(255,255,255,.20);
      box-shadow: 0 0 18px rgba(57,214,255,.16);
      pointer-events:none;
      will-change: transform, opacity;
      opacity: 1;
      animation: bubbleBurst 700ms ease-out forwards;
    }@keyframes bubbleBurst{
      0%   { transform: translate(0,0) scale(.85); opacity: 1; }.crashWrap 90%{ opacity: .85; }.crashWrap 100%{ transform: translate(var(--dx), var(--dy)) scale(.35); opacity: 0; }.crashWrap }

    /* multiplier strip */
    .strip{
      position:absolute;
      left:0; right:0;
      bottom: 120px;
      padding: 0 12px;
      display:flex;
      gap:10px;
      justify-content:center;
      z-index: 10;
      pointer-events:none;
    }.crashWrap .chip{
      pointer-events:auto;
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(255,255,255,.80);
      font-weight: 900;
      letter-spacing: .2px;
      min-width: 68px;
      text-align:center;
    }.crashWrap .chip.active{
      background: linear-gradient(135deg, rgba(122,92,255,.28), rgba(57,214,255,.18));
      border-color: rgba(57,214,255,.22);
      color: rgba(255,255,255,.92);
      box-shadow: 0 10px 30px rgba(57,214,255,.10);
    }.crashWrap /* big action button */
    .ctaWrap{
      position:absolute;
      left:0; right:0;
      bottom: 20px;
      padding: 0 14px;
      z-index: 10;
    }.crashWrap .cta{
      width:100%;
      border:0;
      padding: 18px 16px;
      border-radius: 20px;
      font-weight: 950;
      font-size: 22px;
      letter-spacing:.2px;
      color: rgba(255,255,255,.95);
      background: linear-gradient(180deg, #2c93ff, #1a79ff);
      box-shadow: 0 20px 60px rgba(26,121,255,.22);
      cursor:pointer;
    }.crashWrap .cta:active{ transform: translateY(1px); }.crashWrap /* bottom list + nav like screenshot */
    .list{
      flex: 1;
      background: rgba(255,255,255,.03);
      border-top: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(16px);
      overflow:auto;
    }.crashWrap .row{
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 16px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
    }.crashWrap .avatar{
      width: 46px; height: 46px;
      border-radius: 999px;
      display:grid; place-items:center;
      font-weight: 900;
      color: rgba(255,255,255,.92);
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.12);
      flex:0 0 46px;
    }.crashWrap .meta{ flex:1; min-width:0; }.crashWrap .name{
      font-weight: 950;
      font-size: 20px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }.crashWrap .sub{
      margin-top: 6px;
      display:flex;
      align-items:center;
      gap: 10px;
      color: rgba(255,255,255,.55);
      font-weight: 900;
      font-size: 14px;
    }.crashWrap .sub .x{ color: rgba(61,255,178,.80); }.crashWrap .starsMini{
      display:inline-flex; align-items:center; gap: 6px;
    }.crashWrap .starDot{
      width: 16px; height: 16px;
      border-radius: 999px;
      display:grid; place-items:center;
      font-size: 10px;
      background: rgba(255,215,0,.14);
      border: 1px solid rgba(255,215,0,.16);
      color: rgba(255,255,255,.88);
    }.crashWrap .right{
      display:flex;
      align-items:center;
      gap: 12px;
    }.crashWrap .gain{
      font-weight: 980;
      font-size: 28px;
      letter-spacing: .2px;
      white-space:nowrap;
    }.crashWrap .gain.green{ color: rgba(61,255,178,.90); }.crashWrap .gain.white{ color: rgba(255,255,255,.88); }.crashWrap .item{
      width: 40px; height: 40px;
      display:grid; place-items:center;
      font-size: 28px;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
    }

    


/* ===== Whale Crash UI extras ===== */
.crashArea{ position:relative; overflow:hidden; }
.crashArea .hud .sub{ font-size:12px; opacity:.85; margin-top:2px; }

.crashToasts{
  position:absolute;
  z-index: 30;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  pointer-events:none;
  z-index:200000;
  width: min(92%, 360px);
}
.toast{
  align-self:center; text-align:center; width:100%;
  padding:10px 12px;
  border-radius:14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight:700;
  transform: translateY(0);
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease;
}
.toast.info{ background: rgba(99,102,241,.18); border:1px solid rgba(99,102,241,.35); }
.toast.success{ background: rgba(16,185,129,.16); border:1px solid rgba(16,185,129,.35); }
.toast.warn{ background: rgba(245,158,11,.16); border:1px solid rgba(245,158,11,.35); }
.toast.error{ background: rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.35); }
.toast.hide{ transform: translateY(-8px); opacity:0; }

.bubbleLayer{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.bubble{
  position:absolute; bottom:-10%;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.20);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  animation: bubbleUp linear infinite;
}
@keyframes bubbleUp{
  0%{ transform: translateY(0) scale(1); opacity:.0; }
  10%{ opacity:.65; }
  100%{ transform: translateY(-130vh) scale(1.25); opacity:0; }
}

.swimEntity{
  position:absolute;
  z-index:3;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  opacity: 1;
  transition: transform .8s ease;
}
.swimEntity.go{
  animation: swimGo 6.8s linear forwards;
}
@keyframes swimGo{
  0%{ left:-12%; }
  100%{ left:112%; }
}
.swimEntity.pop{
  animation: popOut .6s ease forwards;
}
@keyframes popOut{
  0%{ transform: scale(1); opacity:1; }
  100%{ transform: scale(1.8); opacity:0; }
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.10);
  color: inherit;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}
.chip.low{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.chip.mid{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.chip.high{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.10); }

#crashLiveBetsList .lbRow{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.14);
  margin-bottom:8px;
}
#crashLiveBetsList .lbRow.active{ }
#crashLiveBetsList .lbRow.cashed_out{ border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.08); }
#crashLiveBetsList .lbRow.lost{ opacity:.65; }
#crashLiveBetsList .lbName{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#crashLiveBetsList .lbBet{ font-weight:900; }
#crashLiveBetsList .lbRight{ font-weight:800; opacity:.85; text-align:right; }


/* Whale Crash UI fixes */
.topHistory{
  display:flex;
  gap:6px;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-bottom:6px;
  padding:0 6px;
}
.topHistory::-webkit-scrollbar{ display:none; }
.topHistory .chip{
  transform: scale(.92);
  padding:6px 10px;
  border-radius:999px;
}
#crashStatus.centerTimer{
  z-index: 20;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:26px;
  font-weight:950;
  color:rgba(255,255,255,.92);
  padding:10px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: max-content;
  max-width: 92%;
}
#crashStatus.hiddenStatus{ display:none; }
.btn.is-disabled{ opacity:.48; cursor:not-allowed; }

.toast.belowTimer{ margin-top: 64px; }


/* Header Stars balance */
.header-balance{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:0;
}
.header-balance .hb-icon{
  margin-right:6px;
  opacity:.95;
}
.header-balance .hb-amount{
  display:flex;
  align-items:center;
  padding:0 10px;
  height:28px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:700;
  line-height:1;
}
.header-balance .hb-btn{
  min-width:34px;
  height:28px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:inherit;
  font-weight:700;
  line-height: 0;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:18px;
  }

.header-balance .hb-btn:active{transform:scale(.98)}
/* Simple modal */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:10000}
.modal#caseResultModal{z-index:10020}
/* Backdrop must always be BEHIND the modal panel (was covering it on some devices)
   Keep it inside the modal stacking context.
*/
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:0}
.modal-panel{position:relative;z-index:1;max-width:520px;margin:10vh auto 0 auto;background:rgba(25,27,35,.98);border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.modal-title{font-weight:800}
.modal-x{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-sizing:border-box}
.modal-body{padding:14px}

.hb-minus{transform: translateY(-1px);}
.hb-minus{font-size:20px; font-weight:800;}

.hb-plus{transform: translateY(-1px);}



/* ensure header balance buttons are clickable */
.header-balance{position:relative; z-index:10;}
.header-balance .hb-btn{position:relative; z-index:11;}



/* === Fixed Bottom Navigation (Tasks / Earn / Crash / Create) === */
:root{
  --bottom-nav-h: 84px;
}

/* Give content room so it doesn't hide behind fixed nav */
.shell{
  padding-bottom: calc(18px + var(--bottom-nav-h));
}

.bottom-nav-wrap{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(7,10,26,.72);
  border-top: 1px solid rgba(148,163,184,.16);
  backdrop-filter: blur(14px);
}

.bottom-nav-wrap .main-nav{
  margin: 0;
  width: 100%;
}

.bottom-nav-wrap .main-nav-btn{
  padding: 10px 8px;
  border-radius: 16px;
  font-weight: 800;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}




/* Bottom nav icons */
.main-nav-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.main-nav-btn .nav-ic{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.main-nav-btn .nav-ic svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* Ensure bottom-nav labels are always visible (Profile label fix) */
.bottom-nav-wrap .main-nav-btn > span:not(.nav-ic){
  display:block;
  font-size:11px;
  line-height:1.05;
  color: rgba(248,250,255,.90);
  opacity:.95;
}



/* --- Background override from template (continuous, pinned to viewport) --- */
html{
  background:
    radial-gradient(1200px 900px at 70% 10%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 700px at 25% 20%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(900px 700px at 40% 85%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%, #040614);
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-size: cover;
}
body{
  background: transparent !important;
}
body::before{
  content:"";
  position:fixed;
  inset:-60px;
  pointer-events:none;
  opacity:.26;
  background:
    linear-gradient(to right, rgba(56,189,248,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,92,246,.12) 1px, transparent 1px);
  background-size: 56px 56px;
  filter: blur(.2px);
  mask-image: radial-gradient(circle at 50% 30%, black 35%, transparent 72%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.32) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.25) 0 1px, transparent 2px);
  background-size: 420px 420px;
  filter: blur(.2px);
}


/* --- FIXES: Offerwalls + Daily Combo --- */
#sectionOfferwalls .card::before{ display:none !important; }
#sectionOfferwalls .card{
  box-shadow: var(--shadow-soft) !important;
  border-color: rgba(148,163,184,.18) !important;
}
#sectionOfferwalls .offer-tabs{ box-shadow:none !important; }
#sectionOfferwalls .offer-tab, #sectionOfferwalls .offer-tab.active{
  box-shadow:none !important;
}

/* Hide unused offerwall tabs (keep CPX + Daily Combo only) */
#offerTabOfferwall, #offerTabBitco, #offerTabBitlabs{ display:none !important; }

/* Daily Combo: center emojis + spacing */
#dcGrid .btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}
#dcInfo{ margin-bottom:14px !important; }
#dcPick{ margin-top:14px !important; }




/* --- Overrides: Offerwalls without purple glow --- */
#sectionOfferwalls .offer-tab.active{
  box-shadow: none !important;
}
#sectionOfferwalls .offer-tab.active{
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(139,92,246,.06)) !important;
}


/* --- v30 fixes: remove purple glow in Offerwalls & add spacing in Create Task --- */
#sectionOfferwalls .card.offerwalls-card{
  border-color: rgba(56,189,248,.16);
  box-shadow: var(--shadow-soft);
}
#sectionOfferwalls .card.offerwalls-card::before{ display:none !important; }

#sectionOfferwalls /* If any generic glow is applied within Offerwalls card, kill it */
#sectionOfferwalls .glow,
#sectionOfferwalls [style*="box-shadow: var(--glow)"]{ box-shadow:none !important; }

#sectionCreateTask #blockCreateTask{ padding: 6px 2px 12px; }
#sectionCreateTask .card{ margin-top: 12px !important; }
#sectionCreateTask .input-group{ margin-top: 10px; margin-bottom: 10px; }

/* Reduce any accidental glow inside Create Task */
#sectionCreateTask .inner-tab-active{ box-shadow:none !important; }


/* TonConnect UI must be above our modal */
.tc-root, .tc-widget-root, .tc-modal, .tc-overlay, .tc-popup, .tc-wallets-modal, .tc-connect-modal,
[class^="tc-"], [class*=" tc-"],
[data-tc-modal], [data-tc-overlay], [data-tc-wallets-modal]{
  z-index: 2147483647 !important;
}
.tc-modal, .tc-overlay, .tc-popup, .tc-wallets-modal, .tc-connect-modal,
[data-tc-modal], [data-tc-overlay], [data-tc-wallets-modal]{
  position: fixed !important;
}

.bot-pill{
  display:inline-block;
  padding:4px 10px;
  margin:0 4px;
  border-radius:999px;
  background:rgba(56,189,248,.18);
  border:1px solid rgba(56,189,248,.45);
  color:#38bdf8;
  font-weight:600;
  text-decoration:none;
  transition:all .15s ease;
}

.bot-pill:hover{
  background:rgba(56,189,248,.28);
  border-color:rgba(56,189,248,.7);
  color:#7dd3fc;
}


/* Floating toast notifications (do not conflict with existing .toast styles) */
.tg-toast{
  position:fixed;
  left:50%;
  bottom:84px;
  transform:translateX(-50%) translateY(14px);
  background:rgba(20,30,50,.92);
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  opacity:0;
  z-index:99999;
  pointer-events:none;
  transition:transform .26s ease, opacity .26s ease;
  max-width:min(92vw, 520px);
  text-align:center;
}
.tg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.tg-toast.success{ border-color: rgba(34,211,238,.65); }
.tg-toast.error{ border-color: rgba(239,68,68,.65); }
.tg-toast.info{ border-color: rgba(99,102,241,.65); }


/* Earn tabs: match Tasks capsules */
.offer-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top:8px;
}
.offer-tab{
  flex:1 1 0;
  min-width:140px;
  border-radius:999px;
  margin:3px 0;
  padding:11px 12px;
  font-weight:900;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.04);
  color:rgba(248,250,255,.78);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.offer-tab.active{
  background:var(--grad);
  border-color:rgba(255,255,255,.10);
  box-shadow:var(--glow);
  color:var(--text);
}

/* Earn tabs inherit task-type styles */
.offer-tabs.task-type-tabs .offer-tab.task-type-btn{
  width:auto;
}

/* Force Adsgram tab visible and active glow like Tasks */
#offerTabAdsgram{display:inline-flex !important;}
.offer-tabs .offer-tab.active{background:var(--grad);box-shadow:var(--glow);color:var(--text);}


/* Force Adsgram tab visible and active glow like Tasks */
#offerTabAdsgram{display:inline-flex !important;}
.offer-tabs .offer-tab.active{
  background:var(--grad);
  box-shadow:var(--glow);
  color:var(--text);
}

/* Force Adsgram tab visible and active glow like Tasks */
#offerTabAdsgram{display:inline-flex !important;}
.offer-tabs .offer-tab.active{
  background:var(--grad) !important;
  box-shadow:var(--glow) !important;
  color:var(--text) !important;
}


.offer-tabs .offer-tab > span{
  display:inline-block !important;
  line-height:1 !important;
}
.offer-tabs .offer-tab.active{
  background:var(--grad) !important;
  box-shadow:var(--glow) !important;
  border-color:rgba(255,255,255,.10) !important;
  color:#fff !important;
}
.offer-tabs .offer-tab.active > span{
  color:#fff !important;
}


#offerwallsSection .offer-tabs.task-type-tabs .offer-tab.active > span{
  color:#fff !important;
}


#offerwallsSection .offer-tabs .offer-tab.active{
  background: var(--grad) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: var(--glow) !important;
  color: var(--text) !important;
}
#offerwallsSection .offer-tabs .offer-tab.active > span{
  color: var(--text) !important;
}


/* Earn tabs: EXACT match to Tasks capsules (Offerwalls section) */
#sectionOfferwalls .offer-tabs .offer-tab{
  flex:1 1 0 !important;
  min-width:140px !important;
  border-radius:999px !important;
  margin:3px 0 !important;
  padding:11px 12px !important;
  font-weight:900 !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:rgba(255,255,255,.04) !important;
  color:rgba(248,250,255,.78) !important;
  cursor:pointer !important;
  transition:.15s transform ease, .15s background ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
}
#sectionOfferwalls .offer-tabs .offer-tab.active{
  background: var(--grad) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: var(--glow) !important;
  color: var(--text) !important;
}
#sectionOfferwalls .offer-tabs .offer-tab.active > span{
  color: var(--text) !important;
}



/* Earn active capsule border: match Tasks (no extra inset ring) */
#sectionOfferwalls .offer-tabs .offer-tab.active{
  box-shadow: var(--glow) !important;
  border-color: rgba(255,255,255,.10) !important;
}





/* FINAL: Earn tabs active style exactly like Tasks (no extra inset ring) */
#sectionOfferwalls .offer-tabs .offer-tab{
  flex:1 1 0 !important;
  min-width:140px !important;
  border-radius:999px !important;
  margin:3px 0 !important;
  padding:11px 12px !important;
  font-weight:900 !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:rgba(255,255,255,.04) !important;
  color:rgba(248,250,255,.78) !important;
  cursor:pointer !important;
  transition:.15s transform ease, .15s background ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  outline:none !important;
}

/* FINAL2: ensure active outline is visible (match Tasks thin light border) */
#sectionOfferwalls .offer-tabs .offer-tab.active{
  border-color: rgba(255,255,255,.14) !important;
  background-clip: padding-box !important; /* keep border crisp */
}
#sectionOfferwalls .offer-tabs .offer-tab.active{
  background: var(--grad) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: var(--glow) !important;
  color: var(--text) !important;
  background-clip: padding-box !important;
}
#sectionOfferwalls .offer-tabs .offer-tab.active > span{ color: var(--text) !important; }

/* Daily Combo bigger */
#dailyComboPanel .emoji-grid button,
#dailyComboPanel .emoji-grid .emoji-cell,
#dailyComboPanel .combo-grid button,
#dailyComboPanel .combo-emoji,
#dailyComboPanel .daily-emoji,
#dailyComboPanel .emoji-btn{
  width: 56px !important;
  height: 56px !important;
  font-size: 30px !important;
  line-height: 1 !important;
}
#dailyComboPanel .emoji-grid,
#dailyComboPanel .combo-grid{
  gap: 10px !important;
}

/* Daily Combo pick slots */
.dc-pick{
  margin-top:14px;
  display:flex;
  gap:14px;
  justify-content:center;
  padding:14px;
  border:1px dashed rgba(148,163,184,.65);
  border-radius:16px;
  background:rgba(15,23,42,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.25) inset;
}
.dc-slot{
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(148,163,184,.18), rgba(148,163,184,.08));
  border:1px solid rgba(148,163,184,.20);
}
.dc-slot:empty::after{
  content:"";
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  box-shadow:0 0 0 10px rgba(148,163,184,.06);
}


/* ===== Space Crash Field (no emojis) ===== */
#sectionCrash .crashWrap .crashArea{
  background:
    radial-gradient(1200px 520px at 30% 10%, rgba(88,140,255,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 35%, rgba(190,90,255,.14), transparent 60%),
    radial-gradient(700px 420px at 20% 90%, rgba(57,214,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(6,8,18,1), rgba(2,3,8,1));
  border: 1px solid rgba(255,255,255,.10);
}
#sectionCrash .crashWrap .crashArea::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 15%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 28%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 42%, rgba(255,255,255,.60) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 60%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.65) 0 1px, transparent 2px);
  opacity:.55;
  pointer-events:none;
}
#sectionCrash .crashWrap .decor,
#sectionCrash .crashWrap .swimEntity,
#sectionCrash .crashWrap .creature,
#sectionCrash .crashWrap .bubbleLayer,
#sectionCrash .crashWrap .bubble{
  display:none !important;
}

#sectionCrash #crashCanvas.crashCanvas{
  position:absolute;
  left:0; right:0;
  top:92px; bottom:0;
  width:100%;
  height:calc(100% - 92px);
  z-index:2;
  display:block;
}
#sectionCrash #crashRocket.crashRocket{
  position:absolute;
  z-index:4;
  width:72px;
  height:72px;
  left: 10px;
  top: calc(100% - 10px);
  background: url('../../rocket.svg') center/contain no-repeat;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(120,170,255,.35));
  will-change: transform, left, top;
  pointer-events:none;
}
@media (max-width:420px){
  #sectionCrash #crashRocket.crashRocket{ width:62px; height:62px; }
}


/* Crash section: remove top padding */
#sectionCrash.main-section{margin-top:0 !important;}


/* === Space Crash tweaks v2 === */
#sectionCrash.main-section{ margin-top: 0 !important; }
#sectionCrash{margin-top:0;}
#sectionCrash .crashWrap{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Make crash field flush without extra top inset */
#sectionCrash #crashCanvas.crashCanvas{
  top: 0 !important;
  height: 100% !important;
}
#sectionCrash .hud{ position: absolute; left:0; right:0; top:0; z-index:6; padding-top: 14px; }
#sectionCrash .topHistory{ margin-top: 6px; }

/* Explosion */
#sectionCrash #crashExplosion.crashExplosion{
  position:absolute;
  z-index:5;
  width:140px;
  height:140px;
  left:0; top:0;
  transform: translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 8%, rgba(255,190,70,.75) 18%, rgba(255,70,180,.55) 35%, rgba(120,180,255,.25) 55%, transparent 70%);
  filter: blur(0.2px) drop-shadow(0 0 18px rgba(255,160,90,.55));
}
#sectionCrash #crashExplosion.crashExplosion.boom{
  animation: crashBoom 650ms ease-out forwards;
}
@keyframes crashBoom{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(.95); }
  60%{ opacity:.9; transform:translate(-50%,-50%) scale(1.35); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.65); }
}



/* === Space Crash layout: full-bleed crash field (no outer paddings) === */
#sectionCrash.main-section{ margin-top:0 !important; }
#sectionCrash .crashWrap{
  width: calc(100% + 28px) !important;
  margin-left: -14px !important;
  margin-right: -14px !important;
  margin-top: -14px !important;
  border-radius: 0 !important;
}
#sectionCrash .crashWrap .crashArea{
  border-radius: 0 !important;
}
/* Rocket image uses its natural orientation; we rotate only by trajectory angle */
#sectionCrash #crashRocket.crashRocket{ transform: translate(-50%,-50%) rotate(0deg); }



/* ===== Cases ===== */
#sectionCases .cases-live { margin-top: 10px; }
.cases-live-title{ font-weight:700; font-size:13px; margin: 6px 0; color: rgba(226,232,240,.9);}
.cases-live-feed{ display:flex; flex-direction:row; align-items:center; gap:10px; overflow-x:auto; overflow-y:hidden; padding:10px; border:1px solid rgba(148,163,184,.25); border-radius:14px; background: rgba(2,6,23,.35); }
.cases-live-feed::-webkit-scrollbar{ height:6px; }
.cases-live-feed::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.25); border-radius:999px; }
.cases-live-gift{ width:42px; height:42px; border-radius:12px; object-fit:cover; background: rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.18); flex:0 0 auto; }
.live-item{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; }
.live-gift{ flex:0 0 auto; }
.live-gift-img{ width:38px; height:38px; object-fit:cover; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); }
.live-who{ color: rgba(226,232,240,.85); }
.live-prize{ color: rgba(250,204,21,.95); }

.cases-list{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.case-card{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:16px; border:1px solid rgba(148,163,184,.25); background: rgba(2,6,23,.35); }
.case-img{ width:56px; height:56px; border-radius:14px; overflow:hidden; flex:0 0 auto; background: rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center;}
.case-img img{ width:100%; height:100%; object-fit:cover; }
.case-info{ flex:1; min-width:0; }
.case-title{ font-weight:800; font-size:14px; color: rgba(248,250,255,.92); }
.case-price{ margin-top:2px; font-size:12px; color: rgba(226,232,240,.8); display:flex; gap:6px; align-items:center;}
.case-open{ flex:0 0 auto; padding:8px 12px; border-radius:12px; }

.case-roller-wrap{ width:100%; overflow:hidden; border-radius:16px; border:1px solid rgba(148,163,184,.25); background: rgba(2,6,23,.35); padding:10px; }
.case-roller{ display:flex; gap:10px; will-change: transform; }
.case-open-actions{display:flex;justify-content:center;gap:14px;align-items:center;margin-top:14px;width:100%;}
.case-open-actions .btn{min-width:140px;max-width:180px;}
.case-open-actions .btn{ flex:1; }
.case-spin-footer{ margin-top:12px; }
.case-spin-btn{ width:100%; padding:14px 16px; border-radius:16px; font-weight:800; font-size:18px; }
.case-prizes-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.case-prize-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-radius:14px; border:1px solid rgba(148,163,184,.25); background: rgba(2,6,23,.35); }
.case-prize-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.case-prize-img{ width:44px; height:44px; border-radius:12px; overflow:hidden; flex:0 0 auto; background: rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; }
.case-prize-img img{ width:100%; height:100%; object-fit:cover; }
.case-prize-title{ font-weight:700; color: rgba(248,250,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.case-prize-price{ color: rgba(250,204,21,.95); font-weight:700; white-space:nowrap; }
.case-win-badge{ font-size:12px; color: rgba(226,232,240,.85); }
.roll-item{ width:130px; flex:0 0 auto; border-radius:14px; border:1px solid rgba(148,163,184,.2); background: rgba(15,23,42,.55); padding:10px; text-align:center; }
.roll-item img{ width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 8px; }
.roll-star{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:34px; color: rgba(250,204,21,.95); text-shadow: 0 10px 18px rgba(0,0,0,.35); }

.roll-title{ font-size:12px; color: rgba(226,232,240,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.case-win{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; }
.case-win-img{ width:96px; height:96px; object-fit:contain; }
.case-win-title{ font-weight:800; color: rgba(248,250,255,.92); }
.case-win-price{ color: rgba(250,204,21,.95); font-weight:700; }
.case-win-actions{ display:flex; gap:10px; margin-top:6px; }
.win-actions-center{ display:flex; justify-content:center; gap:10px; margin-top:6px; }
.win-actions-center .btn{ min-width:140px; }
.case-win-actions .btn{ flex:1; }

.mygifts-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 380px){
  .mygifts-list{ grid-template-columns:1fr; }
}

.mygift-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mygift-img{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  display:block;
}
.mygift-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.mygift-info{ display:flex; flex-direction:column; gap:2px; }
.mygift-title{ font-weight:700; font-size:14px; line-height:1.2; }
.mygift-price{ opacity:.9; font-size:13px; }

.mygift-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.mygift-actions button{ flex:1; }


/* ===== Cases: Open modal layout (center carousel) ===== */
#caseOpenModal .modal-panel{max-width:560px;width:92vw;}
#caseOpenModal .modal-body{padding:0;display:flex;flex-direction:column;height:72vh;min-height:520px;}
#caseOpenModal .case-roller-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:14px;}
#caseOpenModal .case-open-row{width:100%;padding:12px 14px 16px;display:flex;justify-content:center;gap:12px;}
#caseOpenModal .case-roller{margin:0 auto;}


/* ===== CASES: Live strip smaller icons ===== */
.cases-live { overflow: hidden; }
.cases-live-feed { display:flex; align-items:center; gap:10px; overflow:hidden; }
.cases-live-feed img { width:28px; height:28px; object-fit:contain; border-radius:6px; }
.cases-live-feed .live-item { display:flex; align-items:center; }
.cases-live-title { font-size:18px; letter-spacing:1px; }

/* ===== CASES: Roller pointers & viewport ===== */
.case-roller-wrap { position:relative; width:100%; }
.case-roller-viewport { overflow:hidden; width:100%; border-radius:18px; }
.case-pointer { position:absolute; left:50%; transform:translateX(-50%); font-size:26px; opacity:.9; z-index:5; pointer-events:none; }
.case-pointer-top { top:-6px; }
.case-pointer-bottom { bottom:-10px; }
.case-roller { display:flex; gap:16px; align-items:center; will-change: transform; }
.roll-item { flex:0 0 auto; width:140px; max-width:44vw; }
.roll-item img { width:84px; height:84px; object-fit:contain; display:block; margin:0 auto; }
.roll-title { margin-top:8px; font-size:14px; opacity:.9; text-align:center; }

.cases-live .live-gift img{width:32px;height:32px;object-fit:contain;border-radius:8px;}


/* ===== CASES: PRIZES GRID ===== */
.case-prizes-wrap{padding:10px 8px 4px 8px;}
.case-prizes-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px 14px;
}
.cg-card{position:relative; text-align:center;}
.cg-img{
  width:100%;
  height:92px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.cg-img img{
  max-width:100%;
  max-height:92px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.cg-pill{
  margin:8px auto 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
}
.cg-pill .cg-star{opacity:.95;}
.cg-pill .cg-val{font-variant-numeric: tabular-nums;}

.case-prizes-stars{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px 16px;
}
.cs-card{
  border-radius:18px;
  padding:18px 12px;
  background:linear-gradient(180deg, rgba(120,55,255,.45), rgba(70,45,200,.45));
  box-shadow: inset 0 0 0 2px rgba(160,120,255,.25);
  text-align:center;
}
.cs-card .cs-icon{font-size:28px; line-height:1; margin-bottom:10px;}
.cs-card .cs-amt{font-size:22px; font-weight:800; color:#fff;}

@media (max-width:420px){
  .case-prizes-grid, .case-prizes-stars{gap:12px 12px;}
  .cg-img{height:84px;}
  .cg-img img{max-height:84px;}
}




/* === My Gifts: button fit === */
.mygift-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.mygift-actions .btn{
  flex:1;
  min-width:0;
  font-size:12px;
  padding:10px 12px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* === Cases list: 2-per-row grid === */
#casesList.cases-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
#casesList.cases-grid .case-card{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
#casesList.cases-grid .case-img{
  width:100%;
  height:120px;
}
#casesList.cases-grid .case-img img{ object-fit:contain; }
#casesList.cases-grid .case-open{ width:100%; justify-content:center; }

@media (max-width: 360px){
  #casesList.cases-grid{ grid-template-columns:1fr; }
}



/* FIX buttons alignment */
.mygift-actions .btn{
  flex:1;
  min-width:0;
  font-size:12px;
  padding:10px 12px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



/* Free case countdown button */
.case-open.disabled{opacity:.7; pointer-events:none;}


/* close button (used in some modals) */
.modal-close{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-sizing:border-box}


/* =================== Slots =================== */
.slots-machine{
  position: relative;
  margin-top: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 12px;
  overflow: hidden;
}
.slots-reels{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.slot-reel{
  background: rgba(2,6,23,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 10px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  min-height: 240px;
}
.slot-cell{
  background: rgba(255,255,255,0.035);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.slot-cell img{
  width: 80%;
  height: auto;
  max-height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}
.slot-cell.mid{
  outline: 2px solid rgba(56,189,248,0.28);
  box-shadow: 0 0 0 6px rgba(139,92,246,0.10) inset;
}
.slots-midline{
  position:absolute;
  left: 12px; right: 12px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,0.55), rgba(56,189,248,0));
  transform: translateY(-1px);
  pointer-events:none;
}
.slot-reel.spinning{
  animation: slotPulse .42s ease-in-out;
}
@keyframes slotPulse{
  0%{ transform: translateY(0); filter: brightness(1); }
  50%{ transform: translateY(-4px); filter: brightness(1.15); }
  100%{ transform: translateY(0); filter: brightness(1); }
}
.slots-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.slots-actions .btn{ flex:1; }

.prizes-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.prize-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px;
  text-align:center;
}
.prize-card img{
  width: 70%;
  height: auto;
  max-height: 70px;
  object-fit: contain;
}
.prize-title{
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.95;
}
.prize-price{
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}


/* Slots bet selector */
.slots-bet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.slots-bet select{flex:1;max-width:240px}


/* ==== FIX: make Stars roller card same size as gift cards (Cases carousel + animation) ==== */
.case-roller .roll-item img,
#caseOpenModal .roll-item img{
  width:84px !important;
  height:84px !important;
}
.case-roller .roll-star,
#caseOpenModal .roll-star{
  width:84px !important;
  height:84px !important;
  font-size:46px !important;
}

/* ==== FIX: center slot win actions ==== */
.win-actions-center{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}

/* ==== FIX: star icon in prizes grid ==== */
.prize-star{
  width:70%;
  max-width:84px;
  height:70px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  color: rgba(250,204,21,.95);
  text-shadow: 0 10px 18px rgba(0,0,0,.35);
}


/* Empty state (centered) */
.empty-center{
  text-align:center;
  padding-top:18px;
  padding-bottom:12px;
  font-size:14px;
}


/* Gift modals styling */
.gift-modal-card{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.gift-modal-title{
  font-weight: 700;
  font-size: 16px;
}
.gift-modal-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}


/* My Gifts action buttons: fit inside card */
.mygift-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.mygift-actions .btn{
  flex:1;
  min-width:0;
  font-size:12px;
  padding:10px 12px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



/* My Gifts buttons: centered label, equal height, no overflow */
.mygift-actions{display:flex; gap:10px;}
.mygift-actions .btn{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12.5px;
  line-height:1;
  padding:10px 12px;
}


/* Referrals stats cards */
.ref-stats{
  display:flex;
  gap:10px;
  margin: 10px 0 12px;
}
.ref-stat-card{
  flex:1;
  min-width:0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 10px 12px;
}
.ref-stat-label{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}
.ref-stat-value{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
}

/* Referrals: buttons under link input */
.ref-btn-row{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.ref-btn-row .btn{
  flex:1;
}


/* Task image thumbnail */
.taskThumb{width:60px;height:60px;border-radius:12px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(148,163,184,0.35);box-shadow:0 10px 18px rgba(0,0,0,0.35);}

/* ===== PvP Stars ===== */
.pvp-wrap{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.pvp-arena-card{position:relative;border:1px solid rgba(148,163,184,.18);border-radius:24px;overflow:hidden;background:#0b0f18;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.pvp-canvas{display:block;width:100%;height:min(92vw,460px);min-height:330px;background:#10131b}
.pvp-arena-hud{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.pvp-hud-box{box-sizing:border-box;background:rgba(10,12,18,.84);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);border-radius:18px;padding:10px 13px;min-width:0;min-height:76px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 8px 28px rgba(0,0,0,.25)}.pvp-hud-bank{text-align:right}.pvp-hud-spacer{visibility:hidden}
.pvp-hud-label{font-size:12px;color:rgba(248,250,255,.58);margin-bottom:3px}.pvp-hud-value{font-weight:900;font-size:18px}.pvp-hud-sub{font-size:13px;color:#f59e0b;font-weight:800;margin-top:3px}
.pvp-bet-card,.pvp-list-card{border:1px solid rgba(148,163,184,.16);background:rgba(12,16,28,.78);border-radius:22px;padding:15px}
.pvp-bet-title{text-align:center;color:rgba(248,250,255,.62);font-size:13px}.pvp-bet-line{display:flex;justify-content:center;align-items:center;gap:6px;margin:6px 0 3px}.pvp-bet-line input{width:120px;text-align:center;font-size:28px;font-weight:900;background:transparent;border:0;color:#fff;outline:none}.pvp-min{text-align:center;font-size:12px;color:rgba(248,250,255,.48);margin-bottom:10px}
.pvp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.pvp-quick button{border:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.04);color:rgba(248,250,255,.72);padding:10px;border-radius:14px;font-weight:800}
#pvpBetBtn{width:100%;justify-content:center;min-height:46px}.pvp-msg{text-align:center;min-height:18px;margin-top:8px;font-size:12px;color:rgba(248,250,255,.65)}
.pvp-list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.pvp-list-head strong{font-size:17px}.pvp-player-row{--pc:#3b82f6;display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:14px;margin-top:7px;background:rgba(255,255,255,.035);background:color-mix(in srgb,var(--pc) 13%,rgba(255,255,255,.025));border:1px solid rgba(148,163,184,.14);border-color:color-mix(in srgb,var(--pc) 25%,transparent)}
.pvp-rank{font-weight:900;color:var(--pc);min-width:26px}.pvp-color-dot{width:11px;height:11px;border-radius:50%;background:var(--pc);box-shadow:0 0 12px var(--pc);flex:0 0 auto}.pvp-player-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.pvp-player-stats{font-weight:900;color:var(--pc);white-space:nowrap;font-size:13px}.pvp-you{font-size:10px;padding:2px 5px;border-radius:7px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.72)}.pvp-empty{text-align:center;color:rgba(248,250,255,.45);padding:14px}
.bottom-nav-wrap .main-nav{gap:4px}.bottom-nav-wrap .main-nav-btn{padding:9px 4px}.bottom-nav-wrap .main-nav-btn > span:not(.nav-ic){font-size:10px}
@media (max-width:370px){.bottom-nav-wrap{padding-left:6px;padding-right:6px}.bottom-nav-wrap .main-nav-btn > span:not(.nav-ic){font-size:9px}.pvp-canvas{min-height:300px}.pvp-player-stats{font-size:12px}}

/* ===== PvP v1.2 ===== */
#sectionPvp.main-section{margin-top:0!important;margin-left:-14px;margin-right:-14px}
#sectionPvp .pvp-wrap{margin-top:0;gap:12px}
#sectionPvp .pvp-arena-card{border-radius:20px;border-left:0;border-right:0}
#sectionPvp .pvp-canvas{width:100%;height:min(100vw,480px);min-height:350px}
@media (max-width:370px){#sectionPvp .pvp-canvas{min-height:320px}}
.pvp-list-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:0 0 28px;border:1.5px solid rgba(255,255,255,.8);background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.pvp-list-avatar img,.pvp-list-avatar>span{width:100%;height:100%;object-fit:cover;align-items:center;justify-content:center}

/* ===== PvP v1.3 compact arena ===== */
#sectionPvp.main-section{padding-top:0!important;margin-top:-10px!important}
#sectionPvp .pvp-wrap{margin-top:0!important;gap:8px}
#sectionPvp .pvp-arena-card{margin-top:0!important;border-radius:18px}
#sectionPvp .pvp-canvas{height:68vw!important;min-height:235px!important;max-height:330px!important}
#sectionPvp .pvp-arena-hud{gap:8px}
#sectionPvp .pvp-hud-box{min-height:58px!important;padding:6px 11px!important;border-radius:15px}
#sectionPvp .pvp-hud-label{font-size:11px;margin-bottom:1px}
#sectionPvp .pvp-hud-value{font-size:16px;line-height:1.08}
#sectionPvp .pvp-hud-sub{font-size:11px;margin-top:1px}
#sectionPvp .pvp-list-avatar{border-width:1px}
@media(max-width:370px){#sectionPvp .pvp-canvas{height:70vw!important;min-height:220px!important}}


/* ===== PvP v1.4 result toast ===== */
.pvp-result-toast{position:fixed;z-index:250000;left:50%;top:22%;transform:translate(-50%,-12px) scale(.96);opacity:0;pointer-events:none;min-width:220px;max-width:86vw;padding:14px 18px;border-radius:16px;text-align:center;color:#fff;box-shadow:0 16px 42px rgba(0,0,0,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .24s ease,transform .24s ease;border:1px solid rgba(255,255,255,.16)}
.pvp-result-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.pvp-result-toast strong{display:block;font-size:18px;line-height:1.15}.pvp-result-toast span{display:block;margin-top:5px;font-size:22px;font-weight:900}
.pvp-result-toast.win{background:rgba(16,185,129,.94);border-color:rgba(110,231,183,.85)}
.pvp-result-toast.lose{background:rgba(220,38,38,.94);border-color:rgba(252,165,165,.82)}

/* ===== PvP v1.6 / Telegram fullscreen safe top ===== */
:root{--tg-content-safe-top:0px}
body .app{padding-top:var(--tg-content-safe-top)}
body .shell{transition:padding-top .18s ease}
@supports (padding-top: max(0px)){
  body .app{padding-top:max(env(safe-area-inset-top), var(--tg-content-safe-top))}
}


/* ===== PvP v1.7 compact top alignment ===== */
.main-card.pvp-main-card{padding-top:0!important;}
.main-card.pvp-main-card #sectionPvp.main-section{margin-top:0!important;padding-top:0!important;}
.main-card.pvp-main-card #sectionPvp .pvp-wrap{margin-top:0!important;padding-top:0!important;}
.main-card.pvp-main-card #sectionPvp .pvp-arena-card{margin-top:0!important;}
\n\n/* ===== PvP v1.8 wider active card + inner side spacing ===== */
.main-card.pvp-main-card.pvp-active{
  margin-left:-8px!important;
  margin-right:-8px!important;
}
.main-card.pvp-main-card.pvp-active #sectionPvp.main-section{
  margin-left:-14px!important;
  margin-right:-14px!important;
}
.main-card.pvp-main-card.pvp-active #sectionPvp .pvp-arena-hud,
.main-card.pvp-main-card.pvp-active #sectionPvp .pvp-bet-card,
.main-card.pvp-main-card.pvp-active #sectionPvp .pvp-list-card{
  margin-left:5px!important;
  margin-right:5px!important;
}
.main-card.pvp-main-card.pvp-active #sectionPvp .pvp-arena-card{
  margin-left:0!important;
  margin-right:0!important;
}


/* ===== PvP v1.9 history + tighter inner spacing ===== */
.pvp-history-btn{width:42px;height:42px;border-radius:14px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.055);color:#f8fafc;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.pvp-history-btn svg{width:22px;height:22px}.pvp-history-btn:active{transform:scale(.96)}
#pvpHistoryModal .modal-panel{width:min(94vw,520px);margin-top:max(9vh,calc(var(--tg-content-safe-top) + 28px));max-height:78vh;display:flex;flex-direction:column}
#pvpHistoryModal .modal-body{overflow:auto;padding:12px}
.pvp-history-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px;padding:3px;background:rgba(255,255,255,.04);border-radius:13px}
.pvp-history-tab{border:0;background:transparent;color:rgba(248,250,255,.55);padding:9px 8px;border-radius:10px;font-weight:800}.pvp-history-tab.active{background:rgba(56,189,248,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(56,189,248,.26)}
.pvp-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:11px 12px;margin-top:7px;border:1px solid rgba(148,163,184,.13);background:rgba(255,255,255,.035);border-radius:14px}
.pvp-history-main{min-width:0}.pvp-history-title{font-weight:850;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pvp-history-sub{font-size:11px;color:rgba(248,250,255,.48);margin-top:3px}.pvp-history-money{text-align:right;font-weight:900;font-size:13px;white-space:nowrap}.pvp-history-money.win{color:#34d399}.pvp-history-money.lose{color:#fb7185}.pvp-history-empty{text-align:center;color:rgba(248,250,255,.48);padding:28px 8px}


/* ===== PvP v2.0 square arena ===== */
#sectionPvp .pvp-canvas{
  width:100%!important;
  aspect-ratio:1 / 1!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

/* ===== PvP v2.1 startup splash + history winner avatars ===== */
.app-splash{position:fixed;inset:0;z-index:1000000;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 36%,rgba(34,211,238,.10),transparent 28%),radial-gradient(circle at 50% 62%,rgba(139,92,246,.12),transparent 34%),#070b13;opacity:1;transition:opacity .38s ease;pointer-events:auto}
.app-splash.hide{opacity:0;pointer-events:none}
.app-splash-inner{display:flex;flex-direction:column;align-items:center;transform:translateY(-3vh)}
.app-splash-mark{position:relative;width:76px;height:76px;border:2px solid rgba(255,255,255,.96);border-radius:50%;box-shadow:0 0 30px rgba(56,189,248,.18),inset 0 0 24px rgba(255,255,255,.035)}
.app-splash-mark:before,.app-splash-mark:after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;transform:translate(-50%,-50%)}
.app-splash-mark:before{width:30px;height:2px}.app-splash-mark:after{width:2px;height:30px}
.app-splash-mark span{position:absolute;inset:10px;border:1px solid rgba(56,189,248,.42);border-radius:50%;animation:splashPulse 1.2s ease-in-out infinite}
.app-splash-mark i{position:absolute;width:8px;height:8px;border-radius:50%;background:#38bdf8;right:5px;top:32px;box-shadow:0 0 16px #38bdf8;animation:splashOrbit 1.25s linear infinite;transform-origin:-33px 6px}
.app-splash-title{margin-top:22px;font-size:25px;line-height:1;font-weight:950;letter-spacing:.13em;color:#fff;text-shadow:0 3px 24px rgba(255,255,255,.12)}
.app-splash-sub{margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.22em;color:rgba(226,232,240,.46);text-transform:uppercase}
.app-splash-loader{width:108px;height:3px;margin-top:26px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.app-splash-loader b{display:block;width:44%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#8b5cf6);animation:splashLoad 1.05s ease-in-out infinite}
@keyframes splashPulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}
@keyframes splashOrbit{to{transform:rotate(360deg)}}
@keyframes splashLoad{0%{transform:translateX(-120%)}50%{transform:translateX(90%)}100%{transform:translateX(250%)}}
.pvp-history-row{grid-template-columns:38px minmax(0,1fr) auto;align-items:center}
.pvp-history-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#fff;flex:0 0 34px}
.pvp-history-avatar img{width:100%;height:100%;object-fit:cover;display:block}


/* PvP rating */
.rating-wrap{padding:5px}.rating-head-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid rgba(148,163,184,.22);border-radius:16px;background:rgba(8,13,25,.88);margin-bottom:8px}.rating-title{font-size:22px;font-weight:900;color:#f8fafc}.rating-sub{font-size:12px;color:#94a3b8;margin-top:2px}.rating-countdown{text-align:right}.rating-countdown span{display:block;font-size:11px;color:#94a3b8}.rating-countdown strong{font-size:18px;color:#fbbf24}.rating-prizes{display:flex;gap:6px;overflow-x:auto;padding:3px 0 9px}.rating-prize-chip{min-width:130px;display:flex;align-items:center;gap:7px;background:rgba(15,23,42,.82);border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:7px 9px;font-size:11px;color:#cbd5e1}.rating-prize-chip b{color:#fbbf24}.rating-list-head{display:flex;justify-content:space-between;color:#94a3b8;font-size:11px;padding:5px 8px}.rating-list{display:flex;flex-direction:column;gap:6px}.rating-row{display:grid;grid-template-columns:36px 42px minmax(0,1fr) 44px auto;align-items:center;gap:7px;min-height:58px;padding:7px 10px;border-radius:15px;background:rgba(12,18,29,.92);border:1px solid rgba(148,163,184,.12)}.rating-row.place-1{background:linear-gradient(90deg,rgba(245,158,11,.25),rgba(12,18,29,.94));border-color:rgba(251,191,36,.55);box-shadow:0 0 18px rgba(245,158,11,.12)}.rating-row.place-2{background:linear-gradient(90deg,rgba(148,163,184,.23),rgba(12,18,29,.94));border-color:rgba(203,213,225,.42)}.rating-row.place-3{background:linear-gradient(90deg,rgba(194,65,12,.23),rgba(12,18,29,.94));border-color:rgba(249,115,22,.42)}.rating-row.me{outline:1px solid rgba(56,189,248,.55)}.rating-place{font-weight:900;font-size:18px;color:#94a3b8}.place-1 .rating-place{color:#fbbf24}.place-2 .rating-place{color:#e2e8f0}.place-3 .rating-place{color:#fb923c}.rating-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;background:#1e293b}.rating-avatar img{width:100%;height:100%;object-fit:cover}.rating-avatar i{width:100%;height:100%;align-items:center;justify-content:center;font-style:normal;font-weight:800}.rating-user{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#f8fafc}.rating-row-gift{text-align:center}.rating-gift{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);overflow:hidden;font-size:22px}.rating-gift img{width:100%;height:100%;object-fit:cover}.rating-stars{font-weight:900;color:#f8fafc;white-space:nowrap}.rating-empty{text-align:center;color:#94a3b8;padding:24px 8px}.main-card.pvp-main-card:not(.pvp-active) .rating-wrap{padding:5px}

/* v18: withdraw form fields are plain; inputs/selects keep their own borders. */
#withdrawModal .input-group{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 14px;}
#withdrawModal .input-group label{display:block;margin:0 0 7px;}


/* v35: recent PvP referral earnings */
.ref-recent-block{margin-top:18px}
.ref-recent-title{font-size:14px;font-weight:800;margin-bottom:9px;color:#e5e7eb}
.ref-recent-list{display:flex;flex-direction:column;gap:7px}
.ref-recent-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 10px;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:rgba(15,23,42,.42)}
.ref-recent-avatar{width:34px;height:34px;min-width:34px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(148,163,184,.16);font-weight:800;font-style:normal}
.ref-recent-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ref-recent-avatar i{width:100%;height:100%;align-items:center;justify-content:center;font-style:normal}
.ref-recent-name{flex:1;min-width:0;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-recent-amount{font-size:13px;font-weight:850;white-space:nowrap}
.ref-recent-empty{padding:12px 4px;color:#94a3b8;font-size:13px}
/* PvP gift giveaways */
.pg-wrap{display:flex;flex-direction:column;gap:12px}.pg-head,.pg-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.pg-tabs{display:flex;gap:8px}.pg-tab{border:1px solid rgba(148,163,184,.25);background:#111827;color:#cbd5e1;border-radius:10px;padding:8px 13px}.pg-tab.active{background:#1f2937;color:#fff;border-color:rgba(255,255,255,.35)}.pg-item{background:#10131b;border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:12px;margin-bottom:9px}.pg-item-top{display:flex;justify-content:space-between;gap:10px}.pg-gifts{display:flex;gap:8px;overflow-x:auto;padding:4px 0}.pg-gift{min-width:82px;max-width:105px;border:1px solid rgba(148,163,184,.22);background:#10131b;border-radius:12px;padding:7px;text-align:center;transition:.2s}.pg-gift.active{border-color:#facc15;box-shadow:0 0 18px rgba(250,204,21,.28);transform:translateY(-2px)}.pg-gift img{width:54px;height:54px;object-fit:contain;display:block;margin:auto}.pg-gift span{font-size:11px;display:block;margin-top:4px}.pg-gift-choices{max-height:210px;overflow:auto;margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.pg-gift-choice{display:flex;gap:7px;align-items:center;background:#111827;border-radius:9px;padding:7px;font-size:12px}.pg-gift-choice img{width:36px;height:36px;object-fit:contain}.pg-item-gifts{font-size:12px;color:#cbd5e1;margin-top:7px}.pg-winner-toast{position:fixed;z-index:9999;left:50%;top:22%;transform:translate(-50%,-10px);background:rgba(12,16,24,.96);border:1px solid rgba(250,204,21,.55);border-radius:15px;padding:14px 18px;text-align:center;opacity:0;transition:.25s;pointer-events:none}.pg-winner-toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== PvP giveaways v1.1 visibility fix ===== */
#sectionPvpGiveaways.main-section{position:relative;z-index:2;margin-top:0!important;padding:8px 5px 14px!important;min-height:220px;color:#f8fafc}
#sectionPvpGiveaways.main-section:not(.hidden){display:block!important}
#sectionPvpGiveaways .pg-wrap{position:relative;z-index:3;width:100%;display:flex!important;flex-direction:column;gap:12px;visibility:visible!important;opacity:1!important}
#sectionPvpGiveaways .pg-head,#sectionPvpGiveaways .pg-tabs,#sectionPvpGiveaways #pgList{position:relative;z-index:4;visibility:visible!important;opacity:1!important}
#sectionPvpGiveaways .pg-head{min-height:48px}
#sectionPvpGiveaways .pg-head strong{font-size:20px;color:#f8fafc}


/* ===== PvP giveaways v1.2 create modal mobile fix ===== */
#pgCreateModal{
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  overflow:hidden!important;
}
#pgCreateModal .modal-backdrop{
  position:absolute!important;
  inset:0!important;
}
#pgCreateModal .modal-panel{
  position:absolute!important;
  z-index:1!important;
  left:12px!important;
  right:12px!important;
  top:max(72px,calc(env(safe-area-inset-top,0px) + 58px))!important;
  bottom:max(14px,env(safe-area-inset-bottom,0px))!important;
  width:auto!important;
  max-width:520px!important;
  max-height:none!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#pgCreateModal .modal-head{
  flex:0 0 auto!important;
}
#pgCreateModal .modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:18px!important;
}
#pgCreateModal .modal-actions{
  flex:0 0 auto!important;
  position:relative!important;
  background:rgba(25,27,35,.99);
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
}

/* ===== PvP giveaways v1.3 create form spacing ===== */
#pgCreateModal .modal-body > label{display:block;margin:0 0 16px!important;}
#pgCreateModal .modal-body > label .input{display:block;width:100%;margin-top:7px!important;}
#pgCreateModal .modal-actions{padding-top:10px!important;padding-bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 18px))!important;}

/* ===== PvP giveaways v1.3 game UI ===== */
#sectionPvpGiveaways #pgGame{display:flex;flex-direction:column;gap:12px;margin-top:-8px}
#sectionPvpGiveaways #pgGame.hidden{display:none!important}
#sectionPvpGiveaways #pgGame .pvp-arena-card{margin-top:0}
#sectionPvpGiveaways #pgGame .pvp-canvas{display:block;width:100%;aspect-ratio:1/1}
#sectionPvpGiveaways #pgGame .pvp-bet-card{display:flex;flex-direction:column;align-items:stretch}
#sectionPvpGiveaways #pgGame #pgBetBtn{align-self:stretch;width:100%;margin-top:8px}
#sectionPvpGiveaways .pg-gifts-card{border:1px solid rgba(148,163,184,.16);background:rgba(12,16,28,.78);border-radius:22px;padding:15px}
#sectionPvpGiveaways .pg-gifts-card .pg-gifts{padding:10px 1px 2px;gap:10px}
#sectionPvpGiveaways .pg-gifts-card .pg-gift{min-width:96px;max-width:118px;background:rgba(24,31,46,.92);border-radius:15px;padding:9px}
#sectionPvpGiveaways .pg-gifts-card .pg-gift img{width:62px;height:62px}
#sectionPvpGiveaways .pg-gifts-card .pg-gift.active{border-color:#facc15;box-shadow:0 0 20px rgba(250,204,21,.30)}


/* ===== PvP giveaways v1.6: full-width arena + compact PvP spacing ===== */
#sectionPvpGiveaways.main-section{
  margin-left:-14px!important;
  margin-right:-14px!important;
  padding-left:0!important;
  padding-right:0!important;
}
#sectionPvpGiveaways .pg-wrap{
  gap:8px!important;
}
#sectionPvpGiveaways #pgGame{
  gap:8px!important;
  margin-top:0!important;
}
#sectionPvpGiveaways #pgGame .pvp-arena-card{
  width:100%!important;
  margin:0!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:18px!important;
}
#sectionPvpGiveaways #pgGame .pvp-canvas{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  min-height:0!important;
  max-height:none!important;
}
#sectionPvpGiveaways #pgGame .pvp-arena-hud,
#sectionPvpGiveaways #pgGame .pvp-bet-card,
#sectionPvpGiveaways #pgGame .pg-gifts-card,
#sectionPvpGiveaways #pgGame .pvp-list-card{
  margin-left:5px!important;
  margin-right:5px!important;
}
#sectionPvpGiveaways #pgGame .pvp-arena-hud{gap:8px!important}
#sectionPvpGiveaways #pgGame .pvp-hud-box{
  min-height:58px!important;
  padding:6px 11px!important;
  border-radius:15px!important;
}
#sectionPvpGiveaways #pgGame .pvp-hud-label{font-size:11px!important;margin-bottom:1px!important}
#sectionPvpGiveaways #pgGame .pvp-hud-value{font-size:16px!important;line-height:1.08!important}
#sectionPvpGiveaways #pgGame .pvp-hud-sub{font-size:11px!important;margin-top:1px!important}
#sectionPvpGiveaways .pg-gifts-card,
#sectionPvpGiveaways #pgGame .pvp-list-card,
#sectionPvpGiveaways #pgGame .pvp-bet-card{
  padding:11px!important;
  border-radius:18px!important;
}


/* ===== PvP giveaways v1.7 ===== */
/* No empty strip above arena while a giveaway is open. */
#sectionPvpGiveaways.main-section{padding-top:0!important;margin-top:-10px!important}
#sectionPvpGiveaways #pgGame{margin-top:0!important;padding-top:0!important}
#sectionPvpGiveaways #pgGame .pvp-arena-card{margin-top:0!important}

/* List/header keeps comfortable side padding; game arena remains edge-to-edge. */
#sectionPvpGiveaways .pg-head,
#sectionPvpGiveaways .pg-tabs,
#sectionPvpGiveaways #pgList{
  margin-left:14px!important;
  margin-right:14px!important;
}
#sectionPvpGiveaways .pg-head{padding-top:8px}
#sectionPvpGiveaways .pg-tabs{flex-wrap:wrap}
#sectionPvpGiveaways .pg-tab{padding:10px 16px;border-radius:14px}

/* Giveaway cards */
#sectionPvpGiveaways .pg-item-modern{
  padding:14px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(24,34,52,.96),rgba(12,17,29,.96))!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  overflow:hidden;
}
#sectionPvpGiveaways .pg-item-modern .pg-item-top{align-items:flex-start}
#sectionPvpGiveaways .pg-item-modern .pg-item-top strong{display:block;font-size:16px;color:#fff}
#sectionPvpGiveaways .pg-item-modern .pg-item-top small{display:block;margin-top:4px;color:#94a3b8;font-size:12px}
#sectionPvpGiveaways .pg-status{
  flex:0 0 auto;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;
  background:rgba(148,163,184,.12);color:#cbd5e1;border:1px solid rgba(148,163,184,.15)
}
#sectionPvpGiveaways .pg-status-active{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}
#sectionPvpGiveaways .pg-status-drawing{background:rgba(250,204,21,.12);color:#fde047;border-color:rgba(250,204,21,.25)}
#sectionPvpGiveaways .pg-status-finished{background:rgba(56,189,248,.10);color:#7dd3fc;border-color:rgba(56,189,248,.22)}
#sectionPvpGiveaways .pg-status-canceled{background:rgba(248,113,113,.10);color:#fca5a5;border-color:rgba(248,113,113,.22)}
#sectionPvpGiveaways .pg-list-gifts{display:flex;gap:9px;overflow-x:auto;padding:12px 0 8px;scrollbar-width:none}
#sectionPvpGiveaways .pg-list-gifts::-webkit-scrollbar{display:none}
#sectionPvpGiveaways .pg-list-gift{
  min-width:145px;max-width:180px;display:flex;align-items:center;gap:9px;padding:8px;
  background:rgba(255,255,255,.045);border:1px solid rgba(148,163,184,.12);border-radius:14px
}
#sectionPvpGiveaways .pg-list-gift img,#sectionPvpGiveaways .pg-list-gift-ph{
  width:50px;height:50px;flex:0 0 50px;object-fit:contain;border-radius:11px;background:#0d1320
}
#sectionPvpGiveaways .pg-list-gift-ph{display:flex;align-items:center;justify-content:center;font-size:25px}
#sectionPvpGiveaways .pg-list-gift strong{display:block;color:#f8fafc;font-size:12px;line-height:1.2}
#sectionPvpGiveaways .pg-list-gift span{display:block;color:#facc15;font-size:11px;margin-top:4px}
#sectionPvpGiveaways .pg-item-open{
  display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding-top:10px;
  border-top:1px solid rgba(148,163,184,.10);color:#cbd5e1;font-size:12px;font-weight:700
}
#sectionPvpGiveaways .pg-item-open span{font-size:22px;line-height:12px;color:#38bdf8}

/* ===== PvP giveaways v1.8 ===== */
/* More breathing room at top of giveaway list only. */
#sectionPvpGiveaways .pg-head{padding-top:22px!important}
#sectionPvpGiveaways #pgGame:not(.hidden) ~ *{}
/* Active filter is clearly highlighted. */
#sectionPvpGiveaways .pg-tab.active{background:linear-gradient(135deg,#6d28d9,#0ea5e9)!important;color:#fff!important;border-color:rgba(125,211,252,.65)!important;box-shadow:0 0 18px rgba(14,165,233,.18)!important}
/* Active prize: stable highlight, no pulse/blink/transform. */
#sectionPvpGiveaways .pg-gift{transition:none!important}
#sectionPvpGiveaways .pg-gift.active{transform:none!important;animation:none!important;border-color:#facc15!important;box-shadow:0 0 0 1px rgba(250,204,21,.22),0 0 14px rgba(250,204,21,.16)!important}
#sectionPvpGiveaways .pg-back-btn{margin:0 5px 18px!important;width:calc(100% - 10px)!important;min-height:48px!important;border-radius:16px!important;background:#151c2a!important;border:1px solid rgba(148,163,184,.22)!important;color:#e5e7eb!important;font-weight:800!important}
/* giveaways v7 */
#pgCreateModal .modal-actions{padding-left:16px!important;padding-right:16px!important}
.pg-channel-input{display:flex;align-items:center;gap:8px;margin-top:7px}
.pg-channel-input .input{flex:1;min-width:0}
.pg-channel-add,.pg-channel-remove{appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;color:#cbd5e1;font-size:24px;line-height:1;padding:4px 7px;cursor:pointer}
.pg-channel-link-wrap{display:flex;justify-content:center;margin:4px 14px 0}
.pg-channel-link{appearance:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.25)!important;background:#111827!important;color:#cbd5e1!important;border-radius:14px!important;padding:10px 16px!important;box-shadow:none!important;font:inherit}

/* giveaways v8.1 channel controls */
#pgCreateModal .pg-channel-input{gap:2px!important}
#pgCreateModal .pg-channel-add,#pgCreateModal .pg-channel-remove{flex:0 0 30px!important;width:30px!important;min-width:30px!important;padding:2px 3px!important;margin:0!important}

/* v11.7: My Gifts actions stacked; withdraw is dark secondary action */
.mygift-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.mygift-actions .btn{
  width:100%;
  flex:none;
}
.mygift-actions .btn[data-withdraw]{
  background:#1f1f1f !important;
  background-image:none !important;
  border-color:#303030 !important;
  color:#fff !important;
  box-shadow:none !important;
}

#sectionPvpGiveaways .pg-list-timer{display:block;margin-top:9px;text-align:center;color:#cbd5e1;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}

/* ===== Website mode ===== */
body.web-mode .app{padding:28px 24px 110px}
body.web-mode .shell{width:min(1180px,100%);border-radius:26px;padding:18px 18px calc(22px + var(--bottom-nav-h))}
body.web-mode .header{max-width:900px;margin:0 auto 16px}
body.web-mode .main-card{max-width:900px;margin-left:auto;margin-right:auto}
body.web-mode .bottom-nav-wrap{left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:min(720px,calc(100% - 32px));border:1px solid rgba(148,163,184,.18);border-radius:22px;padding:8px;background:rgba(7,10,26,.9)}
body.web-mode .bottom-nav-wrap .main-nav{display:flex;justify-content:center}
body.web-mode .bottom-nav-wrap .main-nav-btn{min-width:105px}
.web-account-bar{display:none}
body.web-mode .web-account-bar{display:flex;align-items:center;gap:10px;margin-left:auto}
.web-logout{border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.04);color:#e2e8f0;border-radius:12px;padding:9px 12px;cursor:pointer}

.web-landing{min-height:100vh;color:#f8fafc;padding:24px;background:radial-gradient(800px 500px at 18% 10%,rgba(34,211,238,.12),transparent 60%),radial-gradient(800px 600px at 82% 70%,rgba(139,92,246,.14),transparent 60%),#070b13}
.web-landing-inner{width:min(1180px,100%);margin:0 auto}
.web-site-head{display:flex;align-items:center;justify-content:space-between;padding:8px 0 28px}
.web-brand{font-weight:950;letter-spacing:.12em;font-size:20px}.web-brand span{color:#67e8f9}
.web-head-actions{display:flex;gap:10px}
.web-link-btn,.web-primary-btn{border-radius:14px;padding:11px 17px;font-weight:800;cursor:pointer;font:inherit}
.web-link-btn{color:#e2e8f0;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.04)}
.web-primary-btn{color:#07111e;border:0;background:linear-gradient(135deg,#67e8f9,#a78bfa)}
.web-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:54px;align-items:center;padding:72px 0 56px}
.web-kicker{display:inline-flex;border:1px solid rgba(103,232,249,.22);background:rgba(34,211,238,.07);padding:7px 11px;border-radius:999px;color:#a5f3fc;font-size:13px;font-weight:800}
.web-hero h1{font-size:clamp(44px,6vw,78px);line-height:.98;margin:20px 0;letter-spacing:-.045em;max-width:760px}
.web-hero p{font-size:18px;line-height:1.65;color:#94a3b8;max-width:680px}
.web-hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.web-preview{padding:20px;border:1px solid rgba(148,163,184,.18);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 28px 80px rgba(0,0,0,.35)}
.web-preview-top{display:flex;justify-content:space-between;color:#94a3b8;font-size:13px;margin-bottom:16px}.web-preview-arena{aspect-ratio:1;border-radius:22px;background:radial-gradient(circle at 50% 50%,rgba(103,232,249,.12),transparent 28%),linear-gradient(135deg,rgba(56,189,248,.13),rgba(139,92,246,.12));border:1px solid rgba(148,163,184,.16);display:grid;place-items:center}.web-ball{width:70px;height:70px;border:2px solid #fff;border-radius:50%;position:relative;box-shadow:0 0 32px rgba(103,232,249,.18)}.web-ball:before,.web-ball:after{content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}.web-ball:before{width:30px;height:2px}.web-ball:after{width:2px;height:30px}
.web-features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px 0 70px}.web-feature{padding:22px;border:1px solid rgba(148,163,184,.15);border-radius:20px;background:rgba(255,255,255,.035)}.web-feature b{display:block;margin-bottom:8px}.web-feature span{color:#94a3b8;line-height:1.5;font-size:14px}
.web-auth-modal{position:fixed;inset:0;z-index:1000010;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.78);backdrop-filter:blur(10px)}.web-auth-modal.open{display:flex}.web-auth-card{width:min(430px,100%);border:1px solid rgba(148,163,184,.2);border-radius:24px;background:#0b1020;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.55)}.web-auth-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.web-auth-head h2{margin:0}.web-auth-close{border:0;background:transparent;color:#94a3b8;font-size:24px;cursor:pointer}.web-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:14px;background:rgba(255,255,255,.04);margin-bottom:18px}.web-auth-tab{border:0;border-radius:10px;padding:10px;color:#94a3b8;background:transparent;font-weight:800;cursor:pointer}.web-auth-tab.active{background:rgba(255,255,255,.08);color:#fff}.web-auth-field{margin:12px 0}.web-auth-field label{display:block;color:#94a3b8;font-size:12px;margin-bottom:6px}.web-auth-field input{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:13px;border:1px solid rgba(148,163,184,.2);background:#080d19;color:#fff;outline:none}.web-auth-submit{width:100%;margin-top:10px}.web-auth-error{min-height:20px;margin-top:12px;color:#fda4af;font-size:13px;text-align:center}
@media(max-width:800px){.web-hero{grid-template-columns:1fr;padding-top:36px}.web-preview{max-width:480px}.web-features{grid-template-columns:1fr}.web-site-head{padding-bottom:10px}.web-hero h1{font-size:46px}body.web-mode .app{padding:12px 10px 100px}body.web-mode .shell{border-radius:22px;padding:12px 12px calc(18px + var(--bottom-nav-h))}body.web-mode .bottom-nav-wrap{bottom:0;width:100%;border-radius:0;border-left:0;border-right:0;border-bottom:0}}

/* ===== Standalone website guest gate ===== */
body.website-guest{margin:0;background:#070b13;min-height:100vh;overflow-x:hidden}
body.website-guest #appShell,body.website-guest #appSplash{display:none!important}
body.website-guest #landingInfo{display:block!important}
body.web-mode #landingInfo{display:none!important}
body.website-guest .web-auth-modal.open{display:flex!important}
@media(max-width:600px){
 body.website-guest .web-landing{padding:16px}
 body.website-guest .web-site-head{gap:12px}
 body.website-guest .web-brand{font-size:17px}
 body.website-guest .web-head-actions{gap:7px}
 body.website-guest .web-head-actions .web-link-btn,body.website-guest .web-head-actions .web-primary-btn{padding:9px 11px;font-size:13px}
 body.website-guest .web-hero{padding:42px 0 32px;gap:28px}
 body.website-guest .web-hero h1{font-size:40px}
 body.website-guest .web-hero p{font-size:16px}
}