/* ============================================================
   RACERZ — Staking Portal (v2)
   ============================================================ */
:root {
  --bg-deep: #0a0814;
  --neon-pink: #e01020;
  --neon-pink-soft: #ff5a5a;
  --neon-purple: #8b5cf6;
  --neon-cyan: #34e0ff;
  --neon-green: #2ecc71;
  --text: #f4f1ff;
  --text-dim: #a9a3c6;
  --border-glow: rgba(224, 16, 32, 0.45);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  /* Type: Inter para UI (minimalista) + Orbitron só no wordmark/números display */
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Orbitron", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  letter-spacing: 0.1px;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { position: relative; }

/* Áreas de toque confortáveis e sem callout de seleção no mobile.
   touch-action: manipulation elimina o atraso/zoom do duplo-toque em TODO elemento interativo. */
a, button, input, select, textarea, label,
.app-tab, .btn-connect, .btn-pink, .btn-ghost, .modal-x {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ============================================================
   SCREENS (crossfade)
   ============================================================ */
.screen {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-smooth), visibility 0ms linear 900ms;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--ease-smooth), visibility 0ms;
  z-index: 2;
}
#screen-loading { background-image: url("assets/bg-loading.png"); }
#screen-app     { background-image: url("assets/bg-garage.png"); }
#screen-denied  { background-image: url("assets/bg-denied.png"); }

.denied-overlay { position: absolute; inset: 0; background: rgba(4,3,10,0.55); z-index: 1; pointer-events: none; }
.denied-card {
  position: relative; z-index: 3; text-align: center;
  width: min(90vw, 520px); padding: 44px 40px;
  background: rgba(14, 11, 26, 0.5);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.denied-title { font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 34px; letter-spacing: 2px; color: var(--neon-pink); }
.denied-text { color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 16px 0 26px; }
body.is-denied #ticker-bar { display: none; }

/* Screen 1 usa vídeo em loop como background em vez de imagem estática */
.landing-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Camada preta a 35% sobre o vídeo da landing */
.landing-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* vinheta sutil para profundidade/legibilidade nas telas de imagem */
.loading-overlay, .app-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 35%, transparent 45%, rgba(6, 4, 14, 0.7) 100%),
    linear-gradient(180deg, rgba(10, 8, 20, 0.25), rgba(10, 8, 20, 0.55));
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0);
}
/* +20% de escurecimento só no fundo geral do app (sobre a imagem de fundo) */
.app-overlay {
  background:
    linear-gradient(0deg, rgba(6, 4, 14, 0.2), rgba(6, 4, 14, 0.2)),
    radial-gradient(120% 90% at 50% 35%, transparent 45%, rgba(6, 4, 14, 0.7) 100%),
    linear-gradient(180deg, rgba(10, 8, 20, 0.25), rgba(10, 8, 20, 0.55));
}
#screen-loading { isolation: isolate; border: 16px solid #000; }
/* Efeito TV/CRT sobre o vídeo de loading: scanlines + vinheta + moldura + flicker */
.tv-fx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translateZ(0);
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 2px, transparent 4px);
  box-shadow:
    inset 0 0 120px rgba(0,0,0,0.85),
    inset 0 0 0 3px rgba(255,255,255,0.06),
    inset 0 0 40px rgba(224,16,32,0.15);
  border-radius: 6px;
  animation: tv-flicker 3.6s infinite steps(1);
}
.tv-fx::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.07), transparent);
  animation: tv-scan 6s linear infinite;
}
@keyframes tv-flicker { 0%,97%{opacity:1} 98%{opacity:0.82} 99%{opacity:1} }
@keyframes tv-scan { from { top: -25%; } to { top: 100%; } }
/* Ticker: topo na landing, rodapé no app, escondido no loading */
body.is-landing #ticker-bar { top: 22px; bottom: auto; }
body.is-loading #ticker-bar { opacity: 0; visibility: hidden; }

/* ============================================================
   TOP GLASS BAR — live sales (retângulo flutuante)
   ============================================================ */
#ticker-bar {
  position: fixed;
  bottom: 18px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 96vw);
  height: 56px;
  display: flex;
  align-items: stretch;
  background: rgba(16, 12, 30, 0.42);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  z-index: 50;
}
.ticker-label {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  font-family: "Orbitron", sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 2px;
  color: var(--neon-pink);
  background: rgba(224, 16, 32, 0.10);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap; z-index: 2;
}
.ticker-label .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink);
  animation: pulse-dot 1.4s infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.ticker-viewport { position: relative; flex: 1; overflow: hidden; }
.ticker-viewport::before, .ticker-viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.ticker-viewport::before { left: 0; background: linear-gradient(90deg, rgba(16,12,30,0.9), transparent); }
.ticker-viewport::after  { right: 0; background: linear-gradient(270deg, rgba(16,12,30,0.9), transparent); }

.ticker-track {
  display: inline-flex; align-items: center; height: 100%;
  white-space: nowrap; will-change: transform;
  animation: ticker-scroll 120s linear infinite;
}
#ticker-bar:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px; height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background 160ms;
}
a.ticker-item:hover { background: rgba(255,255,255,0.07); }
.ticker-item img {
  width: 34px; height: 34px; border-radius: 7px; object-fit: cover;
  border: 1px solid rgba(224, 16, 32, 0.4);
  box-shadow: 0 0 8px rgba(224, 16, 32, 0.25);
  background: #1a1430;
}
.ticker-item .ti-id { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 13px; color: var(--text); }
.ticker-item .ti-price {
  font-weight: 700; font-size: 13px; color: var(--neon-cyan);
  display: inline-flex; align-items: center; gap: 4px;
}
.ticker-item .ti-price svg { width: 9px; height: 14px; opacity: 0.9; }
.ticker-item .ti-price em { font-style: normal; font-size: 11px; color: var(--text-dim); font-weight: 600; }
.ticker-item .ti-thumb-fallback {
  width: 34px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, #241a3f, #14102a);
  border: 1px solid rgba(224,16,32,0.35);
}
.ticker-empty { display:flex; align-items:center; padding: 0 22px; color: var(--text-dim); font-size: 13px; letter-spacing: 1px; }

/* ============================================================
   SCREEN 1 — logo + rodapé com stats
   ============================================================ */
