/* ─── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px; scroll-behavior: smooth;
  overflow-x: hidden; width: 100%;
}
body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #FFE4EE 0%, #FFB3CB 100%);
  min-height: 100vh; width: 100%;
  overflow-x: hidden;
  color: #2d0014;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
ul { list-style: none; }

/* ─── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
  --pink:        #FF6B9D;
  --pink-light:  #FF8CC8;
  --pink-dark:   #E0558A;
  --dark:        #4A0020;
  --dark-mid:    #7a0035;
  --green:       #00C97A;
  --green-dark:  #00A063;
  --red:         #FF4D6D;
  --blue:        #4D9EFF;
  --orange:      #FF8C42;
  --white:       #FFFFFF;
  --bg:          linear-gradient(135deg, #FFE4EE 0%, #FFB3CB 100%);
  --card-bg:     rgba(255,255,255,0.92);
  --shadow:      0 8px 32px rgba(74,0,32,0.10);
  --shadow-hover:0 16px 48px rgba(74,0,32,0.18);
  --radius:      16px;
  --radius-btn:  50px;
  --radius-sm:   8px;
  --transition:  0.25s ease;
}

/* ─── Pages / Router ────────────────────────────────────────────────────────── */
.page { display: none; min-height: 100vh; width: 100%; max-width: 100%; overflow-x: hidden; }
.page.active { display: block; }

