:root {
  --bg: #0b0f1a;
  --bg2: #12182a;
  --card: #1a2238;
  --border: rgba(255, 255, 255, 0.08);
  --text: #eef2ff;
  --muted: #8b95b0;
  --accent: #6c5ce7;
  --accent2: #00d2ff;
  --good: #2ecc71;
  --warn: #f39c12;
  --danger: #e74c3c;
  --tap: #7c6cff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-h: 70px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
picture { display: contents; } /* WebP wrappers keep the old img layout */
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  overflow: hidden;
  user-select: none;
}
body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(108, 92, 231, 0.35), transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(0, 210, 255, 0.08), transparent 40%),
    var(--bg);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo-img {
  width: 40px; height: 40px; border-radius: 12px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4);
  background: #000;
}
.brand h1 { margin: 0; font-size: 1.15rem; letter-spacing: 0.02em; }
.tagline { margin: 0; font-size: 0.7rem; color: var(--muted); }

.points-pill {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  line-height: 1.15;
}
.pill-logo {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: #000;
}
.points-pill-text {
  display: flex; flex-direction: column; align-items: flex-end;
}
.points-pill span { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.points-pill strong { font-size: 1.05rem; color: #fff; }

#gameShell { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: calc(var(--tab-h) + var(--safe-bottom)); }
#views { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
.view { display: none; animation: fade 0.2s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-title { margin: 8px 0 14px; font-size: 1.1rem; }

/* Tap button */
.tap-btn {
  position: relative;
  display: block;
  width: min(72vw, 260px);
  height: min(72vw, 260px);
  margin: 24px auto 12px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.tap-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
  opacity: 0.55;
  filter: blur(1px);
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tap-core {
  position: absolute; inset: 10px; border-radius: 50%;
  background: #05070f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(76, 61, 200, 0.55),
    inset 0 2px 12px rgba(255,255,255,0.12);
  transition: transform 0.08s ease;
}
.tap-btn:active .tap-core,
.tap-btn.pressed .tap-core { transform: scale(0.94); }
.tap-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.tap-power {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: 18%;
  font-weight: 700; font-size: 1.1rem;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.6);
}
.tap-sub { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0; }

.float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.float-point {
  position: absolute;
  font-weight: 800;
  color: #aef;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: floatUp 0.7s ease-out forwards;
  font-size: 1.2rem;
}
@keyframes floatUp {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-70px) scale(1.2); }
}

/* Cards / upgrades */
.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(108, 92, 231, 0.2);
}
.card-body h3 { margin: 0 0 4px; font-size: 1rem; }
.card-desc { margin: 0; font-size: 0.8rem; color: var(--muted); }
.card-effect { margin: 4px 0 0; font-size: 0.75rem; color: var(--accent2); }
.buy-btn, .primary-btn, .ghost-btn {
  border: none; border-radius: 12px; cursor: pointer;
  font-weight: 700; font-size: 0.9rem;
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #5a4bd1);
  box-shadow: 0 6px 18px rgba(108, 92, 231, 0.35);
}
.buy-btn:disabled, .primary-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.primary-btn.compact { padding: 10px 12px; }
.ghost-btn {
  width: 100%; margin-top: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

/* Daily */
.daily-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
}
.daily-icon { font-size: 3rem; margin-bottom: 8px; }
.daily-amount { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.daily-note { color: var(--muted); font-size: 0.85rem; margin: 0 0 18px; }
.daily-status { margin-top: 12px; font-size: 0.85rem; color: var(--good); min-height: 1.2em; }
#dailyBtn { width: 100%; padding: 14px; font-size: 1rem; }

/* Friends */
.friends-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
}
.friends-bonus { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.invite-count { font-size: 1.05rem; margin: 14px 0; }
.link-label { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.link-row { display: flex; gap: 8px; }
.link-row input {
  flex: 1; min-width: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.8rem;
}

/* Leaderboard */
.leaderboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.leaderboard li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.leaderboard li.me { border-color: rgba(108, 92, 231, 0.55); background: rgba(108, 92, 231, 0.15); }
.lb-rank { font-weight: 800; color: var(--accent2); }
.lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; unicode-bidi: isolate; }
.lb-points { white-space: nowrap; }
.leaderboard.refreshing { opacity: 0.7; transition: opacity 0.2s; }
.leaderboard li.top1 .lb-rank { color: #ffd166; }
.leaderboard li.top2 .lb-rank { color: #d9e2ec; }
.leaderboard li.top3 .lb-rank { color: #f4a261; }
.lb-me { margin: -4px 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(108, 92, 231, 0.15); border: 1px solid rgba(108, 92, 231, 0.45); font-weight: 600; font-size: 0.9rem; }
.lb-retry { margin-top: 10px; }
.lb-points { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; }
.empty { text-align: center; color: var(--muted); padding: 24px; }

/* Tabs */
.tabbar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 480px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 8px 6px calc(8px + var(--safe-bottom));
  background: rgba(11, 15, 26, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 40;
}
.tab {
  background: transparent; border: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.58rem; padding: 6px 1px; cursor: pointer; border-radius: 10px;
  min-width: 0; white-space: nowrap;
}
.tab span { font-size: 1.15rem; line-height: 1; }
.tab.active { color: #fff; background: rgba(108, 92, 231, 0.2); }

.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px);
  transform: translateX(-50%);
  background: #222b44;
  border: 1px solid var(--border);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  max-width: 90%;
}

/* ---- Onboarding ---- */
#gameShell.locked {
  pointer-events: none;
  filter: blur(2px) brightness(0.45);
  user-select: none;
}
#gameShell.locked .tabbar { pointer-events: none; }

.onboarding {
  position: fixed;
  inset: 0;
  z-index: 80;
  max-width: 480px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(108, 92, 231, 0.4), transparent 55%),
    var(--bg);
  overflow-y: auto;
  padding: 20px 18px calc(24px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding[hidden] { display: none !important; }

.ob-header { text-align: center; }
.ob-header .logo-img {
  width: 52px; height: 52px; border-radius: 16px;
  display: block; margin: 0 auto 10px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.45);
  background: #000;
}
.ob-header h1 { margin: 0; font-size: 1.4rem; }
.ob-sub { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; }

.ob-stepper {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; justify-content: space-between;
}
.ob-stepper li {
  flex: 1; text-align: center; font-size: 0.62rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ob-stepper li span {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border);
  font-size: 0.75rem; font-weight: 700; color: var(--muted);
}
.ob-stepper li.active span,
.ob-stepper li.done span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent; color: #fff;
}
.ob-stepper li.active { color: #fff; }
.ob-stepper li.done { color: var(--good); }

.ob-panel {
  display: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 18px;
  animation: fade 0.2s ease;
}
.ob-panel.active { display: block; }
.ob-panel h2 { margin: 0 0 8px; font-size: 1.15rem; }
.ob-desc { margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.ob-desc code {
  background: var(--bg2); padding: 1px 6px; border-radius: 6px; font-size: 0.8rem;
}
.ob-link, .ob-panel .primary-btn, .ob-panel .ghost-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  margin-bottom: 10px; padding: 14px; box-sizing: border-box;
}
.ob-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.ob-status {
  margin: 10px 0 0; font-size: 0.85rem; min-height: 1.2em; color: var(--muted);
}
.ob-status.ok { color: var(--good); }
.ob-status.no { color: var(--danger); }

.ob-checklist {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ob-checklist li {
  background: var(--bg2); border-radius: 12px; padding: 10px 14px;
  border: 1px solid var(--border); font-size: 0.9rem;
}
.ob-checklist li.ok::before { content: "✅ "; }
.ob-checklist li.no::before { content: "⬜ "; }
.ob-checklist li.ok { border-color: rgba(46, 204, 113, 0.35); }

/* Token / Withdraw */
.token-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.token-badge {
  font-size: 0.85rem;
  color: #8ab4ff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.token-logo {
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: #000;
}
.token-note, .token-conv, .token-status {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.withdraw-box { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.earn-pause-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #7a1f1f;
  color: #fff;
  text-align: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}



.app-notice {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 10px 12px 0;
}
.app-notice[hidden] { display: none !important; }
.app-notice-inner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, #1a2744, #122036);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.app-notice.is-notice .app-notice-inner {
  border-color: rgba(96, 165, 250, 0.35);
  background: linear-gradient(135deg, #163056, #10243d);
}
.app-notice.is-ad .app-notice-inner {
  border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, #3a2a12, #241a0c);
}
.app-notice-image {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.06);
}
.app-notice-copy { flex: 1 1 auto; min-width: 0; }
.app-notice-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  color: #0b0f1a;
  background: #93c5fd;
}
.app-notice.is-ad .app-notice-kind { background: #fbbf24; }
.app-notice-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}
.app-notice-body {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
  white-space: pre-wrap;
  word-break: break-word;
}
.app-notice-link {
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #0b0f1a;
  background: #fff;
}
.app-notice.is-ad .app-notice-link { background: #fbbf24; }
.app-notice-dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.app-notice-dismiss:active { background: rgba(255,255,255,0.2); }

.ob-advanced {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
}
.ob-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  user-select: none;
  padding: 4px 0;
}
.ob-advanced[open] summary { margin-bottom: 10px; color: #fff; }
.ob-advanced .ob-input { margin-top: 6px; }
.ob-advanced .ghost-btn { margin-top: 8px; width: 100%; }
.ton-connect-root { margin: 8px 0; min-height: 0; }
#connectTonBtn { width: 100%; }


.missing-init-banner {
  position: sticky;
  top: 0;
  z-index: 55;
  background: #1a3a6b;
  color: #fff;
  text-align: center;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.missing-init-banner[hidden] { display: none !important; }


.play-daily-btn {
  display: block;
  width: auto;
  min-width: 180px;
  max-width: 280px;
  margin: 0 auto 8px;
  padding: 10px 16px;
}
.play-daily-btn:disabled {
  opacity: 0.65;
}
#playDailyStatus {
  text-align: center;
  margin: 0 0 8px;
  min-height: 1.1em;
}

.play-wallet-btn {
  display: block;
  width: auto;
  min-width: 180px;
  max-width: 280px;
  margin: 14px auto 0;
  padding: 10px 16px;
}
.play-wallet-btn.is-connected {
  border-color: rgba(52, 211, 153, 0.55);
  color: #bbf7d0;
  background: rgba(16, 185, 129, 0.12);
}

.play-energy-ad-btn {
  display: block;
  width: auto;
  min-width: 180px;
  max-width: 280px;
  margin: 8px auto 0;
  padding: 10px 16px;
  border-color: rgba(243, 156, 18, 0.55);
  color: #ffe7b8;
  background: rgba(243, 156, 18, 0.12);
}
.play-energy-ad-btn:disabled {
  opacity: 0.65;
}
.energy-ad-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(5, 8, 16, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.energy-ad-modal[hidden] { display: none !important; }
.energy-ad-card {
  width: min(440px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 16px 18px;
  position: relative;
  max-height: min(86vh, 640px);
  overflow: auto;
}
.energy-ad-card h2 { margin: 0 28px 6px 0; font-size: 1.1rem; }
.energy-ad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.energy-ad-reward { margin: 0 0 10px; color: var(--warn); font-weight: 700; }
.energy-ad-stage {
  min-height: 160px;
  border-radius: 12px;
  background: #0e1424;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 10px;
}
.energy-ad-stage iframe,
.energy-ad-stage img.gmo-fill,
.energy-ad-stage .gmo-fill {
  width: 100%;
  height: 220px;
  border: 0;
  background: #0e1424;
  display: block;
}
.energy-ad-stage img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  display: block;
  background: #0e1424;
}
.energy-ad-stage .gmo-ad-html {
  min-height: 220px;
  padding: 12px;
  color: var(--text);
  background: #0e1424;
  box-sizing: border-box;
}
.energy-ad-stage .gmo-ad-html img,
.energy-ad-stage .gmo-ad-html video {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  background: transparent;
}
.energy-ad-stage p {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
}
.energy-ad-timer { margin: 0 0 12px; text-align: center; color: var(--muted); font-size: 0.85rem; }

.tasks-block { margin: 18px auto 8px; max-width: 360px; }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.task-empty { text-align: center; color: var(--muted); font-size: 13px; }
.task-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
}
.task-title { font-size: 14px; font-weight: 650; }
.task-reward { font-size: 12px; color: var(--muted); margin-top: 2px; }
.task-row .primary-btn.compact { min-width: 72px; }

.task-limit { margin: 0 0 8px; text-align: center; color: var(--muted); font-size: 12px; }

.play-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px auto 4px;
}
.play-actions .play-wallet-btn,
.play-actions .play-energy-ad-btn {
  margin: 0 auto;
}
.view[data-view="play"] { padding-bottom: 12px; }
@media (max-height: 760px) {
  .tap-btn { width: min(56vw, 210px); height: min(56vw, 210px); margin: 10px auto 8px; }
}
.tasks-block { margin-top: 0; }

.tap-cap-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 10px;
}
.play-jetton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px auto 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.play-jetton code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e8eefc;
}
.jetton-full {
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 8px 0;
}
.wallet-help-steps {
  margin: 0 0 12px;
  padding-left: 1.2rem;
  line-height: 1.45;
}
#walletHelpBtn { width: 100%; margin-top: 10px; }