.landing-center {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.brand-logo {
  width: min(100%, 400px); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.landing-footer {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 20px;
}
.lf-tagline { color: #fff; font-size: 15px; letter-spacing: 1px; opacity: 0.92; text-align: center; }
.lf-tagline b { color: #fff; font-weight: 700; }
.lf-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 22px; border-radius: 12px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.stat-label { font-size: 10px; letter-spacing: 1.5px; color: rgba(255,255,255,0.6); font-weight: 600; }
.stat-value { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
@media (max-width: 560px) { .brand-logo { width: 78vw; } .lf-tagline { font-size: 13px; } .stat { padding: 8px 14px; } .stat-value { font-size: 14px; } }

/* ============================================================
   SCREEN 1 — CONNECT CARD (painel glass)
   ============================================================ */
.connect-card {
  position: relative; z-index: 3;
  width: min(92vw, 600px);
  padding: 44px 48px 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  background: rgba(14, 11, 26, 0.34);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: card-in 700ms var(--ease-smooth) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.btn-connect {
  width: 100%; max-width: 420px;
  padding: 22px 24px;
  font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 2px;
  color: #fff;
  background: rgba(10, 8, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 200ms var(--ease-smooth), box-shadow 220ms var(--ease-smooth),
              border-color 220ms, background 220ms;
}
.btn-connect::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg); animation: sheen 4s ease-in-out infinite;
}
@keyframes sheen { 0%, 60% { left: -120%; } 85%, 100% { left: 130%; } }
.btn-connect:hover {
  transform: translateY(-2px);
  border-color: var(--neon-pink);
  background: rgba(224, 16, 32, 0.14);
  box-shadow: 0 12px 36px rgba(224, 16, 32, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-connect:active { transform: translateY(0) scale(0.985); }
.btn-connect.is-loading { pointer-events: none; opacity: 0.75; }

/* ============================================================
   SCREEN 2 — LOADING
   ============================================================ */
.loading-content { position: relative; z-index: 3; text-align: center; width: min(90vw, 520px); }
.loading-badge {
  display: inline-block; padding: 6px 16px; margin-bottom: 18px;
  font-family: "Orbitron", sans-serif; font-weight: 700; letter-spacing: 3px; font-size: 12px;
  color: var(--neon-pink); border: 1px solid var(--border-glow); border-radius: 999px;
  background: rgba(224, 16, 32, 0.08); box-shadow: 0 0 20px rgba(224,16,32,0.25);
  animation: flicker 2.4s infinite;
}
@keyframes flicker { 0%,100%{opacity:1} 92%{opacity:1} 94%{opacity:0.4} 96%{opacity:1} }
.loading-title {
  font-family: "Orbitron", sans-serif; font-weight: 900; font-size: clamp(24px, 5vw, 40px);
  letter-spacing: 3px; text-shadow: none;
}
.loading-bar {
  margin: 24px auto 0; width: 100%; max-width: 380px; height: 6px;
  background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden;
}
.loading-bar-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink));
  border-radius: 999px;
  transition: width 400ms var(--ease-smooth);
}
@keyframes fill { from { width: 0%; } to { width: 100%; } }
.loading-status { margin-top: 14px; font-size: 15px; letter-spacing: 1px; color: var(--text-dim); }

/* ============================================================
   SCREEN 3 — APP (placeholder / welcome)
   ============================================================ */
.app-shell { position: relative; z-index: 3; text-align: center; }
.app-placeholder {
  font-family: "Orbitron", sans-serif; font-weight: 700; letter-spacing: 2px;
  color: var(--text-dim); font-size: 14px;
  padding: 14px 22px; border: 1px dashed rgba(255,255,255,0.2); border-radius: 12px;
  background: rgba(0,0,0,0.55);
}
.app-welcome {
  padding: 40px 48px;
  background: rgba(14, 11, 26, 0.42);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.aw-hi { font-family: "Orbitron", sans-serif; font-size: 12px; letter-spacing: 3px; color: var(--neon-pink); }
.aw-user { font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 30px; margin-top: 6px; }
.aw-meta { color: var(--text-dim); margin-top: 6px; font-size: 15px; letter-spacing: 0.5px; }
.aw-nft { margin-top: 14px; font-size: 15px; color: var(--text); }
.btn-ghost {
  margin-top: 22px; padding: 12px 28px;
  font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.5px; font-size: 13px;
  color: var(--text); cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  transition: border-color 200ms, background 200ms;
}
.btn-ghost:hover { border-color: var(--neon-pink); background: rgba(224,16,32,0.14); }

/* ---- App frame / layout ---- */
#screen-app { align-items: stretch; justify-content: flex-start; }
.app-frame {
  position: relative; z-index: 3;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding-top: 0; /* nav colado no topo, full-bleed */
}
/* ---- Barra superior: flat, full-bleed, minimalista ---- */
.app-nav {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 26px;
  margin: 0; width: 100%;
  padding: 0 26px; height: 62px;
  background: rgba(9, 7, 16, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: none; border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
  box-shadow: 0 6px 22px rgba(0,0,0,0.32);
}
.app-brand {
  font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 21px;
  color: var(--neon-pink); letter-spacing: 0.5px; text-shadow: 0 0 18px rgba(224,16,32,0.35);
}
.app-tabs { display: flex; gap: 26px; flex: 1; justify-content: center; flex-wrap: wrap; }
.app-tab {
  position: relative; overflow: visible;
  padding: 8px 2px; border-radius: 0;
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; letter-spacing: 0.5px;
  color: var(--text-dim);
  background: none; border: none; box-shadow: none;
  cursor: pointer;
  transition: color 200ms var(--ease-smooth), transform 120ms var(--ease-smooth);
}
.app-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--neon-pink); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform 240ms var(--ease-smooth);
}
.app-tab:hover { color: var(--text); }
.app-tab:active { transform: scale(0.96); }
.app-tab.is-active { color: #fff; }
.app-tab.is-active::after { transform: scaleX(1); }

/* ---- HUD do usuário: chips de saldo + carteira + disconnect ---- */
.app-user { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.hud-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 8px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.chip-ico, .chip-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
}
.chip-ico svg, .chip-avatar svg { width: 16px; height: 16px; }
.chip-avatar { border-radius: 50%; color: var(--neon-purple); overflow: hidden; }
.chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.chip-label { font-size: 9.5px; letter-spacing: 0.6px; color: var(--text-dim); font-weight: 600; }
.chip-value { font-size: 13px; font-weight: 700; color: var(--text); }
.balance-chip .chip-value { color: var(--neon-green); }
.btn-disconnect {
  display: inline-flex; align-items: center; justify-content: center; height: 40px;
  padding: 0 18px; border-radius: 11px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.6px;
  color: var(--neon-pink);
  background: rgba(224,16,32,0.08); border: 1px solid rgba(224,16,32,0.35);
  transition: background 180ms, border-color 180ms, color 180ms;
}
.btn-disconnect:hover { background: rgba(224,16,32,0.18); border-color: var(--neon-pink); color: #fff; }

.app-content {
  flex: 1; overflow-y: auto;
  margin: 26px auto 0; width: min(1320px, 94vw);
  padding-bottom: 40px;
}
.app-page { display: none; }
.app-page.is-active { display: block; animation: page-in 400ms var(--ease-smooth); }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.soon {
  margin-top: 60px; text-align: center; color: var(--text-dim);
  font-family: "Orbitron", sans-serif; letter-spacing: 2px; font-size: 16px;
}

/* ---- Botões ---- */
.btn-pink {
  padding: 13px 24px; border: none; border-radius: 11px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.5px;
  color: #fff; background: linear-gradient(135deg, #e01020, #7a0d16);
  box-shadow: 0 8px 24px rgba(224,16,32,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 160ms, box-shadow 160ms, filter 160ms;
}
.btn-pink:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(224,16,32,0.5); filter: brightness(1.06); }
.btn-pink:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 9px 16px; font-size: 12px; }

/* ---- Icon color helpers (hexágonos / chips) ---- */
.ico-red { color: var(--neon-pink); }
.ico-purple { color: var(--neon-purple); }
.ico-green { color: var(--neon-green); }
.ico-pink { color: #ff5aa0; }

/* ---- Staking ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 1px;
  text-shadow: none;
}

/* Stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 13px;
  background: rgba(14, 11, 26, 0.4);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}
.stat-ico {
  flex-shrink: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.stat-ico svg { width: 21px; height: 21px; }
.stat-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stat-name { font-size: 9.5px; letter-spacing: 0.6px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; }
.stat-figure { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.stat-figure b { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: #fff; line-height: 1; }
.stat-figure em { font-style: normal; font-size: 10.5px; color: var(--text-dim); font-weight: 500; }
#stat-accumulated { color: var(--neon-green); }

.staking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stk-col {
  background: rgba(14, 11, 26, 0.4);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px;
}
.stk-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stk-col-head h3 { font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.8px; color: var(--text); text-transform: uppercase; }
.col-refresh {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  transition: color 160ms, border-color 160ms, transform 300ms var(--ease-smooth);
}
.col-refresh:hover { color: var(--text); border-color: var(--border-glow); transform: rotate(180deg); }
.nft-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.muted { color: var(--text-dim); font-size: 13px; grid-column: 1 / -1; }
.nft-card {
  background: rgba(20, 15, 38, 0.6); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 11px; text-align: left;
  transition: border-color 180ms, transform 180ms;
}
.nft-card:hover { border-color: var(--border-glow); transform: translateY(-2px); }
.nft-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #1a1430; margin-bottom: 9px; }
.nft-card .nft-id { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 6px; }
.nft-card .nft-stat { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; }
.nft-card .nft-stat-k { color: var(--text-dim); min-width: 40px; }
.nft-card .nft-stat-v { color: var(--neon-green); font-weight: 600; }
.nft-card button {
  width: 100%; margin-top: 11px; padding: 9px; border-radius: 9px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 11.5px; letter-spacing: 0.5px;
  color: #fff; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
  transition: all 160ms;
}
.nft-card .stake-btn:hover { background: rgba(224,16,32,0.18); border-color: var(--neon-pink); }
.nft-card .unstake-btn { color: var(--neon-pink); border-color: rgba(224,16,32,0.4); background: rgba(224,16,32,0.06); }
.nft-card .unstake-btn:hover { background: rgba(224,16,32,0.16); border-color: var(--neon-pink); color: #fff; }
.nft-card button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Empty state do painel AVAILABLE */
.stk-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 30px 12px; }
.stk-empty-logo {
  width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: rgba(224,16,32,0.12);
  font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--neon-pink); letter-spacing: -1px;
}
.stk-empty-logo em { font-style: italic; }
.stk-empty-title { font-weight: 600; font-size: 14px; color: var(--text); margin-top: 4px; }
.stk-empty-sub { font-size: 12.5px; color: var(--text-dim); max-width: 250px; line-height: 1.45; }
.btn-update-wallet {
  margin-top: 6px; padding: 10px 20px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
  transition: border-color 160ms, background 160ms;
}
.btn-update-wallet:hover { border-color: var(--neon-pink); background: rgba(224,16,32,0.12); }

/* Barra de rewards (rodapé do staking) */
.rewards-bar {
  margin-top: 16px; display: flex; align-items: center; gap: 22px;
  padding: 15px 22px;
  background: rgba(14, 11, 26, 0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
}
.rw-cell { display: flex; align-items: center; gap: 12px; }
.rw-cell + .rw-cell { padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.08); }
.rw-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, currentColor 15%, transparent);
}
.rw-ico svg { width: 20px; height: 20px; }
.rw-text { display: flex; flex-direction: column; }
.rewards-label { display: block; font-size: 9.5px; letter-spacing: 0.6px; color: var(--text-dim); text-transform: uppercase; font-weight: 600; }
.rewards-value { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--neon-green); line-height: 1.2; }
.rewards-sub { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--neon-green); line-height: 1.3; }
.btn-claim { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.btn-claim svg { width: 17px; height: 17px; }
.hidden { display: none !important; }

/* ---- Admin: boosts ---- */
.boost-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.boost-input {
  height: 46px; padding: 0 14px; border-radius: 10px; font-family: "Rajdhani", sans-serif; font-size: 15px;
  color: var(--text);
  background: rgba(22, 17, 40, 0.55);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.boost-input:focus { outline: none; border-color: var(--neon-pink); }
select.boost-input { cursor: pointer; }
/* trait e value largos; multiplicador menor */
#boost-trait-type, #boost-value { flex: 1 1 220px; min-width: 190px; }
#boost-multiplier { flex: 0 0 110px; min-width: 110px; }
/* opções do dropdown com fundo escuro "solid glass" */
.boost-input option { background: #16112a; color: var(--text); }
.boost-form .btn-pink { flex: 0 0 auto; }
.boost-hint { color: var(--text-dim); font-size: 13px; margin-top: 12px; }
.boost-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.boost-row .br-info { font-size: 15px; }
.boost-row .br-mult { font-family: "Orbitron", sans-serif; font-weight: 700; color: #ffd34d; }
.boost-row .br-del {
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px;
  color: #fff; background: rgba(224,16,32,0.18); border: 1px solid rgba(224,16,32,0.4);
}
.boost-row .br-del:hover { background: rgba(224,16,32,0.35); }

/* color picker no form */
.boost-color { flex: 0 0 52px; min-width: 52px; height: 46px; padding: 5px; cursor: pointer;
  background: rgba(22, 17, 40, 0.55);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.boost-color::-webkit-color-swatch-wrapper { padding: 0; }
.boost-color::-webkit-color-swatch { border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; }
.boost-color::-moz-color-swatch { border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; }
.br-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(255,255,255,0.4); }

/* ---- NFT com boost: glass brilhoso (sem neon), cor definida pela regra ---- */
.nft-card.boosted {
  --boost-color: #ffd34d;
  border-color: color-mix(in srgb, var(--boost-color) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--boost-color) 16%, transparent), rgba(20,15,38,0.6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 22px rgba(0,0,0,0.4);
}
.nft-boost-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 7px;
  font-family: "Orbitron", sans-serif; font-weight: 800; font-size: 11px; color: #1a1200;
  background: linear-gradient(135deg, color-mix(in srgb, var(--boost-color) 95%, white 20%), var(--boost-color));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}

/* ---- Boost EMPILHADO (2+ traits somados): destaque especial ---- */
.nft-card.boosted.stacked {
  border-color: color-mix(in srgb, var(--boost-color) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 0 1px color-mix(in srgb, var(--boost-color) 32%, transparent),
    0 8px 26px rgba(255,138,30,0.28);
}
.nft-boost-badge.stacked {
  color: #2a1400;
  background: linear-gradient(135deg, #ffd34d, #ff8a1e 55%, #ff3da6);
  border-color: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 12px rgba(255,138,30,0.5);
  animation: stack-pulse 1.9s ease-in-out infinite;
}
@keyframes stack-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 10px rgba(255,138,30,0.42); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 18px rgba(255,138,30,0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .nft-boost-badge.stacked { animation: none; }
}

/* ações abaixo do grid da carteira */
.stk-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 16px; }
.stk-actions .btn-ghost, .stk-actions .btn-pink { width: 100%; max-width: 260px; text-align: center; }

/* ---- Modal (todas as NFTs) ---- */
.modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4, 3, 10, 0.72); backdrop-filter: blur(4px); }
.modal-box {
  position: relative; z-index: 2;
  width: min(92vw, 900px); max-height: 84vh;
  display: flex; flex-direction: column;
  background: rgba(16, 12, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); padding: 22px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h3 { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.modal-x { background: none; border: none; color: var(--text-dim); font-size: 30px; line-height: 1; cursor: pointer; }
.modal-x:hover { color: var(--neon-pink); }
.modal-grid { grid-template-columns: repeat(4, 1fr); max-height: 60vh; margin-bottom: 18px; }
@media (max-width: 640px) { .modal-grid { grid-template-columns: repeat(2, 1fr); } }
.modal-box.modal-sm { width: min(92vw, 460px); }

/* confirm modal */
.confirm-text { color: var(--text); font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.confirm-actions { display: flex; gap: 12px; justify-content: flex-end; }
.confirm-actions .btn-ghost, .confirm-actions .btn-pink { margin: 0; }

/* nft info / traits */
.nft-info-imgwrap { position: relative; margin-bottom: 16px; line-height: 0; }
.nft-info-imgwrap .nft-info-img { margin-bottom: 0; }
.nft-info-img { width: 100%; border-radius: 12px; margin-bottom: 16px; background: #1a1430; }
/* badge de rank (OpenSea) no canto sup. direito da foto da NFT */
.nft-info-rank {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  font-family: "Orbitron", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.5px;
  padding: 4px 9px; border-radius: 8px; color: #fff;
  background: rgba(10,8,20,0.72); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nft-info-rank.boosted {
  color: #fff6d8; border-color: #ffd34d;
  box-shadow: 0 0 14px rgba(255,211,77,0.85);
  animation: rank-glow 1.8s ease-in-out infinite;
}
@keyframes rank-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,211,77,0.55); }
  50% { box-shadow: 0 0 20px rgba(255,211,77,1); }
}
@media (prefers-reduced-motion: reduce) { .nft-info-rank.boosted { animation: none; } }
.traits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.trait {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(224,16,32,0.08); border: 1px solid rgba(224,16,32,0.25);
}
.trait .t-type { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.trait .t-val { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 13px; color: var(--text); }

/* Trait com boost: brilho pulsante na cor da regra + selo xN */
.trait.boosted {
  background: linear-gradient(160deg, color-mix(in srgb, var(--boost-color) 22%, transparent), rgba(20,15,38,0.5));
  border-color: color-mix(in srgb, var(--boost-color) 62%, transparent);
  animation: trait-glow 1.8s ease-in-out infinite;
}
@keyframes trait-glow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--boost-color) 22%, transparent), 0 0 10px color-mix(in srgb, var(--boost-color) 28%, transparent); }
  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--boost-color) 42%, transparent), 0 0 22px color-mix(in srgb, var(--boost-color) 62%, transparent); }
}
.trait.boosted .t-val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.t-boost {
  font-family: var(--font-display); font-weight: 800; font-size: 11px; color: #2a1400;
  padding: 1px 8px; border-radius: 999px; line-height: 1.5;
  background: linear-gradient(135deg, color-mix(in srgb, var(--boost-color) 92%, white 25%), var(--boost-color));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.trait-boost-summary {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: 10px;
  font-size: 12px; color: #ffcaa0;
  background: linear-gradient(135deg, rgba(255,138,30,0.16), rgba(255,61,166,0.12));
  border: 1px solid rgba(255,138,30,0.4);
}
.trait-boost-summary b { color: #fff; font-family: var(--font-display); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .trait.boosted { animation: none; } }

/* botão "i" de info no card — quadradinho glass no canto sup. direito */
.nft-card { position: relative; }
.nft-card .nft-info-btn {
  position: absolute; top: 8px; right: 8px; width: 27px; height: 27px; margin: 0;
  border-radius: 8px; border: 1.5px solid var(--neon-pink);
  background: rgba(224,16,32,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(224,16,32,0.55), inset 0 1px 0 rgba(255,255,255,0.30);
  color: #ffe9ea; cursor: pointer; z-index: 2;
  font-family: "Orbitron", sans-serif; font-weight: 800; font-size: 13px; font-style: italic; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0;
  transition: background 160ms, transform 160ms, box-shadow 160ms;
  animation: nft-info-pulse 2.2s ease-in-out infinite;
}
@keyframes nft-info-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(224,16,32,0.45), inset 0 1px 0 rgba(255,255,255,0.30); }
  50% { box-shadow: 0 0 17px rgba(224,16,32,0.9), inset 0 1px 0 rgba(255,255,255,0.30); }
}
@media (prefers-reduced-motion: reduce) { .nft-card .nft-info-btn { animation: none; } }
.nft-card .nft-info-btn:hover { background: rgba(224,16,32,0.36); transform: scale(1.12); box-shadow: 0 0 18px rgba(224,16,32,0.95); }
.app-content { padding-bottom: 96px; }

@media (max-width: 820px) {
  .staking-grid { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .app-frame { padding-top: 0; }

  /* Nav empilhado: linha 1 = marca + usuário, linha 2 = abas roláveis */
  .app-nav {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    width: 100%;
  }
  .app-brand { order: 1; font-size: 18px; }
  .app-user  { order: 2; margin-left: auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .hud-chip { padding: 5px 10px 5px 6px; }
  .app-tabs  {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 8px;
    padding: 4px 2px 6px;
    margin: 0 -2px;
    /* fade nas bordas para indicar que há mais abas */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .app-tabs::-webkit-scrollbar { display: none; }
  .app-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 11px 16px;
    font-size: 12px;
  }
}

/* ============================================================
   Toasts
   ============================================================ */
.toast-stack {
  position: fixed; bottom: 24px; right: 24px; z-index: 400; /* acima de qualquer modal */
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.toast {
  min-width: 220px; max-width: 360px;
  padding: 14px 18px; border-radius: 12px;
  font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
  color: var(--text);
  background: rgba(18, 14, 34, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--neon-purple);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5);
  opacity: 0; transform: translateX(20px);
  transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { border-left-color: #2ecc71; }
.toast-error { border-left-color: var(--neon-pink); }
.toast-info { border-left-color: var(--neon-cyan); }

/* ============================================================
   FLASH de transição
   ============================================================ */
.flash { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: #fff; opacity: 0; }
.flash.fire { animation: flash-anim 620ms ease-out; }
@keyframes flash-anim { 0% { opacity: 0; } 18% { opacity: 0.85; } 100% { opacity: 0; } }

/* ============================================================
   Responsivo
   ============================================================ */
/* ============================================================
   Scrollbars — desktop com mouse: troca a barra branca do sistema por
   um scroll fino "glass". No mobile/touch mantém o overlay nativo bonito.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .app-content, .nft-grid, .modal-box, .modal-grid, #boost-list {
    scrollbar-width: thin;                                  /* Firefox */
    scrollbar-color: rgba(255,255,255,0.16) transparent;   /* thumb / track */
  }
  .app-content::-webkit-scrollbar,
  .nft-grid::-webkit-scrollbar,
  .modal-box::-webkit-scrollbar,
  .modal-grid::-webkit-scrollbar,
  #boost-list::-webkit-scrollbar {
    width: 8px; height: 8px;
  }
  .app-content::-webkit-scrollbar-track,
  .nft-grid::-webkit-scrollbar-track,
  .modal-box::-webkit-scrollbar-track,
  .modal-grid::-webkit-scrollbar-track,
  #boost-list::-webkit-scrollbar-track {
    background: transparent;
  }
  .app-content::-webkit-scrollbar-thumb,
  .nft-grid::-webkit-scrollbar-thumb,
  .modal-box::-webkit-scrollbar-thumb,
  .modal-grid::-webkit-scrollbar-thumb,
  #boost-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
    border: 2px solid transparent;      /* afasta o thumb da borda (efeito flutuante) */
    background-clip: padding-box;
  }
  .app-content::-webkit-scrollbar-thumb:hover,
  .nft-grid::-webkit-scrollbar-thumb:hover,
  .modal-box::-webkit-scrollbar-thumb:hover,
  .modal-grid::-webkit-scrollbar-thumb:hover,
  #boost-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.26);
    background-clip: padding-box;
  }
}

