/* =====================================================================
   COIN POPUP — Global game-like widget for hub coin system (Dilara Coins 🟣)
   ===================================================================== */

/* ── Navbar trigger button ──────────────────────────────────────────── */
.coin-nav-btn {
  display: none; /* shown by JS once authenticated + coins loaded */
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, rgba(251,191,36,.12) 0%, rgba(245,158,11,.08) 100%);
  color: #fbbf24;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
  position: relative;
}
.coin-nav-btn:hover {
  background: linear-gradient(135deg, rgba(251,191,36,.22) 0%, rgba(245,158,11,.16) 100%);
  border-color: rgba(251,191,36,.6);
  transform: translateY(-1px);
}
.coin-nav-btn:active { transform: translateY(0); }
.coin-nav-btn .cn-icon { font-size: 1rem; line-height: 1; }
.coin-nav-btn .cn-bal {
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}
/* pulsing ring when daily reward is available */
.coin-nav-btn.has-reward::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid var(--surface-bg, #0d0f14);
  animation: coin-pulse-dot 2s ease-in-out infinite;
}
@keyframes coin-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: .7; }
}

/* ── Overlay (fixed flex-centering layer, same pattern as .gs-overlay) ─ */
#coinPopupOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
#coinPopupOverlay.cp-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Backdrop (absolute inside overlay, no stacking-context issues) ─── */
#coinPopupBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Main popup panel (relative, centered by overlay flexbox) ───────── */
#coinPopup {
  position: relative;
  z-index: 1;
  width: min(440px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  background: #0f1117;
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04),
              0 24px 64px rgba(0,0,0,.65),
              0 0 40px rgba(251,191,36,.06);
  transform: scale(0.94);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
#coinPopupOverlay.cp-open #coinPopup {
  transform: scale(1);
}