.task-watch { max-width: 360px; margin: 0 auto; }
.task-watch .primary-btn { width: 100%; }
.task-watch .ghost-btn { margin: 0 0 10px; }

/* Wallet: disconnect, chooser, withdraw info */
.play-wallet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  flex-wrap: wrap;
}
.play-wallet-row .play-wallet-btn { margin: 0; }
.wallet-disconnect-btn {
  width: auto;
  padding: 8px 12px;
  font-size: 0.82rem;
  border-color: rgba(231, 76, 60, 0.55);
  color: #ffc9c2;
  background: rgba(231, 76, 60, 0.1);
}
.wallet-disconnect-btn[hidden] { display: none !important; }
.ton-only-note {
  margin: 6px 0 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #ffd98a;
}
.wallet-chooser-status { margin: 6px 0; color: var(--muted); font-size: 0.85rem; }
.wallet-chooser-status[hidden] { display: none; }
.wallet-chooser-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0 12px;
}
.wallet-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.wallet-option:active { transform: scale(0.98); }
.wallet-option img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #0e1424;
  object-fit: cover;
}
.wallet-option-text { display: flex; flex-direction: column; min-width: 0; }
.wallet-option-text strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-option-text small { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-chooser-card #walletChooserMore { width: 100%; }
.wallet-dc-label { margin: 6px 0 2px; font-size: 0.78rem; color: var(--muted); }
.wallet-dc-note { margin: 8px 0; font-size: 0.82rem; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }
.wallet-dc-actions { display: flex; gap: 8px; margin-top: 12px; }
.wallet-dc-actions button { flex: 1; }
.primary-btn.danger-btn { background: linear-gradient(135deg, #e74c3c, #b8322a); }
.token-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}
.token-wallet-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.token-wallet-text .link-label { margin: 0; }
.token-wallet-addr { font-size: 0.85rem; color: #bbf7d0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-wallet button { width: auto; margin: 0; }
.token-wallet button[hidden] { display: none !important; }
.withdraw-info {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 210, 255, 0.35);
  background: rgba(0, 210, 255, 0.08);
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.withdraw-info[hidden] { display: none; }
.withdraw-info a { color: var(--accent2); text-decoration: underline; }
.play-wallet-row .wallet-disconnect-btn,
.wallet-dc-actions button,
.wallet-chooser-card #walletChooserMore { margin-top: 0; }
.play-actions .play-wallet-row { margin: 0 auto; }

/* Floating WhatsApp button: bottom-right, above the tab bar (draggable) */
.wa-fab {
  position: fixed;
  right: max(10px, calc((100vw - 480px) / 2 + 10px));
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 72px);
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.wa-fab[hidden] { display: none !important; }
.wa-fab:active { transform: scale(0.94); }
.wa-fab.dragging,
.wa-fab.dragging:active {
  cursor: grabbing;
  transform: none;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45), 0 3px 10px rgba(0, 0, 0, 0.5);
}
#gameShell.locked .wa-fab { display: none !important; }

/* ---------- Popup ad (admin-configured, every load) ---------- */
.popup-ad-modal { z-index: 120; align-items: center; }
.popup-ad-card { padding-top: 14px; max-height: min(84vh, 640px); overflow: hidden; display: flex; flex-direction: column; }
.popup-ad-kind { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8b93a7); margin: 0 40px 6px 0; }
.popup-ad-card h2 { margin: 0 40px 8px 0; }
.popup-ad-close {
  top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.12); font-size: 1.35rem; display: flex; align-items: center; justify-content: center;
}
.popup-ad-close[hidden], .popup-ad-countdown[hidden] { display: none !important; }
.popup-ad-countdown {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); color: var(--text); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
/* Admin content is contained: own scroll box, clipped, cannot escape the card. */
.popup-ad-stage {
  margin-bottom: 0; min-height: 120px; max-height: calc(min(84vh, 640px) - 80px);
  overflow: auto; contain: layout paint; position: relative; isolation: isolate;
}
.popup-ad-stage .popup-ad-html { min-height: 220px; padding: 12px; color: var(--text); overflow-wrap: anywhere; contain: layout paint; position: relative; }
.popup-ad-stage .popup-ad-frame { height: 320px; }
.popup-ad-stage .popup-ad-text { padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; color: var(--text); }
.popup-ad-stage .popup-ad-text a { color: var(--accent, #7aa2ff); }
.popup-ad-stage .popup-ad-cta, .popup-ad-stage .popup-ad-open { display: block; width: calc(100% - 24px); margin: 10px 12px 12px; }

/* ---------- Friends: referrals list ---------- */
.referrals-card { margin-top: 12px; }
.referrals-title { margin: 0 0 2px; font-size: 1rem; }
.referrals-total { color: var(--muted, #8b93a7); font-weight: 600; }
.referrals-note { margin: 0 0 8px; font-size: .78rem; color: var(--muted, #8b93a7); }
.referrals-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.referral-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border, #263049); }
.referral-row:first-child { border-top: 0; }
.referral-main { min-width: 0; }
.referral-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-email { font-size: .8rem; color: var(--muted, #8b93a7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-date { font-size: .75rem; color: var(--muted, #8b93a7); white-space: nowrap; }
.referrals-empty { margin: 6px 0 0; color: var(--muted, #8b93a7); font-size: .85rem; }

/* Wallet chooser: always fit the phone width (360–414px+), scroll vertically. */
.wallet-chooser-card {
  box-sizing: border-box;
  width: min(440px, 100%);
  max-width: 100%;
  max-height: min(86vh, 680px);
  max-height: min(86dvh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.wallet-chooser-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
}
.wallet-option {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.wallet-option-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.wallet-option-text strong,
.wallet-option-text small { display: block; max-width: 100%; }
@media (max-width: 340px) {
  .wallet-chooser-list { grid-template-columns: minmax(0, 1fr); }
}

/* Contact step: inline field errors */
.ob-field-msg { min-height: 0; margin: 4px 0 8px; font-size: .8rem; }
.ob-field-msg:empty { display: none; }
.ob-input.invalid, .ob-input.invalid:focus { border-color: #e74c3c; box-shadow: 0 0 0 2px rgba(231, 76, 60, .25); }
#contactForm #saveContactBtn { width: 100%; margin-top: 8px; }

/* Tap ad (interrupts tapping every N taps) */
.tap-ad-modal { z-index: 125; }
.tap-ad-status { margin: 10px 0 0; text-align: center; font-size: 0.85rem; color: var(--muted); }
.tap-ad-video { background: #000; object-fit: contain; }

/* Lightweight boot skeleton: visible from first paint until /api/me resolves. */
.booting #pointsValue,
.booting #tapCapNote,
.booting #playDailyStatus {
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: gm-shimmer 1.1s linear infinite;
}
.booting #pointsValue { display: inline-block; min-width: 3.2em; }
.booting #app::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, transparent, #8b7bff, #2fd3ff, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: gm-bootbar 1.2s ease-in-out infinite;
}
@keyframes gm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes gm-bootbar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .booting #pointsValue, .booting #tapCapNote, .booting #playDailyStatus, .booting #app::before { animation: none; }
}

/* VIP */
.vip-status { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.vip-status-text { margin: 0; font-weight: 600; }
.vip-badge-line { margin: 6px 0 0; color: #ffd76a; }
.vip-note { font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; }
.vip-levels { display: grid; gap: 10px; }
.vip-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 14px; }
.vip-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.vip-card .vip-meta { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.vip-card .vip-price { font-weight: 700; color: #ffd76a; margin-bottom: 8px; }
.vip-card.active-level { border-color: #ffd76a; box-shadow: 0 0 0 1px rgba(255,215,106,0.25); }
.vip-card button:disabled { opacity: 0.5; }

.vip-crypto-panel { margin: 0 0 12px; padding: 12px; }
.vip-crypto-panel .vip-crypto-addr { word-break: break-all; font-family: ui-monospace, monospace; font-size: 0.85rem; margin: 6px 0; }
.vip-crypto-panel img.vip-qr { display: block; width: 160px; height: 160px; margin: 8px auto; border-radius: 8px; background: #fff; }
.vip-crypto-panel .vip-pay-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vip-card .vip-buy-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vip-card .vip-buy-row .primary-btn, .vip-card .vip-buy-row .ghost-btn { flex: 1 1 auto; min-width: 120px; }
.vip-card .vip-price-line { font-size: 0.85rem; color: var(--muted); margin: 0 0 4px; }

.transfer-box { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.transfer-preview { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; line-height: 1.4; }
.transfer-preview strong { color: #7dd3fc; }
.transfer-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.transfer-history li { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }
.transfer-history li.empty { opacity: 0.6; }
.transfer-history .xfer-dir { font-weight: 600; margin-right: 6px; }
.transfer-history .xfer-sent { color: #fca5a5; }
.transfer-history .xfer-recv { color: #86efac; }

/* ---- My Profile ---- */
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.profile-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff; font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35);
}
.profile-btn:active { transform: scale(0.96); }
.profile-btn-initial { line-height: 1; }
.profile-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.profile-title { margin: 0; flex: 1; }
.profile-hero {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #6c5ce7, #00cec9);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.profile-hero-text { flex: 1; min-width: 0; }
.profile-hero-text h3 { margin: 0 0 2px; font-size: 1.05rem; }
.profile-hero-text p { margin: 0; }
.profile-status-pill {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px; font-weight: 600;
  background: rgba(0, 184, 148, 0.18); color: #55efc4; border: 1px solid rgba(0,184,148,0.35);
}
.profile-status-pill.is-blocked { background: rgba(214,48,49,0.18); color: #ff7675; border-color: rgba(214,48,49,0.4); }
.profile-status-pill.is-frozen { background: rgba(9,132,227,0.18); color: #74b9ff; border-color: rgba(9,132,227,0.4); }
.profile-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
}
.profile-section-title { margin: 0 0 10px; font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.profile-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.9rem;
}
.profile-row:last-of-type { border-bottom: none; }
.profile-row span { color: var(--muted); flex-shrink: 0; }
.profile-row strong, .profile-row code { text-align: right; word-break: break-all; font-weight: 600; }
.profile-wallet { font-size: 0.75rem; color: #dfe6e9; }
.profile-edit-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.profile-edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.profile-edit-form input {
  background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: #fff; font-size: 0.95rem;
}
.profile-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ---- Collapsible history (accordion) ---- */
.hist-acc { margin-top: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.03); overflow: hidden; }
.hist-acc-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: transparent; border: 0; color: inherit;
  font: inherit; font-weight: 600; font-size: 0.95rem; text-align: left; cursor: pointer;
}
.hist-acc-title { flex: 1; }
.hist-acc-badge {
  min-width: 22px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; text-align: center;
  background: rgba(108, 92, 231, 0.25); color: #fff; border: 1px solid rgba(108, 92, 231, 0.45);
}
.hist-acc-chev { transition: transform 0.2s ease; color: var(--muted); }
.hist-acc.open .hist-acc-chev { transform: rotate(180deg); }
.hist-acc-body { padding: 0 12px 12px; }
.hist-acc-body .transfer-history { margin: 0; }
.pending-fee-notice {
  display: block; width: 100%; margin-top: 10px; padding: 8px 12px; border-radius: 10px;
  background: rgba(253, 203, 110, 0.14); border: 1px solid rgba(253, 203, 110, 0.45);
  color: #ffeaa7; font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
}
.pending-fee-notice[hidden] { display: none; }

.profile-copy-id { margin-left: 6px; padding: 2px 8px; font-size: 0.72rem; }
.profile-email-note { margin: 0 0 6px; font-size: 0.75rem; }

/* ---- Support chat FAB + sheet ---- */
.support-fab {
  position: fixed;
  right: max(10px, calc((100vw - 480px) / 2 + 10px));
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 132px);
  z-index: 41;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, #6c5ce7, #00cec9);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(108, 92, 231, 0.4), 0 2px 6px rgba(0,0,0,0.4);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  padding: 0;
}
.support-fab[hidden] { display: none !important; }
.support-fab:active { transform: scale(0.94); }
.support-fab.dragging, .support-fab.dragging:active { cursor: grabbing; transform: none; }
#gameShell.locked .support-fab { display: none !important; }
.support-fab-icon { font-size: 1.25rem; line-height: 1; }
.support-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ff4757; color: #fff; font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid #0b0f1a;
}
.support-fab-badge[hidden] { display: none !important; }

.support-sheet {
  position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center; padding: 12px;
}
.support-sheet[hidden] { display: none !important; }
.support-sheet-card {
  width: min(480px, 100%); max-height: min(78vh, 640px);
  background: var(--card, #141a2a); border: 1px solid var(--border); border-radius: 18px 18px 12px 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.45);
}
.support-sheet-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.support-sheet-head h2 { margin: 0; flex: 1; font-size: 1.05rem; }
.support-messages {
  flex: 1; min-height: 180px; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.support-msg {
  max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 0.9rem; line-height: 1.35;
  word-break: break-word;
}
.support-msg.you { align-self: flex-end; background: rgba(108,92,231,0.28); border: 1px solid rgba(108,92,231,0.4); }
.support-msg.support { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.support-msg-meta { display: block; margin-top: 4px; font-size: 0.68rem; color: var(--muted); }
.support-send-form {
  display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--border); align-items: flex-end;
}
.support-send-form textarea {
  flex: 1; resize: none; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(0,0,0,0.25); color: #fff; padding: 10px 12px; font: inherit; min-height: 44px;
}
.support-empty { text-align: center; color: var(--muted); padding: 24px 8px; font-size: 0.9rem; }

/* Advertise tab */
.advertise-packages { display: grid; gap: 10px; }
.advertise-pkg-card {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px;
  background: rgba(0,0,0,0.22);
}
.advertise-pkg-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.advertise-pkg-meta { color: var(--muted, #9aa3b5); font-size: 0.85rem; margin: 0 0 10px; }
.advertise-pkg-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; }
.advertise-pkg-prices span {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(108,92,231,0.15); border: 1px solid rgba(108,92,231,0.35);
}
.advertise-checkout .ob-label { display: block; margin: 10px 0; }
.advertise-preview { margin: 10px 0; }
.advertise-preview img, .advertise-preview video {
  max-width: 100%; max-height: 200px; border-radius: 10px; display: block;
}
.advertise-pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.advertise-mine { display: grid; gap: 8px; margin-top: 8px; }
.advertise-sub-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  font-size: 0.9rem;
}
.advertise-sub-card .st {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 650;
}
.advertise-sub-card .st-pending { color: #ffeaa7; background: rgba(255,234,167,0.12); }
.advertise-sub-card .st-approved { color: #2ecc71; background: rgba(46,204,113,0.12); }
.advertise-sub-card .st-rejected { color: #e74c3c; background: rgba(231,76,60,0.12); }
.advertise-sub-card .st-awaiting_crypto,
.advertise-sub-card .st-awaiting_stars { color: #74b9ff; background: rgba(116,185,255,0.12); }
.tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }

/* Advertise fix: [hidden] must win over display:grid/flex; inline dropdown checkout */
.advertise-packages[hidden], .advertise-checkout[hidden], #advertiseCheckoutHome[hidden],
.advertise-preview[hidden], .advertise-pay-methods[hidden], #advertiseCryptoPanel[hidden],
#advertiseBuyMsg[hidden], #advertiseUploadMsg[hidden], #advertisePayNote[hidden] { display: none !important; }
.advertise-pkg-card.expanded { border-color: rgba(108,92,231,0.7); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.advertise-checkout {
  margin: -6px 0 4px; padding: 14px; border: 1px solid rgba(108,92,231,0.7); border-top: 0;
  border-radius: 0 0 14px 14px; background: rgba(108,92,231,0.08); animation: fade 0.18s ease;
}
.advertise-checkout-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.advertise-checkout-head h3 { margin: 0; font-size: 1rem; }
.advertise-step { margin: 12px 0 6px; font-weight: 650; font-size: 0.85rem; }
.advertise-chip, .advertise-method-btn {
  font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  padding: 6px 12px; border-radius: 999px; background: rgba(108,92,231,0.15); border: 1px solid rgba(108,92,231,0.35);
  font-size: 0.85rem;
}
.advertise-method-btn { padding: 10px 14px; border-radius: 12px; min-height: 44px; }
.advertise-method-btn.selected { background: rgba(108,92,231,0.55); border-color: #a29bfe; box-shadow: 0 0 0 2px rgba(162,155,254,0.35); font-weight: 700; }
.advertise-method-btn.selected::before { content: '✓ '; }
.advertise-pay-btn { width: 100%; margin-top: 12px; }
.advertise-tx-input { width: 100%; margin: 8px 0; }
.advertise-pkg-card .advertise-select-btn { width: 100%; }

/* USDT deposits */
.usdt-card { margin-bottom: 12px; }
.usdt-balance { margin: 4px 0; }
.usdt-nets { display: flex; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }
.usdt-net-btn { flex: 1; min-width: 120px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: inherit; }
.usdt-net-btn.selected { border-color: #26a17b; background: rgba(38,161,123,.18); font-weight: 600; }
.usdt-invoice { margin: 10px 0; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); text-align: center; }
.usdt-invoice img { width: 200px; height: 200px; background: #fff; border-radius: 8px; padding: 6px; }
.usdt-invoice .usdt-row { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 6px 0; flex-wrap: wrap; }
.usdt-invoice code { word-break: break-all; font-size: .85rem; }
.usdt-invoice .usdt-amt { font-size: 1.3rem; font-weight: 700; }
.usdt-status { font-weight: 600; }
.usdt-status.pending { color: #f0b90b; } .usdt-status.confirmed { color: #26a17b; } .usdt-status.expired, .usdt-status.cancelled { color: #e05555; }
.usdt-warn { color: #f0b90b; margin-top: 8px; }

/* ================= 2026-10 redesign: polished cards, gradients, clearer hierarchy ================= */
:root {
  --card: #161d33;
  --card2: #1d2645;
  --grad: linear-gradient(135deg, #7c6cff 0%, #00c6ff 100%);
  --radius: 18px;
  --shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.card, .token-card, .task-row, .vip-level, .usdt-invoice {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.task-row { padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-title { font-weight: 650; }
.task-reward { color: #8ff0c0; font-weight: 700; font-size: .9rem; }
.task-btns { display: flex; gap: 6px; flex-shrink: 0; }
.primary-btn { background: var(--grad); border: 0; color: #fff; border-radius: 14px; box-shadow: 0 6px 16px rgba(124, 108, 255, .35); transition: transform .1s, filter .15s; }
.primary-btn:active { transform: scale(.97); }
.primary-btn:disabled { filter: grayscale(.6) brightness(.8); box-shadow: none; }
.ghost-btn { border-radius: 14px; }
.ghost-btn.pulse { animation: pulseRing 1.4s ease-out 3; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(0, 198, 255, .55); } 100% { box-shadow: 0 0 0 12px rgba(0, 198, 255, 0); } }
.tabbar, nav.tabs, .tabs {
  background: rgba(13, 18, 33, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.tab.active { color: #fff; }
.tab.active span { filter: drop-shadow(0 0 8px rgba(124, 108, 255, .8)); }
.usdt-balance strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.25rem; }
.usdt-purpose { font-weight: 650; color: #cfd6ff; margin: 6px 0; }
.usdt-mismatch { padding: 10px 12px; border-radius: 12px; margin: 8px 0; font-weight: 600; line-height: 1.35; }
.usdt-mismatch.warn { background: rgba(243, 156, 18, .14); border: 1px solid rgba(243, 156, 18, .4); color: #ffd28a; }
.usdt-mismatch.ok { background: rgba(46, 204, 113, .12); border: 1px solid rgba(46, 204, 113, .35); color: #9df0bf; }
.usdt-status.underpaid { color: #ffd28a; }
details.usdt-claim { margin: 12px 0; border: 1px dashed var(--border); border-radius: 14px; padding: 8px 12px; }
details.usdt-claim summary { cursor: pointer; font-weight: 600; color: #cfd6ff; }
details.usdt-claim .ob-input { margin: 8px 0; }
iframe.notice-html { width: 100%; height: 140px; border: 0; border-radius: 12px; background: transparent; display: block; margin-top: 6px; }
.task-btns .compact { padding: 8px 12px; font-size: .85rem; min-width: 0; }
.task-row > div:first-child { min-width: 0; }
.usdt-invoice p { overflow-wrap: anywhere; }

/* ================= Home (play) screen redesign ================= */
.home-hero {
  position: relative; overflow: hidden; margin: 6px 0 14px; padding: 18px 18px 14px;
  border-radius: 24px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(140deg, #2a1f6e 0%, #1b2b5e 45%, #0f3a5a 100%);
  box-shadow: 0 16px 40px rgba(60, 40, 180, .35), inset 0 1px 0 rgba(255,255,255,.08);
  animation: heroIn .5s ease-out both;
}
.hero-glow { position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,198,255,.45), transparent 65%); filter: blur(6px); animation: glowDrift 6s ease-in-out infinite alternate; pointer-events: none; }
.hero-label { margin: 0; color: #b9c3ff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.hero-balance { margin: 2px 0 10px; font-size: 2.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
  background: linear-gradient(90deg, #fff 0%, #cfe9ff 60%, #8fdcff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-balance small { font-size: 1rem; font-weight: 700; color: #8fdcff; -webkit-text-fill-color: #8fdcff; }
#heroPoints { display: inline-block; }
#heroPoints.bump { animation: bump .35s ease-out; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hero-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: .8rem; color: #e6ebff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.hero-chip b { font-weight: 800; }
.hero-chip.vip { background: linear-gradient(90deg, rgba(255,209,102,.25), rgba(255,145,0,.18)); border-color: rgba(255,209,102,.5); color: #ffe3a3; }
.hero-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.hero-progress-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #7c6cff, #00c6ff, #5be49b);
  background-size: 200% 100%; animation: shimmer 3s linear infinite; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.hero-progress-text { margin: 6px 0 0; font-size: .78rem; color: #b9c3ff; }
.tap-btn { position: relative; overflow: visible; transition: transform .08s ease-out; }
.tap-btn::before { content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,108,255,.55), transparent 68%); filter: blur(18px); z-index: -1; animation: breathe 2.6s ease-in-out infinite; }
.tap-btn:active { transform: scale(.95); }
.tap-btn.pop .tap-core { animation: tapPop .22s ease-out; }
.tap-ripple { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  background: rgba(143,220,255,.55); animation: ripple .65s ease-out forwards; }
.quick-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 10px; }
.qa-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1); color: #e6ebff; font: 600 .7rem/1.15 inherit; text-align: center;
  background: linear-gradient(180deg, #212b4f, #161d33); box-shadow: 0 6px 16px rgba(0,0,0,.3);
  transition: transform .12s, box-shadow .15s, border-color .15s; animation: heroIn .45s ease-out both; }
.qa-card:nth-child(2) { animation-delay: .05s; } .qa-card:nth-child(3) { animation-delay: .1s; }
.qa-card:nth-child(4) { animation-delay: .15s; } .qa-card:nth-child(5) { animation-delay: .2s; }
.qa-card:active { transform: scale(.94); }
.qa-card:hover { border-color: rgba(124,108,255,.6); box-shadow: 0 8px 22px rgba(124,108,255,.3); }
.qa-ico { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.15rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,108,255,.35), rgba(0,198,255,.25)); }
@media (max-width: 360px) { .quick-actions { grid-template-columns: repeat(3, 1fr); } .hero-balance { font-size: 2rem; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes glowDrift { from { transform: translate(0, 0); } to { transform: translate(-30px, 20px); } }
@keyframes shimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }
@keyframes breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes tapPop { 0% { transform: scale(1); } 40% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes ripple { to { transform: scale(14); opacity: 0; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .home-hero, .qa-card, .hero-glow, .hero-progress-fill, .tap-btn::before { animation: none !important; } }
.home-hero ~ .tap-cap-note { display: none; }
#heroPoints { background: linear-gradient(90deg, #fff 0%, #cfe9ff 60%, #8fdcff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-progress-fill { min-width: 6px; }

/* ================= Home bottom section fix: spacing above fixed tab bar, aligned cards ================= */
#views { padding-bottom: calc(var(--safe-bottom) + 40px); scroll-padding-bottom: calc(var(--safe-bottom) + 40px); }
.view[data-view="play"] { padding-bottom: 8px; }
.view[data-view="play"] > * { max-width: 100%; }
/* quick actions: equal cards, 2-line labels, never truncated */
.quick-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 16px 0 14px; align-items: stretch; }
.qa-card { min-width: 0; min-height: 84px; padding: 10px 4px 9px; justify-content: flex-start; gap: 6px; }
.qa-card > span:last-child { display: block; width: 100%; white-space: normal; overflow-wrap: break-word; hyphens: auto;
  font-size: .7rem; line-height: 1.15; min-height: 2.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: visible; }
.qa-ico { flex-shrink: 0; }
@media (max-width: 374px) {
  .quick-actions { gap: 6px; }
  .qa-card { min-height: 78px; padding: 8px 2px; border-radius: 15px; }
  .qa-ico { width: 34px; height: 34px; font-size: 1.05rem; }
  .qa-card > span:last-child { font-size: .64rem; }
}
/* daily claim, contract, wallet, ad: same width + card style */
.play-daily-btn, .play-jetton, .play-actions, .play-wallet-row, .play-wallet-btn, .play-energy-ad-btn {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.play-daily-btn { margin: 0 0 6px; padding: 13px 16px; border-radius: 16px; font-weight: 700; }
#playDailyStatus { margin: 0 0 12px; font-size: .8rem; }
.play-jetton {
  justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(180deg, #1d2645, #161d33);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.play-jetton > span { flex-shrink: 0; font-weight: 600; }
.play-jetton code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.play-jetton .compact { flex-shrink: 0; }
.play-actions { gap: 10px; margin: 0; align-items: stretch; }
.play-wallet-row { margin: 0; gap: 8px; flex-wrap: nowrap; }
.play-wallet-row .play-wallet-btn { flex: 1; }
.play-wallet-row .wallet-disconnect-btn { flex: 0 0 auto; width: auto; }
.play-wallet-btn, .play-energy-ad-btn { margin: 0; padding: 13px 16px; border-radius: 16px; font-weight: 650; text-align: center; white-space: normal; }
.tap-sub { margin: 2px 0 0; }

/* ================= Bottom nav fix: every tab visible (2 rows x 5), no horizontal scroll ================= */
:root { --tab-h: 112px; }
.tabbar {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important; grid-auto-columns: auto !important;
  grid-auto-rows: 46px; gap: 4px 4px;
  overflow: visible !important;
  padding: 8px 8px calc(8px + var(--safe-bottom)) !important;
  background: linear-gradient(180deg, rgba(20, 26, 48, .94), rgba(11, 15, 26, .97)) !important;
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  border-radius: 20px 20px 0 0;
}
.tab {
  min-width: 0; width: 100%; height: 46px; padding: 4px 2px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 12px; font-size: 10.5px; line-height: 1.05; font-weight: 600; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9aa5c6;
  transition: background .15s, color .15s, transform .1s;
}
.tab span { font-size: 18px; line-height: 1; display: block; }
.tab:active { transform: scale(.94); }
.tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(124, 108, 255, .55), rgba(0, 198, 255, .35)) !important;
  box-shadow: 0 4px 14px rgba(124, 108, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.tab:focus-visible { outline: 2px solid #00c6ff; outline-offset: 1px; }
@media (max-width: 374px) { .tab { font-size: 10px; } .tab span { font-size: 17px; } }
/* Floating WhatsApp button: default above the bottom cards so it does not cover the wallet row */
.wa-fab { bottom: calc(var(--tab-h) + var(--safe-bottom) + 190px); }
/* Floating support/WhatsApp buttons: default just above the bottom nav (content ends above them). */
.support-fab { bottom: calc(var(--tab-h) + var(--safe-bottom) + 12px); }
.wa-fab { bottom: calc(var(--tab-h) + var(--safe-bottom) + 72px); }
#views { padding-bottom: calc(var(--safe-bottom) + 76px); scroll-padding-bottom: calc(var(--safe-bottom) + 76px); }
/* manual (pasted) wallet */
.manual-wallet-row { margin-top: 8px; }
.manual-wallet-btn { border-style: dashed !important; }
#playChangeWallet { flex: 0 0 auto; min-width: 92px; }
.wallet-manual-input { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace; font-size: 13px; resize: none; word-break: break-all; min-height: 58px; }
#walletChooserPaste { margin-top: 8px; width: 100%; }
.ob-paste-btn { width: 100%; margin-top: 10px; }
.manual-wallet-btn[hidden], .manual-wallet-row[hidden] { display: none !important; }
.manual-wallet-row #playChangeWallet { flex: 1 1 auto; }
/* USDT "Pay with" */
.usdt-paywith { margin: 12px 0 4px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.usdt-paywith h4 { margin: 12px 0 8px; font-size: 14px; }
.usdt-net-warn { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,184,0,.12); border: 1px solid rgba(255,184,0,.35); color: #ffd36b; font-size: 12.5px; line-height: 1.35; }
.usdt-amt-remind { margin: 0; font-size: 13px; font-weight: 600; color: #9fe8ff; }
.paywith-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.paywith-grid.exch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paywith-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(122,92,255,.18), rgba(0,198,255,.08)); color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.paywith-btn.exch { background: linear-gradient(160deg, rgba(255,196,0,.14), rgba(255,255,255,.03)); align-items: center; text-align: center; }
.paywith-btn:active { transform: scale(.97); }
.pw-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pw-sub { font-size: 10.5px; opacity: .7; line-height: 1.2; }
.paywith-btn.exch .pw-sub { display: none; }
.paywith-amount { margin-top: 10px; display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 8px 10px; border-radius: 12px; background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.3); }
/* Pay-with dropdowns */
.paywith-dd { margin-top: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(122,92,255,.12), rgba(0,198,255,.05)); overflow: hidden; }
.paywith-dd + .paywith-dd { background: linear-gradient(160deg, rgba(255,196,0,.1), rgba(255,255,255,.02)); }
.paywith-dd > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 14.5px; user-select: none; }
.paywith-dd > summary::-webkit-details-marker { display: none; }
.paywith-dd .dd-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 16px; }
.paywith-dd .dd-t { flex: 1; }
.paywith-dd .dd-c { font-size: 11px; font-weight: 600; opacity: .7; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.paywith-dd .dd-chev { transition: transform .2s ease; opacity: .8; }
.paywith-dd[open] .dd-chev { transform: rotate(180deg); }
.paywith-dd[open] > summary { border-bottom: 1px solid rgba(255,255,255,.08); }
.paywith-dd > .paywith-grid, .paywith-dd > .small-note { margin: 10px 12px; }
.paywith-dd > .paywith-grid:last-child { margin-bottom: 12px; }
.paywith-dd[open] > *:not(summary) { animation: ddIn .18s ease-out; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Upgrade: pay with Stars / USDT */
.card[data-upgrade] { flex-wrap: wrap; }
.up-pay-row { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.1); }
.up-pay-row[hidden], .up-pay-btn[hidden] { display: none !important; }
.up-pay-label { font-size: 12px; opacity: .7; margin-right: auto; }
.up-pay-btn { border: 0; border-radius: 12px; padding: 9px 12px; font-weight: 700; font-size: 13px; color: #fff; cursor: pointer; }
.up-pay-btn.stars { background: linear-gradient(135deg, #ffb800, #ff7a00); color: #1b1200; }
.up-pay-btn.usdt { background: linear-gradient(135deg, #26a17b, #1abc9c); }
.up-pay-btn:disabled { opacity: .55; }
.task-icon { margin-right: 6px; }
.task-desc { font-size: 12px; opacity: .72; margin: 2px 0 3px; line-height: 1.3; }
.task-honor { display: inline-block; margin-top: 4px; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255,184,0,.12); color: #ffd36b; border: 1px solid rgba(255,184,0,.3); }
.task-progress { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); margin-top: 6px; overflow: hidden; width: 100%; max-width: 180px; }
.task-progress-fill { height: 100%; background: linear-gradient(90deg,#2ecc71,#00c6ff); border-radius: 6px; min-width: 4px; }
.task-progress-lbl { font-size: 11px; opacity: .75; margin-top: 3px; }
.primary-btn.compact.task-again { font-size: 11px; white-space: normal; line-height: 1.2; max-width: 120px; }
/* Wallet page */
.wp-head { display: flex; align-items: center; gap: 10px; }
.wp-head .section-title { margin: 0; }
.wp-bal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.wp-bal { border-radius: 16px; padding: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 2px; }
.wp-bal span { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.wp-bal strong { font-size: 20px; }
.wp-bal small { font-size: 11px; opacity: .65; }
.wp-bal.gmo { background: linear-gradient(135deg, rgba(122,92,255,.25), rgba(0,198,255,.12)); }
.wp-bal.usdt { background: linear-gradient(135deg, rgba(38,161,123,.25), rgba(38,161,123,.08)); }
.wp-bal.stars { background: linear-gradient(135deg, rgba(255,193,7,.22), rgba(255,193,7,.06)); }
.wp-bal.locked { background: linear-gradient(135deg, rgba(255,92,120,.18), rgba(255,92,120,.05)); }
.wp-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.wp-actions .primary-btn { padding: 10px 4px; font-size: 13px; }
.wp-actions .primary-btn.alt { background: linear-gradient(135deg, #ff8a3d, #ff4f7b); }
.wp-actions .primary-btn.alt2 { background: linear-gradient(135deg, #2ecc71, #00b4d8); }
.wp-wallet .token-wallet-addr { display: block; word-break: break-all; margin: 6px 0 8px; }
.wp-wallet em { font-style: normal; opacity: .7; }
.wp-wallet-btns { display: flex; gap: 8px; }
.wp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.wp-row small { display: block; opacity: .6; font-size: 11px; }
.wp-history { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wp-dd summary { display: flex; justify-content: space-between; align-items: center; }
.wallet-page-btn { width: 100%; }
.quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wp-head > .ghost-btn { width: auto !important; flex: 0 0 auto; padding: 8px 12px; } .wp-head .section-title { flex: 1; }
#upgradeCards .card[data-upgrade] { display: grid; grid-template-columns: 52px minmax(0,1fr) max-content; align-items: center; gap: 12px; }
#upgradeCards .card[data-upgrade] .up-pay-row { grid-column: 1 / -1; }
.up-pay-row .up-pay-btn { flex: 1; }
#upgradeCards .card[data-upgrade] .up-pay-row { min-width: 0; } #upgradeCards .card[data-upgrade] .up-pay-row .up-pay-btn { min-width: 0; }
.pay-card { margin-top: 12px; }
.pay-card-title { margin: 0 0 6px; font-size: 1rem; }
.conv-preview { font-weight: 700; color: #6ee7a8; min-height: 1.2em; margin: 6px 0; }
.uw-st.pending { color: #ffd36b; } .uw-st.paid { color: #6ee7a8; } .uw-st.rejected { color: #ff7b8f; }
.buy-btn.maxed { background: linear-gradient(135deg, #ffd166, #f4a261); color: #2b1a00; opacity: 1; }
/* ===== Graphical Play page ===== */
.view[data-view="play"] { position: relative; isolation: isolate; }
.play-fx { position: absolute; inset: 0 0 auto 0; width: 100%; z-index: -1; pointer-events: none; }
.home-hero { background: linear-gradient(150deg, rgba(124,92,255,.32), rgba(0,198,255,.14) 55%, rgba(18,22,40,.7)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 24px 50px -24px rgba(124,92,255,.7), 0 0 40px -10px rgba(0,198,255,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.home-hero::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(124,92,255,.9), rgba(0,198,255,.6), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
#heroPoints { text-shadow: none; filter: drop-shadow(0 0 14px rgba(0,198,255,.45)); }
.hero-stats { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; }
.ring-wrap { display: flex; align-items: center; gap: 6px; }
.ring-wrap div { display: flex; flex-direction: column; line-height: 1.1; }
.ring-wrap b { font-size: 13px; } .ring-wrap small, .spark-wrap small { font-size: 10px; opacity: .7; }
.ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5; }
.ring-fg { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring-fg.energy { stroke: #2ee59d; filter: drop-shadow(0 0 4px rgba(46,229,157,.6)); }
.ring-fg.taps { stroke: #ffb547; filter: drop-shadow(0 0 4px rgba(255,181,71,.6)); }
.spark-wrap { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.spark { width: 100%; height: 34px; }
/* 3D coin */
.tap-btn { --sx: 50%; --sy: 30%; }
.tap-core { transition: transform .12s ease-out; transform-style: preserve-3d; will-change: transform; }
.tap-shine { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; z-index: 3; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--sx) var(--sy), rgba(255,255,255,.35), rgba(255,255,255,0) 45%); }
.tap-btn::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter: blur(4px); z-index: -1; }
/* quick action icons */
.qa-card { position: relative; overflow: hidden; }
.qa-card .qa-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; font-size: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 16px -8px rgba(0,0,0,.6); }
.qa-card.g-tasks .qa-ico { background: linear-gradient(135deg, #2ee59d, #0ea5a4); }
.qa-card.g-vip .qa-ico { background: linear-gradient(135deg, #ffd166, #f59e0b); }
.qa-card.g-ad .qa-ico { background: linear-gradient(135deg, #ff5c8a, #c026d3); }
.qa-card.g-dep .qa-ico { background: linear-gradient(135deg, #34d399, #059669); }
.qa-card.g-wal .qa-ico { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.qa-card.g-wd .qa-ico { background: linear-gradient(135deg, #fb923c, #ef4444); }
.qa-card.g-tr .qa-ico { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.qa-card:active { transform: translateY(1px) scale(.98); }
@media (prefers-reduced-motion: reduce) { .play-fx { display: none; } .tap-core, .ring-fg { transition: none; } }