/* Helix Halloween — overrides + atmosfera neon (roxo + laranja) */
:root {
  --bg: #0a0014;
  --bg-soft: #140028;
  --surface: #1a0830;
  --surface-2: #261045;
  --border: #6b2fb0;
  --text: #ffffff;
  --text-dim: #c9b3e8;
  --primary: #bf00ff;
  --primary-2: #8b2cff;
  --accent: #ff8a00;
  --accent-2: #ffb020;
  --gold: #ffd166;
  --shadow: 0 10px 40px #000000a6;
  --halloween-orange: #ff8a00;
  --halloween-orange-deep: #ff4500;
  --halloween-purple: #bf00ff;
}

html,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, #bf00ff3d, transparent 60%),
    radial-gradient(900px 500px at -10% 40%, #ff8a0033, transparent 55%),
    radial-gradient(700px 400px at 50% 110%, #ff450024, transparent 50%),
    var(--bg) !important;
}

/* Header landing */
.landing .app-header {
  background: linear-gradient(#0a0014e6 0%, #0000 100%) !important;
}

/* CTAs estilo abóbora neon */
.btn-accent,
.panel-cta.btn-accent,
a.btn-accent {
  color: #1a0a00 !important;
  background: linear-gradient(135deg, #ffb020, #ff6a00 45%, #ff4500) !important;
  box-shadow:
    0 0 22px #ff8a0099,
    0 8px 28px #ff450073 !important;
  border-radius: 999px !important;
}

.btn-primary {
  background: linear-gradient(135deg, #d024ff, #8b2cff) !important;
  box-shadow:
    0 0 18px #bf00ff80,
    0 8px 28px #8b2cff66 !important;
}

.btn-gold {
  color: #2a1400 !important;
  background: linear-gradient(135deg, #ffe082, #ff8a00) !important;
  box-shadow: 0 0 18px #ffb02066, 0 8px 28px #ff8a0073 !important;
}

/* Pills / badges com borda roxo→laranja */
.lp-live-pill,
.balance-chip,
.entry-chip,
.lp-chip {
  border-color: #c026ff80 !important;
  box-shadow: 0 0 12px #bf00ff33, inset 0 0 12px #ff8a0014;
}

.lp-title {
  text-shadow: 0 0 24px #bf00ff55, 0 2px 0 #00000080;
}

.lp-title-accent {
  color: #c026ff !important;
  text-shadow: 0 0 22px #bf00ffaa !important;
}

.lp-title-money {
  color: #ff8a00 !important;
  text-shadow: 0 0 22px #ff8a00aa !important;
}

.lp-howto-badge {
  color: #1a0a00 !important;
  background: linear-gradient(135deg, #ffb020, #ff4500) !important;
  box-shadow: 0 4px 14px #ff8a0073 !important;
}

.lp-video-badge {
  border-color: #c026ff99 !important;
  box-shadow: 0 0 16px #bf00ff44;
}

/* Cards com glow Halloween */
.card,
.auth-card,
.panel-card {
  border-color: #6b2fb0 !important;
  box-shadow:
    0 24px 60px #000000a6,
    0 0 28px #bf00ff2e !important;
}

.auth-card {
  background: #1a0830e6 !important;
  border: 1px solid #e040ff59 !important;
}

/* ========== MODAIS / SHEETS / POPUPS ========== */
.modal-overlay,
.sheet-overlay,
.level-limit-overlay {
  background: #050010cc !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-overlay--clear {
  background: #05001073 !important;
}

.modal:not(:has(.site-popup)):not(:has(.site-popup--offer)) {
  background: linear-gradient(165deg, #261045 0%, #1a0830 45%, #12001f 100%) !important;
  border: 1px solid #6b2fb0 !important;
  box-shadow:
    0 24px 60px #000000c2,
    0 0 32px #bf00ff40,
    0 0 18px #ff8a0026 !important;
  color: #fff !important;
}

.site-popup-overlay .modal {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.modal h2,
.sheet-header h2,
.site-popup-body h2,
.install-modal-head h2,
.level-limit-modal h2,
.deposit-confirmed-modal h2,
.result-modal h2,
.tutorial-intro-modal h2 {
  color: #fff !important;
}

.modal p,
.site-popup-msg,
.install-modal-head p,
.install-modal-foot,
.level-limit-msg,
.deposit-confirmed-modal p {
  color: #c9b3e8 !important;
}

/* Site popups */
.site-popup,
.site-popup-body,
.site-popup-offer-inner {
  background: linear-gradient(180deg, #1a0830 0%, #0a0014 100%) !important;
  border-color: #6b2fb0 !important;
  box-shadow:
    0 24px 60px #000000a6,
    0 0 28px #bf00ff33 !important;
}

.site-popup-media {
  background: #0a0014 !important;
}

.site-popup-overlay .modal:before,
.site-popup-offer-inner:before,
.sheet-overlay--center .sheet:before {
  background: conic-gradient(
    from var(--card-spin),
    transparent 0deg 220deg,
    #bf00ff33 250deg,
    #bf00ff 290deg,
    #ff8a00 320deg,
    #ff4500 340deg,
    #e040ff 355deg,
    transparent 360deg
  ) !important;
}

.site-popup-overlay .modal:after,
.site-popup--offer:after {
  box-shadow:
    0 0 16px #bf00ff80,
    0 0 32px #ff8a0040,
    inset 0 0 12px #bf00ff22 !important;
}

.site-popup-offer-badge {
  color: #ffb020 !important;
  background: #0a0014 !important;
  border: 2px solid #ff8a00 !important;
  box-shadow: 0 0 16px #ff8a0066;
}

.site-popup-close,
.sheet-close,
.sheet-close-overlay,
.level-limit-close {
  background: #bf00ff59 !important;
  border: 1px solid #e040ff80 !important;
  color: #fff !important;
}

.site-popup-close:hover,
.sheet-close:hover,
.level-limit-close:hover {
  background: #ff450099 !important;
  border-color: #ff8a00 !important;
}

/* Bottom sheets (depósito / saque / saldo) */
.sheet {
  background: linear-gradient(180deg, #261045 0%, #1a0830 40%, #0a0014 100%) !important;
  border-color: #6b2fb0 !important;
  box-shadow: 0 -12px 40px #bf00ff33 !important;
}

.sheet-overlay--center .sheet {
  background: linear-gradient(165deg, #261045 0%, #1a0830 50%, #12001f 100%) !important;
  box-shadow:
    0 24px 60px #000000c2,
    0 0 24px #bf00ff66,
    0 0 18px #ff8a0033 !important;
}

.sheet-handle {
  background: linear-gradient(90deg, #bf00ff, #ff8a00) !important;
}

.sheet-section {
  background: #ffffff0a !important;
  border-color: #6b2fb080 !important;
}

.sheet-hero {
  background: #0a0014 !important;
}

.sheet-cta {
  color: #1a0a00 !important;
  background: linear-gradient(135deg, #ffb020, #ff6a00 45%, #ff4500) !important;
  box-shadow: 0 0 22px #ff8a0099, 0 8px 28px #ff450073 !important;
}

/* Deposit confirmed */
.deposit-confirmed-icon {
  background: linear-gradient(145deg, #ffb020, #ff4500) !important;
  box-shadow: 0 0 0 8px #ff8a0026, 0 0 28px #ff8a0066, 0 14px 35px #bf00ff33 !important;
}

.deposit-confirmed-modal h2 {
  color: #ffb020 !important;
  text-shadow: 0 0 18px #ff8a0066;
}

/* Result / win-lose */
.result-modal--win:before {
  background: radial-gradient(at 50% -10%, #ff8a0040 0%, #bf00ff14 40%, #0000 70%) !important;
}

.result-value.win {
  background: linear-gradient(135deg, #ffe082 0%, #ff8a00 50%, #ff4500 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 12px #ff8a0099) !important;
}

.result-value.lose {
  color: #ff6b7a !important;
  text-shadow: 0 2px 18px #ff547080 !important;
}

/* Install / tutorial / level / replay */
.install-modal-badge {
  color: #ffb020 !important;
  background: #bf00ff33 !important;
  box-shadow: 0 0 20px #bf00ff44;
}

.install-modal-steps,
.level-limit-modal,
.replay-picker-modal,
.tutorial-intro-modal,
.tutorial-win-modal {
  color: #fff;
}

.level-limit-badge {
  color: #0a0014 !important;
}

.preset-chip.active,
.preset-chip:hover {
  border-color: #ff8a00 !important;
  color: #ffb020 !important;
  background: #ff8a0026 !important;
  box-shadow: 0 0 12px #ff8a0033;
}

.pix-box {
  background: #140028 !important;
  border-color: #6b2fb0 !important;
  color: #c9b3e8 !important;
}

.saldo-row .coin {
  color: #ff8a00 !important;
  background: #ff8a0026 !important;
  border-color: #ff8a0066 !important;
  box-shadow: 0 0 12px #ff8a0033;
}

/* Inputs */
.input:focus {
  border-color: #ff8a00 !important;
  box-shadow: 0 0 0 3px #ff8a0033, 0 0 16px #bf00ff33;
}

/* Links */
a {
  color: var(--accent-2);
}

a:hover {
  color: var(--accent);
}

/* Hero: arte Halloween mais presente */
.lp-hero {
  min-height: min(92vh, 820px);
}

.lp-hero-bg {
  background:
    linear-gradient(180deg, #0a001466 0%, #0a0014a8 52%, var(--bg) 100%),
    var(--panel-bg-image) center bottom / cover no-repeat !important;
}

@media (width >= 768px) {
  .lp-hero-bg {
    background:
      linear-gradient(180deg, #0a001459 0%, #0a0014b3 58%, var(--bg) 100%),
      var(--panel-bg-image) center bottom / cover no-repeat !important;
  }
}

/* Divisores com gradiente roxo→laranja */
.lp-divider,
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #bf00ff, #ff8a00, transparent);
  box-shadow: 0 0 10px #bf00ff66;
}

/* Painel / app shell */
.panel-shell,
.app-shell,
.game-shell {
  background-color: transparent;
}

/* Bottom nav glow */
.bottom-nav,
.app-tabbar {
  border-top-color: #6b2fb0 !important;
  background: #0a0014f2 !important;
  box-shadow: 0 -8px 28px #bf00ff22;
}

/* Scrollbar sutil */
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #bf00ff, #ff8a00);
  border-radius: 8px;
}

/* Performance: menos custo de paint em camadas pesadas */
.lp-hero-bg,
.panel-shell:before {
  will-change: auto;
  contain: paint;
}

.modal-overlay,
.sheet-overlay {
  contain: layout paint;
}

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