/* ── Popup header ───────────────────────────────────────────────────── */
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.cp-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-logo { font-size: 1.5rem; line-height: 1; }
.cp-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: -.01em;
}
.cp-balance-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cp-balance-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.cp-balance-num.cp-anim-flash {
  animation: cp-flash-green 0.7s ease forwards;
}
@keyframes cp-flash-green {
  0%  { color: #fff; }
  30% { color: #34d399; text-shadow: 0 0 16px rgba(52,211,153,.7); }
  100%{ color: #fff; text-shadow: none; }
}
.cp-balance-cur { font-size: .75rem; color: rgba(255,255,255,.45); font-weight: 500; }
.cp-balance-eur { font-size: .72rem; color: rgba(255,255,255,.3); }
.cp-close-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.cp-close-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Tab bar ────────────────────────────────────────────────────────── */
.cp-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.cp-tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: none;
  color: rgba(255,255,255,.45);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  text-align: center;
  border-radius: 6px 6px 0 0;
}
.cp-tab:hover { color: rgba(255,255,255,.75); }
.cp-tab.active {
  color: #fbbf24;
  border-bottom-color: #fbbf24;
  background: rgba(251,191,36,.05);
}

/* ── Tab content scroll area ────────────────────────────────────────── */
.cp-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  padding: 18px 18px 20px;
  overscroll-behavior: contain;
}
.cp-pane { display: none; }
.cp-pane.active { display: block; }

/* ── Daily Reward tab ───────────────────────────────────────────────── */
.cp-dr-hero {
  text-align: center;
  padding: 10px 0 16px;
}
.cp-dr-streak-label {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.cp-dr-streak-num {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  color: #fbbf24;
  text-shadow: 0 0 24px rgba(251,191,36,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cp-dr-streak-fire { animation: fire-flicker 1.4s ease-in-out infinite alternate; display: inline-block; }
@keyframes fire-flicker {
  0%   { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.08) rotate(3deg); filter: brightness(1.2); }
}
.cp-dr-streak-subtext {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
}

/* 7-day preview grid */
.cp-dr-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 14px 0;
}
.cp-dr-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: border-color .15s, background .15s;
  position: relative;
}
.cp-dr-day.claimed {
  border-color: rgba(52,211,153,.35);
  background: rgba(52,211,153,.07);
}
.cp-dr-day.today {
  border-color: rgba(251,191,36,.5);
  background: rgba(251,191,36,.09);
  box-shadow: 0 0 12px rgba(251,191,36,.15);
}
.cp-dr-day.future { opacity: .5; }
.cp-dr-day-num {
  font-size: .6rem;
  color: rgba(255,255,255,.4);
  font-weight: 600;
}
.cp-dr-day.today .cp-dr-day-num { color: #fbbf24; }
.cp-dr-day.claimed .cp-dr-day-num { color: #34d399; }
.cp-dr-day-icon { font-size: .85rem; line-height: 1; }
.cp-dr-day-coins {
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
}
.cp-dr-day.today .cp-dr-day-coins { color: #fbbf24; }
.cp-dr-day.claimed .cp-dr-day-icon::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
}

/* Claim button area */
.cp-dr-claim-area {
  text-align: center;
  margin-top: 16px;
}
.cp-dr-coins-label {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.cp-dr-coins-label strong { color: #fbbf24; font-size: 1rem; }
.cp-claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: 14px;
  border: 1px solid rgba(251,191,36,.45);
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(217,119,6,.35);
  letter-spacing: .01em;
}
.cp-claim-btn:hover:not(:disabled) {
  opacity: .9;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(217,119,6,.5);
}
.cp-claim-btn:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
  box-shadow: none;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.4);
}
.cp-claim-btn.claimed-today {
  background: rgba(52,211,153,.12);
  border-color: rgba(52,211,153,.35);
  color: #34d399;
}
.cp-dr-next-time {
  margin-top: 10px;
  font-size: .72rem;
  color: rgba(255,255,255,.35);
}

/* Coin burst animation overlay */
.cp-coin-burst {
  position: absolute;
  pointer-events: none;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
.cp-coin-burst span {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0;
  animation: coin-fly 0.9s ease-out forwards;
}
@keyframes coin-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  80%  { opacity: 0.8; }
  100% { opacity: 0; transform: var(--fly-to) scale(0.4); }
}

/* ── Buy Coins tab ──────────────────────────────────────────────────── */
.cp-buy-intro {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  margin-bottom: 14px;
  line-height: 1.5;
}
.cp-pkg-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-pkg-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(99,102,241,.2);
  background: rgba(99,102,241,.06);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.cp-pkg-card:hover {
  border-color: rgba(99,102,241,.5);
  background: rgba(99,102,241,.12);
  transform: translateY(-1px);
}
.cp-pkg-left { display: flex; align-items: center; gap: 10px; }
.cp-pkg-icon { font-size: 1.4rem; }
.cp-pkg-name { font-size: .9rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cp-pkg-sub  { font-size: .7rem; color: rgba(255,255,255,.4); margin-top: 1px; }
.cp-pkg-bonus {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.35);
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cp-pkg-price {
  font-size: .95rem;
  font-weight: 700;
  color: #a5b4fc;
  white-space: nowrap;
}
.cp-buy-loading {
  text-align: center;
  padding: 20px;
  color: rgba(255,255,255,.4);
  font-size: .82rem;
}
/* Stripe embed container */
#cpStripeMount {
  margin-top: 14px;
  min-height: 100px;
}
.cp-stripe-close-row {
  text-align: center;
  margin-top: 10px;
}
.cp-stripe-cancel-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cp-stripe-cancel-btn:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* ── Wallet tab ─────────────────────────────────────────────────────── */
.cp-wallet-header {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.cp-wallet-list { display: flex; flex-direction: column; gap: 8px; }
.cp-wallet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  gap: 8px;
}
.cp-wallet-card--primary {
  border-color: rgba(251,191,36,.35);
  background: linear-gradient(135deg, rgba(251,191,36,.06) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 0 1px rgba(251,191,36,.08) inset;
}
.cp-wallet-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cp-wallet-sym { font-size: 1.5rem; flex-shrink: 0; }
.cp-wallet-name { font-size: .88rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-wallet-kind { font-size: .68rem; color: rgba(255,255,255,.35); margin-top: 1px; }
.cp-wallet-right { text-align: right; flex-shrink: 0; }
.cp-wallet-amount { font-size: 1.08rem; font-weight: 800; color: #fbbf24; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-wallet-amount-unit { font-size: .72rem; font-weight: 600; margin-left: 3px; opacity: .7; }
.cp-wallet-eur { font-size: .72rem; color: rgba(255,255,255,.4); margin-top: 3px; white-space: nowrap; }
.cp-wallet-eur-rate { font-size: .62rem; color: rgba(255,255,255,.22); margin-left: 4px; }
.cp-wallet-empty { text-align: center; padding: 30px 0; color: rgba(255,255,255,.3); font-size: .82rem; }
@media (max-width: 360px) {
  .cp-wallet-card { flex-wrap: wrap; }
  .cp-wallet-right { width: 100%; text-align: left; padding-left: 34px; }
}

/* ── Login prompt (unauthenticated) ─────────────────────────────────── */
.cp-login-prompt {
  text-align: center;
  padding: 30px 16px;
}
.cp-login-prompt p {
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  margin-bottom: 14px;
}
.cp-login-prompt a {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 10px;
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.35);
  color: #fbbf24;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: background .15s;
}
.cp-login-prompt a:hover { background: rgba(251,191,36,.25); }

/* ── General utility ────────────────────────────────────────────────── */
.cp-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: cp-spin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

.cp-error-msg {
  color: #f87171;
  font-size: .78rem;
  text-align: center;
  padding: 10px 0;
}

/* Scrollbar styling */
.cp-body::-webkit-scrollbar { width: 4px; }
.cp-body::-webkit-scrollbar-track { background: transparent; }
.cp-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* ── Mobile adjustments ─────────────────────────────────────────────── */
@media (max-width: 500px) {
  #coinPopupOverlay {
    align-items: flex-end;
  }
  #coinPopup {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* scale-only entrance; no translate so stacking context stays clean */
    transform: scale(0.97);
  }
  #coinPopupOverlay.cp-open #coinPopup {
    transform: scale(1);
  }
  .cp-dr-days { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .cp-dr-day { padding: 6px 1px; }
}

/* ── Narrow viewport: compact nav-end + coin button ─────────────────── */
@media (max-width: 480px) {
  /* reduce gap between coin btn / search / hamburger */
  .hub-nav-end { gap: 8px; }
  .coin-nav-btn {
    padding: 4px 8px 4px 6px;
    gap: 4px;
    font-size: 0.75rem;
  }
  .coin-nav-btn .cn-bal { min-width: 20px; }
}

/* ── Very narrow (<360 px): show icon only ──────────────────────────── */
@media (max-width: 360px) {
  .coin-nav-btn .cn-bal { display: none; }
  /* keep a square-ish tappable area */
  .coin-nav-btn { padding: 6px 9px; gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEVEL & XP SYSTEM — Navbar pill + Popup XP bar + Level-Up overlay
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Navbar level pill ───────────────────────────────────────────────── */
.level-nav-pill {
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 20px;
  border: 1px solid rgba(167,139,250,.35);
  background: linear-gradient(135deg, rgba(139,92,246,.15) 0%, rgba(167,139,250,.07) 100%);
  color: #a78bfa;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: border-color .2s;
}
.level-nav-pill:hover { border-color: rgba(167,139,250,.6); }
.lv-star  { font-size: .85rem; line-height: 1; }
.lv-badge { font-size: .78rem; letter-spacing: -.01em; }
.lv-track {
  width: 34px;
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: hidden;
}
.lv-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width .6s cubic-bezier(.25,.46,.45,.94);
  width: 0%;
}
@media (max-width: 480px) { .level-nav-pill { display: none !important; } }

/* ── Coin popup XP bar (in header) ──────────────────────────────────── */
.cp-xp-row { margin-top: 7px; }
.cp-xp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cp-xp-level {
  font-size: .7rem;
  color: #a78bfa;
  font-weight: 600;
  letter-spacing: -.01em;
}
.cp-xp-nums {
  font-size: .67rem;
  color: rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}
.cp-xp-bar {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 5px;
  overflow: hidden;
}
.cp-xp-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #6d28d9, #a78bfa);
  transition: width .6s cubic-bezier(.25,.46,.45,.94);
  width: 0%;
}

/* ═══════════════════════════════════════════════════════════════════════
   LEVEL-UP OVERLAY — full-screen mega animation
   ═══════════════════════════════════════════════════════════════════════ */
.lup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483630;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(55,14,90,.93) 0%, rgba(8,6,18,.97) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  outline: none;
}
.lup-overlay.lup-visible {
  opacity: 1;
  pointer-events: auto;
}
.lup-confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}
.lup-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 36px;
  max-width: 460px;
  width: 100%;
}

