:root {
  color-scheme: dark;
  --bg: #0b1118;
  --panel: #121b25;
  --panel-2: #172331;
  --line: #243345;
  --text: #f4f7fb;
  --muted: #8fa1b5;
  --accent: #f2c14e;
  --accent-2: #f8d978;
  --good: #65d6a4;
  --danger: #ff7e87;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.16);
  --shadow-soft: 0 5px 18px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

body { display: flex; justify-content: center; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
.app-shell { width: 100%; max-width: 560px; min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) 16px calc(88px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 24; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px; padding: 12px 18px 14px; background: linear-gradient(180deg, rgba(11,17,24,.98) 72%, rgba(11,17,24,.90)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.brand-wrap { display: flex; align-items: center; gap: 11px; }
.logo { width: 42px; height: 42px; }
.brand { font-weight: 800; letter-spacing: .2px; font-size: 18px; }
.sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.icon-btn { width: 42px; height: 42px; transition: transform .16s ease, border-color .16s ease, background .16s ease; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 21px; }

.screen { display: none; animation: fade .18s ease; padding-bottom: 4px; }
.screen.active { display: block; }
@keyframes fade { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

.hero-card { border: 1px solid #3b3624; background: linear-gradient(145deg, #1a1f20, #191b15); border-radius: 24px; padding: 22px; overflow: hidden; position: relative; }
.hero-card::after { content: "#"; position: absolute; right: -5px; bottom: -40px; font-size: 150px; font-weight: 900; color: rgba(242,193,78,.06); transform: rotate(-8deg); pointer-events: none; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: 1.6px; font-weight: 700; }
.balance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.balance { font-size: clamp(34px, 10vw, 48px); font-weight: 850; letter-spacing: -1.7px; }
.balance span:last-child { font-size: 15px; color: var(--accent-2); letter-spacing: 0; }
.plan-pill { border: 1px solid rgba(242,193,78,.35); color: var(--accent-2); background: rgba(242,193,78,.08); border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 800; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.hero-meta strong { color: var(--text); }

.section-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 2px 12px; }
.section-head h2 { margin: 0; font-size: 17px; }
.text-btn { background: transparent; border: 0; color: var(--accent-2); padding: 8px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-card { min-width: 0; box-shadow: var(--shadow-soft); transition: transform .15s ease, border-color .15s ease, background .15s ease; min-height: 112px; text-align: left; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.quick-card:active { transform: scale(.985); }
.quick-icon { font-size: 25px; margin-bottom: 5px; }
.quick-card strong { font-size: 14px; }
.quick-card small { color: var(--muted); font-size: 12px; }

.status-card, .list-card, .wallet-card, .profile-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.status-card { padding: 16px; }
.status-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.status-line.muted { color: var(--muted); font-size: 11px; margin-top: 8px; }
.progress { height: 8px; background: #1b2937; border-radius: 999px; overflow: hidden; margin-top: 12px; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .25s ease; }

.notice { margin-top: 14px; border: 1px solid #27394b; background: #101a24; border-radius: 16px; padding: 14px; display: grid; gap: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.notice strong { color: var(--text); }
.notice.compact { margin-top: 12px; }
.page-title { margin: 8px 2px 18px; }
.page-title h1 { margin: 0; font-size: 28px; letter-spacing: -.6px; }
.page-title p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.list-card { overflow: hidden; }
.list-row { width: 100%; transition: background .14s ease, color .14s ease; min-height: 58px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.list-row:last-child { border-bottom: 0; }
.list-row > span:last-child { color: var(--muted); font-size: 12px; text-align: right; }
.task-stack { display: grid; gap: 10px; }
.task-card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.task-card > div:first-child { min-width: 0; }
.task-card strong { display: block; font-size: 14px; }
.task-card small { display: block; color: var(--muted); margin-top: 5px; font-size: 11px; line-height: 1.35; }
.task-card > div:last-child { white-space: nowrap; color: var(--accent-2); font-size: 12px; }

.wallet-card { padding: 24px 18px; text-align: center; }
.wallet-icon { font-size: 38px; }
.wallet-card h2 { margin: 10px 0 5px; }
.wallet-card p { color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 380px; margin: 0 auto 18px; }
.primary-btn, .secondary-btn { min-height: 48px; transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease; border-radius: 14px; padding: 0 16px; font-weight: 750; }
.primary-btn { border: 0; background: var(--accent); color: #231b06; }
.secondary-btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.full { width: 100%; margin-top: 12px; }
.small-gap { margin-top: 12px; }
.info-row { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border-bottom: 1px solid var(--line); font-size: 13px; }
.info-row:last-child { border-bottom: 0; }
.info-row span { color: var(--muted); }

.profile-card { display: flex; align-items: center; gap: 14px; padding: 18px; }
.avatar { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--accent); color: #231b06; font-size: 24px; font-weight: 900; }
.profile-card h2 { margin: 0; font-size: 17px; }
.profile-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.bottom-nav { position: fixed; box-shadow: 0 -10px 28px rgba(0,0,0,.16); left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: rgba(11,17,24,.96); backdrop-filter: blur(14px); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); z-index: 30; }
.nav-item { position: relative; min-width: 0; transition: color .14s ease, background .14s ease, transform .14s ease; min-height: 52px; border: 0; background: transparent; color: var(--muted); border-radius: 13px; display: grid; place-items: center; align-content: center; gap: 3px; }
.nav-item span { font-size: 19px; }
.nav-item small { font-size: 10px; }
.nav-item.active { color: var(--accent-2); background: rgba(242,193,78,.07); }
.nav-item.active::before { content: ""; position: absolute; top: 4px; width: 18px; height: 2px; border-radius: 999px; background: var(--accent); }

.toast { position: fixed; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); width: min(calc(100% - 32px), 500px); background: #202c39; color: var(--text); border: 1px solid #34485d; border-radius: 14px; padding: 12px 14px; font-size: 12px; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 50; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.sheet { position: fixed; inset: 0; display: none; z-index: 60; }
.sheet.open { display: block; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.sheet-panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); background: #101923; border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); }
.sheet-handle { width: 42px; height: 4px; background: #3a4755; border-radius: 999px; margin: 2px auto 15px; }
.sheet-panel h2 { margin: 0; }
.sheet-panel > p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 14px 0; }
.plan-option { min-height: 92px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: var(--text); padding: 12px; text-align: left; }
.plan-option.active { border-color: rgba(242,193,78,.65); background: rgba(242,193,78,.06); }
.plan-option strong, .plan-option small { display: block; }
.plan-option small { color: var(--muted); margin-top: 4px; font-size: 10px; }

@media (max-width: 350px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .quick-grid { gap: 8px; }
  .quick-card { padding: 13px; }
  .balance { font-size: 31px; }
}

.connection-status { margin-top: 4px; font-size: 10px; color: var(--muted); }
.connection-status.live { color: var(--good); }
.connection-status.error { color: var(--danger); }
.task-section-label { margin: 16px 2px 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.task-status { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800; }
.task-status.completed { color: var(--good); }
.task-status.started { color: var(--accent-2); }
.task-status.available { color: var(--muted); }
.loading-card { opacity: .75; }

/* V1.3 Lucky Spin feedback */
@keyframes hashcoin-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.quick-card.spinning .quick-icon { display: inline-block; animation: hashcoin-spin .7s linear infinite; }
[data-demo-action="spin"].spinning { opacity: .78; }
@media (prefers-reduced-motion: reduce) { .quick-card.spinning .quick-icon { animation: none; } }

/* V1.4 Telegram task actions */
.task-card { flex-wrap: wrap; }
.task-card-main { flex: 1 1 180px; min-width: 0; }
.task-reward { white-space: nowrap; color: var(--accent-2); font-size: 12px; font-weight: 800; }
.task-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 2px; }
.task-action { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.task-action.secondary { background: transparent; color: var(--text); }
.task-action.primary { background: var(--accent); color: #111; border-color: transparent; }
.task-action:disabled { opacity: .48; cursor: default; }
@media (max-width: 360px) {
  .task-actions { grid-template-columns: 1fr; }
}

/* V1.5 Smart Task live actions */
.task-instructions { margin-top: 7px !important; color: #9fb1c5 !important; }
.task-action-wide { grid-column: 1 / -1; }

/* V1.6 Profile, Wallet and Membership polish */
.wallet-status-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .35px; }
.wallet-status-badge.good { color: var(--good); border-color: rgba(66, 201, 139, .28); background: rgba(66, 201, 139, .07); }
.wallet-status-badge.warn { color: var(--accent-2); border-color: rgba(242, 193, 78, .3); background: rgba(242, 193, 78, .07); }
.security-note { border-color: rgba(242,193,78,.2); }

.profile-card-rich { position: relative; align-items: center; }
.profile-main { min-width: 0; flex: 1; }
.profile-main p { overflow-wrap: anywhere; }
.copy-id-btn { min-height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 0 11px; font-size: 11px; font-weight: 800; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.mini-stat { min-width: 0; border: 1px solid var(--line); background: var(--panel); border-radius: 15px; padding: 13px; display: grid; gap: 5px; }
.mini-stat span { color: var(--muted); font-size: 10px; }
.mini-stat strong { font-size: 14px; overflow-wrap: anywhere; }
.membership-card { border: 1px solid rgba(242,193,78,.22); background: linear-gradient(145deg, rgba(242,193,78,.055), var(--panel)); border-radius: var(--radius); padding: 16px; }
.membership-card h3 { margin: 5px 0; font-size: 17px; }
.membership-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.membership-kicker { color: var(--accent-2); font-size: 10px; letter-spacing: 1.4px; font-weight: 900; }
.pending-line { margin-top: 10px !important; color: var(--accent-2) !important; font-weight: 750; }
.upgrade-banner { border: 1px solid rgba(242,193,78,.25); background: rgba(242,193,78,.07); color: var(--accent-2); border-radius: 13px; padding: 11px 12px; font-size: 11px; line-height: 1.45; margin: 10px 0 0; }
.sheet-note { margin: 0 0 12px; }
.plan-grid { grid-template-columns: 1fr; }
.plan-option { min-height: 0; display: grid; gap: 8px; }
.plan-option-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-option-badge { flex: 0 0 auto; border-radius: 999px; padding: 4px 8px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 850; }
.plan-option-badge.current { color: var(--good); border-color: rgba(66,201,139,.32); }
.plan-option-badge.pending { color: var(--accent-2); border-color: rgba(242,193,78,.32); }
.plan-benefits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.plan-benefit { border: 1px solid var(--line); border-radius: 11px; padding: 8px; background: rgba(255,255,255,.015); }
.plan-benefit b, .plan-benefit small { display: block; }
.plan-benefit b { font-size: 12px; }
.plan-benefit small { font-size: 9px; color: var(--muted); margin-top: 2px; }
.plan-request-btn { min-height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-weight: 800; font-size: 11px; }
.plan-request-btn.primary { background: var(--accent); color: #231b06; border-color: transparent; }
.plan-request-btn:disabled { opacity: .5; }

@media (max-width: 360px) {
  .profile-card-rich { align-items: flex-start; }
  .copy-id-btn { position: absolute; right: 12px; top: 12px; }
  .profile-main { padding-right: 68px; }
  .plan-benefits { grid-template-columns: 1fr; }
}


/* V1.7 Watching Ads */
.ad-open-btn { margin-top: 12px; }
.ad-hero-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18,29,40,.98), rgba(12,19,28,.98));
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
}
.ad-provider-line { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:14px; }
.ad-provider-line strong { color:var(--text); text-align:right; }
.ad-reward-big { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:20px 0 10px; }
.ad-reward-big span { color:var(--muted); font-size:13px; }
.ad-reward-big strong { font-size:24px; line-height:1; }
.ad-hero-card p { margin:0; color:var(--muted); line-height:1.55; font-size:13px; }
.ad-stat-grid { margin-bottom:14px; }
.ad-actions { display:grid; gap:10px; margin-bottom:14px; }
.ad-actions button:disabled { opacity:.48; cursor:not-allowed; }

/* V1.8.1 Support + About — compact logo links */
.support-hero-card, .about-hero-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18,29,40,.98), rgba(12,19,28,.98));
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
}
.support-hero-card { text-align: center; }
.support-icon { font-size: 34px; margin-bottom: 8px; }
.support-hero-card h2, .about-hero-card h2 { margin: 4px 0 8px; font-size: 20px; }
.support-hero-card p, .about-hero-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 12px; }

.contact-icons, .social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px;
  margin: 4px 0 16px;
}
.icon-link {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 8px;
  display: grid;
  place-items: center;
  box-shadow: 0 7px 18px rgba(0,0,0,.14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-link img { width: 42px; height: 42px; display: block; }
.icon-link:active { transform: scale(.96); }
.icon-link.coming { opacity: .36; cursor: default; }
.icon-link.coming:active { transform: none; }

.about-logo-wrap {
  width: 62px; height: 62px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--panel-2); display: grid; place-items: center; margin-bottom: 14px;
}
.about-logo-wrap img { width: 42px; height: 42px; }
.about-points { display: grid; gap: 10px; margin-bottom: 16px; }
.about-point {
  display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start;
  border: 1px solid var(--line); background: var(--panel); border-radius: 15px; padding: 13px;
}
.about-point > span { font-size: 22px; }
.about-point b, .about-point small { display: block; }
.about-point small { color: var(--muted); line-height: 1.5; margin-top: 4px; }
@media (max-width: 350px) {
  .contact-icons, .social-icons { gap: 10px; }
  .icon-link { width: 54px; height: 54px; flex-basis: 54px; border-radius: 16px; padding: 7px; }
  .icon-link img { width: 40px; height: 40px; }
}


/* V1.9 Final UI & navigation polish */
.refresh-line {
  position: sticky;
  top: 68px;
  z-index: 23;
  height: 2px;
  margin: 0 -16px 8px;
  overflow: hidden;
  pointer-events: none;
}
.refresh-line span {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transform: translateX(-140%);
}
body.is-loading .refresh-line span {
  opacity: 1;
  animation: hashcoin-loading-line 1.05s ease-in-out infinite;
}
@keyframes hashcoin-loading-line {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(390%); }
}
.icon-btn.loading { animation: hashcoin-refresh .8s linear infinite; }
@keyframes hashcoin-refresh { to { transform: rotate(360deg); } }

.hero-card,
.wallet-card,
.profile-card,
.membership-card,
.ad-hero-card,
.support-hero-card,
.about-hero-card,
.task-card,
.mini-stat,
.notice,
.about-point { box-shadow: var(--shadow-soft); }

.list-row:active,
.quick-card:active,
.nav-item:active,
.primary-btn:active:not(:disabled),
.secondary-btn:active:not(:disabled),
.copy-id-btn:active:not(:disabled),
.task-action:active:not(:disabled),
.plan-request-btn:active:not(:disabled),
.icon-btn:active:not(:disabled) { transform: scale(.985); }

.primary-btn:disabled,
.secondary-btn:disabled,
.copy-id-btn:disabled,
.icon-btn:disabled { opacity: .5; }

.back-btn { margin-top: 14px; }
.page-title h1 { line-height: 1.12; }
.page-title p { line-height: 1.5; max-width: 44ch; }
.connection-status { min-height: 13px; }

@media (hover: hover) and (pointer: fine) {
  .quick-card:hover,
  .list-row:hover,
  .secondary-btn:hover:not(:disabled),
  .copy-id-btn:hover:not(:disabled),
  .task-action.secondary:hover:not(:disabled),
  .icon-btn:hover:not(:disabled) { border-color: #34495f; background-color: #172330; }
  .primary-btn:hover:not(:disabled),
  .task-action.primary:hover:not(:disabled),
  .plan-request-btn.primary:hover:not(:disabled) { filter: brightness(1.04); }
  .icon-link:hover:not(:disabled) { transform: translateY(-1px); border-color: #3c5065; }
}

@media (max-width: 390px) {
  .topbar { margin-left: -12px; margin-right: -12px; padding-left: 14px; padding-right: 14px; }
  .refresh-line { margin-left: -12px; margin-right: -12px; }
  .brand { font-size: 17px; }
  .logo { width: 40px; height: 40px; }
  .hero-card { padding: 19px; }
  .page-title h1 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* V2.0 Animated Lucky Wheel */
.spin-summary-card {
  border: 1px solid rgba(242,193,78,.22);
  background: linear-gradient(145deg, rgba(242,193,78,.055), var(--panel));
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}
.spin-summary-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.spin-summary-head h2 { margin:4px 0 0; font-size:17px; }
.spin-balance-pill {
  flex:0 0 auto;
  border:1px solid rgba(242,193,78,.28);
  background:rgba(242,193,78,.075);
  border-radius:15px;
  padding:9px 11px;
  text-align:right;
}
.spin-balance-pill span, .spin-balance-pill strong { display:block; }
.spin-balance-pill span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.spin-balance-pill strong { margin-top:3px; color:var(--accent-2); font-size:13px; }
.spin-stat-grid { margin-top:12px; }

.spin-wheel-card {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 28%, rgba(242,193,78,.08), transparent 34%),
    linear-gradient(160deg, #111b26 0%, #0e1720 100%);
  border-radius:24px;
  padding:20px 14px 18px;
  box-shadow:var(--shadow);
  text-align:center;
}
.spin-stage {
  --spin-size: min(78vw, 320px);
  width:var(--spin-size);
  height:var(--spin-size);
  position:relative;
  margin:10px auto 18px;
  display:grid;
  place-items:center;
}
.spin-stage::before {
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,193,78,.10), rgba(242,193,78,0) 69%);
  filter:blur(6px);
  pointer-events:none;
}
.spin-wheel {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  border:8px solid #d9a83d;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.035),
    0 14px 36px rgba(0,0,0,.32),
    inset 0 0 0 2px rgba(255,255,255,.12);
  transform:rotate(0deg);
  will-change:transform;
}
.spin-wheel::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    repeating-conic-gradient(from -18deg, rgba(255,255,255,.22) 0deg 1deg, transparent 1deg 36deg),
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(circle, transparent 0 63%, rgba(0,0,0,.16) 64% 100%);
  pointer-events:none;
  z-index:1;
}
.spin-wheel.is-spinning { filter:saturate(1.08) brightness(1.04); }
.spin-wheel-labels { position:absolute; inset:0; z-index:2; pointer-events:none; }
.spin-wheel-label {
  position:absolute;
  left:50%;
  top:50%;
  width:54px;
  min-height:34px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.68);
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(var(--spin-size) * -.36))
    rotate(var(--counter-angle));
  transform-origin:center;
}
.spin-wheel-label b { display:block; font-size:13px; line-height:1; }
.spin-wheel-label small { display:block; margin-top:3px; font-size:7px; letter-spacing:.6px; font-weight:800; opacity:.92; }

.spin-hub {
  position:absolute;
  left:50%;
  top:50%;
  z-index:7;
  width:82px;
  height:82px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  align-content:center;
  border:6px solid #e7b94c;
  background:linear-gradient(145deg, #111a24, #080d13);
  box-shadow:0 7px 22px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.05);
}
.spin-hub img { width:42px; height:42px; display:block; }
.spin-hub span { margin-top:-2px; font-size:8px; font-weight:900; letter-spacing:1.5px; color:var(--accent-2); }
.spin-pointer {
  position:absolute;
  z-index:9;
  top:-9px;
  left:50%;
  width:44px;
  height:50px;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.35));
}
.spin-pointer::before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:34px;
  height:31px;
  transform:translateX(-50%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(180deg, #ffe39a 0%, #f2c14e 56%, #bc7f1f 100%);
}
.spin-pointer span {
  position:absolute;
  left:50%;
  top:5px;
  width:10px;
  height:10px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#172331;
  box-shadow:0 0 0 2px rgba(255,255,255,.16);
}

.spin-main-btn {
  width:min(260px, 82%);
  min-height:54px;
  border:0;
  border-radius:17px;
  background:linear-gradient(135deg, #f7d56e, #e8ad38);
  color:#201604;
  font-weight:950;
  letter-spacing:1.2px;
  box-shadow:0 10px 24px rgba(242,193,78,.18);
  transition:transform .14s ease, filter .14s ease, opacity .14s ease;
}
.spin-main-btn:active:not(:disabled) { transform:scale(.985); }
.spin-main-btn:disabled { opacity:.58; }

.spin-result {
  margin:14px auto 0;
  width:min(310px, 100%);
  border:1px solid rgba(101,214,164,.26);
  background:rgba(101,214,164,.07);
  border-radius:16px;
  padding:12px 14px;
  opacity:0;
  transform:translateY(6px) scale(.985);
}
.spin-result.show { animation:spin-result-pop .38s cubic-bezier(.2,.8,.2,1) forwards; }
.spin-result span, .spin-result strong, .spin-result small { display:block; }
.spin-result > span { color:var(--good); font-size:9px; font-weight:900; letter-spacing:1.4px; }
.spin-result strong { margin-top:4px; color:var(--text); font-size:24px; }
.spin-result small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
@keyframes spin-result-pop {
  0% { opacity:0; transform:translateY(9px) scale(.96); }
  65% { opacity:1; transform:translateY(-2px) scale(1.015); }
  100% { opacity:1; transform:none; }
}

.spin-prize-chips { display:flex; flex-wrap:wrap; gap:8px; }
.spin-prize-chips span {
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--accent-2);
  border-radius:999px;
  padding:8px 10px;
  font-size:10px;
  font-weight:850;
}

.spin-confetti {
  position:absolute;
  left:50%;
  top:50%;
  z-index:10;
  width:1px;
  height:1px;
  pointer-events:none;
}
.spin-confetti i {
  position:absolute;
  left:0;
  top:0;
  width:7px;
  height:11px;
  border-radius:2px;
  background:var(--accent);
  opacity:0;
  transform:translate(-50%,-50%);
}
.spin-confetti i:nth-child(3n+2) { width:6px; height:6px; border-radius:50%; background:var(--good); }
.spin-confetti i:nth-child(3n+3) { width:8px; height:5px; background:var(--accent-2); }
.spin-confetti.burst i {
  animation:spin-confetti-burst 1.05s cubic-bezier(.13,.78,.25,1) var(--delay) forwards;
}
@keyframes spin-confetti-burst {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(0deg); }
  12% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9) rotate(var(--rot)); }
}

@media (max-width: 380px) {
  .spin-stage { --spin-size:min(82vw, 300px); }
  .spin-wheel { border-width:7px; }
  .spin-wheel-label { width:48px; }
  .spin-wheel-label b { font-size:11px; }
  .spin-hub { width:72px; height:72px; border-width:5px; }
  .spin-hub img { width:36px; height:36px; }
  .spin-summary-head { align-items:flex-start; }
  .spin-balance-pill { padding:8px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .spin-result.show { animation:none; opacity:1; transform:none; }
  .spin-confetti { display:none; }
}


/* V2.1 Monetization Foundation */
.ad-provider-name {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .25px;
}
.shop-hero-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(242,193,78,.25);
  background: linear-gradient(145deg, rgba(242,193,78,.065), var(--panel));
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.shop-hero-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: rgba(242,193,78,.11);
  border: 1px solid rgba(242,193,78,.22);
}
.shop-hero-card h2 { margin: 3px 0 4px; font-size: 16px; }
.shop-hero-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.shop-status-pill {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .7px;
}
.shop-status-pill.live {
  color: var(--good);
  border-color: rgba(101,214,164,.32);
  background: rgba(101,214,164,.07);
}
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-product {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.shop-product.ready { border-color: rgba(242,193,78,.32); }
.shop-product-top { min-height: 20px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.shop-kind { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .85px; }
.shop-product-badge { border-radius: 999px; padding: 4px 6px; font-size: 7px; font-weight: 900; letter-spacing: .55px; }
.shop-product-badge.current { color: var(--good); background: rgba(101,214,164,.08); border: 1px solid rgba(101,214,164,.22); }
.shop-product h3 { margin: 9px 0 5px; font-size: 14px; }
.shop-product p { margin: 0; min-height: 48px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.shop-price { margin-top: 12px; color: var(--accent-2); font-size: 18px; font-weight: 900; }
.shop-buy-btn { min-height: 42px; font-size: 11px; }
.shop-history { overflow: hidden; }
.shop-history-row { min-height: 60px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.shop-history-row:last-child { border-bottom:0; }
.shop-history-row strong, .shop-history-row small { display:block; }
.shop-history-row strong { font-size:12px; }
.shop-history-row small { margin-top:4px; color:var(--muted); font-size:9px; }
.shop-history-row > b { flex:0 0 auto; color:var(--accent-2); font-size:11px; }
@media (max-width: 390px) {
  .shop-hero-card { grid-template-columns: auto 1fr; }
  .shop-status-pill { grid-column: 1 / -1; justify-self: start; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-product p { min-height: 0; }
}

/* V2.3 Daily Offers + Referral Growth */
.offer-quick-card { border-color: rgba(255,132,86,.22); background: linear-gradient(145deg, rgba(255,132,86,.055), var(--panel)); }
.referral-quick-card { border-color: rgba(95,170,255,.22); background: linear-gradient(145deg, rgba(95,170,255,.05), var(--panel)); }
.offer-hero-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255,132,86,.25);
  background: linear-gradient(145deg, rgba(255,132,86,.08), var(--panel));
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.offer-hero-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: rgba(255,132,86,.11);
  border: 1px solid rgba(255,132,86,.22);
}
.offer-hero-card h2 { margin: 3px 0 4px; font-size: 16px; }
.offer-hero-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.offer-reset-pill {
  border: 1px solid rgba(255,132,86,.25);
  background: rgba(255,132,86,.07);
  color: #ffb18d;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.offer-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.offer-card.hot { border-color: rgba(255,132,86,.32); }
.offer-card .offer-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 7px;
  margin-bottom: 9px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;
  color: #ffb18d;
  background: rgba(255,132,86,.08);
  border: 1px solid rgba(255,132,86,.2);
}
.offer-card h3 { margin: 0 0 6px; font-size: 14px; }
.offer-card p { margin: 0; min-height: 45px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.offer-price { margin-top: 12px; color: var(--accent-2); font-weight: 900; font-size: 18px; }
.offer-card small { display:block; margin-top:4px; color:var(--muted); font-size:9px; }

.referral-hero-card {
  text-align: center;
  border: 1px solid rgba(95,170,255,.24);
  background: linear-gradient(145deg, rgba(95,170,255,.07), var(--panel));
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: var(--shadow-soft);
}
.referral-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 20px;
  display:grid;
  place-items:center;
  font-size:31px;
  background:rgba(95,170,255,.09);
  border:1px solid rgba(95,170,255,.2);
}
.referral-hero-card h2 { margin: 7px 0 5px; font-size: 18px; }
.referral-hero-card p { margin:0; color:var(--muted); font-size:11px; }
.referral-stats { margin-top: 12px; }
.referral-link-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.referral-link-card > span { display:block; color:var(--muted); font-size:10px; margin-bottom:8px; }
.referral-link-card code {
  display:block;
  overflow-wrap:anywhere;
  border:1px solid var(--line);
  background:var(--panel-2);
  border-radius:12px;
  padding:11px;
  color:var(--text);
  font-size:10px;
  line-height:1.45;
}
.referral-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }

@media (max-width: 390px) {
  .offer-hero-card { grid-template-columns: auto 1fr; }
  .offer-reset-pill { grid-column: 1 / -1; justify-self: start; }
  .offer-grid { grid-template-columns: 1fr; }
  .offer-card p { min-height: 0; }
  .referral-actions { grid-template-columns:1fr; }
}

/* ===== V2.4 passive earning + dual balance + spin bank ===== */
.balance-stack { min-width: 0; }
.cash-mini-balance { margin-top: 5px; display:flex; align-items:center; gap:6px; color:#d8e7ef; font-size:12px; }
.cash-mini-balance strong { color:#9fe5ff; font-size:13px; }
.cash-mini-balance small { color:var(--muted); font-size:9px; letter-spacing:.2px; }
.passive-mini-bar { margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.passive-mini-bar span { font-size:11px; color:#dfe8e8; }
.passive-mini-bar strong { color:#f2c14e; }
.passive-mini-bar small { color:var(--muted); font-size:10px; text-align:right; }

.spin-bank-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; }
.spin-bank-strip > div { border:1px solid #2c3947; background:linear-gradient(160deg,#151d26,#111821); border-radius:15px; padding:11px; display:grid; gap:3px; }
.spin-bank-strip span { font-size:10px; color:#dfe7ee; }
.spin-bank-strip strong { font-size:16px; color:#f5d575; }
.spin-bank-strip > div:nth-child(2) strong { color:#95e0ff; }
.spin-bank-strip small { font-size:9px; color:var(--muted); }
.earn-passive-row { background:linear-gradient(90deg,rgba(242,193,78,.06),transparent); }
.earn-passive-row strong { color:#f2c14e; }

.spin-balance-stack { display:flex; gap:7px; align-items:stretch; }
.spin-balance-pill.cash { border-color:rgba(120,212,255,.25); background:rgba(80,170,215,.08); }
.spin-balance-pill.cash strong { color:#95e0ff; }
.spin-mode-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:13px 0 0; }
.spin-mode-btn { appearance:none; border:1px solid #2b3947; background:#111821; color:#dfe7ee; border-radius:15px; padding:10px 9px; display:grid; gap:3px; text-align:left; cursor:pointer; min-width:0; }
.spin-mode-btn span { font-size:10px; font-weight:800; }
.spin-mode-btn strong { font-size:15px; color:#f2c14e; }
.spin-mode-btn small { font-size:8px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spin-mode-btn.active { border-color:#a68035; box-shadow:0 0 0 1px rgba(242,193,78,.15) inset; background:linear-gradient(150deg,#1b211d,#151a18); }
.spin-mode-btn#specialSpinModeBtn.active { border-color:#3c829d; box-shadow:0 0 0 1px rgba(120,212,255,.15) inset; background:linear-gradient(150deg,#16242b,#121b23); }
.spin-mode-btn#specialSpinModeBtn strong { color:#95e0ff; }
.spin-rule-line { margin-top:10px; color:var(--muted); font-size:10px; line-height:1.5; padding:0 2px; }
.special-note { border-color:rgba(120,212,255,.18) !important; background:linear-gradient(145deg,rgba(26,53,66,.45),rgba(17,24,33,.8)) !important; }
.special-note strong { color:#95e0ff !important; }

@media (max-width:380px) {
  .spin-balance-stack { flex-direction:column; }
  .passive-mini-bar { align-items:flex-start; flex-direction:column; gap:4px; }
  .passive-mini-bar small { text-align:left; }
}

/* =========================
   V2.5 • Activity + Lucky Winner
   ========================= */
.today-duo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.today-mini-card{appearance:none;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.025),var(--panel));border-radius:18px;padding:14px;text-align:left;color:inherit;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;box-shadow:var(--shadow-soft);min-height:94px;position:relative;overflow:hidden}
.today-mini-card::after{content:"";position:absolute;inset:auto -28px -34px auto;width:82px;height:82px;border-radius:50%;background:rgba(255,255,255,.025)}
.today-mini-card.lucky{background:linear-gradient(145deg,rgba(255,199,74,.08),var(--panel));border-color:rgba(255,199,74,.22)}
.today-mini-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.055);font-size:20px}
.today-mini-card strong{display:block;font-size:13px;margin-bottom:4px}.today-mini-card small{color:var(--muted);font-size:10px}.today-mini-meta{grid-column:1/-1;color:var(--muted);font-size:10px;padding-top:5px;border-top:1px solid rgba(255,255,255,.05)}
.ticket-stat{border-color:rgba(255,199,74,.18)!important;background:rgba(255,199,74,.035)!important}.ticket-bonus-note{margin-top:10px;border:1px dashed rgba(255,199,74,.3);background:rgba(255,199,74,.055);color:var(--muted);padding:10px 12px;border-radius:13px;font-size:10px;line-height:1.5}
.referral-status-list{display:grid;gap:9px}.referral-status-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 13px;border:1px solid var(--line);background:var(--panel);border-radius:15px}.referral-status-item strong{font-size:12px}.referral-status-item small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.referral-status-badge{font-size:9px;font-weight:800;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.06);white-space:nowrap}.referral-status-badge.good{background:rgba(84,211,138,.1);color:#8ce7af}
.activity-hero-card,.lucky-winner-hero,.achievement-summary-card,.lucky-entry-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.025),var(--panel));border-radius:22px;padding:18px;box-shadow:var(--shadow-soft)}
.activity-hero-card{text-align:center}.activity-day-ring{width:112px;height:112px;border-radius:50%;margin:14px auto;display:grid;place-content:center;border:1px solid rgba(255,199,74,.24);background:radial-gradient(circle,rgba(255,199,74,.12),rgba(255,199,74,.02) 60%,transparent 61%);box-shadow:inset 0 0 0 7px rgba(255,255,255,.018)}.activity-day-ring span{font-size:9px;color:var(--muted);letter-spacing:.16em}.activity-day-ring strong{font-size:34px;line-height:1}.activity-hero-card h2{font-size:18px;margin:4px 0 7px}.activity-hero-card p{font-size:11px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.activity-milestones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.activity-milestone{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:11px 6px;text-align:center}.activity-milestone strong{display:block;font-size:13px}.activity-milestone small{font-size:9px;color:var(--muted)}.activity-milestone.done{border-color:rgba(84,211,138,.25);background:rgba(84,211,138,.06)}
.achievement-summary-card{display:flex;gap:13px;align-items:center}.achievement-summary-card>span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,199,74,.08);font-size:24px}.achievement-summary-card strong{display:block}.achievement-summary-card small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.achievement-summary-card--stacked{align-items:flex-start}.achievement-category-list{display:grid;gap:12px;margin-top:12px}.achievement-category{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.02),var(--panel));border-radius:20px;padding:14px;box-shadow:var(--shadow-soft)}.achievement-category-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px}.achievement-category-head h3{margin:0;font-size:14px}.achievement-category-head p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.achievement-category-count{min-width:52px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,199,74,.22);background:rgba(255,199,74,.06);font-size:10px;font-weight:800;text-align:center}.achievement-tier-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.achievement-tier{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:16px;padding:11px 6px;display:grid;gap:4px;min-height:78px;align-content:center;text-align:center;color:inherit;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}.achievement-tier:active{transform:scale(.98)}.achievement-tier.unlocked{border-color:rgba(84,211,138,.34);background:linear-gradient(145deg,rgba(84,211,138,.09),rgba(255,255,255,.02));box-shadow:0 0 0 1px rgba(84,211,138,.06) inset}.achievement-tier.locked{border-color:var(--line)}.achievement-tier-label{font-size:13px;font-weight:900;letter-spacing:.01em}.achievement-tier-meta{font-size:9px;color:var(--muted);line-height:1.25}.achievement-tier.unlocked .achievement-tier-meta{color:#9ae6ba}.achievement-detail-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.02),var(--panel));border-radius:20px;padding:16px;display:grid;gap:10px;margin:10px 0 12px}.achievement-detail-chip{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.06);font-size:10px;font-weight:800}.achievement-detail-chip.good{background:rgba(84,211,138,.14);color:#98ebb8}.achievement-detail-chip.warn{background:rgba(255,199,74,.12);color:#ffd573}.achievement-detail-main strong{display:block;font-size:26px;line-height:1}.achievement-detail-main span{display:block;color:var(--muted);font-size:11px;margin-top:6px}.achievement-detail-note{font-size:12px;color:var(--text)}
.lucky-winner-hero{display:flex;justify-content:space-between;gap:14px;align-items:center;background:linear-gradient(145deg,rgba(255,199,74,.075),var(--panel))}.lucky-winner-hero h2{margin:5px 0;font-size:19px}.lucky-winner-hero p{margin:0;color:var(--muted);font-size:10px}.ticket-wallet{min-width:84px;text-align:center;border:1px solid rgba(255,199,74,.2);border-radius:16px;padding:11px;background:rgba(255,199,74,.05)}.ticket-wallet span{display:block;color:var(--muted);font-size:9px}.ticket-wallet strong{display:block;font-size:24px;margin-top:3px}.lucky-entry-card{margin-top:12px}.lucky-entry-card>div:first-child strong{font-size:13px}.lucky-entry-card>div:first-child small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.ticket-entry-controls{display:grid;grid-template-columns:72px 64px 1fr;gap:8px;margin-top:12px}.ticket-entry-controls input{width:100%;min-width:0;border:1px solid var(--line);background:rgba(255,255,255,.025);color:inherit;border-radius:13px;padding:0 10px;font-weight:800;text-align:center;outline:none}.ticket-entry-controls input:focus{border-color:rgba(255,199,74,.35)}
.lucky-prize-list,.winner-list{display:grid;gap:8px}.lucky-prize-row,.winner-row{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:11px 12px;display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center}.lucky-prize-rank,.winner-rank{font-weight:900;text-align:center}.lucky-prize-row strong,.winner-row strong{font-size:11px}.lucky-prize-row small,.winner-row small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.cash-badge{font-size:9px;font-weight:800;color:#9be8bd;background:rgba(84,211,138,.08);padding:5px 7px;border-radius:999px}.empty-state{padding:16px;text-align:center;color:var(--muted);font-size:10px;border:1px dashed var(--line);border-radius:14px}
@media(max-width:390px){.today-duo-grid{gap:8px}.today-mini-card{padding:12px}.activity-milestones{grid-template-columns:repeat(2,minmax(0,1fr))}.ticket-entry-controls{grid-template-columns:64px 58px 1fr}.lucky-winner-hero{align-items:flex-start}.ticket-wallet{min-width:74px}.achievement-tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* V2.5.1 profile priority actions */
.profile-priority-actions{margin-top:10px;margin-bottom:10px}
.profile-priority-actions .list-row{min-height:52px}

/* =========================
   V2.5.2 • UI Brightness Polish
   Same layout/logic — softer premium dark theme
   ========================= */
:root {
  --bg: #101821;
  --panel: #182433;
  --panel-2: #1e2c3c;
  --line: #30435a;
  --muted: #9eb1c5;
  --shadow: 0 10px 30px rgba(0,0,0,.14);
  --shadow-soft: 0 5px 18px rgba(0,0,0,.085);
}

html, body {
  background: linear-gradient(180deg, #101821 0%, #131d29 100%);
}

.topbar {
  background: linear-gradient(180deg, rgba(16,24,33,.985) 72%, rgba(16,24,33,.90));
}

.bottom-nav {
  background: rgba(16,24,33,.965);
}

.hero-card {
  border-color: #49432c;
  background: linear-gradient(145deg, #22292a, #20241d);
}

.progress { background: #26394c; }
.notice {
  border-color: #31485f;
  background: #162330;
}

.toast {
  background: #29394a;
  border-color: #40566d;
}

.sheet-panel { background: #172331; }
.sheet-handle { background: #4a5a6b; }

.ad-hero-card,
.support-hero-card,
.about-hero-card {
  background: linear-gradient(145deg, rgba(25,38,52,.98), rgba(18,29,40,.98));
}

.spin-wheel-card {
  background:
    radial-gradient(circle at 50% 28%, rgba(242,193,78,.09), transparent 34%),
    linear-gradient(160deg, #182533 0%, #131e29 100%);
}

.spin-bank-strip > div {
  border-color: #394b5e;
  background: linear-gradient(160deg, #1d2935, #18232e);
}

.spin-mode-btn {
  border-color: #394b5e;
  background: #18232e;
  color: #e7edf3;
}

.spin-mode-btn.active {
  background: linear-gradient(150deg, #252b24, #1d241e);
}

.spin-mode-btn#specialSpinModeBtn.active {
  background: linear-gradient(150deg, #1c3039, #172733);
}

.special-note {
  background: linear-gradient(145deg, rgba(32,65,79,.48), rgba(24,35,46,.90)) !important;
}

.ticket-entry-controls input {
  background: rgba(255,255,255,.04);
}

@media (hover: hover) and (pointer: fine) {
  .quick-card:hover,
  .list-row:hover,
  .secondary-btn:hover:not(:disabled),
  .copy-id-btn:hover:not(:disabled),
  .task-action.secondary:hover:not(:disabled),
  .icon-btn:hover:not(:disabled) {
    border-color: #415a73;
    background-color: #1d2b3a;
  }
}


/* =========================
   V2.5.3 • Announcements + Home Cleanup
   ========================= */
.home-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.home-feature-card{appearance:none;border:1px solid var(--line);background:linear-gradient(150deg,#1b2939,#162231);border-radius:17px;padding:13px;text-align:left;color:inherit;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;min-height:92px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.home-feature-card::after{content:"";position:absolute;right:-28px;bottom:-35px;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.025)}
.home-feature-card.announcement-feature{border-color:rgba(242,193,78,.28);background:linear-gradient(145deg,rgba(242,193,78,.09),#182433 58%,#162231)}
.home-feature-card.leaderboard-feature{border-color:rgba(113,189,255,.22);background:linear-gradient(145deg,rgba(84,160,225,.08),#182433 58%,#162231)}
.home-feature-icon,.hourglass-anim{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:21px;position:relative;z-index:1}
.home-feature-card strong{display:block;font-size:13px;margin-bottom:4px;position:relative;z-index:1}.home-feature-card small{display:block;color:#b6c6d7;font-size:9.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}.home-feature-meta{grid-column:1/-1;color:#91a6bb;font-size:9.5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.06);position:relative;z-index:1}
@keyframes hc-hourglass-turn{0%,28%{transform:rotate(0deg) scale(1)}42%{transform:rotate(180deg) scale(1.10)}70%{transform:rotate(180deg) scale(1)}86%,100%{transform:rotate(360deg) scale(1)}}
@keyframes hc-hourglass-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,205,91,0))}50%{filter:drop-shadow(0 0 8px rgba(255,205,91,.55))}}
.hourglass-anim,.leaderboard-hourglass{animation:hc-hourglass-turn 2.8s cubic-bezier(.55,.06,.34,.98) infinite,hc-hourglass-glow 1.4s ease-in-out infinite;transform-origin:center;will-change:transform,filter}
@media(prefers-reduced-motion:reduce){.hourglass-anim,.leaderboard-hourglass{animation:none}}

.important-announcement-banner{appearance:none;width:100%;margin:0 0 13px;border:1px solid rgba(255,199,74,.5);background:linear-gradient(135deg,#2a2415,#201c16 48%,#172335);border-radius:18px;padding:13px;color:#fff;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;text-align:left;box-shadow:0 9px 24px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,224,140,.05)}
.important-announcement-banner[hidden]{display:none}.important-announcement-banner.critical{border-color:rgba(255,95,95,.6);background:linear-gradient(135deg,#32191b,#241719 48%,#172335)}
.announcement-banner-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.075);font-size:22px}.announcement-banner-copy{min-width:0;display:grid;gap:3px}.announcement-banner-copy small{color:#ffd76d;font-weight:900;font-size:8px;letter-spacing:.12em}.important-announcement-banner.critical .announcement-banner-copy small{color:#ff8b8b}.announcement-banner-copy strong{font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.announcement-banner-copy span{font-size:9.5px;color:#d5dfeb;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.announcement-banner-arrow{font-size:24px;color:#ffd76d}.important-announcement-banner.critical .announcement-banner-arrow{color:#ff8b8b}

.announcement-list{display:grid;gap:12px}.announcement-card{border:1px solid #334b63;background:linear-gradient(150deg,#172333,#111a25);border-radius:19px;padding:15px;box-shadow:var(--shadow-soft)}.announcement-card.important{border-color:rgba(255,199,74,.42);background:linear-gradient(150deg,#282315,#172333 43%,#111a25)}.announcement-card.critical{border-color:rgba(255,93,93,.5);background:linear-gradient(150deg,#30191c,#172333 43%,#111a25)}.announcement-card-top{display:flex;gap:10px;align-items:center}.announcement-card-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:20px}.announcement-card-meta{min-width:0;flex:1;display:grid;gap:5px}.announcement-card-meta small{font-size:9px;color:#90a4b8}.announcement-chip-row{display:flex;gap:6px;flex-wrap:wrap}.announcement-chip{font-size:8px;font-weight:800;color:#bfd0e0;background:#213248;border:1px solid #334d69;border-radius:999px;padding:4px 7px}.announcement-chip.priority{color:#dfe8f2}.announcement-chip.priority.important{color:#ffe080;border-color:rgba(255,199,74,.42);background:rgba(255,199,74,.1)}.announcement-chip.priority.critical{color:#ff9a9a;border-color:rgba(255,93,93,.45);background:rgba(255,93,93,.1)}.announcement-card h2{font-size:15px;line-height:1.3;margin:12px 0 7px;color:#fff}.announcement-card p{margin:0;color:#d1dce8;font-size:11px;line-height:1.62;white-space:pre-wrap}

.leaderboard-coming-card{text-align:center;border:1px solid rgba(113,189,255,.28);background:radial-gradient(circle at 50% 8%,rgba(113,189,255,.11),transparent 38%),linear-gradient(150deg,#1a2a3c,#121d29);border-radius:22px;padding:30px 18px;box-shadow:var(--shadow-soft)}.leaderboard-hourglass{width:76px;height:76px;border-radius:24px;margin:0 auto 14px;display:grid;place-items:center;background:rgba(255,255,255,.055);font-size:40px}.leaderboard-coming-card h2{margin:7px 0 8px;font-size:20px;color:#fff}.leaderboard-coming-card p{max-width:36ch;margin:0 auto;color:#aebfd0;font-size:11px;line-height:1.6}

@media(max-width:380px){.home-feature-grid{gap:8px}.home-feature-card{padding:11px}.important-announcement-banner{padding:11px}.announcement-banner-icon{width:39px;height:39px}}

/* =========================
   V2.5.4 • Contextual Micro-Animations
   Distinct, low-intensity motion per feature.
   ========================= */

.quick-icon,
.home-feature-icon,
.today-mini-icon,
.nav-item > span:first-child {
  transform-origin: center;
  will-change: transform, filter, opacity;
}

/* 4-Hour • gift bounce + soft gold glow */
@keyframes hc-gift-bounce {
  0%, 72%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  78% { transform: translateY(-5px) rotate(-5deg) scale(1.06); }
  84% { transform: translateY(0) rotate(4deg) scale(1.02); }
  90% { transform: translateY(-2px) rotate(-2deg) scale(1.035); }
}
@keyframes hc-gift-glow {
  0%, 70%, 100% { filter: drop-shadow(0 0 0 rgba(255,199,74,0)); }
  84% { filter: drop-shadow(0 0 7px rgba(255,199,74,.55)); }
}
.quick-card[data-demo-action="4h"] .quick-icon {
  animation: hc-gift-bounce 4.4s ease-in-out infinite, hc-gift-glow 4.4s ease-in-out infinite;
}

/* Daily • calendar page-flip / tilt */
@keyframes hc-calendar-flip {
  0%, 68%, 100% { transform: perspective(90px) rotateX(0deg) rotateZ(0deg); }
  75% { transform: perspective(90px) rotateX(-18deg) rotateZ(-3deg) scale(1.04); }
  83% { transform: perspective(90px) rotateX(8deg) rotateZ(2deg); }
  90% { transform: perspective(90px) rotateX(0deg) rotateZ(0deg); }
}
.quick-card[data-demo-action="daily"] .quick-icon {
  animation: hc-calendar-flip 4.8s ease-in-out .35s infinite;
}

/* Tasks • clipboard/check pulse */
@keyframes hc-task-check {
  0%, 66%, 100% { transform: translateY(0) scale(1); filter: none; }
  73% { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 0 4px rgba(111,211,158,.25)); }
  80% { transform: rotate(-5deg) scale(1.02); }
  87% { transform: rotate(4deg) scale(1.04); filter: drop-shadow(0 0 7px rgba(111,211,158,.46)); }
  94% { transform: rotate(0deg) scale(1); }
}
.quick-card[data-go="tasks"] .quick-icon {
  animation: hc-task-check 4.1s ease-in-out .7s infinite;
}

/* Lucky Spin • slot-machine wobble + sparkle */
@keyframes hc-spin-slot {
  0%, 62%, 100% { transform: rotate(0deg) scale(1); filter: none; }
  69% { transform: rotate(-8deg) scale(1.06); }
  75% { transform: rotate(8deg) scale(1.08); filter: drop-shadow(0 0 7px rgba(255,199,74,.45)); }
  81% { transform: rotate(-5deg) scale(1.05); }
  88% { transform: rotate(3deg) scale(1.03); }
  94% { transform: rotate(0deg) scale(1); }
}
.quick-card[data-go="spin"] .quick-icon {
  animation: hc-spin-slot 3.8s cubic-bezier(.45,.05,.35,1) 1.05s infinite;
}

/* Daily Offers • natural flame flicker */
@keyframes hc-flame-flicker {
  0%, 100% { transform: translateY(0) scale(1) rotate(-1deg); filter: brightness(1); }
  18% { transform: translateY(-1px) scale(.96,1.05) rotate(2deg); filter: brightness(1.08); }
  37% { transform: translateY(-2px) scale(1.05,.98) rotate(-2deg); filter: brightness(1.14) drop-shadow(0 0 5px rgba(255,124,72,.35)); }
  59% { transform: translateY(0) scale(.99,1.04) rotate(1deg); filter: brightness(1.04); }
  76% { transform: translateY(-1px) scale(1.04,.97) rotate(-1deg); filter: brightness(1.12); }
}
.quick-card[data-go="offers"] .quick-icon {
  animation: hc-flame-flicker 2.15s ease-in-out 1.25s infinite;
}

/* Referral • friendly people pulse */
@keyframes hc-referral-pulse {
  0%, 70%, 100% { transform: scale(1); filter: none; }
  78% { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(92,180,255,.35)); }
  87% { transform: scale(.98); }
  94% { transform: scale(1.035); }
}
.quick-card[data-go="referral"] .quick-icon {
  animation: hc-referral-pulse 4.6s ease-in-out 1.5s infinite;
}

/* Announcements • megaphone nudge */
@keyframes hc-megaphone-call {
  0%, 68%, 100% { transform: rotate(0deg) scale(1); filter: none; }
  74% { transform: rotate(-9deg) scale(1.04); }
  80% { transform: rotate(8deg) scale(1.08); filter: drop-shadow(0 0 7px rgba(255,199,74,.5)); }
  86% { transform: rotate(-5deg) scale(1.04); }
  92% { transform: rotate(3deg) scale(1.02); }
}
.announcement-feature .home-feature-icon,
.announcement-banner-icon {
  animation: hc-megaphone-call 4.2s ease-in-out 1.85s infinite;
}

/* Ads • TV scan / glow */
@keyframes hc-tv-scan {
  0%, 65%, 100% { transform: scale(1); filter: brightness(1); box-shadow: inset 0 0 0 rgba(80,200,255,0); }
  72% { transform: scale(1.04); filter: brightness(1.12); box-shadow: inset 0 0 10px rgba(80,200,255,.12); }
  80% { transform: scale(1.02) translateX(-1px); filter: brightness(1.22) drop-shadow(0 0 5px rgba(80,200,255,.35)); }
  87% { transform: scale(1.02) translateX(1px); }
  94% { transform: scale(1); filter: brightness(1); }
}
.today-mini-card[data-go="ads"] .today-mini-icon {
  animation: hc-tv-scan 4.7s ease-in-out 2.1s infinite;
}

/* Lucky Winner • trophy lift + shine */
@keyframes hc-trophy-shine {
  0%, 64%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: none; }
  72% { transform: translateY(-4px) scale(1.06) rotate(-3deg); filter: drop-shadow(0 0 6px rgba(255,199,74,.45)); }
  80% { transform: translateY(-5px) scale(1.09) rotate(3deg); filter: brightness(1.18) drop-shadow(0 0 9px rgba(255,219,111,.62)); }
  88% { transform: translateY(-2px) scale(1.04) rotate(-1deg); }
  95% { transform: translateY(0) scale(1); }
}
.today-mini-card[data-go="luckywinner"] .today-mini-icon {
  animation: hc-trophy-shine 4.25s ease-in-out 2.45s infinite;
}

/* Card touch feedback • stronger than idle motion but still restrained */
.quick-card:active .quick-icon,
.home-feature-card:active .home-feature-icon,
.home-feature-card:active .hourglass-anim,
.today-mini-card:active .today-mini-icon {
  animation-play-state: paused;
  transform: scale(.88) rotate(-4deg);
  filter: brightness(1.2);
  transition: transform .1s ease, filter .1s ease;
}

/* Active bottom navigation gets a tiny confirmation bounce */
@keyframes hc-nav-active {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-2px) scale(1.08); }
}
.nav-item.active > span:first-child {
  animation: hc-nav-active 1.8s ease-in-out infinite;
}

/* Keep motion comfortable and battery-friendly. */
@media (prefers-reduced-motion: reduce) {
  .quick-card .quick-icon,
  .home-feature-icon,
  .announcement-banner-icon,
  .today-mini-icon,
  .nav-item.active > span:first-child {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================
   V2.5.5 • Distinct Feature Animations
   Each feature now has a visibly different motion language.
   ========================= */
.quick-card,
.home-feature-card,
.today-mini-card { position: relative; overflow: hidden; }
.quick-icon,
.home-feature-icon,
.today-mini-icon { position: relative; z-index: 2; display: inline-grid; place-items: center; }

/* 4-Hour — a real gift jump: squash → leap → land */
@keyframes hc55-gift-jump {
  0%, 68%, 100% { transform: translateY(0) scale(1,1) rotate(0); }
  72% { transform: translateY(2px) scale(1.12,.88) rotate(0); }
  78% { transform: translateY(-11px) scale(.94,1.08) rotate(-7deg); }
  83% { transform: translateY(-8px) scale(1.02) rotate(7deg); }
  89% { transform: translateY(1px) scale(1.12,.88) rotate(-2deg); }
  94% { transform: translateY(-2px) scale(.98,1.04) rotate(1deg); }
}
@keyframes hc55-gift-shadow {
  0%,68%,100% { filter: drop-shadow(0 0 0 rgba(255,199,74,0)); }
  80% { filter: drop-shadow(0 7px 8px rgba(255,199,74,.55)); }
}
.quick-card[data-demo-action="4h"] .quick-icon {
  animation: hc55-gift-jump 4.6s cubic-bezier(.34,1.3,.64,1) infinite,
             hc55-gift-shadow 4.6s ease infinite !important;
}

/* Daily — unmistakable 3D page flip */
@keyframes hc55-calendar-page {
  0%, 67%, 100% { transform: perspective(120px) rotateY(0deg) rotateZ(0deg); filter: none; }
  74% { transform: perspective(120px) rotateY(-26deg) rotateZ(-3deg) scale(1.04); }
  81% { transform: perspective(120px) rotateY(92deg) rotateZ(0deg) scale(.96); filter: brightness(1.22); }
  87% { transform: perspective(120px) rotateY(182deg) rotateZ(3deg) scale(1.04); }
  94% { transform: perspective(120px) rotateY(360deg) rotateZ(0deg); }
}
.quick-card[data-demo-action="daily"] .quick-icon {
  animation: hc55-calendar-page 5.1s cubic-bezier(.55,.08,.32,1) .25s infinite !important;
  transform-style: preserve-3d;
}

/* Tasks — stamp motion plus a green check that pops in the corner */
@keyframes hc55-task-stamp {
  0%, 70%, 100% { transform: translateY(0) scale(1); }
  76% { transform: translateY(-5px) scale(1.07); }
  81% { transform: translateY(5px) scale(.84); }
  86% { transform: translateY(0) scale(1.13); }
  92% { transform: translateY(0) scale(1); }
}
@keyframes hc55-task-check-pop {
  0%,72%,100% { opacity:0; transform:scale(.3) rotate(-18deg); }
  80%,90% { opacity:1; transform:scale(1) rotate(0deg); }
  96% { opacity:0; transform:scale(.65); }
}
.quick-card[data-go="tasks"] .quick-icon {
  animation: hc55-task-stamp 4.5s cubic-bezier(.2,.9,.3,1) .55s infinite !important;
}
.quick-card[data-go="tasks"]::before {
  content:"✓";
  position:absolute; right:12px; top:10px; width:22px; height:22px;
  display:grid; place-items:center; border-radius:50%;
  color:#07170f; background:#65d6a4; font-size:13px; font-weight:1000;
  box-shadow:0 0 10px rgba(101,214,164,.42);
  opacity:0; z-index:3;
  animation:hc55-task-check-pop 4.5s ease .55s infinite;
}

/* Lucky Spin — full wheel turn, very different from the other cards */
@keyframes hc55-spin-turn {
  0%, 61%, 100% { transform: rotate(0deg) scale(1); filter:none; }
  67% { transform: rotate(35deg) scale(1.06); }
  77% { transform: rotate(190deg) scale(1.12); filter:drop-shadow(0 0 8px rgba(255,199,74,.52)); }
  87% { transform: rotate(330deg) scale(1.08); }
  94% { transform: rotate(360deg) scale(1); }
}
.quick-card[data-go="spin"] .quick-icon {
  animation:hc55-spin-turn 4.2s cubic-bezier(.36,.08,.28,1) .9s infinite !important;
}

/* Daily Offers — living flame, fast vertical stretch rather than a bounce */
@keyframes hc55-flame-live {
  0%,100% { transform:translateY(0) scale(.96,1.02) rotate(-2deg); filter:brightness(1); }
  20% { transform:translateY(-3px) scale(1.08,.92) rotate(3deg); filter:brightness(1.22) drop-shadow(0 0 5px rgba(255,111,55,.42)); }
  42% { transform:translateY(-1px) scale(.91,1.14) rotate(-4deg); filter:brightness(1.08); }
  62% { transform:translateY(-4px) scale(1.11,.9) rotate(2deg); filter:brightness(1.28) drop-shadow(0 0 8px rgba(255,152,75,.48)); }
  82% { transform:translateY(-1px) scale(.98,1.08) rotate(-1deg); }
}
.quick-card[data-go="offers"] .quick-icon {
  animation:hc55-flame-live 1.35s ease-in-out 1.15s infinite !important;
}

/* Referral — social pulse with a blue ripple expanding from the people icon */
@keyframes hc55-referral-wave {
  0%, 67%, 100% { transform:scale(1) translateX(0); filter:none; }
  75% { transform:scale(1.11) translateX(-2px); filter:drop-shadow(0 0 7px rgba(95,181,255,.45)); }
  83% { transform:scale(1.03) translateX(3px); }
  91% { transform:scale(1.08) translateX(0); }
}
@keyframes hc55-referral-ring {
  0%,68%,100% { opacity:0; transform:scale(.45); }
  76% { opacity:.6; transform:scale(.72); }
  92% { opacity:0; transform:scale(1.55); }
}
.quick-card[data-go="referral"] .quick-icon {
  animation:hc55-referral-wave 4.9s ease-in-out 1.45s infinite !important;
}
.quick-card[data-go="referral"]::before {
  content:""; position:absolute; left:7px; top:4px; width:52px; height:52px;
  border:2px solid rgba(95,181,255,.58); border-radius:50%; opacity:0; z-index:1;
  animation:hc55-referral-ring 4.9s ease-out 1.45s infinite;
}

/* Announcements — alert shake + amber card pulse */
@keyframes hc55-megaphone-alert {
  0%,66%,100% { transform:rotate(0) scale(1); }
  72% { transform:rotate(-13deg) scale(1.06); }
  76% { transform:rotate(12deg) scale(1.10); }
  80% { transform:rotate(-10deg) scale(1.08); }
  84% { transform:rotate(8deg) scale(1.06); }
  89% { transform:rotate(-4deg) scale(1.03); }
  94% { transform:rotate(0) scale(1); }
}
@keyframes hc55-announcement-card-pulse {
  0%,66%,100% { box-shadow:var(--shadow-soft); border-color:rgba(242,193,78,.28); }
  80% { box-shadow:0 0 0 2px rgba(242,193,78,.12),0 0 20px rgba(242,193,78,.18); border-color:rgba(242,193,78,.65); }
}
.announcement-feature .home-feature-icon,
.announcement-banner-icon {
  animation:hc55-megaphone-alert 4.35s ease-in-out 1.7s infinite !important;
}
.announcement-feature { animation:hc55-announcement-card-pulse 4.35s ease 1.7s infinite; }

/* Ads — visible scan line across the TV screen; icon barely moves */
.today-mini-card[data-go="ads"] .today-mini-icon { overflow:hidden; animation:none !important; }
@keyframes hc55-tv-line {
  0%,62%,100% { top:5px; opacity:0; }
  68% { top:6px; opacity:.15; }
  76% { top:15px; opacity:.9; }
  84% { top:28px; opacity:.75; }
  91% { top:34px; opacity:0; }
}
@keyframes hc55-tv-glow {
  0%,64%,100% { box-shadow:inset 0 0 0 rgba(90,205,255,0); filter:none; }
  78% { box-shadow:inset 0 0 14px rgba(90,205,255,.18); filter:brightness(1.24) drop-shadow(0 0 5px rgba(90,205,255,.35)); }
}
.today-mini-card[data-go="ads"] .today-mini-icon::after {
  content:""; position:absolute; left:5px; right:5px; top:5px; height:2px;
  border-radius:999px; background:#8de6ff; box-shadow:0 0 5px #8de6ff; opacity:0;
  animation:hc55-tv-line 4.6s linear 2.05s infinite;
}
.today-mini-card[data-go="ads"] .today-mini-icon {
  animation:hc55-tv-glow 4.6s ease 2.05s infinite !important;
}

/* Lucky Winner — trophy lift + independent sparkle orbit */
@keyframes hc55-trophy-lift {
  0%,63%,100% { transform:translateY(0) rotate(0) scale(1); filter:none; }
  72% { transform:translateY(-8px) rotate(-4deg) scale(1.08); }
  80% { transform:translateY(-9px) rotate(4deg) scale(1.12); filter:drop-shadow(0 0 10px rgba(255,218,102,.65)); }
  89% { transform:translateY(-3px) rotate(0) scale(1.05); }
}
@keyframes hc55-trophy-star {
  0%,65%,100% { opacity:0; transform:translate(0,6px) scale(.3) rotate(0); }
  76% { opacity:1; transform:translate(-4px,-4px) scale(1) rotate(90deg); }
  85% { opacity:.85; transform:translate(6px,-10px) scale(.72) rotate(180deg); }
  94% { opacity:0; transform:translate(12px,-16px) scale(.35) rotate(270deg); }
}
.today-mini-card[data-go="luckywinner"] .today-mini-icon {
  animation:hc55-trophy-lift 4.4s cubic-bezier(.2,.8,.3,1) 2.35s infinite !important;
}
.today-mini-card[data-go="luckywinner"]::before {
  content:"✦"; position:absolute; left:44px; top:16px; color:#ffe28a; font-size:15px; z-index:3; opacity:0;
  text-shadow:0 0 8px rgba(255,226,138,.8);
  animation:hc55-trophy-star 4.4s ease 2.35s infinite;
}

/* Leaderboard retains its signature hourglass turn. */
.hourglass-anim,.leaderboard-hourglass {
  animation:hc-hourglass-turn 2.8s cubic-bezier(.55,.06,.34,.98) infinite,
            hc-hourglass-glow 1.4s ease-in-out infinite !important;
}

/* Bottom nav — active icon motion matches the destination. */
.nav-item.active > span:first-child { animation:none !important; }
@keyframes hc55-home-nod { 0%,70%,100%{transform:translateY(0)} 80%{transform:translateY(-3px)} 90%{transform:translateY(0)} }
@keyframes hc55-bolt-flash { 0%,68%,100%{transform:scale(1);filter:none} 76%{transform:scale(1.22);filter:drop-shadow(0 0 6px #ffd75f)} 84%{transform:scale(.94)} 92%{transform:scale(1.08)} }
@keyframes hc55-check-tick { 0%,68%,100%{transform:rotate(0) scale(1)} 78%{transform:rotate(-18deg) scale(.9)} 86%{transform:rotate(10deg) scale(1.16)} 94%{transform:rotate(0) scale(1)} }
@keyframes hc55-wallet-flip { 0%,68%,100%{transform:perspective(80px) rotateY(0)} 82%{transform:perspective(80px) rotateY(180deg)} 94%{transform:perspective(80px) rotateY(360deg)} }
@keyframes hc55-profile-halo { 0%,68%,100%{transform:scale(1);filter:none} 80%{transform:scale(1.16);filter:drop-shadow(0 0 7px rgba(149,224,255,.55))} 92%{transform:scale(1)} }
.nav-item.active[data-nav="home"] > span:first-child { animation:hc55-home-nod 3.8s ease infinite !important; }
.nav-item.active[data-nav="earn"] > span:first-child { animation:hc55-bolt-flash 3.2s ease infinite !important; }
.nav-item.active[data-nav="tasks"] > span:first-child { animation:hc55-check-tick 3.6s ease infinite !important; }
.nav-item.active[data-nav="wallet"] > span:first-child { animation:hc55-wallet-flip 4s ease infinite !important; }
.nav-item.active[data-nav="profile"] > span:first-child { animation:hc55-profile-halo 3.7s ease infinite !important; }

/* Respect accessibility preferences. */
@media (prefers-reduced-motion: reduce) {
  .quick-card .quick-icon,
  .quick-card::before,
  .home-feature-card,
  .home-feature-icon,
  .announcement-banner-icon,
  .today-mini-icon,
  .today-mini-icon::after,
  .today-mini-card::before,
  .hourglass-anim,
  .leaderboard-hourglass,
  .nav-item.active > span:first-child {
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }
}


/* =========================
   V2.5.6 • Quick Earn Left Icon Alignment
   Keep each distinct animation, but align the animated icon with the
   left-side effect so the card reads like Ads / Lucky Winner.
   ========================= */
.quick-card {
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:11px !important;
  row-gap:2px !important;
  align-items:center !important;
  min-height:100px !important;
  padding:14px !important;
}
.quick-card .quick-icon {
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  justify-self:start !important;
  align-self:center !important;
  width:40px !important;
  height:40px !important;
  margin:0 !important;
  font-size:25px !important;
  line-height:1 !important;
  transform-origin:center !important;
}
.quick-card strong {
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:end !important;
  min-width:0;
  position:relative;
  z-index:2;
}
.quick-card small {
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
  z-index:2;
}
/* Keep the task check attached to the left-side clipboard. */
.quick-card[data-go="tasks"]::before {
  right:auto !important;
  left:40px !important;
  top:22px !important;
  width:19px !important;
  height:19px !important;
  font-size:11px !important;
}
/* Center the referral ripple around the now-left-aligned people icon. */
.quick-card[data-go="referral"]::before {
  left:8px !important;
  top:24px !important;
  width:50px !important;
  height:50px !important;
}
@media (max-width:380px) {
  .quick-card {
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:9px !important;
    padding:12px !important;
    min-height:96px !important;
  }
  .quick-card .quick-icon { width:38px !important; height:38px !important; font-size:24px !important; }
  .quick-card[data-go="tasks"]::before { left:36px !important; top:21px !important; }
  .quick-card[data-go="referral"]::before { left:6px !important; top:22px !important; width:48px !important; height:48px !important; }
}


/* =========================
   V2.5.8 • Achievement lock clarity + future Card system
   ========================= */
.achievement-tier{position:relative;overflow:hidden}
.achievement-lock-badge,.achievement-corner-badge{position:absolute;top:6px;right:7px;min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;font-size:9px;font-weight:900;line-height:1;padding:0 4px;z-index:2}
.achievement-lock-badge{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);filter:grayscale(.25);opacity:.88}
.achievement-corner-badge.done{background:rgba(84,211,138,.16);border:1px solid rgba(84,211,138,.28);color:#a4edc0}
.achievement-corner-badge.count{background:rgba(255,199,74,.16);border:1px solid rgba(255,199,74,.28);color:#ffda80;min-width:20px}
.card-achievement-tier.locked{background:linear-gradient(145deg,rgba(255,255,255,.015),rgba(14,22,31,.55));border-style:dashed}
.card-achievement-tier.locked .achievement-tier-label{opacity:.72}
.card-achievement-tier.locked .achievement-tier-meta{font-size:8.5px;opacity:.82}
.achievement-coming-later{margin:12px 0 0;padding:13px 14px;border:1px dashed rgba(255,199,74,.22);border-radius:16px;background:rgba(255,199,74,.035);color:var(--muted);font-size:10px;text-align:center;letter-spacing:.01em}

/* V3 gameplay: a quiet gold-and-midnight identity, generous touch targets. */
.game-greeting {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 2px 18px}
.game-greeting small,.membership-kicker {font-size:10px;letter-spacing:1.7px;color:var(--accent-2);font-weight:750}
.game-greeting h1 {font-size:22px;line-height:1.2;letter-spacing:-.6px;margin:6px 0 0;overflow-wrap:anywhere}
.journey-badge {flex-shrink:0;border:1px solid #334351;background:#142230;border-radius:999px;padding:11px 13px;color:#c6d9e9;font-size:12px;font-weight:700}
.gameplay-hero {padding:18px 20px;background:radial-gradient(ellipse at 90% 0,#3c34204d,transparent 70%),linear-gradient(135deg,#1c241e,#141c24);border-color:#3d4433}
.gameplay-hero .balance {font-size:clamp(32px,9vw,44px)}
.game-profit-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.game-profit-grid > div,.game-profit-grid > button {padding:14px;border:1px solid #293742;background:#121c25;border-radius:16px;display:flex;flex-direction:column;gap:5px;text-align:left;color:var(--text);min-width:0}
.game-profit-grid small,.improve-summary small {font-size:9px;letter-spacing:1.1px;color:var(--muted);font-weight:750}
.game-profit-grid strong {font-size:19px;overflow-wrap:anywhere}
.game-profit-grid span {font-size:10px;color:var(--good)}
.tap-stage {height:242px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.tap-stage p {position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--muted);font-size:12px;line-height:1.4;margin:0 12px}
.tap-orbit {position:absolute;width:202px;height:202px;border-radius:50%;border:1px solid #e9c86612;pointer-events:none}
.orbit-two {width:228px;height:228px;border-style:dashed;border-color:#e9c8660b}
.tap-coin {width:178px;height:178px;border:1px solid #a88c3b;background:radial-gradient(circle at 35% 25%,#76613a,#2d291b 54%,#121a1c);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 45px #c49a3612,inset 0 0 24px #d6ac4b26,0 12px 28px #0007;touch-action:manipulation;user-select:none;transition:transform .08s;position:relative}
.tap-coin img {width:132px;height:132px;pointer-events:none;-webkit-user-drag:none}
.tap-coin:active {transform:scale(.95)}
.tap-coin:disabled {opacity:.55}
.tap-particles {position:absolute;inset:0;pointer-events:none}
.tap-particle {position:absolute;top:85px;font-size:27px;font-weight:850;color:#ffe39b;text-shadow:0 2px 10px #000;animation:tap-float .8s ease-out forwards}
@keyframes tap-float {to{transform:translateY(-65px);opacity:0}}
.energy-card {margin-top:16px;background:#131d27;border:1px solid #283744;border-radius:18px;padding:14px 16px}
.energy-heading,.energy-footer {display:flex;justify-content:space-between;align-items:center;gap:10px}
.energy-heading strong {font-size:15px}.energy-heading > span {font-size:11px;color:var(--accent-2)}
.energy-heading .muted {color:var(--muted);font-weight:500}
.energy-track {height:7px;border-radius:99px;background:#24333c;overflow:hidden;margin:12px 0 8px}
.energy-track > span {display:block;height:100%;width:0;background:linear-gradient(90deg,#c69b42,#f6d880);border-radius:inherit;transition:width .12s}
.energy-footer {font-size:10px;color:var(--muted)}
.tap-sync {color:var(--good);font-size:10px;margin-top:10px;min-height:14px}
.improve-cta {width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:16px;margin-top:14px;border:1px solid #b2944640;border-radius:18px;background:linear-gradient(105deg,#27291e,#18252b);color:var(--text)}
.improve-cta > span:nth-child(2) {flex:1;min-width:0}.improve-cta strong {font-size:15px;display:block}.improve-cta small {color:var(--muted);font-size:11px;display:block;margin-top:5px;line-height:1.5}.improve-cta b {font-size:25px;color:var(--accent)}
.upgrade-art {background:#dcc36318;border-radius:13px;width:42px;height:42px;display:grid;place-items:center;font-size:26px;color:var(--accent-2);flex-shrink:0}
.game-level-line {display:flex;justify-content:space-between;gap:10px;margin:16px 2px 8px;font-size:10px;color:var(--muted)}
.game-level-line span:first-child {color:#cbd7df}.game-xp-track {height:3px;background:#243440;border-radius:99px;overflow:hidden}.game-xp-track span {display:block;height:100%;background:var(--good);width:0}
.screen[data-screen=home] .quick-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.screen[data-screen=home] .quick-card {padding:12px;min-height:104px;gap:4px}.screen[data-screen=home] .quick-card strong {font-size:12px}.screen[data-screen=home] .quick-card small {font-size:10px;line-height:1.4}
.improve-summary {display:flex;justify-content:space-between;gap:12px;padding:18px;border:1px solid #394238;border-radius:18px;background:linear-gradient(110deg,#242b20,#15202b)}
.improve-summary > div {display:grid;gap:7px;min-width:0}.improve-summary strong {font-size:23px;overflow-wrap:anywhere;letter-spacing:-.4px}.improve-summary > div:last-child {text-align:right}
.card-tools {margin-top:16px}.card-search {display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:0 13px;color:var(--muted)}
.card-search input {width:100%;height:44px;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:13px}.card-search:focus-within {outline:2px solid var(--accent)}
.card-filters {display:flex;gap:7px;overflow-x:auto;padding:13px 0;margin-bottom:2px;scrollbar-width:none}.card-filters::-webkit-scrollbar{display:none}
.card-filter {min-height:40px;white-space:nowrap;border:1px solid var(--line);border-radius:99px;padding:8px 13px;background:#101b25;color:var(--muted);font-size:12px}.card-filter.active {background:#f2c14e;color:#192020;border-color:#f2c14e;font-weight:750}
.upgrade-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.upgrade-card {min-width:0;border:1px solid #2c3d48;border-radius:18px;background:linear-gradient(145deg,#172530,#111c25);padding:14px;display:flex;flex-direction:column}.upgrade-card.locked {background:#121b23;border-style:dashed}
.upgrade-card-top {display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:13px}.card-art {width:44px;height:44px;border:1px solid #d7bb5330;border-radius:13px;display:grid;place-items:center;font-size:26px;color:var(--accent-2);background:#b5952c12}.card-level {font-size:9px;color:var(--muted);font-weight:700}.card-category {font-size:9px;color:var(--good);letter-spacing:.7px;text-transform:uppercase}
.upgrade-card h2 {margin:6px 0 0;font-size:15px;line-height:1.3}.upgrade-card p {font-size:11px;color:var(--muted);line-height:1.5;margin:7px 0 13px;min-height:33px}.card-income {margin-top:auto;display:grid;gap:5px;padding-top:10px;border-top:1px solid var(--line)}.card-income small {font-size:8px;letter-spacing:.8px;color:var(--muted)}.card-income strong {font-size:16px;color:var(--accent-2)}.card-next {font-size:10px;color:var(--muted);margin:8px 0 12px;line-height:1.5}.card-next strong {color:var(--good);display:block}
.card-upgrade-btn {width:100%;border:1px solid #f2c14e;background:#f2c14e;color:#182026;font-weight:750;border-radius:10px;padding:11px 6px;font-size:11px;min-height:44px}.card-upgrade-btn:disabled {color:#8d9aa8;background:#20303c;border-color:#344452}.card-shortfall {text-align:center;color:var(--muted);font-size:9px;margin-top:7px}
.card-dialog {width:calc(100% - 40px);max-width:420px;border:1px solid #47503b;border-radius:24px;background:#14202b;color:var(--text);padding:24px;box-shadow:0 30px 80px #0008}.card-dialog::backdrop {background:#03080dcc;backdrop-filter:blur(6px)}.card-dialog h2 {font-size:22px;margin:10px 0}.card-dialog p {font-size:14px;line-height:1.7;color:var(--muted)}.card-dialog .secondary-btn {margin-top:10px}
@media(max-width:360px){.app-shell{padding-left:12px;padding-right:12px}.upgrade-card{padding:11px}.game-profit-grid strong{font-size:16px}.game-greeting h1{font-size:19px}.screen[data-screen=home] .quick-card{padding:10px}.game-level-line{font-size:9px}}
@media(prefers-reduced-motion:reduce){.tap-particle{animation:none;opacity:0}.tap-coin,.energy-track>span{transition:none}}

/* V3.0.1: compact earning dashboard, profile characters and Airdrop preview. */
.profile-shortcut {flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #344552;background:#142230;border-radius:16px;color:var(--text);min-height:51px;text-align:left}
.profile-shortcut-icon {font-size:25px;line-height:1.1}.profile-shortcut > span:last-child {display:grid;gap:4px}.profile-shortcut strong {font-size:12px}.profile-shortcut small {font-size:10px;color:var(--muted)}.profile-shortcut.active {border-color:var(--accent)}
.game-greeting {margin:10px 2px 12px}.game-greeting h1 {font-size:20px;margin-top:5px}.game-greeting > div {min-width:0}.game-greeting > div > small {font-size:9px;letter-spacing:1.2px}
.gameplay-hero {padding:12px 15px;border-radius:19px}.gameplay-hero .eyebrow {font-size:9px;letter-spacing:1.2px}.gameplay-hero .balance-row {margin-top:4px;align-items:center}.gameplay-hero .balance {font-size:clamp(26px,7.8vw,32px);letter-spacing:-1px;line-height:1.15}.gameplay-hero .balance span:last-child {font-size:13px}.gameplay-hero .cash-mini-balance {margin-top:5px;font-size:11px;gap:5px;flex-wrap:wrap}.gameplay-hero .cash-mini-balance strong {font-size:12px}.gameplay-hero .cash-mini-balance small {font-size:9px}.gameplay-hero .plan-pill {font-size:9px;padding:6px 9px}.gameplay-hero .hero-meta {display:none}.gameplay-hero::after {font-size:95px;bottom:-29px;right:6px}
.gameplay-hero .passive-mini-bar {margin-top:8px;padding-top:7px;flex-direction:row;align-items:center;gap:8px}.gameplay-hero .passive-mini-bar span {font-size:9px}.gameplay-hero .passive-mini-bar small {font-size:9px;text-align:right}
.game-profit-grid {margin-top:9px;gap:9px}.game-profit-grid > div,.game-profit-grid > button {padding:11px 12px;gap:4px;border-radius:14px}.game-profit-grid small {font-size:8px;letter-spacing:.8px}.game-profit-grid strong {font-size:17px}.game-profit-grid span {font-size:9px}
.tap-stage {height:224px}.tap-coin-motion {display:grid;place-items:center;animation:hc-coin-drift 5s ease-in-out infinite;will-change:transform;transform-origin:center;position:relative;top:-13px}.tap-coin {width:164px;height:164px}.tap-coin img {width:122px;height:122px}.tap-orbit {width:190px;height:190px;top:3px}.orbit-two {width:211px;height:211px;top:-7px}
@keyframes hc-coin-drift {0%,100%{transform:translateY(2px) rotate(-1.5deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
.tap-count-pill {position:absolute;bottom:26px;display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid #b3954130;border-radius:999px;background:#19231fe6}.tap-count-pill span {font-size:8px;letter-spacing:1px;color:var(--muted);font-weight:700}.tap-count-pill strong {font-size:12px;color:var(--accent-2)}.tap-stage p {font-size:11px}
.energy-card {margin-top:10px;padding:12px 14px;border-radius:16px}.energy-heading strong {font-size:14px}.energy-track {margin:9px 0 7px;height:6px}.tap-sync {margin-top:7px;font-size:9px}
.bottom-nav .nav-spin {margin-top:-7px;color:var(--accent-2);background:linear-gradient(145deg,#594827,#2a291d);border:1px solid #c8a54a65;border-radius:18px;box-shadow:0 4px 20px #d0ab3812}.bottom-nav .nav-spin > span:first-child {font-size:25px}.bottom-nav .nav-spin.active {background:linear-gradient(145deg,#806533,#373021);border-color:var(--accent)}.bottom-nav .nav-spin.active::before {display:none}
.avatar {border:1px solid #a2854059;font-weight:400;flex-shrink:0;background:linear-gradient(145deg,#3d3c27,#192830);font-size:30px}.avatar-edit-link {width:100%;background:transparent;border:0;color:var(--accent-2);font-size:12px;padding:12px 4px;text-align:left}.avatar-edit-link span {display:block;margin-top:4px;color:var(--muted);font-size:10px}.avatar-dialog {max-height:calc(100dvh - 40px);overflow:auto}.avatar-dialog p {font-size:12px;line-height:1.6}.avatar-choices {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.avatar-choice {min-width:0;min-height:73px;border-radius:13px;border:1px solid var(--line);background:#182836;display:grid;place-items:center;align-content:center;gap:5px;color:var(--muted);padding:8px 3px}.avatar-choice span {font-size:28px;line-height:1.2}.avatar-choice small {font-size:9px}.avatar-choice.selected {border-color:var(--accent);background:#c6a54318;color:var(--accent-2);box-shadow:inset 0 0 0 1px #d0b44b30}.avatar-save-status {min-height:18px;color:var(--accent-2) !important}
.airdrop-coming-card {position:relative;overflow:hidden;text-align:center;padding:27px 22px;border:1px solid #b5a26050;border-radius:26px;background:radial-gradient(ellipse at 50% 32%,#a38d2915,transparent 60%),linear-gradient(150deg,#1d2c31,#131f2b);box-shadow:var(--shadow-soft)}.airdrop-status {display:inline-block;font-size:10px;letter-spacing:2px;padding:8px 14px;background:#d3b04b12;border:1px solid #b79e4850;border-radius:99px;color:var(--accent-2);font-weight:750}
.airdrop-hourglass-wrap {width:150px;height:150px;margin:22px auto;display:grid;place-items:center;border-radius:50%;border:1px solid #cfb15b25;background:radial-gradient(circle,#d4aa3912,transparent 70%);box-shadow:0 0 0 12px #cfb15b04}.airdrop-hourglass {font-size:70px;line-height:1;display:block;animation:hc-hourglass-turn 5s cubic-bezier(.55,.06,.34,.98) infinite;transform-origin:center}
.airdrop-coming-card h2 {font-size:24px;line-height:1.3;letter-spacing:-.6px;margin:0 0 13px}.airdrop-coming-card > p {color:var(--muted);font-size:13px;line-height:1.8;max-width:38ch;margin:0 auto}.airdrop-story {display:grid;gap:9px;padding:19px 0 23px;margin-top:16px;border-top:1px solid #ffffff0b}.airdrop-story > span {color:var(--accent-2);font-size:20px}.airdrop-story strong {font-size:13px;font-weight:650}.airdrop-story small {font-size:11px;color:var(--muted);line-height:1.7}.airdrop-coming-card .primary-btn {font-size:12px;min-height:44px}
/* Three-column quick shortcuts use vertical content to avoid narrow text clips. */
.screen[data-screen=home] .quick-card {display:flex !important;flex-direction:column;align-items:flex-start !important;justify-content:flex-start;min-height:96px !important;padding:12px !important;gap:5px !important}.screen[data-screen=home] .quick-card .quick-icon {width:30px !important;height:30px !important;font-size:24px !important;align-self:flex-start !important;margin:0 0 2px !important}.screen[data-screen=home] .quick-card strong {font-size:12px;line-height:1.3;align-self:flex-start !important}.screen[data-screen=home] .quick-card small {max-width:100%;font-size:9px;line-height:1.4;align-self:flex-start !important}.screen[data-screen=home] .quick-card[data-go=tasks]::before {display:none !important}.screen[data-screen=home] .quick-card[data-go=referral]::before {top:7px !important;left:5px !important;width:45px !important;height:45px !important}
@media(max-width:360px){.profile-shortcut{padding:8px;gap:5px}.profile-shortcut-icon{font-size:22px}.game-greeting h1{font-size:18px}.gameplay-hero .passive-mini-bar{flex-wrap:wrap;gap:4px}.avatar-choices{gap:6px}.avatar-choice{min-height:66px}.avatar-choice span{font-size:25px}.avatar-choice small{font-size:8px}.airdrop-coming-card{padding:24px 17px}.airdrop-coming-card h2{font-size:21px}.screen[data-screen=home] .quick-card{padding:10px !important}}
@media(prefers-reduced-motion:reduce){.tap-coin-motion,.airdrop-hourglass{animation:none !important;will-change:auto}.bottom-nav .nav-spin > span:first-child{animation:none !important}}

/* V3.0.2: readable, server-owned requirements for the next card level. */
.card-requirements {border-top:1px solid #ffffff0b;padding-top:9px;margin:0 0 12px;display:grid;gap:7px}.card-requirements > small {font-size:8px;letter-spacing:1px;color:var(--muted);font-weight:700}.card-requirement {display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;color:#aebdcc;line-height:1.4}.card-requirement > span {min-width:0;overflow-wrap:anywhere}.card-requirement b {display:block;font-size:9px;font-weight:500;margin-top:2px;color:var(--muted)}.card-requirement > small {font-size:9px;white-space:nowrap;border:1px solid #344452;background:#1b2a36;border-radius:6px;padding:3px 5px}.card-requirement.met {color:var(--good)}.card-requirement.met > small {background:#65d6a410;border-color:#65d6a425;color:var(--good)}.card-starter-note {font-size:9px;color:var(--muted);line-height:1.5;margin:0 0 12px}

/* V3.0.3: blocked upgrades remain inspectable, with direct prerequisite links. */
.improve-sync {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 16px;font-size:12px;line-height:1.5;color:var(--muted)}
.improve-sync > span {flex-basis:100%}
.card-dialog-requirements {display:grid;gap:9px;margin:14px 0}
.card-dependency-link {width:100%;padding:12px 14px;text-align:left;border:1px solid #344452;border-radius:12px;background:#1b2a36;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.card-dependency-link:hover {border-color:var(--accent-2)}

#cardConfirm[hidden], #improveRetry[hidden] {display:none}

/* V3.0.4: recovery stays accessible inside the upgrade dialog. */
#cardDialogRetry[hidden], #serverUpdateNotice[hidden] {display:none}
.server-update-notice {border:1px solid #b79e4850;border-radius:14px;padding:12px;margin:10px 0;color:var(--accent-2);font-size:12px;line-height:1.6;background:#d3b04b12}

/* V3.0.5: both wheel selectors remain clearly visible, including when inactive. */
.spin-mode-heading {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px;margin:16px 0 8px;font-size:12px;font-weight:750;color:var(--text)}
.spin-mode-heading small {font-size:10px;color:var(--muted);font-weight:500}
.spin-mode-tabs {margin-top:0;gap:10px}
.spin-mode-btn {position:relative;border-width:2px;padding:12px;gap:6px;min-height:122px;transition:box-shadow .2s,border-color .2s;}
.spin-mode-btn#normalSpinModeBtn {border-color:#bb9142;background:linear-gradient(145deg,#48361d,#242724);box-shadow:0 4px 16px #e7b84c12}
.spin-mode-btn#specialSpinModeBtn {border-color:#63bbdc;background:linear-gradient(145deg,#17455a,#1a283d);box-shadow:0 4px 16px #72d9ff20}
.spin-mode-btn#normalSpinModeBtn.active {border-color:#ffdb7b;box-shadow:0 0 0 2px #e7b84c24,0 5px 18px #e7b84c20;background:linear-gradient(145deg,#5a4120,#303329)}
.spin-mode-btn#specialSpinModeBtn.active {border-color:#aeebff;box-shadow:0 0 0 2px #72d9ff28,0 5px 18px #72d9ff25;background:linear-gradient(145deg,#1d5972,#233552)}
.spin-mode-btn .spin-mode-title {font-size:13px;font-weight:800;line-height:1.4}
.spin-mode-btn strong {font-size:22px;line-height:1.25}
.spin-mode-btn strong span {font-size:inherit}
.spin-mode-btn small {font-size:10px;white-space:normal;line-height:1.5}
.spin-mode-action {font-style:normal;font-size:10px;font-weight:750;color:#ffe29c;line-height:1.4}
#specialSpinModeBtn .spin-mode-action {color:#a9ebff}
.spin-mode-btn:focus-visible {outline:2px solid #ffffff;outline-offset:3px}
.spin-mode-btn:disabled {opacity:.65;cursor:wait}
@media(max-width:360px){.spin-mode-btn {padding:10px}.spin-mode-btn .spin-mode-title {font-size:12px}.spin-mode-heading {font-size:11px}}

/* V3.0.6: membership at the top, with a direct upgrade action below. */
.gameplay-hero .balance-row {align-items:flex-start;margin-top:0;gap:12px}
.gameplay-hero .balance-stack {min-width:0;flex:1}
.gameplay-hero .balance {margin-top:6px;overflow-wrap:anywhere}
.balance-plan-actions {display:grid;gap:7px;justify-items:stretch;flex:0 0 auto;position:relative;z-index:1;min-width:86px}
.gameplay-hero .balance-plan-actions .plan-pill {padding:9px 14px;font-size:12px;min-height:40px;cursor:pointer;line-height:1.3;letter-spacing:.6px;background:#e7ba4a16;border-color:#c9a64480;text-align:center}
.balance-upgrade-btn {display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:7px 10px;border-radius:10px;border:1px solid #6b95a25c;background:#192e36;color:#d5eaf0;font-size:11px;font-weight:750;cursor:pointer;line-height:1.3}
.balance-plan-actions button:focus-visible {outline:2px solid var(--accent-2);outline-offset:3px}
.balance-plan-actions button:active {transform:scale(.97)}
@media(max-width:360px){.gameplay-hero .balance-row {gap:8px}.balance-plan-actions {min-width:78px}.gameplay-hero .balance-plan-actions .plan-pill {padding:9px 10px;font-size:11px}.balance-upgrade-btn {padding:7px 8px;font-size:10px}}

/* V3.0.7: useful tap goals, Tap Power progression and explicit reward review. */
.tap-power-panel {border:1px solid #7db9cd55;background:linear-gradient(140deg,#193544,#18272b);border-radius:18px;padding:16px;margin:14px 0 18px;display:grid;gap:13px}
.tap-power-panel h2 {font-size:18px;margin:8px 0}.tap-power-panel strong {font-size:21px;color:#a9ebff}.tap-power-panel p {font-size:12px;line-height:1.6;color:var(--text);margin:8px 0}.tap-power-panel small {font-size:11px;color:var(--muted);line-height:1.6;display:block}
.reward-review-icon {display:block;font-size:42px;margin-bottom:15px}.reward-dialog > strong {display:block;color:var(--accent-2);font-size:28px;margin:14px 0}.reward-dialog #rewardReviewStatus {color:var(--good);font-size:13px}


/* V3.0.8: clear progress, confirmed results and reusable completed links. */
.card-requirement > span {min-width:0;flex:1}
.card-requirement b {line-height:1.5;white-space:normal}
.requirement-track {display:block;height:4px;background:#31414a;border-radius:8px;margin-top:7px;overflow:hidden}
.requirement-track i {display:block;height:100%;background:#ecc75c;border-radius:8px}
.card-requirement.met .requirement-track i {background:var(--good)}
.card-dialog .requirement-summary {font-size:12px;line-height:1.6;color:var(--accent-2);margin:14px 0 0}
.card-dependency-link {white-space:normal;line-height:1.6;text-align:left;min-height:48px}
.card-dependency-link.met {border-color:#458a6d66;color:#87e1b0;background:#20413355}
.toast.success {display:flex;gap:12px;align-items:center;text-align:left;border-color:#5ca98480;background:#17382e;box-shadow:0 8px 28px #0005}
.success-check {display:grid;place-items:center;flex:0 0 36px;height:36px;background:#71dfa7;color:#122c22;border-radius:50%;font-size:23px;font-weight:900;animation:success-pop .35s ease-out}
.success-copy {display:grid;gap:4px;min-width:0}.success-copy strong {font-size:13px;line-height:1.5;color:#e6fff0}.success-copy small {font-size:11px;line-height:1.6;color:#b5dccc;overflow-wrap:anywhere}
.card-dialog .inline-success {border:1px solid #4eaa7f77;border-radius:12px;padding:12px;background:#21463788;color:#a3f0c5;font-size:13px;line-height:1.6;animation:success-pop .35s ease-out}
.inline-success[hidden] {display:none}
.completed-task {border-color:#3c715b70}.completed-task .task-action.secondary {border-color:#53887588;color:#a5dfc4}
@keyframes success-pop {from {opacity:.3;transform:scale(.88)}to {opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.success-check,.card-dialog .inline-success {animation:none}}

.card-dialog {max-height:calc(100dvh - 48px);overflow-y:auto}

/* V3.0.9: a short account-saved guide and clear membership comparison. */
.onboarding-dialog {padding:22px;max-width:430px}
.onboarding-top {display:flex;align-items:center;justify-content:space-between;gap:12px}.onboarding-top .membership-kicker {font-size:10px}.onboarding-top .text-btn {min-height:40px;padding:8px;font-size:12px}
.onboarding-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:17px 0 22px}.onboarding-steps span {padding:9px 3px;border:1px solid #344952;border-radius:9px;color:var(--muted);font-size:10px;text-align:center;font-weight:750}.onboarding-steps .current {background:#d9b54826;border-color:#cda843;color:#f6d478}.onboarding-steps .done {border-color:#447b64;color:#8bddb2}
.onboarding-icon {display:grid;place-items:center;width:78px;height:78px;border:1px solid #c6a64266;background:#c8a23f18;border-radius:22px;margin-bottom:18px;font-size:42px;color:#f4ce66}
.onboarding-step-label {font-size:10px;letter-spacing:1.2px;color:var(--accent-2);font-weight:800}.onboarding-dialog h2 {font-size:24px}.onboarding-dialog > p {font-size:14px}.onboarding-dialog .onboarding-tip {padding:12px;border-radius:12px;background:#243742;color:#badbe5;font-size:12px;line-height:1.6}
.onboarding-controls {display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:12px}.onboarding-controls button {margin:0!important;min-height:44px}.onboarding-controls button:disabled {opacity:.4;cursor:default}.onboarding-replay-note {display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:16px}
.membership-comparison-panel,.membership-future-panel {border:1px solid #48625670;border-radius:18px;padding:16px;margin:18px 0;background:#17272c;min-width:0}.comparison-heading {display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.comparison-heading h2 {font-size:18px;margin:0}.comparison-plan-pill {padding:7px 10px;background:#3c765336;border:1px solid #64ad7a66;color:#a6e6ba;border-radius:20px;font-size:10px;font-weight:800}
.membership-comparison-panel > p,.membership-future-panel > p {font-size:12px;line-height:1.7;color:var(--muted)}.comparison-scroll {overflow-x:auto;border:1px solid #334b53;border-radius:12px;margin:12px 0;overscroll-behavior-x:contain}.comparison-scroll:focus-visible {outline:2px solid var(--accent-2);outline-offset:3px}
.membership-table {border-collapse:separate;border-spacing:0;width:100%;min-width:535px;font-size:12px;line-height:1.5}.membership-table caption {text-align:left;padding:11px 12px;background:#1a3039;color:#bbd9dc;font-size:11px;font-weight:750}.membership-table th,.membership-table td {padding:11px 10px;border-bottom:1px solid #324a5266;text-align:center;min-width:82px;vertical-align:middle}.membership-table thead th {background:#1c333d;font-size:10px;color:#c9dce5}.membership-table th:first-child {position:sticky;left:0;min-width:165px;max-width:180px;text-align:left;background:#172b33;z-index:1;font-size:11px;font-weight:650}.membership-table thead th:first-child {background:#1c333d}.membership-table .current-plan {background:#21473566;color:#9de0b7;font-weight:800}.membership-table th small {display:block;font-size:9px;color:#9de0b7;font-weight:650;margin-top:3px}.membership-table tbody tr:last-child > * {border-bottom:0}
.membership-future-panel {background:#2b292017;border-color:#9e88434a}.membership-future-panel summary {cursor:pointer;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;min-height:36px;font-size:14px;font-weight:750;list-style:none}.membership-future-panel summary::-webkit-details-marker {display:none}.membership-future-panel summary > span:first-child::after {content:' ＋';color:var(--accent-2)}.membership-future-panel[open] summary > span:first-child::after {content:' −'}.coming-soon-chip {font-size:9px;letter-spacing:.5px;background:#b6923324;border:1px solid #a58a494f;color:#e0bf6d;border-radius:20px;padding:7px 9px}.membership-future-panel .membership-table caption {color:#ebcf8b;background:#333025}.membership-future-panel .membership-table .current-plan {background:#4b412337;color:#e4c77f}
@media(max-width:360px){.onboarding-dialog {padding:18px}.onboarding-steps {gap:5px}.onboarding-steps span {font-size:9px}.membership-comparison-panel,.membership-future-panel {padding:12px}}

/* V3.0.11 expanded card collection */
.card-catalog-summary { margin: 16px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.card-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 7px; }
.card-labels .card-category { margin: 0; }
.card-stage { border: 1px solid rgba(248,207,88,.25); border-radius: 99px; padding: 3px 8px; font-size: 10px; color: #f7d77b; background: rgba(248,207,88,.06); }

/* V3.0.13: compact, one-row Home milestones with a visible swipe cue. */
.tap-goals-panel { min-width:0; margin:12px 0; padding:10px; border:1px solid #b49a4735; border-radius:16px; background:linear-gradient(145deg,#202a25,#14212b); }
.tap-goals-panel .section-head { margin:0; gap:8px; }
.tap-goals-panel h2 { margin:0; font-size:14px; line-height:1.3; }
.tap-goals-panel .text-btn { padding:6px; min-height:44px; font-size:11px; white-space:nowrap; }
.tap-goals-panel > p { margin:0 0 8px; font-size:11px; line-height:1.4; color:var(--good); overflow-wrap:anywhere; }
.tap-goals-grid { display:flex; flex-wrap:nowrap; gap:7px; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; padding:3px 2px 6px; scroll-snap-type:x proximity; scroll-padding-inline:2px; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#56633e #17242b; }
.tap-goals-grid::-webkit-scrollbar { height:3px; }
.tap-goals-grid::-webkit-scrollbar-thumb { background:#56633e; border-radius:6px; }
.tap-goals-grid:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; border-radius:10px; }
.tap-goal-card { flex:0 0 128px; min-width:0; display:grid; gap:4px; padding:8px; border:1px solid #415249; border-radius:11px; background:#14232a; text-align:center; scroll-snap-align:start; align-content:start; }
.tap-goal-card strong { font-size:12px; line-height:1.3; color:var(--text); }
.tap-goal-card > span { font-size:12px; line-height:1.3; font-weight:800; color:var(--accent-2); white-space:nowrap; }
.tap-goal-meta { display:flex; justify-content:space-between; align-items:center; gap:4px; min-width:0; }
.tap-goal-meta small { font-size:9px; line-height:1.4; color:var(--muted); white-space:nowrap; }
.tap-goal-card button { margin-top:2px; min-height:44px; padding:6px 3px; border:1px solid #d6b95c; border-radius:8px; background:#f2c14e; color:#172026; font-size:10px; font-weight:750; cursor:pointer; }
.tap-goal-card button:disabled { border-color:#334751; background:#20313b; color:var(--muted); cursor:default; }
.tap-goal-card.milestone-final { border-color:#c4a449; background:linear-gradient(135deg,#343125,#172932); }
.tap-goal-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:5px; }
.tap-goal-reset { display:block; font-size:9px; line-height:1.5; color:var(--muted); }
.tap-goal-swipe { flex:0 0 auto; font-size:10px; color:var(--accent-2); white-space:nowrap; }

/* V3.0.14: restrained account frames and compact membership badges. */
#gameAvatar[data-membership] { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex:0 0 auto; }
#gameAvatar[data-membership="plus"], .avatar[data-membership="plus"] { border:2px solid #79c9f0; box-shadow:0 0 0 2px #79c9f015; }
#gameAvatar[data-membership="pro"], .avatar[data-membership="pro"] { border:2px solid #bd9cf5; box-shadow:0 0 0 2px #bd9cf518; }
#gameAvatar[data-membership="premium"], .avatar[data-membership="premium"] { border:2px solid #f4d173; box-shadow:0 0 0 2px #f4d17322,0 0 12px #f4d17315; }
.membership-profile-badge { display:inline-block; width:fit-content; margin:2px 0; padding:3px 7px; border:1px solid #60738355; border-radius:99px; font-size:9px; line-height:1.3; font-weight:750; color:var(--muted); }
.membership-profile-badge[data-membership="plus"] { color:#9bdbf9; border-color:#79c9f060; background:#79c9f012; }
.membership-profile-badge[data-membership="pro"] { color:#ceb4ff; border-color:#bd9cf560; background:#bd9cf512; }
.membership-profile-badge[data-membership="premium"] { color:#f4d173; border-color:#f4d17370; background:#f4d17312; }

/* Membership details live in Profile; Home keeps its compact layout. */
#profileMembershipTerm { max-width: 65%; min-width: 0; text-align: right; font-size: .85rem; line-height: 1.5; }
#profileMembershipNote { font-size: .8rem; line-height: 1.5; }

/* V3.0.16: long account names and short phone viewports stay usable. */
.profile-main h2, .referral-status-item strong, .winner-row strong { overflow-wrap:anywhere; }
.referral-status-item { grid-template-columns:minmax(0,1fr) auto; }
.winner-row { grid-template-columns:38px minmax(0,1fr) auto; }
.referral-status-item > div, .winner-row > div { min-width:0; }
.card-dialog { max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; }
.sheet-panel { max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); overflow:auto; overscroll-behavior:contain; }
#profileMembershipNote { margin:12px 15px; }

/* V3.0.17: concise card tiles; full description and gates stay in the dialog. */
.upgrade-card.compact {padding:12px;border-radius:16px;}
.upgrade-card.compact .upgrade-card-top {margin-bottom:8px;}
.upgrade-card.compact .card-art {width:36px;height:36px;border-radius:11px;font-size:23px;}
.upgrade-card.compact .card-labels {gap:5px;margin-bottom:3px;}
.upgrade-card.compact .card-stage {padding:2px 6px;font-size:9px;}
.upgrade-card.compact h2 {font-size:14px;line-height:1.3;margin:4px 0 9px;min-height:36px;overflow-wrap:anywhere;}
.upgrade-card.compact .card-income {margin-top:auto;padding-top:8px;gap:3px;}
.upgrade-card.compact .card-income strong {font-size:16px;overflow-wrap:anywhere;}
.upgrade-card.compact .card-next {margin:5px 0 8px;font-size:10px;}
.upgrade-card.compact .card-next strong {display:inline;}
.card-gate-summary {display:grid;gap:3px;margin:0 0 9px;border-top:1px solid #ffffff0b;padding-top:7px;font-size:10px;line-height:1.4;color:var(--muted);}
.card-gate-summary.ready > span {color:var(--good);}
.card-gate-summary > small {font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.upgrade-card.compact .card-upgrade-btn {padding:9px 5px;font-size:11px;min-height:44px;}
.card-dialog .card-details-description {font-size:12px;margin:8px 0;line-height:1.5;}
.card-details-description[hidden] {display:none;}
@media(max-width:360px){.upgrade-card.compact{padding:10px}.upgrade-card.compact .card-labels{gap:4px}.upgrade-card.compact .card-upgrade-btn{font-size:10px}}

#profileTapLimitNote {margin:0 15px 12px;font-size:.8rem;line-height:1.5;}