/* ==========================================================================
   EarnTrump — Components
   ========================================================================== */

/* --------------------------------------------------------------- NAVBAR -- */
/* The bar is sticky and full width, so a backdrop-filter on it makes the
   browser re-sample and re-blur that strip every time anything underneath
   repaints. On the faucet page the thing underneath is an ad iframe that
   repaints continuously, which pinned the compositor and made the claim timer
   stutter. The blur is now opt-in: opaque by default, translucent only where
   there is headroom for it. */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Pointer + roomy viewport ≈ desktop, where the blur is affordable. Phones and
   tablets — the devices that actually stuttered — keep the opaque bar. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  @supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
    .nav {
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      backdrop-filter: saturate(180%) blur(14px);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
    }
  }
}

/* Anyone who has asked for less motion also gets the cheap bar. */
@media (prefers-reduced-motion: reduce) {
  .nav {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.nav > .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-grad);
  display: grid; place-items: center;
  box-shadow: var(--shadow-accent);
  flex-shrink: 0;
}
.brand-mark img { width: 24px; height: 24px; object-fit: contain; }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.03em; }
.brand-name span { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface-3); }
.nav-links a.active { color: var(--accent); background: var(--accent-soft); }
.nav-links a i { font-size: 12.5px; opacity: .85; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border);
  transition: all .2s var(--ease);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent-line); }

.menu-toggle { display: none; }

/* Wallet chip in nav */
.wallet-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), transform .2s var(--ease-out);
}
.wallet-chip:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Coin mark — the balance now reads as a token amount at a glance. */
.wallet-chip .coin {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.wallet-chip .coin img { width: 100%; height: 100%; object-fit: cover; }

.wallet-chip .amt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.wallet-chip .amt small { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.wallet-chip .amt b { font-family: var(--mono); font-size: 14px; color: var(--accent); }

@media (max-width: 900px) {
  .menu-toggle { display: grid; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 12px; box-shadow: var(--shadow-lg);
    transform: translateY(-120%); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease-out), opacity .2s var(--ease);
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 14px; font-size: 15px; }
}

/* On narrow phones the wordmark + wallet chip + buttons overflow the bar,
   so drop the wordmark and keep the coin mark as the logo. */
@media (max-width: 560px) {
  .nav .brand-name { display: none; }
  .nav > .container { gap: 10px; padding-inline: 14px; }
  .nav-actions { gap: 8px; flex-shrink: 0; }
  .wallet-chip { padding-right: 11px; gap: 8px; }
  .wallet-chip .coin { width: 28px; height: 28px; }
  .wallet-chip .amt b { font-size: 13px; }
}

/* ----------------------------------------------------------------- CARD -- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-pad { padding: 22px; }

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.card-head-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.card-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800;
  background: var(--accent-soft); color: var(--accent);
}
.card-ico.is-green { background: var(--success-soft); color: var(--success); }
.card-ico.is-blue  { background: var(--info-soft);    color: var(--info); }
.card-title h3 { font-size: 15px; font-weight: 700; }
.card-title p  { font-size: 12px; color: var(--muted); margin-top: 1px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); white-space: nowrap;
}
.chip.is-accent  { background: var(--accent-soft);  color: var(--accent);  border-color: var(--accent-line); }
.chip.is-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.chip.is-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }

/* Pulsing live dot */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); position: relative; flex-shrink: 0; }
.dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.8); opacity: 0; } }

/* --------------------------------------------------------------- AMOUNT -- */
.amount-block {
  padding: 24px 22px;
  background: linear-gradient(180deg, var(--surface-2), transparent);
  text-align: center;
}
.amount-block .label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
}
.amount-block .value {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin: 10px 0 6px;
}
.amount-block .value .num {
  font-family: var(--mono); font-size: clamp(28px, 6vw, 38px);
  font-weight: 800; letter-spacing: -.03em; color: var(--text);
}
.amount-block .value .cur { font-size: 13px; font-weight: 700; color: var(--accent); }
.amount-block .sub { font-size: 11.5px; color: var(--muted); }

/* Live USD value shown under a coin amount. */
.usd-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  margin: -2px 0 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .2px;
}

/* ------------------------------------------------------------ STAT GRID -- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; padding: 0 22px 20px; }
.stat {
  padding: 13px 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  text-align: center; min-width: 0;
}
.stat.is-accent { background: var(--accent-soft); border-color: var(--accent-line); }
.stat .k { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 5px; }
.stat .v { display: block; font-family: var(--mono); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.stat.is-accent .v { color: var(--accent); }

/* --------------------------------------------------------------- BUTTON -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease), opacity .2s;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.7); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 17px 26px; font-size: 15px; border-radius: var(--r-lg); }

.btn-primary {
  background: var(--accent-grad); color: var(--on-accent);
  box-shadow: var(--shadow-accent);
  position: relative; overflow: hidden;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: sheen 3.4s linear infinite;
}
.btn-primary:disabled::after { display: none; }
@keyframes sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.btn-ghost { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); }

.btn-soft { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.btn-soft:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }

/* Progress sweep used by the claim cooldown */
/* Driven from JS via --p (0..1) and scaleX, not width. Animating width made the
   button re-layout on every frame of the countdown; scaleX is composited, so
   the fill costs nothing even while an ad iframe is hammering the main thread.
   The old `transition: width .1s` was also being restarted 60x a second, which
   is pure waste — the rAF loop already supplies the smoothing. */
.btn-progress {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  --p: 0;
  transform: scaleX(var(--p));
  transform-origin: left center;
  background: rgba(255,255,255,.18);
  z-index: 0;
  pointer-events: none;
}
.btn > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; }