/* Rotating background rays */
.lup-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -54%);
  background: conic-gradient(
    transparent 0deg, rgba(251,191,36,.07) 9deg, transparent 18deg,
    transparent 27deg, rgba(251,191,36,.07) 36deg, transparent 45deg,
    transparent 54deg, rgba(251,191,36,.07) 63deg, transparent 72deg,
    transparent 81deg, rgba(251,191,36,.07) 90deg, transparent 99deg,
    transparent 108deg, rgba(251,191,36,.07) 117deg, transparent 126deg,
    transparent 135deg, rgba(251,191,36,.07) 144deg, transparent 153deg,
    transparent 162deg, rgba(251,191,36,.07) 171deg, transparent 180deg,
    transparent 189deg, rgba(251,191,36,.07) 198deg, transparent 207deg,
    transparent 216deg, rgba(251,191,36,.07) 225deg, transparent 234deg,
    transparent 243deg, rgba(251,191,36,.07) 252deg, transparent 261deg,
    transparent 270deg, rgba(251,191,36,.07) 279deg, transparent 288deg,
    transparent 297deg, rgba(251,191,36,.07) 306deg, transparent 315deg,
    transparent 324deg, rgba(251,191,36,.07) 333deg, transparent 342deg,
    transparent 351deg, rgba(251,191,36,.07) 360deg
  );
  pointer-events: none;
}
.lup-overlay.lup-visible .lup-rays { animation: lup-rays-spin 10s linear infinite; }