/* ============================================================
   MOBILE — telefones (iPhone SE/12/13/14/15, Pro Max, Galaxy, Pixel)
   Safe-areas do notch/home indicator + touch targets ≥44px
   ============================================================ */
@media (max-width: 768px) {
  /* Respeita entalhe/barra do sistema em todas as telas */
  .landing-center,
  .loading-content,
  .denied-card,
  .app-frame {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .app-frame { padding-top: max(12px, env(safe-area-inset-top)); }

  /* Ticker fixo no rodapé, acima do home indicator */
  #ticker-bar {
    height: 52px;
    width: calc(100vw - 20px);
    bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 14px;
  }
  body.is-landing #ticker-bar {
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
  }
  .ticker-label { font-size: 10px; padding: 0 14px; letter-spacing: 1px; }
  .ticker-item { padding: 0 16px; gap: 8px; }
  .ticker-item img, .ticker-item .ti-thumb-fallback { width: 30px; height: 30px; }

  /* App content acima do ticker do rodapé */
  .app-content {
    width: 100%;
    margin-top: 12px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* Cabeçalho da página empilha e alinha */
  .page-head { gap: 12px; margin-bottom: 16px; }
  .page-title { font-size: 22px; }

  /* Colunas de staking mais compactas; grid de NFTs sem altura travada */
  .stk-col { padding: 14px; border-radius: 14px; }
  .nft-grid { gap: 12px; max-height: none; }

  /* Barra de rewards empilhada e botão full-width */
  .rewards-bar {
    flex-direction: column; align-items: stretch; gap: 14px;
    padding: 16px 18px; text-align: center;
  }
  .rewards-bar .btn-pink { width: 100%; }
  .rewards-value { font-size: 22px; }

  /* Landing */
  .connect-card { width: min(94vw, 480px); padding: 36px 22px 38px; gap: 26px; }
  .btn-connect { font-size: 18px; padding: 18px; }
  .landing-footer { bottom: calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .lf-stats { gap: 10px; }

  /* Modais ocupam a tela com folga e respeitam safe-area */
  .modal-box {
    width: min(94vw, 900px);
    max-height: min(86vh, calc(100dvh - 32px));
    padding: 18px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    border-radius: 16px;
  }
  .modal-grid { grid-template-columns: repeat(2, 1fr); max-height: 62vh; }

  /* Toasts largura total e acima do ticker */
  .toast-stack {
    left: 12px; right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  .toast { min-width: 0; max-width: none; }

  /* Form de boost (admin) empilhado */
  .boost-form { gap: 10px; }
  #boost-trait-type, #boost-value { flex: 1 1 100%; min-width: 0; }
  #boost-multiplier { flex: 1 1 auto; }
  .boost-form .btn-pink { flex: 1 1 100%; }
}

/* Telefones estreitos: iPhone SE / Galaxy S (360–414px) */
@media (max-width: 480px) {
  .app-brand { font-size: 16px; }
  .app-tab { padding: 10px 2px; font-size: 11px; }
  .chip-value { font-size: 12px; }
  .chip-label { font-size: 9px; }
  .wallet-chip { display: none; } /* economiza espaço; saldo + disconnect bastam no mobile */
  .btn-disconnect { padding: 0 12px; font-size: 11px; height: 36px; }

  .page-title { font-size: 18px; }
  .btn-connect { font-size: 17px; padding: 16px; letter-spacing: 1px; }
  .brand-logo { width: 82vw; }

  .lf-tagline { font-size: 12px; }
  .stat { padding: 8px 14px; min-width: 68px; }
  .stat-value { font-size: 14px; }
  .stat-label { font-size: 9px; }

  .denied-card { padding: 34px 24px; }
  .denied-title { font-size: 26px; }
  .denied-text { font-size: 14px; }

  .traits-grid { grid-template-columns: 1fr; }
}

/* Telefones muito estreitos (≤360px: iPhone SE antigo, Galaxy S mini) */
@media (max-width: 360px) {
  /* A unidade repete o rótulo do card ("DAILY $CAZH" etc.) e clipava — some */
  .stat-figure em { display: none; }
  .nft-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nft-card { padding: 10px; }
  .app-tab { padding: 9px 12px; }
  .connect-card { padding: 30px 18px 32px; }
  .btn-connect { font-size: 15px; }
  .lf-stats { gap: 8px; }
  .stat { padding: 7px 10px; }
}

/* Paisagem em telefones baixos: nav fixo, conteúdo rola sob ele */
@media (max-height: 480px) and (orientation: landscape) {
  .landing-footer { position: static; margin-top: 18px; }
  .landing-center { gap: 16px; }
  .connect-card { padding: 22px 26px; gap: 18px; }
  .brand-logo { width: min(60vw, 280px); }
}

/* ============ Pill sub-tabs (shop + admin + raffles) ============ */
.shop-subtabs, .admin-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-subtab, .admin-subtab, .raffle-subtab, .auction-subtab {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.5px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
}
.shop-subtab:hover, .admin-subtab:hover, .raffle-subtab:hover, .auction-subtab:hover { color: var(--text); border-color: var(--border-glow); }
.shop-subtab.is-active, .admin-subtab.is-active, .raffle-subtab.is-active, .auction-subtab.is-active { color: #fff; background: var(--neon-pink); border-color: var(--neon-pink); box-shadow: 0 0 16px rgba(224,16,32,0.5); }

/* ADMIN sections (only the active sub-tab is shown) */
.admin-section { display: none; }
.admin-section.is-active { display: block; }

/* ============ $CAZH SHOP ============ */

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.shop-card {
  position: relative; display: flex; flex-direction: column;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 12px; transition: transform 0.2s var(--ease-smooth), border-color 0.2s;
}
.shop-card:hover { border-color: var(--border-glow); transform: translateY(-2px); }
.shop-card.soldout { opacity: 0.66; }
.shop-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #1a1430; margin-bottom: 10px; }
.shop-name { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.25; }
.shop-desc { color: var(--text-dim); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.shop-meta { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; gap: 8px; }
.shop-price { color: var(--neon-cyan); font-weight: 700; font-size: 14px; }
.shop-stock { color: var(--text-dim); font-size: 11px; letter-spacing: 0.5px; }
.shop-action { margin-top: auto; }
.shop-action .btn-pink, .shop-action .btn-ghost { width: 100%; text-align: center; }
.shop-owned { text-align: center; font-weight: 700; font-size: 12px; color: #2ecc71; padding: 8px; letter-spacing: 0.5px; }
.shop-hash { display: block; text-align: center; font-size: 11px; color: var(--neon-cyan); margin-top: 4px; }

.shop-type {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 999px; color: #fff;
}
.shop-type-nft { background: var(--neon-purple); }
.shop-type-wl { background: var(--neon-cyan); color: #05202a; }
.shop-type-item { background: var(--neon-pink); }
.shop-type-raffle { background: #ffd34d; color: #2a2000; }
.shop-soldout-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 999px; color: #fff; background: rgba(0,0,0,0.6); border: 1px solid var(--border-glow);
}

/* Admin: create form and order management */
.shop-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.shop-form .boost-input { min-width: 120px; }
.shop-admin-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.shop-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.shop-admin-head .sa-meta { color: var(--text-dim); font-size: 12px; }
.shop-admin-head .shop-type { position: static; }
.shop-order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.07); font-size: 13px;
}
.so-wallet { font-family: "Rajdhani", monospace; color: var(--text); word-break: break-all; }
.so-status { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.so-processing { color: #ffd34d; }
.so-shipped { color: #2ecc71; }
.prompt-input { width: 100%; margin-bottom: 18px; }

@media (max-width: 560px) { .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* ============ RAFFLES ============ */
.rf-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 8px; }
.rf-countdown { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #ffd34d; }
.rf-mytickets { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.rf-mytickets b { color: var(--neon-cyan); }

/* Sales progress bar + live win chance */
.rf-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 2px 0 5px; }
.rf-progress-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple)); transition: width 0.4s var(--ease-smooth); }
.rf-progress-label { font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
.rf-endsat { font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
.rf-limit { font-size: 11px; color: #ffd34d; margin-bottom: 5px; }
.rf-chance { font-size: 12px; font-weight: 700; color: var(--neon-cyan); margin-bottom: 8px; }
.rf-chance b { color: #fff; }

/* Admin raffle action buttons */
.raffle-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* Finished-raffle button: text morphs to "See winners" on hover */
.rf-result-btn {
  position: relative; width: 100%; overflow: hidden; cursor: pointer;
  font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px;
  padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05); color: var(--text);
}
.rf-result-btn.won { color: #2ecc71; border-color: rgba(46,204,113,0.5); background: rgba(46,204,113,0.10); }
.rf-result-btn.lose { color: var(--text-dim); }
.rf-face { display: block; transition: opacity 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth); }
.rf-face-hover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(60%); color: var(--neon-cyan);
}
.rf-result-btn:hover { border-color: var(--neon-cyan); background: rgba(52,224,255,0.10); }
.rf-result-btn:hover .rf-face-default { opacity: 0; transform: translateY(-60%); }
.rf-result-btn:hover .rf-face-hover { opacity: 1; transform: translateY(0); }

/* Winners modal */
.winners-body { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.winner-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.winner-rank { font-family: "Orbitron", sans-serif; font-weight: 900; color: #ffd34d; font-size: 13px; }
.winner-name { font-weight: 700; color: var(--text); }
.winner-wallet { font-family: "Rajdhani", monospace; font-size: 12px; color: var(--text-dim); word-break: break-all; margin-left: auto; }

/* ============ AUCTIONS ============ */
.shop-type-auction { background: linear-gradient(120deg, #ff8a3d, #ff5da2); color: #2a1500; }

/* "LIVE" pill next to the Running/Finished sub-tabs */
.au-live-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px;
  font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 999px; color: #2ecc71;
  background: rgba(46,204,113,0.10); border: 1px solid rgba(46,204,113,0.35);
}
.au-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px #2ecc71; animation: au-pulse-dot 1.4s ease-in-out infinite; }
@keyframes au-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.auction-card .au-live { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.au-bidrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.au-bidlabel { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); }
.au-bid { font-family: "Orbitron", sans-serif; font-weight: 800; font-size: 17px; color: var(--neon-cyan); transition: color 0.2s var(--ease-smooth); }
.au-bid-sub { font-size: 11px; color: var(--text-dim); }

/* Green flash when the current bid changes live */
.auction-card.au-flash .au-bid { color: #2ecc71; }
.auction-card.au-flash { box-shadow: 0 0 0 1px rgba(46,204,113,0.5), 0 0 22px rgba(46,204,113,0.28); }

.au-leader { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.au-leader b { font-family: "Rajdhani", monospace; color: var(--text); }

.au-countdown-row { display: flex; align-items: center; gap: 7px; }
.au-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff8a3d; box-shadow: 0 0 8px #ff8a3d; animation: au-pulse-dot 1.4s ease-in-out infinite; }
.au-countdown { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; color: #ff8a3d; }
.au-countdown.ending { color: var(--neon-pink); }

/* Mini live bid feed */
.au-feed { display: flex; flex-direction: column; gap: 3px; max-height: 66px; overflow: hidden; }
.au-feed-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.au-feed-w { font-family: "Rajdhani", monospace; color: var(--text-dim); }
.au-feed-a { color: var(--neon-cyan); font-weight: 700; }
.au-feed-empty { font-size: 11px; color: var(--text-dim); }

/* "You're winning" / "Outbid" status badges */
.au-mystatus { font-size: 12px; font-weight: 700; }
.au-mystatus.win { color: #2ecc71; }
.au-mystatus.out { color: var(--neon-pink); }

/* Ended-auction winner line + fulfillment status */
.au-winner-line { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.au-winner-line b { font-family: "Rajdhani", monospace; color: var(--text); }
.au-ship { font-size: 12px; font-weight: 700; margin-top: 8px; text-align: center; }
.au-ship.processing { color: #ffd34d; }
.au-ship.shipped { color: #2ecc71; }
.au-ship-hash { display: block; margin-top: 4px; text-align: center; font-size: 11px; color: var(--neon-cyan); }

/* Admin auction rows */
.au-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ---- Admin card action rows: botões centralizados e com estilo uniforme ---- */
.shop-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 12px; }
/* zera o margin-top: 22px herdado de .btn-ghost dentro dos cards de admin */
.raffle-admin-actions .btn-ghost, .au-admin-actions .btn-ghost, .shop-admin-card .btn-ghost { margin-top: 0; }
/* botão de perigo (DELETE / REMOVE) padronizado no tamanho dos .btn-sm */
.br-del {
  margin-top: 0; padding: 9px 16px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  color: #ff8a8a; background: rgba(224,16,32,0.14); border: 1px solid rgba(224,16,32,0.45);
  transition: background 160ms, border-color 160ms, color 160ms;
}
.br-del:hover { background: rgba(224,16,32,0.30); border-color: var(--neon-pink); color: #fff; }

/* Card action row: one-click bid + "watch live" light button */
.au-actions { display: flex; gap: 8px; align-items: stretch; }
.au-actions .auction-bid-btn { flex: 1; text-align: center; }
.au-live-btn {
  flex: 0 0 auto; width: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14); transition: border-color 0.18s var(--ease-smooth), background 0.18s var(--ease-smooth);
}
.au-live-btn:hover { border-color: #2ecc71; background: rgba(46,204,113,0.12); }

/* Live auction modal */
.au-live-modal-body { display: flex; flex-direction: column; gap: 12px; }
.au-lm-top { display: flex; gap: 14px; align-items: center; }
.au-lm-img { width: 108px; height: 108px; object-fit: cover; border-radius: 12px; background: #1a1430; flex: 0 0 auto; }
.au-lm-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.au-lm-bidlabel { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); }
.au-lm-bid { font-family: "Orbitron", sans-serif; font-weight: 800; font-size: 24px; color: var(--neon-cyan); }
.au-lm-leader { font-size: 12px; color: var(--text-dim); }
.au-lm-leader b { font-family: "Rajdhani", monospace; color: var(--text); }
.au-lm-mystatus { font-size: 12px; font-weight: 700; min-height: 14px; }

.au-lm-feedtitle { font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1px; color: var(--text-dim); }
.au-lm-feed { display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow-y: auto; }
.au-lm-feed-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 9px; font-size: 13px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.au-lm-feed-row.top { border-color: rgba(46,204,113,0.45); background: rgba(46,204,113,0.08); }

.au-lm-actions { display: flex; flex-direction: column; gap: 10px; }
.au-lm-quick { width: 100%; text-align: center; }
.au-lm-custom { display: flex; gap: 8px; }
.au-lm-input { flex: 1; min-width: 0; }
.au-lm-custombtn { flex: 0 0 auto; }
.au-lm-ended { text-align: center; font-weight: 700; color: var(--neon-pink); padding: 10px; }

/* Bid button "sending…" state (anti double-submit) */
.is-pending { opacity: 0.6; cursor: progress; }

/* Confirm/prompt dialogs must sit above the live auction modal */
#confirm-modal, #prompt-modal { z-index: 200; }

@media (max-width: 480px) {
  .au-lm-top { flex-direction: column; align-items: flex-start; }
  .au-lm-img { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ============================================================
   LEADERBOARD + PILOT PROFILE
   ============================================================ */
.lb-layout { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }

/* ---- Ranking (left) ---- */
.lb-main {
  background: rgba(14, 11, 26, 0.4);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
  padding: 20px 22px;
}
.lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lb-title {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: 1px;
  color: var(--neon-pink-soft); text-shadow: 0 0 18px rgba(224,16,32,0.45);
}
.lb-sub { color: var(--text-dim); font-size: 11px; letter-spacing: 2px; margin-top: 4px; font-family: var(--font-ui); }
.lb-live {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: var(--neon-green);
  border: 1px solid rgba(46,204,113,0.4); border-radius: 999px; padding: 6px 11px;
  background: rgba(46,204,113,0.08);
}
.lb-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon-green); box-shadow: 0 0 8px var(--neon-green); animation: lb-pulse 1.6s infinite; }
@keyframes lb-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Table */
.lb-table { display: block; margin-top: 20px; }
.lb-row {
  display: grid; grid-template-columns: 52px 1.4fr 2.6fr 0.9fr 1fr; align-items: center;
  gap: 10px; padding: 12px 12px; border-radius: 10px;
}
.lb-row-head { color: var(--text-dim); font-size: 10px; letter-spacing: 1.5px; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.lb-rows .lb-row { border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.lb-rows .lb-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.lb-rows .lb-row:hover { background: rgba(255,255,255,0.05); }
.lb-rows .lb-row.me { border-color: var(--neon-pink); background: rgba(224,16,32,0.10); box-shadow: 0 0 14px rgba(224,16,32,0.25) inset; }
.lb-c-rank { font-family: var(--font-display); font-weight: 700; color: var(--text-dim); font-size: 13px; }
.lb-rows .lb-row.me .lb-c-rank, .lb-rows .lb-row:nth-child(-n+3) .lb-c-rank { color: var(--neon-pink-soft); }
.lb-c-pilot { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-c-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-role {
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px; padding: 3px 6px; border-radius: 5px; white-space: nowrap;
  color: var(--rc, #ffd34d); border: 1px solid color-mix(in srgb, var(--rc, #ffd34d) 55%, transparent);
  background: color-mix(in srgb, var(--rc, #ffd34d) 14%, transparent); text-transform: uppercase;
}
.lb-role.off { color: var(--text-dim); border-color: rgba(255,255,255,0.1); background: transparent; }
.lb-c-mult { font-family: var(--font-display); font-weight: 700; color: var(--neon-cyan); font-size: 13px; }
.lb-c-pts { font-family: var(--font-display); font-weight: 700; color: var(--text); text-align: right; }
.lb-c-pts em { font-style: normal; font-size: 9px; color: var(--text-dim); margin-left: 3px; font-family: var(--font-ui); }

/* ---- Pilot profile (right) ---- */
.lb-profile {
  position: sticky; top: 12px;
  background: rgba(14, 11, 26, 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 18px;
}
.lp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lp-eyebrow { font-size: 10px; letter-spacing: 2px; color: var(--text-dim); }

.lp-id { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.lp-avatar {
  position: relative; width: 62px; height: 62px; border-radius: 14px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.14); overflow: hidden; background: rgba(0,0,0,0.4);
  display: grid; place-items: center; cursor: default;
}
.lp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-avatar.editable { cursor: pointer; }
.lp-avatar.editable:hover { border-color: var(--neon-pink); }
.lp-avatar .lp-avatar-fallback { font-family: var(--font-display); font-weight: 800; color: var(--neon-pink-soft); font-size: 18px; }
.lp-avatar .lp-avatar-edit {
  position: absolute; inset: auto 0 0 0; font-size: 8px; letter-spacing: 1px; text-align: center;
  background: rgba(0,0,0,0.65); color: var(--text-dim); padding: 2px 0; opacity: 0; transition: opacity 0.15s;
}
.lp-avatar.editable:hover .lp-avatar-edit { opacity: 1; }
.lp-idmeta { min-width: 0; flex: 1; }
.lp-name-row { display: flex; align-items: center; gap: 7px; }
.lp-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-edit-name { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 13px; padding: 2px; line-height: 1; }
.lp-edit-name:hover { color: var(--neon-pink-soft); }
.lp-handle { display: block; color: var(--neon-cyan); font-size: 11px; letter-spacing: 1px; margin-top: 2px; }
.lp-handle .lp-lvl { color: var(--text-dim); }
.lp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--neon-green); margin-top: 5px; }
.lp-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); }
.lp-rank-badge { flex: 0 0 auto; align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--neon-pink-soft); border: 1px solid var(--border-glow); border-radius: 8px; padding: 4px 8px; }

.lp-balance {
  background: linear-gradient(135deg, rgba(224,16,32,0.12), rgba(139,92,246,0.08));
  border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px;
}
.lp-balance-label { font-size: 10px; letter-spacing: 1.5px; color: var(--neon-pink-soft); display: flex; align-items: center; gap: 6px; }
.lp-balance-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-pink); box-shadow: 0 0 6px var(--neon-pink); }
.lp-balance-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text); margin-top: 6px; }
.lp-balance-value em { font-style: normal; font-size: 11px; color: var(--text-dim); margin-left: 5px; font-family: var(--font-ui); }

/* Link Discord */
.lp-discord { background: rgba(88,101,242,0.08); border: 1px solid rgba(88,101,242,0.35); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.lp-discord-label { font-size: 10px; letter-spacing: 1.5px; color: #8b94f5; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lp-discord-label i { width: 6px; height: 6px; border-radius: 50%; background: #5865f2; box-shadow: 0 0 6px #5865f2; }
.lp-discord-row { display: flex; align-items: center; gap: 7px; }
.lp-discord-input { flex: 1; min-width: 0; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 9px 11px; color: var(--text); font-size: 13px; letter-spacing: 3px; text-align: center; font-family: var(--font-display); }
.lp-discord-input:focus { outline: none; border-color: #5865f2; }
.lp-discord-btn { flex: 0 0 auto; background: #5865f2; border: none; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 1px; padding: 0 16px; height: 36px; border-radius: 9px; cursor: pointer; }
.lp-discord-btn:hover { background: #6c78f5; }
.lp-discord-tag { flex: 1; min-width: 0; color: var(--text); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-discord-unlink { flex: 0 0 auto; background: none; border: 1px solid var(--border-glow); color: var(--neon-pink-soft); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.lp-discord-unlink:hover { background: rgba(224,16,32,0.12); }
.lp-discord-hint { display: block; margin-top: 8px; font-size: 10px; color: var(--text-dim); }
.lp-discord-hint b { color: #8b94f5; }

.lp-break-label { font-size: 10px; letter-spacing: 2px; color: var(--text-dim); margin: 4px 0 12px; }
.lp-meter { margin-bottom: 14px; }
.lp-meter-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lp-meter-name { font-size: 11px; letter-spacing: 1px; color: var(--text); }
.lp-meter-val { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); }
.lp-meter-val.bonus { color: var(--neon-purple); }
.lp-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.08); }
.lp-dot.on { background: var(--text); box-shadow: 0 0 6px rgba(255,255,255,0.5); }

.lp-trait { margin-bottom: 10px; }
.lp-trait-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.lp-trait-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 6px; text-transform: uppercase;
  color: var(--rc, var(--neon-purple)); border: 1px solid color-mix(in srgb, var(--rc, #8b5cf6) 55%, transparent);
  background: color-mix(in srgb, var(--rc, #8b5cf6) 16%, transparent);
}
.lp-trait-tag em { font-style: normal; opacity: 0.7; }
.lp-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 14px 0; }
.lp-total { display: flex; align-items: center; justify-content: space-between; }
.lp-total-label { font-size: 11px; letter-spacing: 1.5px; color: var(--text-dim); }
.lp-total-value { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #ffd34d; text-shadow: 0 0 14px rgba(255,211,77,0.35); }

/* Avatar picker cards */
.avatar-pick { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; cursor: pointer; }
.avatar-pick:hover { border-color: var(--neon-pink); }
.avatar-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: rgba(0,0,0,0.4); }
.avatar-pick span { font-size: 11px; color: var(--text-dim); text-align: center; }

/* Responsive: stack profile under the ranking */
@media (max-width: 900px) {
  .lb-layout { grid-template-columns: 1fr; }
  .lb-profile { position: static; }
  .lb-row { grid-template-columns: 40px 1.4fr 1.6fr 0.9fr 1fr; gap: 8px; padding: 10px 8px; }
}
@media (max-width: 560px) {
  .lb-main { padding: 16px 13px; }
  .lb-c-roles { display: none; }
  .lb-row { grid-template-columns: 38px 1.5fr 0.9fr 1fr; gap: 8px; }
  /* No mobile o header usa uma tipografia única e compacta — as classes de
     coluna (Orbitron 13px) estouram as colunas estreitas */
  .lb-row-head span {
    font-family: var(--font-ui); font-size: 9px; font-weight: 600;
    letter-spacing: 1px; color: var(--text-dim);
    overflow: hidden; white-space: nowrap;
  }
  .lb-row-head .lb-c-pts { text-align: right; }
}

/* ============================================================
   SHARE CARD (botão no perfil + modal)
   ============================================================ */
.lp-share-btn {
  width: 100%; margin-top: 16px; padding: 12px; border-radius: 11px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px;
  color: #fff; background: linear-gradient(135deg, #e01020, #7a0d16); border: none;
  box-shadow: 0 8px 22px rgba(224,16,32,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 160ms, filter 160ms;
}
.lp-share-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

.share-box { max-width: 680px; width: 94vw; }
.share-preview {
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
  background: #0a0814; line-height: 0;
}
#share-canvas { width: 100%; height: auto; display: block; }
.share-bgs-label { font-size: 10px; letter-spacing: 1.5px; color: var(--text-dim); margin: 14px 0 8px; }
.share-bgs { display: flex; gap: 10px; margin-bottom: 16px; }
.share-bg-thumb {
  flex: 1; height: 52px; border-radius: 10px; cursor: pointer; padding: 0;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,0.14); transition: border-color 160ms, transform 160ms;
}
.share-bg-thumb:hover { transform: translateY(-1px); }
.share-bg-thumb.active { border-color: var(--neon-pink); box-shadow: 0 0 12px rgba(224,16,32,0.4); }
#share-download { width: 100%; text-align: center; }

/* ============================================================
   MOBILE UX v2 — experiência fluida em qualquer aparelho
   (phones 320–480px, phablets, tablets 768–1180px, landscape)
   Camada final: vence as regras anteriores por ordem na cascata.
   ============================================================ */

/* ---- Tablets / janelas estreitas (821–1180px): nav mais denso
       para as 5–6 abas + HUD caberem numa linha sem estourar ---- */
@media (min-width: 821px) and (max-width: 1180px) {
  /* height auto: se uma 6ª aba (ADMIN) quebrar a linha, o fundo acompanha */
  .app-nav { gap: 14px; padding: 8px 18px; height: auto; min-height: 62px; }
  .app-tabs { gap: 14px; }
  .app-tab { font-size: 12px; letter-spacing: 0.3px; }
  .app-brand { font-size: 19px; }
  .hud-chip { padding: 5px 10px 5px 6px; gap: 7px; }
  .btn-disconnect { padding: 0 12px; }
  .app-content { width: min(1320px, 96vw); }
  .stat-figure b { font-size: 19px; }
}

/* ---- Qualquer aparelho de toque: ergonomia de dedo ---- */
@media (pointer: coarse) {
  /* Alvos pequenos crescem para área de toque confortável */
  .nft-card .nft-info-btn { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
  .col-refresh { width: 38px; height: 38px; font-size: 17px; }
  .modal-x {
    width: 40px; height: 40px; margin: -8px -10px -8px 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .lp-edit-name { font-size: 15px; padding: 6px; }
  .lp-discord-btn { height: 42px; }
  .shop-subtab, .admin-subtab, .raffle-subtab, .auction-subtab { padding: 11px 18px; }
  .br-del { padding: 10px 16px; }
  .au-live-btn { width: 46px; }

  /* Hover não existe no touch: a dica de editar avatar fica sempre visível */
  .lp-avatar.editable .lp-avatar-edit { opacity: 1; }

  /* Feedback tátil imediato no toque (substitui o hover do desktop) */
  .btn-pink:active, .btn-ghost:active, .btn-disconnect:active, .btn-connect:active,
  .nft-card button:active, .shop-subtab:active, .admin-subtab:active,
  .raffle-subtab:active, .auction-subtab:active, .rf-result-btn:active,
  .btn-update-wallet:active, .lp-share-btn:active, .lp-discord-btn:active {
    transform: scale(0.97);
    transition-duration: 60ms;
  }

  /* iOS Safari dá zoom automático em campos com fonte < 16px */
  .boost-input, .lp-discord-input, input, select, textarea { font-size: 16px; }
}

/* ---- Phones + tablets pequenos (≤768px) ---- */
@media (max-width: 768px) {
  /* O frame tem padding lateral, então o nav vira um cartão glass flutuante */
  .app-nav {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 32px rgba(0,0,0,0.38);
  }

  /* Barra de rewards empilhada: divisor lateral vira divisor horizontal */
  .rw-cell { justify-content: center; }
  .rw-cell + .rw-cell {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px;
  }
  .rw-text { text-align: left; }

  /* Grids fluidos: o nº de colunas nasce do espaço real do aparelho
     (2 col num Galaxy S, 3 num phablet, 4 num tablet — sem breakpoint fixo) */
  .nft-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .modal-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .traits-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }

  /* Formulários do admin: campos e botões empilhados em largura total */
  .shop-form .boost-input { flex: 1 1 100%; min-width: 0; }
  .shop-form .boost-color { flex: 0 0 64px; }
  .shop-form .btn-pink, .shop-form .btn-ghost { flex: 1 1 100%; margin-top: 0; }

  /* Scroll contido: sem pull-to-refresh acidental nem rolagem "vazando"
     do modal para a página atrás */
  .app-content, .modal-box, .modal-grid, .nft-grid,
  .winners-body, .au-lm-feed, .app-tabs { overscroll-behavior: contain; }

  /* Leaderboard respirável */
  .lb-head { flex-wrap: wrap; }
  .lp-balance-value { font-size: 22px; }

  /* Blur mais leve = rolagem mais fluida em aparelhos modestos */
  .stat-card, .stk-col, .lb-main, .lb-profile, .rewards-bar {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* ---- Phones (≤640px): modais viram bottom sheets ---- */
@media (max-width: 640px) {
  .modal { align-items: flex-end; }
  .modal-box, .modal-box.modal-sm, .share-box {
    width: 100vw; max-width: none;
    max-height: calc(100dvh - 20px);
    border-radius: 22px 22px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 26px 16px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    animation: sheet-up 340ms var(--ease-smooth);
  }
  /* Alça do sheet */
  .modal-box::before {
    content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.22);
  }
  .modal-grid { max-height: 56dvh; }
  .winners-body { max-height: 58dvh; }
  .au-lm-feed { max-height: 30dvh; }

  /* NFT info: a imagem não pode empurrar os traits para fora da tela */
  .nft-info-body { overflow-y: auto; min-height: 0; }
  .nft-info-img { max-height: 38dvh; object-fit: contain; }

  /* Leilão ao vivo: imagem contida para o lance ficar à vista sem rolar */
  .au-lm-img { width: 100%; height: 24dvh; aspect-ratio: auto; object-fit: contain; }

  /* Botões de confirmação lado a lado em largura igual (alcance do polegar) */
  .confirm-actions .btn-ghost, .confirm-actions .btn-pink { flex: 1; text-align: center; }
}
@keyframes sheet-up {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---- Phones compactos (≤480px) ---- */
@media (max-width: 480px) {
  /* Stat cards 2×2 mais enxutos */
  .stat-cards { gap: 10px; }
  .stat-card { padding: 11px 12px; gap: 10px; }
  .stat-ico { width: 38px; height: 38px; }
  .stat-ico svg { width: 18px; height: 18px; }
  .stat-figure b { font-size: 18px; }
  .rewards-value { font-size: 20px; }

  /* Stats da landing em grade 2×2 estável (sem wrap torto 3+1) */
  .lf-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; width: min(92vw, 420px);
  }
  .stat { padding: 8px 10px; }

  /* Sub-tabs (shop/raffles/auctions/admin) numa faixa rolável abaixo do título */
  .page-head { flex-wrap: wrap; }
  .shop-subtabs, .admin-subtabs {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .shop-subtabs::-webkit-scrollbar, .admin-subtabs::-webkit-scrollbar { display: none; }
  .shop-subtab, .admin-subtab, .raffle-subtab, .auction-subtab, .au-live-pill { flex: 0 0 auto; }
}

/* ---- Landscape em phones (altura baixa): a landing rola em vez de espremer ---- */
@media (max-height: 480px) and (orientation: landscape) {
  /* Em coluna: card em cima, footer abaixo — e a tela rola se não couber */
  #screen-landing {
    flex-direction: column; align-items: center; justify-content: flex-start;
    overflow-y: auto;
  }
  #screen-landing .landing-video, #screen-landing .landing-overlay { position: fixed; }
  .landing-center { margin: 86px auto 0; flex-shrink: 0; }
  .landing-footer { position: static; margin: 18px auto 24px; flex-shrink: 0; }

  .app-content { margin-top: 10px; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  #ticker-bar { height: 44px; }
  .ticker-item img, .ticker-item .ti-thumb-fallback { width: 28px; height: 28px; }
}

/* ---- Acessibilidade: respeita quem pediu menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation-play-state: paused; }
  .btn-connect::after, .tv-fx, .tv-fx::after { animation: none; }
  .screen { transition-duration: 1ms; }
  .app-page.is-active, .modal-box { animation-duration: 1ms; }
}

/* ============================================================
   MOBILE NAV — hamburguer + drawer (sobe de baixo) + disconnect ícone
   Escopo 100% mobile (≤820px). O desktop (>820px) fica intocado:
   .nav-burger e .nav-menu-backdrop nascem display:none e só ligam aqui.
   ============================================================ */
.nav-burger { display: none; }
.nav-menu-backdrop { display: none; }

@media (max-width: 820px) {
  /* ---- Barra: uma única linha → marca à esquerda, ações à direita ---- */
  .app-nav {
    flex-wrap: nowrap;
    height: 60px;
    gap: 12px;
    padding: 0 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    align-items: center;
    /* IMPORTANTE: sem backdrop-filter aqui — ele criaria um bloco de contenção
       que prenderia o drawer (position:fixed) dentro do nav em vez da viewport.
       Trocamos por um fundo translúcido sólido que preserva o visual glass. */
    background: rgba(9, 7, 16, 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .app-brand { order: 0; margin-right: auto; font-size: 18px; }
  .app-user  { order: 1; margin-left: 0; gap: 8px; flex-wrap: nowrap; }

  /* No mobile o saldo vive no perfil/HUD do conteúdo — a barra fica limpa */
  .app-user .balance-chip,
  .app-user .wallet-chip { display: none; }

  /* ---- DISCONNECT vira um botãozinho quadrado só com ícone de power ---- */
  .btn-disconnect {
    width: 42px; height: 42px; padding: 0; font-size: 0;
    border-radius: 12px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-disconnect::before {
    content: ""; width: 19px; height: 19px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v8'/%3E%3Cpath d='M7.8 6.8a6.5 6.5 0 1 0 8.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v8'/%3E%3Cpath d='M7.8 6.8a6.5 6.5 0 1 0 8.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* ---- Botão hamburguer ---- */
  .nav-burger {
    order: 2; flex: 0 0 auto;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0; cursor: pointer;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text);
    transition: transform 320ms var(--ease-smooth), opacity 200ms var(--ease-smooth);
  }
  .nav-burger:active { transform: scale(0.94); }
  /* 3 traços → X quando aberto */
  body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
  body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- As abas viram um DRAWER que sobe de baixo ---- */
  .app-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    order: initial; margin: 0;
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 7px;
    justify-content: flex-start;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(13, 10, 24, 0.94);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -22px 60px rgba(0,0,0,0.6);
    /* zera a máscara de fade horizontal herdada da versão rolável */
    -webkit-mask-image: none; mask-image: none;
    transform: translateY(112%);
    visibility: hidden;
    transition: transform 380ms var(--ease-smooth), visibility 0s linear 380ms;
  }
  /* Alça (grab handle) no topo do drawer */
  .app-tabs::before {
    content: ""; flex: 0 0 auto; width: 44px; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.22); margin: 2px auto 8px;
  }
  body.nav-open .app-tabs {
    transform: translateY(0); visibility: visible;
    transition: transform 380ms var(--ease-smooth), visibility 0s;
  }

  /* Cada aba = linha larga, alvo de toque generoso */
  .app-tabs .app-tab {
    flex: 0 0 auto; width: 100%;
    text-align: left; padding: 15px 16px;
    font-family: var(--font-ui); font-weight: 600; font-size: 15px; letter-spacing: 0.4px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 13px;
    transition: color 160ms, background 160ms, border-color 160ms, transform 120ms;
  }
  .app-tabs .app-tab::after { display: none; } /* remove o sublinhado do desktop */
  .app-tabs .app-tab.is-active {
    color: #fff;
    background: rgba(224,16,32,0.15);
    border-color: var(--border-glow);
    box-shadow: inset 0 0 0 1px rgba(224,16,32,0.15);
  }
  .app-tabs .app-tab:active { transform: scale(0.98); }

  /* Entrada escalonada dos itens (efeito "subindo") */
  body.nav-open .app-tabs .app-tab { animation: nav-item-in 400ms var(--ease-smooth) backwards; }
  body.nav-open .app-tabs .app-tab:nth-child(2) { animation-delay: 40ms; }
  body.nav-open .app-tabs .app-tab:nth-child(3) { animation-delay: 80ms; }
  body.nav-open .app-tabs .app-tab:nth-child(4) { animation-delay: 120ms; }
  body.nav-open .app-tabs .app-tab:nth-child(5) { animation-delay: 160ms; }
  body.nav-open .app-tabs .app-tab:nth-child(6) { animation-delay: 200ms; }
  body.nav-open .app-tabs .app-tab:nth-child(7) { animation-delay: 240ms; }
  @keyframes nav-item-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---- Backdrop escurece o app enquanto o drawer está aberto ---- */
  .nav-menu-backdrop {
    display: block; position: fixed; inset: 0; z-index: 155;
    background: rgba(4, 3, 10, 0.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity 380ms var(--ease-smooth), visibility 0s linear 380ms;
  }
  body.nav-open .nav-menu-backdrop {
    opacity: 1; visibility: visible;
    transition: opacity 380ms var(--ease-smooth), visibility 0s;
  }

  /* O ticker de vendas vive no nível do body (z-index alto) e escaparia por
     cima do drawer. Enquanto o menu está aberto, ele some. */
  body.nav-open #ticker-bar {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 300ms var(--ease-smooth), visibility 0s linear 300ms;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .app-tabs, .nav-menu-backdrop, .nav-burger span { transition-duration: 1ms; }
  body.nav-open .app-tabs .app-tab { animation: none; }
}

/* ============================================================
   RAFFLE / AUCTION card redesign (rich card)
   ============================================================ */
/* Os cards ricos de raffle/auction NÃO cabem nas colunas estreitas (150–190px) do
   .shop-grid usado pela loja. Damos a esses containers um grid próprio com largura
   mínima maior. O seletor por ID vence as regras .shop-grid (inclusive dentro de
   media queries) por especificidade, então isto normaliza a largura em todas as telas.
   O min(100%, 300px) garante 1 coluna cheia — e nunca estouro — em telas < 300px. */
#raffle-active, #raffle-finished, #auction-active, #auction-ended {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.raffle-card.rfc, .auction-card {
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(22,14,30,0.55), rgba(12,9,20,0.75));
  border: 1px solid rgba(224,16,32,0.35);
  box-shadow: 0 0 22px rgba(224,16,32,0.12), 0 14px 40px rgba(0,0,0,0.45);
  border-radius: 18px; padding: 16px 16px 18px;
}
/* Nenhum filho pode empurrar a largura do card para fora (texto longo encolhe/quebra). */
.raffle-card.rfc *, .auction-card * { min-width: 0; }
.rfc-title, .rfc-sub, .au-winner-line, .au-winner-line b, .au-leader, .au-leader b,
.au-feed-w, .au-bid, .rfc-total, .shop-name, .shop-desc { overflow-wrap: anywhere; }
.raffle-card.rfc:hover, .auction-card:hover { border-color: var(--neon-pink); transform: translateY(-2px); }

/* badges row (topo) */
.rc-badges { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.rc-badge { font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 5px 10px; border-radius: 8px; text-transform: uppercase; white-space: nowrap; }
.rc-badge-live { color: #fff; background: linear-gradient(135deg, #e01020, #7a0d16); box-shadow: 0 0 12px rgba(224,16,32,0.4); }
.rc-badge-time { color: var(--neon-cyan); background: rgba(52,224,255,0.08); border: 1px solid rgba(52,224,255,0.4); }
.rc-badge-time.ending { color: var(--neon-pink-soft); border-color: var(--border-glow); background: rgba(224,16,32,0.1); }

/* header centralizado */
.rfc-imgwrap { display: flex; justify-content: center; margin: 2px 0 12px; }
.rfc-imgwrap .rfc-img { width: 150px; height: 150px; aspect-ratio: auto; object-fit: contain; border-radius: 14px; background: rgba(0,0,0,0.25); margin: 0; }
.rfc-title { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.5px; color: var(--text); line-height: 1.2; }
.rfc-sub { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 5px; }
.rfc-prize-label { text-align: center; font-size: 10px; letter-spacing: 1.5px; color: var(--text-dim); margin-top: 14px; }
.rfc-prize { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--neon-cyan); margin-top: 2px; }

/* progress */
.rfc-progress { margin: 16px 0 4px; }
.rfc-progress-top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 6px; }
.rfc-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.rfc-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff5a5a, #e01020); box-shadow: 0 0 10px rgba(224,16,32,0.6); }

/* stat boxes */
.rfc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.rfc-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.rfc-ico { width: 15px; height: 15px; color: var(--neon-pink-soft); margin-bottom: 2px; }
.rfc-stat-label { font-size: 9px; color: var(--text-dim); letter-spacing: 0.2px; }
.rfc-stat-val { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }

.rfc-ends { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--text-dim); margin: 4px 0 12px; }
.rfc-ends .rfc-ico { width: 13px; height: 13px; color: var(--text-dim); margin: 0; }

/* stepper + total + buy */
.rfc-ticketrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.rfc-ticket-label { font-size: 13px; color: var(--text); }
.rfc-stepper { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 3px; }
.rfc-step { width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--text); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.rfc-step:hover:not(:disabled) { background: rgba(224,16,32,0.25); }
.rfc-step:disabled { opacity: 0.35; cursor: not-allowed; }
.rfc-qty { min-width: 28px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.rfc-totalrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 14px; }
.rfc-total-label { font-size: 13px; color: var(--text); }
.rfc-total { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--neon-cyan); }
.rfc .shop-action { margin-top: 0; }
.rfc-buy { width: 100%; text-align: center; padding: 14px; font-size: 13px; }

/* auction: usa o mesmo frame; realça o "current bid" como o prize da raffle */
.auction-card .au-live { margin-top: 14px; }
.auction-card .au-bidrow { text-align: center; }
.auction-card .au-bidlabel { display: block; font-size: 10px; letter-spacing: 1.5px; color: var(--text-dim); }
.auction-card .au-bid { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--neon-cyan); }
.auction-card .au-leader { text-align: center; font-size: 12px; color: var(--text-dim); }