/* ---------------------------------------------------------------- FORM --- */
.field { display: block; margin-bottom: 14px; }
.field > label {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
}
.field > label i { color: var(--accent); font-size: 12px; }

.input {
  width: 100%; padding: 14px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14.5px; font-weight: 500;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.input::placeholder { color: var(--faint); font-weight: 400; }
.input:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.input.is-center { text-align: center; font-family: var(--mono); font-size: 22px; font-weight: 800; color: var(--accent); }

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-right: 96px; }
.input-group .in-btn { position: absolute; right: 7px; }

.divider {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--faint);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ------------------------------------------------------------- COPY BOX -- */
.copybox {
  display: flex; align-items: center; gap: 8px; padding: 7px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
}
.copybox input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent);
  padding: 6px 8px;
}

/* -------------------------------------------------------------- PAYOUTS -- */
.feed { max-height: 340px; padding: 14px 22px 20px; }
.feed-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.feed-item:last-child { margin-bottom: 0; }
.feed-item:hover { border-color: var(--accent-line); transform: translateX(2px); }
.feed-who { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.feed-meta { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.feed-amt { font-family: var(--mono); font-size: 12.5px; font-weight: 800; color: var(--success); white-space: nowrap; }
.feed-cur { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; opacity: .72; }

/* Telegram call-to-action (coupon page) */
.tg-cta {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-top: 18px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); color: var(--text);
  text-decoration: none; transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.tg-cta:hover { border-color: var(--accent); transform: translateY(-1px); }
.tg-cta-ico {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #229ED9; color: #fff; font-size: 20px;
}
.tg-cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-cta-txt b { font-size: 14px; font-weight: 800; }
.tg-cta-txt small { font-size: 12px; color: var(--muted); }
.tg-cta-go { flex: none; margin-left: auto; color: var(--muted); font-size: 13px; }
.tg-cta:hover .tg-cta-go { color: var(--accent); }

.empty { text-align: center; padding: 46px 20px; color: var(--faint); font-size: 13px; font-weight: 600; }
.empty i { display: block; font-size: 26px; margin-bottom: 12px; opacity: .5; }

/* ---------------------------------------------------------------- MODAL -- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 18px; }
.modal.open { display: grid; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 12, 18, .62); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .28s var(--ease);
}
.modal.in .modal-backdrop { opacity: 1; }
.modal-card {
  position: relative; width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(14px) scale(.97); opacity: 0;
  transition: transform .32s var(--ease-out), opacity .25s var(--ease);
}
.modal.in .modal-card { transform: none; opacity: 1; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.modal-head h3 { font-size: 16px; }
.modal-head small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-top: 3px; }
.modal-body { padding: 22px; }

/* ---------------------------------------------------------------- TOAST -- */
.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; width: min(92vw, 400px); display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 600;
  animation: toast-in .4s var(--ease-out) both;
}
.toast.out { animation: toast-out .3s var(--ease) both; }
.toast i { font-size: 17px; flex-shrink: 0; }
.toast.is-success { border-left: 4px solid var(--success); }
.toast.is-success i { color: var(--success); }
.toast.is-error { border-left: 4px solid var(--danger); }
.toast.is-error i { color: var(--danger); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(10px) scale(.97); } }

/* --------------------------------------------------------------- FOOTER -- */
.footer { margin-top: 60px; padding: 42px 0 34px; border-top: 1px solid var(--border); background: var(--surface); }
.footer-top { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-bottom: 20px; }
.footer-links a { font-size: 12.5px; font-weight: 600; color: var(--muted); transition: color .2s var(--ease); }
.footer-links a:hover { color: var(--accent); }
.footer-legal { text-align: center; font-size: 11px; color: var(--faint); line-height: 1.7; max-width: 560px; margin-inline: auto; }

/* ------------------------------------------------------------------ ADS -- */
/* Deliberately plain: a bare centred block, matching what the ad networks
   expect. `contain: layout paint` used to wall the slot off from the rest of
   the page, but it also clips absolutely/fixed positioned descendants and
   opens a new stacking context — which broke Bitmedia creatives that position
   their own controls outside the slot. `display: flex` was the other half of
   the problem: it made the injected creative a flex item, so it would not
   shrink and got cut by the overflow clip on narrow screens. */
.ad-slot {
  display: block;
  text-align: center;
  overflow: scroll;
}
/* Reserving the height stops the banner shoving the page down when it lands,
   which is the other half of what reads as "lag" mid-claim. */
.ad-slot.is-728 { min-height: 90px; }
.ad-slot.is-300 { min-height: 250px; }
.ad-card { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-lg); padding: 10px; }

/* ------------------------------------------------------------- UTILITY --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   REWARD POP — "+amount" rising out of the header balance.
   ========================================================================== */
.reward-pop {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, 0);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--success);
  text-shadow: 0 1px 8px rgba(22, 163, 74, .35);
  white-space: nowrap;
  animation: rewardPop 1.4s var(--ease-out) forwards;
}

/* Rises upward toward the balance it was added to. */
@keyframes rewardPop {
  0%   { opacity: 0; transform: translate(-50%, 16px) scale(.85); }
  20%  { opacity: 1; transform: translate(-50%, 8px)  scale(1.06); }
  34%  { opacity: 1; transform: translate(-50%, 5px)  scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .reward-pop { display: none; }
}

/* Anchor-styled buttons that need to look disabled. */
.btn.is-disabled {
  opacity: .5;
  pointer-events: none;
}