/* LEVEL UP! title */
.lup-title {
  font-size: clamp(2.4rem, 11vw, 5rem);
  font-weight: 900;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-shadow:
    0 0 20px rgba(251,191,36,.9),
    0 0 60px rgba(251,191,36,.45),
    0 0 120px rgba(251,191,36,.2);
  margin-bottom: 20px;
  line-height: 1.05;
}
.lup-overlay.lup-visible .lup-title {
  animation: lup-title-in .65s cubic-bezier(.34,1.56,.64,1) both .15s;
}

/* Level number badge */
.lup-badge-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 20px;
}
.lup-overlay.lup-visible .lup-badge-wrap {
  animation: lup-badge-in .7s cubic-bezier(.34,1.56,.64,1) both .45s;
}
.lup-badge-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(251,191,36,.55);
}
.lup-overlay.lup-visible .lup-badge-ring {
  animation: lup-ring-pulse 1.6s ease-in-out infinite .8s;
}
.lup-level-badge {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(135deg, #b45309 0%, #7c2d12 100%);
  border: 4px solid #fbbf24;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px rgba(251,191,36,.1),
    0 0 40px rgba(251,191,36,.55),
    0 0 90px rgba(251,191,36,.22),
    inset 0 2px 8px rgba(255,255,255,.15);
}
.lup-level-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.lup-level-num {
  font-size: 3.8rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* Subtitle + XP info */
.lup-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,.82);
  margin-bottom: 8px;
}
.lup-overlay.lup-visible .lup-subtitle {
  animation: lup-fade-up .5s ease both .85s;
}
.lup-xp-info {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  margin-bottom: 28px;
  min-height: 1.2em;
}
.lup-overlay.lup-visible .lup-xp-info {
  animation: lup-fade-up .5s ease both 1.0s;
}

/* Dismiss button */
.lup-dismiss-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 40px;
  border-radius: 50px;
  border: 2px solid rgba(251,191,36,.55);
  background: linear-gradient(135deg, rgba(251,191,36,.22) 0%, rgba(251,191,36,.08) 100%);
  color: #fbbf24;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: 0 4px 28px rgba(251,191,36,.25);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.lup-overlay.lup-visible .lup-dismiss-btn {
  animation: lup-fade-up .5s ease both 1.2s;
}
.lup-dismiss-btn:hover {
  background: linear-gradient(135deg, rgba(251,191,36,.38) 0%, rgba(251,191,36,.18) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(251,191,36,.4);
}
.lup-dismiss-btn:active { transform: translateY(0); }

/* Keyframes */
@keyframes lup-title-in {
  0%   { opacity: 0; transform: translateY(40px) scale(.75); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lup-badge-in {
  0%   { opacity: 0; transform: scale(.25) rotate(-20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes lup-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%       { transform: scale(1.12); opacity: .25; }
}
@keyframes lup-rays-spin {
  from { transform: translate(-50%, -54%) rotate(0deg); }
  to   { transform: translate(-50%, -54%) rotate(360deg); }
}
@keyframes lup-fade-up {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── prefers-reduced-motion overrides ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lv-fill, .cp-xp-fill { transition: none; }
  .cp-dr-streak-fire    { animation: none; }
  #coinPopupOverlay     { transition: opacity .1s; }
  #coinPopup            { transition: none; }
  .lup-overlay          { transition: opacity .1s; }
  .lup-overlay.lup-visible .lup-title,
  .lup-overlay.lup-visible .lup-badge-wrap,
  .lup-overlay.lup-visible .lup-subtitle,
  .lup-overlay.lup-visible .lup-xp-info,
  .lup-overlay.lup-visible .lup-dismiss-btn { animation: none !important; opacity: 1; transform: none; }
  .lup-overlay.lup-visible .lup-rays,
  .lup-overlay.lup-visible .lup-badge-ring  { animation: none !important; }
}

/* ── Level-Up overlay mobile ─────────────────────────────────────────── */
@media (max-width: 440px) {
  .lup-content        { padding: 32px 20px; }
  .lup-badge-wrap,
  .lup-level-badge    { width: 120px; height: 120px; }
  .lup-level-num      { font-size: 3rem; }
  .lup-dismiss-btn    { padding: 12px 28px; font-size: .9rem; }
}

/* ── Instance-CSS leakage protection ─────────────────────────────────────────
   #coinPopupOverlay (ID) + descendant selector → specificity (1,1,0), beating
   any instance-CSS pattern up to one-class+one-element (0,1,1).
   ───────────────────────────────────────────────────────────────────────────── */
#coinPopupOverlay[data-deeliar-hub-popup] {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  box-sizing: border-box;
}
#coinPopupOverlay button,
#coinPopupOverlay input,
#coinPopupOverlay select {
  box-sizing: border-box;
  font-family: inherit;
}