/* ─── Animations ────────────────────────────────────────────────────────────── */
@keyframes fadeIn    { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp   { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
@keyframes pulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes spin      { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes shimmer   { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes popIn     { 0%{transform:scale(0.7);opacity:0} 80%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes toastIn   { 0%{opacity:0;transform:translateY(-28px) scale(.88)} 55%{opacity:1} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastOut  { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-16px) scale(.9)} }
@keyframes confetti  { 0%{transform:translateY(-10px) rotate(0deg);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }

.anim-fade    { animation: fadeIn  0.4s ease both; }
.anim-slide   { animation: slideUp 0.5s ease both; }
.anim-pulse   { animation: pulse 2s infinite; }
.anim-float   { animation: float 3s ease-in-out infinite; }

/* ─── Global Loading ────────────────────────────────────────────────────────── */
.global-loading {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.global-loading.hidden { display: none; }
.loading-spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--pink-light);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ─── Toast ─────────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 8888;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 12px; pointer-events: none;
}
@media (min-width: 600px) {
  .toast-container { top: 20px; right: 20px; left: auto; align-items: flex-end; padding: 0; }
}
.toast {
  pointer-events: auto;
  padding: 12px 18px 12px 12px; border-radius: 16px;
  background: #1c1130; color: var(--text, #f4ecff);
  font-size: 14px; font-weight: 700; line-height: 1.3;
  border: 2px solid var(--tc, #ff7518);
  box-shadow: 0 5px 0 rgba(0,0,0,.42), 0 13px 30px rgba(0,0,0,.5);
  animation: toastIn 0.5s cubic-bezier(.34,1.3,.64,1) both;
  max-width: min(370px, calc(100vw - 24px)); width: fit-content;
  display: flex; align-items: center; gap: 12px;
}
.toast.out     { animation: toastOut 0.45s cubic-bezier(.4,0,.2,1) both; }
.toast > span:first-child {
  flex-shrink: 0; font-size: 16px; line-height: 1;
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1.5px solid var(--tc, #ff7518);
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
.toast > span:last-child  { min-width: 0; word-break: break-word; }
.toast.success { --tc: var(--green,  #7cff4f); }
.toast.error   { --tc: var(--red,    #ff3b3b); }
.toast.info    { --tc: var(--purple, #ff7518); }
.toast.warning { --tc: var(--yellow, #ffd23f); }

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-btn);
  border: none; cursor: pointer; font-weight: 700; font-size: 15px;
  transition: var(--transition); user-select: none; white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 100%);
  color: #fff; box-shadow: 0 4px 16px rgba(255,107,157,0.4);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--pink-dark) 0%, var(--pink) 100%);
  box-shadow: 0 8px 24px rgba(255,107,157,0.5);
  transform: translateY(-1px);
}
.btn-green {
  background: linear-gradient(135deg, var(--green) 0%, #00e68a 100%);
  color: #fff; box-shadow: 0 4px 16px rgba(0,201,122,0.4);
}
.btn-green:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  box-shadow: 0 8px 24px rgba(0,201,122,0.5);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent; border: 2px solid var(--pink);
  color: var(--pink);
}
.btn-outline:hover:not(:disabled) { background: var(--pink); color: #fff; }
.btn-dark {
  background: var(--dark); color: #fff;
}
.btn-sm  { padding: 8px 18px; font-size: 13px; }
.btn-lg  { padding: 18px 40px; font-size: 17px; }
.btn-full { width: 100%; }

/* ─── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-hover); }
.card-sm { padding: 18px; }
.card-title { font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.card-sub   { font-size: 14px; color: #8a3050; }

/* ─── Forms ─────────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--dark-mid); }
.form-input {
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 2px solid #ffd6e7; background: #fff;
  font-size: 15px; color: var(--dark); transition: border-color var(--transition);
  outline: none; width: 100%;
}
.form-input:focus  { border-color: var(--pink); }
.form-input.error  { border-color: var(--red); }
.form-input.valid  { border-color: var(--green); }
.form-error { font-size: 12px; color: var(--red); font-weight: 600; }
.input-wrap { position: relative; }
.input-wrap .form-input { padding-right: 44px; }
.input-icon {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); cursor: pointer; font-size: 18px; color: #c0748f;
}

/* ─── Navbar ────────────────────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,107,157,0.15);
  padding: 12px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.navbar-brand {
  font-size: 22px; font-weight: 800; color: var(--pink);
  display: flex; align-items: center; gap: 8px;
}
.navbar-menu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.navbar-link {
  padding: 8px 14px; border-radius: 50px; font-size: 14px; font-weight: 600;
  color: var(--dark-mid); transition: var(--transition); cursor: pointer; border: none; background: none;
}
.navbar-link:hover { background: #ffedf4; color: var(--pink); }
.balance-badge {
  background: linear-gradient(135deg, var(--green) 0%, #00e68a 100%);
  color: #fff; padding: 8px 16px; border-radius: 50px;
  font-weight: 700; font-size: 15px; min-width: 110px; text-align: center;
}
.avatar-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink) 0%, var(--dark) 100%);
  color: #fff; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: default;
}

/* ─── Stats pills ───────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 20px 16px;
  text-align: center; box-shadow: var(--shadow);
}
.stat-card .stat-icon { font-size: 28px; margin-bottom: 6px; }
.stat-card .stat-value { font-size: 20px; font-weight: 800; color: var(--dark); line-height: 1.1; }
.stat-card .stat-label { font-size: 12px; color: #8a3050; font-weight: 600; margin-top: 2px; }

/* ─── Pills ─────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 50px;
  font-size: 13px; font-weight: 600; background: #ffedf4; color: var(--pink-dark);
}
.pill-green  { background: #e6fff4; color: var(--green-dark); }
.pill-blue   { background: #e8f3ff; color: #1a6fd4; }
.pill-orange { background: #fff3e8; color: #c85c00; }

/* ─── Quick amount buttons ──────────────────────────────────────────────────── */
.quick-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.quick-btn {
  padding: 8px 16px; border-radius: 50px; border: 2px solid var(--pink);
  background: transparent; color: var(--pink); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: var(--transition);
}
.quick-btn:hover, .quick-btn.active { background: var(--pink); color: #fff; }

/* ─── Progress bar ───────────────────────────────────────────────────────────── */
.progress-bar { background: #ffd6e7; border-radius: 50px; height: 12px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 50px;
  background: linear-gradient(90deg, var(--green) 0%, #00e68a 100%);
  transition: width 0.4s ease;
}

/* ─── Transaction list ──────────────────────────────────────────────────────── */
.tx-list { display: flex; flex-direction: column; gap: 10px; }
.tx-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(74,0,32,0.06);
}
.tx-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.tx-icon.ganho    { background: #e6fff4; }
.tx-icon.perda    { background: #ffe8ed; }
.tx-icon.deposito { background: #e8f3ff; }
.tx-icon.saque    { background: #fff3e8; }
.tx-icon.bonus    { background: #f3e8ff; }
.tx-info { flex: 1; }
.tx-desc { font-size: 14px; font-weight: 600; color: var(--dark); }
.tx-date { font-size: 12px; color: #8a3050; }
.tx-valor { font-size: 16px; font-weight: 700; }
.tx-valor.pos { color: var(--green-dark); }
.tx-valor.neg { color: var(--red); }

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(74,0,32,0.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: #fff; border-radius: var(--radius); padding: 32px;
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  animation: popIn 0.3s ease both;
  position: relative;
}
.modal-title {
  font-size: 20px; font-weight: 800; color: var(--dark);
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: #ffedf4; border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pink); transition: var(--transition);
}
.modal-close:hover { background: var(--pink); color: #fff; }

/* ─── QR Code area ───────────────────────────────────────────────────────────── */
.qr-area { text-align: center; }
.qr-area img { margin: 0 auto 12px; border-radius: 12px; border: 3px solid var(--pink-light); }
.qr-copy-box {
  background: #ffedf4; border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 13px; word-break: break-all;
  font-family: monospace; color: var(--dark); cursor: pointer;
  border: 1px dashed var(--pink); margin-bottom: 10px;
}
.qr-timer { font-size: 13px; color: var(--red); font-weight: 700; text-align: center; }

/* ─── Landing Hero ───────────────────────────────────────────────────────────── */
.landing-hero {
  min-height: 100vh; display: flex; align-items: center;
  background: linear-gradient(135deg, #FFE4EE 0%, #FFB3CB 60%, #ff8cc8 100%);
  padding: 0 20px; position: relative; overflow: hidden;
}
.hero-content { max-width: 560px; position: relative; z-index: 2; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.7); padding: 6px 16px; border-radius: 50px;
  font-size: 13px; font-weight: 700; color: var(--pink); margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(255,107,157,0.2);
}
.hero-title {
  font-size: clamp(40px, 8vw, 72px); font-weight: 800; line-height: 1.05;
  color: var(--dark); margin-bottom: 18px; letter-spacing: -1px;
}
.hero-title span { color: var(--pink); }
.hero-sub {
  font-size: 17px; color: var(--dark-mid); margin-bottom: 32px;
  line-height: 1.6; max-width: 420px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }

/* Decorative helix */
.helix-deco {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  font-size: clamp(120px, 18vw, 200px); opacity: 0.25;
  animation: spin-slow 8s linear infinite;
  pointer-events: none; user-select: none;
}
.bg-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: float 4s ease-in-out infinite;
}

/* Notification bubbles */
.notif-bubble {
  position: absolute; right: 24px;
  background: #fff; border-radius: 50px;
  padding: 10px 16px; box-shadow: 0 4px 16px rgba(74,0,32,0.12);
  font-size: 13px; font-weight: 700; color: var(--green-dark);
  animation: float 3.5s ease-in-out infinite;
  display: flex; align-items: center; gap: 8px; z-index: 2;
}
.notif-bubble:nth-child(1) { top: 18%; animation-delay: 0s; }
.notif-bubble:nth-child(2) { top: 35%; animation-delay: 1s; }
.notif-bubble:nth-child(3) { top: 52%; animation-delay: 2s; }

/* ─── How it works ───────────────────────────────────────────────────────────── */
.how-section { padding: 80px 20px; text-align: center; }
.section-title { font-size: 32px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.section-sub   { font-size: 16px; color: var(--dark-mid); margin-bottom: 48px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; max-width: 800px; margin: 0 auto; }
.how-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 36px 24px;
  text-align: center; box-shadow: var(--shadow); transition: var(--transition);
}
.how-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.how-icon { font-size: 48px; margin-bottom: 14px; }
.how-title { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.how-desc  { font-size: 14px; color: #7a3050; line-height: 1.5; }

/* ─── Stats bar ──────────────────────────────────────────────────────────────── */
.stats-bar {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 100%);
  padding: 28px 20px; display: flex; justify-content: center;
  gap: clamp(24px, 6vw, 80px); flex-wrap: wrap;
}
.sbar-item { text-align: center; }
.sbar-value { font-size: 28px; font-weight: 800; color: var(--pink-light); }
.sbar-label { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 600; }

/* ─── Testimonials ───────────────────────────────────────────────────────────── */
.test-section { padding: 80px 20px; background: rgba(255,255,255,0.5); }
.test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.test-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow);
}
.test-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 14px;
}
.test-stars { color: #FFB800; font-size: 16px; margin-bottom: 10px; }
.test-text { font-size: 14px; color: #5a2035; line-height: 1.6; margin-bottom: 14px; }
.test-name  { font-size: 14px; font-weight: 700; color: var(--dark); }
.test-sub   { font-size: 12px; color: #8a3050; }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.footer {
  background: var(--dark); color: rgba(255,255,255,0.8);
  padding: 40px 20px; text-align: center;
}
.footer-brand { font-size: 24px; font-weight: 800; color: var(--pink-light); margin-bottom: 12px; }
.footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.footer-links a { font-size: 14px; transition: color var(--transition); }
.footer-links a:hover { color: var(--pink-light); }
.footer-warning {
  max-width: 500px; margin: 0 auto; font-size: 12px; line-height: 1.5;
  opacity: 0.6; padding: 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
}

/* ─── Auth pages ─────────────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: linear-gradient(135deg, #FFE4EE 0%, #FFB3CB 100%);
}
.auth-card {
  background: #fff; border-radius: var(--radius); padding: 40px 36px;
  width: 100%; max-width: 420px; box-shadow: 0 16px 48px rgba(74,0,32,0.14);
  animation: popIn 0.35s ease both;
}
.auth-logo {
  text-align: center; margin-bottom: 28px;
  font-size: 28px; font-weight: 800; color: var(--pink);
}
.auth-title  { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 6px; text-align: center; }
.auth-sub    { font-size: 14px; color: #8a3050; text-align: center; margin-bottom: 28px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: #8a3050; }
.auth-footer a { color: var(--pink); font-weight: 700; cursor: pointer; }

/* ─── Painel ────────────────────────────────────────────────────────────────── */
.painel-content { max-width: 1000px; margin: 0 auto; padding: 24px 16px; }
.painel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 700px) { .painel-grid { grid-template-columns: 1fr; } }

.game-card { background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 100%); border-radius: var(--radius); padding: 28px; }
.game-card-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.game-card-sub   { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 20px; }
.pills-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.pills-row .pill { background: rgba(255,255,255,0.12); color: #fff; font-size: 12px; }
.input-money-wrap { position: relative; margin-bottom: 14px; }
.input-money-prefix {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: 15px; color: var(--dark-mid); pointer-events: none;
}
.input-money { padding-left: 44px !important; }
.meta-preview {
  background: rgba(255,255,255,0.1); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.meta-preview-label { color: rgba(255,255,255,0.7); font-size: 14px; }
.meta-preview-value { color: #fff; font-weight: 800; font-size: 18px; }
.users-playing {
  text-align: center; font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 12px;
}

/* ─── Jogo page ──────────────────────────────────────────────────────────────── */
.jogo-page { min-height: 100vh; position: relative; background: #0a0010; }
.jogo-hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(10,0,16,0.85); backdrop-filter: blur(8px);
  padding: 10px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.hud-item { display: flex; flex-direction: column; align-items: center; }
.hud-label { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600; text-transform: uppercase; }
.hud-value { font-size: 18px; font-weight: 800; color: #fff; }
.hud-value.green { color: var(--green); }
.hud-value.pink  { color: var(--pink-light); }
.hud-progress { flex: 1; min-width: 140px; }
.jogo-iframe-wrap {
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
}
.jogo-iframe-wrap iframe { width: 100%; height: 100%; border: none; }

.resultado-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.resultado-overlay.hidden { display: none; }
.resultado-box {
  background: #fff; border-radius: var(--radius); padding: 40px 32px;
  text-align: center; max-width: 380px; width: 100%;
  animation: popIn 0.4s ease both;
}
.resultado-icon { font-size: 64px; margin-bottom: 10px; }
.resultado-title { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.resultado-valor { font-size: 36px; font-weight: 800; margin-bottom: 20px; }
.resultado-valor.ganhou { color: var(--green); }
.resultado-valor.perdeu { color: var(--red); }

/* ─── Utilities ──────────────────────────────────────────────────────────────── */
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-sm  { gap: 8px; }
.gap-md  { gap: 16px; }
.gap-lg  { gap: 24px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-md { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-sm { font-size: 13px; }
.text-muted { color: #8a3050; }
.font-bold { font-weight: 700; }
.hidden { display: none !important; }
.w-full { width: 100%; }

/* ─── Container ──────────────────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ─── Divider ────────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: #ffd6e7; margin: 20px 0; }

/* ─── Badge ──────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 50px; font-size: 12px; font-weight: 700;
}
.badge-green  { background: #e6fff4; color: var(--green-dark); }
.badge-red    { background: #ffe8ed; color: var(--red); }
.badge-blue   { background: #e8f3ff; color: #1a6fd4; }
.badge-orange { background: #fff3e8; color: #c85c00; }
.badge-purple { background: #f3e8ff; color: #7b1fa2; }

/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #ffe4ee; }
::-webkit-scrollbar-thumb { background: var(--pink-light); border-radius: 50px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   LANDING PAGE — "A descida da torre" (torre hélice CSS + faixa 7x)
   ═══════════════════════════════════════════════════════════════════════════════ */

#page-landing{background:var(--bg,#0b0612);color:var(--text,#f4ecff)}

/* ── Navbar ── */
.lnd-nav{position:sticky;top:0;z-index:100;background:rgba(8,3,16,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07);padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lnd-nav-brand{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;color:var(--purple);letter-spacing:-.5px;cursor:pointer}
.lnd-nav-brand .brand-logo-icon{color:var(--purple)}
.lnd-nav-menu{display:flex;align-items:center;gap:8px}
.lnd-nav-link{padding:8px 16px;border-radius:50px;font-size:14px;font-weight:600;color:rgba(244,236,255,.72);background:transparent;border:none;cursor:pointer;transition:background .2s,color .2s}
.lnd-nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.lnd-cta-sm{padding:9px 20px;border-radius:12px;font-size:13px;font-weight:900;background:#ff7518;color:#2a0f00;border:2px solid #843600;cursor:pointer;box-shadow:0 3px 0 #843600;transition:transform .08s,box-shadow .08s}
.lnd-cta-sm:active{transform:translateY(3px);box-shadow:0 0 0 #843600}

/* ── Hero ── */
.lnd-hero{position:relative;overflow:hidden;padding:72px 22px 60px;background:radial-gradient(70% 55% at 50% 0,rgba(255,117,24,.14),transparent 60%),linear-gradient(180deg,var(--bg3),var(--bg) 70%)}
.lnd-hero-inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:40px}
.lnd-hero-copy{max-width:560px}
@keyframes lnd-ping{0%{transform:scale(1);opacity:1}100%{transform:scale(2.4);opacity:0}}
.lnd-live-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:7px 16px;margin-bottom:24px;font-size:13px;font-weight:700;color:rgba(244,236,255,.9)}
.lnd-live-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex-shrink:0;position:relative;box-shadow:0 0 10px var(--green)}
.lnd-live-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--green);animation:lnd-ping 1.6s ease-out infinite}
.lnd-title{font-family:'Lilita One','Poppins',sans-serif;font-size:clamp(42px,8vw,76px);font-weight:400;line-height:1.05;color:#fff;margin:0 0 20px;letter-spacing:-.5px}
.lnd-sub{font-size:17px;color:rgba(244,236,255,.66);line-height:1.65;margin:0 0 30px;max-width:440px}
.lnd-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
@keyframes lnd-glow{0%,100%{box-shadow:0 8px 26px rgba(255,117,24,.42)}50%{box-shadow:0 12px 46px rgba(255,117,24,.72),0 0 70px rgba(255,117,24,.22)}}
.lnd-cta-btn{display:inline-flex;align-items:center;gap:10px;background:#ff7518;color:#2a0f00;font-weight:900;font-size:16px;padding:17px 40px;border-radius:16px;border:2.5px solid #843600;cursor:pointer;box-shadow:0 6px 0 #843600;transition:transform .08s,box-shadow .08s;text-transform:uppercase;letter-spacing:.4px}
.lnd-cta-btn:active{transform:translateY(6px);box-shadow:0 0 0 #843600}
.lnd-ghost-btn{background:transparent;border:none;cursor:pointer;color:rgba(244,236,255,.6);font-size:15px;font-weight:600;transition:color .2s;padding:0}
.lnd-ghost-btn:hover{color:#fff}
.lnd-trust{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.lnd-trust-item{display:inline-flex;align-items:center;gap:7px;background:rgba(124,255,79,.08);border:1px solid rgba(124,255,79,.22);border-radius:50px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--green)}
.lnd-trust-item::before{content:'\2726';font-size:11px}

/* ── Torre hélice (CSS) ── */
.lnd-tower{position:relative;justify-self:center;width:min(330px,78vw);height:400px}
.lnd-tower::before{content:'';position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:76%;height:130px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,117,24,.26),rgba(255,117,24,.06) 55%,transparent 72%);filter:blur(5px);pointer-events:none}
.lnd-tower-core{position:absolute;top:30px;bottom:18px;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(var(--purple),rgba(255,117,24,0));opacity:.45}
.lnd-ball{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:66px;height:auto;z-index:6;filter:drop-shadow(0 0 24px rgba(255,117,24,.85));animation:lnd-ball-bob 3.4s ease-in-out infinite}
@keyframes lnd-ball-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-9px)}}
.lnd-rings{position:absolute;top:58px;left:0;right:0;display:flex;flex-direction:column;align-items:center}
.lnd-ring{width:220px;height:220px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from var(--a,0deg),var(--purple) 0 298deg,#190e2a 298deg 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 55%,#000 57%);mask:radial-gradient(circle at 50% 50%,transparent 55%,#000 57%);
  transform:perspective(680px) rotateX(66deg) scale(var(--s,1)) rotate(var(--a,0deg));
  filter:drop-shadow(0 0 16px rgba(255,117,24,.3));opacity:var(--o,1);
  animation:lnd-ring-spin var(--d,9s) linear infinite}
.lnd-ring:not(:first-child){margin-top:-150px}
@keyframes lnd-ring-spin{to{transform:perspective(680px) rotateX(66deg) scale(var(--s,1)) rotate(calc(var(--a,0deg) + 360deg))}}

/* ── Ticker de ganhos ── */
.lnd-ticker{overflow:hidden;background:rgba(8,3,16,.55);border-top:1px solid rgba(255,117,24,.14);border-bottom:1px solid rgba(255,117,24,.14);padding:11px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lnd-ticker-track{display:flex;gap:30px;width:max-content;animation:lnd-marq 30s linear infinite}
.lnd-ticker:hover .lnd-ticker-track{animation-play-state:paused}
.lnd-tk{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:rgba(244,236,255,.8);white-space:nowrap}
.lnd-tk b{color:var(--green);font-weight:800}
.lnd-tk-dot{width:7px;height:7px;border-radius:50%;background:var(--purple);box-shadow:0 0 8px var(--purple)}
@keyframes lnd-marq{to{transform:translateX(-50%)}}

/* ── Seções ── */
.lnd-sec{padding:84px 22px}
.lnd-descida{background:var(--bg)}
.lnd-container{max-width:1000px;margin:0 auto}
.lnd-section-head{text-align:center;margin-bottom:48px}
.lnd-section-head h2{font-family:'Lilita One','Poppins',sans-serif;font-size:clamp(30px,6vw,50px);font-weight:400;letter-spacing:.3px;color:#fff;margin:0 0 8px}
.lnd-section-head p{font-size:16px;color:rgba(244,236,255,.5);margin:0}

/* ── A descida (timeline vertical) ── */
.lnd-steps{list-style:none;margin:0 auto;padding:0;max-width:600px;position:relative}
.lnd-steps::before{content:'';position:absolute;left:41px;top:52px;bottom:52px;width:2px;background:linear-gradient(var(--purple),var(--pink));opacity:.4}
.lnd-step{position:relative;display:grid;grid-template-columns:84px 1fr;gap:22px;align-items:center;padding:16px 0}
.lnd-step-node{position:relative;width:84px;height:84px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:rgba(255,117,24,.14);border:2px solid rgba(255,117,24,.5);box-shadow:0 5px 0 rgba(130,55,0,.55),0 0 0 7px var(--bg)}
.lnd-step-node img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.lnd-step-num{position:absolute;top:-12px;left:-10px;font-size:22px;font-weight:800;color:var(--purple2);text-shadow:0 2px 6px var(--bg)}
.lnd-step-body h3{font-size:19px;font-weight:800;color:#fff;margin:0 0 5px}
.lnd-step-body p{font-size:14.5px;color:rgba(244,236,255,.56);line-height:1.6;margin:0}

/* ── Faixa 7x ── */
.lnd-payout{text-align:center;padding:76px 22px;position:relative;overflow:hidden;background:radial-gradient(55% 120% at 50% 0,rgba(255,117,24,.17),transparent 60%),var(--bg2)}
.lnd-payout-x{font-size:clamp(96px,24vw,190px);line-height:.82;font-weight:800;color:var(--purple);text-shadow:0 0 44px rgba(255,117,24,.5);margin-bottom:6px}
.lnd-payout h2{font-size:clamp(24px,4.5vw,38px);font-weight:800;color:#fff;margin:0 0 10px}
.lnd-payout p{font-size:17px;color:rgba(244,236,255,.66);margin:0}
.lnd-payout p b{color:var(--green);font-weight:800}

/* ── Números ── */
.lnd-stats{background:rgba(8,3,16,.6);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:34px 22px;display:flex;justify-content:center;gap:clamp(22px,6vw,76px);flex-wrap:wrap}
.lnd-stat{text-align:center}
.lnd-stat-val{font-size:34px;font-weight:800;color:var(--purple2);margin-bottom:4px}
.lnd-stat-lbl{font-size:13px;color:rgba(244,236,255,.5);font-weight:600}

/* ── Vozes ── */
.lnd-voices{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.lnd-voices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:920px;margin:0 auto}
.lnd-voice{background:rgba(255,255,255,.04);border:2px solid rgba(255,117,24,.22);border-radius:22px;padding:26px;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.lnd-voice-stars{color:var(--yellow);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.lnd-voice blockquote{font-size:14.5px;color:rgba(244,236,255,.72);line-height:1.68;margin:0 0 20px}
.lnd-voice figcaption{display:flex;align-items:center;gap:12px}
.lnd-voice-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#241433,#120a1f);box-shadow:0 0 0 1.5px rgba(255,117,24,.42),inset 0 0 12px rgba(255,117,24,.1)}
.lnd-voice-avatar img{width:66%;height:66%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.lnd-voice figcaption b{display:block;font-size:14px;font-weight:700;color:#fff}
.lnd-voice figcaption small{font-size:12px;color:rgba(244,236,255,.42)}

/* ── CTA final ── */
.lnd-final{padding:88px 22px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(60% 100% at 50% 120%,rgba(177,75,255,.18),transparent 60%),radial-gradient(70% 80% at 50% -10%,rgba(255,117,24,.2),transparent 60%),var(--bg)}
.lnd-final h2{font-size:clamp(28px,5.5vw,48px);font-weight:800;color:#fff;margin:0 0 14px}
.lnd-final p{color:rgba(244,236,255,.7);font-size:17px;line-height:1.6;max-width:440px;margin:0 auto 32px}

/* ── Footer ── */
.lnd-footer{background:#050009;border-top:1px solid rgba(255,255,255,.06);padding:46px 22px;text-align:center}
.lnd-footer-brand{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:21px;font-weight:800;color:var(--purple2);margin-bottom:18px}
.lnd-footer-brand .brand-logo-icon{color:var(--purple2)}
.lnd-footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.lnd-footer-links a{font-size:14px;color:rgba(244,236,255,.42);transition:color .2s}
.lnd-footer-links a:hover{color:var(--purple2)}
.lnd-footer-warning{max-width:520px;margin:0 auto 18px;font-size:12px;color:rgba(244,236,255,.3);line-height:1.55;padding:12px 16px;border:1px solid rgba(255,255,255,.07);border-radius:10px}
.lnd-footer-copy{font-size:12px;color:rgba(244,236,255,.24)}

/* ── Responsivo ── */
@media(max-width:820px){
  .lnd-hero-inner{grid-template-columns:1fr;text-align:center;gap:12px}
  .lnd-hero-copy{max-width:100%}
  .lnd-live-badge,.lnd-sub{margin-left:auto;margin-right:auto}
  .lnd-actions,.lnd-trust{justify-content:center}
  .lnd-tower{width:min(236px,64vw);height:330px;margin-top:2px}
  .lnd-ball{width:50px}
  .lnd-ring{width:168px;height:168px}
  .lnd-ring:not(:first-child){margin-top:-116px}
  .lnd-rings{top:42px}
}
@media(prefers-reduced-motion:reduce){
  .lnd-ball,.lnd-ring,.lnd-ticker-track,.lnd-live-dot::after,.lnd-cta-btn{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   TEMA SAZONAL — HALLOWEEN  (ativado por <html data-tema="halloween">)
   Para criar outro tema: ver temas.php. Nada aqui afeta o tema 'padrao'.
   ═══════════════════════════════════════════════════════════════ */
#tema-decor{display:none}
[data-tema="halloween"] #tema-decor{display:block;position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
[data-tema="halloween"] #app{position:relative;z-index:1}
[data-tema="halloween"] body{
  background:
    radial-gradient(85% 55% at 82% -12%, rgba(255,117,24,.13), transparent 60%),
    radial-gradient(70% 50% at 8% 112%, rgba(124,255,79,.07), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
[data-tema="halloween"] .td-web{position:absolute;top:0;width:200px;height:200px;background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20stroke%3D%22%23e9dcff%22%20stroke-width%3D%221.3%22%20fill%3D%22none%22%20opacity%3D%220.85%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%200%20L200%2036%22%2F%3E%3Cpath%20d%3D%22M0%200%20L168%2096%22%2F%3E%3Cpath%20d%3D%22M0%200%20L110%20150%22%2F%3E%3Cpath%20d%3D%22M0%200%20L62%20182%22%2F%3E%3Cpath%20d%3D%22M0%200%20L22%20200%22%2F%3E%3Cpath%20d%3D%22M0%200%20L200%2092%22%2F%3E%3Cpath%20d%3D%22M0%200%20L150%20168%22%2F%3E%3Cpath%20d%3D%22M44%200%20Q38%2038%200%2044%22%2F%3E%3Cpath%20d%3D%22M90%200%20Q76%2076%200%2090%22%2F%3E%3Cpath%20d%3D%22M138%200%20Q116%20116%200%20138%22%2F%3E%3Cpath%20d%3D%22M186%200%20Q158%20158%200%20186%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center/contain;opacity:.32}
[data-tema="halloween"] .td-web-tl{left:0}
[data-tema="halloween"] .td-web-tr{right:0;transform:scaleX(-1)}
[data-tema="halloween"] .td-fog{position:absolute;left:-12%;right:-12%;bottom:-70px;height:300px;background:radial-gradient(60% 100% at 50% 100%, rgba(124,255,79,.10), transparent 72%)}
[data-tema="halloween"] .td-bat{position:absolute;width:48px;height:30px;background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2040%22%3E%3Cpath%20fill%3D%22%232d1b47%22%20d%3D%22M32%2010c-3-6-8-8-12-6%201%202%201%204%200%206-3-4-9-5-14-2%204%201%206%204%207%208-2-1-5-1-7%201%204%200%207%202%209%206%203-5%207-7%2010-7-1%202-1%204%200%206%201-2%201-4%200-6%203%200%207%202%2010%207%202-4%205-6%209-6-2-2-5-2-7-1%201-4%203-7%207-8-5-3-11-2-14%202-1-2-1-4%200-6-4-2-9%200-12%206z%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;opacity:.6;will-change:transform;animation:td-fly 11s ease-in-out infinite}
[data-tema="halloween"] .td-bat-1{top:13%;left:7%;animation-delay:0s}
[data-tema="halloween"] .td-bat-2{top:24%;right:10%;transform:scale(.72);animation-delay:2.6s}
[data-tema="halloween"] .td-bat-3{top:52%;left:14%;transform:scale(.6);animation-delay:5.2s;opacity:.45}
@keyframes td-fly{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(34px,-20px) rotate(-5deg)}50%{transform:translate(64px,10px) rotate(4deg)}75%{transform:translate(26px,24px) rotate(-3deg)}}

[data-tema="halloween"] .brand-name{font-family:'Creepster',cursive;font-weight:400;letter-spacing:1.5px;color:var(--purple2);text-shadow:0 0 16px rgba(255,117,24,.55)}

.page.active{animation:pg-in .17s ease both}
@keyframes pg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page.active{animation:none}[data-tema="halloween"] .td-bat{animation:none}}
@media (max-width:640px){
  [data-tema="halloween"] .td-web{width:118px;height:118px;opacity:.32}
  [data-tema="halloween"] .td-bat-3{display:none}
}

/* ═══ Landing — camada do tema Halloween ═══ */
[data-tema="halloween"] .lnd-hero{
  background:
    radial-gradient(72% 56% at 50% 2%, rgba(255,117,24,.20), transparent 60%),
    linear-gradient(180deg, rgba(11,6,18,.50) 0%, rgba(11,6,18,.72) 56%, var(--bg) 100%),
    url('../images/halloween/sky.webp') center top/cover no-repeat;
}
[data-tema="halloween"] .lnd-title,
[data-tema="halloween"] .lnd-section-head h2,
[data-tema="halloween"] .lnd-payout-x,
[data-tema="halloween"] .lnd-final h2,
[data-tema="halloween"] .lnd-step-num{font-family:'Creepster',cursive;font-weight:400;letter-spacing:2px}
[data-tema="halloween"] .lnd-title{letter-spacing:3px;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 30px rgba(255,117,24,.3)}
[data-tema="halloween"] .lnd-section-head h2,[data-tema="halloween"] .lnd-payout h2{color:#fff}
[data-tema="halloween"] .lnd-payout-x{letter-spacing:4px;color:var(--purple)}

/* ═══ Ambiente Halloween — brasas flutuantes + flicker da marca (leve, GPU, 2026-10-15) ═══ */
[data-tema="halloween"] .td-embers{position:absolute;inset:0;overflow:hidden}
[data-tema="halloween"] .td-embers i{position:absolute;bottom:-14px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,80,.95),rgba(255,117,24,0) 70%);opacity:0;
  will-change:transform,opacity;animation:td-ember linear infinite}
@keyframes td-ember{
  0%{transform:translate3d(0,0,0) scale(.55);opacity:0}
  12%{opacity:.75}
  50%{transform:translate3d(12px,-46vh,0) scale(1)}
  88%{opacity:.5}
  100%{transform:translate3d(-8px,-94vh,0) scale(.45);opacity:0}}
[data-tema="halloween"] .td-embers i:nth-child(1){left:7%;animation-duration:14s;animation-delay:-2s}
[data-tema="halloween"] .td-embers i:nth-child(2){left:19%;width:4px;height:4px;animation-duration:17s;animation-delay:-6s}
[data-tema="halloween"] .td-embers i:nth-child(3){left:31%;animation-duration:12s;animation-delay:-9s;background:radial-gradient(circle,rgba(177,75,255,.9),rgba(177,75,255,0) 70%)}
[data-tema="halloween"] .td-embers i:nth-child(4){left:44%;width:6px;height:6px;animation-duration:15s;animation-delay:-3s}
[data-tema="halloween"] .td-embers i:nth-child(5){left:56%;animation-duration:18s;animation-delay:-11s}
[data-tema="halloween"] .td-embers i:nth-child(6){left:68%;width:4px;height:4px;animation-duration:13s;animation-delay:-5s;background:radial-gradient(circle,rgba(124,255,79,.72),rgba(124,255,79,0) 70%)}
[data-tema="halloween"] .td-embers i:nth-child(7){left:80%;animation-duration:16s;animation-delay:-8s}
[data-tema="halloween"] .td-embers i:nth-child(8){left:89%;width:6px;height:6px;animation-duration:19s;animation-delay:-13s}
[data-tema="halloween"] .td-embers i:nth-child(9){left:50%;width:3px;height:3px;animation-duration:11s;animation-delay:-7s}

/* flicker suave de vela na marca (nav/rodapé/painel) */
[data-tema="halloween"] .brand-name{animation:td-flicker 6s ease-in-out infinite}
@keyframes td-flicker{
  0%,100%{opacity:1;text-shadow:0 0 16px rgba(255,117,24,.55)}
  42%{opacity:.98;text-shadow:0 0 21px rgba(255,117,24,.72)}
  45%{opacity:.88;text-shadow:0 0 9px rgba(255,117,24,.4)}
  48%{opacity:1;text-shadow:0 0 18px rgba(255,117,24,.62)}
  73%{opacity:.94;text-shadow:0 0 22px rgba(255,117,24,.72)}
  76%{opacity:1}}

@media (max-width:640px){ [data-tema="halloween"] .td-embers i:nth-child(n+7){display:none} }
@media (prefers-reduced-motion:reduce){
  [data-tema="halloween"] .td-embers i{animation:none;opacity:0}
  [data-tema="halloween"] .brand-name{animation:none}
}

/* ═══ Barra de rolagem personalizada (não-padrão do browser) — 2026-10-15 ═══ */
*{scrollbar-width:thin;scrollbar-color:#ff7518 rgba(255,255,255,.06)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.045);border-radius:50px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff7518,#9d5cff);border-radius:50px;border:2px solid transparent;background-clip:padding-box;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff8c3a,#b14bff);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#ffa352,#c084fc);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}